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) => { const onSubmit = (data: FormData) => {
handleCreate(data); if (editRow) {
handleUpdate(
editRow.id,
data.name,
data.email,
data.phone,
data.password
);
} else {
handleCreate(data);
}
handleClose(); handleClose();
reset(); reset();
@ -79,7 +91,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
justifyContent: "space-between", justifyContent: "space-between",
}} }}
> >
{editRow ? "Edit Admin" : "Add Admin"} {editRow ? "Edit User" : "Add User"}
<Box <Box
onClick={handleClose} onClick={handleClose}
sx={{ sx={{
@ -210,3 +222,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
}; };
export default AddUserModal; 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={{ sx={{
display: { xs: "auto", md: "none" }, display: { xs: "auto", md: "none" },
boxShadow: 0, boxShadow: 0,
bgcolor: "background.paper", backgroundColor:"#1C1C1C",
backgroundImage: "none", backgroundImage: "none",
borderBottom: "1px solid", borderBottom: "1px solid",
borderColor: "divider", borderColor: "divider",

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

@ -1,3 +1,4 @@
import * as React from "react"; import * as React from "react";
import { styled } from "@mui/material/styles"; import { styled } from "@mui/material/styles";
import Table from "@mui/material/Table"; import Table from "@mui/material/Table";
@ -12,24 +13,30 @@ import { useDispatch } from "react-redux";
import { import {
Box, Box,
Button, Button,
dividerClasses,
IconButton, IconButton,
listClasses, InputAdornment,
Menu, Menu,
Pagination,
TextField,
Typography,
} from "@mui/material"; } from "@mui/material";
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"; import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
import DeleteModal from "../Modals/DeleteModal"; import DeleteModal from "../Modals/DeleteModal";
import { AppDispatch } from "../../redux/store/store"; import { AppDispatch } from "../../redux/store/store";
import ViewModal from "../Modals/ViewModal"; import ViewModal from "../Modals/ViewModal";
import SearchIcon from "@mui/icons-material/Search";
import TuneIcon from "@mui/icons-material/Tune";
// Styled components for customization // Styled components for customization
const StyledTableCell = styled(TableCell)(({ theme }) => ({ const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: { [`&.${tableCellClasses.head}`]: {
backgroundColor: " #1565c0", backgroundColor: "#454545", // Changed to #272727 for the header
color: theme.palette.common.white, color: theme.palette.common.white,
borderBottom: "none", // Remove any border at the bottom of the header
}, },
[`&.${tableCellClasses.body}`]: { [`&.${tableCellClasses.body}`]: {
fontSize: 14, fontSize: 14,
borderBottom: "1px solid #454545", // Adding border to body cells
}, },
})); }));
@ -37,8 +44,9 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
"&:nth-of-type(odd)": { "&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover, backgroundColor: theme.palette.action.hover,
}, },
"&:last-child td, &:last-child th": { "& td, th": {
border: 0, 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; setViewModal: Function;
deleteModal: boolean; deleteModal: boolean;
handleStatusToggle: (id: string, currentStatus: number) => void; 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> = ({ const CustomTable: React.FC<CustomTableProps> = ({
@ -76,10 +85,15 @@ const CustomTable: React.FC<CustomTableProps> = ({
setModalOpen, setModalOpen,
handleStatusToggle, handleStatusToggle,
tableType, tableType,
handleClickOpen,
}) => { }) => {
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>();
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [selectedRow, setSelectedRow] = React.useState<Row | null>(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); const open = Boolean(anchorEl);
@ -124,32 +138,164 @@ const CustomTable: React.FC<CustomTableProps> = ({
handleClose(); 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 ( return (
<Box sx={{ overflowX: "auto", width: "100%" }}> <Box
<TableContainer component={Paper}> sx={{
<Table 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={{ sx={{
minWidth: 700, width: "422px",
width: "100%", borderRadius: "12px",
tableLayout: "auto", 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> <TableRow>
{columns.map((column) => ( {columns.map((column) => (
<StyledTableCell <StyledTableCell
key={column.id} key={column.id}
align={column.align || "left"}
sx={{ sx={{
whiteSpace: "nowrap", // Prevent wrapping color: "#FFFFFF",
// fontSize: { xs: "12px", sm: "14px" }, fontWeight: "bold",
fontSize: {
xs: "10px",
sm: "12px",
md: "14px",
}, // Adjust font size responsively
padding: { xs: "8px", sm: "12px" },
}} }}
> >
{column.label} {column.label}
@ -158,20 +304,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{rows.map((row, rowIndex) => ( {currentRows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}> <StyledTableRow key={rowIndex}>
{columns.map((column) => ( {columns.map((column) => (
<StyledTableCell <StyledTableCell
key={column.id} key={column.id}
align={column.align || "left"}
sx={{ sx={{
whiteSpace: "nowrap", // Prevent wrapping color: "#FFFFFF",
fontSize: { backgroundColor: "#272727",
xs: "10px",
sm: "12px",
md: "14px",
}, // Adjust font size responsively
padding: { xs: "8px", sm: "12px" },
}} }}
> >
{isImage(row[column.id]) ? ( {isImage(row[column.id]) ? (
@ -192,8 +332,24 @@ const CustomTable: React.FC<CustomTableProps> = ({
handleClick(e, row); handleClick(e, row);
setRowData(row); // Store the selected 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> </IconButton>
)} )}
</StyledTableCell> </StyledTableCell>
@ -204,6 +360,40 @@ const CustomTable: React.FC<CustomTableProps> = ({
</Table> </Table>
</TableContainer> </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 */} {/* Menu Actions */}
{open && ( {open && (
<Menu <Menu
@ -215,15 +405,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
transformOrigin={{ horizontal: "right", vertical: "top" }} transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{ sx={{
[`& .${listClasses.root}`]: {
padding: "4px",
},
[`& .${paperClasses.root}`]: { [`& .${paperClasses.root}`]: {
padding: 0, padding: 0,
}, },
[`& .${dividerClasses.root}`]: {
margin: "4px -4px",
},
}} }}
> >
<Box <Box
@ -243,7 +427,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
sx={{ sx={{
justifyContent: "flex-start", justifyContent: "flex-start",
py: 0, py: 0,
textTransform: "capitalize", fontWeight: "bold",
color: "#52ACDF",
}} }}
> >
View View
@ -258,6 +443,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
id={selectedRow?.id} id={selectedRow?.id}
/> />
)} )}
<Button <Button
variant="text" variant="text"
onClick={() => setModalOpen(true)} onClick={() => setModalOpen(true)}
@ -270,10 +456,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
> >
Edit Edit
</Button> </Button>
{tableType === "role" && (
{tableType === "roleList" && ( <Button
<Button variant="text" onClick={handleToggleStatus}> variant="text"
{selectedRow.statusValue === 1 onClick={(e) => {
e.stopPropagation();
handleToggleStatus();
}}
color="secondary"
sx={{
justifyContent: "flex-start",
py: 0,
fontWeight: "bold",
}}
>
{selectedRow?.statusValue === 1
? "Deactivate" ? "Deactivate"
: "Activate"} : "Activate"}
</Button> </Button>
@ -289,24 +486,25 @@ const CustomTable: React.FC<CustomTableProps> = ({
sx={{ sx={{
justifyContent: "flex-start", justifyContent: "flex-start",
py: 0, py: 0,
textTransform: "capitalize", fontWeight: "bold",
color: "red",
}} }}
> >
Delete Delete
</Button> </Button>
{deleteModal && (
<DeleteModal
handleDelete={() =>
handleDeleteButton(selectedRow?.id)
}
open={deleteModal}
setDeleteModal={setDeleteModal}
id={selectedRow?.id}
/>
)}
</Box> </Box>
</Menu> </Menu>
)} )}
{/* Modals */}
{deleteModal && (
<DeleteModal
handleDelete={() => handleDeleteButton(selectedRow?.id)}
open={deleteModal}
setDeleteModal={setDeleteModal}
id={selectedRow?.id}
/>
)}
</Box> </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 Divider from "@mui/material/Divider";
import MenuButton from "../MenuButton"; import MenuButton from "../MenuButton";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded"; 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() { export default function Header() {
const [showNotifications, setShowNotifications] = React.useState(false); const [showNotifications, setShowNotifications] = React.useState(false);
const toggleNotifications = () => { const toggleNotifications = () => {
setShowNotifications((prev) => !prev); setShowNotifications((prev) => !prev);
}; };
const [open, setOpen] = React.useState(true);
const dispatch = useDispatch<AppDispatch>();
const { user } = useSelector(
(state: RootState) => state?.profileReducer
);
React.useEffect(() => {
dispatch(fetchAdminProfile());
}, [dispatch]);
return ( return (
<Box <Box
sx={{ sx={{
width: "100%", width: "100%",
height: "84px", // height: "84px",
// backgroundColor: "#202020", // backgroundColor: "#1C1C1C",
padding: "20px 24px", padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size // error on this
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: { xs: "column", sm: "row" }, flexDirection: { xs: "column", sm: "row" },
// padding:"0px"
}} }}
> >
<Box sx={{ flexGrow: 1 }} />
<Stack <Stack
direction="row" direction="row"
spacing={3} spacing={3}
@ -45,9 +59,9 @@ export default function Header() {
{/* Search Bar */} {/* Search Bar */}
<Box <Box
sx={{ sx={{
width: { xs: "100%", sm: "360px" }, // width: { xs: "100%", sm: "360px" },
height: "44px", height: "44px",
backgroundColor: "#FFFFFF",
borderRadius: "8px", borderRadius: "8px",
border: "1px solid #424242", border: "1px solid #424242",
display: "flex", display: "flex",
@ -55,12 +69,12 @@ export default function Header() {
padding: "0 12px", padding: "0 12px",
}} }}
> >
<SearchIcon sx={{ color: "#202020" }} /> <SearchIcon sx={{ color: "#FFFFFF" }} />
<InputBase <InputBase
sx={{ sx={{
marginLeft: 1, marginLeft: 1,
flex: 1, flex: 1,
color: "#202020", color: "#FFFFFF",
fontSize: { xs: "12px", sm: "14px" }, 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 display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
}} }}
> >
{/* Custom Bell Icon */}
<MenuButton <NotificationsNoneIcon onClick={toggleNotifications} />
showBadge <Avatar
aria-label="Open notifications" alt="User Avatar"
onClick={toggleNotifications} src="/avatar.png"
> sx={{ width: 36, height: 36 }}
<NotificationsRoundedIcon /> />
</MenuButton> <Typography variant="body1" sx={{ color: "#FFFFFF" }}>
{user?.name || "No Admin"}
</Typography>
<Divider flexItem sx={{ backgroundColor: "#202020" }} /> <OptionsMenu />
<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 /> */}
</Stack> </Stack>
{showNotifications && ( {showNotifications && (
<Box <Box
sx={{ sx={{

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

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

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

@ -48,7 +48,7 @@ export default function MainGrid() {
spacing={2} spacing={2}
columns={12} columns={12}
sx={{ mb: (theme) => theme.spacing(2) }} // sx={{ mb: (theme) => theme.spacing(2) }}
> >
{data.map((card, index) => ( {data.map((card, index) => (
<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}> <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 * as React from "react";
import { styled } from "@mui/material/styles"; import { styled } from "@mui/material/styles";
import Divider, { dividerClasses } from "@mui/material/Divider";
import Menu from "@mui/material/Menu"; import Menu from "@mui/material/Menu";
import MuiMenuItem from "@mui/material/MenuItem"; import MuiMenuItem from "@mui/material/MenuItem";
import { paperClasses } from "@mui/material/Paper"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { listClasses } from "@mui/material/List"; import Link from "@mui/material/Link";
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 Logout from "../LogOutFunction/LogOutFunction"; import Logout from "../LogOutFunction/LogOutFunction";
import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
import { ListItemText } from "@mui/material";
const MenuItem = styled(MuiMenuItem)({ const MenuItem = styled(MuiMenuItem)({
margin: "2px 0", margin: "2px 0",
borderBottom: "none",
}); });
export default function OptionsMenu({ avatar }: { avatar?: boolean }) { export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
@ -28,90 +22,58 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); 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 ( return (
<React.Fragment> <React.Fragment>
<MenuButton <ExpandMoreIcon onClick={handleClick} />
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>
<Menu <Menu
anchorEl={anchorEl} anchorEl={anchorEl}
id="menu" id="top-menu"
open={open} open={open}
onClose={handleClose} onClose={handleClose}
onClick={handleClose} onClick={handleClose}
transformOrigin={{ horizontal: "right", vertical: "top" }} slotProps={{
anchorOrigin={{ horizontal: "right", vertical: "bottom" }} paper: {
sx={{ elevation: 0,
[`& .${listClasses.root}`]: { sx: {
padding: "4px", overflow: "visible",
}, filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
[`& .${paperClasses.root}`]: { mt: 1.5,
padding: 0, "& .MuiMenuItem-root": {
}, borderBottom: "none", // Remove any divider under menu items
[`& .${dividerClasses.root}`]: { },
margin: "4px -4px", },
}, },
}} }}
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
> >
<MenuItem onClick={handleProfile}>Profile</MenuItem> <Link
<MenuItem onClick={handleClose}>My account</MenuItem> href={"/panel/profile"}
<Divider /> underline="none"
<MenuItem onClick={handleClose}>Add another account</MenuItem>
<MenuItem onClick={handleClose}>Settings</MenuItem>
<Divider />
<MenuItem
onClick={handleClose}
sx={{ sx={{
[`& .${listItemIconClasses.root}`]: { "&::before": {
ml: "auto", display: "none",
minWidth: 0,
}, },
}} }}
> >
{/* //Eknoor singh and jaanvi <MenuItem onClick={handleClose}>Profile</MenuItem>
//date:- 13-Feb-2025 </Link>
//Implemented logout functionality which was static previously */} <MenuItem onClick={handleClose} sx={{ color: "#E8533B" }}>
<ListItemText <ListItemText
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setLogoutModal(true); setLogoutModal(true);
}} }}
sx={{ color: "red" }}
> >
Logout Logout
</ListItemText> </ListItemText>
<Logout <Logout
setLogoutModal={setLogoutModal} setLogoutModal={setLogoutModal}
logoutModal={logoutModal} logoutModal={logoutModal}
/> />
<ListItemIcon>
<LogoutRoundedIcon fontSize="small" />
</ListItemIcon>
</MenuItem> </MenuItem>
</Menu> </Menu>
</React.Fragment> </React.Fragment>

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

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

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

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

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

@ -29,10 +29,6 @@ const Drawer = styled(MuiDrawer)({
export default function SideMenu() { export default function SideMenu() {
const [open, setOpen] = React.useState(true); 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 dispatch = useDispatch<AppDispatch>();
const { user } = useSelector((state: RootState) => state?.profileReducer); const { user } = useSelector((state: RootState) => state?.profileReducer);
@ -73,39 +69,7 @@ export default function SideMenu() {
</Button> </Button>
</Box> </Box>
<MenuContent hidden={open} /> <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> </Drawer>
); );
} }

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

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

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

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

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

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

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

@ -137,8 +137,8 @@ const AddEditRolePage: React.FC = () => {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#1976D2", backgroundColor: "#52ACDF",
color: "#fff", color: "#fffff",
p: 2, p: 2,
borderRadius: "8px", borderRadius: "8px",
mb: 2, mb: 2,
@ -147,18 +147,14 @@ const AddEditRolePage: React.FC = () => {
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600}>
Role Permissions Role Permissions
</Typography> </Typography>
<Button <Button variant="contained" onClick={handleBack}>
variant="contained"
color="secondary"
onClick={handleBack}
>
Back Back
</Button> </Button>
</Box> </Box>
{/* Role Name Input */} {/* Role Name Input */}
<Box sx={{ mb: 2}}> <Box sx={{ mb: 2 }}>
<label >Role Name</label> <label>Role Name</label>
<TextField <TextField
placeholder="Enter role name" placeholder="Enter role name"
value={roleName} value={roleName}
@ -166,20 +162,22 @@ const AddEditRolePage: React.FC = () => {
fullWidth fullWidth
required required
variant="outlined" variant="outlined"
sx={{ mb: 2, mt: 2 }}
sx={{ mb: 2 ,mt:2}}
/> />
</Box> </Box>
{/* Table Container */} {/* Table Container */}
<TableContainer <TableContainer
component={Paper} component={Paper}
sx={{ borderRadius: "8px", overflow: "hidden" }} sx={{
borderRadius: "8px",
overflow: "hidden",
}}
> >
<Table> <Table>
{/* Table Head */} {/* Table Head */}
<TableHead> <TableHead>
<TableRow sx={{ backgroundColor: "#f5f5f5" }}> <TableRow sx={{ backgroundColor: "#1C1C1C" }}>
<TableCell <TableCell
sx={{ fontWeight: "bold", width: "30%" }} sx={{ fontWeight: "bold", width: "30%" }}
> >
@ -200,7 +198,7 @@ const AddEditRolePage: React.FC = () => {
key={index} key={index}
sx={{ sx={{
"&:nth-of-type(odd)": { "&: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, email,
phone, phone,
registeredAddress, registeredAddress,
}) })
); );
await dispatch(adminList()); await dispatch(adminList());
@ -85,18 +86,17 @@ export default function AdminList() {
{ id: "registeredAddress", label: "Address" }, { id: "registeredAddress", label: "Address" },
{ id: "action", label: "Action", align: "center" }, { id: "action", label: "Action", align: "center" },
]; ];
const filteredAdmins = admins?.filter( // const filteredAdmins = admins?.filter(
(admin) => // (admin) =>
admin.name.toLowerCase().includes(searchTerm.toLowerCase()) || // admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
admin.email.toLowerCase().includes(searchTerm.toLowerCase()) || // admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) || // admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
admin.registeredAddress // admin.registeredAddress
.toLowerCase() // .toLowerCase()
.includes(searchTerm.toLowerCase()) // .includes(searchTerm.toLowerCase())
); // );
const categoryRows = filteredAdmins?.length const categoryRows = admins?.map(
? filteredAdmins?.map(
( (
admin: { admin: {
id: string; id: string;
@ -112,68 +112,14 @@ export default function AdminList() {
name: admin?.name, name: admin?.name,
email: admin?.email, email: admin?.email,
phone: admin?.phone, phone: admin?.phone,
registeredAddress: admin?.registeredAddress, registeredAddress: admin?.registeredAddress || "NA",
}) })
) )
: []; ;
return ( 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 <CustomTable
columns={categoryColumns} columns={categoryColumns}
rows={categoryRows} rows={categoryRows}
@ -183,6 +129,8 @@ export default function AdminList() {
viewModal={viewModal} viewModal={viewModal}
setRowData={setRowData} setRowData={setRowData}
setModalOpen={setModalOpen} setModalOpen={setModalOpen}
tableType="admin"
handleClickOpen={handleClickOpen}
/> />
<AddEditCategoryModal <AddEditCategoryModal
open={modalOpen} open={modalOpen}

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

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

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

@ -1,60 +1,58 @@
// src/pages/Dashboard // src/pages/Dashboard
import * as React from 'react'; import * as React from "react";
import { Box, CssBaseline, Typography } from '@mui/material'; import { Box, CssBaseline, Typography } from "@mui/material";
import { import {
chartsCustomizations, chartsCustomizations,
dataGridCustomizations, dataGridCustomizations,
datePickersCustomizations, datePickersCustomizations,
treeViewCustomizations, treeViewCustomizations,
} from './theme/customizations'; } from "./theme/customizations";
import DashboardLayout from '../../layouts/DashboardLayout'; import DashboardLayout from "../../layouts/DashboardLayout";
import AppTheme from '../../shared-theme/AppTheme'; import AppTheme from "../../shared-theme/AppTheme";
import MainGrid from '../../components/MainGrid'; import MainGrid from "../../components/MainGrid";
import AdminList from '../AdminList'; import AdminList from "../AdminList";
const xThemeComponents = { const xThemeComponents = {
...chartsCustomizations, ...chartsCustomizations,
...dataGridCustomizations, ...dataGridCustomizations,
...datePickersCustomizations, ...datePickersCustomizations,
...treeViewCustomizations, ...treeViewCustomizations,
}; };
interface DashboardProps { interface DashboardProps {
disableCustomTheme?: boolean; disableCustomTheme?: boolean;
} }
const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) => { const Dashboard: React.FC<DashboardProps> = ({
return ( disableCustomTheme = false,
<AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}> }) => {
<CssBaseline enableColorScheme /> return (
{!disableCustomTheme ? ( <AppTheme
<><MainGrid /></> {...{ disableCustomTheme }}
) : ( themeComponents={xThemeComponents}
<Box >
sx={{ <CssBaseline enableColorScheme />
display: 'flex', {!disableCustomTheme ? (
justifyContent: 'center', <>
alignItems: 'center', <MainGrid />
backgroundColor:'#202020', </>
height: '100vh', ) : (
textAlign: 'center', <Box
padding: 2, sx={{
}} display: "flex",
> justifyContent: "center",
alignItems: "center",
</Box> backgroundColor: "#202020",
)} height: "100vh",
</AppTheme> textAlign: "center",
); padding: 2,
}}
></Box>
)}
</AppTheme>
);
}; };
export default Dashboard; 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 { useEffect } from "react";
import { import {
Container, Container,
@ -12,16 +8,15 @@ import {
Grid, Grid,
Avatar, Avatar,
Box, Box,
Stack,
Divider,
Link,
} from "@mui/material"; } from "@mui/material";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store"; import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice"; import { fetchAdminProfile } from "../../redux/slices/profileSlice";
const ProfilePage = () => { const ProfilePage = () => {
//Eknoor singh
//date:- 12-Feb-2025
//Dispatch is called and user, isLoading, and error from Authstate Interface
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>();
const { user, isLoading } = useSelector( const { user, isLoading } = useSelector(
(state: RootState) => state?.profileReducer (state: RootState) => state?.profileReducer
@ -49,34 +44,108 @@ const ProfilePage = () => {
return ( return (
<Container sx={{ py: 4 }}> <Container sx={{ py: 4 }}>
<Typography variant="h4" gutterBottom> <Typography variant="h4" gutterBottom>
Profile Account Info
</Typography> </Typography>
<Card sx={{ maxWidth: 600, margin: "0 auto" }}> <Card
sx={{
maxWidth: "100%",
margin: "0 auto",
}}
>
<CardContent> <CardContent>
<Grid container spacing={2} alignItems="center"> <Stack direction="column" spacing={2}>
<Grid item> <Stack
direction="row"
spacing={1.5}
alignItems="center"
>
<Avatar <Avatar
alt="User Avatar"
alt={user?.name || "User Avatar"} src="/avatar.png"
src={"/static/images/avatar/7.jpg"} sx={{ width: 36, height: 36 }}
sx={{ width: 80, height: 80 }}
/> />
<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>
<Grid item xs>
<Typography variant="h6"> <Typography variant="body1" sx={{ color: "#FFFFFF" }}>
{user?.name || "N/A"} Bio:
</Typography> </Typography>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="#D9D8D8">
Email: {user?.email || "N/A"} {user?.bio || "No bio available."}
</Typography> </Typography>
<Typography variant="body2" color="text.secondary"> </Stack>
Phone: {user?.phone || "N/A"}
</Typography>
<Typography variant="body2" color="text.secondary">
Role: <b>{user?.userType || "N/A"}</b>
</Typography>
</Grid>
</Grid>
</CardContent> </CardContent>
</Card> </Card>
</Container> </Container>

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

@ -100,47 +100,7 @@ export default function RoleList() {
return ( 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 ? ( {showPermissions ? (
<AddEditRolePage /> <AddEditRolePage />
) : ( ) : (
@ -154,7 +114,8 @@ export default function RoleList() {
setRowData={setRowData} setRowData={setRowData}
setModalOpen={setModalOpen} setModalOpen={setModalOpen}
handleStatusToggle={handleStatusToggle} 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 React, { useEffect, useState } from "react";
import { Box, Button, Typography } from "@mui/material"; import { Box, Button, Typography } from "@mui/material";
import AddEditCategoryModal from "../../components/AddEditCategoryModal"; import AddEditCategoryModal from "../../components/AddEditCategoryModal";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import CustomTable, { Column } from "../../components/CustomTable"; import CustomTable, { Column } from "../../components/CustomTable";
import { useDispatch, useSelector } from "react-redux"; 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 { AppDispatch, RootState } from "../../redux/store/store";
import { string } from "prop-types"; import { string } from "prop-types";
import { adminList, updateAdmin } from "../../redux/slices/adminSlice"; import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
@ -709,7 +41,7 @@ export default function UserList() {
name: string; name: string;
email: string; email: string;
phone: string; phone: string;
registeredAddress: string;
}) => { }) => {
try { try {
await dispatch(createUser(data)); await dispatch(createUser(data));
@ -724,20 +56,19 @@ export default function UserList() {
id: string, id: string,
name: string, name: string,
email: string, email: string,
phone: string, phone: string
registeredAddress: string
) => { ) => {
try { try {
await dispatch( await dispatch(
updateAdmin({ updateUser({
id, id,
name, name,
email, email,
phone, phone,
registeredAddress,
}) })
); );
await dispatch(adminList()); await dispatch(userList());
} catch (error) { } catch (error) {
console.error("Update failed", error); console.error("Update failed", error);
} }
@ -784,34 +115,6 @@ export default function UserList() {
return ( 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 <CustomTable
columns={categoryColumns} columns={categoryColumns}
rows={categoryRows} rows={categoryRows}
@ -821,6 +124,8 @@ export default function UserList() {
viewModal={viewModal} viewModal={viewModal}
setRowData={setRowData} setRowData={setRowData}
setModalOpen={setModalOpen} setModalOpen={setModalOpen}
tableType="user"
handleClickOpen={handleClickOpen}
/> />
<AddUserModal <AddUserModal
open={modalOpen} 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 profileReducer from "./slices/profileSlice";
import userReducer from "./slices/userSlice.ts"; import userReducer from "./slices/userSlice.ts";
import roleReducer from "./slices/roleSlice.ts"; import roleReducer from "./slices/roleSlice.ts";
import vehicleReducer from "./slices/VehicleSlice.ts";
const rootReducer = combineReducers({ const rootReducer = combineReducers({
authReducer, authReducer,
@ -12,6 +14,7 @@ const rootReducer = combineReducers({
profileReducer, profileReducer,
userReducer, userReducer,
roleReducer, roleReducer,
vehicleReducer
}); });
export type RootState = ReturnType<typeof rootReducer>; 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; state.isLoading = true;
}) })
.addCase(updateAdmin.fulfilled, (state, action) => { .addCase(updateAdmin.fulfilled, (state, action) => {
const updatedAdmin = action.payload;
state.admins = state?.admins?.map((admin) =>
admin?.id === updatedAdmin?.id ? updatedAdmin : admin
);
state.isLoading = false; state.isLoading = false;
}) })
.addCase(updateAdmin.rejected, (state) => { .addCase(updateAdmin.rejected, (state) => {

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

@ -5,14 +5,14 @@ import { toast } from "sonner";
// Define TypeScript types // Define TypeScript types
interface User { interface User {
id: number; id: string;
name: string; name: string;
email: string; email: string;
phone?: string; phone?: string;
// location?: string; // location?: string;
// managerAssigned?: string; // managerAssigned?: string;
// vehicle?: string; // vehicle?: string;
password:string; password: string;
} }
interface UserState { interface UserState {
@ -28,15 +28,6 @@ const initialState: UserState = {
error: null, 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 }>( export const userList = createAsyncThunk<User, void, { rejectValue: string }>(
"fetchUsers", "fetchUsers",
async (_, { rejectWithValue }) => { async (_, { rejectWithValue }) => {
@ -64,12 +55,8 @@ export const createUser = createAsyncThunk<
{ {
name: string; name: string;
email: string; email: string;
password: string;
phone: string; phone: string;
// location?: string;
// managerAssigned?: string;
// vehicle?: string;
}, },
{ rejectValue: string } { rejectValue: string }
>("/CreateUser", async (data, { rejectWithValue }) => { >("/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({ const userSlice = createSlice({
name: "fetchUsers", name: "fetchUsers",
initialState, initialState,
@ -120,7 +124,16 @@ const userSlice = createSlice({
(state, action: PayloadAction<string | undefined>) => { (state, action: PayloadAction<string | undefined>) => {
state.loading = false; 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 DashboardLayout from "./layouts/DashboardLayout";
import RoleList from "./pages/RoleList"; import RoleList from "./pages/RoleList";
import AddEditRolePage from "./pages/AddEditRolePage"; import AddEditRolePage from "./pages/AddEditRolePage";
import VehicleList from "./pages/VehicleList";
// Page imports // Page imports
const Login = lazy(() => import("./pages/Auth/Login")); const Login = lazy(() => import("./pages/Auth/Login"));
const SignUp = lazy(() => import("./pages/Auth/SignUp")); const SignUp = lazy(() => import("./pages/Auth/SignUp"));
const Dashboard = lazy(() => import("./pages/Dashboard")); 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 AdminList = lazy(() => import("./pages/AdminList"));
const ProfilePage = lazy(() => import("./pages/ProfilePage")); const ProfilePage = lazy(() => import("./pages/ProfilePage"));
const NotFoundPage = lazy(() => import("./pages/NotFound")); const NotFoundPage = lazy(() => import("./pages/NotFound"));
@ -109,6 +110,15 @@ export default function AppRouter() {
/> />
} }
/> />
<Route
path="vehicle-list"
element={
<ProtectedRoute
caps={[]}
component={<VehicleList />}
/>
}
/>
<Route <Route
path="permissions" path="permissions"
element={ element={

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

@ -1,60 +1,70 @@
import * as React from 'react'; import * as React from "react";
import { ThemeProvider, Theme, createTheme } from '@mui/material/styles'; import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
import type { ThemeOptions } from '@mui/material/styles'; import type { ThemeOptions } from "@mui/material/styles";
import { inputsCustomizations } from './customizations/inputs'; import { inputsCustomizations } from "./customizations/inputs";
import { dataDisplayCustomizations } from './customizations/dataDisplay'; import { dataDisplayCustomizations } from "./customizations/dataDisplay";
import { feedbackCustomizations } from './customizations/feedback'; import { feedbackCustomizations } from "./customizations/feedback";
import { navigationCustomizations } from './customizations/navigation'; import { navigationCustomizations } from "./customizations/navigation";
import { surfacesCustomizations } from './customizations/surfaces'; import { surfacesCustomizations } from "./customizations/surfaces";
import { colorSchemes, typography, shadows, shape } from './themePrimitives'; import { colorSchemes, typography, shadows, shape } from "./themePrimitives";
declare module '@mui/styles/defaultTheme' { declare module "@mui/styles/defaultTheme" {
interface DefaultTheme extends Theme { interface DefaultTheme extends Theme {
vars: object vars: object;
} }
} }
interface AppThemeProps { interface AppThemeProps {
children: React.ReactNode; children: React.ReactNode;
/** /**
* This is for the docs site. You can ignore it or remove it. * This is for the docs site. You can ignore it or remove it.
*/ */
disableCustomTheme?: boolean; disableCustomTheme?: boolean;
themeComponents?: ThemeOptions['components']; themeComponents?: ThemeOptions["components"];
} }
export default function AppTheme(props: AppThemeProps) { export default function AppTheme(props: AppThemeProps) {
const { children, disableCustomTheme, themeComponents } = props; const { children, disableCustomTheme, themeComponents } = props;
const theme = React.useMemo(() => { const theme = React.useMemo(() => {
return disableCustomTheme return disableCustomTheme
? {} ? {}
: createTheme({ : createTheme({
// For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/ palette: {
cssVariables: { mode: "dark", // Enforcing dark mode across the app
colorSchemeSelector: 'data-mui-color-scheme', background: {
cssVarPrefix: 'template', default: "#111111", // Dark background color
}, paper: "#1e1e1e", // Darker background for cards, containers, etc.
colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes },
typography, text: {
shadows, primary: "#ffffff", // White text for readability
shape, secondary: "#b0b0b0", // Lighter secondary text
components: { },
...inputsCustomizations, },
...dataDisplayCustomizations, cssVariables: {
...feedbackCustomizations, colorSchemeSelector: "data-mui-color-scheme",
...navigationCustomizations, cssVarPrefix: "template",
...surfacesCustomizations, },
...themeComponents, typography,
}, shadows,
}); shape,
}, [disableCustomTheme, themeComponents]); components: {
if (disableCustomTheme) { ...inputsCustomizations,
return <React.Fragment>{children}</React.Fragment>; ...dataDisplayCustomizations,
} ...feedbackCustomizations,
return ( ...navigationCustomizations,
<ThemeProvider theme={theme} disableTransitionOnChange> ...surfacesCustomizations,
{children} ...themeComponents,
</ThemeProvider> },
});
); }, [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}`, border: `1px solid ${(theme.vars || theme).palette.divider}`,
boxShadow: 'none', boxShadow: 'none',
...theme.applyStyles('dark', { ...theme.applyStyles('dark', {
backgroundColor: gray[800], backgroundColor:"#1C1C1C",
}), }),
variants: [ 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 defaultTheme = createTheme();
const customShadows = [...defaultTheme.shadows]; const customShadows = [...defaultTheme.shadows];
export const brand = { export const brand = {
50: 'hsl(210, 100%, 95%)', 50: "hsl(210, 100%, 95%)",
100: 'hsl(210, 100%, 92%)', 100: "hsl(210, 100%, 92%)",
200: 'hsl(210, 100%, 80%)', 200: "hsl(210, 100%, 80%)",
300: 'hsl(210, 100%, 65%)', 300: "hsl(210, 100%, 65%)",
400: 'hsl(210, 98%, 48%)', 400: "hsl(210, 98%, 48%)",
500: 'hsl(210, 98%, 42%)', 500: "hsl(210, 98%, 42%)",
600: 'hsl(210, 98%, 55%)', 600: "hsl(210, 98%, 55%)",
700: 'hsl(210, 100%, 35%)', 700: "hsl(210, 100%, 35%)",
800: 'hsl(210, 100%, 16%)', 800: "hsl(210, 100%, 16%)",
900: 'hsl(210, 100%, 21%)', 900: "hsl(210, 100%, 21%)",
}; };
export const gray = { export const gray = {
50: 'hsl(220, 35%, 97%)', 50: "hsl(220, 35%, 97%)",
100: 'hsl(220, 30%, 94%)', 100: "hsl(220, 30%, 94%)",
200: 'hsl(220, 20%, 88%)', 200: "hsl(220, 20%, 88%)",
300: 'hsl(220, 20%, 80%)', 300: "hsl(220, 20%, 80%)",
400: 'hsl(220, 20%, 65%)', 400: "hsl(220, 20%, 65%)",
500: 'hsl(220, 20%, 42%)', 500: "hsl(220, 20%, 42%)",
600: 'hsl(220, 20%, 35%)', 600: "hsl(220, 20%, 35%)",
700: 'hsl(220, 20%, 25%)', 700: "hsl(220, 20%, 25%)",
800: 'hsl(220, 30%, 6%)', 800: "hsl(220, 30%, 6%)",
900: 'hsl(220, 35%, 3%)', 900: "hsl(220, 35%, 3%)",
}; };
export const green = { export const green = {
50: 'hsl(120, 80%, 98%)', 50: "hsl(120, 80%, 98%)",
100: 'hsl(120, 75%, 94%)', 100: "hsl(120, 75%, 94%)",
200: 'hsl(120, 75%, 87%)', 200: "hsl(120, 75%, 87%)",
300: 'hsl(120, 61%, 77%)', 300: "hsl(120, 61%, 77%)",
400: 'hsl(120, 44%, 53%)', 400: "hsl(120, 44%, 53%)",
500: 'hsl(120, 59%, 30%)', 500: "hsl(120, 59%, 30%)",
600: 'hsl(120, 70%, 25%)', 600: "hsl(120, 70%, 25%)",
700: 'hsl(120, 75%, 16%)', 700: "hsl(120, 75%, 16%)",
800: 'hsl(120, 84%, 10%)', 800: "hsl(120, 84%, 10%)",
900: 'hsl(120, 87%, 6%)', 900: "hsl(120, 87%, 6%)",
}; };
export const orange = { export const orange = {
50: 'hsl(45, 100%, 97%)', 50: "hsl(45, 100%, 97%)",
100: 'hsl(45, 92%, 90%)', 100: "hsl(45, 92%, 90%)",
200: 'hsl(45, 94%, 80%)', 200: "hsl(45, 94%, 80%)",
300: 'hsl(45, 90%, 65%)', 300: "hsl(45, 90%, 65%)",
400: 'hsl(45, 90%, 40%)', 400: "hsl(45, 90%, 40%)",
500: 'hsl(45, 90%, 35%)', 500: "hsl(45, 90%, 35%)",
600: 'hsl(45, 91%, 25%)', 600: "hsl(45, 91%, 25%)",
700: 'hsl(45, 94%, 20%)', 700: "hsl(45, 94%, 20%)",
800: 'hsl(45, 95%, 16%)', 800: "hsl(45, 95%, 16%)",
900: 'hsl(45, 93%, 12%)', 900: "hsl(45, 93%, 12%)",
}; };
export const red = { export const red = {
50: 'hsl(0, 100%, 97%)', 50: "hsl(0, 100%, 97%)",
100: 'hsl(0, 92%, 90%)', 100: "hsl(0, 92%, 90%)",
200: 'hsl(0, 94%, 80%)', 200: "hsl(0, 94%, 80%)",
300: 'hsl(0, 90%, 65%)', 300: "hsl(0, 90%, 65%)",
400: 'hsl(0, 90%, 40%)', 400: "hsl(0, 90%, 40%)",
500: 'hsl(0, 90%, 30%)', 500: "hsl(0, 90%, 30%)",
600: 'hsl(0, 91%, 25%)', 600: "hsl(0, 91%, 25%)",
700: 'hsl(0, 94%, 18%)', 700: "hsl(0, 94%, 18%)",
800: 'hsl(0, 95%, 12%)', 800: "hsl(0, 95%, 12%)",
900: 'hsl(0, 93%, 6%)', 900: "hsl(0, 93%, 6%)",
}; };
export const getDesignTokens = (mode) => { export const getDesignTokens = (mode) => {
customShadows[1] = customShadows[1] =
mode === 'dark' 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.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'; : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px";
return { return {
palette: { palette: {
mode, mode,
primary: { primary: {
light: brand[200], light: brand[200],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
contrastText: brand[50], contrastText: brand[50],
...(mode === 'dark' && { ...(mode === "dark" && {
contrastText: brand[50], contrastText: brand[50],
light: brand[300], light: brand[300],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
}), }),
}, },
info: { info: {
light: brand[100], light: brand[100],
main: brand[300], main: brand[300],
dark: brand[600], dark: brand[600],
contrastText: gray[50], contrastText: gray[50],
...(mode === 'dark' && { ...(mode === "dark" && {
contrastText: brand[300], contrastText: brand[300],
light: brand[500], light: brand[500],
main: brand[700], main: brand[700],
dark: brand[900], dark: brand[900],
}), }),
}, },
warning: { warning: {
light: orange[300], light: orange[300],
main: orange[400], main: orange[400],
dark: orange[800], dark: orange[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: orange[400], light: orange[400],
main: orange[500], main: orange[500],
dark: orange[700], dark: orange[700],
}), }),
}, },
error: { error: {
light: red[300], light: red[300],
main: red[400], main: red[400],
dark: red[800], dark: red[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: red[400], light: red[400],
main: red[500], main: red[500],
dark: red[700], dark: red[700],
}), }),
}, },
success: { success: {
light: green[300], light: green[300],
main: green[400], main: green[400],
dark: green[800], dark: green[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: green[400], light: green[400],
main: green[500], main: green[500],
dark: green[700], dark: green[700],
}), }),
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), divider:
background: { mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
default: 'hsl(0, 0%, 99%)', background: {
paper: 'hsl(220, 35%, 97%)', default: "hsl(0, 0%, 99%)",
...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), paper: "hsl(220, 35%, 97%)",
}, ...(mode === "dark" && {
text: { default: gray[900],
primary: gray[800], paper: "hsl(220, 30%, 7%)",
secondary: gray[600], }),
warning: orange[400], },
...(mode === 'dark' && { text: {
primary: 'hsl(0, 0%, 100%)', primary: gray[800],
secondary: gray[400], secondary: gray[600],
}), warning: orange[400],
}, ...(mode === "dark" && {
action: { primary: "hsl(0, 0%, 100%)",
hover: alpha(gray[200], 0.2), secondary: gray[400],
selected: `${alpha(gray[200], 0.3)}`, }),
...(mode === 'dark' && { },
hover: alpha(gray[600], 0.2), action: {
selected: alpha(gray[600], 0.3), hover: alpha(gray[200], 0.2),
}), selected: `${alpha(gray[200], 0.3)}`,
}, ...(mode === "dark" && {
}, hover: alpha(gray[600], 0.2),
typography: { selected: alpha(gray[600], 0.3),
fontFamily: 'Inter, sans-serif', }),
h1: { },
fontSize: defaultTheme.typography.pxToRem(48), },
fontWeight: 600, typography: {
lineHeight: 1.2, fontFamily: "Gilory",
letterSpacing: -0.5, h1: {
}, fontSize: defaultTheme.typography.pxToRem(48),
h2: { fontWeight: 600,
fontSize: defaultTheme.typography.pxToRem(36), lineHeight: 1.2,
fontWeight: 600, letterSpacing: -0.5,
lineHeight: 1.2, },
}, h2: {
h3: { fontSize: defaultTheme.typography.pxToRem(36),
fontSize: defaultTheme.typography.pxToRem(30), fontWeight: 600,
lineHeight: 1.2, lineHeight: 1.2,
}, },
h4: { h3: {
fontSize: defaultTheme.typography.pxToRem(24), fontSize: defaultTheme.typography.pxToRem(30),
fontWeight: 600, lineHeight: 1.2,
lineHeight: 1.5, },
}, h4: {
h5: { fontSize: defaultTheme.typography.pxToRem(24),
fontSize: defaultTheme.typography.pxToRem(20), fontWeight: 600,
fontWeight: 600, lineHeight: 1.5,
}, },
h6: { h5: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600, fontWeight: 600,
}, },
subtitle1: { h6: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(18),
}, fontWeight: 600,
subtitle2: { },
fontSize: defaultTheme.typography.pxToRem(14), subtitle1: {
fontWeight: 500, fontSize: defaultTheme.typography.pxToRem(18),
}, },
body1: { subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
}, fontWeight: 500,
body2: { },
fontSize: defaultTheme.typography.pxToRem(14), body1: {
fontWeight: 400, fontSize: defaultTheme.typography.pxToRem(14),
}, },
caption: { body2: {
fontSize: defaultTheme.typography.pxToRem(12), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400, fontWeight: 400,
}, },
}, caption: {
shape: { fontSize: defaultTheme.typography.pxToRem(12),
borderRadius: 8, fontWeight: 400,
}, },
shadows: customShadows, },
}; shape: {
borderRadius: 8,
},
shadows: customShadows,
};
}; };
export const colorSchemes = { export const colorSchemes = {
light: { light: {
palette: { palette: {
primary: { primary: {
light: brand[200], light: brand[200],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
contrastText: brand[50], contrastText: brand[50],
}, },
info: { info: {
light: brand[100], light: brand[100],
main: brand[300], main: brand[300],
dark: brand[600], dark: brand[600],
contrastText: gray[50], contrastText: gray[50],
}, },
warning: { warning: {
light: orange[300], light: orange[300],
main: orange[400], main: orange[400],
dark: orange[800], dark: orange[800],
}, },
error: { error: {
light: red[300], light: red[300],
main: red[400], main: red[400],
dark: red[800], dark: red[800],
}, },
success: { success: {
light: green[300], light: green[300],
main: green[400], main: green[400],
dark: green[800], dark: green[800],
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: alpha(gray[300], 0.4), divider: alpha(gray[300], 0.4),
background: { background: {
default: 'hsl(0, 0%, 99%)', default: "hsl(0, 0%, 99%)",
paper: 'hsl(220, 35%, 97%)', paper: "hsl(220, 35%, 97%)",
}, },
text: { text: {
primary: gray[800], primary: gray[800],
secondary: gray[600], secondary: gray[600],
warning: orange[400], warning: orange[400],
}, },
action: { action: {
hover: alpha(gray[200], 0.2), hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`, selected: `${alpha(gray[200], 0.3)}`,
}, },
baseShadow: baseShadow:
'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
}, },
}, },
dark: { dark: {
palette: { palette: {
primary: { primary: {
contrastText: brand[50], contrastText: brand[50],
light: brand[300], light: brand[300],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
}, },
info: { info: {
contrastText: brand[300], contrastText: brand[300],
light: brand[500], light: brand[500],
main: brand[700], main: brand[700],
dark: brand[900], dark: brand[900],
}, },
warning: { warning: {
light: orange[400], light: orange[400],
main: orange[500], main: orange[500],
dark: orange[700], dark: orange[700],
}, },
error: { error: {
light: red[400], light: red[400],
main: red[500], main: red[500],
dark: red[700], dark: red[700],
}, },
success: { success: {
light: green[400], light: green[400],
main: green[500], main: green[500],
dark: green[700], dark: green[700],
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: alpha(gray[700], 0.6), divider: alpha(gray[700], 0.6),
background: { background: {
default: gray[900], default: gray[900],
paper: 'hsl(220, 30%, 7%)', paper: "hsl(220, 30%, 7%)",
}, },
text: { text: {
primary: 'hsl(0, 0%, 100%)', primary: "hsl(0, 0%, 100%)",
secondary: gray[400], secondary: gray[400],
}, },
action: { action: {
hover: alpha(gray[600], 0.2), hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3), selected: alpha(gray[600], 0.3),
}, },
baseShadow: baseShadow:
'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.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
}, },
}, },
}; };
export const typography = { export const typography = {
fontFamily: 'Inter, sans-serif', fontFamily: "Gilory",
h1: { h1: {
fontSize: defaultTheme.typography.pxToRem(48), fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.2, lineHeight: 1.2,
letterSpacing: -0.5, letterSpacing: -0.5,
}, },
h2: { h2: {
fontSize: defaultTheme.typography.pxToRem(36), fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.2, lineHeight: 1.2,
}, },
h3: { h3: {
fontSize: defaultTheme.typography.pxToRem(30), fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2, lineHeight: 1.2,
}, },
h4: { h4: {
fontSize: defaultTheme.typography.pxToRem(24), fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.5, lineHeight: 1.5,
}, },
h5: { h5: {
fontSize: defaultTheme.typography.pxToRem(20), fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600, fontWeight: 600,
}, },
h6: { h6: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600, fontWeight: 600,
}, },
subtitle1: { subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(18),
}, },
subtitle2: { subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500, fontWeight: 500,
}, },
body1: { body1: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
}, },
body2: { body2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400, fontWeight: 400,
}, },
caption: { caption: {
fontSize: defaultTheme.typography.pxToRem(12), fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400, fontWeight: 400,
}, },
}; };
export const shape = { export const shape = {
borderRadius: 8, borderRadius: 8,
}; };
const defaultShadows = [ const defaultShadows = [
'none', "none",
'var(--template-palette-baseShadow)', "var(--template-palette-baseShadow)",
...defaultTheme.shadows.slice(2), ...defaultTheme.shadows.slice(2),
]; ];
export const shadows = defaultShadows; 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' { declare module "@mui/material/Paper" {
interface PaperPropsVariantOverrides { interface PaperPropsVariantOverrides {
highlighted: true; highlighted: true;
} }
} }
declare module '@mui/material/styles/createPalette' { declare module "@mui/material/styles/createPalette" {
interface ColorRange { interface ColorRange {
50: string; 50: string;
100: string; 100: string;
200: string; 200: string;
300: string; 300: string;
400: string; 400: string;
500: string; 500: string;
600: string; 600: string;
700: string; 700: string;
800: string; 800: string;
900: string; 900: string;
} }
interface PaletteColor extends ColorRange {} interface PaletteColor extends ColorRange {}
interface Palette { interface Palette {
baseShadow: string; baseShadow: string;
} }
} }
const defaultTheme = createTheme(); const defaultTheme = createTheme();
@ -31,373 +31,380 @@ const defaultTheme = createTheme();
const customShadows: Shadows = [...defaultTheme.shadows]; const customShadows: Shadows = [...defaultTheme.shadows];
export const brand = { export const brand = {
50: 'hsl(210, 100%, 95%)', 50: "hsl(210, 100%, 95%)",
100: 'hsl(210, 100%, 92%)', 100: "hsl(210, 100%, 92%)",
200: 'hsl(210, 100%, 80%)', 200: "hsl(210, 100%, 80%)",
300: 'hsl(210, 100%, 65%)', 300: "hsl(210, 100%, 65%)",
400: 'hsl(210, 98%, 48%)', 400: "hsl(210, 98%, 48%)",
500: 'hsl(210, 98%, 42%)', 500: "hsl(210, 98%, 42%)",
600: 'hsl(210, 98%, 55%)', 600: "hsl(210, 98%, 55%)",
700: 'hsl(210, 100%, 35%)', 700: "hsl(210, 100%, 35%)",
800: 'hsl(210, 100%, 16%)', 800: "hsl(210, 100%, 16%)",
900: 'hsl(210, 100%, 21%)', 900: "hsl(210, 100%, 21%)",
}; };
export const gray = { export const gray = {
50: 'hsl(220, 35%, 97%)', 50: "hsl(220, 35%, 97%)",
100: 'hsl(220, 30%, 94%)', 100: "hsl(220, 30%, 94%)",
200: 'hsl(220, 20%, 88%)', 200: "hsl(220, 20%, 88%)",
300: 'hsl(220, 20%, 80%)', 300: "hsl(220, 20%, 80%)",
400: 'hsl(220, 20%, 65%)', 400: "hsl(220, 20%, 65%)",
500: 'hsl(220, 20%, 42%)', 500: "hsl(220, 20%, 42%)",
600: 'hsl(220, 20%, 35%)', 600: "hsl(220, 20%, 35%)",
700: 'hsl(220, 20%, 25%)', 700: "hsl(220, 20%, 25%)",
800: 'hsl(220, 30%, 6%)', 800: "hsl(220, 30%, 6%)",
900: 'hsl(220, 35%, 3%)', 900: "hsl(220, 35%, 3%)",
}; };
export const green = { export const green = {
50: 'hsl(120, 80%, 98%)', 50: "hsl(120, 80%, 98%)",
100: 'hsl(120, 75%, 94%)', 100: "hsl(120, 75%, 94%)",
200: 'hsl(120, 75%, 87%)', 200: "hsl(120, 75%, 87%)",
300: 'hsl(120, 61%, 77%)', 300: "hsl(120, 61%, 77%)",
400: 'hsl(120, 44%, 53%)', 400: "hsl(120, 44%, 53%)",
500: 'hsl(120, 59%, 30%)', 500: "hsl(120, 59%, 30%)",
600: 'hsl(120, 70%, 25%)', 600: "hsl(120, 70%, 25%)",
700: 'hsl(120, 75%, 16%)', 700: "hsl(120, 75%, 16%)",
800: 'hsl(120, 84%, 10%)', 800: "hsl(120, 84%, 10%)",
900: 'hsl(120, 87%, 6%)', 900: "hsl(120, 87%, 6%)",
}; };
export const orange = { export const orange = {
50: 'hsl(45, 100%, 97%)', 50: "hsl(45, 100%, 97%)",
100: 'hsl(45, 92%, 90%)', 100: "hsl(45, 92%, 90%)",
200: 'hsl(45, 94%, 80%)', 200: "hsl(45, 94%, 80%)",
300: 'hsl(45, 90%, 65%)', 300: "hsl(45, 90%, 65%)",
400: 'hsl(45, 90%, 40%)', 400: "hsl(45, 90%, 40%)",
500: 'hsl(45, 90%, 35%)', 500: "hsl(45, 90%, 35%)",
600: 'hsl(45, 91%, 25%)', 600: "hsl(45, 91%, 25%)",
700: 'hsl(45, 94%, 20%)', 700: "hsl(45, 94%, 20%)",
800: 'hsl(45, 95%, 16%)', 800: "hsl(45, 95%, 16%)",
900: 'hsl(45, 93%, 12%)', 900: "hsl(45, 93%, 12%)",
}; };
export const red = { export const red = {
50: 'hsl(0, 100%, 97%)', 50: "hsl(0, 100%, 97%)",
100: 'hsl(0, 92%, 90%)', 100: "hsl(0, 92%, 90%)",
200: 'hsl(0, 94%, 80%)', 200: "hsl(0, 94%, 80%)",
300: 'hsl(0, 90%, 65%)', 300: "hsl(0, 90%, 65%)",
400: 'hsl(0, 90%, 40%)', 400: "hsl(0, 90%, 40%)",
500: 'hsl(0, 90%, 30%)', 500: "hsl(0, 90%, 30%)",
600: 'hsl(0, 91%, 25%)', 600: "hsl(0, 91%, 25%)",
700: 'hsl(0, 94%, 18%)', 700: "hsl(0, 94%, 18%)",
800: 'hsl(0, 95%, 12%)', 800: "hsl(0, 95%, 12%)",
900: 'hsl(0, 93%, 6%)', 900: "hsl(0, 93%, 6%)",
}; };
export const getDesignTokens = (mode: PaletteMode) => { export const getDesignTokens = (mode: PaletteMode) => {
customShadows[1] = customShadows[1] =
mode === 'dark' 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.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'; : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px";
return { return {
palette: { palette: {
mode, mode,
primary: { primary: {
light: brand[200], light: brand[200],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
contrastText: brand[50], contrastText: brand[50],
...(mode === 'dark' && { ...(mode === "dark" && {
contrastText: brand[50], contrastText: brand[50],
light: brand[300], light: brand[300],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
}), }),
}, },
info: { info: {
light: brand[100], light: brand[100],
main: brand[300], main: brand[300],
dark: brand[600], dark: brand[600],
contrastText: gray[50], contrastText: gray[50],
...(mode === 'dark' && { ...(mode === "dark" && {
contrastText: brand[300], contrastText: brand[300],
light: brand[500], light: brand[500],
main: brand[700], main: brand[700],
dark: brand[900], dark: brand[900],
}), }),
}, },
warning: { warning: {
light: orange[300], light: orange[300],
main: orange[400], main: orange[400],
dark: orange[800], dark: orange[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: orange[400], light: orange[400],
main: orange[500], main: orange[500],
dark: orange[700], dark: orange[700],
}), }),
}, },
error: { error: {
light: red[300], light: red[300],
main: red[400], main: red[400],
dark: red[800], dark: red[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: red[400], light: red[400],
main: red[500], main: red[500],
dark: red[700], dark: red[700],
}), }),
}, },
success: { success: {
light: green[300], light: green[300],
main: green[400], main: green[400],
dark: green[800], dark: green[800],
...(mode === 'dark' && { ...(mode === "dark" && {
light: green[400], light: green[400],
main: green[500], main: green[500],
dark: green[700], dark: green[700],
}), }),
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), divider:
background: { mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
default: 'hsl(0, 0%, 99%)', background: {
paper: 'hsl(220, 35%, 97%)', default: "hsl(0, 0%, 99%)",
...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), paper: "hsl(220, 35%, 97%)",
}, ...(mode === "dark" && {
text: { default: gray[900],
primary: gray[800], paper: "hsl(220, 30%, 7%)",
secondary: gray[600], }),
warning: orange[400], },
...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), text: {
}, primary: gray[800],
action: { secondary: gray[600],
hover: alpha(gray[200], 0.2), warning: orange[400],
selected: `${alpha(gray[200], 0.3)}`, ...(mode === "dark" && {
...(mode === 'dark' && { primary: "hsl(0, 0%, 100%)",
hover: alpha(gray[600], 0.2), secondary: gray[400],
selected: alpha(gray[600], 0.3), }),
}), },
}, action: {
}, hover: alpha(gray[200], 0.2),
typography: { selected: `${alpha(gray[200], 0.3)}`,
fontFamily: 'Inter, sans-serif', ...(mode === "dark" && {
h1: { hover: alpha(gray[600], 0.2),
fontSize: defaultTheme.typography.pxToRem(48), selected: alpha(gray[600], 0.3),
fontWeight: 600, }),
lineHeight: 1.2, },
letterSpacing: -0.5, },
}, typography: {
h2: { fontFamily: "Gilroy",
fontSize: defaultTheme.typography.pxToRem(36), h1: {
fontWeight: 600, fontSize: defaultTheme.typography.pxToRem(48),
lineHeight: 1.2, fontWeight: 600,
}, lineHeight: 1.2,
h3: { letterSpacing: -0.5,
fontSize: defaultTheme.typography.pxToRem(30), },
lineHeight: 1.2, h2: {
}, fontSize: defaultTheme.typography.pxToRem(36),
h4: { fontWeight: 600,
fontSize: defaultTheme.typography.pxToRem(24), lineHeight: 1.2,
fontWeight: 600, },
lineHeight: 1.5, h3: {
}, fontSize: defaultTheme.typography.pxToRem(30),
h5: { lineHeight: 1.2,
fontSize: defaultTheme.typography.pxToRem(20), },
fontWeight: 600, h4: {
}, fontSize: defaultTheme.typography.pxToRem(24),
h6: { fontWeight: 600,
fontSize: defaultTheme.typography.pxToRem(18), lineHeight: 1.5,
fontWeight: 600, },
}, h5: {
subtitle1: { fontSize: defaultTheme.typography.pxToRem(20),
fontSize: defaultTheme.typography.pxToRem(18), fontWeight: 600,
}, },
subtitle2: { h6: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 500, fontWeight: 600,
}, },
body1: { subtitle1: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(18),
}, },
body2: { subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400, fontWeight: 500,
}, },
caption: { body1: {
fontSize: defaultTheme.typography.pxToRem(12), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400, },
}, body2: {
}, fontSize: defaultTheme.typography.pxToRem(14),
shape: { fontWeight: 400,
borderRadius: 8, },
}, caption: {
shadows: customShadows, fontSize: defaultTheme.typography.pxToRem(12),
}; fontWeight: 400,
},
},
shape: {
borderRadius: 8,
},
shadows: customShadows,
};
}; };
export const colorSchemes = { export const colorSchemes = {
light: { light: {
palette: { palette: {
primary: { primary: {
light: brand[200], light: brand[200],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
contrastText: brand[50], contrastText: brand[50],
}, },
info: { info: {
light: brand[100], light: brand[100],
main: brand[300], main: brand[300],
dark: brand[600], dark: brand[600],
contrastText: gray[50], contrastText: gray[50],
}, },
warning: { warning: {
light: orange[300], light: orange[300],
main: orange[400], main: orange[400],
dark: orange[800], dark: orange[800],
}, },
error: { error: {
light: red[300], light: red[300],
main: red[400], main: red[400],
dark: red[800], dark: red[800],
}, },
success: { success: {
light: green[300], light: green[300],
main: green[400], main: green[400],
dark: green[800], dark: green[800],
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: alpha(gray[300], 0.4), divider: alpha(gray[300], 0.4),
background: { background: {
default: 'hsl(0, 0%, 99%)', default: "hsl(0, 0%, 99%)",
paper: 'hsl(220, 35%, 97%)', paper: "hsl(220, 35%, 97%)",
}, },
text: { text: {
primary: gray[800], primary: gray[800],
secondary: gray[600], secondary: gray[600],
warning: orange[400], warning: orange[400],
}, },
action: { action: {
hover: alpha(gray[200], 0.2), hover: alpha(gray[200], 0.2),
selected: `${alpha(gray[200], 0.3)}`, selected: `${alpha(gray[200], 0.3)}`,
}, },
baseShadow: baseShadow:
'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
}, },
}, },
dark: { dark: {
palette: { palette: {
primary: { primary: {
contrastText: brand[50], contrastText: brand[50],
light: brand[300], light: brand[300],
main: brand[400], main: brand[400],
dark: brand[700], dark: brand[700],
}, },
info: { info: {
contrastText: brand[300], contrastText: brand[300],
light: brand[500], light: brand[500],
main: brand[700], main: brand[700],
dark: brand[900], dark: brand[900],
}, },
warning: { warning: {
light: orange[400], light: orange[400],
main: orange[500], main: orange[500],
dark: orange[700], dark: orange[700],
}, },
error: { error: {
light: red[400], light: red[400],
main: red[500], main: red[500],
dark: red[700], dark: red[700],
}, },
success: { success: {
light: green[400], light: green[400],
main: green[500], main: green[500],
dark: green[700], dark: green[700],
}, },
grey: { grey: {
...gray, ...gray,
}, },
divider: alpha(gray[700], 0.6), divider: alpha(gray[700], 0.6),
background: { background: {
default: gray[900], default: gray[900],
paper: 'hsl(220, 30%, 7%)', paper: "hsl(220, 30%, 7%)",
}, },
text: { text: {
primary: 'hsl(0, 0%, 100%)', primary: "hsl(0, 0%, 100%)",
secondary: gray[400], secondary: gray[400],
}, },
action: { action: {
hover: alpha(gray[600], 0.2), hover: alpha(gray[600], 0.2),
selected: alpha(gray[600], 0.3), selected: alpha(gray[600], 0.3),
}, },
baseShadow: baseShadow:
'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.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
}, },
}, },
}; };
export const typography = { export const typography = {
fontFamily: 'Inter, sans-serif', fontFamily: "Gilroy",
h1: { h1: {
fontSize: defaultTheme.typography.pxToRem(48), fontSize: defaultTheme.typography.pxToRem(48),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.2, lineHeight: 1.2,
letterSpacing: -0.5, letterSpacing: -0.5,
}, },
h2: { h2: {
fontSize: defaultTheme.typography.pxToRem(36), fontSize: defaultTheme.typography.pxToRem(36),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.2, lineHeight: 1.2,
}, },
h3: { h3: {
fontSize: defaultTheme.typography.pxToRem(30), fontSize: defaultTheme.typography.pxToRem(30),
lineHeight: 1.2, lineHeight: 1.2,
}, },
h4: { h4: {
fontSize: defaultTheme.typography.pxToRem(24), fontSize: defaultTheme.typography.pxToRem(24),
fontWeight: 600, fontWeight: 600,
lineHeight: 1.5, lineHeight: 1.5,
}, },
h5: { h5: {
fontSize: defaultTheme.typography.pxToRem(20), fontSize: defaultTheme.typography.pxToRem(20),
fontWeight: 600, fontWeight: 600,
}, },
h6: { h6: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(18),
fontWeight: 600, fontWeight: 600,
}, },
subtitle1: { subtitle1: {
fontSize: defaultTheme.typography.pxToRem(18), fontSize: defaultTheme.typography.pxToRem(18),
}, },
subtitle2: { subtitle2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 500, fontWeight: 500,
}, },
body1: { body1: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
}, },
body2: { body2: {
fontSize: defaultTheme.typography.pxToRem(14), fontSize: defaultTheme.typography.pxToRem(14),
fontWeight: 400, fontWeight: 400,
}, },
caption: { caption: {
fontSize: defaultTheme.typography.pxToRem(12), fontSize: defaultTheme.typography.pxToRem(12),
fontWeight: 400, fontWeight: 400,
}, },
}; };
export const shape = { export const shape = {
borderRadius: 8, borderRadius: 8,
}; };
// @ts-ignore // @ts-ignore
const defaultShadows: Shadows = [ const defaultShadows: Shadows = [
'none', "none",
'var(--template-palette-baseShadow)', "var(--template-palette-baseShadow)",
...defaultTheme.shadows.slice(2), ...defaultTheme.shadows.slice(2),
]; ];
export const shadows = defaultShadows; export const shadows = defaultShadows;