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

Resolved merge conflicts and kept incoming changes from develop

Browse source
This commit is contained in:
harsh gogia 2025-03-07 11:43:19 +05:30
parent 5cfee36f0b ac145d5d23
commit 96eba7be84
32 changed files with 1712 additions and 2017 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/model-s-exterior-front-view.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.4 KiB

20
src/components/AddUserModel/index.tsx
View file

@ -55,7 +55,19 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
});
const onSubmit = (data: FormData) => {
handleCreate(data);
if (editRow) {
handleUpdate(
editRow.id,
data.name,
data.email,
data.phone,
data.password
);
} else {
handleCreate(data);
}
handleClose();
reset();
@ -79,7 +91,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
justifyContent: "space-between",
}}
>
{editRow ? "Edit Admin" : "Add Admin"}
{editRow ? "Edit User" : "Add User"}
<Box
onClick={handleClose}
sx={{
@ -210,3 +222,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
};
export default AddUserModal;
function handleUpdate(id: any, name: string, email: string, phone: string, password: string) {
throw new Error("Function not implemented.");
}

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

@ -42,7 +42,7 @@ export default function AppNavbar() {
sx={{
display: { xs: "auto", md: "none" },
boxShadow: 0,
bgcolor: "background.paper",
backgroundColor:"#1C1C1C",
backgroundImage: "none",
borderBottom: "1px solid",
borderColor: "divider",

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

@ -1,3 +1,4 @@
import * as React from "react";
import { styled } from "@mui/material/styles";
import Table from "@mui/material/Table";
@ -12,24 +13,30 @@ import { useDispatch } from "react-redux";
import {
Box,
Button,
dividerClasses,
IconButton,
listClasses,
InputAdornment,
Menu,
Pagination,
TextField,
Typography,
} from "@mui/material";
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
import DeleteModal from "../Modals/DeleteModal";
import { AppDispatch } from "../../redux/store/store";
import ViewModal from "../Modals/ViewModal";
import SearchIcon from "@mui/icons-material/Search";
import TuneIcon from "@mui/icons-material/Tune";
// Styled components for customization
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: " #1565c0",
backgroundColor: "#454545", // Changed to #272727 for the header
color: theme.palette.common.white,
borderBottom: "none", // Remove any border at the bottom of the header
},
[`&.${tableCellClasses.body}`]: {
fontSize: 14,
borderBottom: "1px solid #454545", // Adding border to body cells
},
}));
@ -37,8 +44,9 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
"&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover,
},
"&:last-child td, &:last-child th": {
border: 0,
"& td, th": {
borderColor: "#454545", // Applying border color to both td and th
borderWidth: "1px", // Set border width to ensure it appears
},
}));
@ -62,7 +70,8 @@ interface CustomTableProps {
setViewModal: Function;
deleteModal: boolean;
handleStatusToggle: (id: string, currentStatus: number) => void;
tableType?: string;
tableType: string; // Adding tableType prop to change header text dynamically
handleClickOpen: () => void;
}
const CustomTable: React.FC<CustomTableProps> = ({
@ -76,10 +85,15 @@ const CustomTable: React.FC<CustomTableProps> = ({
setModalOpen,
handleStatusToggle,
tableType,
handleClickOpen,
}) => {
const dispatch = useDispatch<AppDispatch>();
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
const [searchQuery, setSearchQuery] = React.useState("");
const [currentPage, setCurrentPage] = React.useState(1);
const usersPerPage = 10;
const open = Boolean(anchorEl);
@ -124,32 +138,164 @@ const CustomTable: React.FC<CustomTableProps> = ({
handleClose();
};
const filteredRows = rows.filter(
(row) =>
(row.name &&
row.name.toLowerCase().includes(searchQuery.toLowerCase())) ||
false
);
const indexOfLastRow = currentPage * usersPerPage;
const indexOfFirstRow = indexOfLastRow - usersPerPage;
const currentRows = filteredRows.slice(indexOfFirstRow, indexOfLastRow);
const handlePageChange = (
event: React.ChangeEvent<unknown>,
value: number
) => {
setCurrentPage(value);
};
return (
<Box sx={{ overflowX: "auto", width: "100%" }}>
<TableContainer component={Paper}>
<Table
<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",
}}
>
{/* Dynamic title based on the page type */}
{tableType === "admin"
? "Admin"
: tableType === "role"
? "Roles"
: tableType === "user"
? "Users"
: tableType === "manager"
? "Managers"
: tableType === "vehicle"
? "Vehicles"
: "List"}
</Typography>
{/* Search & Buttons Section */}
<Box
sx={{
display: "flex",
gap: "16px",
marginTop: "16px",
alignItems: "center",
}}
>
<TextField
variant="outlined"
placeholder="Search"
sx={{
minWidth: 700,
width: "100%",
tableLayout: "auto",
width: "422px",
borderRadius: "12px",
input: { color: "#FFFFFF" },
backgroundColor: "#272727",
"& .MuiOutlinedInput-root": {
borderRadius: "12px",
"& fieldset": { borderColor: "#FFFFFF" },
"&:hover fieldset": { borderColor: "#FFFFFF" },
"&.Mui-focused fieldset": {
borderColor: "#52ACDF",
},
},
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon sx={{ color: "#272727" }} />
</InputAdornment>
),
}}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
width: "100%",
}}
aria-label="customized table"
>
<TableHead>
<Button
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
width: "184px",
"&:hover": { backgroundColor: "#439BC1" },
}}
onClick={() => handleClickOpen()}
>
Add{" "}
{tableType === "admin"
? "Admin"
: tableType === "role"
? "Role"
: tableType === "user"
? "User"
: tableType === "manager"
? "Manager"
: tableType === "vehicle"
? "Vehicle"
: "Item"}
</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",
borderBottom: "none",
}}
>
{" "}
<TableRow>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
sx={{
whiteSpace: "nowrap", // Prevent wrapping
// fontSize: { xs: "12px", sm: "14px" },
fontSize: {
xs: "10px",
sm: "12px",
md: "14px",
}, // Adjust font size responsively
padding: { xs: "8px", sm: "12px" },
color: "#FFFFFF",
fontWeight: "bold",
}}
>
{column.label}
@ -158,20 +304,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, rowIndex) => (
{currentRows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
sx={{
whiteSpace: "nowrap", // Prevent wrapping
fontSize: {
xs: "10px",
sm: "12px",
md: "14px",
}, // Adjust font size responsively
padding: { xs: "8px", sm: "12px" },
color: "#FFFFFF",
backgroundColor: "#272727",
}}
>
{isImage(row[column.id]) ? (
@ -192,8 +332,24 @@ const CustomTable: React.FC<CustomTableProps> = ({
handleClick(e, row);
setRowData(row); // Store the selected row
}}
sx={{
padding: 0,
minWidth: 0,
width: "auto",
height: "auto",
backgroundColor:
"transparent",
color: "#FFFFFF",
border: "none",
"&:hover": {
backgroundColor:
"transparent",
},
}}
>
<MoreVertRoundedIcon />
<MoreHorizRoundedIcon
sx={{ fontSize: "24px" }}
/>
</IconButton>
)}
</StyledTableCell>
@ -204,6 +360,40 @@ const CustomTable: React.FC<CustomTableProps> = ({
</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(filteredRows.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>
{/* Menu Actions */}
{open && (
<Menu
@ -215,15 +405,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{
[`& .${listClasses.root}`]: {
padding: "4px",
},
[`& .${paperClasses.root}`]: {
padding: 0,
},
[`& .${dividerClasses.root}`]: {
margin: "4px -4px",
},
}}
>
<Box
@ -243,7 +427,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
sx={{
justifyContent: "flex-start",
py: 0,
textTransform: "capitalize",
fontWeight: "bold",
color: "#52ACDF",
}}
>
View
@ -258,6 +443,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
id={selectedRow?.id}
/>
)}
<Button
variant="text"
onClick={() => setModalOpen(true)}
@ -270,10 +456,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
>
Edit
</Button>
{tableType === "roleList" && (
<Button variant="text" onClick={handleToggleStatus}>
{selectedRow.statusValue === 1
{tableType === "role" && (
<Button
variant="text"
onClick={(e) => {
e.stopPropagation();
handleToggleStatus();
}}
color="secondary"
sx={{
justifyContent: "flex-start",
py: 0,
fontWeight: "bold",
}}
>
{selectedRow?.statusValue === 1
? "Deactivate"
: "Activate"}
</Button>
@ -289,24 +486,25 @@ const CustomTable: React.FC<CustomTableProps> = ({
sx={{
justifyContent: "flex-start",
py: 0,
textTransform: "capitalize",
fontWeight: "bold",
color: "red",
}}
>
Delete
</Button>
{deleteModal && (
<DeleteModal
handleDelete={() =>
handleDeleteButton(selectedRow?.id)
}
open={deleteModal}
setDeleteModal={setDeleteModal}
id={selectedRow?.id}
/>
)}
</Box>
</Menu>
)}
{/* Modals */}
{deleteModal && (
<DeleteModal
handleDelete={() => handleDeleteButton(selectedRow?.id)}
open={deleteModal}
setDeleteModal={setDeleteModal}
id={selectedRow?.id}
/>
)}
</Box>
);
};

68
src/components/Header/index.tsx
View file

@ -8,29 +8,43 @@ 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";
import SideMenu from "../SideMenu";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
import OptionsMenu from "../OptionsMenu";
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
export default function Header() {
const [showNotifications, setShowNotifications] = React.useState(false);
const toggleNotifications = () => {
setShowNotifications((prev) => !prev);
};
const [open, setOpen] = React.useState(true);
const dispatch = useDispatch<AppDispatch>();
const { user } = useSelector(
(state: RootState) => state?.profileReducer
);
React.useEffect(() => {
dispatch(fetchAdminProfile());
}, [dispatch]);
return (
<Box
sx={{
width: "100%",
height: "84px",
// backgroundColor: "#202020",
padding: "20px 24px",
// height: "84px",
// backgroundColor: "#1C1C1C",
padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size // error on this
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexDirection: { xs: "column", sm: "row" },
// padding:"0px"
}}
>
<Box sx={{ flexGrow: 1 }} />
<Stack
direction="row"
spacing={3}
@ -45,9 +59,9 @@ export default function Header() {
{/* Search Bar */}
<Box
sx={{
width: { xs: "100%", sm: "360px" },
// width: { xs: "100%", sm: "360px" },
height: "44px",
backgroundColor: "#FFFFFF",
borderRadius: "8px",
border: "1px solid #424242",
display: "flex",
@ -55,12 +69,12 @@ export default function Header() {
padding: "0 12px",
}}
>
<SearchIcon sx={{ color: "#202020" }} />
<SearchIcon sx={{ color: "#FFFFFF" }} />
<InputBase
sx={{
marginLeft: 1,
flex: 1,
color: "#202020",
color: "#FFFFFF",
fontSize: { xs: "12px", sm: "14px" },
}}
/>
@ -75,32 +89,20 @@ export default function Header() {
display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
}}
>
{/* Custom Bell Icon */}
<MenuButton
showBadge
aria-label="Open notifications"
onClick={toggleNotifications}
>
<NotificationsRoundedIcon />
</MenuButton>
<NotificationsNoneIcon onClick={toggleNotifications} />
<Avatar
alt="User Avatar"
src="/avatar.png"
sx={{ width: 36, height: 36 }}
/>
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
{user?.name || "No Admin"}
</Typography>
<Divider flexItem sx={{ backgroundColor: "#202020" }} />
<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: "#202020" }}>
Momah
</Typography>
{/* Dropdown Icon */}
<ArrowDropDownIcon
sx={{ color: "#202020", width: 16, height: 16 }}
/>
</Stack>
{/* <ColorModeIconDropdown /> */}
<OptionsMenu />
</Stack>
{showNotifications && (
<Box
sx={{

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

@ -43,20 +43,20 @@ export default function LineChartCard() {
return (
<Card
variant="outlined"
sx={{ width: "100%", height: "100%", backgroundColor: "#F2F2F2" }}
sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
>
<CardContent>
<div
style={{
display: "flex",
alignItems: "center",
color: "#202020",
color: "#F2F2F2",
}}
>
<Typography
variant="h6"
align="left"
color="#202020"
color="#F2F2F2"
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
@ -70,7 +70,7 @@ export default function LineChartCard() {
sx={{
mt: 2,
mb: 2,
backgroundColor: "#FFFFFF",
backgroundColor: "#202020",
marginLeft: "auto",
marginRight: "16px",
display: "flex",
@ -81,7 +81,7 @@ export default function LineChartCard() {
border: "1px solid #454545",
padding: "4px 8px",
color: "#FFFFFF",
color: "#F2F2F2",
}}
>
<Typography
@ -90,13 +90,13 @@ export default function LineChartCard() {
fontWeight: 500,
fontSize: "14px",
lineHeight: "24px",
color: "#202020",
color: "#F2F2F2",
p: "4px",
}}
>
Weekly
</Typography>
<ArrowDropDownIcon sx={{ color: "#202020" }} />
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
</Box>
</div>

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

@ -48,7 +48,7 @@ export default function MainGrid() {
spacing={2}
columns={12}
sx={{ mb: (theme) => theme.spacing(2) }}
// sx={{ mb: (theme) => theme.spacing(2) }}
>
{data.map((card, index) => (
<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>

98
src/components/OptionsMenu/index.tsx
View file

@ -1,21 +1,15 @@
import * as React from "react";
import { styled } from "@mui/material/styles";
import Divider, { dividerClasses } from "@mui/material/Divider";
import Menu from "@mui/material/Menu";
import MuiMenuItem from "@mui/material/MenuItem";
import { paperClasses } from "@mui/material/Paper";
import { listClasses } from "@mui/material/List";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
import MenuButton from "../MenuButton";
import { Avatar } from "@mui/material";
import { useNavigate } from "react-router-dom";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Link from "@mui/material/Link";
import Logout from "../LogOutFunction/LogOutFunction";
import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
import { ListItemText } from "@mui/material";
const MenuItem = styled(MuiMenuItem)({
margin: "2px 0",
borderBottom: "none",
});
export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
@ -28,90 +22,58 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const handleClose = () => {
setAnchorEl(null);
};
//Eknoor singh and jaanvi
//date:- 12-Feb-2025
//Made a navigation page for the profile page
const navigate = useNavigate();
const handleProfile = () => {
navigate("/panel/profile");
};
//jaanvi
//date:- 13-Feb-2025
return (
<React.Fragment>
<MenuButton
aria-label="Open menu"
onClick={handleClick}
sx={{ borderColor: "transparent" }}
>
{avatar ? (
<MoreVertRoundedIcon />
) : (
<Avatar
sizes="small"
alt="Super Admin"
src="/static/images/avatar/7.jpg"
sx={{ width: 36, height: 36 }}
/>
)}
</MenuButton>
<ExpandMoreIcon onClick={handleClick} />
<Menu
anchorEl={anchorEl}
id="menu"
id="top-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{
[`& .${listClasses.root}`]: {
padding: "4px",
},
[`& .${paperClasses.root}`]: {
padding: 0,
},
[`& .${dividerClasses.root}`]: {
margin: "4px -4px",
slotProps={{
paper: {
elevation: 0,
sx: {
overflow: "visible",
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 1.5,
"& .MuiMenuItem-root": {
borderBottom: "none", // Remove any divider under menu items
},
},
},
}}
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
>
<MenuItem onClick={handleProfile}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<Divider />
<MenuItem onClick={handleClose}>Add another account</MenuItem>
<MenuItem onClick={handleClose}>Settings</MenuItem>
<Divider />
<MenuItem
onClick={handleClose}
<Link
href={"/panel/profile"}
underline="none"
sx={{
[`& .${listItemIconClasses.root}`]: {
ml: "auto",
minWidth: 0,
"&::before": {
display: "none",
},
}}
>
{/* //Eknoor singh and jaanvi
//date:- 13-Feb-2025
//Implemented logout functionality which was static previously */}
<MenuItem onClick={handleClose}>Profile</MenuItem>
</Link>
<MenuItem onClick={handleClose} sx={{ color: "#E8533B" }}>
<ListItemText
onClick={(e) => {
e.stopPropagation();
setLogoutModal(true);
}}
sx={{ color: "red" }}
>
Logout
</ListItemText>
<Logout
setLogoutModal={setLogoutModal}
logoutModal={logoutModal}
/>
<ListItemIcon>
<LogoutRoundedIcon fontSize="small" />
</ListItemIcon>
</MenuItem>
</Menu>
</React.Fragment>

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

@ -32,14 +32,14 @@ export default function ResourcePieChart() {
flexGrow: 1,
width: "100%",
height: "100%",
backgroundColor: "#F2F2F2",
backgroundColor: "#202020",
}}
>
<CardContent>
<Typography
component="h2"
variant="subtitle2"
color="#202020"
color="#F2F2F2"
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
@ -93,7 +93,7 @@ export default function ResourcePieChart() {
borderRadius: "50%",
}}
/>
<Typography variant="body2" color="#202020">
<Typography variant="body2" color="#F2F2F2">
{entry.title}
</Typography>
</Stack>

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

@ -12,7 +12,7 @@ export default function SessionsChart() {
sx={{
width: "100%",
height: "100%",
backgroundColor: "#F2F2F2",
backgroundColor: "#202020",
p: 2,
}}
>
@ -20,7 +20,7 @@ export default function SessionsChart() {
<Typography
variant="h6"
align="left"
color="#202020"
color="#F2F2F2"
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
@ -36,7 +36,7 @@ export default function SessionsChart() {
sx={{
mt: 2,
mb: 2,
backgroundColor: "#FFFFFF",
backgroundColor: "#202020",
fontSize: "14px",
lineHeight: "20px",
width: { xs: "100%" },
@ -55,13 +55,13 @@ export default function SessionsChart() {
fontWeight: 500,
fontSize: "14px",
lineHeight: "24px",
color: "#202020",
color: "#F2F2F2",
p: "4px",
}}
>
Delhi NCR EV Station
</Typography>
<ArrowDropDownIcon sx={{ color: "#202020" }} />
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
</Box>
{/* Grid container for the four boxes */}
@ -86,8 +86,8 @@ export default function SessionsChart() {
height: "84px",
borderRadius: "8px",
p: "12px 16px",
backgroundColor: "#FFFFFF",
color: "#202020",
backgroundColor: "#272727",
color: "#F2F2F2",
}}
>
<Typography

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

@ -29,10 +29,6 @@ const Drawer = styled(MuiDrawer)({
export default function SideMenu() {
const [open, setOpen] = React.useState(true);
//Eknoor singh
//date:- 12-Feb-2025
//Dispatch is called with user from Authstate Interface
const dispatch = useDispatch<AppDispatch>();
const { user } = useSelector((state: RootState) => state?.profileReducer);
@ -73,39 +69,7 @@ export default function SideMenu() {
</Button>
</Box>
<MenuContent hidden={open} />
{/* <CardAlert /> */}
<Stack
direction="row"
sx={{
p: 2,
gap: 1,
alignItems: "center",
borderTop: "1px solid",
borderColor: "divider",
}}
>
<Avatar
sizes="small"
alt={user?.name || "User Avatar"}
src={"/static/images/avatar/7.jpg"}
sx={{ width: open ? 36 : 0, height: open ? 36 : 0 }}
/>
<Box sx={{ mr: "auto", display: !open ? "none" : "block" }}>
<Typography
variant="body2"
sx={{ fontWeight: 500, lineHeight: "16px" }}
>
{user?.name || "No Admin"}
</Typography>
<Typography
variant="caption"
sx={{ color: "text.secondary" }}
>
{user?.email || "No Email"}
</Typography>
</Box>
<OptionsMenu avatar={open} />
</Stack>
</Drawer>
);
}

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

@ -18,13 +18,13 @@ export default function StatCard({ title, value }: StatCardProps) {
return (
<Card
variant="outlined"
sx={{ height: "100%", backgroundColor: "#F2F2F2" }}
sx={{ height: "100%", backgroundColor: "#202020" }}
>
<CardContent>
<Typography
component="h2"
variant="subtitle2"
color="#202020"
color="#F2F2F2"
gutterBottom
>
{title}
@ -32,7 +32,7 @@ export default function StatCard({ title, value }: StatCardProps) {
<Typography
component="h1"
variant="body1"
color="#202020"
color="#F2F2F2"
fontSize={30}
fontWeight={700}
gutterBottom

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

@ -30,20 +30,20 @@ export default function RoundedBarChart() {
return (
<Card
variant="outlined"
sx={{ width: "100%", height: "100%", backgroundColor: "#F2F2F2" }}
sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
>
<CardContent>
<div
style={{
display: "flex",
alignItems: "center",
color: "#202020",
color: "#F2F2F2",
}}
>
<Typography
variant="h6"
align="left"
color="#202020"
color="#F2F2F2"
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
@ -57,7 +57,7 @@ export default function RoundedBarChart() {
sx={{
mt: 2,
mb: 2,
backgroundColor: "#FFFFFF",
backgroundColor: "#202020",
marginLeft: "auto",
marginRight: "16px",
display: "flex",
@ -68,7 +68,7 @@ export default function RoundedBarChart() {
border: "1px solid #454545",
padding: "4px 8px",
color: "#202020",
color: "#F2F2F2",
}}
>
<Typography
@ -77,13 +77,13 @@ export default function RoundedBarChart() {
fontWeight: 500,
fontSize: "14px",
lineHeight: "24px",
color: "#202020",
color: "#F2F2F2",
p: "4px",
}}
>
Monthly
</Typography>
<ArrowDropDownIcon sx={{ color: "#202020" }} />
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
</Box>
</div>
<BarChart

12
src/layouts/DashboardLayout/index.tsx
View file

@ -16,15 +16,18 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
<Box
sx={{
display: "flex",
height: "100vh",
height: "auto",
flexDirection: { xs: "column", md: "row" },
width: "100%",
margin: 0,
padding: 0,
}}
>
{/* SideMenu - Responsive, shown only on large screens */}
<Box
sx={{
display: { xs: "none", md: "block" },
width: 250,
// width: 250,
}}
>
<SideMenu />
@ -46,8 +49,13 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
overflow: "auto",
...customStyles,
mt: { xs: 8, md: 0 },
padding: 0,
})}
>
<Stack
spacing={2}
sx={{

26
src/pages/AddEditRolePage/index.tsx
View file

@ -137,8 +137,8 @@ const AddEditRolePage: React.FC = () => {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#1976D2",
color: "#fff",
backgroundColor: "#52ACDF",
color: "#fffff",
p: 2,
borderRadius: "8px",
mb: 2,
@ -147,18 +147,14 @@ const AddEditRolePage: React.FC = () => {
<Typography variant="h6" fontWeight={600}>
Role Permissions
</Typography>
<Button
variant="contained"
color="secondary"
onClick={handleBack}
>
<Button variant="contained" onClick={handleBack}>
Back
</Button>
</Box>
{/* Role Name Input */}
<Box sx={{ mb: 2}}>
<label >Role Name</label>
<Box sx={{ mb: 2 }}>
<label>Role Name</label>
<TextField
placeholder="Enter role name"
value={roleName}
@ -166,20 +162,22 @@ const AddEditRolePage: React.FC = () => {
fullWidth
required
variant="outlined"
sx={{ mb: 2 ,mt:2}}
sx={{ mb: 2, mt: 2 }}
/>
</Box>
{/* Table Container */}
<TableContainer
component={Paper}
sx={{ borderRadius: "8px", overflow: "hidden" }}
sx={{
borderRadius: "8px",
overflow: "hidden",
}}
>
<Table>
{/* Table Head */}
<TableHead>
<TableRow sx={{ backgroundColor: "#f5f5f5" }}>
<TableRow sx={{ backgroundColor: "#1C1C1C" }}>
<TableCell
sx={{ fontWeight: "bold", width: "30%" }}
>
@ -200,7 +198,7 @@ const AddEditRolePage: React.FC = () => {
key={index}
sx={{
"&:nth-of-type(odd)": {
backgroundColor: "#FAFAFA",
backgroundColor: "#1C1C1C",
},
}}
>

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

@ -69,6 +69,7 @@ export default function AdminList() {
email,
phone,
registeredAddress,
})
);
await dispatch(adminList());
@ -85,18 +86,17 @@ export default function AdminList() {
{ id: "registeredAddress", label: "Address" },
{ id: "action", label: "Action", align: "center" },
];
const filteredAdmins = admins?.filter(
(admin) =>
admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
admin.registeredAddress
.toLowerCase()
.includes(searchTerm.toLowerCase())
);
// const filteredAdmins = admins?.filter(
// (admin) =>
// admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
// admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
// admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
// admin.registeredAddress
// .toLowerCase()
// .includes(searchTerm.toLowerCase())
// );
const categoryRows = filteredAdmins?.length
? filteredAdmins?.map(
const categoryRows = admins?.map(
(
admin: {
id: string;
@ -112,68 +112,14 @@ export default function AdminList() {
name: admin?.name,
email: admin?.email,
phone: admin?.phone,
registeredAddress: admin?.registeredAddress,
registeredAddress: admin?.registeredAddress || "NA",
})
)
: [];
;
return (
<>
<Typography
component="h2"
variant="h6"
sx={{
fontWeight: 600,
mb: { xs: 2, sm: 0 },
width: "100%",
display: "flex",
}}
>
Admins
</Typography>
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: { xs: "column", sm: "row" },
justifyContent: "space-between",
alignItems: "center",
mb: 2, // Add margin bottom for spacing
}}
>
<TextField
variant="outlined"
size="small"
placeholder="Search..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
sx={{
width: { xs: "100%", sm: "30%" },
marginBottom: { xs: 2, sm: 0 },
}}
InputProps={{
startAdornment: (
<SearchIcon
sx={{ color: "#202020", marginRight: 1 }}
/>
),
}}
/>
<Button
variant="contained"
size="medium"
sx={{
textAlign: "center",
width: { xs: "100%", sm: "auto" },
}}
onClick={handleClickOpen}
>
Add Admin
</Button>
</Box>
<CustomTable
columns={categoryColumns}
rows={categoryRows}
@ -183,6 +129,8 @@ export default function AdminList() {
viewModal={viewModal}
setRowData={setRowData}
setModalOpen={setModalOpen}
tableType="admin"
handleClickOpen={handleClickOpen}
/>
<AddEditCategoryModal
open={modalOpen}

22
src/pages/Auth/Login/index.tsx
View file

@ -33,8 +33,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
const {
control,
handleSubmit,
formState: { errors },
} = useForm<ILoginForm>();
formState: { errors, isValid },
} = useForm<ILoginForm>({ mode: "onChange" });
const dispatch = useDispatch();
const router = useNavigate();
@ -54,7 +54,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
}
} catch (error: any) {
console.log("Login failed:", error);
toast.error("Login failed: " + error);
}
};
@ -228,6 +227,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
message:
"Password must be at least 6 characters long.",
},
pattern: {
value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
message:
"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
},
}}
render={({ field }) => (
<Box sx={{ position: "relative" }}>
@ -255,17 +259,22 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
? "error"
: "primary"
}
sx={{
paddingRight: "40px",
height: "40px",
marginBottom: "8px",
}}
/>
<IconButton
sx={{
position: "absolute",
top: "50%",
right: "10px",
transform:
"translateY(-50%)",
background: "none",
borderColor:
"transparent",
transform:
"translateY(-50%)",
"&:hover": {
backgroundColor:
"transparent",
@ -295,6 +304,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
display: "flex",
justifyContent: "space-between",
color: "white",
alignItems: "center",
flexWrap: "wrap",
}}
>
<FormControlLabel
@ -326,6 +337,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<Button
type="submit"
fullWidth
disabled={!isValid}
sx={{
color: "white",
backgroundColor: "#52ACDF",

90
src/pages/Dashboard/index.tsx
View file

@ -1,60 +1,58 @@
// src/pages/Dashboard
import * as React from 'react';
import { Box, CssBaseline, Typography } from '@mui/material';
import * as React from "react";
import { Box, CssBaseline, Typography } from "@mui/material";
import {
chartsCustomizations,
dataGridCustomizations,
datePickersCustomizations,
treeViewCustomizations,
} from './theme/customizations';
import DashboardLayout from '../../layouts/DashboardLayout';
import AppTheme from '../../shared-theme/AppTheme';
import MainGrid from '../../components/MainGrid';
import AdminList from '../AdminList';
chartsCustomizations,
dataGridCustomizations,
datePickersCustomizations,
treeViewCustomizations,
} from "./theme/customizations";
import DashboardLayout from "../../layouts/DashboardLayout";
import AppTheme from "../../shared-theme/AppTheme";
import MainGrid from "../../components/MainGrid";
import AdminList from "../AdminList";
const xThemeComponents = {
...chartsCustomizations,
...dataGridCustomizations,
...datePickersCustomizations,
...treeViewCustomizations,
...chartsCustomizations,
...dataGridCustomizations,
...datePickersCustomizations,
...treeViewCustomizations,
};
interface DashboardProps {
disableCustomTheme?: boolean;
disableCustomTheme?: boolean;
}
const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) => {
return (
<AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
<CssBaseline enableColorScheme />
{!disableCustomTheme ? (
<><MainGrid /></>
) : (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#202020',
height: '100vh',
textAlign: 'center',
padding: 2,
}}
>
</Box>
)}
</AppTheme>
);
const Dashboard: React.FC<DashboardProps> = ({
disableCustomTheme = false,
}) => {
return (
<AppTheme
{...{ disableCustomTheme }}
themeComponents={xThemeComponents}
>
<CssBaseline enableColorScheme />
{!disableCustomTheme ? (
<>
<MainGrid />
</>
) : (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#202020",
height: "100vh",
textAlign: "center",
padding: 2,
}}
></Box>
)}
</AppTheme>
);
};
export default Dashboard;

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

@ -1,7 +1,3 @@
//Eknoor singh
//date:- 12-Feb-2025
//Made a special page for showing the profile details
import { useEffect } from "react";
import {
Container,
@ -12,16 +8,15 @@ import {
Grid,
Avatar,
Box,
Stack,
Divider,
Link,
} from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
const ProfilePage = () => {
//Eknoor singh
//date:- 12-Feb-2025
//Dispatch is called and user, isLoading, and error from Authstate Interface
const dispatch = useDispatch<AppDispatch>();
const { user, isLoading } = useSelector(
(state: RootState) => state?.profileReducer
@ -49,34 +44,108 @@ const ProfilePage = () => {
return (
<Container sx={{ py: 4 }}>
<Typography variant="h4" gutterBottom>
Profile
Account Info
</Typography>
<Card sx={{ maxWidth: 600, margin: "0 auto" }}>
<Card
sx={{
maxWidth: "100%",
margin: "0 auto",
}}
>
<CardContent>
<Grid container spacing={2} alignItems="center">
<Grid item>
<Stack direction="column" spacing={2}>
<Stack
direction="row"
spacing={1.5}
alignItems="center"
>
<Avatar
alt={user?.name || "User Avatar"}
src={"/static/images/avatar/7.jpg"}
sx={{ width: 80, height: 80 }}
alt="User Avatar"
src="/avatar.png"
sx={{ width: 36, height: 36 }}
/>
<Box>
<Typography
variant="body1"
sx={{ color: "#FFFFFF" }}
>
{user?.name || "No Admin"}
</Typography>
<Typography variant="body2" color="#D9D8D8">
{user?.userType || "N/A"}
</Typography>
</Box>
</Stack>
<Divider
flexItem
sx={{ backgroundColor: "rgba(32, 32, 32, 0.5)" }}
/>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Typography
variant="body1"
sx={{ color: "#FFFFFF" }}
>
Personal Information
</Typography>
<Link
variant="body1"
href="/edit-profile"
color="#52ACDF"
>
Edit
</Link>
</Stack>
<Grid container>
<Grid item xs={12} sm={4}>
<Typography
variant="body1"
sx={{ color: "#FFFFFF" }}
>
Full Name:
</Typography>
<Typography variant="body2" color="#D9D8D8">
{user?.name || "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={4}>
<Typography
variant="body1"
sx={{ color: "#FFFFFF" }}
>
Phone:
</Typography>
<Typography variant="body2" color="#D9D8D8">
{user?.phone || "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={4}>
<Typography
variant="body1"
sx={{ color: "#FFFFFF" }}
>
Email:
</Typography>
<Typography variant="body2" color="#D9D8D8">
{user?.email || "N/A"}
</Typography>
</Grid>
</Grid>
<Grid item xs>
<Typography variant="h6">
{user?.name || "N/A"}
</Typography>
<Typography variant="body2" color="text.secondary">
Email: {user?.email || "N/A"}
</Typography>
<Typography variant="body2" color="text.secondary">
Phone: {user?.phone || "N/A"}
</Typography>
<Typography variant="body2" color="text.secondary">
Role: <b>{user?.userType || "N/A"}</b>
</Typography>
</Grid>
</Grid>
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
Bio:
</Typography>
<Typography variant="body2" color="#D9D8D8">
{user?.bio || "No bio available."}
</Typography>
</Stack>
</CardContent>
</Card>
</Container>

45
src/pages/RoleList/index.tsx
View file

@ -100,47 +100,7 @@ export default function RoleList() {
return (
<>
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: { xs: "column", sm: "row" },
justifyContent: "space-between",
alignItems: "center",
mb: 2,
}}
>
<TextField
variant="outlined"
size="small"
placeholder="Search..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
sx={{
width: { xs: "100%", sm: "30%" },
marginBottom: { xs: 2, sm: 0 },
}}
InputProps={{
startAdornment: (
<SearchIcon
sx={{ color: "#202020", marginRight: 1 }}
/>
),
}}
/>
<Button
variant="contained"
size="small"
onClick={handleClickOpen}
sx={{
textAlign: "center",
width: { xs: "100%", sm: "auto" },
}}
>
Add Role
</Button>
</Box>
{showPermissions ? (
<AddEditRolePage />
) : (
@ -154,7 +114,8 @@ export default function RoleList() {
setRowData={setRowData}
setModalOpen={setModalOpen}
handleStatusToggle={handleStatusToggle}
tableType="roleList"
tableType="role"
handleClickOpen={handleClickOpen}
/>
)}
</>

711
src/pages/UserList/index.tsx
View file

@ -1,678 +1,10 @@
// 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>
// );
// }
// 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 { Box, Button, Typography } from "@mui/material";
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
import { useForm } from "react-hook-form";
import CustomTable, { Column } from "../../components/CustomTable";
import { useDispatch, useSelector } from "react-redux";
import { createUser, userList } from "../../redux/slices/userSlice";
import { createUser, updateUser, userList } from "../../redux/slices/userSlice";
import { AppDispatch, RootState } from "../../redux/store/store";
import { string } from "prop-types";
import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
@ -709,7 +41,7 @@ export default function UserList() {
name: string;
email: string;
phone: string;
registeredAddress: string;
}) => {
try {
await dispatch(createUser(data));
@ -724,20 +56,19 @@ export default function UserList() {
id: string,
name: string,
email: string,
phone: string,
registeredAddress: string
phone: string
) => {
try {
await dispatch(
updateAdmin({
updateUser({
id,
name,
email,
phone,
registeredAddress,
})
);
await dispatch(adminList());
await dispatch(userList());
} catch (error) {
console.error("Update failed", error);
}
@ -784,34 +115,6 @@ export default function UserList() {
return (
<>
<Box
sx={{
width: "100%",
maxWidth: {
sm: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
},
}}
>
<Typography
component="h2"
variant="h6"
sx={{ mt: 2, fontWeight: 600 }}
>
Users
</Typography>
<Button
variant="contained"
size="medium"
sx={{ textAlign: "right" }}
onClick={handleClickOpen}
>
Add User
</Button>
</Box>
<CustomTable
columns={categoryColumns}
rows={categoryRows}
@ -821,6 +124,8 @@ export default function UserList() {
viewModal={viewModal}
setRowData={setRowData}
setModalOpen={setModalOpen}
tableType="user"
handleClickOpen={handleClickOpen}
/>
<AddUserModal
open={modalOpen}

180
src/pages/VehicleList/index.tsx Normal file
View file

@ -0,0 +1,180 @@
import React, { useEffect, useState } from "react";
import { Box, Button, TextField, Typography } from "@mui/material";
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
import { useForm } from "react-hook-form";
import CustomTable, { Column } from "../../components/CustomTable";
import DeleteModal from "../../components/Modals/DeleteModal";
import { RootState } from "../../redux/reducers";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch } from "../../redux/store/store";
import {
addVehicle,
updateVehicle,
vehicleList,
} from "../../redux/slices/VehicleSlice";
import SearchIcon from "@mui/icons-material/Search";
const categoryRows = [
{
srno: 1,
id: 1, // Using a number for 'id'
name: "Tesla Model S",
brand: "Tesla",
imageUrl:
"https://example.com/https://imgd-ct.aeplcdn.com/1056x660/n/cw/ec/93821/model-s-exterior-front-view.jpeg?q=80.jpg",
},
{
srno: 2,
id: 2,
name: "BMW X5",
brand: "BMW",
imageUrl: "https://example.com/bmw_x5.jpg",
},
{
srno: 3,
id: 3,
name: "Audi A6",
brand: "Audi",
imageUrl: "https://example.com/audi_a6.jpg",
},
{
srno: 4,
id: 4,
name: "Mercedes-Benz S-Class",
brand: "Mercedes-Benz",
imageUrl: "https://example.com/mercedes_s_class.jpg",
},
{
srno: 5,
id: 5,
name: "Ford Mustang",
brand: "Ford",
imageUrl: "https://example.com/ford_mustang.jpg",
},
];
export default function VehicleList() {
const [modalOpen, setModalOpen] = useState<boolean>(false);
const [editRow, setEditRow] = useState<any>(null);
const { reset } = useForm();
const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
const [viewModal, setViewModal] = React.useState<boolean>(false);
const [rowData, setRowData] = React.useState<any | null>(null);
const [searchTerm, setSearchTerm] = useState("");
const dispatch = useDispatch<AppDispatch>();
const vehicles = useSelector(
(state: RootState) => state.vehicleReducer.vehicles
);
useEffect(() => {
dispatch(vehicleList());
}, [dispatch]);
const handleClickOpen = () => {
setRowData(null); // Reset row data when opening for new admin
setModalOpen(true);
};
const handleCloseModal = () => {
setModalOpen(false);
setRowData(null);
reset();
};
const handleCreate = async (data: {
name: string;
brand: string;
imageUrl: string;
}) => {
try {
await dispatch(addVehicle(data));
await dispatch(vehicleList());
handleCloseModal();
} catch (error) {
console.error("Creation failed", error);
}
};
const handleUpdate = async (
id: number,
name: string,
brand: string,
imageUrl: string
) => {
try {
await dispatch(
updateVehicle({
id,
name,
brand,
imageUrl,
})
);
await dispatch(vehicleList());
} catch (error) {
console.error("Update failed", error);
}
};
const categoryColumns: Column[] = [
{ id: "srno", label: "Sr No" },
{ id: "name", label: "Vehicle Name" },
{ id: "brand", label: "Brand" },
{ id: "imageUrl", label: "Image" },
{ id: "action", label: "Action", align: "center" },
];
const filteredVehicles = vehicles?.filter(
(vehicle) =>
vehicle.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
vehicle.brand.toLowerCase().includes(searchTerm.toLowerCase())
);
// const categoryRows = filteredVehicles?.length
// ? filteredVehicles?.map(
// (
// vehicle: {
// id: number;
// name: string;
// brand: string;
// imageUrl: string;
// },
// index: number
// ) => ({
// id: vehicle?.id,
// srno: index + 1,
// name: vehicle?.name,
// brand: vehicle?.brand,
// imageUrl: vehicle?.imageUrl,
// })
// )
// : [];
return (
<>
<CustomTable
columns={categoryColumns}
rows={categoryRows}
setDeleteModal={setDeleteModal}
deleteModal={deleteModal}
setViewModal={setViewModal}
viewModal={viewModal}
setRowData={setRowData}
setModalOpen={setModalOpen}
tableType="vehicle"
handleClickOpen={handleClickOpen}
/>
{/* <AddEditCategoryModal
open={modalOpen}
handleClose={handleCloseModal}
editRow={rowData}
/>
<DeleteModal
open={deleteModal}
setDeleteModal={setDeleteModal}
handleDelete={handleDelete}
/> */}
</>
);
}

102
src/pages/Vehicles/index.tsx
View file

@ -1,102 +0,0 @@
import React, { useState } from 'react';
import { Box, Button, Typography } from '@mui/material';
import AddEditCategoryModal from '../../components/AddEditCategoryModal';
import { useForm } from 'react-hook-form';
import CustomTable from '../../components/CustomTable';
import DeleteModal from '../../components/Modals/DeleteModal';
// Sample data for categories
// const categoryRows = [
// { srno: 1, name: 'Strength', date: '01/03/2025' },
// {
// srno: 2,
// name: 'HIIT (High-Intensity Interval Training)',
// date: '01/03/2025',
// },
// { srno: 3, name: 'Cardio', date: '01/03/2025' },
// { srno: 4, name: 'Combat', date: '01/03/2025' },
// { srno: 5, name: 'Yoga', date: '01/03/2025' },
// ];
export default function Vehicles() {
const [modalOpen, setModalOpen] = useState<boolean>(false);
const [editRow, setEditRow] = useState<any>(null);
const { reset } = useForm();
const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
const [rowData, setRowData] = React.useState<any | null>(null);
const handleClickOpen = () => {
setModalOpen(true);
setEditRow(null);
};
const handleCloseModal = () => {
setModalOpen(false);
reset();
};
// const handleEdit = () => {
// setEditRow(rowData);
// };
const handleDelete = () => {
console.log('Deleted row:', rowData);
setDeleteModal(false);
};
const categoryColumns = [
{ id: 'srno', label: 'Sr No' },
{ id: 'name', label: 'Category Name' },
{ id: 'date', label: 'Date' },
{ id: 'action', label: 'Action', align: 'center' },
];
return (
<>
<Box
sx={{
width: '100%',
maxWidth: {
sm: '100%',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
}}
>
{/* Title and Add Category button */}
{/* <Typography component="h2" variant="h6" sx={{ mt: 2, fontWeight: 600 }}>
Vehicles
</Typography> */}
<Button
variant="contained"
size="medium"
sx={{ textAlign: 'right' }}
onClick={handleClickOpen}
>
Add Categorywewfw
</Button>
</Box>
<CustomTable
columns={categoryColumns}
rows={categoryRows}
editRow={editRow}
setDeleteModal={setDeleteModal}
setRowData={setRowData}
setModalOpen={setModalOpen}
/>
<AddEditCategoryModal
open={modalOpen}
handleClose={handleCloseModal}
editRow={rowData}
/>
<DeleteModal
open={deleteModal}
setDeleteModal={setDeleteModal}
handleDelete={handleDelete}
/>
</>
);
}

3
src/redux/reducers.ts
View file

@ -5,6 +5,8 @@ import adminReducer from "./slices/adminSlice";
import profileReducer from "./slices/profileSlice";
import userReducer from "./slices/userSlice.ts";
import roleReducer from "./slices/roleSlice.ts";
import vehicleReducer from "./slices/VehicleSlice.ts";
const rootReducer = combineReducers({
authReducer,
@ -12,6 +14,7 @@ const rootReducer = combineReducers({
profileReducer,
userReducer,
roleReducer,
vehicleReducer
});
export type RootState = ReturnType<typeof rootReducer>;

132
src/redux/slices/VehicleSlice.ts Normal file
View file

@ -0,0 +1,132 @@
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import http from "../../lib/https";
import { toast } from "sonner";
interface Vehicle {
id:number;
name:string;
brand:string;
imageUrl:string;
}
interface VehicleState {
vehicles:Vehicle[];
loading: boolean;
error: string | null;
}
const initialState: VehicleState = {
vehicles: [],
loading: false,
error: null,
};
export const vehicleList = createAsyncThunk<Vehicle, void, { rejectValue: string }>(
"fetchVehicles",
async (_, { rejectWithValue }) => {
try {
const token = localStorage?.getItem("authToken");
if (!token) throw new Error("No token found");
const response = await http.get("/");
if (!response.data?.data) throw new Error("Invalid API response");
return response.data.data;
} catch (error: any) {
toast.error("Error Fetching Profile" + error);
return rejectWithValue(
error?.response?.data?.message || "An error occurred"
);
}
}
);
//Add Vehicle
export const addVehicle = createAsyncThunk<
Vehicle,
{
name: string;
brand: string;
imageUrl: string;
},
{ rejectValue: string }
>("/AddVehicle", async (data, { rejectWithValue }) => {
try {
const response = await http.post("/", data);
return response.data;
} catch (error: any) {
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
}
});
// Update Vehicle details
export const updateVehicle = createAsyncThunk(
"updateVehicle",
async ({ id, ...vehicleData }: Vehicle, { rejectWithValue }) => {
try {
const response = await http.put(`/${id}`, vehicleData);
toast.success("Vehicle Deatils updated successfully");
return response?.data;
} catch (error: any) {
toast.error("Error updating the user: " + error);
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
}
}
);
const vehicleSlice = createSlice({
name: "vehicle",
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(vehicleList.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(
vehicleList.fulfilled,
(state, action: PayloadAction<Vehicle[]>) => {
state.loading = false;
state.vehicles = action.payload;
}
)
.addCase(vehicleList.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message || "Failed to fetch users";
})
.addCase(addVehicle.pending, (state) => {
state.loading = true;
// state.error = null;
})
.addCase(
addVehicle.fulfilled,
(state, action: PayloadAction<Vehicle>) => {
state.loading = false;
state.vehicles.push(action.payload);
}
)
.addCase(
addVehicle.rejected,
(state, action: PayloadAction<string | undefined>) => {
state.loading = false;
}
)
.addCase(updateVehicle.pending, (state) => {
state.loading = true;
})
.addCase(updateVehicle.fulfilled, (state, action) => {
state.loading = false;
state.error = action.payload;
})
.addCase(updateVehicle.rejected, (state) => {
state.loading = false;
});
},
});
export default vehicleSlice.reducer;

5
src/redux/slices/adminSlice.ts
View file

@ -150,10 +150,7 @@ const adminSlice = createSlice({
state.isLoading = true;
})
.addCase(updateAdmin.fulfilled, (state, action) => {
const updatedAdmin = action.payload;
state.admins = state?.admins?.map((admin) =>
admin?.id === updatedAdmin?.id ? updatedAdmin : admin
);
state.isLoading = false;
})
.addCase(updateAdmin.rejected, (state) => {

47
src/redux/slices/userSlice.ts
View file

@ -5,14 +5,14 @@ import { toast } from "sonner";
// Define TypeScript types
interface User {
id: number;
id: string;
name: string;
email: string;
phone?: string;
// location?: string;
// managerAssigned?: string;
// vehicle?: string;
password:string;
password: string;
}
interface UserState {
@ -28,15 +28,6 @@ const initialState: UserState = {
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");
// }
// });
export const userList = createAsyncThunk<User, void, { rejectValue: string }>(
"fetchUsers",
async (_, { rejectWithValue }) => {
@ -64,12 +55,8 @@ export const createUser = createAsyncThunk<
{
name: string;
email: string;
password: string;
phone: string;
// location?: string;
// managerAssigned?: string;
// vehicle?: string;
},
{ rejectValue: string }
>("/CreateUser", async (data, { rejectWithValue }) => {
@ -83,6 +70,23 @@ export const createUser = createAsyncThunk<
}
});
export const updateUser = createAsyncThunk(
"updateUser",
async ({ id, ...userData }: User, { rejectWithValue }) => {
try {
const response = await http.put(`/${id}/update-user`, userData);
toast.success("User updated successfully");
return response?.data;
} catch (error: any) {
toast.error("Error updating the user: " + error);
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
}
}
);
const userSlice = createSlice({
name: "fetchUsers",
initialState,
@ -120,7 +124,16 @@ const userSlice = createSlice({
(state, action: PayloadAction<string | undefined>) => {
state.loading = false;
}
);
)
.addCase(updateUser.pending, (state) => {
state.loading = true;
})
.addCase(updateUser.fulfilled, (state, action) => {
state.loading = false;
})
.addCase(updateUser.rejected, (state) => {
state.loading = false;
});
},
});

12
src/router.tsx
View file

@ -4,12 +4,13 @@ import LoadingComponent from "./components/Loading";
import DashboardLayout from "./layouts/DashboardLayout";
import RoleList from "./pages/RoleList";
import AddEditRolePage from "./pages/AddEditRolePage";
import VehicleList from "./pages/VehicleList";
// Page imports
const Login = lazy(() => import("./pages/Auth/Login"));
const SignUp = lazy(() => import("./pages/Auth/SignUp"));
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Vehicles = lazy(() => import("./pages/Vehicles"));
const Vehicles = lazy(() => import("./pages/VehicleList"));
const AdminList = lazy(() => import("./pages/AdminList"));
const ProfilePage = lazy(() => import("./pages/ProfilePage"));
const NotFoundPage = lazy(() => import("./pages/NotFound"));
@ -109,6 +110,15 @@ export default function AppRouter() {
/>
}
/>
<Route
path="vehicle-list"
element={
<ProtectedRoute
caps={[]}
component={<VehicleList />}
/>
}
/>
<Route
path="permissions"
element={

114
src/shared-theme/AppTheme.tsx
View file

@ -1,60 +1,70 @@
import * as React from 'react';
import { ThemeProvider, Theme, createTheme } from '@mui/material/styles';
import type { ThemeOptions } from '@mui/material/styles';
import { inputsCustomizations } from './customizations/inputs';
import { dataDisplayCustomizations } from './customizations/dataDisplay';
import { feedbackCustomizations } from './customizations/feedback';
import { navigationCustomizations } from './customizations/navigation';
import { surfacesCustomizations } from './customizations/surfaces';
import { colorSchemes, typography, shadows, shape } from './themePrimitives';
import * as React from "react";
import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
import type { ThemeOptions } from "@mui/material/styles";
import { inputsCustomizations } from "./customizations/inputs";
import { dataDisplayCustomizations } from "./customizations/dataDisplay";
import { feedbackCustomizations } from "./customizations/feedback";
import { navigationCustomizations } from "./customizations/navigation";
import { surfacesCustomizations } from "./customizations/surfaces";
import { colorSchemes, typography, shadows, shape } from "./themePrimitives";
declare module '@mui/styles/defaultTheme' {
interface DefaultTheme extends Theme {
vars: object
}
declare module "@mui/styles/defaultTheme" {
interface DefaultTheme extends Theme {
vars: object;
}
}
interface AppThemeProps {
children: React.ReactNode;
/**
* This is for the docs site. You can ignore it or remove it.
*/
disableCustomTheme?: boolean;
themeComponents?: ThemeOptions['components'];
children: React.ReactNode;
/**
* This is for the docs site. You can ignore it or remove it.
*/
disableCustomTheme?: boolean;
themeComponents?: ThemeOptions["components"];
}
export default function AppTheme(props: AppThemeProps) {
const { children, disableCustomTheme, themeComponents } = props;
const theme = React.useMemo(() => {
return disableCustomTheme
? {}
: createTheme({
// For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
cssVariables: {
colorSchemeSelector: 'data-mui-color-scheme',
cssVarPrefix: 'template',
},
colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
typography,
shadows,
shape,
components: {
...inputsCustomizations,
...dataDisplayCustomizations,
...feedbackCustomizations,
...navigationCustomizations,
...surfacesCustomizations,
...themeComponents,
},
});
}, [disableCustomTheme, themeComponents]);
if (disableCustomTheme) {
return <React.Fragment>{children}</React.Fragment>;
}
return (
<ThemeProvider theme={theme} disableTransitionOnChange>
{children}
</ThemeProvider>
);
const { children, disableCustomTheme, themeComponents } = props;
const theme = React.useMemo(() => {
return disableCustomTheme
? {}
: createTheme({
palette: {
mode: "dark", // Enforcing dark mode across the app
background: {
default: "#111111", // Dark background color
paper: "#1e1e1e", // Darker background for cards, containers, etc.
},
text: {
primary: "#ffffff", // White text for readability
secondary: "#b0b0b0", // Lighter secondary text
},
},
cssVariables: {
colorSchemeSelector: "data-mui-color-scheme",
cssVarPrefix: "template",
},
typography,
shadows,
shape,
components: {
...inputsCustomizations,
...dataDisplayCustomizations,
...feedbackCustomizations,
...navigationCustomizations,
...surfacesCustomizations,
...themeComponents,
},
});
}, [disableCustomTheme, themeComponents]);
if (disableCustomTheme) {
return <React.Fragment>{children}</React.Fragment>;
}
return (
<ThemeProvider theme={theme} disableTransitionOnChange>
{children}
</ThemeProvider>
);
}

2
src/shared-theme/customizations/surfaces.js
View file

@ -67,7 +67,7 @@ export const surfacesCustomizations = {
border: `1px solid ${(theme.vars || theme).palette.divider}`,
boxShadow: 'none',
...theme.applyStyles('dark', {
backgroundColor: gray[800],
backgroundColor:"#1C1C1C",
}),
variants: [
{

690
src/shared-theme/themePrimitives.js
View file

@ -1,380 +1,384 @@
import { createTheme, alpha } from '@mui/material/styles';
import { createTheme, alpha } from "@mui/material/styles";
const defaultTheme = createTheme();
const customShadows = [...defaultTheme.shadows];
export const brand = {
50: 'hsl(210, 100%, 95%)',
100: 'hsl(210, 100%, 92%)',
200: 'hsl(210, 100%, 80%)',
300: 'hsl(210, 100%, 65%)',
400: 'hsl(210, 98%, 48%)',
500: 'hsl(210, 98%, 42%)',
600: 'hsl(210, 98%, 55%)',
700: 'hsl(210, 100%, 35%)',
800: 'hsl(210, 100%, 16%)',
900: 'hsl(210, 100%, 21%)',
50: "hsl(210, 100%, 95%)",
100: "hsl(210, 100%, 92%)",
200: "hsl(210, 100%, 80%)",
300: "hsl(210, 100%, 65%)",
400: "hsl(210, 98%, 48%)",
500: "hsl(210, 98%, 42%)",
600: "hsl(210, 98%, 55%)",
700: "hsl(210, 100%, 35%)",
800: "hsl(210, 100%, 16%)",
900: "hsl(210, 100%, 21%)",
};
export const gray = {
50: 'hsl(220, 35%, 97%)',
100: 'hsl(220, 30%, 94%)',
200: 'hsl(220, 20%, 88%)',
300: 'hsl(220, 20%, 80%)',
400: 'hsl(220, 20%, 65%)',
500: 'hsl(220, 20%, 42%)',
600: 'hsl(220, 20%, 35%)',
700: 'hsl(220, 20%, 25%)',
800: 'hsl(220, 30%, 6%)',
900: 'hsl(220, 35%, 3%)',
50: "hsl(220, 35%, 97%)",
100: "hsl(220, 30%, 94%)",
200: "hsl(220, 20%, 88%)",
300: "hsl(220, 20%, 80%)",
400: "hsl(220, 20%, 65%)",
500: "hsl(220, 20%, 42%)",
600: "hsl(220, 20%, 35%)",
700: "hsl(220, 20%, 25%)",
800: "hsl(220, 30%, 6%)",
900: "hsl(220, 35%, 3%)",
};
export const green = {
50: 'hsl(120, 80%, 98%)',
100: 'hsl(120, 75%, 94%)',
200: 'hsl(120, 75%, 87%)',
300: 'hsl(120, 61%, 77%)',
400: 'hsl(120, 44%, 53%)',
500: 'hsl(120, 59%, 30%)',
600: 'hsl(120, 70%, 25%)',
700: 'hsl(120, 75%, 16%)',
800: 'hsl(120, 84%, 10%)',
900: 'hsl(120, 87%, 6%)',
50: "hsl(120, 80%, 98%)",
100: "hsl(120, 75%, 94%)",
200: "hsl(120, 75%, 87%)",
300: "hsl(120, 61%, 77%)",
400: "hsl(120, 44%, 53%)",
500: "hsl(120, 59%, 30%)",
600: "hsl(120, 70%, 25%)",
700: "hsl(120, 75%, 16%)",
800: "hsl(120, 84%, 10%)",
900: "hsl(120, 87%, 6%)",
};
export const orange = {
50: 'hsl(45, 100%, 97%)',
100: 'hsl(45, 92%, 90%)',
200: 'hsl(45, 94%, 80%)',
300: 'hsl(45, 90%, 65%)',
400: 'hsl(45, 90%, 40%)',
500: 'hsl(45, 90%, 35%)',
600: 'hsl(45, 91%, 25%)',
700: 'hsl(45, 94%, 20%)',
800: 'hsl(45, 95%, 16%)',
900: 'hsl(45, 93%, 12%)',
50: "hsl(45, 100%, 97%)",
100: "hsl(45, 92%, 90%)",
200: "hsl(45, 94%, 80%)",
300: "hsl(45, 90%, 65%)",
400: "hsl(45, 90%, 40%)",
500: "hsl(45, 90%, 35%)",
600: "hsl(45, 91%, 25%)",
700: "hsl(45, 94%, 20%)",
800: "hsl(45, 95%, 16%)",
900: "hsl(45, 93%, 12%)",
};
export const red = {
50: 'hsl(0, 100%, 97%)',
100: 'hsl(0, 92%, 90%)',
200: 'hsl(0, 94%, 80%)',
300: 'hsl(0, 90%, 65%)',
400: 'hsl(0, 90%, 40%)',
500: 'hsl(0, 90%, 30%)',
600: 'hsl(0, 91%, 25%)',
700: 'hsl(0, 94%, 18%)',
800: 'hsl(0, 95%, 12%)',
900: 'hsl(0, 93%, 6%)',
50: "hsl(0, 100%, 97%)",
100: "hsl(0, 92%, 90%)",
200: "hsl(0, 94%, 80%)",
300: "hsl(0, 90%, 65%)",
400: "hsl(0, 90%, 40%)",
500: "hsl(0, 90%, 30%)",
600: "hsl(0, 91%, 25%)",
700: "hsl(0, 94%, 18%)",
800: "hsl(0, 95%, 12%)",
900: "hsl(0, 93%, 6%)",
};
export const getDesignTokens = (mode) => {
customShadows[1] =
mode === 'dark'
? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
customShadows[1] =
mode === "dark"
? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
: "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px";
return {
palette: {
mode,
primary: {
light: brand[200],
main: brand[400],
dark: brand[700],
contrastText: brand[50],
...(mode === 'dark' && {
contrastText: brand[50],
light: brand[300],
main: brand[400],
dark: brand[700],
}),
},
info: {
light: brand[100],
main: brand[300],
dark: brand[600],
contrastText: gray[50],
...(mode === 'dark' && {
contrastText: brand[300],
light: brand[500],
main: brand[700],
dark: brand[900],
}),
},
warning: {
light: orange[300],
main: orange[400],
dark: orange[800],
...(mode === 'dark' && {
light: orange[400],
main: orange[500],
dark: orange[700],
}),
},
error: {
light: red[300],
main: red[400],
dark: red[800],
...(mode === 'dark' && {
light: red[400],
main: red[500],
dark: red[700],
}),
},
success: {
light: green[300],
main: green[400],
dark: green[800],
...(mode === 'dark' && {
light: green[400],
main: green[500],
dark: green[700],
}),
},
grey: {
...gray,
},
divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
background: {
default: 'hsl(0, 0%, 99%)',
paper: 'hsl(220, 35%, 97%)',
...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
},
text: {
primary: gray[800],
secondary: gray[600],
warning: orange[400],
...(mode === 'dark' && {
primary: 'hsl(0, 0%, 100%)',
secondary: gray[400],
}),
},
action: {
hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`,
...(mode === 'dark' && {
hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3),
}),
},
},
typography: {
fontFamily: 'Inter, sans-serif',
h1: {
fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600,
lineHeight: 1.2,
letterSpacing: -0.5,
},
h2: {
fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600,
lineHeight: 1.2,
},
h3: {
fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2,
},
h4: {
fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600,
lineHeight: 1.5,
},
h5: {
fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600,
},
h6: {
fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600,
},
subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18),
},
subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500,
},
body1: {
fontSize: defaultTheme.typography.pxToRem(14),
},
body2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400,
},
caption: {
fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400,
},
},
shape: {
borderRadius: 8,
},
shadows: customShadows,
};
return {
palette: {
mode,
primary: {
light: brand[200],
main: brand[400],
dark: brand[700],
contrastText: brand[50],
...(mode === "dark" && {
contrastText: brand[50],
light: brand[300],
main: brand[400],
dark: brand[700],
}),
},
info: {
light: brand[100],
main: brand[300],
dark: brand[600],
contrastText: gray[50],
...(mode === "dark" && {
contrastText: brand[300],
light: brand[500],
main: brand[700],
dark: brand[900],
}),
},
warning: {
light: orange[300],
main: orange[400],
dark: orange[800],
...(mode === "dark" && {
light: orange[400],
main: orange[500],
dark: orange[700],
}),
},
error: {
light: red[300],
main: red[400],
dark: red[800],
...(mode === "dark" && {
light: red[400],
main: red[500],
dark: red[700],
}),
},
success: {
light: green[300],
main: green[400],
dark: green[800],
...(mode === "dark" && {
light: green[400],
main: green[500],
dark: green[700],
}),
},
grey: {
...gray,
},
divider:
mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
background: {
default: "hsl(0, 0%, 99%)",
paper: "hsl(220, 35%, 97%)",
...(mode === "dark" && {
default: gray[900],
paper: "hsl(220, 30%, 7%)",
}),
},
text: {
primary: gray[800],
secondary: gray[600],
warning: orange[400],
...(mode === "dark" && {
primary: "hsl(0, 0%, 100%)",
secondary: gray[400],
}),
},
action: {
hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`,
...(mode === "dark" && {
hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3),
}),
},
},
typography: {
fontFamily: "Gilory",
h1: {
fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600,
lineHeight: 1.2,
letterSpacing: -0.5,
},
h2: {
fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600,
lineHeight: 1.2,
},
h3: {
fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2,
},
h4: {
fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600,
lineHeight: 1.5,
},
h5: {
fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600,
},
h6: {
fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600,
},
subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18),
},
subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500,
},
body1: {
fontSize: defaultTheme.typography.pxToRem(14),
},
body2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400,
},
caption: {
fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400,
},
},
shape: {
borderRadius: 8,
},
shadows: customShadows,
};
};
export const colorSchemes = {
light: {
palette: {
primary: {
light: brand[200],
main: brand[400],
dark: brand[700],
contrastText: brand[50],
},
info: {
light: brand[100],
main: brand[300],
dark: brand[600],
contrastText: gray[50],
},
warning: {
light: orange[300],
main: orange[400],
dark: orange[800],
},
error: {
light: red[300],
main: red[400],
dark: red[800],
},
success: {
light: green[300],
main: green[400],
dark: green[800],
},
grey: {
...gray,
},
divider: alpha(gray[300], 0.4),
background: {
default: 'hsl(0, 0%, 99%)',
paper: 'hsl(220, 35%, 97%)',
},
text: {
primary: gray[800],
secondary: gray[600],
warning: orange[400],
},
action: {
hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`,
},
baseShadow:
'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
},
},
dark: {
palette: {
primary: {
contrastText: brand[50],
light: brand[300],
main: brand[400],
dark: brand[700],
},
info: {
contrastText: brand[300],
light: brand[500],
main: brand[700],
dark: brand[900],
},
warning: {
light: orange[400],
main: orange[500],
dark: orange[700],
},
error: {
light: red[400],
main: red[500],
dark: red[700],
},
success: {
light: green[400],
main: green[500],
dark: green[700],
},
grey: {
...gray,
},
divider: alpha(gray[700], 0.6),
background: {
default: gray[900],
paper: 'hsl(220, 30%, 7%)',
},
text: {
primary: 'hsl(0, 0%, 100%)',
secondary: gray[400],
},
action: {
hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3),
},
baseShadow:
'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
},
},
light: {
palette: {
primary: {
light: brand[200],
main: brand[400],
dark: brand[700],
contrastText: brand[50],
},
info: {
light: brand[100],
main: brand[300],
dark: brand[600],
contrastText: gray[50],
},
warning: {
light: orange[300],
main: orange[400],
dark: orange[800],
},
error: {
light: red[300],
main: red[400],
dark: red[800],
},
success: {
light: green[300],
main: green[400],
dark: green[800],
},
grey: {
...gray,
},
divider: alpha(gray[300], 0.4),
background: {
default: "hsl(0, 0%, 99%)",
paper: "hsl(220, 35%, 97%)",
},
text: {
primary: gray[800],
secondary: gray[600],
warning: orange[400],
},
action: {
hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`,
},
baseShadow:
"hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
},
},
dark: {
palette: {
primary: {
contrastText: brand[50],
light: brand[300],
main: brand[400],
dark: brand[700],
},
info: {
contrastText: brand[300],
light: brand[500],
main: brand[700],
dark: brand[900],
},
warning: {
light: orange[400],
main: orange[500],
dark: orange[700],
},
error: {
light: red[400],
main: red[500],
dark: red[700],
},
success: {
light: green[400],
main: green[500],
dark: green[700],
},
grey: {
...gray,
},
divider: alpha(gray[700], 0.6),
background: {
default: gray[900],
paper: "hsl(220, 30%, 7%)",
},
text: {
primary: "hsl(0, 0%, 100%)",
secondary: gray[400],
},
action: {
hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3),
},
baseShadow:
"hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
},
},
};
export const typography = {
fontFamily: 'Inter, sans-serif',
h1: {
fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600,
lineHeight: 1.2,
letterSpacing: -0.5,
},
h2: {
fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600,
lineHeight: 1.2,
},
h3: {
fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2,
},
h4: {
fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600,
lineHeight: 1.5,
},
h5: {
fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600,
},
h6: {
fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600,
},
subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18),
},
subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500,
},
body1: {
fontSize: defaultTheme.typography.pxToRem(14),
},
body2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400,
},
caption: {
fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400,
},
fontFamily: "Gilory",
h1: {
fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600,
lineHeight: 1.2,
letterSpacing: -0.5,
},
h2: {
fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600,
lineHeight: 1.2,
},
h3: {
fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2,
},
h4: {
fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600,
lineHeight: 1.5,
},
h5: {
fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600,
},
h6: {
fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600,
},
subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18),
},
subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500,
},
body1: {
fontSize: defaultTheme.typography.pxToRem(14),
},
body2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400,
},
caption: {
fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400,
},
};
export const shape = {
borderRadius: 8,
borderRadius: 8,
};
const defaultShadows = [
'none',
'var(--template-palette-baseShadow)',
...defaultTheme.shadows.slice(2),
"none",
"var(--template-palette-baseShadow)",
...defaultTheme.shadows.slice(2),
];
export const shadows = defaultShadows;

729
src/shared-theme/themePrimitives.ts
View file

@ -1,29 +1,29 @@
import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
import { createTheme, alpha, PaletteMode, Shadows } from "@mui/material/styles";
declare module '@mui/material/Paper' {
interface PaperPropsVariantOverrides {
highlighted: true;
}
declare module "@mui/material/Paper" {
interface PaperPropsVariantOverrides {
highlighted: true;
}
}
declare module '@mui/material/styles/createPalette' {
interface ColorRange {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
}
declare module "@mui/material/styles/createPalette" {
interface ColorRange {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
}
interface PaletteColor extends ColorRange {}
interface PaletteColor extends ColorRange {}
interface Palette {
baseShadow: string;
}
interface Palette {
baseShadow: string;
}
}
const defaultTheme = createTheme();
@ -31,373 +31,380 @@ const defaultTheme = createTheme();
const customShadows: Shadows = [...defaultTheme.shadows];
export const brand = {
50: 'hsl(210, 100%, 95%)',
100: 'hsl(210, 100%, 92%)',
200: 'hsl(210, 100%, 80%)',
300: 'hsl(210, 100%, 65%)',
400: 'hsl(210, 98%, 48%)',
500: 'hsl(210, 98%, 42%)',
600: 'hsl(210, 98%, 55%)',
700: 'hsl(210, 100%, 35%)',
800: 'hsl(210, 100%, 16%)',
900: 'hsl(210, 100%, 21%)',
50: "hsl(210, 100%, 95%)",
100: "hsl(210, 100%, 92%)",
200: "hsl(210, 100%, 80%)",
300: "hsl(210, 100%, 65%)",
400: "hsl(210, 98%, 48%)",
500: "hsl(210, 98%, 42%)",
600: "hsl(210, 98%, 55%)",
700: "hsl(210, 100%, 35%)",
800: "hsl(210, 100%, 16%)",
900: "hsl(210, 100%, 21%)",
};
export const gray = {
50: 'hsl(220, 35%, 97%)',
100: 'hsl(220, 30%, 94%)',
200: 'hsl(220, 20%, 88%)',
300: 'hsl(220, 20%, 80%)',
400: 'hsl(220, 20%, 65%)',
500: 'hsl(220, 20%, 42%)',
600: 'hsl(220, 20%, 35%)',
700: 'hsl(220, 20%, 25%)',
800: 'hsl(220, 30%, 6%)',
900: 'hsl(220, 35%, 3%)',
50: "hsl(220, 35%, 97%)",
100: "hsl(220, 30%, 94%)",
200: "hsl(220, 20%, 88%)",
300: "hsl(220, 20%, 80%)",
400: "hsl(220, 20%, 65%)",
500: "hsl(220, 20%, 42%)",
600: "hsl(220, 20%, 35%)",
700: "hsl(220, 20%, 25%)",
800: "hsl(220, 30%, 6%)",
900: "hsl(220, 35%, 3%)",
};
export const green = {
50: 'hsl(120, 80%, 98%)',
100: 'hsl(120, 75%, 94%)',
200: 'hsl(120, 75%, 87%)',
300: 'hsl(120, 61%, 77%)',
400: 'hsl(120, 44%, 53%)',
500: 'hsl(120, 59%, 30%)',
600: 'hsl(120, 70%, 25%)',
700: 'hsl(120, 75%, 16%)',
800: 'hsl(120, 84%, 10%)',
900: 'hsl(120, 87%, 6%)',
50: "hsl(120, 80%, 98%)",
100: "hsl(120, 75%, 94%)",
200: "hsl(120, 75%, 87%)",
300: "hsl(120, 61%, 77%)",
400: "hsl(120, 44%, 53%)",
500: "hsl(120, 59%, 30%)",
600: "hsl(120, 70%, 25%)",
700: "hsl(120, 75%, 16%)",
800: "hsl(120, 84%, 10%)",
900: "hsl(120, 87%, 6%)",
};
export const orange = {
50: 'hsl(45, 100%, 97%)',
100: 'hsl(45, 92%, 90%)',
200: 'hsl(45, 94%, 80%)',
300: 'hsl(45, 90%, 65%)',
400: 'hsl(45, 90%, 40%)',
500: 'hsl(45, 90%, 35%)',
600: 'hsl(45, 91%, 25%)',
700: 'hsl(45, 94%, 20%)',
800: 'hsl(45, 95%, 16%)',
900: 'hsl(45, 93%, 12%)',
50: "hsl(45, 100%, 97%)",
100: "hsl(45, 92%, 90%)",
200: "hsl(45, 94%, 80%)",
300: "hsl(45, 90%, 65%)",
400: "hsl(45, 90%, 40%)",
500: "hsl(45, 90%, 35%)",
600: "hsl(45, 91%, 25%)",
700: "hsl(45, 94%, 20%)",
800: "hsl(45, 95%, 16%)",
900: "hsl(45, 93%, 12%)",
};
export const red = {
50: 'hsl(0, 100%, 97%)',
100: 'hsl(0, 92%, 90%)',
200: 'hsl(0, 94%, 80%)',
300: 'hsl(0, 90%, 65%)',
400: 'hsl(0, 90%, 40%)',
500: 'hsl(0, 90%, 30%)',
600: 'hsl(0, 91%, 25%)',
700: 'hsl(0, 94%, 18%)',
800: 'hsl(0, 95%, 12%)',
900: 'hsl(0, 93%, 6%)',
50: "hsl(0, 100%, 97%)",
100: "hsl(0, 92%, 90%)",
200: "hsl(0, 94%, 80%)",
300: "hsl(0, 90%, 65%)",
400: "hsl(0, 90%, 40%)",
500: "hsl(0, 90%, 30%)",
600: "hsl(0, 91%, 25%)",
700: "hsl(0, 94%, 18%)",
800: "hsl(0, 95%, 12%)",
900: "hsl(0, 93%, 6%)",
};
export const getDesignTokens = (mode: PaletteMode) => {
customShadows[1] =
mode === 'dark'
? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
customShadows[1] =
mode === "dark"
? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
: "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px";
return {
palette: {
mode,
primary: {
light: brand[200],
main: brand[400],
dark: brand[700],
contrastText: brand[50],
...(mode === 'dark' && {
contrastText: brand[50],
light: brand[300],
main: brand[400],
dark: brand[700],
}),
},
info: {
light: brand[100],
main: brand[300],
dark: brand[600],
contrastText: gray[50],
...(mode === 'dark' && {
contrastText: brand[300],
light: brand[500],
main: brand[700],
dark: brand[900],
}),
},
warning: {
light: orange[300],
main: orange[400],
dark: orange[800],
...(mode === 'dark' && {
light: orange[400],
main: orange[500],
dark: orange[700],
}),
},
error: {
light: red[300],
main: red[400],
dark: red[800],
...(mode === 'dark' && {
light: red[400],
main: red[500],
dark: red[700],
}),
},
success: {
light: green[300],
main: green[400],
dark: green[800],
...(mode === 'dark' && {
light: green[400],
main: green[500],
dark: green[700],
}),
},
grey: {
...gray,
},
divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
background: {
default: 'hsl(0, 0%, 99%)',
paper: 'hsl(220, 35%, 97%)',
...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
},
text: {
primary: gray[800],
secondary: gray[600],
warning: orange[400],
...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
},
action: {
hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`,
...(mode === 'dark' && {
hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3),
}),
},
},
typography: {
fontFamily: 'Inter, sans-serif',
h1: {
fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600,
lineHeight: 1.2,
letterSpacing: -0.5,
},
h2: {
fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600,
lineHeight: 1.2,
},
h3: {
fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2,
},
h4: {
fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600,
lineHeight: 1.5,
},
h5: {
fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600,
},
h6: {
fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600,
},
subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18),
},
subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500,
},
body1: {
fontSize: defaultTheme.typography.pxToRem(14),
},
body2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400,
},
caption: {
fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400,
},
},
shape: {
borderRadius: 8,
},
shadows: customShadows,
};
return {
palette: {
mode,
primary: {
light: brand[200],
main: brand[400],
dark: brand[700],
contrastText: brand[50],
...(mode === "dark" && {
contrastText: brand[50],
light: brand[300],
main: brand[400],
dark: brand[700],
}),
},
info: {
light: brand[100],
main: brand[300],
dark: brand[600],
contrastText: gray[50],
...(mode === "dark" && {
contrastText: brand[300],
light: brand[500],
main: brand[700],
dark: brand[900],
}),
},
warning: {
light: orange[300],
main: orange[400],
dark: orange[800],
...(mode === "dark" && {
light: orange[400],
main: orange[500],
dark: orange[700],
}),
},
error: {
light: red[300],
main: red[400],
dark: red[800],
...(mode === "dark" && {
light: red[400],
main: red[500],
dark: red[700],
}),
},
success: {
light: green[300],
main: green[400],
dark: green[800],
...(mode === "dark" && {
light: green[400],
main: green[500],
dark: green[700],
}),
},
grey: {
...gray,
},
divider:
mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
background: {
default: "hsl(0, 0%, 99%)",
paper: "hsl(220, 35%, 97%)",
...(mode === "dark" && {
default: gray[900],
paper: "hsl(220, 30%, 7%)",
}),
},
text: {
primary: gray[800],
secondary: gray[600],
warning: orange[400],
...(mode === "dark" && {
primary: "hsl(0, 0%, 100%)",
secondary: gray[400],
}),
},
action: {
hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`,
...(mode === "dark" && {
hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3),
}),
},
},
typography: {
fontFamily: "Gilroy",
h1: {
fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600,
lineHeight: 1.2,
letterSpacing: -0.5,
},
h2: {
fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600,
lineHeight: 1.2,
},
h3: {
fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2,
},
h4: {
fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600,
lineHeight: 1.5,
},
h5: {
fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600,
},
h6: {
fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600,
},
subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18),
},
subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500,
},
body1: {
fontSize: defaultTheme.typography.pxToRem(14),
},
body2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400,
},
caption: {
fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400,
},
},
shape: {
borderRadius: 8,
},
shadows: customShadows,
};
};
export const colorSchemes = {
light: {
palette: {
primary: {
light: brand[200],
main: brand[400],
dark: brand[700],
contrastText: brand[50],
},
info: {
light: brand[100],
main: brand[300],
dark: brand[600],
contrastText: gray[50],
},
warning: {
light: orange[300],
main: orange[400],
dark: orange[800],
},
error: {
light: red[300],
main: red[400],
dark: red[800],
},
success: {
light: green[300],
main: green[400],
dark: green[800],
},
grey: {
...gray,
},
divider: alpha(gray[300], 0.4),
background: {
default: 'hsl(0, 0%, 99%)',
paper: 'hsl(220, 35%, 97%)',
},
text: {
primary: gray[800],
secondary: gray[600],
warning: orange[400],
},
action: {
hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`,
},
baseShadow:
'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
},
},
dark: {
palette: {
primary: {
contrastText: brand[50],
light: brand[300],
main: brand[400],
dark: brand[700],
},
info: {
contrastText: brand[300],
light: brand[500],
main: brand[700],
dark: brand[900],
},
warning: {
light: orange[400],
main: orange[500],
dark: orange[700],
},
error: {
light: red[400],
main: red[500],
dark: red[700],
},
success: {
light: green[400],
main: green[500],
dark: green[700],
},
grey: {
...gray,
},
divider: alpha(gray[700], 0.6),
background: {
default: gray[900],
paper: 'hsl(220, 30%, 7%)',
},
text: {
primary: 'hsl(0, 0%, 100%)',
secondary: gray[400],
},
action: {
hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3),
},
baseShadow:
'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
},
},
light: {
palette: {
primary: {
light: brand[200],
main: brand[400],
dark: brand[700],
contrastText: brand[50],
},
info: {
light: brand[100],
main: brand[300],
dark: brand[600],
contrastText: gray[50],
},
warning: {
light: orange[300],
main: orange[400],
dark: orange[800],
},
error: {
light: red[300],
main: red[400],
dark: red[800],
},
success: {
light: green[300],
main: green[400],
dark: green[800],
},
grey: {
...gray,
},
divider: alpha(gray[300], 0.4),
background: {
default: "hsl(0, 0%, 99%)",
paper: "hsl(220, 35%, 97%)",
},
text: {
primary: gray[800],
secondary: gray[600],
warning: orange[400],
},
action: {
hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`,
},
baseShadow:
"hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
},
},
dark: {
palette: {
primary: {
contrastText: brand[50],
light: brand[300],
main: brand[400],
dark: brand[700],
},
info: {
contrastText: brand[300],
light: brand[500],
main: brand[700],
dark: brand[900],
},
warning: {
light: orange[400],
main: orange[500],
dark: orange[700],
},
error: {
light: red[400],
main: red[500],
dark: red[700],
},
success: {
light: green[400],
main: green[500],
dark: green[700],
},
grey: {
...gray,
},
divider: alpha(gray[700], 0.6),
background: {
default: gray[900],
paper: "hsl(220, 30%, 7%)",
},
text: {
primary: "hsl(0, 0%, 100%)",
secondary: gray[400],
},
action: {
hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3),
},
baseShadow:
"hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
},
},
};
export const typography = {
fontFamily: 'Inter, sans-serif',
h1: {
fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600,
lineHeight: 1.2,
letterSpacing: -0.5,
},
h2: {
fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600,
lineHeight: 1.2,
},
h3: {
fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2,
},
h4: {
fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600,
lineHeight: 1.5,
},
h5: {
fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600,
},
h6: {
fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600,
},
subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18),
},
subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500,
},
body1: {
fontSize: defaultTheme.typography.pxToRem(14),
},
body2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400,
},
caption: {
fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400,
},
fontFamily: "Gilroy",
h1: {
fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600,
lineHeight: 1.2,
letterSpacing: -0.5,
},
h2: {
fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600,
lineHeight: 1.2,
},
h3: {
fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2,
},
h4: {
fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600,
lineHeight: 1.5,
},
h5: {
fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600,
},
h6: {
fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600,
},
subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18),
},
subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500,
},
body1: {
fontSize: defaultTheme.typography.pxToRem(14),
},
body2: {
fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400,
},
caption: {
fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400,
},
};
export const shape = {
borderRadius: 8,
borderRadius: 8,
};
// @ts-ignore
const defaultShadows: Shadows = [
'none',
'var(--template-palette-baseShadow)',
...defaultTheme.shadows.slice(2),
"none",
"var(--template-palette-baseShadow)",
...defaultTheme.shadows.slice(2),
];
export const shadows = defaultShadows;