commit new changes
This commit is contained in:
jaanvi
parent
a105ad3ab4
commit
35d5e9d980
7
package-lock.json
generated
7
package-lock.json
generated
|
|
@ -26,6 +26,7 @@
|
|||
"clsx": "^2.1.1",
|
||||
"cra-template-typescript": "1.2.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"highcharts": "^12.1.2",
|
||||
"hooks": "file:@mui/x-charts/hooks",
|
||||
"mui-phone-number": "^3.0.3",
|
||||
"mui-tel-input": "^7.0.0",
|
||||
|
|
@ -9944,6 +9945,12 @@
|
|||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/highcharts": {
|
||||
"version": "12.1.2",
|
||||
"resolved": "https://registry.npmjs.org/highcharts/-/highcharts-12.1.2.tgz",
|
||||
"integrity": "sha512-paZ72q1um0zZT1sS+O/3JfXVSOLPmZ0zlo8SgRc0rEplPFPQUPc4VpkgQS8IUTueeOBgIWwVpAWyC9tBYbQ0kg==",
|
||||
"license": "https://www.highcharts.com/license"
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"clsx": "^2.1.1",
|
||||
"cra-template-typescript": "1.2.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"highcharts": "^12.1.2",
|
||||
"hooks": "file:@mui/x-charts/hooks",
|
||||
"mui-phone-number": "^3.0.3",
|
||||
"mui-tel-input": "^7.0.0",
|
||||
|
|
|
|||
|
|
@ -13,14 +13,22 @@ import { useForm, Controller } from "react-hook-form";
|
|||
interface AddEditCategoryModalProps {
|
||||
open: boolean;
|
||||
handleClose: () => void;
|
||||
handleUpdate: (id: string, name: string, role: string) => void;
|
||||
handleUpdate: (
|
||||
id: string,
|
||||
name: string,
|
||||
email: string,
|
||||
phone: string,
|
||||
registeredAddress: string
|
||||
) => void;
|
||||
editRow: any;
|
||||
handleAdd: Function;
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
category: string;
|
||||
role: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
registeredAddress: string;
|
||||
}
|
||||
|
||||
const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
|
||||
|
|
@ -28,6 +36,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
|
|||
handleClose,
|
||||
editRow,
|
||||
handleUpdate,
|
||||
handleAdd,
|
||||
}) => {
|
||||
const {
|
||||
control,
|
||||
|
|
@ -37,15 +46,30 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
|
|||
reset,
|
||||
} = useForm<FormData>({
|
||||
defaultValues: {
|
||||
category: "",
|
||||
name: "",
|
||||
role: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
registeredAddress: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
if (editRow) {
|
||||
handleUpdate(editRow.id, data.name, data.role);
|
||||
handleUpdate(
|
||||
editRow.id,
|
||||
data.name,
|
||||
data.email,
|
||||
data.phone,
|
||||
data.registeredAddress
|
||||
);
|
||||
} else {
|
||||
// Call handleAdd if adding new admin
|
||||
handleAdd(
|
||||
data.name,
|
||||
data.email,
|
||||
data.phone,
|
||||
data.registeredAddress
|
||||
);
|
||||
}
|
||||
handleClose();
|
||||
reset();
|
||||
|
|
@ -53,9 +77,11 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
|
|||
|
||||
useEffect(() => {
|
||||
if (editRow) {
|
||||
setValue("category", editRow.name);
|
||||
setValue("name", editRow.name);
|
||||
setValue("role", editRow.role);
|
||||
setValue("email", editRow.role);
|
||||
setValue("phone", editRow.phone);
|
||||
setValue("email", editRow.email);
|
||||
setValue("registeredAddress", editRow.registeredAddress);
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
|
|
@ -73,9 +99,8 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
|
|||
onSubmit: handleSubmit(onSubmit),
|
||||
}}
|
||||
>
|
||||
<DialogTitle>{editRow ? "Edit" : "Add"} Category</DialogTitle>
|
||||
<DialogTitle>{editRow ? "Edit" : "Add"} Admin</DialogTitle>
|
||||
<DialogContent>
|
||||
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
|
|
@ -99,22 +124,68 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
|
|||
/>
|
||||
|
||||
<Controller
|
||||
name="role"
|
||||
name="email"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Role is required",
|
||||
required: "Email is required",
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
margin="dense"
|
||||
label="Role"
|
||||
label="Email"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.role}
|
||||
helperText={errors.role?.message}
|
||||
disabled
|
||||
error={!!errors.email}
|
||||
helperText={errors.email?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="phone"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Phone no. is required",
|
||||
pattern: {
|
||||
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
|
||||
message: "Invalid Phone Number",
|
||||
},
|
||||
maxLength:{
|
||||
value:10,
|
||||
message:"Phone no must be 10 digits"
|
||||
}
|
||||
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
margin="dense"
|
||||
label="Phone"
|
||||
type="tel"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.phone}
|
||||
helperText={errors.phone?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="registeredAddress"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Address is required",
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
margin="dense"
|
||||
label="Address"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.registeredAddress}
|
||||
helperText={errors.registeredAddress?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,225 +1,260 @@
|
|||
import * as React from "react"
|
||||
import { styled } from "@mui/material/styles"
|
||||
import Table from "@mui/material/Table"
|
||||
import TableBody from "@mui/material/TableBody"
|
||||
import TableCell, { tableCellClasses } from "@mui/material/TableCell"
|
||||
import TableContainer from "@mui/material/TableContainer"
|
||||
import TableHead from "@mui/material/TableHead"
|
||||
import TableRow from "@mui/material/TableRow"
|
||||
import Paper, { paperClasses } from "@mui/material/Paper"
|
||||
import { deleteAdmin } from "../../redux/slices/adminSlice"
|
||||
import { useDispatch } from "react-redux"
|
||||
import * as React from "react";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableCell, { tableCellClasses } from "@mui/material/TableCell";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableHead from "@mui/material/TableHead";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Paper, { paperClasses } from "@mui/material/Paper";
|
||||
import { adminList, deleteAdmin } from "../../redux/slices/adminSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
dividerClasses,
|
||||
IconButton,
|
||||
listClasses,
|
||||
Menu,
|
||||
} from "@mui/material"
|
||||
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"
|
||||
import DeleteModal from "../Modals/DeleteModal/DeleteModal"
|
||||
import { AppDispatch } from "../../redux/store/store"
|
||||
Box,
|
||||
Button,
|
||||
dividerClasses,
|
||||
IconButton,
|
||||
listClasses,
|
||||
Menu,
|
||||
} from "@mui/material";
|
||||
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
||||
import DeleteModal from "../Modals/DeleteModal/DeleteModal";
|
||||
import { AppDispatch } from "../../redux/store/store";
|
||||
import ViewModal from "../Modals/ViewModal/ViewModal";
|
||||
|
||||
// Styled components for customization
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
backgroundColor: " #1565c0",
|
||||
color: theme.palette.common.white,
|
||||
},
|
||||
[`&.${tableCellClasses.body}`]: {
|
||||
fontSize: 14,
|
||||
},
|
||||
}))
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
backgroundColor: " #1565c0",
|
||||
color: theme.palette.common.white,
|
||||
},
|
||||
[`&.${tableCellClasses.body}`]: {
|
||||
fontSize: 14,
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
||||
"&:nth-of-type(odd)": {
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
},
|
||||
"&:last-child td, &:last-child th": {
|
||||
border: 0,
|
||||
},
|
||||
}))
|
||||
"&:nth-of-type(odd)": {
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
},
|
||||
"&:last-child td, &:last-child th": {
|
||||
border: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
export interface Column {
|
||||
id: string
|
||||
label: string
|
||||
align?: "left" | "center" | "right"
|
||||
id: string;
|
||||
label: string;
|
||||
align?: "left" | "center" | "right";
|
||||
}
|
||||
|
||||
|
||||
interface Row {
|
||||
[key: string]: any
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
|
||||
interface CustomTableProps {
|
||||
columns: Column[]
|
||||
rows: Row[]
|
||||
setDeleteModal: Function
|
||||
setRowData: Function
|
||||
setModalOpen: Function
|
||||
deleteModal: boolean
|
||||
columns: Column[];
|
||||
rows: Row[];
|
||||
setDeleteModal: Function;
|
||||
setRowData: Function;
|
||||
setModalOpen: Function;
|
||||
viewModal: boolean;
|
||||
setViewModal: Function;
|
||||
deleteModal: boolean;
|
||||
}
|
||||
|
||||
|
||||
const CustomTable: React.FC<CustomTableProps> = ({
|
||||
columns,
|
||||
rows,
|
||||
setDeleteModal,
|
||||
deleteModal,
|
||||
setRowData,
|
||||
setModalOpen,
|
||||
columns,
|
||||
rows,
|
||||
setDeleteModal,
|
||||
deleteModal,
|
||||
viewModal,
|
||||
setRowData,
|
||||
setViewModal,
|
||||
setModalOpen,
|
||||
}) => {
|
||||
// console.log("columnsss", columns, rows)
|
||||
const dispatch = useDispatch<AppDispatch>()
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
|
||||
const [selectedRow, setSelectedRow] = React.useState<Row | null>(null)
|
||||
const open = Boolean(anchorEl)
|
||||
// console.log("columnsss", columns, rows)
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
|
||||
setAnchorEl(event.currentTarget)
|
||||
setSelectedRow(row) // Ensure the row data is set
|
||||
}
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
setSelectedRow(row); // Ensure the row data is set
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null)
|
||||
}
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const isImage = (value: any) => {
|
||||
if (typeof value === "string") {
|
||||
return value.startsWith("http") || value.startsWith("data:image") // Check for URL or base64 image
|
||||
}
|
||||
return false
|
||||
}
|
||||
const isImage = (value: any) => {
|
||||
if (typeof value === "string") {
|
||||
return value.startsWith("http") || value.startsWith("data:image"); // Check for URL or base64 image
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleDeleteButton = (id: string | undefined) => {
|
||||
if (!id) console.error("ID not found", id)
|
||||
const handleDeleteButton = (id: string | undefined) => {
|
||||
if (!id) console.error("ID not found", id);
|
||||
|
||||
dispatch(deleteAdmin(id || ""))
|
||||
setDeleteModal(false) // Close the modal only after deletion
|
||||
handleClose()
|
||||
}
|
||||
dispatch(deleteAdmin(id || ""));
|
||||
setDeleteModal(false); // Close the modal only after deletion
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: 700 }} aria-label="customized table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{columns.map((column) => (
|
||||
<StyledTableCell
|
||||
key={column.id}
|
||||
align={column.align || "left"}
|
||||
>
|
||||
{column.label}
|
||||
</StyledTableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((row, rowIndex) => (
|
||||
<StyledTableRow key={rowIndex}>
|
||||
{columns.map((column) => (
|
||||
<StyledTableCell
|
||||
key={column.id}
|
||||
align={column.align || "left"}
|
||||
>
|
||||
{isImage(row[column.id]) ? (
|
||||
<img
|
||||
src={row[column.id]}
|
||||
alt="Row "
|
||||
style={{
|
||||
width: "50px",
|
||||
height: "50px",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
) : column.id !== "action" ? (
|
||||
row[column.id]
|
||||
) : (
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
handleClick(e, row)
|
||||
setRowData(row) // Store the selected row
|
||||
}}
|
||||
>
|
||||
<MoreVertRoundedIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</StyledTableCell>
|
||||
))}
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{open && (
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
sx={{
|
||||
[`& .${listClasses.root}`]: {
|
||||
padding: "4px",
|
||||
},
|
||||
[`& .${paperClasses.root}`]: {
|
||||
padding: 0,
|
||||
},
|
||||
[`& .${dividerClasses.root}`]: {
|
||||
margin: "4px -4px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => setModalOpen(true)}
|
||||
color="primary"
|
||||
sx={{
|
||||
justifyContent: "flex-start",
|
||||
py: 0,
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
const handleViewButton = (id: string | undefined) => {
|
||||
if (!id) console.error("ID not found", id);
|
||||
setViewModal(false);
|
||||
};
|
||||
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setDeleteModal(true)
|
||||
}}
|
||||
color="error"
|
||||
sx={{
|
||||
justifyContent: "flex-start",
|
||||
py: 0,
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
{deleteModal && (
|
||||
<DeleteModal
|
||||
handleDelete={() =>
|
||||
handleDeleteButton(selectedRow?.id)
|
||||
}
|
||||
open={deleteModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
id={selectedRow?.id}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Menu>
|
||||
)}
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: 700 }} aria-label="customized table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{columns.map((column) => (
|
||||
<StyledTableCell
|
||||
key={column.id}
|
||||
align={column.align || "left"}
|
||||
>
|
||||
{column.label}
|
||||
</StyledTableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((row, rowIndex) => (
|
||||
<StyledTableRow key={rowIndex}>
|
||||
{columns.map((column) => (
|
||||
<StyledTableCell
|
||||
key={column.id}
|
||||
align={column.align || "left"}
|
||||
>
|
||||
{isImage(row[column.id]) ? (
|
||||
<img
|
||||
src={row[column.id]}
|
||||
alt="Row "
|
||||
style={{
|
||||
width: "50px",
|
||||
height: "50px",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
) : column.id !== "action" ? (
|
||||
row[column.id]
|
||||
) : (
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
handleClick(e, row);
|
||||
setRowData(row); // Store the selected row
|
||||
}}
|
||||
>
|
||||
<MoreVertRoundedIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</StyledTableCell>
|
||||
))}
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{open && (
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
sx={{
|
||||
[`& .${listClasses.root}`]: {
|
||||
padding: "4px",
|
||||
},
|
||||
[`& .${paperClasses.root}`]: {
|
||||
padding: 0,
|
||||
},
|
||||
[`& .${dividerClasses.root}`]: {
|
||||
margin: "4px -4px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setViewModal(true);
|
||||
}}
|
||||
color="primary"
|
||||
sx={{
|
||||
justifyContent: "flex-start",
|
||||
py: 0,
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
{viewModal && (
|
||||
<ViewModal
|
||||
handleView={() =>
|
||||
handleViewButton(selectedRow?.id)
|
||||
}
|
||||
open={viewModal}
|
||||
setViewModal={setViewModal}
|
||||
id={selectedRow?.id}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => setModalOpen(true)}
|
||||
color="primary"
|
||||
sx={{
|
||||
justifyContent: "flex-start",
|
||||
py: 0,
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
|
||||
export default CustomTable
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteModal(true);
|
||||
}}
|
||||
color="error"
|
||||
sx={{
|
||||
justifyContent: "flex-start",
|
||||
py: 0,
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
{deleteModal && (
|
||||
<DeleteModal
|
||||
handleDelete={() =>
|
||||
handleDeleteButton(selectedRow?.id)
|
||||
}
|
||||
open={deleteModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
id={selectedRow?.id}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Menu>
|
||||
)}
|
||||
</TableContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomTable;
|
||||
|
|
|
|||
35
src/components/LogOut/logOutfunc.tsx
Normal file
35
src/components/LogOut/logOutfunc.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Logout.tsx
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import LogoutModal from "../Modals/LogoutModal/LogoutModal";
|
||||
|
||||
interface LogoutProps {
|
||||
setLogoutModal: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
logoutModal: boolean;
|
||||
}
|
||||
|
||||
const Logout: React.FC<LogoutProps> = ({ setLogoutModal, logoutModal }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handlelogout = () => {
|
||||
localStorage.clear();
|
||||
navigate("/auth/login");
|
||||
toast.success("Logged out successfully");
|
||||
setLogoutModal(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{logoutModal && (
|
||||
<LogoutModal
|
||||
handlelogout={handlelogout}
|
||||
open={logoutModal}
|
||||
setLogoutModal={setLogoutModal}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logout;
|
||||
|
|
@ -17,11 +17,12 @@ const baseMenuItems = [
|
|||
icon: <HomeRoundedIcon />,
|
||||
url: "/panel/dashboard",
|
||||
},
|
||||
{
|
||||
text: "Vehicles",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/vehicles",
|
||||
},
|
||||
|
||||
// {
|
||||
// text: "Vehicles",
|
||||
// icon: <AnalyticsRoundedIcon />,
|
||||
// url: "/panel/vehicles",
|
||||
// },
|
||||
//created by Eknnor and Jaanvi
|
||||
];
|
||||
|
||||
|
|
|
|||
80
src/components/Modals/LogoutModal/LogoutModal.tsx
Normal file
80
src/components/Modals/LogoutModal/LogoutModal.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import { Box, Button, Modal, Typography } from "@mui/material";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
setLogoutModal: Function;
|
||||
handlelogout: any;
|
||||
};
|
||||
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 330,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: 1.5,
|
||||
boxShadow: 24,
|
||||
p: 3,
|
||||
};
|
||||
|
||||
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };
|
||||
|
||||
export default function LogoutModal({
|
||||
open,
|
||||
setLogoutModal,
|
||||
handlelogout,
|
||||
}: Props) {
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
align="center"
|
||||
>
|
||||
Logout
|
||||
</Typography>
|
||||
<Typography
|
||||
id="modal-modal-description"
|
||||
sx={{ mt: 2 }}
|
||||
align="center"
|
||||
>
|
||||
Are you sure you want to Logout?
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mt: 4,
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
type="button"
|
||||
sx={btnStyle}
|
||||
onClick={() => setLogoutModal(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="button"
|
||||
color="primary"
|
||||
sx={btnStyle}
|
||||
onClick={() => handlelogout()}
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
82
src/components/Modals/ViewModal/ViewModal.tsx
Normal file
82
src/components/Modals/ViewModal/ViewModal.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import { Box, Button, Modal, Typography } from "@mui/material";
|
||||
import { AppDispatch, RootState } from "../../../redux/store/store";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
setViewModal: Function;
|
||||
handleView: (id: string | undefined) => void;
|
||||
id?: string | undefined;
|
||||
};
|
||||
;
|
||||
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 330,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: 1.5,
|
||||
boxShadow: 24,
|
||||
p: 3,
|
||||
};
|
||||
|
||||
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize", alignItems: "center" };
|
||||
|
||||
export default function ViewModal({
|
||||
open,
|
||||
setViewModal,
|
||||
id, // Selected user's ID
|
||||
}: Props) {
|
||||
const { admins } = useSelector((state: RootState) => state.adminReducer);
|
||||
const [selectedAdmin, setSelectedAdmin] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
const admin = admins.find((admin) => admin.id === id);
|
||||
setSelectedAdmin(admin || null);
|
||||
}
|
||||
}, [id, admins]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
align="center"
|
||||
>
|
||||
Details of {selectedAdmin?.name}
|
||||
</Typography>
|
||||
{selectedAdmin ? (
|
||||
<>
|
||||
<Typography align="center">Name: {selectedAdmin?.name}</Typography>
|
||||
<Typography align="center">Email: {selectedAdmin?.email}</Typography>
|
||||
<Typography align="center">Phone: {selectedAdmin?.phone}</Typography>
|
||||
<Typography align="center">Address: {selectedAdmin?.registeredAddress}</Typography>
|
||||
</>
|
||||
) : (
|
||||
<Typography align="center">No admin found with this ID</Typography>
|
||||
)}
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 4, gap: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
type="button"
|
||||
sx={btnStyle}
|
||||
onClick={() => setViewModal(false)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
|||
import MenuButton from "../MenuButton";
|
||||
import { Avatar } from "@mui/material";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import Logout from "../LogOut/logOutfunc";
|
||||
|
||||
const MenuItem = styled(MuiMenuItem)({
|
||||
margin: "2px 0",
|
||||
|
|
@ -20,6 +20,7 @@ const MenuItem = styled(MuiMenuItem)({
|
|||
|
||||
export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event?.currentTarget);
|
||||
|
|
@ -32,17 +33,12 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
|
|||
//Made a navigation page for the profile page
|
||||
const navigate = useNavigate();
|
||||
const handleProfile = () => {
|
||||
navigate("/auth/profile");
|
||||
navigate("/panel/profile");
|
||||
};
|
||||
|
||||
//Eknoor singh and jaanvi
|
||||
//jaanvi
|
||||
//date:- 13-Feb-2025
|
||||
//Implemented logout functionality which was static previously
|
||||
const handlelogout = () => {
|
||||
localStorage.clear();
|
||||
navigate("/auth/login");
|
||||
toast.success("Logged out successfully");
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<MenuButton
|
||||
|
|
@ -99,7 +95,20 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
|
|||
{/* //Eknoor singh and jaanvi
|
||||
//date:- 13-Feb-2025
|
||||
//Implemented logout functionality which was static previously */}
|
||||
<ListItemText onClick={handlelogout}>Logout</ListItemText>
|
||||
|
||||
<ListItemText
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setLogoutModal(true);
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</ListItemText>
|
||||
<Logout
|
||||
setLogoutModal={setLogoutModal}
|
||||
logoutModal={logoutModal}
|
||||
/>
|
||||
|
||||
<ListItemIcon>
|
||||
<LogoutRoundedIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ import CustomTable, { Column } from "../../components/CustomTable";
|
|||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store"; // Import RootState for selector
|
||||
|
||||
import ViewModal from "../../components/Modals/ViewModal/ViewModal";
|
||||
export default function AdminList() {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [modalOpen, setModalOpen,] = useState(false);
|
||||
const [viewModal, setViewOpen] = useState(false);
|
||||
|
||||
const { reset } = useForm();
|
||||
|
||||
const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
|
||||
|
|
@ -26,16 +28,29 @@ export default function AdminList() {
|
|||
|
||||
const handleClickOpen = () => {
|
||||
setModalOpen(true);
|
||||
setViewOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setModalOpen(false);
|
||||
setViewOpen(false)
|
||||
reset();
|
||||
};
|
||||
|
||||
const handleUpdate = async (id: string, name: string, role: string) => {
|
||||
const handleUpdate = async (
|
||||
id: string,
|
||||
name: string,
|
||||
email: string,
|
||||
phone:string,
|
||||
registeredAddress:string
|
||||
) => {
|
||||
try {
|
||||
await dispatch(updateAdmin({ id, name, role }));
|
||||
await dispatch(
|
||||
updateAdmin({
|
||||
id, name, email, phone, registeredAddress,
|
||||
token: null
|
||||
})
|
||||
);
|
||||
await dispatch(adminList()); // Fetch updated admins list after update
|
||||
} catch (error) {
|
||||
console.error("Update failed", error);
|
||||
|
|
@ -45,7 +60,10 @@ export default function AdminList() {
|
|||
const categoryColumns: Column[] = [
|
||||
{ id: "srno", label: "Sr No" },
|
||||
{ id: "name", label: "Name" },
|
||||
{ id: "role", label: "Role" },
|
||||
{ id: "email", label: "Email" },
|
||||
{ id: "phone", label: "Phone No" },
|
||||
{ id: "registeredAddress", label: "Address" },
|
||||
|
||||
{ id: "action", label: "Action", align: "center" },
|
||||
];
|
||||
|
||||
|
|
@ -53,13 +71,21 @@ export default function AdminList() {
|
|||
const categoryRows = admins?.length
|
||||
? admins?.map(
|
||||
(
|
||||
admin: { id: string; name: string; role: string },
|
||||
admin: {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
registeredAddress: string;
|
||||
},
|
||||
index: number
|
||||
) => ({
|
||||
id: admin?.id,
|
||||
srno: index + 1,
|
||||
name: admin?.name,
|
||||
role: admin?.role,
|
||||
email: admin?.email,
|
||||
phone: admin?.phone,
|
||||
registeredAddress: admin?.registeredAddress,
|
||||
})
|
||||
)
|
||||
: [];
|
||||
|
|
@ -91,24 +117,28 @@ export default function AdminList() {
|
|||
sx={{ textAlign: "right" }}
|
||||
onClick={handleClickOpen}
|
||||
>
|
||||
Add Category
|
||||
Add Admin
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<CustomTable
|
||||
columns={categoryColumns}
|
||||
rows={categoryRows}
|
||||
setDeleteModal={setDeleteModal}
|
||||
deleteModal={deleteModal}
|
||||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
/>
|
||||
<CustomTable
|
||||
columns={categoryColumns}
|
||||
rows={categoryRows}
|
||||
setDeleteModal={setDeleteModal}
|
||||
deleteModal={deleteModal}
|
||||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
viewModal={viewModal}
|
||||
setViewModal={setViewOpen}
|
||||
/>
|
||||
|
||||
<AddEditCategoryModal
|
||||
open={modalOpen}
|
||||
handleClose={handleCloseModal}
|
||||
editRow={rowData}
|
||||
handleUpdate={handleUpdate}
|
||||
/>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,214 +1,227 @@
|
|||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import FormLabel from '@mui/material/FormLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Link from '@mui/material/Link';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import MuiCard from '@mui/material/Card';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { loginUser } from '../../../redux/slices/authSlice.ts';
|
||||
import ColorModeSelect from '../../../shared-theme/ColorModeSelect.tsx';
|
||||
import AppTheme from '../../../shared-theme/AppTheme.tsx';
|
||||
import ForgotPassword from './ForgotPassword.tsx';
|
||||
import { toast } from 'sonner';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import * as React from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import CssBaseline from "@mui/material/CssBaseline";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import FormLabel from "@mui/material/FormLabel";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import Link from "@mui/material/Link";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import MuiCard from "@mui/material/Card";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import { useForm, Controller, SubmitHandler } from "react-hook-form";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { loginUser } from "../../../redux/slices/authSlice.ts";
|
||||
import ColorModeSelect from "../../../shared-theme/ColorModeSelect.tsx";
|
||||
import AppTheme from "../../../shared-theme/AppTheme.tsx";
|
||||
import ForgotPassword from "./ForgotPassword.tsx";
|
||||
import { toast } from "sonner";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const Card = styled(MuiCard)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignSelf: 'center',
|
||||
width: '100%',
|
||||
padding: theme.spacing(4),
|
||||
gap: theme.spacing(2),
|
||||
margin: 'auto',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
maxWidth: '450px',
|
||||
},
|
||||
boxShadow:
|
||||
'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
|
||||
...theme.applyStyles('dark', {
|
||||
boxShadow:
|
||||
'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px',
|
||||
}),
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignSelf: "center",
|
||||
width: "100%",
|
||||
padding: theme.spacing(4),
|
||||
gap: theme.spacing(2),
|
||||
margin: "auto",
|
||||
[theme.breakpoints.up("sm")]: {
|
||||
maxWidth: "450px",
|
||||
},
|
||||
boxShadow:
|
||||
"hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
|
||||
...theme.applyStyles("dark", {
|
||||
boxShadow:
|
||||
"hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px",
|
||||
}),
|
||||
}));
|
||||
|
||||
const SignInContainer = styled(Stack)(({ theme }) => ({
|
||||
height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)',
|
||||
minHeight: '100%',
|
||||
padding: theme.spacing(2),
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
padding: theme.spacing(4),
|
||||
},
|
||||
'&::before': {
|
||||
content: '""',
|
||||
display: 'block',
|
||||
position: 'absolute',
|
||||
zIndex: -1,
|
||||
inset: 0,
|
||||
backgroundImage:
|
||||
'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
...theme.applyStyles('dark', {
|
||||
backgroundImage:
|
||||
'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
|
||||
}),
|
||||
},
|
||||
height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
|
||||
minHeight: "100%",
|
||||
padding: theme.spacing(2),
|
||||
[theme.breakpoints.up("sm")]: {
|
||||
padding: theme.spacing(4),
|
||||
},
|
||||
"&::before": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
zIndex: -1,
|
||||
inset: 0,
|
||||
backgroundImage:
|
||||
"radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))",
|
||||
backgroundRepeat: "no-repeat",
|
||||
...theme.applyStyles("dark", {
|
||||
backgroundImage:
|
||||
"radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))",
|
||||
}),
|
||||
},
|
||||
}));
|
||||
interface ILoginForm {
|
||||
email: string;
|
||||
password: string;
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setError,
|
||||
} = useForm<ILoginForm>();
|
||||
const dispatch = useDispatch();
|
||||
const router = useNavigate();
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setError,
|
||||
} = useForm<ILoginForm>();
|
||||
const dispatch = useDispatch();
|
||||
const router = useNavigate();
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const onSubmit: SubmitHandler<ILoginForm> = async (data: ILoginForm) => {
|
||||
try {
|
||||
const response = await dispatch(loginUser(data)).unwrap();
|
||||
if (response?.data?.token) {
|
||||
router('/panel/dashboard');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.log('Login failed:', error);
|
||||
toast.error('Login failed: ' + error);
|
||||
}
|
||||
};
|
||||
const onSubmit: SubmitHandler<ILoginForm> = async (data: ILoginForm) => {
|
||||
try {
|
||||
const response = await dispatch(loginUser(data)).unwrap();
|
||||
if (response?.data?.token) {
|
||||
router("/panel/dashboard");
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.log("Login failed:", error);
|
||||
toast.error("Login failed: " + error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppTheme {...props}>
|
||||
<CssBaseline enableColorScheme />
|
||||
<SignInContainer direction="column" justifyContent="space-between">
|
||||
<ColorModeSelect
|
||||
sx={{ position: 'fixed', top: '1rem', right: '1rem' }}
|
||||
/>
|
||||
<Card variant="outlined">
|
||||
{/* <SitemarkIcon /> */}
|
||||
Digi-EV
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h4"
|
||||
sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
|
||||
>
|
||||
Sign in
|
||||
</Typography>
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
noValidate
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel htmlFor="email">Email</FormLabel>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
rules={{
|
||||
required: 'Email is required',
|
||||
pattern: {
|
||||
value: /\S+@\S+\.\S+/,
|
||||
message: 'Please enter a valid email address.',
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
error={!!errors.email}
|
||||
helperText={errors.email?.message}
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color={errors.email ? 'error' : 'primary'}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
return (
|
||||
<AppTheme {...props}>
|
||||
<CssBaseline enableColorScheme />
|
||||
<SignInContainer direction="column" justifyContent="space-between">
|
||||
<ColorModeSelect
|
||||
sx={{ position: "fixed", top: "1rem", right: "1rem" }}
|
||||
/>
|
||||
<Card variant="outlined">
|
||||
{/* <SitemarkIcon /> */}
|
||||
Digi-EV
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h4"
|
||||
sx={{
|
||||
width: "100%",
|
||||
fontSize: "clamp(2rem, 10vw, 2.15rem)",
|
||||
}}
|
||||
>
|
||||
Sign in
|
||||
</Typography>
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
noValidate
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel htmlFor="email">Email</FormLabel>
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
rules={{
|
||||
required: "Email is required",
|
||||
pattern: {
|
||||
value: /\S+@\S+\.\S+/,
|
||||
message:
|
||||
"Please enter a valid email address.",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
error={!!errors.email}
|
||||
helperText={errors.email?.message}
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color={
|
||||
errors.email ? "error" : "primary"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormLabel htmlFor="password">Password</FormLabel>
|
||||
<Controller
|
||||
name="password"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
rules={{
|
||||
required: 'Password is required',
|
||||
minLength: {
|
||||
value: 6,
|
||||
message: 'Password must be at least 6 characters long.',
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
error={!!errors.password}
|
||||
helperText={errors.password?.message}
|
||||
name="password"
|
||||
placeholder="••••••"
|
||||
type="password"
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
autoFocus
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color={errors.password ? 'error' : 'primary'}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
<FormLabel htmlFor="password">Password</FormLabel>
|
||||
<Controller
|
||||
name="password"
|
||||
control={control}
|
||||
defaultValue=""
|
||||
rules={{
|
||||
required: "Password is required",
|
||||
minLength: {
|
||||
value: 6,
|
||||
message:
|
||||
"Password must be at least 6 characters long.",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
error={!!errors.password}
|
||||
helperText={errors.password?.message}
|
||||
name="password"
|
||||
placeholder="••••••"
|
||||
type="password"
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
autoFocus
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
color={
|
||||
errors.password
|
||||
? "error"
|
||||
: "primary"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControlLabel
|
||||
control={<Checkbox value="remember" color="primary" />}
|
||||
label="Remember me"
|
||||
/>
|
||||
<ForgotPassword open={open} handleClose={handleClose} />
|
||||
<Button type="submit" fullWidth variant="contained">
|
||||
Sign in
|
||||
</Button>
|
||||
<Link
|
||||
component="button"
|
||||
type="button"
|
||||
onClick={handleClickOpen}
|
||||
variant="body2"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
Forgot your password?
|
||||
</Link>
|
||||
</Box>
|
||||
<Divider>or</Divider>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox value="remember" color="primary" />
|
||||
}
|
||||
label="Remember me"
|
||||
/>
|
||||
<ForgotPassword open={open} handleClose={handleClose} />
|
||||
<Button type="submit" fullWidth variant="contained">
|
||||
Sign in
|
||||
</Button>
|
||||
{/* <Link
|
||||
component="button"
|
||||
type="button"
|
||||
onClick={handleClickOpen}
|
||||
variant="body2"
|
||||
sx={{ alignSelf: "center" }}
|
||||
>
|
||||
Forgot your password?
|
||||
</Link> */}
|
||||
</Box>
|
||||
{/* <Divider>or</Divider>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Typography sx={{ textAlign: 'center' }}>
|
||||
Don't have an account?{' '}
|
||||
|
|
@ -220,9 +233,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
Sign up
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</SignInContainer>
|
||||
</AppTheme>
|
||||
);
|
||||
</Box> */}
|
||||
</Card>
|
||||
</SignInContainer>
|
||||
</AppTheme>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@ import CustomTable from '../../components/CustomTable';
|
|||
import DeleteModal from '../../components/Modals/DeleteModal/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' },
|
||||
];
|
||||
// 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);
|
||||
|
|
@ -66,9 +66,9 @@ export default function Vehicles() {
|
|||
}}
|
||||
>
|
||||
{/* Title and Add Category button */}
|
||||
<Typography component="h2" variant="h6" sx={{ mt: 2, fontWeight: 600 }}>
|
||||
{/* <Typography component="h2" variant="h6" sx={{ mt: 2, fontWeight: 600 }}>
|
||||
Vehicles
|
||||
</Typography>
|
||||
</Typography> */}
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
|
|
|
|||
|
|
@ -2,14 +2,16 @@ import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
|||
import http from "../../lib/https";
|
||||
import { toast } from "sonner";
|
||||
|
||||
|
||||
// Interfaces
|
||||
interface User {
|
||||
token: string | null;
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
// role: string;
|
||||
phone: string;
|
||||
registeredAddress: string;
|
||||
}
|
||||
|
||||
interface Admin {
|
||||
|
|
@ -18,6 +20,7 @@ interface Admin {
|
|||
role: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
registeredAddress: string;
|
||||
}
|
||||
|
||||
interface AuthState {
|
||||
|
|
@ -64,19 +67,17 @@ export const deleteAdmin = createAsyncThunk<
|
|||
|
||||
// Update Admin
|
||||
export const updateAdmin = createAsyncThunk(
|
||||
"UpdateAdmin",
|
||||
async (
|
||||
{ id, name, role }: { id: any; name: string; role: string },
|
||||
{ rejectWithValue }
|
||||
) => {
|
||||
"updateAdmin",
|
||||
async ({ id, ...data}: User, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.put(`auth/${id}/update-admin`, {
|
||||
name,
|
||||
role,
|
||||
});
|
||||
const response = await http.put(
|
||||
`auth/${id}/update-admin`,
|
||||
data
|
||||
);
|
||||
toast.success("Admin updated successfully");
|
||||
return response?.data;
|
||||
} catch (error: any) {
|
||||
toast.error("Error updating the user: " + error);
|
||||
return rejectWithValue(
|
||||
error.response?.data?.message || "An error occurred"
|
||||
);
|
||||
|
|
@ -84,6 +85,8 @@ export const updateAdmin = createAsyncThunk(
|
|||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
const initialState: AuthState = {
|
||||
user: null,
|
||||
admins: [],
|
||||
|
|
@ -96,8 +99,7 @@ const initialState: AuthState = {
|
|||
const adminSlice = createSlice({
|
||||
name: "admin",
|
||||
initialState,
|
||||
reducers: {
|
||||
},
|
||||
reducers: {},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(adminList.pending, (state) => {
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ export const registerUser = createAsyncThunk<
|
|||
email: string;
|
||||
password: string;
|
||||
phone: string;
|
||||
// registeredAddress:string;
|
||||
role: string;
|
||||
},
|
||||
{ rejectValue: string }
|
||||
|
|
|
|||
|
|
@ -64,15 +64,6 @@ export default function AppRouter() {
|
|||
/>
|
||||
<Route path="login" element={<Login />} />
|
||||
<Route path="signup" element={<SignUp />} />
|
||||
<Route
|
||||
path="profile"
|
||||
element={
|
||||
<ProtectedRoute
|
||||
caps={[]}
|
||||
component={<ProfilePage />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
|
||||
{/* Dashboard Routes */}
|
||||
|
|
@ -108,6 +99,15 @@ export default function AppRouter() {
|
|||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="profile"
|
||||
element={
|
||||
<ProtectedRoute
|
||||
caps={[]}
|
||||
component={<ProfilePage />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<>404</>} />
|
||||
</Route>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue