diff --git a/frontend/index.html b/frontend/index.html index ffa57ae2..20c9a847 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -23,7 +23,7 @@ - Meter Manager DB + Meter Manager diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a7518105..9ea3c7e9 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,7 +15,7 @@ "@hookform/resolvers": "^3.2.0", "@mui/icons-material": "^5.10.6", "@mui/material": "^5.15.14", - "@mui/x-charts": "^8.5.3", + "@mui/x-charts": "^8.0.0-beta.3", "@mui/x-data-grid": "^7.0.0", "@mui/x-date-pickers": "^6.10.0", "dayjs": "^1.11.9", @@ -134,9 +134,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.27.6", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz", - "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==", + "version": "7.28.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz", + "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==", "license": "MIT", "engines": { "node": ">=6.9.0" @@ -1511,12 +1511,12 @@ } }, "node_modules/@mui/types": { - "version": "7.4.3", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.3.tgz", - "integrity": "sha512-2UCEiK29vtiZTeLdS2d4GndBKacVyxGvReznGXGr+CzW/YhjIX+OHUdCIczZjzcRAgKBGmE9zCIgoV9FleuyRQ==", + "version": "7.4.6", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.6.tgz", + "integrity": "sha512-NVBbIw+4CDMMppNamVxyTccNv0WxtDb7motWDlMeSC8Oy95saj1TIZMGynPpFLePt3yOD8TskzumeqORCgRGWw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.27.1" + "@babel/runtime": "^7.28.3" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1558,20 +1558,21 @@ } }, "node_modules/@mui/x-charts": { - "version": "8.5.3", - "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-8.5.3.tgz", - "integrity": "sha512-aLU3KNA5bfKufxCPxBYx34xOn1mY5xaYGxxImEIQhL1BDnsjdkeF7b7gitL62XHpJe7ceU0nr2PbAr8msU0ZBQ==", + "version": "8.0.0-beta.3", + "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-8.0.0-beta.3.tgz", + "integrity": "sha512-3SYH5DoMv/xL0gGo7xKtuTu2GsNlgHCur7zalP7kWeIjTgCXib+ZUixGEMdfdyRcDEADkXWFssYw2QhsXA+rNg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.27.6", - "@mui/utils": "^7.1.1", - "@mui/x-charts-vendor": "8.5.3", - "@mui/x-internals": "8.5.3", + "@babel/runtime": "^7.27.0", + "@mui/utils": "^7.0.0", + "@mui/x-charts-vendor": "8.0.0-beta.3", + "@mui/x-internals": "8.0.0-beta.3", "bezier-easing": "^2.1.0", "clsx": "^2.1.1", "prop-types": "^15.8.1", + "react-is": "^18.3.1 || ^19.0.0", "reselect": "^5.1.1", - "use-sync-external-store": "^1.5.0" + "use-sync-external-store": "^1.4.0" }, "engines": { "node": ">=14.0.0" @@ -1594,12 +1595,12 @@ } }, "node_modules/@mui/x-charts-vendor": { - "version": "8.5.3", - "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-8.5.3.tgz", - "integrity": "sha512-H05cb0c2qfRhWLPcwtiIU8BOcKTrMNvhgmRAvJJXpmlirOA1km8dUlR71VeUvJiCthhVIHKyFkPPzFYKgHAfng==", + "version": "8.0.0-beta.3", + "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-8.0.0-beta.3.tgz", + "integrity": "sha512-mcelNPzVYyrU8yVkW/CcTGw0doFLtSFj1Pw8q8LghvJW3rMJUeoHxU2WVOUU2+ha4sHSlEBCPwRZvJBJnoWyqA==", "license": "MIT AND ISC", "dependencies": { - "@babel/runtime": "^7.27.6", + "@babel/runtime": "^7.27.0", "@types/d3-color": "^3.1.3", "@types/d3-delaunay": "^6.0.4", "@types/d3-interpolate": "^3.0.4", @@ -1673,17 +1674,17 @@ } }, "node_modules/@mui/x-charts/node_modules/@mui/utils": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.1.1.tgz", - "integrity": "sha512-BkOt2q7MBYl7pweY2JWwfrlahhp+uGLR8S+EhiyRaofeRYUWL2YKbSGQvN4hgSN1i8poN0PaUiii1kEMrchvzg==", + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.2.tgz", + "integrity": "sha512-4DMWQGenOdLnM3y/SdFQFwKsCLM+mqxzvoWp9+x2XdEzXapkznauHLiXtSohHs/mc0+5/9UACt1GdugCX2te5g==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.27.1", - "@mui/types": "^7.4.3", - "@types/prop-types": "^15.7.14", + "@babel/runtime": "^7.28.3", + "@mui/types": "^7.4.6", + "@types/prop-types": "^15.7.15", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^19.1.0" + "react-is": "^19.1.1" }, "engines": { "node": ">=14.0.0" @@ -1703,14 +1704,13 @@ } }, "node_modules/@mui/x-charts/node_modules/@mui/x-internals": { - "version": "8.5.3", - "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.5.3.tgz", - "integrity": "sha512-ImCg4E3DT3XoDIZO0pNCbB7iw14N+YCFY3J1V28POwCD7P2f3HSIz4jwzM006oYxI6bqeE6LMfpdPRDW6s6dQw==", + "version": "8.0.0-beta.3", + "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.0.0-beta.3.tgz", + "integrity": "sha512-crbtLMWhI0sFXaZLknXPEGEaPLxpdIe8XAkJIr0HXD563TagGeyVk8lbNLoa5H3mVHWxmzNYiGUA4ns5Q6urQg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.27.6", - "@mui/utils": "^7.1.1", - "reselect": "^5.1.1" + "@babel/runtime": "^7.27.0", + "@mui/utils": "^7.0.0" }, "engines": { "node": ">=14.0.0" @@ -1720,7 +1720,6 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, @@ -2773,9 +2772,9 @@ "license": "MIT" }, "node_modules/@types/prop-types": { - "version": "15.7.14", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", - "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", + "version": "15.7.15", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", + "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", "license": "MIT" }, "node_modules/@types/react": { @@ -7529,9 +7528,9 @@ } }, "node_modules/react-is": { - "version": "19.1.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz", - "integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==", + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz", + "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==", "license": "MIT" }, "node_modules/react-leaflet": { diff --git a/frontend/package.json b/frontend/package.json index 935b4f33..6650a1e8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,7 +17,7 @@ "@hookform/resolvers": "^3.2.0", "@mui/icons-material": "^5.10.6", "@mui/material": "^5.15.14", - "@mui/x-charts": "^8.5.3", + "@mui/x-charts": "^8.0.0-beta.3", "@mui/x-data-grid": "^7.0.0", "@mui/x-date-pickers": "^6.10.0", "dayjs": "^1.11.9", diff --git a/frontend/src/AppLayout.tsx b/frontend/src/AppLayout.tsx index 9c9c85ae..98281aaf 100644 --- a/frontend/src/AppLayout.tsx +++ b/frontend/src/AppLayout.tsx @@ -2,7 +2,6 @@ import { useAuthUser } from "react-auth-kit"; import { useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import { Box } from "@mui/material"; -import { Theme } from "@mui/material/styles"; import { SecurityScope } from "./interfaces"; import Topbar from "./components/Topbar"; import Sidenav from "./sidenav"; @@ -75,13 +74,6 @@ export const AppLayout = ({ setDrawerOpen(!drawerOpen)} - sx={(theme: Theme) => ({ - zIndex: theme.zIndex.drawer + 1, - transition: theme.transitions.create(["margin", "width"], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - })} /> ({ + sx={{ flexGrow: 1, flexShrink: 1, minWidth: 0, p: 3, mt: 8, - ...theme.mixins.toolbar, - transition: theme.transitions.create("margin", { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - })} + }} > {pageComponent} - + ); }; diff --git a/frontend/src/components/BackgroundBox.tsx b/frontend/src/components/BackgroundBox.tsx index bc3f96a1..a2c5bd4f 100644 --- a/frontend/src/components/BackgroundBox.tsx +++ b/frontend/src/components/BackgroundBox.tsx @@ -9,6 +9,8 @@ export const BackgroundBox: React.FC = ({ return ( { )} diff --git a/frontend/src/views/MonitoringWells/MonitoringWellsView.tsx b/frontend/src/views/MonitoringWells/MonitoringWellsView.tsx index 038b60e5..66567801 100644 --- a/frontend/src/views/MonitoringWells/MonitoringWellsView.tsx +++ b/frontend/src/views/MonitoringWells/MonitoringWellsView.tsx @@ -186,6 +186,7 @@ export const MonitoringWellsView = () => { )} diff --git a/frontend/src/views/Parts/MeterTypesTable.tsx b/frontend/src/views/Parts/MeterTypesTable.tsx index c26764bb..b57e4621 100644 --- a/frontend/src/views/Parts/MeterTypesTable.tsx +++ b/frontend/src/views/Parts/MeterTypesTable.tsx @@ -6,12 +6,15 @@ import { CardContent, Chip, Grid, + InputAdornment, + Stack, TextField, + Typography, } from "@mui/material"; +import { Search } from "@mui/icons-material"; import { useGetMeterTypeList } from "../../service/ApiServiceNew"; import AddIcon from "@mui/icons-material/Add"; import FormatListBulletedOutlinedIcon from "@mui/icons-material/FormatListBulletedOutlined"; -import SearchIcon from "@mui/icons-material/Search"; import { MeterTypeLU } from "../../interfaces"; import TristateToggle from "../../components/TristateToggle"; import GridFooterWithButton from "../../components/GridFooterWithButton"; @@ -69,67 +72,76 @@ export const MeterTypesTable = ({ }, [meterTypeSearchQuery, meterTypes.data, inUseFilter]); return ( - + - - - + + + - {" "} -  Search Meter Types - - } + sx={{ m: 0, width: '100%', maxWidth: '75rem' }} + placeholder="Search Meter Types..." variant="outlined" size="small" value={meterTypeSearchQuery} - onChange={(event: any) => - setMeterTypeSearchQuery(event.target.value) - } - sx={{ marginBottom: "10px" }} + onChange={(event: any) => setMeterTypeSearchQuery(event.target.value)} + InputProps={{ + startAdornment: ( + + + + ), + }} /> - -
-
Choose Filters:
- setInUseFilter(state)} - /> -
+ + Choose Filters: + setInUseFilter(state)} + /> - { - setSelectedMeterType(selectedRow.row); - }} - slots={{ footer: GridFooterWithButton }} - slotProps={{ - footer: { - button: ( - - ), - }, - }} - disableColumnFilter - /> + + { + setSelectedMeterType(selectedRow.row); + }} + slots={{ footer: GridFooterWithButton }} + slotProps={{ + footer: { + button: ( + + + + ), + }, + }} + disableColumnFilter + /> + - + ); }; diff --git a/frontend/src/views/Parts/PartsTable.tsx b/frontend/src/views/Parts/PartsTable.tsx index fb6db54f..1ed7a630 100644 --- a/frontend/src/views/Parts/PartsTable.tsx +++ b/frontend/src/views/Parts/PartsTable.tsx @@ -6,12 +6,15 @@ import { CardContent, Chip, Grid, + InputAdornment, + Stack, TextField, + Typography, } from "@mui/material"; +import { Search } from "@mui/icons-material"; import FormatListBulletedOutlinedIcon from "@mui/icons-material/FormatListBulletedOutlined"; import { useGetParts } from "../../service/ApiServiceNew"; import AddIcon from "@mui/icons-material/Add"; -import SearchIcon from "@mui/icons-material/Search"; import { Part } from "../../interfaces"; import TristateToggle from "../../components/TristateToggle"; import GridFooterWithButton from "../../components/GridFooterWithButton"; @@ -82,70 +85,80 @@ export const PartsTable = ({ }, [partSearchQuery, partsList.data, inUseFilter, commonlyUsedFilter]); return ( - + - - - + + + - {" "} -  Search Parts - - } + sx={{ m: 0, width: '100%', maxWidth: '75rem' }} + placeholder="Search Parts..." variant="outlined" size="small" value={partSearchQuery} onChange={(event: any) => setPartSearchQuery(event.target.value)} - sx={{ marginBottom: "10px" }} + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + + Choose Filters: + setInUseFilter(state)} + /> + + setCommonlyUsedFilter(state) + } /> - -
-
Choose Filters:
- setInUseFilter(state)} - /> - - setCommonlyUsedFilter(state) - } - /> -
+ + { + setSelectedPartID(selectedRow.row.id); + }} + slots={{ footer: GridFooterWithButton }} + slotProps={{ + footer: { + button: ( + + + + ), + }, + }} + disableColumnFilter + /> - { - setSelectedPartID(selectedRow.row.id); - }} - slots={{ footer: GridFooterWithButton }} - slotProps={{ - footer: { - button: ( - - ), - }, - }} - disableColumnFilter - /> ); diff --git a/frontend/src/views/Parts/PartsView.tsx b/frontend/src/views/Parts/PartsView.tsx index dd51163e..18b4d7ab 100644 --- a/frontend/src/views/Parts/PartsView.tsx +++ b/frontend/src/views/Parts/PartsView.tsx @@ -24,46 +24,32 @@ export const PartsView = () => { return ( - - - - - - - - + + + - - - - - - - + + + + + + + + - + ); }; diff --git a/frontend/src/views/Reports/Chlorides/index.tsx b/frontend/src/views/Reports/Chlorides/index.tsx index 6aa5fb10..156bc0ea 100644 --- a/frontend/src/views/Reports/Chlorides/index.tsx +++ b/frontend/src/views/Reports/Chlorides/index.tsx @@ -197,28 +197,28 @@ export const ChloridesReportView = () => { container justifyContent="flex-start" alignContent="center" - gap={2} + spacing={2} paddingTop={2} paddingBottom={2} > - + - + { const authHeader = useAuthHeader(); const techiciansQuery = useQuery({ @@ -305,45 +299,43 @@ export const MaintenanceReportView = () => { - + - + - + - + { {...params} label="Technician(s)" sx={{ minWidth: "15rem" }} - size="medium" + size="small" placeholder="Begin typing to search" /> ); @@ -394,59 +386,75 @@ export const MaintenanceReportView = () => { /> - - - - Number of Repairs + + + + + Number of Repairs + {numberOfRepairsPieChartData?.length ? `: ${numberOfRepairsPieChartData?.length}` : null} + 10 ? 0 : 10, + paddingAngle: numberOfRepairsPieChartData?.length > 10 ? 0 : 1, + cornerRadius: numberOfRepairsPieChartData?.length > 10 ? 0 : 10, }, ]} - slotProps={{ - legend: { - direction: "horizontal", - position: { - vertical: "bottom", - horizontal: "center", - }, - }, + hideLegend={true} + sx={{ + width: "100%", + height: "100%", }} - {...size} /> - - + + + + + + Number of Preventative Maintenances + {numberOfPMsPieChartData?.length ? `: ${numberOfPMsPieChartData?.length}` : null} 10 ? 0 : 10, + paddingAngle: numberOfPMsPieChartData?.length > 10 ? 0 : 1, + cornerRadius: numberOfPMsPieChartData?.length > 10 ? 0 : 10, }, ]} - slotProps={{ - legend: { - direction: "horizontal", - position: { - vertical: "bottom", - horizontal: "center", - }, - }, + hideLegend={true} + sx={{ + width: "100%", + height: "100%", }} - {...size} /> - + - + { }} /> - - - - + + diff --git a/frontend/src/views/Reports/MonitoringWells/index.tsx b/frontend/src/views/Reports/MonitoringWells/index.tsx index 4076446c..445223c7 100644 --- a/frontend/src/views/Reports/MonitoringWells/index.tsx +++ b/frontend/src/views/Reports/MonitoringWells/index.tsx @@ -35,7 +35,9 @@ import dayjs, { Dayjs } from "dayjs"; import { BackgroundBox } from "../../../components/BackgroundBox"; import { CustomCardHeader } from "../../../components/CustomCardHeader"; import { DataGrid, GridColDef } from "@mui/x-data-grid"; -import { LineChart } from "@mui/x-charts"; +import { + LineChart, +} from "@mui/x-charts"; import { MonitoredWell, WellMeasurementDTO } from "../../../interfaces"; import { useFetchWithAuth } from "../../../hooks"; import { separateAndSortMonitoredWells } from "../../../utils"; @@ -82,11 +84,6 @@ const defaultSchema = { comparisonYear: null, }; -const size = { - width: 1000, - height: 600, -}; - export const MonitoringWellsReportView = () => { const theme = useTheme(); const baseStyle = css` @@ -376,35 +373,35 @@ export const MonitoringWellsReportView = () => { container justifyContent="flex-start" alignContent="center" - gap={2} + spacing={2} paddingTop={2} paddingBottom={2} > - + - + - + { return ( ); @@ -490,8 +486,8 @@ export const MonitoringWellsReportView = () => { /> - - + + { /> - + Depth of Water over Time - { - const date = dayjs(value); - const isMidnight = date.hour() === 0 && date.minute() === 0; - return isMidnight - ? date.format("MMM D, YYYY") - : date.format("MMM D, YYYY HH:mm"); - } - }]} - yAxis={[{ - reverse: true, - }]} - series={series} - slotProps={{ - legend: { - direction: "horizontal", - position: { - vertical: "bottom", - horizontal: "center", + + { + const date = dayjs(value); + const isMidnight = date.hour() === 0 && date.minute() === 0; + return isMidnight + ? date.format("MMM D, YYYY") + : date.format("MMM D, YYYY HH:mm"); + } + }]} + yAxis={[{ + reverse: true, + }]} + series={series} + slotProps={{ + legend: { + direction: "horizontal", + position: { + vertical: "bottom", + horizontal: "center", + }, }, - }, - }} - {...size} - /> + }} + sx={{ width: "100%", height: "100%" }} + /> + - + { }} /> - - - - + + diff --git a/frontend/src/views/Reports/PartsUsed/index.tsx b/frontend/src/views/Reports/PartsUsed/index.tsx index 7f0b1314..7fff7868 100644 --- a/frontend/src/views/Reports/PartsUsed/index.tsx +++ b/frontend/src/views/Reports/PartsUsed/index.tsx @@ -306,39 +306,39 @@ export const PartsUsedReportView = () => { container justifyContent="flex-start" alignContent="center" - gap={2} + spacing={2} padding={2} > - + - + - + { getOptionLabel={(option: any) => option.type.name} /> - + { renderInput={(params) => ( @@ -400,7 +400,7 @@ export const PartsUsedReportView = () => { }} /> - + { /> - + { }} /> - - - - + + diff --git a/frontend/src/views/Settings.tsx b/frontend/src/views/Settings.tsx index bd6f4fac..253fe3c6 100644 --- a/frontend/src/views/Settings.tsx +++ b/frontend/src/views/Settings.tsx @@ -7,12 +7,13 @@ import { Divider, Typography, Box, - Button, + // Button, MenuItem, TextField, Grid, Alert, ListItemIcon, + Chip, } from "@mui/material"; import SettingsIcon from "@mui/icons-material/Settings"; import { useAuthUser } from "react-auth-kit"; @@ -55,6 +56,28 @@ const schema = yup.object().shape({ const FALLBACK_REDIRECT = "/"; +const RoleChip = ({ role }: { role: string }) => { + switch (role) { + case "Admin": { + return ; + } + case "Technician": { + return ; + } + default: { + return ; + } + } +} + +const IsActiveChip = ({ active }: { active: boolean }) => { + return active ? ( + + ) : ( + + ); +} + export const Settings = () => { const authUser = useAuthUser(); const [savedMessage, setSavedMessage] = useState(""); @@ -74,7 +97,7 @@ export const Settings = () => { control, handleSubmit, watch, - formState: { errors, isValid }, + // formState: { errors, isValid }, } = useForm({ resolver: yupResolver(schema), mode: "onChange", @@ -112,38 +135,74 @@ export const Settings = () => { - + - Full Name: {user?.full_name ?? "N/A"} + Full Name:{" "} + + {user?.full_name ?? "N/A"} + - + - Email: {user?.email ?? "N/A"} + Email:{" "} + + {user?.email ?? "N/A"} + - + - Username: {user?.username ?? "N/A"} + Username:{" "} + + {user?.username ?? "N/A"} + - + - Role: {user?.user_role?.name ?? "N/A"} + Role: + - + - Active: {!user?.disabled ? "Yes" : "No"} + Active: + - -
- + Preferences { render={({ field }) => ( { )} /> - - + {/* + + Password Reset - + ( { )} /> - + ( { )} /> - + ( { + */} {savedMessage && ( diff --git a/frontend/src/views/UserManagement/PermissionsTable.tsx b/frontend/src/views/UserManagement/PermissionsTable.tsx index 319dffa9..0f6a66a8 100644 --- a/frontend/src/views/UserManagement/PermissionsTable.tsx +++ b/frontend/src/views/UserManagement/PermissionsTable.tsx @@ -1,9 +1,9 @@ import { useEffect, useState } from "react"; import { DataGrid, GridColDef } from "@mui/x-data-grid"; -import { Button, Card, CardContent, Grid, TextField } from "@mui/material"; +import { Button, Card, CardContent, Grid, InputAdornment, TextField, Tooltip } from "@mui/material"; import { useGetSecurityScopes } from "../../service/ApiServiceNew"; import AddIcon from "@mui/icons-material/Add"; -import SearchIcon from "@mui/icons-material/Search"; +import { Search } from "@mui/icons-material"; import FormatListBulletedOutlinedIcon from "@mui/icons-material/FormatListBulletedOutlined"; import { SecurityScope } from "../../interfaces"; import GridFooterWithButton from "../../components/GridFooterWithButton"; @@ -33,48 +33,60 @@ export const PermissionsTable = () => { }, [permissionSearchQuery, securityScopesList.data]); return ( - + - - - - -  Search Permissions - - } - variant="outlined" - size="small" - value={permissionSearchQuery} - onChange={(event: any) => - setPermissionSearchQuery(event.target.value) - } - sx={{ marginBottom: "10px" }} - /> + + + + setPermissionSearchQuery(event.target.value)} + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + + + + + + + ), + }, + }} + disableColumnFilter + /> + - - - Permissions must be configured by a developer - - ), - }, - }} - disableColumnFilter - /> ); diff --git a/frontend/src/views/UserManagement/RolesTable.tsx b/frontend/src/views/UserManagement/RolesTable.tsx index f2cf0f8a..6ccf9994 100644 --- a/frontend/src/views/UserManagement/RolesTable.tsx +++ b/frontend/src/views/UserManagement/RolesTable.tsx @@ -6,12 +6,13 @@ import { CardContent, Chip, Grid, + InputAdornment, TextField, } from "@mui/material"; +import { Search } from "@mui/icons-material"; import { useGetRoles } from "../../service/ApiServiceNew"; import AddIcon from "@mui/icons-material/Add"; import FormatListBulletedOutlinedIcon from "@mui/icons-material/FormatListBulletedOutlined"; -import SearchIcon from "@mui/icons-material/Search"; import { UserRole } from "../../interfaces"; import GridFooterWithButton from "../../components/GridFooterWithButton"; import { CustomCardHeader } from "../../components/CustomCardHeader"; @@ -65,57 +66,64 @@ export const RolesTable = ({ }, [roleSearchQuery, rolesList.data]); return ( - + - - - - {" "} -  Search Roles - - } - variant="outlined" - size="small" - value={roleSearchQuery} - onChange={(event: any) => setRoleSearchQuery(event.target.value)} - sx={{ marginBottom: "10px" }} - /> + + + + setRoleSearchQuery(event.target.value)} + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + + { + setSelectedRole( + rolesList.data?.find( + (role: UserRole) => role.id == selectedRow.row.id, + ), + ); + }} + slots={{ footer: GridFooterWithButton }} + slotProps={{ + footer: { + button: ( + + ), + }, + }} + disableColumnFilter + /> + - { - setSelectedRole( - rolesList.data?.find( - (role: UserRole) => role.id == selectedRow.row.id, - ), - ); - }} - slots={{ footer: GridFooterWithButton }} - slotProps={{ - footer: { - button: ( - - ), - }, - }} - disableColumnFilter - /> ); diff --git a/frontend/src/views/UserManagement/UserManagementView.tsx b/frontend/src/views/UserManagement/UserManagementView.tsx index 63c2144f..9855882c 100644 --- a/frontend/src/views/UserManagement/UserManagementView.tsx +++ b/frontend/src/views/UserManagement/UserManagementView.tsx @@ -26,56 +26,34 @@ export const UserManagementView = () => { return ( - - - - - - - + + - - - - - - - + + - - - - + + + + + + + + - + ); }; diff --git a/frontend/src/views/UserManagement/UsersTable.tsx b/frontend/src/views/UserManagement/UsersTable.tsx index 25a1505e..ecc38d27 100644 --- a/frontend/src/views/UserManagement/UsersTable.tsx +++ b/frontend/src/views/UserManagement/UsersTable.tsx @@ -6,12 +6,14 @@ import { CardContent, Chip, Grid, + InputAdornment, TextField, + Typography, } from "@mui/material"; +import { Search } from "@mui/icons-material"; import { useGetUserAdminList } from "../../service/ApiServiceNew"; import AddIcon from "@mui/icons-material/Add"; import FormatListBulletedOutlinedIcon from "@mui/icons-material/FormatListBulletedOutlined"; -import SearchIcon from "@mui/icons-material/Search"; import { User } from "../../interfaces"; import TristateToggle from "../../components/TristateToggle"; import GridFooterWithButton from "../../components/GridFooterWithButton"; @@ -85,77 +87,80 @@ export const UsersTable = ({ }, [userSearchQuery, usersList.data, isActiveFilter, isTechnicianFilter]); return ( - + - - - + + + - {" "} -  Search Users - - } + sx={{ m: 0, width: '100%', maxWidth: '75rem' }} + placeholder="Search Users..." variant="outlined" size="small" value={userSearchQuery} onChange={(event: any) => setUserSearchQuery(event.target.value)} - sx={{ marginBottom: "10px" }} + InputProps={{ + startAdornment: ( + + + + ), + }} /> - -
-
Choose Filters:
- - setIsActiveFilter(state) - } - /> - - setIsTechnicianFilter(state) - } - /> -
+ + Choose Filters: + + setIsActiveFilter(state) + } + /> + + setIsTechnicianFilter(state) + } + /> - { - setSelectedUser( - usersList.data?.find( - (user: User) => user.id == selectedRow.row.id, - ), - ); - }} - slots={{ footer: GridFooterWithButton }} - slotProps={{ - footer: { - button: ( - - ), - }, - }} - disableColumnFilter - /> + + { + setSelectedUser( + usersList.data?.find( + (user: User) => user.id == selectedRow.row.id, + ), + ); + }} + slots={{ footer: GridFooterWithButton }} + slotProps={{ + footer: { + button: ( + + ), + }, + }} + disableColumnFilter + /> + - + ); };