roles-list

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 } 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,10 +29,9 @@ 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 = () => {
 		setModalOpen(false);
 		setRowData(null);
@@ -54,78 +58,88 @@ 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: {
+			role: {
-					id: string;
+				id: string;
-					name: string;
+				name: string;
-					// email: string;
+				status: string;
-
+			},
-					// phone: string;
+			index: number
-					// location?: string;
+		) {
-					// managerAssigned?: string;
+			return {
-					// vehicle?: string;
+				id: role?.id,
-				},
+				srno: index + 1,
-				index: number
+				name: role?.name,
-		  ) {
+				status: role?.status,
-				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%",
+					backgroundColor: "#E3F2FD", // Light sky blue color
+					p: 2,
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					mb: 2,
+			}}
+		>
+			<Typography variant="h6" fontWeight={600}>Roles & Permission</Typography>
+			<Typography variant="body1">Dashboard</Typography>
+		</Box> */}
+
 			<Box
 				sx={{
 					width: "100%",
-					maxWidth: {
+					display: "flex",
-						sm: "100%",
+					justifyContent: "space-between",
-						display: "flex",
+					alignItems: "center",
-						justifyContent: "space-between",
+					mb: 2,
-						alignItems: "center",
+			}}
-					},
+		>
-				}}
+			<TextField
-			>
+				variant="outlined"
-				<Typography
+				size="small"
-					component="h2"
+				placeholder="Search..."
-					variant="h6"
+				value={searchTerm}
-					sx={{ mt: 2, fontWeight: 600 }}
+				onChange={(e) => setSearchTerm(e.target.value)}
-				>
+				sx={{ width: "30%" }}
-					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}
 			/>
+			<Button
+				variant="contained"
+				size="small"
+				onClick={handleClickOpen}
+			>
+				Add Role
+			</Button>
+		</Box>
+
+			{showPermissions ? (
+				<PermissionsTable />
+			) : (
+				<CustomTable
+					columns={categoryColumns}
+					rows={categoryRows}
+					setDeleteModal={setDeleteModal}
+					deleteModal={deleteModal}
+					setViewModal={setViewModal}
+					viewModal={viewModal}
+					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"