jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Ui fixes

Browse source
This commit is contained in:
jaanvi 2025-03-24 18:33:32 +05:30
parent bbb980c042
commit fdff9c1dd9
14 changed files with 281 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/CustomTable/index.tsx
View file

@ -257,12 +257,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
? "Slot"
: "List"}
</Typography>
{/* Search & Buttons Section */}
<Box
sx={{
display: "flex",
gap: "16px",
marginTop: "16px",
alignItems: "center",
}}
@ -277,6 +276,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
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<CustomTableProps> = ({
color: "white",
borderRadius: "8px",
width: "184px",
marginRight: "16px",
"&:hover": { backgroundColor: "#439BC1" },
}}
onClick={() => handleClickOpen()}
@ -343,15 +348,17 @@ const CustomTable: React.FC<CustomTableProps> = ({
width: "44px",
height: "44px",
borderRadius: "8px",
backgroundColor: "#272727",
backgroundColor: "#1C1C1C",
color: "#52ACDF",
"&:hover": { backgroundColor: "#333333" },
"*:where([data-mui-color-scheme='dark']) &": {
backgroundColor: "#1C1C1C",
},
}}
>
<TuneIcon />
</IconButton>
</Box>
{/* Table Section */}
<TableContainer
component={Paper}
@ -367,6 +374,10 @@ const CustomTable: React.FC<CustomTableProps> = ({
sx={{
backgroundColor: "#272727",
borderBottom: "none",
".css-1ex4ubw-MuiTableCell-root.MuiTableCell-head ":
{
backgroundColor: "#272727",
},
}}
>
{" "}
@ -384,7 +395,13 @@ const CustomTable: React.FC<CustomTableProps> = ({
))}
</TableRow>
</TableHead>
<TableBody>
<TableBody
sx={{
".MuiTableCell-root": {
backgroundColor: "#1C1C1C",
},
}}
>
{currentRows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => (
@ -433,7 +450,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
</TableBody>
</Table>
</TableContainer>
{/* Pagination */}
<Box
sx={{
@ -467,7 +483,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
}}
/>
</Box>
{/* Menu Actions */}
{open && (
<Menu
@ -631,7 +646,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
</Box>
</Menu>
)}
{/* Modals */}
{deleteModal && (
<DeleteModal

35
src/components/LineChartCard/index.tsx
View file

@ -7,7 +7,7 @@ import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import { LineChart } from "@mui/x-charts/LineChart";
import { Box } from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
function AreaGradient({ color, id }: { color: string; id: string }) {
return (
<defs>
@ -43,7 +43,14 @@ export default function LineChartCard() {
return (
<Card
variant="outlined"
sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
sx={{
width: "553px",
height: "444px",
borderRadius: "16px",
"*:where([data-mui-color-scheme='dark']) &": {
backgroundColor: "#202020",
},
}}
>
<CardContent>
<div
@ -74,29 +81,39 @@ export default function LineChartCard() {
marginLeft: "auto",
marginRight: "16px",
display: "flex",
justifyContent: "space-between",
justifyContent: "center",
alignItems: "center",
p: 1.5,
borderRadius: "8px",
border: "1px solid #454545",
padding: "4px 8px",
color: "#F2F2F2",
width: "129px",
height: "44px",
padding: "12px 16px",
gap: "8px",
}}
>
<Typography
width={"69px"}
height={"16px"}
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "14px",
lineHeight: "24px",
color: "#F2F2F2",
p: "4px",
color: "#D9D8D8",
textAlign: "center",
}}
>
Weekly
</Typography>
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
<ExpandMoreIcon
width="20px"
height="20px"
sx={{ color: "#F2F2F2" }}
/>
</Box>
</div>

2
src/components/MainGrid/index.tsx
View file

@ -45,7 +45,7 @@ export default function MainGrid() {
</Typography>
<Grid
container
spacing={2}
spacing={3}
columns={12}
// sx={{ mb: (theme) => theme.spacing(2) }}

41
src/components/MenuContent/index.tsx
View file

@ -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: <AnalyticsRoundedIcon />,
icon: <ManageAccountsOutlinedIcon />,
url: "/panel/admin-list",
},
userRole === "superadmin" && {
text: "Roles",
icon: <AnalyticsRoundedIcon />,
icon: <AnalyticsOutlinedIcon />,
url: "/panel/role-list",
},
userRole === "admin" && {
text: "Users",
icon: <AnalyticsRoundedIcon />,
icon: <PeopleOutlinedIcon />,
url: "/panel/user-list",
},
userRole === "admin" && {
text: "Charging Stations",
icon: <ManageAccountsOutlinedIcon />,
icon: <EvStationIcon />,
url: "/panel/station-list", // Placeholder for now
},
userRole === "admin" && {
text: "Managers",
icon: <ManageAccountsOutlinedIcon />,
icon: <PeopleOutlinedIcon />,
url: "/panel/manager-list", // Placeholder for now
},
userRole === "admin" && {
text: "Vehicles",
icon: <ManageAccountsOutlinedIcon />,
icon: <AnalyticsOutlinedIcon />,
url: "/panel/vehicle-list", // Placeholder for now
},
// userRole === "manager" && {
@ -67,17 +72,17 @@ export default function MenuContent({ hidden }: PropType) {
// },
userRole === "user" && {
text: "Bookings",
icon: <ManageAccountsOutlinedIcon />,
icon: <BookOnlineOutlinedIcon />,
url: "/panel/booking-list", // Placeholder for now
},
userRole === "manager" && {
text: "Available Slots",
icon: <ManageAccountsOutlinedIcon />,
icon: <ChecklistSharpIcon />,
url: "/panel/slot-list", // Placeholder for now
},
userRole === "user" && {
text: "Available Slots",
icon: <ManageAccountsOutlinedIcon />,
icon: <ChecklistSharpIcon />,
url: "/panel/slot-list", // Placeholder for now
},
];
@ -85,7 +90,14 @@ export default function MenuContent({ hidden }: PropType) {
const filteredMenuItems = baseMenuItems.filter(Boolean);
return (
<Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
<Stack
sx={{
flexGrow: 1,
p: 1,
justifyContent: "space-between",
backgroundColor: "#202020",
}}
>
<List dense>
{filteredMenuItems.map((item, index) => (
<ListItem
@ -104,6 +116,7 @@ export default function MenuContent({ hidden }: PropType) {
minWidth: "fit-content",
".MuiSvgIcon-root": {
fontSize: 24,
color: "#FFFFFF",
},
}}
>
@ -113,8 +126,14 @@ export default function MenuContent({ hidden }: PropType) {
sx={{
display: !hidden ? "none" : "",
transition: "all 0.5s ease",
".MuiListItemText-primary": {
width: "118px",
height: "19px",
fontSize: "16px",
letterSpacing: "0%",
lineHeight: "100%",
color: "#D9D8D8",
},
}}
primary={item.text}

23
src/components/ResourcePieChart/index.tsx
View file

@ -28,11 +28,15 @@ export default function ResourcePieChart() {
sx={{
display: "flex",
flexDirection: "column",
gap: "8px",
gap: "12px",
flexGrow: 1,
width: "100%",
height: "100%",
backgroundColor: "#202020",
width: "553px",
height: "324px",
padding: "16px",
borderRadius: "16px",
"*:where([data-mui-color-scheme='dark']) &": {
backgroundColor: "#202020",
},
}}
>
<CardContent>
@ -40,11 +44,13 @@ export default function ResourcePieChart() {
component="h2"
variant="subtitle2"
color="#F2F2F2"
width="84px"
height="24px"
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "18px",
lineHeight: "24px",
color: "#FFFFFF",
}}
>
Resources
@ -93,7 +99,12 @@ export default function ResourcePieChart() {
borderRadius: "50%",
}}
/>
<Typography variant="body2" color="#F2F2F2">
<Typography
variant="body2"
width="100px"
height="16px"
color="#FFFFFF"
>
{entry.title}
</Typography>
</Stack>

66
src/components/SessionsChart/index.tsx
View file

@ -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 (
<Card
variant="outlined"
sx={{
width: "100%",
height: "100%",
backgroundColor: "#202020",
p: 2,
width: "553px",
height: "324px",
gap: "16px",
borderRadius: "16px",
padding: "20px",
"*:where([data-mui-color-scheme='dark']) &": {
backgroundColor: "#202020",
},
}}
>
<CardContent>
@ -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() {
}}
>
<Typography
width="134px"
height="24px"
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "14px",
lineHeight: "24px",
color: "#F2F2F2",
p: "4px",
color: "#D9D8D8",
}}
>
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) => (
<Box
key={item}
@ -87,23 +99,47 @@ export default function SessionsChart() {
borderRadius: "8px",
p: "12px 16px",
backgroundColor: "#272727",
color: "#F2F2F2",
color: "#D9D8D8",
}}
>
<Typography
component="h1"
variant="body2"
width="98px"
height="24px"
fontWeight={400}
fontSize={"14px"}
lineHeight={"24px"}
gutterBottom
>
Basic Charging
</Typography>
<Typography
component="h1"
variant="subtitle2"
gutterBottom
>
16.83 cents/kWh
</Typography>
<Box display={"flex"} gap={1}>
<Typography
component="h1"
variant="subtitle2"
color="#FFFFFF"
width="40px"
height={"24px"}
fontWeight={500}
fontSize="18px"
lineHeight="24px"
gutterBottom
>
16.83
</Typography>
<Typography
width="71px"
height="24px"
gap="2px"
fontWeight={400}
fontSize={"14px"}
lineHeight={"24px"}
>
cents/kWh
</Typography>
</Box>
</Box>
))}
</Box>

19
src/components/SideMenu/index.tsx
View file

@ -61,22 +61,20 @@ export default function SideMenu() {
flexDirection: "row",
alignItems: "center",
pt: 2,
pl: 2,
pl: 2,
}}
>
<Avatar
alt="Logo"
src="/Digilogo.png"
src="/Digilogo.png"
sx={{
width: "50px",
height: "50px",
width: "50px",
height: "50px",
}}
/>
<Box
sx={{
display: "flex",
display: open ? "flex" : "none",
flexDirection: "column",
alignItems: "center",
pt: 2,
@ -88,17 +86,16 @@ export default function SideMenu() {
variant="body2"
color="#D9D8D8"
sx={{
fontWeight: "bold",
fontSize: "16px",
fontWeight: "bold",
fontSize: "16px",
}}
>
Digi EV
</Typography>
<Typography variant="subtitle2" color="#D9D8D8" >
<Typography variant="subtitle2" color="#D9D8D8">
{user?.userType || "N/A"}
</Typography>
</Box>
</Box>
<Box

25
src/components/StatCard/index.tsx
View file

@ -18,13 +18,28 @@ export default function StatCard({ title, value }: StatCardProps) {
return (
<Card
variant="outlined"
sx={{ height: "100%", backgroundColor: "#202020" }}
sx={{
width: "264.5px",
height: "90px",
padding: "16px",
borderRadius: "12px",
gap: "24px",
"*:where([data-mui-color-scheme='dark']) &": {
backgroundColor: "#202020",
},
}}
>
<CardContent>
<Typography
component="h2"
variant="subtitle2"
color="#F2F2F2"
width={"118px"}
height={"14px"}
fontWeight={400}
fontSize={"12px"}
lineHeight={"14px"}
letterSpacing={"0%"}
gutterBottom
>
{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}

51
src/components/barChartCard/index.tsx
View file

@ -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 (
<Card
variant="outlined"
sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
sx={{
width: "553px",
height: "444px",
borderRadius: "16px",
"*:where([data-mui-color-scheme='dark']) &": {
backgroundColor: "#202020",
},
}}
>
<CardContent>
<div
@ -61,29 +56,41 @@ export default function RoundedBarChart() {
marginLeft: "auto",
marginRight: "16px",
display: "flex",
justifyContent: "space-between",
justifyContent: "center",
alignItems: "center",
p: 1.5,
borderRadius: "8px",
border: "1px solid #454545",
padding: "4px 8px",
// padding: "4px 8px",
color: "#F2F2F2",
width: "129px",
height: "44px",
padding: "12px 16px",
gap: "8px",
}}
>
<Typography
width={"69px"}
height={"16px"}
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "14px",
lineHeight: "24px",
color: "#F2F2F2",
p: "4px",
color: "#D9D8D8",
textAlign: "center",
}}
>
Monthly
</Typography>
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
<ExpandMoreIcon
width="20px"
height="20px"
sx={{ color: "#F2F2F2" ,textAlign: "center", }}
/>
</Box>
</div>
<BarChart

5
src/lib/https.ts
View file

@ -14,9 +14,12 @@ http.interceptors.request.use((config) => {
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");

6
src/pages/AdminList/index.tsx
View file

@ -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",
})
);

2
src/pages/ManagerList/index.tsx
View file

@ -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,

74
src/pages/ProfilePage/index.tsx
View file

@ -42,14 +42,24 @@ const ProfilePage = () => {
}
return (
<Container sx={{ py: 4 }}>
<Container
sx={{
py: 4,
}}
>
<Typography variant="h4" gutterBottom>
Account Info
</Typography>
<Card
sx={{
width: "1132px",
height: "331px",
gap: "24px",
borderRadius: "12px",
padding: "16px",
maxWidth: "100%",
margin: "0 auto",
backgroundColor: "#1C1C1C",
}}
>
<CardContent>
@ -62,16 +72,29 @@ const ProfilePage = () => {
<Avatar
alt="User Avatar"
src="/avatar.png"
sx={{ width: 36, height: 36 }}
sx={{ width: "60px", height: "60px" }}
/>
<Box>
<Typography
variant="body1"
width="1028px"
height="24px"
fontWeight={500}
fontSize={"20px"}
lineHeight={"100%"}
sx={{ color: "#FFFFFF" }}
>
{user?.name || "No Admin"}
</Typography>
<Typography variant="body2" color="#D9D8D8">
<Typography
variant="body2"
color="#D9D8D8"
fontWeight={400}
fontSize={"16px"}
lineHeight={"100%"}
width="46px"
height="19px"
>
{user?.userType || "N/A"}
</Typography>
</Box>
@ -88,6 +111,11 @@ const ProfilePage = () => {
>
<Typography
variant="body1"
width="1048px"
height="19px"
fontWeight={500}
fontSize={"16px"}
lineHeight={"100%"}
sx={{ color: "#FFFFFF" }}
>
Personal Information
@ -95,23 +123,39 @@ const ProfilePage = () => {
<Link
variant="body1"
href="/edit-profile"
color="#52ACDF"
>
Edit
</Link>
</Stack>
<Grid container>
<Grid item xs={12} sm={4}>
<Grid
container
width="1100px"
height="38px"
// gap={"100px"}
>
<Grid
item
xs={12}
sm={4}
width="64px"
height="16px"
fontSize={"14px"}
lineHeight={"100%"}
>
<Typography
variant="body1"
fontWeight={500}
sx={{ color: "#FFFFFF" }}
>
Full Name:
</Typography>
<Typography variant="body2" color="#D9D8D8">
<Typography
variant="body2"
fontWeight={400}
color="#D9D8D8"
>
{user?.name || "N/A"}
</Typography>
</Grid>
@ -139,10 +183,20 @@ const ProfilePage = () => {
</Grid>
</Grid>
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
<Typography
variant="body1"
width="21px"
height="16px"
sx={{ color: "#FFFFFF" }}
>
Bio:
</Typography>
<Typography variant="body2" color="#D9D8D8">
<Typography
variant="body2"
width="1100px"
height="32px"
color="#D9D8D8"
>
{user?.bio || "No bio available."}
</Typography>
</Stack>

1
src/redux/slices/managerSlice.ts
View file

@ -11,6 +11,7 @@ interface Manager {
email: string;
phone: string;
stationId: string;
chargingStation:string;
}
interface ManagerState {