roles-list

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
+	const categoryRows = roles?.map((role: Role, index: number) => ({
-		? roles?.map(function (
+		id: role.id,
-			role: {
+		srno: index + 1,
-				id: string;
+		name: role.name,
-				name: string;
+		status: (
-				status: string;
+		  <Chip
-			},
+			label={role.status === 1 ? "Active" : "Inactive"} // ✅ Convert number to text
-			index: number
+			color={role.status === 1 ? "primary" : "default"}
-		) {
+			variant="outlined"
-			return {
+			sx={{ fontWeight: 600, width: "80px", textAlign: "center", borderRadius: "4px" }}
-				id: role?.id,
+		  />
-				srno: index + 1,
+		),
-				name: role?.name,
+	  }));
-				status: role?.status,
+	  
-			};
+
-		})
-		: [];
 
 	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%",
@@ -106,24 +89,20 @@ export default function RoleList() {
 					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
+				<TextField
-			</Button>
+					variant="outlined"
-		</Box>
+					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 ? (
 				<PermissionsTable />