diff --git a/src/components/AddEditRoleModal/index.tsx b/src/components/AddEditRoleModal/index.tsx deleted file mode 100644 index 7b0206a..0000000 --- a/src/components/AddEditRoleModal/index.tsx +++ /dev/null @@ -1,300 +0,0 @@ -import React, { useEffect } from "react"; -import { - Box, - Button, - Checkbox, - Dialog, - DialogActions, - DialogContent, - DialogTitle, - FormControl, - FormControlLabel, - FormHelperText, - FormLabel, - InputLabel, - MenuItem, - Select, - TextField, -} from "@mui/material"; -import CloseIcon from "@mui/icons-material/Close"; -import { useForm, Controller } from "react-hook-form"; - -interface AddRoleModalProps { - open: boolean; - handleClose: () => void; - handleCreate: (data: FormData) => void; - handleUpdate: ( - id: string, - name: string, - resource: { - moduleName: string; - moduleId: string; - permissions: string[]; - }[] - ) => void; - editRow: any; - data: { - resource: { - moduleName: string; - moduleId: string; - permissions: string[]; - }[]; - }; // Assuming `data` is passed as a prop -} - -interface FormData { - name: string; - resource: { - moduleName: string; - moduleId: string; - permissions: string[]; - }[]; -} - -const AddRoleModal: React.FC = ({ - open, - handleClose, - handleCreate, - handleUpdate, - editRow, - data, -}) => { - const { - control, - handleSubmit, - formState: { errors }, - setValue, - reset, - getValues, // Access getValues from the form methods here - } = useForm({ - defaultValues: { - name: "", - resource: [], // Ensure resource is initialized as an empty array - }, - }); - - - useEffect(() => { - if (editRow) { - setValue("name", editRow.name); - setValue("resource", editRow.resource); - } - }, [editRow, setValue]); - - // Handles permissions checkbox change for a specific resource - const handlePermissionChange = ( - resourceIndex: number, - permission: string, - checked: boolean - ) => { - const updatedResources = [...getValues().resource]; // Use getValues to get the current form values - const resource = updatedResources[resourceIndex]; - - if (checked) { - // Add permission if checked - resource.permissions = [ - ...new Set([...resource.permissions, permission]), - ]; - } else { - // Remove permission if unchecked - resource.permissions = resource.permissions.filter( - (p) => p !== permission - ); - } - - setValue("resource", updatedResources); // Update the resource field in form state - }; - - const onSubmit = (data: FormData) => { - if (editRow) { - handleUpdate(editRow.id, data.name, data.resource); - } else { - handleCreate(data); - } - - handleClose(); - reset(); - }; - - return ( - - - {editRow ? "Edit Role" : "Add Role"} - - - - - - - {/* Role Name Field */} - ( - - )} - /> - - {/* Resource Field */} - ( - - Resource - - - {errors.resource?.message} - - - )} - /> - - {/* Permissions Checkbox Fields for each resource */} - {getValues().resource && - getValues().resource.length > 0 && - getValues().resource.map((resource, resourceIndex) => ( - - - - {resource.moduleName} Permissions - - - handlePermissionChange( - resourceIndex, - "view", - e.target.checked - ) - } - /> - } - label="View" - /> - - handlePermissionChange( - resourceIndex, - "edit", - e.target.checked - ) - } - /> - } - label="Edit" - /> - - handlePermissionChange( - resourceIndex, - "delete", - e.target.checked - ) - } - /> - } - label="Delete" - /> - - { - errors.resource?.[resourceIndex] - ?.permissions?.message - } - - - - ))} - - - - - - - - ); -}; - -export default AddRoleModal; diff --git a/src/components/CustomTable/index.tsx b/src/components/CustomTable/index.tsx index 037e03d..40595af 100644 --- a/src/components/CustomTable/index.tsx +++ b/src/components/CustomTable/index.tsx @@ -73,7 +73,6 @@ const CustomTable: React.FC = ({ setViewModal, setModalOpen, }) => { - // console.log("columnsss", columns, rows) const dispatch = useDispatch(); const [anchorEl, setAnchorEl] = React.useState(null); const [selectedRow, setSelectedRow] = React.useState(null); @@ -112,56 +111,71 @@ const CustomTable: React.FC = ({ }; return ( - - - - - {columns.map((column) => ( - - {column.label} - - ))} - - - - {rows.map((row, rowIndex) => ( - + + +
+ + {columns.map((column) => ( - {isImage(row[column.id]) ? ( - Row - ) : column.id !== "action" ? ( - row[column.id] - ) : ( - { - handleClick(e, row); - setRowData(row); // Store the selected row - }} - > - - - )} + {column.label} ))} - - ))} - -
+ + + + {rows.map((row, rowIndex) => ( + + {columns.map((column) => ( + + {isImage(row[column.id]) ? ( + Row + ) : column.id !== "action" ? ( + row[column.id] + ) : ( + { + handleClick(e, row); + setRowData(row); // Store the selected row + }} + > + + + )} + + ))} + + ))} + + + + + {/* Menu Actions */} {open && ( = ({ )} - + ); }; diff --git a/src/components/LineChartCard/index.tsx b/src/components/LineChartCard/index.tsx index a8acfa0..8f73bcf 100644 --- a/src/components/LineChartCard/index.tsx +++ b/src/components/LineChartCard/index.tsx @@ -43,7 +43,7 @@ export default function LineChartCard() { return (
theme.spacing(2) }} > {data.map((card, index) => ( diff --git a/src/components/MenuContent/index.tsx b/src/components/MenuContent/index.tsx index 5d58f3c..794a33b 100644 --- a/src/components/MenuContent/index.tsx +++ b/src/components/MenuContent/index.tsx @@ -13,35 +13,10 @@ import { RootState } from "../../redux/store/store"; import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined"; import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined"; -const baseMenuItems = [ - { - text: "Dashboard", - icon: , - url: "/panel/dashboard", - }, - { - text: "Admins", - icon: , - url: "/panel/admin-list", - }, - { - text: "Users", - icon: , - url: "/panel/user-list", - }, - { - text: "Roles", - icon: , - url: "/panel/role-list", - }, -]; - //Eknoor singh and Jaanvi //date:- 12-Feb-2025 //Made a different variable for super admin to access all the details. - - type PropType = { hidden: boolean; }; @@ -51,24 +26,34 @@ export default function MenuContent({ hidden }: PropType) { const userRole = useSelector( (state: RootState) => state.profileReducer.user?.userType ); + const baseMenuItems = [ + { + text: "Dashboard", + icon: , + url: "/panel/dashboard", + }, + userRole === "superadmin" && { + text: "Admins", + icon: , + url: "/panel/admin-list", + }, + userRole === "admin" && { + text: "Users", + icon: , + url: "/panel/user-list", + }, + userRole === "superadmin" && { + text: "Roles", + icon: , + url: "/panel/role-list", + }, + ]; - - // const mainListItems = [ - // ...baseMenuItems, - // // ...(userRole === "superadmin" - // // ? [ - // // // { - // // // text: "Admin List", - // // // icon: , - // // // url: "/panel/admin-list", - // // // }, - // // ] - // // : []), - // ]; + const filteredMenuItems = baseMenuItems.filter(Boolean); return ( - {baseMenuItems.map((item, index) => ( + {filteredMenuItems.map((item, index) => ( diff --git a/src/components/SessionsChart/index.tsx b/src/components/SessionsChart/index.tsx index e47febc..d4cd487 100644 --- a/src/components/SessionsChart/index.tsx +++ b/src/components/SessionsChart/index.tsx @@ -11,9 +11,10 @@ export default function SessionsChart() { variant="outlined" sx={{ width: "100%", - height: "90%", + height: "100%", backgroundColor: "#202020", p: 2, + }} > diff --git a/src/components/barChartCard/index.tsx b/src/components/barChartCard/index.tsx index 80db70e..4138bf6 100644 --- a/src/components/barChartCard/index.tsx +++ b/src/components/barChartCard/index.tsx @@ -30,7 +30,7 @@ export default function RoundedBarChart() { return (
+ variant="h6" + align="left" + color="#FFFFFF" + sx={{ + fontFamily: "Gilroy", + fontWeight: 500, + fontSize: "18px", + lineHeight: "24px", + }} + > Charge Stats diff --git a/src/layouts/DashboardLayout/index.tsx b/src/layouts/DashboardLayout/index.tsx index 165d39e..6d2ad96 100644 --- a/src/layouts/DashboardLayout/index.tsx +++ b/src/layouts/DashboardLayout/index.tsx @@ -1,56 +1,72 @@ -// src/common/components/Layout - -import * as React from 'react'; -import { Box, Stack } from '@mui/material'; -import { Outlet } from 'react-router-dom'; -import SideMenu from '../../components/SideMenu'; -import AppNavbar from '../../components/AppNavbar'; -import Header from '../../components/Header'; -import AppTheme from '../../shared-theme/AppTheme'; +import * as React from "react"; +import { Box, Stack } from "@mui/material"; +import { Outlet } from "react-router-dom"; +import SideMenu from "../../components/SideMenu"; +import AppNavbar from "../../components/AppNavbar"; +import Header from "../../components/Header"; +import AppTheme from "../../shared-theme/AppTheme"; interface LayoutProps { - customStyles?: React.CSSProperties; + customStyles?: React.CSSProperties; } const DashboardLayout: React.FC = ({ customStyles }) => { - return ( - - - - - ({ - display: "flex", - height: '100vh', - flexGrow: 1, - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)` - : theme.palette.background.default, - overflow: 'auto', - ...customStyles, - })} - > - + + {/* SideMenu - Responsive, shown only on large screens */} + + + - alignItems: 'center', - mx: 3, - pb: 5, - mt: { xs: 8, md: 0 }, - }} - > -
- - - - - - ); + {/* Navbar - Always visible */} + + + ({ + display: "flex", + flexDirection: "column", + height: "100vh", + flexGrow: 1, + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)` + : theme.palette.background.default, + overflow: "auto", + ...customStyles, + mt: { xs: 8, md: 0 }, + })} + > + +
+ + + + + + ); }; export default DashboardLayout; diff --git a/src/pages/AddEditRolePage/index.tsx b/src/pages/AddEditRolePage/index.tsx new file mode 100644 index 0000000..acda76d --- /dev/null +++ b/src/pages/AddEditRolePage/index.tsx @@ -0,0 +1,283 @@ +import React, { useState } from "react"; +import { + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, + Checkbox, + Typography, + Box, +} from "@mui/material"; + +// 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 And 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: "Volumes", + list: false, + add: false, + edit: false, + view: false, + delete: false, + }, + { + module: "Orders", + list: false, + add: false, + edit: false, + view: false, + delete: false, + }, + { + module: "Discount", + list: false, + add: false, + edit: false, + view: false, + delete: false, + }, + { + module: "Transactioned 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, + view: false, + delete: false, + }, + { + module: "Commission", + list: false, + add: false, + edit: false, + view: false, + delete: false, + }, + { + module: "Email Template", + list: false, + add: false, + edit: false, + view: false, + delete: false, + }, +]; + +// Table component +const AddEditRoleModal: React.FC = () => { + const [permissions, setPermissions] = + useState(initialPermissions); + + // Handle checkbox change + const handleCheckboxChange = (module: string, action: keyof Permission) => { + setPermissions((prevPermissions) => + prevPermissions.map((perm) => + perm.module === module + ? { ...perm, [action]: !perm[action] } + : perm + ) + ); + }; + + return ( + + + + {/* Role Row with space-evenly */} + + + Role + + Admin + + + + + {/* Header Row */} + + + Module Name + + + Actions + + + + + + {permissions.map((row, index) => ( + + {/* Module Name */} + {row.module} + + {/* Action Checkboxes */} + + + + handleCheckboxChange( + row.module, + "list" + ) + } + /> + + handleCheckboxChange( + row.module, + "add" + ) + } + /> + + handleCheckboxChange( + row.module, + "edit" + ) + } + /> + + handleCheckboxChange( + row.module, + "view" + ) + } + /> + + handleCheckboxChange( + row.module, + "delete" + ) + } + /> + + + + ))} + +
+ + ); +}; + +export default AddEditRoleModal; diff --git a/src/pages/AdminList/index.tsx b/src/pages/AdminList/index.tsx index ccc620f..69aa05f 100644 --- a/src/pages/AdminList/index.tsx +++ b/src/pages/AdminList/index.tsx @@ -1,358 +1,3 @@ -// import { useEffect, useState } from "react"; -// import { -// Box, -// Button, -// Typography, -// TextField, -// InputAdornment, -// Paper, -// Table, -// TableBody, -// TableCell, -// TableContainer, -// TableHead, -// TableRow, -// Pagination, -// IconButton, -// } from "@mui/material"; -// import SearchIcon from "@mui/icons-material/Search"; -// import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; -// import TuneIcon from "@mui/icons-material/Tune"; -// import { useDispatch, useSelector } from "react-redux"; -// import { adminList } from "../../redux/slices/adminSlice"; -// import { AppDispatch, RootState } from "../../redux/store/store"; - -// export default function AdminList() { -// const [searchQuery, setSearchQuery] = useState(""); -// const [currentPage, setCurrentPage] = useState(1); -// const adminsPerPage = 10; - -// const dispatch = useDispatch(); -// const admins = useSelector((state: RootState) => state.adminReducer.admins); - -// useEffect(() => { -// dispatch(adminList()); -// }, [dispatch]); - -// const staticAdmins = [ -// { -// name: "John Doe", -// location: "New York", -// managerAssigned: "Alice Johnson", -// vehicle: "Tesla Model S", -// phone: "+1 234 567 8901", -// }, -// { -// name: "Jane Smith", -// location: "Los Angeles", -// managerAssigned: "Bob Brown", -// vehicle: "Ford F-150", -// phone: "+1 987 654 3210", -// }, -// { -// name: "Michael Brown", -// location: "Chicago", -// managerAssigned: "Sarah Lee", -// vehicle: "Chevrolet Bolt", -// phone: "+1 312 555 7890", -// }, -// { -// name: "Emily Davis", -// location: "Houston", -// managerAssigned: "Tom Wilson", -// vehicle: "Nissan Leaf", -// phone: "+1 713 444 5678", -// }, -// { -// name: "Daniel Martinez", -// location: "Phoenix", -// managerAssigned: "Jessica White", -// vehicle: "BMW i3", -// phone: "+1 602 999 4321", -// }, -// { -// name: "Sophia Miller", -// location: "Philadelphia", -// managerAssigned: "Mark Adams", -// vehicle: "Audi e-tron", -// phone: "+1 215 777 6543", -// }, -// { -// name: "James Anderson", -// location: "San Antonio", -// managerAssigned: "Emma Thomas", -// vehicle: "Hyundai Kona EV", -// phone: "+1 210 321 8765", -// }, -// { -// name: "James Anderson", -// location: "San Antonio", -// managerAssigned: "Emma Thomas", -// vehicle: "Hyundai Kona EV", -// phone: "+1 210 321 8765", -// }, -// ]; - -// const adminData = admins.length ? admins : staticAdmins; - -// const filteredAdmins = adminData.filter((admin) => -// admin.name.toLowerCase().includes(searchQuery.toLowerCase()) -// ); - -// const indexOfLastAdmin = currentPage * adminsPerPage; -// const indexOfFirstAdmin = indexOfLastAdmin - adminsPerPage; -// const currentAdmins = filteredAdmins.slice( -// indexOfFirstAdmin, -// indexOfLastAdmin -// ); - -// const handlePageChange = (event, value) => { -// setCurrentPage(value); -// }; - -// return ( -// -// -// Charge stations -// - -// {/* Search & Buttons Section */} -// -// -// -// -// ), -// }} -// value={searchQuery} -// onChange={(e) => setSearchQuery(e.target.value)} -// /> -// -// -// - -// -// -// -// - -// {/* Table Section */} -// -// -// -// -// {[ -// "Name", -// "Location", -// "Manager Assigned", -// "Vehicle", -// "Phone Number", -// "Action", -// ].map((header) => ( -// -// {header} -// -// ))} -// -// -// -// {currentAdmins.map((admin, index) => ( -// -// -// {admin.name} -// -// -// {admin.location || "N/A"} -// -// -// {admin.managerAssigned || "N/A"} -// -// -// {admin.vehicle || "N/A"}{" "} -// -// +6 more -// -// -// -// {admin.phone} -// -// -// -// -// -// -// -// ))} -// -//
-// - -// {/* Pagination */} -// -// -// Page Number : -// -// -// -// -// ); -// } import React, { useEffect, useState } from "react"; import { Box, Button, Typography } from "@mui/material"; import AddEditCategoryModal from "../../components/AddEditCategoryModal"; @@ -467,25 +112,27 @@ export default function AdminList() { Admins - - {/* or - - - Don't have an account?{" "} - - Sign up - - - */} diff --git a/src/pages/RoleList/index.tsx b/src/pages/RoleList/index.tsx index 416d0b5..999df66 100644 --- a/src/pages/RoleList/index.tsx +++ b/src/pages/RoleList/index.tsx @@ -25,7 +25,7 @@ export default function RoleList() { const handleClickOpen = () => { setRowData(null); // Reset row data when opening for new role - setModalOpen(true); + setModalOpen(!modalOpen); }; const handleCloseModal = () => { @@ -126,12 +126,12 @@ export default function RoleList() { setRowData={setRowData} setModalOpen={setModalOpen} /> - + /> */} ); }