dev-jaanvi #1
|
|
@ -10,7 +10,11 @@ import {
|
|||
Checkbox,
|
||||
Typography,
|
||||
Box,
|
||||
Grid,
|
||||
FormControlLabel,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
import { useNavigate } from "react-router-dom"; // Import useNavigate
|
||||
|
||||
// Define the data structure
|
||||
interface Permission {
|
||||
|
|
@ -25,7 +29,7 @@ interface Permission {
|
|||
// Sample data
|
||||
const initialPermissions: Permission[] = [
|
||||
{
|
||||
module: "Role And Permission",
|
||||
module: "Role & Permission",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
|
|
@ -64,14 +68,6 @@ const initialPermissions: Permission[] = [
|
|||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Volumes",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
view: false,
|
||||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Orders",
|
||||
list: false,
|
||||
|
|
@ -81,7 +77,7 @@ const initialPermissions: Permission[] = [
|
|||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Discount",
|
||||
module: "Discounts",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
|
|
@ -89,39 +85,7 @@ const initialPermissions: Permission[] = [
|
|||
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",
|
||||
module: "Transaction History",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
|
|
@ -137,7 +101,7 @@ const initialPermissions: Permission[] = [
|
|||
delete: false,
|
||||
},
|
||||
{
|
||||
module: "Email Template",
|
||||
module: "Email Templates",
|
||||
list: false,
|
||||
add: false,
|
||||
edit: false,
|
||||
|
|
@ -147,9 +111,10 @@ const initialPermissions: Permission[] = [
|
|||
];
|
||||
|
||||
// Table component
|
||||
const AddEditRoleModal: React.FC = () => {
|
||||
const AddEditRolePage: React.FC = () => {
|
||||
const [permissions, setPermissions] =
|
||||
useState<Permission[]>(initialPermissions);
|
||||
const navigate = useNavigate(); // Initialize useNavigate
|
||||
|
||||
// Handle checkbox change
|
||||
const handleCheckboxChange = (module: string, action: keyof Permission) => {
|
||||
|
|
@ -162,122 +127,130 @@ const AddEditRoleModal: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
// Handle Back Navigation
|
||||
const handleBack = () => {
|
||||
navigate("/panel/role-list"); // Navigate back to Role List
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{ width: "100%", maxWidth: 1200, margin: "auto", mt: 4, px: 2 }}
|
||||
>
|
||||
{/* Title & Back Button Section */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#1976D2",
|
||||
color: "#fff",
|
||||
p: 2,
|
||||
borderRadius: "8px",
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={600}>
|
||||
Role Permissions
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
onClick={handleBack}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Table Container */}
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ maxWidth: 1000, margin: "auto", mt: 4 }}
|
||||
sx={{ borderRadius: "8px", overflow: "hidden" }}
|
||||
>
|
||||
<Table>
|
||||
{/* Table Head */}
|
||||
<TableHead>
|
||||
{/* Role Row with space-evenly */}
|
||||
<TableRow>
|
||||
<TableRow sx={{ backgroundColor: "#f5f5f5" }}>
|
||||
<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%",
|
||||
}}
|
||||
sx={{ fontWeight: "bold", width: "30%" }}
|
||||
>
|
||||
Module Name
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
backgroundColor: "#f5f5f5",
|
||||
fontWeight: "bold",
|
||||
width: "70%",
|
||||
}}
|
||||
sx={{ fontWeight: "bold", width: "70%" }}
|
||||
>
|
||||
Actions
|
||||
<Typography>Actions</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
{/* Table Body */}
|
||||
<TableBody>
|
||||
{permissions.map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableRow
|
||||
key={index}
|
||||
sx={{
|
||||
"&:nth-of-type(odd)": {
|
||||
backgroundColor: "#FAFAFA",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* Module Name */}
|
||||
<TableCell>{row.module}</TableCell>
|
||||
<TableCell sx={{ fontWeight: 500 }}>
|
||||
{row.module}
|
||||
</TableCell>
|
||||
|
||||
{/* Action Checkboxes */}
|
||||
<TableCell>
|
||||
<Box display="flex" gap={2}>
|
||||
<Grid
|
||||
container
|
||||
spacing={1}
|
||||
justifyContent="space-between"
|
||||
>
|
||||
{(
|
||||
[
|
||||
"list",
|
||||
"add",
|
||||
"edit",
|
||||
"view",
|
||||
"delete",
|
||||
] as (keyof Permission)[]
|
||||
).map((action) => (
|
||||
<Grid item key={action}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={row.list}
|
||||
checked={
|
||||
row[action]
|
||||
}
|
||||
onChange={() =>
|
||||
handleCheckboxChange(
|
||||
row.module,
|
||||
"list"
|
||||
action
|
||||
)
|
||||
}
|
||||
sx={{
|
||||
color: "#1976D2",
|
||||
}}
|
||||
/>
|
||||
<Checkbox
|
||||
checked={row.add}
|
||||
onChange={() =>
|
||||
handleCheckboxChange(
|
||||
row.module,
|
||||
"add"
|
||||
)
|
||||
}
|
||||
label={
|
||||
action
|
||||
.charAt(0)
|
||||
.toUpperCase() +
|
||||
action.slice(1)
|
||||
}
|
||||
/>
|
||||
<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>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddEditRoleModal;
|
||||
export default AddEditRolePage;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,151 @@
|
|||
// import React, { useEffect, useState } from "react";
|
||||
// import { Box, Button, Typography } from "@mui/material";
|
||||
// import AddEditRoleModal from "../../components/AddEditRoleModal";
|
||||
// import { useForm } from "react-hook-form";
|
||||
// import CustomTable, { Column } from "../../components/CustomTable";
|
||||
// import { useDispatch, useSelector } from "react-redux";
|
||||
// import { createRole, roleList } from "../../redux/slices/roleSlice";
|
||||
// import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
|
||||
// export default function RoleList() {
|
||||
// const [modalOpen, setModalOpen] = useState(false);
|
||||
// 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 dispatch = useDispatch<AppDispatch>();
|
||||
|
||||
// const roles = useSelector((state: RootState) => state.roleReducer.roles);
|
||||
|
||||
// useEffect(() => {
|
||||
// dispatch(roleList());
|
||||
// }, [dispatch]);
|
||||
|
||||
// const handleClickOpen = () => {
|
||||
// setRowData(null); // Reset row data when opening for new role
|
||||
// setModalOpen(!modalOpen);
|
||||
// };
|
||||
|
||||
// const handleCloseModal = () => {
|
||||
// setModalOpen(false);
|
||||
// setRowData(null);
|
||||
// reset();
|
||||
// };
|
||||
|
||||
// const handleCreate = async (data: {
|
||||
// name: string;
|
||||
// resource: {
|
||||
// moduleName: string;
|
||||
// moduleId: string;
|
||||
// permissions: string[];
|
||||
// }[];
|
||||
// }) => {
|
||||
// try {
|
||||
// await dispatch(createRole(data));
|
||||
// await dispatch(roleList()); // Refresh the list after creation
|
||||
// handleCloseModal();
|
||||
// } catch (error) {
|
||||
// console.error("Creation failed", error);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const categoryColumns: Column[] = [
|
||||
// { id: "srno", label: "Sr No" },
|
||||
// { id: "name", label: "Name" },
|
||||
// { id: "action", label: "Action", align: "center" },
|
||||
// ];
|
||||
|
||||
// const categoryRows = roles?.length
|
||||
// ? roles?.map(function (
|
||||
// role: {
|
||||
// id: string;
|
||||
// name: string;
|
||||
// // email: string;
|
||||
|
||||
// // phone: string;
|
||||
// // location?: string;
|
||||
// // managerAssigned?: string;
|
||||
// // vehicle?: string;
|
||||
// },
|
||||
// index: number
|
||||
// ) {
|
||||
// return {
|
||||
// id: role?.id,
|
||||
// srno: index + 1,
|
||||
// name: role?.name,
|
||||
// // email: user?.email,
|
||||
// // phone: user?.phone,
|
||||
// // location: user?.location,
|
||||
// // managerAssigned: user?.managerAssigned,
|
||||
// // vehicle: user?.vehicle,
|
||||
// };
|
||||
// })
|
||||
// : [];
|
||||
|
||||
// console.log("Category Rows:", categoryRows);
|
||||
|
||||
// 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 }}
|
||||
// >
|
||||
// Roles
|
||||
// </Typography>
|
||||
// <Button
|
||||
// variant="contained"
|
||||
// size="medium"
|
||||
// sx={{ textAlign: "right" }}
|
||||
// onClick={handleClickOpen}
|
||||
// >
|
||||
// Add Role
|
||||
// </Button>
|
||||
// </Box>
|
||||
|
||||
// <CustomTable
|
||||
// columns={categoryColumns}
|
||||
// rows={categoryRows}
|
||||
// setDeleteModal={setDeleteModal}
|
||||
// deleteModal={deleteModal}
|
||||
// setViewModal={setViewModal}
|
||||
// viewModal={viewModal}
|
||||
// setRowData={setRowData}
|
||||
// setModalOpen={setModalOpen}
|
||||
// />
|
||||
// {/* <AddEditRoleModal
|
||||
// open={modalOpen}
|
||||
// handleClose={handleCloseModal}
|
||||
// handleCreate={handleCreate}
|
||||
// editRow={rowData}
|
||||
// /> */}
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Box, Button, Typography } from "@mui/material";
|
||||
import { Box, Button, Typography, TextField, Chip } from "@mui/material";
|
||||
import AddEditRoleModal from "../../components/AddEditRoleModal";
|
||||
import PermissionsTable from "../../pages/PermissionTable";
|
||||
import { useForm } from "react-hook-form";
|
||||
import CustomTable, { Column } from "../../components/CustomTable";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { createRole, roleList } from "../../redux/slices/roleSlice";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import AddEditRolePage from "../AddEditRolePage";
|
||||
|
||||
export default function RoleList() {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
|
@ -14,8 +154,11 @@ export default function RoleList() {
|
|||
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 [showPermissions, setShowPermissions] = useState(false);
|
||||
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const roles = useSelector((state: RootState) => state.roleReducer.roles);
|
||||
|
||||
|
|
@ -24,8 +167,7 @@ export default function RoleList() {
|
|||
}, [dispatch]);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setRowData(null); // Reset row data when opening for new role
|
||||
setModalOpen(!modalOpen);
|
||||
navigate("/panel/permissions"); // Navigate to the correct route
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
|
|
@ -54,35 +196,28 @@ export default function RoleList() {
|
|||
const categoryColumns: Column[] = [
|
||||
{ id: "srno", label: "Sr No" },
|
||||
{ id: "name", label: "Name" },
|
||||
{ id: "status", label: "Status" },
|
||||
{ id: "action", label: "Action", align: "center" },
|
||||
];
|
||||
|
||||
const categoryRows = roles?.length
|
||||
? roles?.map(function (
|
||||
role: {
|
||||
id: string;
|
||||
name: string;
|
||||
// email: string;
|
||||
|
||||
// phone: string;
|
||||
// location?: string;
|
||||
// managerAssigned?: string;
|
||||
// vehicle?: string;
|
||||
},
|
||||
index: number
|
||||
) {
|
||||
return {
|
||||
id: role?.id,
|
||||
const categoryRows = roles?.map((role: Role, index: number) => ({
|
||||
id: role.id,
|
||||
srno: index + 1,
|
||||
name: role?.name,
|
||||
// email: user?.email,
|
||||
// phone: user?.phone,
|
||||
// location: user?.location,
|
||||
// managerAssigned: user?.managerAssigned,
|
||||
// vehicle: user?.vehicle,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
name: role.name,
|
||||
status: (
|
||||
<Chip
|
||||
label={role.status === 1 ? "Active" : "Inactive"} // ✅ Convert number to text
|
||||
color={role.status === 1 ? "primary" : "default"}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
width: "80px",
|
||||
textAlign: "center",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}));
|
||||
|
||||
console.log("Category Rows:", categoryRows);
|
||||
|
||||
|
|
@ -91,31 +226,32 @@ export default function RoleList() {
|
|||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: {
|
||||
sm: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h6"
|
||||
sx={{ mt: 2, fontWeight: 600 }}
|
||||
>
|
||||
Roles
|
||||
</Typography>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
size="small"
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
sx={{ width: "30%" }}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
sx={{ textAlign: "right" }}
|
||||
size="small"
|
||||
onClick={handleClickOpen}
|
||||
>
|
||||
Add Role
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{showPermissions ? (
|
||||
<AddEditRolePage />
|
||||
) : (
|
||||
<CustomTable
|
||||
columns={categoryColumns}
|
||||
rows={categoryRows}
|
||||
|
|
@ -126,12 +262,7 @@ export default function RoleList() {
|
|||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
/>
|
||||
{/* <AddEditRoleModal
|
||||
open={modalOpen}
|
||||
handleClose={handleCloseModal}
|
||||
handleCreate={handleCreate}
|
||||
editRow={rowData}
|
||||
/> */}
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import React, { lazy, Suspense } from "react";
|
|||
import LoadingComponent from "./components/Loading";
|
||||
import DashboardLayout from "./layouts/DashboardLayout";
|
||||
import RoleList from "./pages/RoleList";
|
||||
import AddEditRolePage from "./pages/AddEditRolePage";
|
||||
|
||||
// Page imports
|
||||
const Login = lazy(() => import("./pages/Auth/Login"));
|
||||
|
|
@ -93,7 +94,15 @@ export default function AppRouter() {
|
|||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="permissions"
|
||||
element={
|
||||
<ProtectedRoute
|
||||
caps={[]}
|
||||
component={<AddEditRolePage />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="profile"
|
||||
element={
|
||||
|
|
|
|||
Loading…
Reference in a new issue