From fdff9c1dd92addeaee32d0c558f957e3c1a9b07d Mon Sep 17 00:00:00 2001 From: jaanvi Date: Mon, 24 Mar 2025 18:33:32 +0530 Subject: [PATCH] Ui fixes --- src/components/CustomTable/index.tsx | 30 ++++++--- src/components/LineChartCard/index.tsx | 35 ++++++++--- src/components/MainGrid/index.tsx | 2 +- src/components/MenuContent/index.tsx | 41 +++++++++---- src/components/ResourcePieChart/index.tsx | 23 +++++-- src/components/SessionsChart/index.tsx | 66 +++++++++++++++----- src/components/SideMenu/index.tsx | 19 +++--- src/components/StatCard/index.tsx | 25 +++++++- src/components/barChartCard/index.tsx | 51 +++++++++------- src/lib/https.ts | 5 +- src/pages/AdminList/index.tsx | 6 +- src/pages/ManagerList/index.tsx | 2 +- src/pages/ProfilePage/index.tsx | 74 ++++++++++++++++++++--- src/redux/slices/managerSlice.ts | 1 + 14 files changed, 281 insertions(+), 99 deletions(-) diff --git a/src/components/CustomTable/index.tsx b/src/components/CustomTable/index.tsx index 2090518..b0a76f9 100644 --- a/src/components/CustomTable/index.tsx +++ b/src/components/CustomTable/index.tsx @@ -257,12 +257,11 @@ const CustomTable: React.FC = ({ ? "Slot" : "List"} - {/* Search & Buttons Section */} = ({ backgroundColor: "#272727", "& .MuiOutlinedInput-root": { borderRadius: "12px", + width: "422px", + height: "44px", + borderWidth: "1px", + padding: "14px 12px 14px 12px", + gap: "16px", "& fieldset": { borderColor: "#FFFFFF" }, "&:hover fieldset": { borderColor: "#FFFFFF" }, "&.Mui-focused fieldset": { @@ -312,6 +316,7 @@ const CustomTable: React.FC = ({ color: "white", borderRadius: "8px", width: "184px", + marginRight: "16px", "&:hover": { backgroundColor: "#439BC1" }, }} onClick={() => handleClickOpen()} @@ -343,15 +348,17 @@ const CustomTable: React.FC = ({ width: "44px", height: "44px", borderRadius: "8px", - backgroundColor: "#272727", + backgroundColor: "#1C1C1C", color: "#52ACDF", "&:hover": { backgroundColor: "#333333" }, + "*:where([data-mui-color-scheme='dark']) &": { + backgroundColor: "#1C1C1C", + }, }} > - {/* Table Section */} = ({ sx={{ backgroundColor: "#272727", borderBottom: "none", + ".css-1ex4ubw-MuiTableCell-root.MuiTableCell-head ": + { + backgroundColor: "#272727", + }, }} > {" "} @@ -384,7 +395,13 @@ const CustomTable: React.FC = ({ ))} - + {currentRows.map((row, rowIndex) => ( {columns.map((column) => ( @@ -433,7 +450,6 @@ const CustomTable: React.FC = ({ - {/* Pagination */} = ({ }} /> - {/* Menu Actions */} {open && ( = ({ )} - {/* Modals */} {deleteModal && ( @@ -43,7 +43,14 @@ export default function LineChartCard() { return (
Weekly - +
diff --git a/src/components/MainGrid/index.tsx b/src/components/MainGrid/index.tsx index 491dc4e..f3bf217 100644 --- a/src/components/MainGrid/index.tsx +++ b/src/components/MainGrid/index.tsx @@ -45,7 +45,7 @@ export default function MainGrid() { theme.spacing(2) }} diff --git a/src/components/MenuContent/index.tsx b/src/components/MenuContent/index.tsx index 9285c40..f8eeb7c 100644 --- a/src/components/MenuContent/index.tsx +++ b/src/components/MenuContent/index.tsx @@ -12,7 +12,12 @@ import { useSelector } from "react-redux"; import { RootState } from "../../redux/store/store"; import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined"; import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined"; - +import EvStationOutlinedIcon from "@mui/icons-material/EvStationOutlined"; +import EvStationIcon from "@mui/icons-material/EvStation"; +import BookOnlineOutlinedIcon from "@mui/icons-material/BookOnlineOutlined"; +import ChecklistSharpIcon from "@mui/icons-material/ChecklistSharp"; +import AnalyticsOutlinedIcon from "@mui/icons-material/AnalyticsOutlined"; +import PeopleOutlinedIcon from "@mui/icons-material/PeopleOutlined"; type PropType = { hidden: boolean; }; @@ -31,33 +36,33 @@ export default function MenuContent({ hidden }: PropType) { }, userRole === "superadmin" && { text: "Admins", - icon: , + icon: , url: "/panel/admin-list", }, userRole === "superadmin" && { text: "Roles", - icon: , + icon: , url: "/panel/role-list", }, userRole === "admin" && { text: "Users", - icon: , + icon: , url: "/panel/user-list", }, userRole === "admin" && { text: "Charging Stations", - icon: , + icon: , url: "/panel/station-list", // Placeholder for now }, userRole === "admin" && { text: "Managers", - icon: , + icon: , url: "/panel/manager-list", // Placeholder for now }, userRole === "admin" && { text: "Vehicles", - icon: , + icon: , url: "/panel/vehicle-list", // Placeholder for now }, // userRole === "manager" && { @@ -67,17 +72,17 @@ export default function MenuContent({ hidden }: PropType) { // }, userRole === "user" && { text: "Bookings", - icon: , + icon: , url: "/panel/booking-list", // Placeholder for now }, userRole === "manager" && { text: "Available Slots", - icon: , + icon: , url: "/panel/slot-list", // Placeholder for now }, userRole === "user" && { text: "Available Slots", - icon: , + icon: , url: "/panel/slot-list", // Placeholder for now }, ]; @@ -85,7 +90,14 @@ export default function MenuContent({ hidden }: PropType) { const filteredMenuItems = baseMenuItems.filter(Boolean); return ( - + {filteredMenuItems.map((item, index) => ( diff --git a/src/components/SessionsChart/index.tsx b/src/components/SessionsChart/index.tsx index 381df18..2ff16df 100644 --- a/src/components/SessionsChart/index.tsx +++ b/src/components/SessionsChart/index.tsx @@ -5,15 +5,21 @@ import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; + export default function SessionsChart() { return ( @@ -21,11 +27,16 @@ export default function SessionsChart() { variant="h6" align="left" color="#F2F2F2" + width="132px" + height="24px" + gap={"12px"} sx={{ fontFamily: "Gilroy", fontWeight: 500, fontSize: "18px", lineHeight: "24px", + letterSpacing: "0%", + color: "#FAFAFA", }} > Charging prices @@ -50,13 +61,15 @@ export default function SessionsChart() { }} > Delhi NCR EV Station @@ -78,7 +91,6 @@ export default function SessionsChart() { mx: "auto", }} > - {/* You can map over your data here; for simplicity, we’re using static boxes */} {[1, 2, 3, 4].map((item) => ( Basic Charging - - 16.83 cents/kWh - + + + 16.83 + + + + cents/kWh + + ))} diff --git a/src/components/SideMenu/index.tsx b/src/components/SideMenu/index.tsx index f5b2f2b..62e2469 100644 --- a/src/components/SideMenu/index.tsx +++ b/src/components/SideMenu/index.tsx @@ -61,22 +61,20 @@ export default function SideMenu() { flexDirection: "row", alignItems: "center", pt: 2, - pl: 2, + pl: 2, }} > - Digi EV - + {user?.userType || "N/A"} - {title} @@ -33,8 +48,12 @@ export default function StatCard({ title, value }: StatCardProps) { component="h1" variant="body1" color="#F2F2F2" - fontSize={30} - fontWeight={700} + width={"36px"} + height={"36px"} + fontSize={"32px"} + fontWeight={600} + lineHeight={"36px"} + letterSpacing={"0%"} gutterBottom > {value} diff --git a/src/components/barChartCard/index.tsx b/src/components/barChartCard/index.tsx index 156f343..5bf70ec 100644 --- a/src/components/barChartCard/index.tsx +++ b/src/components/barChartCard/index.tsx @@ -1,20 +1,8 @@ import * as React from "react"; import { useTheme } from "@mui/material/styles"; -import { - BarChart, - Bar, - XAxis, - YAxis, - CartesianGrid, -} from "recharts"; -import { - Card, - CardContent, - Typography, - Box, - -} from "@mui/material"; -import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; +import { BarChart, Bar, XAxis, YAxis, CartesianGrid } from "recharts"; +import { Card, CardContent, Typography, Box } from "@mui/material"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; const data = [ { name: "Jan", v1: 40 }, { name: "Feb", v1: 50 }, @@ -30,7 +18,14 @@ export default function RoundedBarChart() { return (
Monthly - +
{ http.interceptors.response.use( (response) => response, (error) => { + if (error.response && error.response.status === 401) { - window.location.href = "/login"; + + + // window.location.href = "/login"; // const history = useHistory(); // history.push("/login"); diff --git a/src/pages/AdminList/index.tsx b/src/pages/AdminList/index.tsx index 7af0318..b064f9c 100644 --- a/src/pages/AdminList/index.tsx +++ b/src/pages/AdminList/index.tsx @@ -83,6 +83,8 @@ export default function AdminList() { { id: "email", label: "Email" }, { id: "phone", label: "Phone" }, { id: "registeredAddress", label: "Address" }, + { id: "userType", label: "Role" }, + { id: "action", label: "Action", align: "center" }, ]; @@ -93,7 +95,8 @@ export default function AdminList() { name: string; email: string; phone: string; - Admins: { registeredAddress: string }[]; // Adjusted to support array of Admins + Admins: { registeredAddress: string }[]; + userType:string; }, index: number ) => ({ @@ -103,6 +106,7 @@ export default function AdminList() { email: admin?.email, phone: admin?.phone, registeredAddress: admin?.Admins?.[0]?.registeredAddress || "NA", + userType:admin?.userType||"NA", }) ); diff --git a/src/pages/ManagerList/index.tsx b/src/pages/ManagerList/index.tsx index 650e756..6946dfc 100644 --- a/src/pages/ManagerList/index.tsx +++ b/src/pages/ManagerList/index.tsx @@ -146,7 +146,7 @@ export default function ManagerList() { const categoryRows = filteredManagers?.length ? filteredManagers.map((manager, index) => { - const station = manager?.ChargingStation; // Correct access to the ChargingStation data + const station = manager?.chargingStation; // Correct access to the ChargingStation data return { id: manager.id, srno: index + 1, diff --git a/src/pages/ProfilePage/index.tsx b/src/pages/ProfilePage/index.tsx index f6567a2..0de4db3 100644 --- a/src/pages/ProfilePage/index.tsx +++ b/src/pages/ProfilePage/index.tsx @@ -42,14 +42,24 @@ const ProfilePage = () => { } return ( - + Account Info @@ -62,16 +72,29 @@ const ProfilePage = () => { {user?.name || "No Admin"} - + {user?.userType || "N/A"} @@ -88,6 +111,11 @@ const ProfilePage = () => { > Personal Information @@ -95,23 +123,39 @@ const ProfilePage = () => { Edit - - + + Full Name: - + {user?.name || "N/A"} @@ -139,10 +183,20 @@ const ProfilePage = () => { - + Bio: - + {user?.bio || "No bio available."} diff --git a/src/redux/slices/managerSlice.ts b/src/redux/slices/managerSlice.ts index 783668d..410c1c9 100644 --- a/src/redux/slices/managerSlice.ts +++ b/src/redux/slices/managerSlice.ts @@ -11,6 +11,7 @@ interface Manager { email: string; phone: string; stationId: string; + chargingStation:string; } interface ManagerState {