From b6729564aa2acf5b391d388ef2fc9ff9b57fe753 Mon Sep 17 00:00:00 2001 From: Harsh Gogia Date: Thu, 27 Feb 2025 21:16:53 +0530 Subject: [PATCH 1/2] roles-list --- src/pages/PermissionTable/index.tsx | 135 +++++++++++++++++++++++++++ src/pages/RoleList/index.tsx | 136 +++++++++++++++------------- src/router.tsx | 6 ++ 3 files changed, 216 insertions(+), 61 deletions(-) create mode 100644 src/pages/PermissionTable/index.tsx diff --git a/src/pages/PermissionTable/index.tsx b/src/pages/PermissionTable/index.tsx new file mode 100644 index 0000000..57ac2fb --- /dev/null +++ b/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(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 ( + + {/* Title & Back Button Section */} + + + Role Permissions + + + + + {/* Table Container */} + + + {/* Table Head */} + + + Module Name + + Actions + + + + + {/* Table Body */} + + {permissions.map((row, index) => ( + + {/* Module Name */} + {row.module} + + {/* Action Checkboxes */} + + + {(["list", "add", "edit", "view", "delete"] as (keyof Permission)[]).map( + (action) => ( + + handleCheckboxChange(row.module, action)} + sx={{ color: "#1976D2" }} + /> + } + label={action.charAt(0).toUpperCase() + action.slice(1)} + /> + + ) + )} + + + + ))} + +
+ + + ); +}; + +export default PermissionsTable; diff --git a/src/pages/RoleList/index.tsx b/src/pages/RoleList/index.tsx index 416d0b5..1d1ec48 100644 --- a/src/pages/RoleList/index.tsx +++ b/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(false); const [viewModal, setViewModal] = React.useState(false); const [rowData, setRowData] = React.useState(null); + const [searchTerm, setSearchTerm] = useState(""); + const [showPermissions, setShowPermissions] = useState(false); const dispatch = useDispatch(); + 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 - setModalOpen(true); + navigate("/panel/permissions");// Navigate to the correct route }; - + 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: { - 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, - }; - }) + role: { + id: string; + name: string; + status: string; + }, + index: number + ) { + return { + id: role?.id, + srno: index + 1, + name: role?.name, + status: role?.status, + }; + }) : []; console.log("Category Rows:", categoryRows); return ( <> + {/* + Roles & Permission + Dashboard + */} + - - Roles - - - - - + setSearchTerm(e.target.value)} + sx={{ width: "30%" }} /> + + + + {showPermissions ? ( + + ) : ( + + )} + 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() { /> } /> + } />} + /> + Date: Thu, 27 Feb 2025 22:58:16 +0530 Subject: [PATCH 2/2] roles-list --- src/pages/RoleList/index.tsx | 83 ++++++++++++++---------------------- 1 file changed, 31 insertions(+), 52 deletions(-) diff --git a/src/pages/RoleList/index.tsx b/src/pages/RoleList/index.tsx index 1d1ec48..c85a68c 100644 --- a/src/pages/RoleList/index.tsx +++ b/src/pages/RoleList/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { Box, Button, Typography, TextField } 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"; @@ -29,9 +29,9 @@ export default function RoleList() { }, [dispatch]); const handleClickOpen = () => { - navigate("/panel/permissions");// Navigate to the correct route + navigate("/panel/permissions"); // Navigate to the correct route }; - + const handleCloseModal = () => { setModalOpen(false); setRowData(null); @@ -62,43 +62,26 @@ export default function RoleList() { { id: "action", label: "Action", align: "center" }, ]; - const categoryRows = roles?.length - ? roles?.map(function ( - role: { - id: string; - name: string; - status: string; - }, - index: number - ) { - return { - id: role?.id, - srno: index + 1, - name: role?.name, - status: role?.status, - }; - }) - : []; + const categoryRows = roles?.map((role: Role, index: number) => ({ + id: role.id, + srno: index + 1, + name: role.name, + status: ( + + ), + })); + + console.log("Category Rows:", categoryRows); return ( <> - {/* - Roles & Permission - Dashboard - */} - - setSearchTerm(e.target.value)} - sx={{ width: "30%" }} - /> - - + setSearchTerm(e.target.value)} + sx={{ width: "30%" }} + /> + + {showPermissions ? (