src/pages/PermissionTable/index.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Checkbox,
+  Typography,
+  Box,
+  Grid,
+  FormControlLabel,
+  Button,
+} from "@mui/material";
+import { useNavigate } from "react-router-dom"; // Import useNavigate
+
+// 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 & 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: "Orders", list: false, add: false, edit: false, view: false, delete: false },
+  { module: "Discounts", list: false, add: false, edit: false, view: false, delete: false },
+  { module: "Transaction History", list: false, add: false, edit: false, view: false, delete: false },
+  { module: "Commission", list: false, add: false, edit: false, view: false, delete: false },
+  { module: "Email Templates", list: false, add: false, edit: false, view: false, delete: false },
+];
+
+// Table component
+const PermissionsTable: React.FC = () => {
+  const [permissions, setPermissions] = useState<Permission[]>(initialPermissions);
+  const navigate = useNavigate(); // Initialize useNavigate
+
+  // Handle checkbox change
+  const handleCheckboxChange = (module: string, action: keyof Permission) => {
+    setPermissions((prevPermissions) =>
+      prevPermissions.map((perm) =>
+        perm.module === module ? { ...perm, [action]: !perm[action] } : perm
+      )
+    );
+  };
+
+  // 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={{ borderRadius: "8px", overflow: "hidden" }}>
+        <Table>
+          {/* Table Head */}
+          <TableHead>
+            <TableRow sx={{ backgroundColor: "#f5f5f5" }}>
+              <TableCell sx={{ fontWeight: "bold", width: "30%" }}>Module Name</TableCell>
+              <TableCell sx={{ fontWeight: "bold", width: "70%" }}>
+                <Typography>Actions</Typography>
+              </TableCell>
+            </TableRow>
+          </TableHead>
+
+          {/* Table Body */}
+          <TableBody>
+            {permissions.map((row, index) => (
+              <TableRow key={index} sx={{ "&:nth-of-type(odd)": { backgroundColor: "#FAFAFA" } }}>
+                {/* Module Name */}
+                <TableCell sx={{ fontWeight: 500 }}>{row.module}</TableCell>
+
+                {/* Action Checkboxes */}
+                <TableCell>
+                  <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[action]}
+                                onChange={() => handleCheckboxChange(row.module, action)}
+                                sx={{ color: "#1976D2" }}
+                              />
+                            }
+                            label={action.charAt(0).toUpperCase() + action.slice(1)}
+                          />
+                        </Grid>
+                      )
+                    )}
+                  </Grid>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+export default PermissionsTable;

src/pages/RoleList/index.tsx

@@ -1,11 +1,13 @@
 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";
 
 export default function RoleList() {
 	const [modalOpen, setModalOpen] = useState(false);
@@ -14,8 +16,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 +29,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(true);
 	};
 
 	const handleCloseModal = () => {
@@ -54,35 +58,25 @@ 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 +85,28 @@ 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"
+				<Button variant="contained" size="small" onClick={handleClickOpen}>
-					size="medium"
-					sx={{ textAlign: "right" }}
-					onClick={handleClickOpen}
-				>
 					Add Role
 				</Button>
 			</Box>
 
+			{showPermissions ? (
+				<PermissionsTable />
+			) : (
 				<CustomTable
 					columns={categoryColumns}
 					rows={categoryRows}
@@ -126,6 +117,8 @@ export default function RoleList() {
 					setRowData={setRowData}
 					setModalOpen={setModalOpen}
 				/>
+			)}
+
 			<AddEditRoleModal
 				open={modalOpen}
 				handleClose={handleCloseModal}

src/router.tsx

@@ -13,6 +13,7 @@ const AdminList = lazy(() => import("./pages/AdminList"));
 const ProfilePage = lazy(() => import("./pages/ProfilePage"));
 const NotFoundPage = lazy(() => import("./pages/NotFound"));
 const UserList = lazy(() => import("./pages/UserList"));
+const PermissionsTable = lazy(() => import("./pages/PermissionTable"));
 
 interface ProtectedRouteProps {
 	caps: string[];
@@ -93,6 +94,11 @@ export default function AppRouter() {
 							/>
 						}
 					/>
+						<Route 
+                 path="permissions"
+                     element={<ProtectedRoute caps={[]} component={<PermissionsTable />} />}
+                              />
+
 
 					<Route
 						path="profile"