src/pages/AddEditRolePage/index.tsx

@@ -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",
+		module: "Transaction 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,
@@ -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 sx={{ backgroundColor: "#f5f5f5" }}>
-					<TableRow>
 							<TableCell
-							colSpan={2}
+								sx={{ fontWeight: "bold", width: "30%" }}
-							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={{
+								sx={{ fontWeight: "bold", width: "70%" }}
-								backgroundColor: "#f5f5f5",
-								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}
+													label={
-										onChange={() =>
+														action
-											handleCheckboxChange(
+															.charAt(0)
-												row.module,
+															.toUpperCase() +
-												"add"
+														action.slice(1)
-											)
 													}
 												/>
-									<Checkbox
+											</Grid>
-										checked={row.edit}
+										))}
-										onChange={() =>
+									</Grid>
-											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>
+		</Box>
 	);
 };
 
-export default AddEditRoleModal;
+export default AddEditRolePage;

src/pages/RoleList/index.tsx

@@ -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
+		navigate("/panel/permissions"); // Navigate to the correct route
-		setModalOpen(!modalOpen);
 	};
 
 	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
+	const categoryRows = roles?.map((role: Role, index: number) => ({
-		? roles?.map(function (
+		id: role.id,
-				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,
+		name: role.name,
-					// email: user?.email,
+		status: (
-					// phone: user?.phone,
+			<Chip
-					// location: user?.location,
+				label={role.status === 1 ? "Active" : "Inactive"} // ✅ Convert number to text
-					// managerAssigned: user?.managerAssigned,
+				color={role.status === 1 ? "primary" : "default"}
-					// vehicle: user?.vehicle,
+				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
+				<TextField
-					component="h2"
+					variant="outlined"
-					variant="h6"
+					size="small"
-					sx={{ mt: 2, fontWeight: 600 }}
+					placeholder="Search..."
-				>
+					value={searchTerm}
-					Roles
+					onChange={(e) => setSearchTerm(e.target.value)}
-				</Typography>
+					sx={{ width: "30%" }}
+				/>
 				<Button
 					variant="contained"
-					size="medium"
+					size="small"
-					sx={{ textAlign: "right" }}
 					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}
-			/> */}
 		</>
 	);
 }

src/router.tsx

@@ -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={