Fix user cant load modal

src/app/dashboard/users/page.tsx

@@ -2,8 +2,8 @@ import { Card, Stack, Title } from "@mantine/core";
 import React from "react";
 import getUsers from "@/modules/userManagement/actions/getAllUsers";
 import { Metadata } from "next";
-import checkMultiplePermissions from "@/modules/dashboard/services/checkMultiplePermissions";
 import UsersTable from "@/modules/userManagement/tables/UsersTable/UsersTable";
+import checkMultiplePermissions from "@/modules/auth/utils/checkMultiplePermissions";
 
 export const metadata: Metadata = {
 	title: "Users - Dashboard",
@@ -14,9 +14,9 @@ export default async function UsersPage() {
 	const permissions = await checkMultiplePermissions({
 		create: "users.create",
 		readAll: "users.readAll",
-		read: "permission.read",
-		update: "permission.update",
-		delete: "permission.delete",
+		read: "users.read",
+		update: "users.update",
+		delete: "users.delete",
 	});
 
 	const users = await getUsers();

src/modules/auth/utils/checkMultiplePermissions.ts

@@ -17,7 +17,6 @@ async function checkMultiplePermissions<
 		| "authenticated-only"
 		| "*"
 		| PermissionCode
-		| (string & {})
 	>
 >(permissions: T): Promise<{ [K in keyof T]: boolean }> {
 	const permissionResults: Partial<{ [K in keyof T]: boolean }> = {};

src/modules/permission/data/initialPermissions.ts

@@ -52,6 +52,12 @@ const permissionData = [
 		isActive: true,
 	},
 	// User group
+	{
+		code: "users.create",
+		name: "Create user",
+		description: "Allows creating a user",
+		isActive: true,
+	},
 	{
 		code: "users.read",
 		name: "Read user",

src/modules/permission/tables/PermissionTable/PermissionTable.tsx

@@ -1,15 +1,12 @@
 "use client";
 import CrudPermissions from "@/modules/dashboard/types/CrudPermissions";
-import { Table, Text, Flex, Button, Center } from "@mantine/core";
+import { Text, Flex, Button } from "@mantine/core";
 import {
-	flexRender,
 	getCoreRowModel,
 	useReactTable,
 } from "@tanstack/react-table";
 import React, { useState } from "react";
 import { TbPlus } from "react-icons/tb";
-import getPermissions from "../../actions/getAllPermissions";
-import getAllPermissions from "../../actions/getAllPermissions";
 import FormModal, { ModalProps } from "../../modals/PermissionFormModal";
 import DeleteModal, { DeleteModalProps } from "../../modals/PermissionDeleteModal";
 import Permission from "../../types/Permission";

src/modules/userManagement/tables/UsersTable/UsersTable.tsx

@@ -1,15 +1,13 @@
 "use client";
 import CrudPermissions from "@/modules/dashboard/types/CrudPermissions";
-import { Table, Text, Flex, Button, Center } from "@mantine/core";
-import {
-	flexRender,
-	getCoreRowModel,
-	useReactTable,
-} from "@tanstack/react-table";
-import React, { useState } from "react";
+import { Text, Flex, Button } from "@mantine/core";
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import React, { useMemo, useState } from "react";
 import { TbPlus } from "react-icons/tb";
 import UserFormModal, { ModalProps } from "../../modals/UserFormModal";
-import UserDeleteModal, { DeleteModalProps } from "../../modals/UserDeleteModal";
+import UserDeleteModal, {
+	DeleteModalProps,
+} from "../../modals/UserDeleteModal";
 import createColumns from "./columns";
 import getAllUsers from "../../actions/getAllUsers";
 import DashboardTable from "@/modules/dashboard/components/DashboardTable";
@@ -20,7 +18,9 @@ interface Props {
 }
 
 export default function UsersTable(props: Props) {
+
 	const [modalProps, setModalProps] = useState<ModalProps>({
+		id: "",
 		opened: false,
 		title: "",
 	});
@@ -31,8 +31,16 @@ export default function UsersTable(props: Props) {
 		data: undefined,
 	});
 
+	const userData = useMemo(
+		() => props.userData.map((data) => ({
+			...data,
+			roles: data.roles.map((x) => x.name),
+		})),
+		[props.userData]
+	);
+
 	const table = useReactTable({
-		data: props.userData.map(data => ({...data, roles: data.roles.map(x => x.name)})),
+		data: userData,
 		columns: createColumns({
 			permissions: props.permissions,
 			actions: {
@@ -111,7 +119,7 @@ export default function UsersTable(props: Props) {
 					</Button>
 				)}
 			</Flex>
-			
+
 			<DashboardTable table={table} />
 
 			<UserFormModal {...modalProps} onClose={closeModal} />

src/modules/userManagement/tables/UsersTable/columns.tsx

@@ -73,7 +73,7 @@ const createColumns = (options: ColumnOptions) => {
 		columnHelper.display({
 			id: "status",
 			header: "Status",
-			cell: (props) => <Badge color="green">Active</Badge>,
+			cell: () => <Badge color="green">Active</Badge>,
 		}),
 
 		columnHelper.display({