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";
@@ -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: {
-				id: string;
-				name: string;
-				status: string;
-			},
-			index: number
-		) {
-			return {
-				id: role?.id,
 		srno: index + 1,
-				name: role?.name,
+		name: role.name,
-				status: role?.status,
+		status: (
-			};
+		  <Chip
-		})
+			label={role.status === 1 ? "Active" : "Inactive"} // ✅ Convert number to text
-		: [];
+			color={role.status === 1 ? "primary" : "default"}
+			variant="outlined"
+			sx={{ fontWeight: 600, width: "80px", textAlign: "center", borderRadius: "4px" }}
+		  />
+		),
+	  }));
+	  
+
 
 	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%",
@@ -116,11 +99,7 @@ export default function RoleList() {
 					onChange={(e) => setSearchTerm(e.target.value)}
 					sx={{ width: "30%" }}
 				/>
-			<Button
+				<Button variant="contained" size="small" onClick={handleClickOpen}>
-				variant="contained"
-				size="small"
-				onClick={handleClickOpen}
-			>
 					Add Role
 				</Button>
 			</Box>