bulk-email/src/pages/RoleList/index.tsx

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<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);

	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: (
			<Chip
				label={role.status === 1 ? "Active" : "Inactive"}
				color={role.status === 1 ? "primary" : "default"}
				variant="outlined"
				sx={{
					fontWeight: 600,
					width: "80px",
					textAlign: "center",
					borderRadius: "4px",
				}}
			/>
		),
		statusValue: role.status,
	}));

	return (
		<>
			<Box
				sx={{
					width: "100%",
					display: "flex",
					justifyContent: "space-between",
					alignItems: "center",
					mb: 2,
				}}
			>
				<TextField
					variant="outlined"
					size="small"
					placeholder="Search..."
					value={searchTerm}
					onChange={(e) => setSearchTerm(e.target.value)}
					sx={{ width: "30%" }}
				/>
				<Button
					variant="contained"
					size="small"
					onClick={handleClickOpen}
				>
					Add Role
				</Button>
			</Box>

			{showPermissions ? (
				<AddEditRolePage />
			) : (
				<CustomTable
					columns={categoryColumns}
					rows={categoryRows}
					setDeleteModal={setDeleteModal}
					deleteModal={deleteModal}
					setViewModal={setViewModal}
					viewModal={viewModal}
					setRowData={setRowData}
					setModalOpen={setModalOpen}
					handleStatusToggle={(id, currentStatus) => {
						// 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";
// 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";

// export default function RoleList() {
// 	const [modalOpen, setModalOpen] = useState(false);
// 	const { reset } = useForm();

// 	const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
// 	const [viewModal, setViewModal] = React.useState<boolean>(false);
// 	const [rowData, setRowData] = React.useState<any | null>(null);

// 	const dispatch = useDispatch<AppDispatch>();

// 	const roles = useSelector((state: RootState) => state.roleReducer.roles);

// 	useEffect(() => {
// 		dispatch(roleList());
// 	}, [dispatch]);

// 	const handleClickOpen = () => {
// 		setRowData(null); // Reset row data when opening for new role
// 		setModalOpen(!modalOpen);
// 	};

// 	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: "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,
// 				};
// 		  })
// 		: [];

// 	console.log("Category Rows:", categoryRows);

// 	return (
// 		<>
// 			<Box
// 				sx={{
// 					width: "100%",
// 					maxWidth: {
// 						sm: "100%",
// 						display: "flex",
// 						justifyContent: "space-between",
// 						alignItems: "center",
// 					},
// 				}}
// 			>
// 				<Typography
// 					component="h2"
// 					variant="h6"
// 					sx={{ mt: 2, fontWeight: 600 }}
// 				>
// 					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}
// 			/>
// 			{/* <AddEditRoleModal
// 				open={modalOpen}
// 				handleClose={handleCloseModal}
// 				handleCreate={handleCreate}
// 				editRow={rowData}
// 			/> */}
// 		</>
// 	);
// }