diff --git a/src/components/CustomTable/index.tsx b/src/components/CustomTable/index.tsx index 40595af..f030a1c 100644 --- a/src/components/CustomTable/index.tsx +++ b/src/components/CustomTable/index.tsx @@ -7,22 +7,10 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import Paper, { paperClasses } from "@mui/material/Paper"; -import { adminList, deleteAdmin } from "../../redux/slices/adminSlice"; -import { useDispatch } from "react-redux"; -import { - Box, - Button, - dividerClasses, - IconButton, - listClasses, - Menu, -} from "@mui/material"; +import { Box, Button, IconButton, Menu } from "@mui/material"; import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"; -import DeleteModal from "../Modals/DeleteModal"; +import { useDispatch } from "react-redux"; // Correct the import for dispatch import { AppDispatch } from "../../redux/store/store"; -import ViewModal from "../Modals/ViewModal"; - -// Styled components for customization const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { backgroundColor: " #1565c0", @@ -50,17 +38,22 @@ export interface Column { interface Row { [key: string]: any; + status: number; + statusValue: any; } interface CustomTableProps { columns: Column[]; rows: Row[]; setDeleteModal: Function; - setRowData: Function; - setModalOpen: Function; + // setRowData: Function; + // setModalOpen: Function; viewModal: boolean; setViewModal: Function; deleteModal: boolean; + setRowData: React.Dispatch>; // Adjust this type if needed + setModalOpen: React.Dispatch>; + handleStatusToggle: (id: string, currentStatus: number) => void; } const CustomTable: React.FC = ({ @@ -72,43 +65,28 @@ const CustomTable: React.FC = ({ setRowData, setViewModal, setModalOpen, + handleStatusToggle, }) => { - const dispatch = useDispatch(); const [anchorEl, setAnchorEl] = React.useState(null); const [selectedRow, setSelectedRow] = React.useState(null); const open = Boolean(anchorEl); + ///const dispatch = useDispatch(); // Initialize dispatch + // Handle menu actions const handleClick = (event: React.MouseEvent, row: Row) => { setAnchorEl(event.currentTarget); - setSelectedRow(row); // Ensure the row data is set + setSelectedRow(row); }; const handleClose = () => { setAnchorEl(null); }; - - const isImage = (value: any) => { - if (typeof value === "string") { - return value.startsWith("http") || value.startsWith("data:image"); // Check for URL or base64 image - } - return false; - }; - - const handleDeleteButton = (id: string | undefined) => { - if (!id) console.error("ID not found", id); - - dispatch(deleteAdmin(id || "")); - setDeleteModal(false); // Close the modal only after deletion - handleClose(); - }; - - const handleViewButton = (id: string | undefined) => { - if (!id) console.error("ID not found", id); - - dispatch(adminList()); - setViewModal(false); - }; + const dispatch = useDispatch(); + // Handle status toggle logic + // const handleStatusToggle = (id: string, status: number) => { + // dispatch(toggleStatus({ id, status })); // Dispatch the action to update status + // }; return ( @@ -119,11 +97,7 @@ const CustomTable: React.FC = ({ {columns.map((column) => ( {column.label} @@ -136,33 +110,15 @@ const CustomTable: React.FC = ({ {columns.map((column) => ( - {isImage(row[column.id]) ? ( - Row - ) : column.id !== "action" ? ( + {column.id !== "action" ? ( row[column.id] ) : ( { - handleClick(e, row); - setRowData(row); // Store the selected row - }} + onClick={(e) => + handleClick(e, row) + } > @@ -176,98 +132,46 @@ const CustomTable: React.FC = ({ {/* Menu Actions */} - {open && ( + {open && selectedRow && ( - { + e.stopPropagation(); + setViewModal(true); }} > - - {viewModal && ( - - handleViewButton(selectedRow?.id) - } - open={viewModal} - setViewModal={setViewModal} - id={selectedRow?.id} - /> - )} - + View + + + {/* This button now toggles the status based on the current status */} + - - {deleteModal && ( - - handleDeleteButton(selectedRow?.id) - } - open={deleteModal} - setDeleteModal={setDeleteModal} - id={selectedRow?.id} - /> - )} - + )} diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 3806829..563cea5 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -41,7 +41,7 @@ export default function Header() { sx={{ width: "360px", height: "44px", - backgroundColor: "#303030", + backgroundColor: "#FFFFFF", borderRadius: "8px", border: "1px solid #424242", display: "flex", @@ -49,9 +49,9 @@ export default function Header() { padding: "0 12px", }} > - + @@ -66,22 +66,22 @@ export default function Header() { - + - + Momah {/* Dropdown Icon */} - + {/* */} {showNotifications && (
Weekly - +
diff --git a/src/components/ResourcePieChart/index.tsx b/src/components/ResourcePieChart/index.tsx index af96550..fa14a6d 100644 --- a/src/components/ResourcePieChart/index.tsx +++ b/src/components/ResourcePieChart/index.tsx @@ -32,12 +32,21 @@ export default function ResourcePieChart() { flexGrow: 1, width: "100%", height: "100%", - backgroundColor: "#202020", - + backgroundColor: "#F2F2F2", }} > - + Resources @@ -84,7 +93,7 @@ export default function ResourcePieChart() { borderRadius: "50%", }} /> - + {entry.title} diff --git a/src/components/SessionsChart/index.tsx b/src/components/SessionsChart/index.tsx index d4cd487..22c7ddb 100644 --- a/src/components/SessionsChart/index.tsx +++ b/src/components/SessionsChart/index.tsx @@ -12,16 +12,15 @@ export default function SessionsChart() { sx={{ width: "100%", height: "100%", - backgroundColor: "#202020", - p: 2, - + backgroundColor: "#F2F2F2", + p: 2, }} > Delhi NCR EV Station - + {/* Grid container for the four boxes */} @@ -87,8 +86,8 @@ export default function SessionsChart() { height: "84px", borderRadius: "8px", p: "12px 16px", - backgroundColor: "#3B3B3B", - color: "#F2F2F2", + backgroundColor: "#FFFFFF", + color: "#202020", }} > {title} @@ -32,7 +32,7 @@ export default function StatCard({ title, value }: StatCardProps) {
Monthly - +
{ const [permissions, setPermissions] = useState(initialPermissions); + const [roleName, setRoleName] = useState(""); + const [openSnackbar, setOpenSnackbar] = useState(false); // For snackbar (success message) const navigate = useNavigate(); // Initialize useNavigate + const dispatch = useDispatch(); // Type the dispatch function with AppDispatch + + const { loading } = useSelector( + (state: RootState) => state.roleReducer.roles + ); // Handle checkbox change const handleCheckboxChange = (module: string, action: keyof Permission) => { @@ -127,11 +76,57 @@ const AddEditRolePage: React.FC = () => { ); }; + // Handle role name input change + const handleRoleNameChange = ( + event: React.ChangeEvent + ) => { + setRoleName(event.target.value); + }; + // Handle Back Navigation const handleBack = () => { navigate("/panel/role-list"); // Navigate back to Role List }; + // Handle form submission (adding role) + const handleSubmit = async () => { + if (!roleName.trim()) { + alert("Role name is required"); + return; + } + + const newRole = { + name: roleName, + resource: permissions.map((perm) => ({ + moduleName: perm.module, + permissions: [ + perm.list ? "list" : "", + perm.add ? "add" : "", + perm.edit ? "edit" : "", + perm.view ? "view" : "", + perm.delete ? "delete" : "", + ].filter(Boolean), + moduleId: perm.module, // Assuming the module name can serve as the moduleId or use a unique id + })), + }; + + try { + // Dispatch the createRole action to create the new role + await dispatch(createRole(newRole)); + + // Show success message + toast.success("Role created successfully!"); + setOpenSnackbar(true); + + // Reset the form + setRoleName(""); + setPermissions(initialPermissions); + navigate("/panel/role-list"); + } catch (error) { + console.error("Error creating role:", error); + toast.error("Error creating role. Please try again."); + } + }; return ( { + {/* Role Name Input */} + + + + {/* Table Container */} { }, }} > - {/* Module Name */} {row.module} - - {/* Action Checkboxes */} - {( - [ - "list", - "add", - "edit", - "view", - "delete", - ] as (keyof Permission)[] - ).map((action) => ( + {[ + "list", + "add", + "edit", + "view", + "delete", + ].map((action) => ( { onChange={() => handleCheckboxChange( row.module, - action + action as keyof Permission ) } sx={{ @@ -249,6 +251,27 @@ const AddEditRolePage: React.FC = () => { + + {/* Submit Button */} + + + + + {/* Snackbar for success message */} + setOpenSnackbar(false)} + message="Role added successfully!" + + /> ); }; diff --git a/src/pages/AdminList/index.tsx b/src/pages/AdminList/index.tsx index 69aa05f..f554794 100644 --- a/src/pages/AdminList/index.tsx +++ b/src/pages/AdminList/index.tsx @@ -113,7 +113,7 @@ export default function AdminList() { sx={{ width: "100%", display: "flex", - flexDirection: { xs: "column", sm: "row" }, + flexDirection: { xs: "column", sm: "row" }, justifyContent: "space-between", alignItems: "center", mb: 2, // Add margin bottom for spacing @@ -122,7 +122,7 @@ export default function AdminList() { Admins @@ -131,7 +131,7 @@ export default function AdminList() { size="medium" sx={{ textAlign: "center", - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", sm: "auto" }, }} onClick={handleClickOpen} > 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 0639790..0feeb32 100644 --- a/src/pages/RoleList/index.tsx +++ b/src/pages/RoleList/index.tsx @@ -1,3 +1,143 @@ +import React, { useEffect, useState } from "react"; +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, + toggleStatus, +} 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); + const { reset } = useForm(); + + 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); + + useEffect(() => { + dispatch(roleList()); + }, [dispatch]); + + const handleClickOpen = () => { + navigate("/panel/permissions"); // Navigate to the correct route + }; + + 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: "status", label: "Status" }, + { id: "action", label: "Action", align: "center" }, + ]; + + const categoryRows = roles?.map((role: Role, index: number) => ({ + id: role.id, + srno: index + 1, + name: role.name, + status: ( + + ), + statusValue: role.status, + })); + + return ( + <> + + setSearchTerm(e.target.value)} + sx={{ width: "30%" }} + /> + + + + {showPermissions ? ( + + ) : ( + { + // Correct logic to toggle between active and inactive + const updatedStatus = currentStatus === 1 ? 0 : 1; + dispatch(toggleStatus({ id, status: updatedStatus })); + }} + /> + )} + + ); +} + // import React, { useEffect, useState } from "react"; // import { Box, Button, Typography } from "@mui/material"; // import AddEditRoleModal from "../../components/AddEditRoleModal"; @@ -135,134 +275,3 @@ // // ); // } -import React, { useEffect, useState } from "react"; -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); - const { reset } = useForm(); - - 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); - - useEffect(() => { - dispatch(roleList()); - }, [dispatch]); - - const handleClickOpen = () => { - navigate("/panel/permissions"); // Navigate to the correct route - }; - - 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: "status", label: "Status" }, - { id: "action", label: "Action", align: "center" }, - ]; - - const categoryRows = roles?.map((role: Role, index: number) => ({ - id: role.id, - srno: index + 1, - name: role.name, - status: ( - - ), - })); - - console.log("Category Rows:", categoryRows); - - return ( - <> - - setSearchTerm(e.target.value)} - sx={{ width: "30%" }} - /> - - - - {showPermissions ? ( - - ) : ( - - )} - - ); -} diff --git a/src/pages/UserList/index.tsx b/src/pages/UserList/index.tsx index c6e284e..476bd59 100644 --- a/src/pages/UserList/index.tsx +++ b/src/pages/UserList/index.tsx @@ -761,7 +761,7 @@ export default function UserList() { id: string; name: string; email: string; - + phone: string; // location?: string; // managerAssigned?: string; diff --git a/src/redux/slices/roleSlice.ts b/src/redux/slices/roleSlice.ts index bc1cef5..797014c 100644 --- a/src/redux/slices/roleSlice.ts +++ b/src/redux/slices/roleSlice.ts @@ -12,6 +12,7 @@ interface Role { moduleId: string; permissions: string[]; }[]; + status: number; } interface RoleState { @@ -71,6 +72,22 @@ export const createRole = createAsyncThunk< } }); +export const toggleStatus = createAsyncThunk< + Role, + { id: string; status: number }, // status now expects a number (0 or 1) + { rejectValue: string } +>("/toggleRoleStatus", async ({ id, status }, { rejectWithValue }) => { + try { + const response = await http.patch(`${id}`, { status }); + console.log("API Response:", response.data); + return response.data; + } catch (error: any) { + return rejectWithValue( + error.response?.data?.message || "An error occurred" + ); + } +}); + const roleSlice = createSlice({ name: "fetchRoles", initialState, @@ -108,7 +125,28 @@ const roleSlice = createSlice({ state.loading = false; state.error = action.payload || "Failed to create role"; } - ); + ) + .addCase( + toggleStatus.fulfilled, + (state, action: PayloadAction) => { + state.loading = false; + const updatedRole = action.payload; + + const index = state.roles.findIndex( + (role) => role.id === updatedRole.id + ); + if (index >= 0) { + state.roles[index] = { + ...state.roles[index], + status: updatedRole.status, + }; + } + } + ) + .addCase(toggleStatus.rejected, (state, action) => { + state.loading = false; + state.error = action.payload || "Failed to toggle role status"; + }); }, }); diff --git a/src/router.tsx b/src/router.tsx index f8fc85d..d2ce56d 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -14,6 +14,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[];