Added user modal table contents

apps/backend/package.json

@@ -29,7 +29,7 @@
 		"@types/node": "^20.14.2",
 		"drizzle-kit": "^0.21.4",
 		"pg": "^8.12.0",
-		"tsx": "^4.13.2",
+		"tsx": "^4.15.1",
 		"typescript": "^5.4.5"
 	},
 	"exports": {

apps/frontend/package.json

@@ -15,7 +15,7 @@
 		"@mantine/hooks": "^7.10.1",
 		"@mantine/notifications": "^7.10.1",
 		"@tanstack/react-query": "^5.40.1",
-		"@tanstack/react-router": "^1.35.3",
+		"@tanstack/react-router": "^1.35.5",
 		"@tanstack/react-table": "^8.17.3",
 		"backend": "workspace:*",
 		"clsx": "^2.1.1",
@@ -27,14 +27,14 @@
 		"zod": "^3.23.8"
 	},
 	"devDependencies": {
-		"@tanstack/eslint-plugin-query": "^5.35.6",
-		"@tanstack/router-devtools": "^1.35.3",
-		"@tanstack/router-vite-plugin": "^1.34.8",
+		"@tanstack/eslint-plugin-query": "^5.43.1",
+		"@tanstack/router-devtools": "^1.35.5",
+		"@tanstack/router-vite-plugin": "^1.35.4",
 		"@types/node": "^20.14.2",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
-		"@typescript-eslint/eslint-plugin": "^7.12.0",
-		"@typescript-eslint/parser": "^7.12.0",
+		"@typescript-eslint/eslint-plugin": "^7.13.0",
+		"@typescript-eslint/parser": "^7.13.0",
 		"@vitejs/plugin-react-swc": "^3.7.0",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^8.57.0",

apps/frontend/src/routes/_dashboardLayout/users/index.lazy.tsx

@@ -2,8 +2,12 @@ import { userQueryOptions } from "@/modules/usersManagement/queries/userQueries"
 import PageTemplate from "@/components/PageTemplate";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import UserFormModal from "@/modules/usersManagement/modals/UserFormModal";
-import { createColumnHelper } from "@tanstack/react-table";
 import ExtractQueryDataType from "@/types/ExtractQueryDataType";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Badge, Flex } from "@mantine/core";
+import createActionButtons from "@/utils/createActionButton";
+import { TbEye, TbPencil, TbTrash } from "react-icons/tb";
+import UserDeleteModal from "@/modules/usersManagement/modals/UserDeleteModal";
 
 export const Route = createLazyFileRoute("/_dashboardLayout/users/")({
 	component: UsersPage,
@@ -18,21 +22,62 @@ export default function UsersPage() {
 		<PageTemplate
 			title="Users"
 			queryOptions={userQueryOptions}
-			modals={[<UserFormModal />]}
+			modals={[<UserFormModal />, <UserDeleteModal />]}
 			columnDefs={[
 				columnHelper.display({
-					id: "sequence",
 					header: "#",
 					cell: (props) => props.row.index + 1,
-					size: 1,
 				}),
 
-				columnHelper.accessor("email", {
-					header: "Email",
+				columnHelper.display({
+					header: "Name",
+					cell: (props) => props.row.original.name,
 				}),
 
-				columnHelper.accessor("email", {
-					header: "Email",
+				columnHelper.display({
+					header: "Username",
+					cell: (props) => props.row.original.username,
+				}),
+
+				columnHelper.display({
+					header: "Status",
+					cell: (props) =>
+						props.row.original.isEnabled ? (
+							<Badge color="green">Active</Badge>
+						) : (
+							<Badge color="red">Inactive</Badge>
+						),
+				}),
+
+				columnHelper.display({
+					header: "Actions",
+					cell: (props) => (
+						<Flex gap="xs">
+							{createActionButtons([
+								{
+									label: "Detail",
+									permission: true,
+									action: `?detail=${props.row.original.id}`,
+									color: "green",
+									icon: <TbEye />,
+								},
+								{
+									label: "Edit",
+									permission: true,
+									action: `?edit=${props.row.original.id}`,
+									color: "orange",
+									icon: <TbPencil />,
+								},
+								{
+									label: "Delete",
+									permission: true,
+									action: `?delete=${props.row.original.id}`,
+									color: "red",
+									icon: <TbTrash />,
+								},
+							])}
+						</Flex>
+					),
 				}),
 			]}
 		/>