implementation of dashboard layout
This commit is contained in:
jaanvi
parent
f488dd1646
commit
47d4b1254b
|
|
@ -14,7 +14,7 @@ const Logout: React.FC<LogoutProps> = ({ setLogoutModal, logoutModal }) => {
|
|||
|
||||
const handlelogout = () => {
|
||||
localStorage.clear();
|
||||
navigate("/auth/login");
|
||||
navigate("/login");
|
||||
toast.success("Logged out successfully");
|
||||
setLogoutModal(false);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const Logout: React.FC<LogoutProps> = ({ setLogoutModal, logoutModal }) => {
|
|||
|
||||
const handlelogout = () => {
|
||||
localStorage.clear();
|
||||
navigate("/auth/login");
|
||||
navigate("/login");
|
||||
toast.success("Logged out successfully");
|
||||
setLogoutModal(false);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,79 +1,66 @@
|
|||
import * as React from 'react';
|
||||
import Grid from '@mui/material/Grid2';
|
||||
import Box from '@mui/material/Box';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Copyright from '../../pages/Dashboard/internals/components/Copyright';
|
||||
import ChartUserByCountry from '../ChartUserByCountry';
|
||||
import CustomizedTreeView from '../CustomizedTreeView';
|
||||
import CustomizedDataGrid from '../CustomizedDataGrid';
|
||||
import HighlightedCard from '../HighlightedCard';
|
||||
import PageViewsBarChart from '../PageViewsBarChart';
|
||||
import SessionsChart from '../SessionsChart';
|
||||
import StatCard, { StatCardProps } from '../StatCard';
|
||||
import * as React from "react";
|
||||
import Grid from "@mui/material/Grid2";
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Copyright from "../../pages/Dashboard/internals/components/Copyright";
|
||||
import ChartUserByCountry from "../ChartUserByCountry";
|
||||
import CustomizedTreeView from "../CustomizedTreeView";
|
||||
import CustomizedDataGrid from "../CustomizedDataGrid";
|
||||
import HighlightedCard from "../HighlightedCard";
|
||||
import PageViewsBarChart from "../PageViewsBarChart";
|
||||
import SessionsChart from "../SessionsChart";
|
||||
import StatCard, { StatCardProps } from "../StatCard";
|
||||
|
||||
const data: StatCardProps[] = [
|
||||
{
|
||||
title: 'Users',
|
||||
value: '14k',
|
||||
interval: 'Last 30 days',
|
||||
trend: 'up',
|
||||
data: [
|
||||
200, 24, 220, 260, 240, 380, 100, 240, 280, 240, 300, 340, 320, 360, 340,
|
||||
380, 360, 400, 380, 420, 400, 640, 340, 460, 440, 480, 460, 600, 880, 920,
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Conversions',
|
||||
value: '325',
|
||||
interval: 'Last 30 days',
|
||||
trend: 'down',
|
||||
data: [
|
||||
1640, 1250, 970, 1130, 1050, 900, 720, 1080, 900, 450, 920, 820, 840, 600,
|
||||
820, 780, 800, 760, 380, 740, 660, 620, 840, 500, 520, 480, 400, 360, 300,
|
||||
220,
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Event count',
|
||||
value: '200k',
|
||||
interval: 'Last 30 days',
|
||||
trend: 'neutral',
|
||||
data: [
|
||||
500, 400, 510, 530, 520, 600, 530, 520, 510, 730, 520, 510, 530, 620, 510,
|
||||
530, 520, 410, 530, 520, 610, 530, 520, 610, 530, 420, 510, 430, 520, 510,
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Total Charge Stations",
|
||||
value: "86",
|
||||
},
|
||||
{
|
||||
title: "Charging Completed",
|
||||
value: "12",
|
||||
},
|
||||
{
|
||||
title: "Active Users",
|
||||
value: "24",
|
||||
},
|
||||
{
|
||||
title: "Total Energy Consumed",
|
||||
value: "08",
|
||||
},
|
||||
];
|
||||
|
||||
export default function MainGrid() {
|
||||
return (
|
||||
<Box sx={{ width: '100%', maxWidth: { sm: '100%', md: '1700px' } }}>
|
||||
{/* cards */}
|
||||
<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
|
||||
Overview
|
||||
</Typography>
|
||||
<Grid
|
||||
container
|
||||
spacing={2}
|
||||
columns={12}
|
||||
sx={{ mb: (theme) => theme.spacing(2) }}
|
||||
>
|
||||
{data.map((card, index) => (
|
||||
<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>
|
||||
<StatCard {...card} />
|
||||
</Grid>
|
||||
))}
|
||||
<Grid size={{ xs: 12, sm: 6, lg: 3 }}>
|
||||
<HighlightedCard />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<SessionsChart />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<PageViewsBarChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
return (
|
||||
<Box sx={{ width: "100%", maxWidth: { sm: "100%", md: "1700px" } }}>
|
||||
{/* cards */}
|
||||
<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
|
||||
Overview
|
||||
</Typography>
|
||||
<Grid
|
||||
container
|
||||
spacing={2}
|
||||
columns={12}
|
||||
sx={{ mb: (theme) => theme.spacing(2) }}
|
||||
>
|
||||
{data.map((card, index) => (
|
||||
<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>
|
||||
<StatCard {...card} />
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<SessionsChart />
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<ChartUserByCountry />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<PageViewsBarChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@ const baseMenuItems = [
|
|||
icon: <DashboardOutlinedIcon />,
|
||||
url: "/panel/dashboard",
|
||||
},
|
||||
{
|
||||
text: "Admins",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/admin-list",
|
||||
},
|
||||
// {
|
||||
// text: "Admins",
|
||||
// icon: <AnalyticsRoundedIcon />,
|
||||
// url: "/panel/admin-list",
|
||||
// },
|
||||
|
||||
];
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ const superAdminOnlyItems = [
|
|||
{
|
||||
text: "Admin List",
|
||||
icon: <ManageAccountsOutlinedIcon />,
|
||||
url: "/panel/adminlist",
|
||||
url: "/panel/admin-list",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -53,7 +53,18 @@ export default function MenuContent({ hidden }: PropType) {
|
|||
...baseMenuItems,
|
||||
...(userRole === "superadmin" ? superAdminOnlyItems : []),
|
||||
];
|
||||
|
||||
// const mainListItems = [
|
||||
// ...baseMenuItems,
|
||||
// // ...(userRole === "superadmin"
|
||||
// // ? [
|
||||
// // // {
|
||||
// // // text: "Admin List",
|
||||
// // // icon: <ManageAccountsOutlinedIcon />,
|
||||
// // // url: "/panel/admin-list",
|
||||
// // // },
|
||||
// // ]
|
||||
// // : []),
|
||||
// ];
|
||||
return (
|
||||
<Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
|
||||
<List dense>
|
||||
|
|
|
|||
|
|
@ -1,150 +1,144 @@
|
|||
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';
|
||||
|
||||
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;
|
||||
}
|
||||
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/Box";
|
||||
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
||||
|
||||
export default function SessionsChart() {
|
||||
const theme = useTheme();
|
||||
const data = getDaysInMonth(4, 2024);
|
||||
return (
|
||||
<Card variant="outlined" sx={{ width: "100%", height: "42%" }}>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h6"
|
||||
align="left"
|
||||
color="text.secondary"
|
||||
sx={{
|
||||
fontFamily: "Gilroy",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "0%",
|
||||
}}
|
||||
>
|
||||
Charging prices
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "12px",
|
||||
mb: "16px",
|
||||
backgroundColor: "#F2F2F2",
|
||||
color: "#212121",
|
||||
fontSize: "14px",
|
||||
lineHeight: "20px",
|
||||
width: "700px",
|
||||
height: "48px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: "12px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #454545",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: "Gilroy",
|
||||
fontWeight: 500,
|
||||
fontSize: "14px",
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "0%",
|
||||
backgroundColor: "#F2F2F2",
|
||||
padding: "4px",
|
||||
}}
|
||||
>
|
||||
Delhi NCR EV Station
|
||||
</Typography>
|
||||
<ArrowDropDownIcon />
|
||||
</Box>
|
||||
|
||||
const colorPalette = [
|
||||
theme.palette.primary.light,
|
||||
theme.palette.primary.main,
|
||||
theme.palette.primary.dark,
|
||||
];
|
||||
|
||||
return (
|
||||
<Card variant="outlined" sx={{ width: '100%' }}>
|
||||
<CardContent>
|
||||
<Typography component="h2" variant="subtitle2" gutterBottom>
|
||||
Sessions
|
||||
</Typography>
|
||||
<Stack sx={{ justifyContent: 'space-between' }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
alignContent: { xs: 'center', sm: 'flex-start' },
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4" component="p">
|
||||
13,277
|
||||
</Typography>
|
||||
<Chip size="small" color="success" label="+35%" />
|
||||
</Stack>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||||
Sessions per day for the last 30 days
|
||||
</Typography>
|
||||
</Stack>
|
||||
<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, 600, 1200, 1500, 1800, 2400, 2100, 2700, 3000, 1800, 3300,
|
||||
3600, 3900, 4200, 4500, 3900, 4800, 5100, 5400, 4800, 5700, 6000,
|
||||
6300, 6600, 6900, 7200, 7500, 7800, 8100,
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'referral',
|
||||
label: 'Referral',
|
||||
showMark: false,
|
||||
curve: 'linear',
|
||||
stack: 'total',
|
||||
area: true,
|
||||
stackOrder: 'ascending',
|
||||
data: [
|
||||
500, 900, 700, 1400, 1100, 1700, 2300, 2000, 2600, 2900, 2300, 3200,
|
||||
3500, 3800, 4100, 4400, 2900, 4700, 5000, 5300, 5600, 5900, 6200,
|
||||
6500, 5600, 6800, 7100, 7400, 7700, 8000,
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'organic',
|
||||
label: 'Organic',
|
||||
showMark: false,
|
||||
curve: 'linear',
|
||||
stack: 'total',
|
||||
stackOrder: 'ascending',
|
||||
data: [
|
||||
1000, 1500, 1200, 1700, 1300, 2000, 2400, 2200, 2600, 2800, 2500,
|
||||
3000, 3400, 3700, 3200, 3900, 4100, 3500, 4300, 4500, 4000, 4700,
|
||||
5000, 5200, 4800, 5400, 5600, 5900, 6100, 6300,
|
||||
],
|
||||
area: true,
|
||||
},
|
||||
]}
|
||||
height={250}
|
||||
margin={{ left: 50, right: 20, top: 20, bottom: 20 }}
|
||||
grid={{ horizontal: true }}
|
||||
sx={{
|
||||
'& .MuiAreaElement-series-organic': {
|
||||
fill: "url('#organic')",
|
||||
},
|
||||
'& .MuiAreaElement-series-referral': {
|
||||
fill: "url('#referral')",
|
||||
},
|
||||
'& .MuiAreaElement-series-direct': {
|
||||
fill: "url('#direct')",
|
||||
},
|
||||
}}
|
||||
slotProps={{
|
||||
legend: {
|
||||
hidden: true,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaGradient color={theme.palette.primary.dark} id="organic" />
|
||||
<AreaGradient color={theme.palette.primary.main} id="referral" />
|
||||
<AreaGradient color={theme.palette.primary.light} id="direct" />
|
||||
</LineChart>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
{/* Grid container for the four boxes */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
gap: "40px",
|
||||
width: "700px",
|
||||
mx: "auto",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: "84px",
|
||||
borderRadius: "8px",
|
||||
padding: "12px 16px",
|
||||
backgroundColor: "#F2F2F2",
|
||||
color: "#212121",
|
||||
}}
|
||||
>
|
||||
{/* Box 1 Content */}
|
||||
<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",
|
||||
}}
|
||||
>
|
||||
{/* Box 2 Content */}
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,118 +12,26 @@ import { areaElementClasses } from '@mui/x-charts/LineChart';
|
|||
export type StatCardProps = {
|
||||
title: string;
|
||||
value: string;
|
||||
interval: string;
|
||||
trend: 'up' | 'down' | 'neutral';
|
||||
data: number[];
|
||||
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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.3} />
|
||||
<stop offset="100%" stopColor={color} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
);
|
||||
}
|
||||
|
||||
export default function StatCard({
|
||||
title,
|
||||
value,
|
||||
interval,
|
||||
trend,
|
||||
data,
|
||||
}: StatCardProps) {
|
||||
const theme = useTheme();
|
||||
const daysInWeek = getDaysInMonth(4, 2024);
|
||||
|
||||
const trendColors = {
|
||||
up:
|
||||
theme.palette.mode === 'light'
|
||||
? theme.palette.success.main
|
||||
: theme.palette.success.dark,
|
||||
down:
|
||||
theme.palette.mode === 'light'
|
||||
? theme.palette.error.main
|
||||
: theme.palette.error.dark,
|
||||
neutral:
|
||||
theme.palette.mode === 'light'
|
||||
? theme.palette.grey[400]
|
||||
: theme.palette.grey[700],
|
||||
};
|
||||
|
||||
const labelColors = {
|
||||
up: 'success' as const,
|
||||
down: 'error' as const,
|
||||
neutral: 'default' as const,
|
||||
};
|
||||
|
||||
const color = labelColors[trend];
|
||||
const chartColor = trendColors[trend];
|
||||
const trendValues = { up: '+25%', down: '-25%', neutral: '+5%' };
|
||||
|
||||
return (
|
||||
<Card variant="outlined" sx={{ height: '100%', flexGrow: 1 }}>
|
||||
<CardContent>
|
||||
<Typography component="h2" variant="subtitle2" gutterBottom>
|
||||
{title}
|
||||
</Typography>
|
||||
<Stack
|
||||
direction="column"
|
||||
sx={{ justifyContent: 'space-between', flexGrow: '1', gap: 1 }}
|
||||
>
|
||||
<Stack sx={{ justifyContent: 'space-between' }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{ justifyContent: 'space-between', alignItems: 'center' }}
|
||||
>
|
||||
<Typography variant="h4" component="p">
|
||||
{value}
|
||||
</Typography>
|
||||
<Chip size="small" color={color} label={trendValues[trend]} />
|
||||
</Stack>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||||
{interval}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Box sx={{ width: '100%', height: 50 }}>
|
||||
<SparkLineChart
|
||||
colors={[chartColor]}
|
||||
data={data}
|
||||
area
|
||||
showHighlight
|
||||
showTooltip
|
||||
xAxis={{
|
||||
scaleType: 'band',
|
||||
data: daysInWeek, // Use the correct property 'data' for xAxis
|
||||
}}
|
||||
sx={{
|
||||
[`& .${areaElementClasses.root}`]: {
|
||||
fill: `url(#area-gradient-${value})`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaGradient color={chartColor} id={`area-gradient-${value}`} />
|
||||
</SparkLineChart>
|
||||
</Box>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card variant="outlined" sx={{ height: "100%"}}>
|
||||
<CardContent>
|
||||
<Typography component="h2" variant="subtitle2" gutterBottom>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography component="h1" variant="body1" fontSize={30} fontWeight={700} gutterBottom>
|
||||
{value}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -328,7 +328,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
<Typography sx={{ textAlign: "center" }}>
|
||||
Don't have an account?{" "}
|
||||
<Link
|
||||
href="/auth/signup"
|
||||
href="/signup"
|
||||
variant="body2"
|
||||
sx={{ alignSelf: "center" }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ export default function SignUp(props: { disableCustomTheme?: boolean }) {
|
|||
};
|
||||
|
||||
await dispatch(registerUser(payload)).unwrap();
|
||||
navigate("/auth/login");
|
||||
navigate("/login");
|
||||
toast.success("Registration successful!");
|
||||
} catch (error: any) {
|
||||
toast.error(error?.message || "Registration failed");
|
||||
|
|
@ -347,7 +347,7 @@ export default function SignUp(props: { disableCustomTheme?: boolean }) {
|
|||
<Typography sx={{ textAlign: "center" }}>
|
||||
Already have an account?
|
||||
<Link
|
||||
href="/auth/login"
|
||||
href="/login"
|
||||
variant="body2"
|
||||
sx={{ alignSelf: "center" }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) =>
|
|||
<AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
|
||||
<CssBaseline enableColorScheme />
|
||||
{!disableCustomTheme ? (
|
||||
<><MainGrid /><AdminList /></>
|
||||
<><MainGrid /></>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -46,9 +46,7 @@ const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) =>
|
|||
<Typography variant="h6" component="h1" gutterBottom>
|
||||
Dashboard
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ marginTop: 2 }}>
|
||||
No content available on the Dashboard yet.
|
||||
</Typography>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export const adminList = createAsyncThunk<
|
|||
{ rejectValue: string }
|
||||
>("FetchAdminList", async (_, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.get("auth/admin-list");
|
||||
const response = await http.get("/admin-list");
|
||||
return response?.data?.data;
|
||||
} catch (error: any) {
|
||||
toast.error("Error fetching users list" + error);
|
||||
|
|
@ -55,7 +55,7 @@ export const deleteAdmin = createAsyncThunk<
|
|||
{ rejectValue: string }
|
||||
>("deleteAdmin", async (id, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.delete(`auth/${id}/delete-admin`);
|
||||
const response = await http.delete(`/${id}/delete-admin`);
|
||||
toast.success(response.data?.message);
|
||||
return id;
|
||||
} catch (error: any) {
|
||||
|
|
@ -76,9 +76,9 @@ export const createAdmin = createAsyncThunk<
|
|||
registeredAddress: string;
|
||||
},
|
||||
{ rejectValue: string }
|
||||
>("auth/signup", async (data, { rejectWithValue }) => {
|
||||
>("/create-admin", async (data, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.post("auth/create-admin", data);
|
||||
const response = await http.post("/create-admin", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return rejectWithValue(
|
||||
|
|
@ -92,10 +92,7 @@ export const updateAdmin = createAsyncThunk(
|
|||
"updateAdmin",
|
||||
async ({ id, ...userData }: User, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.put(
|
||||
`auth/${id}/update-admin`,
|
||||
userData
|
||||
);
|
||||
const response = await http.put(`/${id}/update-admin`, userData);
|
||||
toast.success("Admin updated successfully");
|
||||
return response?.data;
|
||||
} catch (error: any) {
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export const loginUser = createAsyncThunk<
|
|||
//use below commented endpoint if using deployed backend........
|
||||
// const response = await http.post("admin/login", {
|
||||
|
||||
const response = await http.post("admin/login", {
|
||||
const response = await http.post("/login", {
|
||||
email,
|
||||
password,
|
||||
});
|
||||
|
|
@ -75,7 +75,7 @@ export const registerUser = createAsyncThunk<
|
|||
{ rejectValue: string }
|
||||
>("SignUpUser", async (data, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.post("auth/signup", data);
|
||||
const response = await http.post("/signup", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return rejectWithValue(
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export const fetchAdminProfile = createAsyncThunk<
|
|||
const token = localStorage?.getItem("authToken");
|
||||
if (!token) throw new Error("No token found");
|
||||
|
||||
const response = await http.get("/auth/profile");
|
||||
const response = await http.get("/profile");
|
||||
|
||||
if (!response.data?.data) throw new Error("Invalid API response");
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
import {
|
||||
Routes as BaseRoutes,
|
||||
Navigate,
|
||||
Route,
|
||||
} from "react-router-dom";
|
||||
import { Routes as BaseRoutes, Navigate, Route } from "react-router-dom";
|
||||
import React, { lazy, Suspense } from "react";
|
||||
import LoadingComponent from "./components/Loading";
|
||||
import DashboardLayout from "./layouts/DashboardLayout";
|
||||
|
|
@ -24,7 +20,7 @@ interface ProtectedRouteProps {
|
|||
// Protected Route Component
|
||||
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ caps, component }) => {
|
||||
if (!localStorage.getItem("authToken")) {
|
||||
return <Navigate to="/auth/login" replace />;
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
return component;
|
||||
};
|
||||
|
|
@ -35,13 +31,13 @@ export default function AppRouter() {
|
|||
<Suspense fallback={<LoadingComponent />}>
|
||||
<BaseRoutes>
|
||||
{/* Default Route */}
|
||||
<Route element={<Navigate to="/auth/login" replace />} index />
|
||||
<Route element={<Navigate to="/login" replace />} index />
|
||||
|
||||
{/* Auth Routes */}
|
||||
<Route path="/auth">
|
||||
<Route path="">
|
||||
<Route
|
||||
path=""
|
||||
element={<Navigate to="/auth/login" replace />}
|
||||
element={<Navigate to="/login" replace />}
|
||||
index
|
||||
/>
|
||||
<Route path="login" element={<Login />} />
|
||||
|
|
@ -90,7 +86,7 @@ export default function AppRouter() {
|
|||
</Route>
|
||||
|
||||
{/* Catch-all Route */}
|
||||
<Route path="*" element={<NotFoundPage/>} />
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</BaseRoutes>
|
||||
</Suspense>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue