Update changes in dashboard and header
This commit is contained in:
jaanvi
commit
74038b9295
16095
package-lock.json
generated
Normal file
16095
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -7,7 +7,7 @@
|
||||||
"@emotion/styled": "^11.14.0",
|
"@emotion/styled": "^11.14.0",
|
||||||
"@mui/icons-material": "^6.4.5",
|
"@mui/icons-material": "^6.4.5",
|
||||||
"@mui/material": "^6.4.5",
|
"@mui/material": "^6.4.5",
|
||||||
"@mui/x-charts": "^7.27.0",
|
"@mui/x-charts": "^7.27.1",
|
||||||
"@mui/x-data-grid": "^7.27.0",
|
"@mui/x-data-grid": "^7.27.0",
|
||||||
"@mui/x-date-pickers": "^7.27.0",
|
"@mui/x-date-pickers": "^7.27.0",
|
||||||
"@react-spring/web": "^9.7.5",
|
"@react-spring/web": "^9.7.5",
|
||||||
|
|
@ -27,9 +27,11 @@
|
||||||
"react-dom": "^18.0.0",
|
"react-dom": "^18.0.0",
|
||||||
"react-dropzone": "^14.3.5",
|
"react-dropzone": "^14.3.5",
|
||||||
"react-hook-form": "^7.54.2",
|
"react-hook-form": "^7.54.2",
|
||||||
|
"react-minimal-pie-chart": "^9.1.0",
|
||||||
"react-redux": "^9.2.0",
|
"react-redux": "^9.2.0",
|
||||||
"react-router-dom": "^7.1.1",
|
"react-router-dom": "^7.1.1",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
"recharts": "^2.15.1",
|
||||||
"sonner": "^1.7.4",
|
"sonner": "^1.7.4",
|
||||||
"web-vitals": "^4.2.4"
|
"web-vitals": "^4.2.4"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
BIN
public/Bell.jpg
Normal file
BIN
public/Bell.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,008 B |
BIN
public/avatar.png
Normal file
BIN
public/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
|
|
@ -1,68 +1,111 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import Stack from "@mui/material/Stack";
|
import Stack from "@mui/material/Stack";
|
||||||
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
|
import Avatar from "@mui/material/Avatar";
|
||||||
import CustomDatePicker from "../CustomDatePicker";
|
|
||||||
import NavbarBreadcrumbs from "../NavbarBreadcrumbs";
|
|
||||||
import MenuButton from "../MenuButton";
|
|
||||||
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
|
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import Search from "../Search";
|
import InputBase from "@mui/material/InputBase";
|
||||||
|
import SearchIcon from "@mui/icons-material/Search";
|
||||||
|
import Divider from "@mui/material/Divider";
|
||||||
|
import MenuButton from "../MenuButton";
|
||||||
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
||||||
|
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
|
||||||
|
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
const [showNotifications, setShowNotifications] = React.useState(false);
|
const [showNotifications, setShowNotifications] = React.useState(false);
|
||||||
const toggleNotifications = () => {
|
const toggleNotifications = () => {
|
||||||
setShowNotifications((prev) => !prev);
|
setShowNotifications((prev) => !prev);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack
|
<Box
|
||||||
direction="row"
|
|
||||||
sx={{
|
sx={{
|
||||||
display: { xs: "none", md: "flex" },
|
|
||||||
width: "100%",
|
width: "100%",
|
||||||
alignItems: { xs: "flex-start", md: "center" },
|
height: "84px",
|
||||||
|
// backgroundColor: "#202020",
|
||||||
|
padding: "20px 24px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
maxWidth: { sm: "100%", md: "1700px" },
|
|
||||||
pt: 1.5,
|
|
||||||
}}
|
}}
|
||||||
spacing={2}
|
|
||||||
>
|
>
|
||||||
<NavbarBreadcrumbs />
|
<Box sx={{ flexGrow: 1 }} />
|
||||||
<Stack direction="row" sx={{ gap: 1 }}>
|
<Stack
|
||||||
<Search />
|
direction="row"
|
||||||
<CustomDatePicker />
|
spacing={3}
|
||||||
<MenuButton
|
alignItems="center"
|
||||||
showBadge
|
justifyContent="flex-end"
|
||||||
aria-label="Open notifications"
|
>
|
||||||
onClick={toggleNotifications}
|
{/* Search Bar */}
|
||||||
>
|
|
||||||
<NotificationsRoundedIcon />
|
|
||||||
</MenuButton>
|
|
||||||
<ColorModeIconDropdown />
|
|
||||||
</Stack>
|
|
||||||
{showNotifications && (
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
p: 2,
|
width: "360px",
|
||||||
position: "absolute",
|
height: "44px",
|
||||||
top: "55px",
|
backgroundColor: "#303030",
|
||||||
right: "66px",
|
borderRadius: "8px",
|
||||||
bgcolor: "background.paper",
|
border: "1px solid #424242",
|
||||||
boxShadow: 1,
|
display: "flex",
|
||||||
borderRadius: 1,
|
alignItems: "center",
|
||||||
zIndex: 1300,
|
padding: "0 12px",
|
||||||
cursor: "pointer"
|
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* <Typography variant="h6" color="text.primary">
|
<SearchIcon sx={{ color: "#FFFFFF" }} />
|
||||||
|
<InputBase
|
||||||
|
sx={{ marginLeft: 1, flex: 1, color: "#FFFFFF" }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Notification and Profile Section */}
|
||||||
|
<Stack direction="row" spacing={2} alignItems="center">
|
||||||
|
{/* Custom Bell Icon */}
|
||||||
|
<MenuButton
|
||||||
|
showBadge
|
||||||
|
aria-label="Open notifications"
|
||||||
|
onClick={toggleNotifications}
|
||||||
|
>
|
||||||
|
<NotificationsRoundedIcon />
|
||||||
|
</MenuButton>
|
||||||
|
|
||||||
|
<Divider flexItem sx={{ backgroundColor: "#424242" }} />
|
||||||
|
<Stack direction="row" spacing={1.5} alignItems="center">
|
||||||
|
<Avatar
|
||||||
|
alt="User Avatar"
|
||||||
|
src="/avatar.png"
|
||||||
|
sx={{ width: 36, height: 36 }}
|
||||||
|
/>
|
||||||
|
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
|
||||||
|
Momah
|
||||||
|
</Typography>
|
||||||
|
{/* Dropdown Icon */}
|
||||||
|
<ArrowDropDownIcon
|
||||||
|
sx={{ color: "#FFFFFF", width: 16, height: 16 }}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
<ColorModeIconDropdown />
|
||||||
|
</Stack>
|
||||||
|
{showNotifications && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
p: 2,
|
||||||
|
position: "absolute",
|
||||||
|
top: "55px",
|
||||||
|
right: "280px",
|
||||||
|
bgcolor: "#FFFFFF",
|
||||||
|
boxShadow: 1,
|
||||||
|
borderRadius: 1,
|
||||||
|
zIndex: 1300,
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* <Typography variant="h6" color="text.primary">
|
||||||
Notifications
|
Notifications
|
||||||
</Typography> */}
|
</Typography> */}
|
||||||
<Typography variant="body2" color="text.secondary">
|
<Typography variant="body2" color="text.secondary">
|
||||||
No notifications yet
|
No notifications yet
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Stack>
|
</Stack>
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
152
src/components/LineChartCard/index.tsx
Normal file
152
src/components/LineChartCard/index.tsx
Normal file
|
|
@ -0,0 +1,152 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { useTheme } from "@mui/material/styles";
|
||||||
|
import Card from "@mui/material/Card";
|
||||||
|
import CardContent from "@mui/material/CardContent";
|
||||||
|
import Chip from "@mui/material/Chip";
|
||||||
|
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";
|
||||||
|
function AreaGradient({ color, id }: { color: string; id: string }) {
|
||||||
|
return (
|
||||||
|
<defs>
|
||||||
|
<linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
|
||||||
|
<stop offset="0%" stopColor={color} stopOpacity={0.5} />
|
||||||
|
<stop offset="100%" stopColor={color} stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDaysInMonth(month: number, year: number) {
|
||||||
|
const date = new Date(year, month, 0);
|
||||||
|
const monthName = date.toLocaleDateString("en-US", {
|
||||||
|
month: "short",
|
||||||
|
});
|
||||||
|
const daysInMonth = date.getDate();
|
||||||
|
const days = [];
|
||||||
|
let i = 1;
|
||||||
|
while (days.length < daysInMonth) {
|
||||||
|
days.push(`${monthName} ${i}`);
|
||||||
|
i += 1;
|
||||||
|
}
|
||||||
|
return days;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LineChartCard() {
|
||||||
|
const theme = useTheme();
|
||||||
|
const data = getDaysInMonth(4, 2024);
|
||||||
|
|
||||||
|
const colorPalette = [theme.palette.primary.light];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
variant="outlined"
|
||||||
|
sx={{ width: "100%", height: 400, backgroundColor: "#202020" }}
|
||||||
|
>
|
||||||
|
<CardContent>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
align="left"
|
||||||
|
color="#FFFFFF"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Gilroy",
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "24px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Sales Stats
|
||||||
|
</Typography>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
mt: 2,
|
||||||
|
mb: 2,
|
||||||
|
backgroundColor: "#3B3B3B",
|
||||||
|
marginLeft: "auto",
|
||||||
|
marginRight: "16px",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
p: 1.5,
|
||||||
|
borderRadius: "8px",
|
||||||
|
border: "1px solid #454545",
|
||||||
|
|
||||||
|
padding: "4px 8px",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Gilroy",
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: "24px",
|
||||||
|
color: "#F2F2F2",
|
||||||
|
p: "4px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Weekly
|
||||||
|
</Typography>
|
||||||
|
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<LineChart
|
||||||
|
colors={colorPalette}
|
||||||
|
xAxis={[
|
||||||
|
{
|
||||||
|
scaleType: "point",
|
||||||
|
data,
|
||||||
|
tickInterval: (index, i) => (i + 1) % 5 === 0,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
series={[
|
||||||
|
{
|
||||||
|
id: "direct",
|
||||||
|
label: "Direct",
|
||||||
|
showMark: false,
|
||||||
|
curve: "linear",
|
||||||
|
stack: "total",
|
||||||
|
area: true,
|
||||||
|
stackOrder: "ascending",
|
||||||
|
data: [
|
||||||
|
300, 900, 500, 1200, 1500, 1800, 2400, 2100,
|
||||||
|
2700, 3000, 1800, 3300, 3600, 3900, 4200, 4500,
|
||||||
|
3900, 4800, 5100, 5400, 4500, 5700, 6000, 6300,
|
||||||
|
6600, 6900, 7200, 7500, 7800, 8100,
|
||||||
|
],
|
||||||
|
color: "#FFFFFF",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
height={250}
|
||||||
|
margin={{ left: 50, right: 20, top: 20, bottom: 20 }}
|
||||||
|
grid={{ horizontal: true }}
|
||||||
|
sx={{
|
||||||
|
"& .MuiAreaElement-series-direct": {
|
||||||
|
fill: "url('#direct')",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
slotProps={{
|
||||||
|
legend: {
|
||||||
|
hidden: true,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AreaGradient
|
||||||
|
color={theme.palette.primary.light}
|
||||||
|
id="direct"
|
||||||
|
/>
|
||||||
|
</LineChart>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -11,6 +11,11 @@ import HighlightedCard from "../HighlightedCard";
|
||||||
import PageViewsBarChart from "../PageViewsBarChart";
|
import PageViewsBarChart from "../PageViewsBarChart";
|
||||||
import SessionsChart from "../SessionsChart";
|
import SessionsChart from "../SessionsChart";
|
||||||
import StatCard, { StatCardProps } from "../StatCard";
|
import StatCard, { StatCardProps } from "../StatCard";
|
||||||
|
import ResourcesPieChart from "../ResourcePieChart";
|
||||||
|
import { BarChart } from "@mui/icons-material";
|
||||||
|
import RoundedBarChart from "../barChartCard";
|
||||||
|
import { LineHighlightPlot } from "@mui/x-charts";
|
||||||
|
import LineChartCard from "../LineChartCard";
|
||||||
|
|
||||||
const data: StatCardProps[] = [
|
const data: StatCardProps[] = [
|
||||||
{
|
{
|
||||||
|
|
@ -36,7 +41,7 @@ export default function MainGrid() {
|
||||||
<Box sx={{ width: "100%", maxWidth: { sm: "100%", md: "1700px" } }}>
|
<Box sx={{ width: "100%", maxWidth: { sm: "100%", md: "1700px" } }}>
|
||||||
{/* cards */}
|
{/* cards */}
|
||||||
<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
|
<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
|
||||||
Overview
|
Dashboard
|
||||||
</Typography>
|
</Typography>
|
||||||
<Grid
|
<Grid
|
||||||
container
|
container
|
||||||
|
|
@ -49,16 +54,18 @@ export default function MainGrid() {
|
||||||
<StatCard {...card} />
|
<StatCard {...card} />
|
||||||
</Grid>
|
</Grid>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
<SessionsChart />
|
<SessionsChart />
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
|
||||||
<ChartUserByCountry />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid size={{ xs: 12, md: 6 }}>
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
<PageViewsBarChart />
|
<ResourcesPieChart />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<RoundedBarChart />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12, md: 6 }}>
|
||||||
|
<LineChartCard />
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
||||||
|
|
@ -19,25 +19,23 @@ const baseMenuItems = [
|
||||||
icon: <DashboardOutlinedIcon />,
|
icon: <DashboardOutlinedIcon />,
|
||||||
url: "/panel/dashboard",
|
url: "/panel/dashboard",
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// text: "Admins",
|
text: "Admins",
|
||||||
// icon: <AnalyticsRoundedIcon />,
|
icon: <AnalyticsRoundedIcon />,
|
||||||
// url: "/panel/admin-list",
|
url: "/panel/admin-list",
|
||||||
// },
|
},
|
||||||
|
{
|
||||||
|
text: "Users",
|
||||||
|
icon: <AnalyticsRoundedIcon />,
|
||||||
|
url: "/panel/user-list",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
//Eknoor singh and Jaanvi
|
//Eknoor singh and Jaanvi
|
||||||
//date:- 12-Feb-2025
|
//date:- 12-Feb-2025
|
||||||
//Made a different variable for super admin to access all the details.
|
//Made a different variable for super admin to access all the details.
|
||||||
|
|
||||||
const superAdminOnlyItems = [
|
|
||||||
{
|
|
||||||
text: "Admin List",
|
|
||||||
icon: <ManageAccountsOutlinedIcon />,
|
|
||||||
url: "/panel/admin-list",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
type PropType = {
|
type PropType = {
|
||||||
hidden: boolean;
|
hidden: boolean;
|
||||||
|
|
@ -49,10 +47,7 @@ export default function MenuContent({ hidden }: PropType) {
|
||||||
(state: RootState) => state.profileReducer.user?.role
|
(state: RootState) => state.profileReducer.user?.role
|
||||||
);
|
);
|
||||||
|
|
||||||
const mainListItems = [
|
|
||||||
...baseMenuItems,
|
|
||||||
...(userRole === "superadmin" ? superAdminOnlyItems : []),
|
|
||||||
];
|
|
||||||
// const mainListItems = [
|
// const mainListItems = [
|
||||||
// ...baseMenuItems,
|
// ...baseMenuItems,
|
||||||
// // ...(userRole === "superadmin"
|
// // ...(userRole === "superadmin"
|
||||||
|
|
@ -68,7 +63,7 @@ export default function MenuContent({ hidden }: PropType) {
|
||||||
return (
|
return (
|
||||||
<Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
|
<Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
|
||||||
<List dense>
|
<List dense>
|
||||||
{mainListItems.map((item, index) => (
|
{baseMenuItems.map((item, index) => (
|
||||||
<ListItem
|
<ListItem
|
||||||
key={index}
|
key={index}
|
||||||
disablePadding
|
disablePadding
|
||||||
|
|
|
||||||
96
src/components/ResourcePieChart/index.tsx
Normal file
96
src/components/ResourcePieChart/index.tsx
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { PieChart } from "@mui/x-charts/PieChart";
|
||||||
|
import { useDrawingArea } from "@mui/x-charts/hooks";
|
||||||
|
import { styled } from "@mui/material/styles";
|
||||||
|
import Typography from "@mui/material/Typography";
|
||||||
|
import Card from "@mui/material/Card";
|
||||||
|
import CardContent from "@mui/material/CardContent";
|
||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import Stack from "@mui/material/Stack";
|
||||||
|
|
||||||
|
const colorPalette = [
|
||||||
|
"hsla(202, 69%, 60%, 1)",
|
||||||
|
"hsl(204, 48.60%, 72.50%)",
|
||||||
|
"hsl(214, 56.40%, 30.60%)",
|
||||||
|
"hsl(222, 6.80%, 50.80%)",
|
||||||
|
];
|
||||||
|
const data = [
|
||||||
|
{ title: "Total Resources", value: 50, color: colorPalette[0] },
|
||||||
|
{ title: "Total Stations", value: 20, color: colorPalette[1] },
|
||||||
|
{ title: "Station Manager", value: 15, color: colorPalette[2] },
|
||||||
|
{ title: "Total Booth", value: 15, color: colorPalette[3] },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ResourcePieChart() {
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
variant="outlined"
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "8px",
|
||||||
|
flexGrow: 1,
|
||||||
|
width: "100%",
|
||||||
|
height: "90%",
|
||||||
|
backgroundColor: "#202020",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CardContent>
|
||||||
|
<Typography component="h2" variant="subtitle2" color="#F2F2F2">
|
||||||
|
Resources
|
||||||
|
</Typography>
|
||||||
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||||
|
<PieChart
|
||||||
|
colors={colorPalette}
|
||||||
|
margin={{
|
||||||
|
left: 60,
|
||||||
|
right: 80,
|
||||||
|
top: 80,
|
||||||
|
bottom: 80,
|
||||||
|
}}
|
||||||
|
series={[
|
||||||
|
{
|
||||||
|
data,
|
||||||
|
innerRadius: 50,
|
||||||
|
outerRadius: 100,
|
||||||
|
paddingAngle: 0,
|
||||||
|
highlightScope: {
|
||||||
|
faded: "global",
|
||||||
|
highlighted: "item",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
height={300}
|
||||||
|
width={300}
|
||||||
|
slotProps={{
|
||||||
|
legend: { hidden: true },
|
||||||
|
}}
|
||||||
|
></PieChart>
|
||||||
|
|
||||||
|
<Stack spacing={1}>
|
||||||
|
{data.map((entry, index) => (
|
||||||
|
<Stack
|
||||||
|
key={index}
|
||||||
|
direction="row"
|
||||||
|
spacing={1}
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: 16,
|
||||||
|
height: 16,
|
||||||
|
backgroundColor: entry.color,
|
||||||
|
borderRadius: "50%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography variant="body2" color="#F2F2F2">
|
||||||
|
{entry.title}
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,46 +1,50 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { useTheme } from "@mui/material/styles";
|
|
||||||
import Card from "@mui/material/Card";
|
import Card from "@mui/material/Card";
|
||||||
import CardContent from "@mui/material/CardContent";
|
import CardContent from "@mui/material/CardContent";
|
||||||
import Chip from "@mui/material/Chip";
|
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import Stack from "@mui/material/Stack";
|
|
||||||
import { LineChart } from "@mui/x-charts/LineChart";
|
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
||||||
|
|
||||||
export default function SessionsChart() {
|
export default function SessionsChart() {
|
||||||
return (
|
return (
|
||||||
<Card variant="outlined" sx={{ width: "100%", height: "42%" }}>
|
<Card
|
||||||
|
variant="outlined"
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
height: "90%",
|
||||||
|
backgroundColor: "#202020",
|
||||||
|
p: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Typography
|
<Typography
|
||||||
variant="h6"
|
variant="h6"
|
||||||
align="left"
|
align="left"
|
||||||
color="text.secondary"
|
color="#FFFFFF"
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Gilroy",
|
fontFamily: "Gilroy",
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
letterSpacing: "0%",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Charging prices
|
Charging prices
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
|
{/* Responsive dropdown box */}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
mt: "12px",
|
mt: 2,
|
||||||
mb: "16px",
|
mb: 2,
|
||||||
backgroundColor: "#F2F2F2",
|
backgroundColor: "#3B3B3B",
|
||||||
color: "#212121",
|
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
lineHeight: "20px",
|
lineHeight: "20px",
|
||||||
width: "700px",
|
width: { xs: "100%" },
|
||||||
height: "48px",
|
height: "48px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
padding: "12px",
|
p: 1.5,
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
border: "1px solid #454545",
|
border: "1px solid #454545",
|
||||||
}}
|
}}
|
||||||
|
|
@ -51,92 +55,57 @@ export default function SessionsChart() {
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
letterSpacing: "0%",
|
color: "#F2F2F2",
|
||||||
backgroundColor: "#F2F2F2",
|
p: "4px",
|
||||||
padding: "4px",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Delhi NCR EV Station
|
Delhi NCR EV Station
|
||||||
</Typography>
|
</Typography>
|
||||||
<ArrowDropDownIcon />
|
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Grid container for the four boxes */}
|
{/* Grid container for the four boxes */}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "grid",
|
display: "grid",
|
||||||
gridTemplateColumns: "repeat(2, 1fr)",
|
gridTemplateColumns: {
|
||||||
gap: "40px",
|
xs: "1fr",
|
||||||
width: "700px",
|
sm: "repeat(2, 1fr)",
|
||||||
|
},
|
||||||
|
gap: { xs: 1, sm: 2 },
|
||||||
|
maxWidth: "750px",
|
||||||
|
width: "100%",
|
||||||
mx: "auto",
|
mx: "auto",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
{/* You can map over your data here; for simplicity, we’re using static boxes */}
|
||||||
sx={{
|
{[1, 2, 3, 4].map((item) => (
|
||||||
height: "84px",
|
<Box
|
||||||
borderRadius: "8px",
|
key={item}
|
||||||
padding: "12px 16px",
|
sx={{
|
||||||
backgroundColor: "#F2F2F2",
|
height: "84px",
|
||||||
color: "#212121",
|
borderRadius: "8px",
|
||||||
}}
|
p: "12px 16px",
|
||||||
>
|
backgroundColor: "#3B3B3B",
|
||||||
{/* Box 1 Content */}
|
color: "#F2F2F2",
|
||||||
<Typography component="h1" variant="body2" gutterBottom>
|
}}
|
||||||
Basic Charging
|
>
|
||||||
</Typography>
|
<Typography
|
||||||
<Typography component="h1" variant="h5" gutterBottom>
|
component="h1"
|
||||||
16.83 cents/kWh
|
variant="body2"
|
||||||
</Typography>
|
gutterBottom
|
||||||
</Box>
|
>
|
||||||
<Box
|
Basic Charging
|
||||||
sx={{
|
</Typography>
|
||||||
height: "84px",
|
<Typography
|
||||||
borderRadius: "8px",
|
component="h1"
|
||||||
padding: "12px 16px",
|
variant="subtitle2"
|
||||||
backgroundColor: "#F2F2F2",
|
gutterBottom
|
||||||
color: "#212121",
|
>
|
||||||
}}
|
16.83 cents/kWh
|
||||||
>
|
</Typography>
|
||||||
{/* Box 2 Content */}
|
</Box>
|
||||||
<Typography component="h1" variant="body2" gutterBottom>
|
))}
|
||||||
Basic Charging
|
|
||||||
</Typography>
|
|
||||||
<Typography component="h1" variant="h5" gutterBottom>
|
|
||||||
16.83 cents/kWh
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
height: "84px",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "12px 16px",
|
|
||||||
backgroundColor: "#F2F2F2",
|
|
||||||
color: "#212121",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography component="h1" variant="body2" gutterBottom>
|
|
||||||
Basic Charging
|
|
||||||
</Typography>
|
|
||||||
<Typography component="h1" variant="h5" gutterBottom>
|
|
||||||
16.83 cents/kWh
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
height: "84px",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "12px 16px",
|
|
||||||
color: "#212121",
|
|
||||||
backgroundColor: "#F2F2F2",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography component="h1" variant="body2" gutterBottom>
|
|
||||||
Basic Charging
|
|
||||||
</Typography>
|
|
||||||
<Typography component="h1" variant="h5" gutterBottom>
|
|
||||||
16.83 cents/kWh
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
</Box>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,45 @@
|
||||||
import * as React from 'react';
|
import * as React from "react";
|
||||||
import { useTheme } from '@mui/material/styles';
|
import { useTheme } from "@mui/material/styles";
|
||||||
import Box from '@mui/material/Box';
|
import Box from "@mui/material/Box";
|
||||||
import Card from '@mui/material/Card';
|
import Card from "@mui/material/Card";
|
||||||
import CardContent from '@mui/material/CardContent';
|
import CardContent from "@mui/material/CardContent";
|
||||||
import Chip from '@mui/material/Chip';
|
import Chip from "@mui/material/Chip";
|
||||||
import Stack from '@mui/material/Stack';
|
import Stack from "@mui/material/Stack";
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from "@mui/material/Typography";
|
||||||
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
|
import { SparkLineChart } from "@mui/x-charts/SparkLineChart";
|
||||||
import { areaElementClasses } from '@mui/x-charts/LineChart';
|
import { areaElementClasses } from "@mui/x-charts/LineChart";
|
||||||
|
|
||||||
export type StatCardProps = {
|
export type StatCardProps = {
|
||||||
title: string;
|
title: string;
|
||||||
value: string;
|
value: string;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default function StatCard({ title, value }: StatCardProps) {
|
||||||
export default function StatCard({
|
return (
|
||||||
title,
|
<Card
|
||||||
value,
|
variant="outlined"
|
||||||
}: StatCardProps) {
|
sx={{ height: "100%", backgroundColor: "#2C2C2C" }}
|
||||||
|
>
|
||||||
|
|
||||||
return (
|
|
||||||
<Card variant="outlined" sx={{ height: "100%"}}>
|
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Typography component="h2" variant="subtitle2" gutterBottom>
|
<Typography
|
||||||
|
component="h2"
|
||||||
|
variant="subtitle2"
|
||||||
|
color="#F2F2F2"
|
||||||
|
gutterBottom
|
||||||
|
>
|
||||||
{title}
|
{title}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography component="h1" variant="body1" fontSize={30} fontWeight={700} gutterBottom>
|
<Typography
|
||||||
|
component="h1"
|
||||||
|
variant="body1"
|
||||||
|
color="#F2F2F2"
|
||||||
|
fontSize={30}
|
||||||
|
fontWeight={700}
|
||||||
|
gutterBottom
|
||||||
|
>
|
||||||
{value}
|
{value}
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
105
src/components/barChartCard/index.tsx
Normal file
105
src/components/barChartCard/index.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
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";
|
||||||
|
const data = [
|
||||||
|
{ name: "Jan", v1: 40 },
|
||||||
|
{ name: "Feb", v1: 50 },
|
||||||
|
{ name: "Mar", v1: 80 },
|
||||||
|
{ name: "Apr", v1: 20 },
|
||||||
|
{ name: "May", v1: 60 },
|
||||||
|
{ name: "Jun", v1: 30 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function RoundedBarChart() {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
variant="outlined"
|
||||||
|
sx={{ width: "100%", height: 400, backgroundColor: "#202020" }}
|
||||||
|
>
|
||||||
|
<CardContent>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
align="left"
|
||||||
|
color="#FFFFFF"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Gilroy",
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "24px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Charge Stats
|
||||||
|
</Typography>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
mt: 2,
|
||||||
|
mb: 2,
|
||||||
|
backgroundColor: "#3B3B3B",
|
||||||
|
marginLeft: "auto",
|
||||||
|
marginRight: "16px",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
p: 1.5,
|
||||||
|
borderRadius: "8px",
|
||||||
|
border: "1px solid #454545",
|
||||||
|
|
||||||
|
padding: "4px 8px",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Gilroy",
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: "24px",
|
||||||
|
color: "#F2F2F2",
|
||||||
|
p: "4px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Monthly
|
||||||
|
</Typography>
|
||||||
|
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
<BarChart
|
||||||
|
width={600}
|
||||||
|
height={300}
|
||||||
|
data={data}
|
||||||
|
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
|
||||||
|
>
|
||||||
|
<CartesianGrid vertical={false} />
|
||||||
|
<XAxis />
|
||||||
|
<YAxis tickFormatter={(value) => `${value}`} />
|
||||||
|
|
||||||
|
<Bar dataKey="v1" fill="skyblue" radius={[10, 10, 0, 0]} />
|
||||||
|
<Bar dataKey="v2" fill="skyblue" radius={[10, 10, 0, 0]} />
|
||||||
|
</BarChart>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,358 @@
|
||||||
|
// import { useEffect, useState } from "react";
|
||||||
|
// import {
|
||||||
|
// Box,
|
||||||
|
// Button,
|
||||||
|
// Typography,
|
||||||
|
// TextField,
|
||||||
|
// InputAdornment,
|
||||||
|
// Paper,
|
||||||
|
// Table,
|
||||||
|
// TableBody,
|
||||||
|
// TableCell,
|
||||||
|
// TableContainer,
|
||||||
|
// TableHead,
|
||||||
|
// TableRow,
|
||||||
|
// Pagination,
|
||||||
|
// IconButton,
|
||||||
|
// } from "@mui/material";
|
||||||
|
// import SearchIcon from "@mui/icons-material/Search";
|
||||||
|
// import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||||
|
// import TuneIcon from "@mui/icons-material/Tune";
|
||||||
|
// import { useDispatch, useSelector } from "react-redux";
|
||||||
|
// import { adminList } from "../../redux/slices/adminSlice";
|
||||||
|
// import { AppDispatch, RootState } from "../../redux/store/store";
|
||||||
|
|
||||||
|
// export default function AdminList() {
|
||||||
|
// const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
// const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
// const adminsPerPage = 10;
|
||||||
|
|
||||||
|
// const dispatch = useDispatch<AppDispatch>();
|
||||||
|
// const admins = useSelector((state: RootState) => state.adminReducer.admins);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// dispatch(adminList());
|
||||||
|
// }, [dispatch]);
|
||||||
|
|
||||||
|
// const staticAdmins = [
|
||||||
|
// {
|
||||||
|
// name: "John Doe",
|
||||||
|
// location: "New York",
|
||||||
|
// managerAssigned: "Alice Johnson",
|
||||||
|
// vehicle: "Tesla Model S",
|
||||||
|
// phone: "+1 234 567 8901",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "Jane Smith",
|
||||||
|
// location: "Los Angeles",
|
||||||
|
// managerAssigned: "Bob Brown",
|
||||||
|
// vehicle: "Ford F-150",
|
||||||
|
// phone: "+1 987 654 3210",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "Michael Brown",
|
||||||
|
// location: "Chicago",
|
||||||
|
// managerAssigned: "Sarah Lee",
|
||||||
|
// vehicle: "Chevrolet Bolt",
|
||||||
|
// phone: "+1 312 555 7890",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "Emily Davis",
|
||||||
|
// location: "Houston",
|
||||||
|
// managerAssigned: "Tom Wilson",
|
||||||
|
// vehicle: "Nissan Leaf",
|
||||||
|
// phone: "+1 713 444 5678",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "Daniel Martinez",
|
||||||
|
// location: "Phoenix",
|
||||||
|
// managerAssigned: "Jessica White",
|
||||||
|
// vehicle: "BMW i3",
|
||||||
|
// phone: "+1 602 999 4321",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "Sophia Miller",
|
||||||
|
// location: "Philadelphia",
|
||||||
|
// managerAssigned: "Mark Adams",
|
||||||
|
// vehicle: "Audi e-tron",
|
||||||
|
// phone: "+1 215 777 6543",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "James Anderson",
|
||||||
|
// location: "San Antonio",
|
||||||
|
// managerAssigned: "Emma Thomas",
|
||||||
|
// vehicle: "Hyundai Kona EV",
|
||||||
|
// phone: "+1 210 321 8765",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "James Anderson",
|
||||||
|
// location: "San Antonio",
|
||||||
|
// managerAssigned: "Emma Thomas",
|
||||||
|
// vehicle: "Hyundai Kona EV",
|
||||||
|
// phone: "+1 210 321 8765",
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
|
|
||||||
|
// const adminData = admins.length ? admins : staticAdmins;
|
||||||
|
|
||||||
|
// const filteredAdmins = adminData.filter((admin) =>
|
||||||
|
// admin.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
// );
|
||||||
|
|
||||||
|
// const indexOfLastAdmin = currentPage * adminsPerPage;
|
||||||
|
// const indexOfFirstAdmin = indexOfLastAdmin - adminsPerPage;
|
||||||
|
// const currentAdmins = filteredAdmins.slice(
|
||||||
|
// indexOfFirstAdmin,
|
||||||
|
// indexOfLastAdmin
|
||||||
|
// );
|
||||||
|
|
||||||
|
// const handlePageChange = (event, value) => {
|
||||||
|
// setCurrentPage(value);
|
||||||
|
// };
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <Box
|
||||||
|
// sx={{
|
||||||
|
// width: "calc(100% - 48px)",
|
||||||
|
// margin: "0 auto",
|
||||||
|
// padding: "24px",
|
||||||
|
// backgroundColor: "#1C1C1C",
|
||||||
|
// borderRadius: "12px",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// sx={{
|
||||||
|
// color: "#FFFFFF",
|
||||||
|
// fontWeight: 500,
|
||||||
|
// fontSize: "18px",
|
||||||
|
// fontFamily: "Gilroy",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// Charge stations
|
||||||
|
// </Typography>
|
||||||
|
|
||||||
|
// {/* Search & Buttons Section */}
|
||||||
|
// <Box
|
||||||
|
// sx={{
|
||||||
|
// display: "flex",
|
||||||
|
// gap: "16px",
|
||||||
|
// marginTop: "16px",
|
||||||
|
// alignItems: "center",
|
||||||
|
// fontFamily: "Gilroy",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <TextField
|
||||||
|
// variant="outlined"
|
||||||
|
// placeholder="Search Charge stations"
|
||||||
|
// sx={{
|
||||||
|
// width: "422px",
|
||||||
|
// backgroundColor: "#272727",
|
||||||
|
|
||||||
|
// borderRadius: "12px",
|
||||||
|
// input: { color: "#FFFFFF" },
|
||||||
|
// "& .MuiOutlinedInput-root": {
|
||||||
|
// borderRadius: "12px",
|
||||||
|
// "& fieldset": { borderColor: "#FFFFFF" },
|
||||||
|
// "&:hover fieldset": { borderColor: "#FFFFFF" },
|
||||||
|
// "&.Mui-focused fieldset": {
|
||||||
|
// borderColor: "#52ACDF",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// }}
|
||||||
|
// InputProps={{
|
||||||
|
// startAdornment: (
|
||||||
|
// <InputAdornment position="start">
|
||||||
|
// <SearchIcon sx={{ color: "#FFFFFF" }} />
|
||||||
|
// </InputAdornment>
|
||||||
|
// ),
|
||||||
|
// }}
|
||||||
|
// value={searchQuery}
|
||||||
|
// onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
// />
|
||||||
|
// <Box
|
||||||
|
// sx={{
|
||||||
|
// display: "flex",
|
||||||
|
// justifyContent: "flex-end",
|
||||||
|
// width: "100%",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Button
|
||||||
|
// sx={{
|
||||||
|
// backgroundColor: "#52ACDF",
|
||||||
|
// color: "white",
|
||||||
|
// borderRadius: "8px",
|
||||||
|
// width: "184px",
|
||||||
|
// "&:hover": {
|
||||||
|
// backgroundColor: "#439BC1",
|
||||||
|
// },
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// Add Charge Stations
|
||||||
|
// </Button>
|
||||||
|
// </Box>
|
||||||
|
|
||||||
|
// <IconButton
|
||||||
|
// sx={{
|
||||||
|
// width: "44px",
|
||||||
|
// height: "44px",
|
||||||
|
// borderRadius: "8px",
|
||||||
|
// backgroundColor: "#272727",
|
||||||
|
// color: "#52ACDF",
|
||||||
|
// "&:hover": { backgroundColor: "#333333" },
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <TuneIcon />
|
||||||
|
// </IconButton>
|
||||||
|
// </Box>
|
||||||
|
|
||||||
|
// {/* Table Section */}
|
||||||
|
// <TableContainer
|
||||||
|
// component={Paper}
|
||||||
|
// sx={{
|
||||||
|
// marginTop: "24px",
|
||||||
|
// backgroundColor: "#1C1C1C",
|
||||||
|
// borderRadius: "12px",
|
||||||
|
// overflow: "hidden",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Table>
|
||||||
|
// <TableHead sx={{ backgroundColor: "#272727" }}>
|
||||||
|
// <TableRow>
|
||||||
|
// {[
|
||||||
|
// "Name",
|
||||||
|
// "Location",
|
||||||
|
// "Manager Assigned",
|
||||||
|
// "Vehicle",
|
||||||
|
// "Phone Number",
|
||||||
|
// "Action",
|
||||||
|
// ].map((header) => (
|
||||||
|
// <TableCell
|
||||||
|
// key={header}
|
||||||
|
// sx={{
|
||||||
|
// color: "#FFFFFF",
|
||||||
|
// fontWeight: "bold",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {header}
|
||||||
|
// </TableCell>
|
||||||
|
// ))}
|
||||||
|
// </TableRow>
|
||||||
|
// </TableHead>
|
||||||
|
// <TableBody>
|
||||||
|
// {currentAdmins.map((admin, index) => (
|
||||||
|
// <TableRow
|
||||||
|
// key={index}
|
||||||
|
// sx={{ backgroundColor: "#1C1C1C" }}
|
||||||
|
// >
|
||||||
|
// <TableCell
|
||||||
|
// sx={{
|
||||||
|
// color: "#FFFFFF",
|
||||||
|
// borderBottom: "1px solid #2A2A2A",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {admin.name}
|
||||||
|
// </TableCell>
|
||||||
|
// <TableCell
|
||||||
|
// sx={{
|
||||||
|
// color: "#FFFFFF",
|
||||||
|
// borderBottom: "1px solid #2A2A2A",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {admin.location || "N/A"}
|
||||||
|
// </TableCell>
|
||||||
|
// <TableCell
|
||||||
|
// sx={{
|
||||||
|
// color: "#FFFFFF",
|
||||||
|
// borderBottom: "1px solid #2A2A2A",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {admin.managerAssigned || "N/A"}
|
||||||
|
// </TableCell>
|
||||||
|
// <TableCell
|
||||||
|
// sx={{
|
||||||
|
// color: "#FFFFFF",
|
||||||
|
// borderBottom: "1px solid #2A2A2A",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {admin.vehicle || "N/A"}{" "}
|
||||||
|
// <Typography
|
||||||
|
// component="span"
|
||||||
|
// sx={{
|
||||||
|
// color: "#52ACDF",
|
||||||
|
// cursor: "pointer",
|
||||||
|
// textDecoration: "none",
|
||||||
|
// "&:hover": {
|
||||||
|
// textDecoration: "underline",
|
||||||
|
// },
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// +6 more
|
||||||
|
// </Typography>
|
||||||
|
// </TableCell>
|
||||||
|
// <TableCell
|
||||||
|
// sx={{
|
||||||
|
// color: "#FFFFFF",
|
||||||
|
// borderBottom: "1px solid #2A2A2A",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {admin.phone}
|
||||||
|
// </TableCell>
|
||||||
|
// <TableCell
|
||||||
|
// sx={{
|
||||||
|
// color: "#FFFFFF",
|
||||||
|
// borderBottom: "1px solid #2A2A2A",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <IconButton size="small">
|
||||||
|
// <MoreHorizIcon
|
||||||
|
// sx={{ color: "#FFFFFF" }}
|
||||||
|
// />
|
||||||
|
// </IconButton>
|
||||||
|
// </TableCell>
|
||||||
|
// </TableRow>
|
||||||
|
// ))}
|
||||||
|
// </TableBody>
|
||||||
|
// </Table>
|
||||||
|
// </TableContainer>
|
||||||
|
|
||||||
|
// {/* Pagination */}
|
||||||
|
// <Box
|
||||||
|
// sx={{
|
||||||
|
// display: "flex",
|
||||||
|
// justifyContent: "flex-end",
|
||||||
|
// alignItems: "center",
|
||||||
|
// marginTop: "16px",
|
||||||
|
// width: "100%",
|
||||||
|
// gap: "8px",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
|
||||||
|
// >
|
||||||
|
// Page Number :
|
||||||
|
// </Typography>
|
||||||
|
// <Pagination
|
||||||
|
// count={Math.ceil(filteredAdmins.length / adminsPerPage)}
|
||||||
|
// page={currentPage}
|
||||||
|
// onChange={handlePageChange}
|
||||||
|
// siblingCount={0}
|
||||||
|
// boundaryCount={0}
|
||||||
|
// sx={{
|
||||||
|
// "& .MuiPaginationItem-root": {
|
||||||
|
// color: "white",
|
||||||
|
// borderRadius: "0px",
|
||||||
|
// },
|
||||||
|
// "& .MuiPaginationItem-page.Mui-selected": {
|
||||||
|
// backgroundColor: "transparent",
|
||||||
|
// fontWeight: "bold",
|
||||||
|
// color: "#FFFFFF",
|
||||||
|
// },
|
||||||
|
// }}
|
||||||
|
// />
|
||||||
|
// </Box>
|
||||||
|
// </Box>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { Box, Button, Typography } from "@mui/material";
|
import { Box, Button, Typography } from "@mui/material";
|
||||||
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
|
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
|
||||||
|
|
|
||||||
|
|
@ -37,17 +37,13 @@ const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) =>
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
backgroundColor:'#202020',
|
||||||
height: '100vh',
|
height: '100vh',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
padding: 2,
|
padding: 2,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box>
|
|
||||||
<Typography variant="h6" component="h1" gutterBottom>
|
|
||||||
Dashboard
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
</Box>
|
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</AppTheme>
|
</AppTheme>
|
||||||
|
|
@ -55,3 +51,10 @@ const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) =>
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Dashboard;
|
export default Dashboard;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
313
src/pages/UserList/index.tsx
Normal file
313
src/pages/UserList/index.tsx
Normal file
|
|
@ -0,0 +1,313 @@
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Typography,
|
||||||
|
TextField,
|
||||||
|
InputAdornment,
|
||||||
|
Paper,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Pagination,
|
||||||
|
IconButton,
|
||||||
|
} from "@mui/material";
|
||||||
|
import SearchIcon from "@mui/icons-material/Search";
|
||||||
|
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||||
|
import TuneIcon from "@mui/icons-material/Tune";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { userList } from "../../redux/slices/userSlice"; // Make sure userSlice exists
|
||||||
|
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||||
|
|
||||||
|
export default function UserList() {
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const usersPerPage = 10;
|
||||||
|
|
||||||
|
const dispatch = useDispatch<AppDispatch>();
|
||||||
|
const users = useSelector((state: RootState) => state.userReducer.users);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(userList());
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
|
const staticUsers = [
|
||||||
|
{
|
||||||
|
name: "Alice Johnson",
|
||||||
|
email: "alice@example.com",
|
||||||
|
role: "User",
|
||||||
|
phone: "+1 234 567 8901",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bob Brown",
|
||||||
|
email: "bob@example.com",
|
||||||
|
role: "Admin",
|
||||||
|
phone: "+1 987 654 3210",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Charlie Davis",
|
||||||
|
email: "charlie@example.com",
|
||||||
|
role: "User",
|
||||||
|
phone: "+1 312 555 7890",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Alice Johnson",
|
||||||
|
email: "alice@example.com",
|
||||||
|
role: "User",
|
||||||
|
phone: "+1 234 567 8901",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bob Brown",
|
||||||
|
email: "bob@example.com",
|
||||||
|
role: "Admin",
|
||||||
|
phone: "+1 987 654 3210",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Charlie Davis",
|
||||||
|
email: "charlie@example.com",
|
||||||
|
role: "User",
|
||||||
|
phone: "+1 312 555 7890",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bob Brown",
|
||||||
|
email: "bob@example.com",
|
||||||
|
role: "Admin",
|
||||||
|
phone: "+1 987 654 3210",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Charlie Davis",
|
||||||
|
email: "charlie@example.com",
|
||||||
|
role: "User",
|
||||||
|
phone: "+1 312 555 7890",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const userData = users.length ? users : staticUsers;
|
||||||
|
|
||||||
|
const filteredUsers = userData.filter((user) =>
|
||||||
|
user.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
const indexOfLastUser = currentPage * usersPerPage;
|
||||||
|
const indexOfFirstUser = indexOfLastUser - usersPerPage;
|
||||||
|
const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
|
||||||
|
|
||||||
|
const handlePageChange = (event, value) => {
|
||||||
|
setCurrentPage(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "calc(100% - 48px)",
|
||||||
|
margin: "0 auto",
|
||||||
|
padding: "24px",
|
||||||
|
backgroundColor: "#1C1C1C",
|
||||||
|
borderRadius: "12px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: "18px",
|
||||||
|
fontFamily: "Gilroy",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
User List
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{/* Search & Buttons Section */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
gap: "16px",
|
||||||
|
marginTop: "16px",
|
||||||
|
alignItems: "center",
|
||||||
|
fontFamily: "Gilroy",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
variant="outlined"
|
||||||
|
placeholder="Search Users"
|
||||||
|
sx={{
|
||||||
|
width: "422px",
|
||||||
|
backgroundColor: "#272727",
|
||||||
|
borderRadius: "12px",
|
||||||
|
input: { color: "#FFFFFF" },
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
borderRadius: "12px",
|
||||||
|
"& fieldset": { borderColor: "#FFFFFF" },
|
||||||
|
"&:hover fieldset": { borderColor: "#FFFFFF" },
|
||||||
|
"&.Mui-focused fieldset": {
|
||||||
|
borderColor: "#52ACDF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon sx={{ color: "#FFFFFF" }} />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#52ACDF",
|
||||||
|
color: "white",
|
||||||
|
borderRadius: "8px",
|
||||||
|
width: "184px",
|
||||||
|
"&:hover": { backgroundColor: "#439BC1" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Add User
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<IconButton
|
||||||
|
sx={{
|
||||||
|
width: "44px",
|
||||||
|
height: "44px",
|
||||||
|
borderRadius: "8px",
|
||||||
|
backgroundColor: "#272727",
|
||||||
|
color: "#52ACDF",
|
||||||
|
"&:hover": { backgroundColor: "#333333" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TuneIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Table Section */}
|
||||||
|
<TableContainer
|
||||||
|
component={Paper}
|
||||||
|
sx={{
|
||||||
|
marginTop: "24px",
|
||||||
|
backgroundColor: "#1C1C1C",
|
||||||
|
borderRadius: "12px",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Table>
|
||||||
|
<TableHead sx={{ backgroundColor: "#272727" }}>
|
||||||
|
<TableRow>
|
||||||
|
{["Name", "Email", "Role", "Phone", "Action"].map(
|
||||||
|
(header) => (
|
||||||
|
<TableCell
|
||||||
|
key={header}
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{header}
|
||||||
|
</TableCell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{currentUsers.map((user, index) => (
|
||||||
|
<TableRow
|
||||||
|
key={index}
|
||||||
|
sx={{ backgroundColor: "#1C1C1C" }}
|
||||||
|
>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.email}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.role}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.phone}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton size="small">
|
||||||
|
<MoreHorizIcon
|
||||||
|
sx={{ color: "#FFFFFF" }}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
alignItems: "center",
|
||||||
|
marginTop: "16px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
|
||||||
|
>
|
||||||
|
Page Number :
|
||||||
|
</Typography>
|
||||||
|
<Pagination
|
||||||
|
count={Math.ceil(filteredUsers.length / usersPerPage)}
|
||||||
|
page={currentPage}
|
||||||
|
onChange={handlePageChange}
|
||||||
|
siblingCount={0}
|
||||||
|
boundaryCount={0}
|
||||||
|
sx={{
|
||||||
|
"& .MuiPaginationItem-root": {
|
||||||
|
color: "white",
|
||||||
|
borderRadius: "0px",
|
||||||
|
},
|
||||||
|
"& .MuiPaginationItem-page.Mui-selected": {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -3,11 +3,13 @@ import { combineReducers } from "@reduxjs/toolkit";
|
||||||
import authReducer from "./slices/authSlice";
|
import authReducer from "./slices/authSlice";
|
||||||
import adminReducer from "./slices/adminSlice";
|
import adminReducer from "./slices/adminSlice";
|
||||||
import profileReducer from "./slices/profileSlice";
|
import profileReducer from "./slices/profileSlice";
|
||||||
|
import userReducer from "./slices/userSlice.ts";
|
||||||
|
|
||||||
const rootReducer = combineReducers({
|
const rootReducer = combineReducers({
|
||||||
authReducer,
|
authReducer,
|
||||||
adminReducer,
|
adminReducer,
|
||||||
profileReducer
|
profileReducer,
|
||||||
|
userReducer,
|
||||||
});
|
});
|
||||||
|
|
||||||
export type RootState = ReturnType<typeof rootReducer>;
|
export type RootState = ReturnType<typeof rootReducer>;
|
||||||
|
|
|
||||||
59
src/redux/slices/userSlice.ts
Normal file
59
src/redux/slices/userSlice.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
// Define TypeScript types
|
||||||
|
interface User {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
phone?: string;
|
||||||
|
location?: string;
|
||||||
|
managerAssigned?: string;
|
||||||
|
vehicle?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UserState {
|
||||||
|
users: User[];
|
||||||
|
loading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initial state
|
||||||
|
const initialState: UserState = {
|
||||||
|
users: [],
|
||||||
|
loading: false,
|
||||||
|
error: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Async thunk to fetch user list
|
||||||
|
export const userList = createAsyncThunk<User[]>("users/fetchUsers", async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get<User[]>("/api/users"); // Adjust the API endpoint as needed
|
||||||
|
return response.data;
|
||||||
|
} catch (error: any) {
|
||||||
|
throw new Error(error.response?.data?.message || "Failed to fetch users");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const userSlice = createSlice({
|
||||||
|
name: "users",
|
||||||
|
initialState,
|
||||||
|
reducers: {},
|
||||||
|
extraReducers: (builder) => {
|
||||||
|
builder
|
||||||
|
.addCase(userList.pending, (state) => {
|
||||||
|
state.loading = true;
|
||||||
|
state.error = null;
|
||||||
|
})
|
||||||
|
.addCase(userList.fulfilled, (state, action: PayloadAction<User[]>) => {
|
||||||
|
state.loading = false;
|
||||||
|
state.users = action.payload;
|
||||||
|
})
|
||||||
|
.addCase(userList.rejected, (state, action) => {
|
||||||
|
state.loading = false;
|
||||||
|
state.error = action.error.message || "Failed to fetch users";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default userSlice.reducer;
|
||||||
|
|
@ -11,6 +11,7 @@ const Vehicles = lazy(() => import("./pages/Vehicles"));
|
||||||
const AdminList = lazy(() => import("./pages/AdminList"));
|
const AdminList = lazy(() => import("./pages/AdminList"));
|
||||||
const ProfilePage = lazy(() => import("./pages/ProfilePage"));
|
const ProfilePage = lazy(() => import("./pages/ProfilePage"));
|
||||||
const NotFoundPage = lazy(() => import("./pages/NotFound"));
|
const NotFoundPage = lazy(() => import("./pages/NotFound"));
|
||||||
|
const UserList = lazy(() => import("./pages/UserList"));
|
||||||
|
|
||||||
interface ProtectedRouteProps {
|
interface ProtectedRouteProps {
|
||||||
caps: string[];
|
caps: string[];
|
||||||
|
|
@ -73,6 +74,15 @@ export default function AppRouter() {
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="user-list"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute
|
||||||
|
caps={[]}
|
||||||
|
component={<UserList />}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
<Route
|
<Route
|
||||||
path="profile"
|
path="profile"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue