Add responsiveness and restrict admins
This commit is contained in:
jaanvi
parent
292ea123a0
commit
25b0ecf111
|
|
@ -1,300 +0,0 @@
|
|||
import React, { useEffect } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
FormHelperText,
|
||||
FormLabel,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
|
||||
interface AddRoleModalProps {
|
||||
open: boolean;
|
||||
handleClose: () => void;
|
||||
handleCreate: (data: FormData) => void;
|
||||
handleUpdate: (
|
||||
id: string,
|
||||
name: string,
|
||||
resource: {
|
||||
moduleName: string;
|
||||
moduleId: string;
|
||||
permissions: string[];
|
||||
}[]
|
||||
) => void;
|
||||
editRow: any;
|
||||
data: {
|
||||
resource: {
|
||||
moduleName: string;
|
||||
moduleId: string;
|
||||
permissions: string[];
|
||||
}[];
|
||||
}; // Assuming `data` is passed as a prop
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
name: string;
|
||||
resource: {
|
||||
moduleName: string;
|
||||
moduleId: string;
|
||||
permissions: string[];
|
||||
}[];
|
||||
}
|
||||
|
||||
const AddRoleModal: React.FC<AddRoleModalProps> = ({
|
||||
open,
|
||||
handleClose,
|
||||
handleCreate,
|
||||
handleUpdate,
|
||||
editRow,
|
||||
data,
|
||||
}) => {
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
reset,
|
||||
getValues, // Access getValues from the form methods here
|
||||
} = useForm<FormData>({
|
||||
defaultValues: {
|
||||
name: "",
|
||||
resource: [], // Ensure resource is initialized as an empty array
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (editRow) {
|
||||
setValue("name", editRow.name);
|
||||
setValue("resource", editRow.resource);
|
||||
}
|
||||
}, [editRow, setValue]);
|
||||
|
||||
// Handles permissions checkbox change for a specific resource
|
||||
const handlePermissionChange = (
|
||||
resourceIndex: number,
|
||||
permission: string,
|
||||
checked: boolean
|
||||
) => {
|
||||
const updatedResources = [...getValues().resource]; // Use getValues to get the current form values
|
||||
const resource = updatedResources[resourceIndex];
|
||||
|
||||
if (checked) {
|
||||
// Add permission if checked
|
||||
resource.permissions = [
|
||||
...new Set([...resource.permissions, permission]),
|
||||
];
|
||||
} else {
|
||||
// Remove permission if unchecked
|
||||
resource.permissions = resource.permissions.filter(
|
||||
(p) => p !== permission
|
||||
);
|
||||
}
|
||||
|
||||
setValue("resource", updatedResources); // Update the resource field in form state
|
||||
};
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
if (editRow) {
|
||||
handleUpdate(editRow.id, data.name, data.resource);
|
||||
} else {
|
||||
handleCreate(data);
|
||||
}
|
||||
|
||||
handleClose();
|
||||
reset();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
component: "form",
|
||||
onSubmit: handleSubmit(onSubmit),
|
||||
}}
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
{editRow ? "Edit Role" : "Add Role"}
|
||||
<Box
|
||||
onClick={handleClose}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Box>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent>
|
||||
{/* Role Name Field */}
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Role Name is required",
|
||||
minLength: {
|
||||
value: 3,
|
||||
message: "Minimum 3 characters required",
|
||||
},
|
||||
maxLength: {
|
||||
value: 30,
|
||||
message: "Maximum 30 characters allowed",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
autoFocus
|
||||
required
|
||||
margin="dense"
|
||||
label="Role Name"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.name}
|
||||
helperText={errors.name?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Resource Field */}
|
||||
<Controller
|
||||
name="resource"
|
||||
control={control}
|
||||
rules={{ required: "Resource is required" }}
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
fullWidth
|
||||
margin="dense"
|
||||
error={!!errors.resource}
|
||||
>
|
||||
<InputLabel>Resource</InputLabel>
|
||||
<Select
|
||||
{...field}
|
||||
label="Resource"
|
||||
required
|
||||
fullWidth
|
||||
variant="standard"
|
||||
>
|
||||
{/* Mapping over the resource array to display the options */}
|
||||
{data.resource?.map((resourceItem, index) => (
|
||||
<MenuItem
|
||||
key={index}
|
||||
value={resourceItem.moduleId}
|
||||
>
|
||||
{resourceItem.moduleName}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
<FormHelperText>
|
||||
{errors.resource?.message}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Permissions Checkbox Fields for each resource */}
|
||||
{getValues().resource &&
|
||||
getValues().resource.length > 0 &&
|
||||
getValues().resource.map((resource, resourceIndex) => (
|
||||
<React.Fragment key={resourceIndex}>
|
||||
<FormControl fullWidth margin="dense">
|
||||
<FormLabel>
|
||||
{resource.moduleName} Permissions
|
||||
</FormLabel>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
value="view"
|
||||
checked={resource.permissions.includes(
|
||||
"view"
|
||||
)}
|
||||
onChange={(e) =>
|
||||
handlePermissionChange(
|
||||
resourceIndex,
|
||||
"view",
|
||||
e.target.checked
|
||||
)
|
||||
}
|
||||
/>
|
||||
}
|
||||
label="View"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
value="edit"
|
||||
checked={resource.permissions.includes(
|
||||
"edit"
|
||||
)}
|
||||
onChange={(e) =>
|
||||
handlePermissionChange(
|
||||
resourceIndex,
|
||||
"edit",
|
||||
e.target.checked
|
||||
)
|
||||
}
|
||||
/>
|
||||
}
|
||||
label="Edit"
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
value="delete"
|
||||
checked={resource.permissions.includes(
|
||||
"delete"
|
||||
)}
|
||||
onChange={(e) =>
|
||||
handlePermissionChange(
|
||||
resourceIndex,
|
||||
"delete",
|
||||
e.target.checked
|
||||
)
|
||||
}
|
||||
/>
|
||||
}
|
||||
label="Delete"
|
||||
/>
|
||||
<FormHelperText>
|
||||
{
|
||||
errors.resource?.[resourceIndex]
|
||||
?.permissions?.message
|
||||
}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose}>Cancel</Button>
|
||||
<Button type="submit">{editRow ? "Update" : "Create"}</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddRoleModal;
|
||||
|
|
@ -73,7 +73,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
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);
|
||||
|
|
@ -112,56 +111,71 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
};
|
||||
|
||||
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}>
|
||||
<Box sx={{ overflowX: "auto", width: "100%" }}>
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: 700 }} aria-label="customized table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{columns.map((column) => (
|
||||
<StyledTableCell
|
||||
key={column.id}
|
||||
align={column.align || "left"}
|
||||
sx={{
|
||||
whiteSpace: "nowrap", // Prevent wrapping
|
||||
fontSize: { xs: "12px", sm: "14px" }, // Responsively adjust font size
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
)}
|
||||
{column.label}
|
||||
</StyledTableCell>
|
||||
))}
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((row, rowIndex) => (
|
||||
<StyledTableRow key={rowIndex}>
|
||||
{columns.map((column) => (
|
||||
<StyledTableCell
|
||||
key={column.id}
|
||||
align={column.align || "left"}
|
||||
sx={{
|
||||
whiteSpace: "nowrap", // Prevent wrapping
|
||||
fontSize: {
|
||||
xs: "12px",
|
||||
sm: "14px",
|
||||
}, // Responsively adjust font size
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
</TableContainer>
|
||||
|
||||
{/* Menu Actions */}
|
||||
{open && (
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
|
|
@ -256,7 +270,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
</Box>
|
||||
</Menu>
|
||||
)}
|
||||
</TableContainer>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default function LineChartCard() {
|
|||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{ width: "100%", height: 400, backgroundColor: "#202020" }}
|
||||
sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
|
||||
>
|
||||
<CardContent>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ export default function MainGrid() {
|
|||
container
|
||||
spacing={2}
|
||||
columns={12}
|
||||
|
||||
sx={{ mb: (theme) => theme.spacing(2) }}
|
||||
>
|
||||
{data.map((card, index) => (
|
||||
|
|
|
|||
|
|
@ -13,35 +13,10 @@ import { RootState } from "../../redux/store/store";
|
|||
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
|
||||
import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";
|
||||
|
||||
const baseMenuItems = [
|
||||
{
|
||||
text: "Dashboard",
|
||||
icon: <DashboardOutlinedIcon />,
|
||||
url: "/panel/dashboard",
|
||||
},
|
||||
{
|
||||
text: "Admins",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/admin-list",
|
||||
},
|
||||
{
|
||||
text: "Users",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/user-list",
|
||||
},
|
||||
{
|
||||
text: "Roles",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/role-list",
|
||||
},
|
||||
];
|
||||
|
||||
//Eknoor singh and Jaanvi
|
||||
//date:- 12-Feb-2025
|
||||
//Made a different variable for super admin to access all the details.
|
||||
|
||||
|
||||
|
||||
type PropType = {
|
||||
hidden: boolean;
|
||||
};
|
||||
|
|
@ -51,24 +26,34 @@ export default function MenuContent({ hidden }: PropType) {
|
|||
const userRole = useSelector(
|
||||
(state: RootState) => state.profileReducer.user?.userType
|
||||
);
|
||||
const baseMenuItems = [
|
||||
{
|
||||
text: "Dashboard",
|
||||
icon: <DashboardOutlinedIcon />,
|
||||
url: "/panel/dashboard",
|
||||
},
|
||||
userRole === "superadmin" && {
|
||||
text: "Admins",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/admin-list",
|
||||
},
|
||||
userRole === "admin" && {
|
||||
text: "Users",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/user-list",
|
||||
},
|
||||
userRole === "superadmin" && {
|
||||
text: "Roles",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/role-list",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
// const mainListItems = [
|
||||
// ...baseMenuItems,
|
||||
// // ...(userRole === "superadmin"
|
||||
// // ? [
|
||||
// // // {
|
||||
// // // text: "Admin List",
|
||||
// // // icon: <ManageAccountsOutlinedIcon />,
|
||||
// // // url: "/panel/admin-list",
|
||||
// // // },
|
||||
// // ]
|
||||
// // : []),
|
||||
// ];
|
||||
const filteredMenuItems = baseMenuItems.filter(Boolean);
|
||||
return (
|
||||
<Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
|
||||
<List dense>
|
||||
{baseMenuItems.map((item, index) => (
|
||||
{filteredMenuItems.map((item, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
disablePadding
|
||||
|
|
|
|||
|
|
@ -31,8 +31,9 @@ export default function ResourcePieChart() {
|
|||
gap: "8px",
|
||||
flexGrow: 1,
|
||||
width: "100%",
|
||||
height: "90%",
|
||||
height: "100%",
|
||||
backgroundColor: "#202020",
|
||||
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,10 @@ export default function SessionsChart() {
|
|||
variant="outlined"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "90%",
|
||||
height: "100%",
|
||||
backgroundColor: "#202020",
|
||||
p: 2,
|
||||
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default function RoundedBarChart() {
|
|||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{ width: "100%", height: 400, backgroundColor: "#202020" }}
|
||||
sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
|
||||
>
|
||||
<CardContent>
|
||||
<div
|
||||
|
|
@ -41,16 +41,16 @@ export default function RoundedBarChart() {
|
|||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
align="left"
|
||||
color="#FFFFFF"
|
||||
sx={{
|
||||
fontFamily: "Gilroy",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
}}
|
||||
>
|
||||
variant="h6"
|
||||
align="left"
|
||||
color="#FFFFFF"
|
||||
sx={{
|
||||
fontFamily: "Gilroy",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
}}
|
||||
>
|
||||
Charge Stats
|
||||
</Typography>
|
||||
<Box
|
||||
|
|
@ -91,6 +91,7 @@ export default function RoundedBarChart() {
|
|||
height={300}
|
||||
data={data}
|
||||
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis />
|
||||
|
|
|
|||
|
|
@ -1,56 +1,72 @@
|
|||
// src/common/components/Layout
|
||||
|
||||
import * as React from 'react';
|
||||
import { Box, Stack } from '@mui/material';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import SideMenu from '../../components/SideMenu';
|
||||
import AppNavbar from '../../components/AppNavbar';
|
||||
import Header from '../../components/Header';
|
||||
import AppTheme from '../../shared-theme/AppTheme';
|
||||
import * as React from "react";
|
||||
import { Box, Stack } from "@mui/material";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import SideMenu from "../../components/SideMenu";
|
||||
import AppNavbar from "../../components/AppNavbar";
|
||||
import Header from "../../components/Header";
|
||||
import AppTheme from "../../shared-theme/AppTheme";
|
||||
|
||||
interface LayoutProps {
|
||||
customStyles?: React.CSSProperties;
|
||||
customStyles?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
||||
return (
|
||||
<AppTheme>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<SideMenu />
|
||||
<AppNavbar />
|
||||
<Box
|
||||
component="main"
|
||||
sx={(theme) => ({
|
||||
display: "flex",
|
||||
height: '100vh',
|
||||
flexGrow: 1,
|
||||
backgroundColor: theme.vars
|
||||
? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
|
||||
: theme.palette.background.default,
|
||||
overflow: 'auto',
|
||||
...customStyles,
|
||||
})}
|
||||
>
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
justifyItems: "center",
|
||||
return (
|
||||
<AppTheme>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
height: "100vh",
|
||||
flexDirection: { xs: "column", md: "row" },
|
||||
}}
|
||||
>
|
||||
{/* SideMenu - Responsive, shown only on large screens */}
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: "none", md: "block" },
|
||||
width: 250,
|
||||
}}
|
||||
>
|
||||
<SideMenu />
|
||||
</Box>
|
||||
|
||||
alignItems: 'center',
|
||||
mx: 3,
|
||||
pb: 5,
|
||||
mt: { xs: 8, md: 0 },
|
||||
}}
|
||||
>
|
||||
<Header />
|
||||
<Outlet />
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</AppTheme>
|
||||
);
|
||||
{/* Navbar - Always visible */}
|
||||
<AppNavbar />
|
||||
|
||||
<Box
|
||||
component="main"
|
||||
sx={(theme) => ({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100vh",
|
||||
flexGrow: 1,
|
||||
backgroundColor: theme.vars
|
||||
? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
|
||||
: theme.palette.background.default,
|
||||
overflow: "auto",
|
||||
...customStyles,
|
||||
mt: { xs: 8, md: 0 },
|
||||
})}
|
||||
>
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
justifyItems: "center",
|
||||
alignItems: "center",
|
||||
mx: 3,
|
||||
pb: 5,
|
||||
mt: { xs: 3, md: 0 },
|
||||
}}
|
||||
>
|
||||
<Header />
|
||||
<Outlet />
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</AppTheme>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardLayout;
|
||||
|
|
|
|||
283
src/pages/AddEditRolePage/index.tsx
Normal file
283
src/pages/AddEditRolePage/index.tsx
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
import React, { useState } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Paper,
|
||||
Checkbox,
|
||||
Typography,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
|
||||
// Define the data structure
|
||||
interface Permission {
|
||||
module: string;
|
||||
list: boolean;
|
||||
add: boolean;
|
||||
edit: boolean;
|
||||
view: boolean;
|
||||
delete: boolean;
|
||||
}
|
||||
|
||||
// Sample data
|
||||
const initialPermissions: Permission[] = [
|
||||
{
|
||||
module: "Role And Permission",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Staff",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Manage Users",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Business Type",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Category",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Volumes",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Orders",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Discount",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Transactioned History",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Relaxable",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "State Contract",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Flag",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Contract Life",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Commission",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Email Template",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
];
|
||||
|
||||
// Table component
|
||||
const AddEditRoleModal: React.FC = () => {
|
||||
const [permissions, setPermissions] =
|
||||
useState<Permission[]>(initialPermissions);
|
||||
|
||||
// Handle checkbox change
|
||||
const handleCheckboxChange = (module: string, action: keyof Permission) => {
|
||||
setPermissions((prevPermissions) =>
|
||||
prevPermissions.map((perm) =>
|
||||
perm.module === module
|
||||
? { ...perm, [action]: !perm[action] }
|
||||
: perm
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ maxWidth: 1000, margin: "auto", mt: 4 }}
|
||||
>
|
||||
<Table>
|
||||
<TableHead>
|
||||
{/* Role Row with space-evenly */}
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={2}
|
||||
sx={{
|
||||
backgroundColor: "#f5f5f5",
|
||||
fontWeight: "bold",
|
||||
display: "flex",
|
||||
justifyContent: "space-evenly",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">Role</Typography>
|
||||
<TableCell
|
||||
sx={{
|
||||
backgroundColor: "#fff",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Admin
|
||||
</TableCell>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
{/* Header Row */}
|
||||
<TableRow>
|
||||
<TableCell
|
||||
sx={{
|
||||
backgroundColor: "#f5f5f5",
|
||||
fontWeight: "bold",
|
||||
width: "30%",
|
||||
}}
|
||||
>
|
||||
Module Name
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
backgroundColor: "#f5f5f5",
|
||||
fontWeight: "bold",
|
||||
width: "70%",
|
||||
}}
|
||||
>
|
||||
Actions
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{permissions.map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
{/* Module Name */}
|
||||
<TableCell>{row.module}</TableCell>
|
||||
|
||||
{/* Action Checkboxes */}
|
||||
<TableCell>
|
||||
<Box display="flex" gap={2}>
|
||||
<Checkbox
|
||||
checked={row.list}
|
||||
onChange={() =>
|
||||
handleCheckboxChange(
|
||||
row.module,
|
||||
"list"
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
checked={row.add}
|
||||
onChange={() =>
|
||||
handleCheckboxChange(
|
||||
row.module,
|
||||
"add"
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
checked={row.edit}
|
||||
onChange={() =>
|
||||
handleCheckboxChange(
|
||||
row.module,
|
||||
"edit"
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
checked={row.view}
|
||||
onChange={() =>
|
||||
handleCheckboxChange(
|
||||
row.module,
|
||||
"view"
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
checked={row.delete}
|
||||
onChange={() =>
|
||||
handleCheckboxChange(
|
||||
row.module,
|
||||
"delete"
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddEditRoleModal;
|
||||
|
|
@ -1,358 +1,3 @@
|
|||
// import { useEffect, useState } from "react";
|
||||
// import {
|
||||
// Box,
|
||||
// Button,
|
||||
// Typography,
|
||||
// TextField,
|
||||
// InputAdornment,
|
||||
// Paper,
|
||||
// Table,
|
||||
// TableBody,
|
||||
// TableCell,
|
||||
// TableContainer,
|
||||
// TableHead,
|
||||
// TableRow,
|
||||
// Pagination,
|
||||
// IconButton,
|
||||
// } from "@mui/material";
|
||||
// import SearchIcon from "@mui/icons-material/Search";
|
||||
// import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||
// import TuneIcon from "@mui/icons-material/Tune";
|
||||
// import { useDispatch, useSelector } from "react-redux";
|
||||
// import { adminList } from "../../redux/slices/adminSlice";
|
||||
// import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
|
||||
// export default function AdminList() {
|
||||
// const [searchQuery, setSearchQuery] = useState("");
|
||||
// const [currentPage, setCurrentPage] = useState(1);
|
||||
// const adminsPerPage = 10;
|
||||
|
||||
// const dispatch = useDispatch<AppDispatch>();
|
||||
// const admins = useSelector((state: RootState) => state.adminReducer.admins);
|
||||
|
||||
// useEffect(() => {
|
||||
// dispatch(adminList());
|
||||
// }, [dispatch]);
|
||||
|
||||
// const staticAdmins = [
|
||||
// {
|
||||
// name: "John Doe",
|
||||
// location: "New York",
|
||||
// managerAssigned: "Alice Johnson",
|
||||
// vehicle: "Tesla Model S",
|
||||
// phone: "+1 234 567 8901",
|
||||
// },
|
||||
// {
|
||||
// name: "Jane Smith",
|
||||
// location: "Los Angeles",
|
||||
// managerAssigned: "Bob Brown",
|
||||
// vehicle: "Ford F-150",
|
||||
// phone: "+1 987 654 3210",
|
||||
// },
|
||||
// {
|
||||
// name: "Michael Brown",
|
||||
// location: "Chicago",
|
||||
// managerAssigned: "Sarah Lee",
|
||||
// vehicle: "Chevrolet Bolt",
|
||||
// phone: "+1 312 555 7890",
|
||||
// },
|
||||
// {
|
||||
// name: "Emily Davis",
|
||||
// location: "Houston",
|
||||
// managerAssigned: "Tom Wilson",
|
||||
// vehicle: "Nissan Leaf",
|
||||
// phone: "+1 713 444 5678",
|
||||
// },
|
||||
// {
|
||||
// name: "Daniel Martinez",
|
||||
// location: "Phoenix",
|
||||
// managerAssigned: "Jessica White",
|
||||
// vehicle: "BMW i3",
|
||||
// phone: "+1 602 999 4321",
|
||||
// },
|
||||
// {
|
||||
// name: "Sophia Miller",
|
||||
// location: "Philadelphia",
|
||||
// managerAssigned: "Mark Adams",
|
||||
// vehicle: "Audi e-tron",
|
||||
// phone: "+1 215 777 6543",
|
||||
// },
|
||||
// {
|
||||
// name: "James Anderson",
|
||||
// location: "San Antonio",
|
||||
// managerAssigned: "Emma Thomas",
|
||||
// vehicle: "Hyundai Kona EV",
|
||||
// phone: "+1 210 321 8765",
|
||||
// },
|
||||
// {
|
||||
// name: "James Anderson",
|
||||
// location: "San Antonio",
|
||||
// managerAssigned: "Emma Thomas",
|
||||
// vehicle: "Hyundai Kona EV",
|
||||
// phone: "+1 210 321 8765",
|
||||
// },
|
||||
// ];
|
||||
|
||||
// const adminData = admins.length ? admins : staticAdmins;
|
||||
|
||||
// const filteredAdmins = adminData.filter((admin) =>
|
||||
// admin.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
// );
|
||||
|
||||
// const indexOfLastAdmin = currentPage * adminsPerPage;
|
||||
// const indexOfFirstAdmin = indexOfLastAdmin - adminsPerPage;
|
||||
// const currentAdmins = filteredAdmins.slice(
|
||||
// indexOfFirstAdmin,
|
||||
// indexOfLastAdmin
|
||||
// );
|
||||
|
||||
// const handlePageChange = (event, value) => {
|
||||
// setCurrentPage(value);
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <Box
|
||||
// sx={{
|
||||
// width: "calc(100% - 48px)",
|
||||
// margin: "0 auto",
|
||||
// padding: "24px",
|
||||
// backgroundColor: "#1C1C1C",
|
||||
// borderRadius: "12px",
|
||||
// }}
|
||||
// >
|
||||
// <Typography
|
||||
// sx={{
|
||||
// color: "#FFFFFF",
|
||||
// fontWeight: 500,
|
||||
// fontSize: "18px",
|
||||
// fontFamily: "Gilroy",
|
||||
// }}
|
||||
// >
|
||||
// Charge stations
|
||||
// </Typography>
|
||||
|
||||
// {/* Search & Buttons Section */}
|
||||
// <Box
|
||||
// sx={{
|
||||
// display: "flex",
|
||||
// gap: "16px",
|
||||
// marginTop: "16px",
|
||||
// alignItems: "center",
|
||||
// fontFamily: "Gilroy",
|
||||
// }}
|
||||
// >
|
||||
// <TextField
|
||||
// variant="outlined"
|
||||
// placeholder="Search Charge stations"
|
||||
// sx={{
|
||||
// width: "422px",
|
||||
// backgroundColor: "#272727",
|
||||
|
||||
// borderRadius: "12px",
|
||||
// input: { color: "#FFFFFF" },
|
||||
// "& .MuiOutlinedInput-root": {
|
||||
// borderRadius: "12px",
|
||||
// "& fieldset": { borderColor: "#FFFFFF" },
|
||||
// "&:hover fieldset": { borderColor: "#FFFFFF" },
|
||||
// "&.Mui-focused fieldset": {
|
||||
// borderColor: "#52ACDF",
|
||||
// },
|
||||
// },
|
||||
// }}
|
||||
// InputProps={{
|
||||
// startAdornment: (
|
||||
// <InputAdornment position="start">
|
||||
// <SearchIcon sx={{ color: "#FFFFFF" }} />
|
||||
// </InputAdornment>
|
||||
// ),
|
||||
// }}
|
||||
// value={searchQuery}
|
||||
// onChange={(e) => setSearchQuery(e.target.value)}
|
||||
// />
|
||||
// <Box
|
||||
// sx={{
|
||||
// display: "flex",
|
||||
// justifyContent: "flex-end",
|
||||
// width: "100%",
|
||||
// }}
|
||||
// >
|
||||
// <Button
|
||||
// sx={{
|
||||
// backgroundColor: "#52ACDF",
|
||||
// color: "white",
|
||||
// borderRadius: "8px",
|
||||
// width: "184px",
|
||||
// "&:hover": {
|
||||
// backgroundColor: "#439BC1",
|
||||
// },
|
||||
// }}
|
||||
// >
|
||||
// Add Charge Stations
|
||||
// </Button>
|
||||
// </Box>
|
||||
|
||||
// <IconButton
|
||||
// sx={{
|
||||
// width: "44px",
|
||||
// height: "44px",
|
||||
// borderRadius: "8px",
|
||||
// backgroundColor: "#272727",
|
||||
// color: "#52ACDF",
|
||||
// "&:hover": { backgroundColor: "#333333" },
|
||||
// }}
|
||||
// >
|
||||
// <TuneIcon />
|
||||
// </IconButton>
|
||||
// </Box>
|
||||
|
||||
// {/* Table Section */}
|
||||
// <TableContainer
|
||||
// component={Paper}
|
||||
// sx={{
|
||||
// marginTop: "24px",
|
||||
// backgroundColor: "#1C1C1C",
|
||||
// borderRadius: "12px",
|
||||
// overflow: "hidden",
|
||||
// }}
|
||||
// >
|
||||
// <Table>
|
||||
// <TableHead sx={{ backgroundColor: "#272727" }}>
|
||||
// <TableRow>
|
||||
// {[
|
||||
// "Name",
|
||||
// "Location",
|
||||
// "Manager Assigned",
|
||||
// "Vehicle",
|
||||
// "Phone Number",
|
||||
// "Action",
|
||||
// ].map((header) => (
|
||||
// <TableCell
|
||||
// key={header}
|
||||
// sx={{
|
||||
// color: "#FFFFFF",
|
||||
// fontWeight: "bold",
|
||||
// }}
|
||||
// >
|
||||
// {header}
|
||||
// </TableCell>
|
||||
// ))}
|
||||
// </TableRow>
|
||||
// </TableHead>
|
||||
// <TableBody>
|
||||
// {currentAdmins.map((admin, index) => (
|
||||
// <TableRow
|
||||
// key={index}
|
||||
// sx={{ backgroundColor: "#1C1C1C" }}
|
||||
// >
|
||||
// <TableCell
|
||||
// sx={{
|
||||
// color: "#FFFFFF",
|
||||
// borderBottom: "1px solid #2A2A2A",
|
||||
// }}
|
||||
// >
|
||||
// {admin.name}
|
||||
// </TableCell>
|
||||
// <TableCell
|
||||
// sx={{
|
||||
// color: "#FFFFFF",
|
||||
// borderBottom: "1px solid #2A2A2A",
|
||||
// }}
|
||||
// >
|
||||
// {admin.location || "N/A"}
|
||||
// </TableCell>
|
||||
// <TableCell
|
||||
// sx={{
|
||||
// color: "#FFFFFF",
|
||||
// borderBottom: "1px solid #2A2A2A",
|
||||
// }}
|
||||
// >
|
||||
// {admin.managerAssigned || "N/A"}
|
||||
// </TableCell>
|
||||
// <TableCell
|
||||
// sx={{
|
||||
// color: "#FFFFFF",
|
||||
// borderBottom: "1px solid #2A2A2A",
|
||||
// }}
|
||||
// >
|
||||
// {admin.vehicle || "N/A"}{" "}
|
||||
// <Typography
|
||||
// component="span"
|
||||
// sx={{
|
||||
// color: "#52ACDF",
|
||||
// cursor: "pointer",
|
||||
// textDecoration: "none",
|
||||
// "&:hover": {
|
||||
// textDecoration: "underline",
|
||||
// },
|
||||
// }}
|
||||
// >
|
||||
// +6 more
|
||||
// </Typography>
|
||||
// </TableCell>
|
||||
// <TableCell
|
||||
// sx={{
|
||||
// color: "#FFFFFF",
|
||||
// borderBottom: "1px solid #2A2A2A",
|
||||
// }}
|
||||
// >
|
||||
// {admin.phone}
|
||||
// </TableCell>
|
||||
// <TableCell
|
||||
// sx={{
|
||||
// color: "#FFFFFF",
|
||||
// borderBottom: "1px solid #2A2A2A",
|
||||
// }}
|
||||
// >
|
||||
// <IconButton size="small">
|
||||
// <MoreHorizIcon
|
||||
// sx={{ color: "#FFFFFF" }}
|
||||
// />
|
||||
// </IconButton>
|
||||
// </TableCell>
|
||||
// </TableRow>
|
||||
// ))}
|
||||
// </TableBody>
|
||||
// </Table>
|
||||
// </TableContainer>
|
||||
|
||||
// {/* Pagination */}
|
||||
// <Box
|
||||
// sx={{
|
||||
// display: "flex",
|
||||
// justifyContent: "flex-end",
|
||||
// alignItems: "center",
|
||||
// marginTop: "16px",
|
||||
// width: "100%",
|
||||
// gap: "8px",
|
||||
// }}
|
||||
// >
|
||||
// <Typography
|
||||
// sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
|
||||
// >
|
||||
// Page Number :
|
||||
// </Typography>
|
||||
// <Pagination
|
||||
// count={Math.ceil(filteredAdmins.length / adminsPerPage)}
|
||||
// page={currentPage}
|
||||
// onChange={handlePageChange}
|
||||
// siblingCount={0}
|
||||
// boundaryCount={0}
|
||||
// sx={{
|
||||
// "& .MuiPaginationItem-root": {
|
||||
// color: "white",
|
||||
// borderRadius: "0px",
|
||||
// },
|
||||
// "& .MuiPaginationItem-page.Mui-selected": {
|
||||
// backgroundColor: "transparent",
|
||||
// fontWeight: "bold",
|
||||
// color: "#FFFFFF",
|
||||
// },
|
||||
// }}
|
||||
// />
|
||||
// </Box>
|
||||
// </Box>
|
||||
// );
|
||||
// }
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Box, Button, Typography } from "@mui/material";
|
||||
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
|
||||
|
|
@ -467,25 +112,27 @@ export default function AdminList() {
|
|||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: {
|
||||
sm: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: 2, // Add margin bottom for spacing
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h6"
|
||||
sx={{ mt: 2, fontWeight: 600 }}
|
||||
sx={{ fontWeight: 600, mb: { xs: 2, sm: 0 } }}
|
||||
>
|
||||
Admins
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
sx={{ textAlign: "right" }}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
width: { xs: "100%", sm: "auto" },
|
||||
}}
|
||||
onClick={handleClickOpen}
|
||||
>
|
||||
Add Admin
|
||||
|
|
|
|||
|
|
@ -12,11 +12,9 @@ import {
|
|||
IconButton,
|
||||
Link,
|
||||
} from "@mui/material";
|
||||
import { styled, useTheme } 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";
|
||||
|
|
@ -24,24 +22,22 @@ import { useNavigate } from "react-router-dom";
|
|||
import { Visibility, VisibilityOff } from "@mui/icons-material";
|
||||
import { Card, SignInContainer } from "./styled.css.tsx";
|
||||
|
||||
|
||||
|
||||
interface ILoginForm {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export default function Login(props: { disableCustomTheme?: boolean }) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const [showPassword, setShowPassword] = React.useState(false);
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setError,
|
||||
} = useForm<ILoginForm>();
|
||||
const dispatch = useDispatch();
|
||||
const router = useNavigate();
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
|
@ -64,45 +60,60 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
|
||||
return (
|
||||
<AppTheme {...props}>
|
||||
{/* <CssBaseline enableColorScheme /> */}
|
||||
<SignInContainer direction="column" justifyContent="space-between">
|
||||
{/* <ColorModeSelect
|
||||
sx={{ position: "fixed", top: "1rem", right: "1rem" }}
|
||||
/> */}
|
||||
|
||||
<Grid container sx={{ height: "100vh" }}>
|
||||
{/* Image Section */}
|
||||
<Grid
|
||||
item
|
||||
xs={7}
|
||||
xs={0}
|
||||
sm={0}
|
||||
md={7}
|
||||
sx={{
|
||||
background: `url('/mainPageLogo.png') center/cover no-repeat`,
|
||||
height: { xs: "0%", sm: "0%", md: "100%" },
|
||||
backgroundSize: "cover",
|
||||
display: { xs: "none", md: "block" }, // Hide the image on xs and sm screens
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Form Section */}
|
||||
<Grid
|
||||
item
|
||||
xs={5}
|
||||
xs={12}
|
||||
md={5}
|
||||
sx={{
|
||||
backgroundColor: "black",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
padding: { xs: "2rem", md: "3rem", lg: "3rem" },
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
color: "white",
|
||||
|
||||
textAlign: "center",
|
||||
fontSize: {
|
||||
xs: "2rem",
|
||||
sm: "2.2rem",
|
||||
md: "36px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Welcome Back!
|
||||
</Typography>
|
||||
<Card variant="outlined">
|
||||
{/* <SitemarkIcon /> */}
|
||||
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
|
||||
maxWidth: "400px",
|
||||
width: { xs: "80%", sm: "80%", md: "100%" },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
|
|
@ -110,7 +121,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
|
|
@ -118,9 +128,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
component="h1"
|
||||
variant="h4"
|
||||
sx={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
fontSize: { xs: "1.5rem", sm: "2rem" },
|
||||
}}
|
||||
>
|
||||
Login
|
||||
|
|
@ -129,18 +139,22 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
component="h6"
|
||||
variant="subtitle2"
|
||||
sx={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
fontSize: { xs: "0.9rem", sm: "1rem" },
|
||||
}}
|
||||
>
|
||||
Log in with your email and password
|
||||
</Typography>
|
||||
<FormControl>
|
||||
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<FormLabel
|
||||
htmlFor="email"
|
||||
sx={{
|
||||
fontSize: "1rem",
|
||||
fontSize: {
|
||||
xs: "0.9rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
|
|
@ -173,22 +187,32 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
|
||||
color={
|
||||
errors.email
|
||||
? "error"
|
||||
: "primary"
|
||||
}
|
||||
sx={{
|
||||
input: {
|
||||
fontSize: {
|
||||
xs: "0.9rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl>
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<FormLabel
|
||||
htmlFor="password"
|
||||
sx={{
|
||||
fontSize: "1rem",
|
||||
fontSize: {
|
||||
xs: "0.9rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
|
|
@ -207,11 +231,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ position: "relative" }}>
|
||||
<TextField
|
||||
{...field}
|
||||
error={!!errors.password}
|
||||
|
|
@ -220,7 +240,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
}
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
type={
|
||||
showPassword
|
||||
? "text"
|
||||
: "password"
|
||||
}
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
autoFocus
|
||||
|
|
@ -266,6 +290,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
|
|
@ -282,7 +307,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
}
|
||||
label="Remember me"
|
||||
/>
|
||||
|
||||
<Link
|
||||
component="button"
|
||||
type="button"
|
||||
|
|
@ -303,8 +327,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
// variant="contained"
|
||||
// color="primary"
|
||||
sx={{
|
||||
color: "white",
|
||||
backgroundColor: "#52ACDF",
|
||||
|
|
@ -316,26 +338,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
>
|
||||
Login
|
||||
</Button>
|
||||
|
||||
{/* <Divider>or</Divider>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ textAlign: "center" }}>
|
||||
Don't have an account?{" "}
|
||||
<Link
|
||||
href="/signup"
|
||||
variant="body2"
|
||||
sx={{ alignSelf: "center" }}
|
||||
>
|
||||
Sign up
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box> */}
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function RoleList() {
|
|||
|
||||
const handleClickOpen = () => {
|
||||
setRowData(null); // Reset row data when opening for new role
|
||||
setModalOpen(true);
|
||||
setModalOpen(!modalOpen);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
|
|
@ -126,12 +126,12 @@ export default function RoleList() {
|
|||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
/>
|
||||
<AddEditRoleModal
|
||||
{/* <AddEditRoleModal
|
||||
open={modalOpen}
|
||||
handleClose={handleCloseModal}
|
||||
handleCreate={handleCreate}
|
||||
editRow={rowData}
|
||||
/>
|
||||
/> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue