Added role actions

src/app/dashboard/(auth)/roles/_components/CreateButton/CreateButton.tsx

@@ -1,20 +0,0 @@
-"use client"
-import { Button } from '@mantine/core'
-import Link from 'next/link'
-import { usePathname, useRouter } from 'next/navigation'
-import React, { useState } from 'react'
-import { TbPlus } from 'react-icons/tb'
-import { CreateModal } from '../../_modals'
-
-export default function CreateButton() {
-
-    const [isModalOpened, setModalOpened] = useState(false)
-
-  return (
-    <>
-        <Button leftSection={<TbPlus />} onClick={() => setModalOpened(true)}>New Role</Button>
-
-        <CreateModal opened={isModalOpened} onClose={() => setModalOpened(false)} />
-    </>
-  )
-}

src/app/dashboard/(auth)/roles/_modals/CreateModal/CreateModal.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import FormModal from "../FormModal";
-
-interface Props {
-	opened: boolean
-	onClose?: () => void
-}
-
-export default function CreateModal(props: Props) {
-	return (
-		<FormModal
-			title="Create new role"
-			data={{
-				code: "",
-				description: "",
-				id: "",
-				isActive: false,
-				name: "",
-			}}
-			readonly={false}
-			opened={props.opened}
-			onClose={props.onClose}
-		/>
-	);
-}

src/app/dashboard/(auth)/roles/_modals/CreateModal/index.ts

@@ -1 +0,0 @@
-export { default } from "./CreateModal"

src/app/dashboard/(auth)/roles/_modals/DeleteModal/DeleteModal.tsx

@@ -0,0 +1,93 @@
+"use client";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import {
+	Avatar,
+	Button,
+	Center,
+	Flex,
+	Modal,
+	ScrollArea,
+	Text,
+	Stack,
+	TextInput,
+	Title,
+} from "@mantine/core";
+import { showNotification } from "@/utils/notifications";
+import deleteRole from "@/features/dashboard/roles/actions/deleteRole";
+
+export interface DeleteModalProps {
+	data?: {
+        id: string,
+        name: string,
+    };
+    onClose: () => void
+}
+
+export default function DeleteModal(props: DeleteModalProps) {
+	const router = useRouter();
+
+	const [isSubmitting, setSubmitting] = useState(false);
+
+	/**
+	 * Closes the modal. It won't close if a submission is in progress.
+	 */
+	const closeModal = () => {
+		if (isSubmitting) return;
+		props.onClose()
+	};
+
+    const confirmAction = () => {
+        if (!props.data?.id) return;
+        setSubmitting(true)
+        deleteRole(props.data.id)
+            .then((response) => {
+                if (response.success){
+                    showNotification(response.message);
+                    setSubmitting(false)
+                    props.onClose()
+                    return;
+                } else {
+                    showNotification(response.message, "error")
+                }
+            })
+            .catch(() => {
+                //TODO: Handle Error
+            })
+            .finally(() => {
+                setSubmitting(false)
+            })
+    }
+
+	return (
+		<Modal opened={!!props.data} onClose={closeModal} title={`Delete confirmation`}>
+			<Text size="sm">
+				Are you sure you want to delete role{" "}
+				<Text span fw={700}>
+					{props.data?.name}
+				</Text>
+				? This action is irreversible.
+			</Text>
+			{/* Buttons */}
+			<Flex justify="flex-end" align="center" gap="lg" mt="lg">
+				<Button
+					variant="outline"
+					onClick={closeModal}
+					disabled={isSubmitting}
+				>
+					Cancel
+				</Button>
+				<Button
+					variant="subtle"
+					// leftSection={<TbDeviceFloppy size={20} />}
+					type="submit"
+					color="red"
+					loading={isSubmitting}
+                    onClick={confirmAction}
+				>
+					Delete Role
+				</Button>
+			</Flex>
+		</Modal>
+	);
+}

src/app/dashboard/(auth)/roles/_modals/DeleteModal/index.ts

@@ -0,0 +1 @@
+export { default } from "./DeleteModal";

src/app/dashboard/(auth)/roles/_modals/FormModal/FormModal.tsx

@@ -1,4 +1,5 @@
-"use client";
+/* eslint-disable react-hooks/exhaustive-deps */
+import getRoleById from "@/features/dashboard/roles/actions/getRoleById";
 import upsertRole from "@/features/dashboard/roles/actions/upsertRole";
 import roleFormDataSchema, {
 	RoleFormData,
@@ -14,59 +15,101 @@ import {
 	Button,
 	ScrollArea,
 	Checkbox,
+	Skeleton,
+	Fieldset,
 } from "@mantine/core";
 import { useForm, zodResolver } from "@mantine/form";
-import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { TbDeviceFloppy } from "react-icons/tb";
 
-interface Props {
+export interface ModalProps {
 	title: string;
 	readonly?: boolean;
-	data: RoleFormData;
+	id?: string;
 	opened: boolean;
 	onClose?: () => void;
 }
 
-export default function FormModal(props: Props) {
+/**
+ * A component for rendering a modal with a form to create or edit a role.
+ *
+ * @param props - The props for the component.
+ * @returns The rendered element.
+ */
+export default function FormModal(props: ModalProps) {
 	const router = useRouter();
+    const [isSubmitting, setSubmitting] = useState(false);
+    const [isFetching, setFetching] = useState(false);
 
-	const [isSubmitting, setSubmitting] = useState(false);
-	const [value, setValue] = useState("");
+    const form = useForm<RoleFormData>({
+        initialValues: {
+            code: "",
+            description: "",
+            id: "",
+            isActive: false,
+            name: "",
+        },
+        validate: zodResolver(roleFormDataSchema),
+        validateInputOnChange: false,
+        onValuesChange: (values) => {
+            console.log(values);
+        },
+    });
 
-	const form = useForm<RoleFormData>({
-		initialValues: props.data,
-		validate: zodResolver(roleFormDataSchema),
-		validateInputOnChange: false,
-		onValuesChange: (values) => {
-			console.log(values);
-		},
-	});
+	/**
+     * Fetches role data by ID and populates the form if the modal is opened and an ID is provided.
+     */
+	useEffect(() => {
+		if (!props.opened || !props.id) {
+			return;
+		}
+
+		setFetching(true);
+		getRoleById(props.id)
+			.then((response) => {
+				if (response.success) {
+					const data = response.data;
+					form.setValues({
+						code: data.code,
+						description: data.description,
+						id: data.id,
+						isActive: data.isActive,
+						name: data.name,
+					});
+				}
+			})
+			.catch((e) => {
+				//TODO: Handle error
+				console.log(e);
+			})
+			.finally(() => {
+				setFetching(false);
+			});
+	}, [props.opened, props.id]);
 
 	const closeModal = () => {
-		form.reset();
 		props.onClose ? props.onClose() : router.replace("?");
 	};
 
 	const handleSubmit = (values: RoleFormData) => {
 		upsertRole(values)
 			.then((response) => {
-				if (response.success){
-					showNotification(response.message,"success");
-					return closeModal()
+				if (response.success) {
+					showNotification(response.message, "success");
+					return closeModal();
 				} else {
 					form.setErrors(response.errors ?? {});
-					if (!response.errors){
-						showNotification(response.message, "error")
+					if (!response.errors) {
+						showNotification(response.message, "error");
 					}
 				}
 			})
-			.catch(e =>{
+			.catch((e) => {
 				//TODO: Handle Error
-				console.log(e)
-			}) 
-	}
+				console.log(e);
+			});
+	};
 
 	return (
 		<Modal
@@ -74,11 +117,12 @@ export default function FormModal(props: Props) {
 			onClose={closeModal}
 			title={props.title}
 			scrollAreaComponent={ScrollArea.Autosize}
+			size="xl"
 		>
 			<form onSubmit={form.onSubmit(handleSubmit)}>
 				<Stack mt="sm" gap="lg" px="lg">
 					{/* ID */}
-					{props.data.id ? (
+					{form.values.id ? (
 						<TextInput
 							label="ID"
 							readOnly
@@ -90,37 +134,45 @@ export default function FormModal(props: Props) {
 					)}
 
 					{/* Code */}
-					<TextInput
-						data-autofocus
-						label="Code"
-						readOnly={props.readonly}
-						disabled={isSubmitting}
-						{...form.getInputProps("code")}
-					/>
+					<Skeleton visible={isFetching}>
+						<TextInput
+							data-autofocus
+							label="Code"
+							readOnly={props.readonly}
+							disabled={isSubmitting}
+							{...form.getInputProps("code")}
+						/>
+					</Skeleton>
 
 					{/* Name */}
-					<TextInput
-						label="Name"
-						readOnly={props.readonly}
-						disabled={isSubmitting}
-						{...form.getInputProps("name")}
-					/>
+					<Skeleton visible={isFetching}>
+						<TextInput
+							label="Name"
+							readOnly={props.readonly}
+							disabled={isSubmitting}
+							{...form.getInputProps("name")}
+						/>
+					</Skeleton>
 
 					{/* Description */}
-					<Textarea
-						label="Description"
-						readOnly={props.readonly}
-						disabled={isSubmitting}
-						{...form.getInputProps("description")}
-					/>
+					<Skeleton visible={isFetching}>
+						<Textarea
+							label="Description"
+							readOnly={props.readonly}
+							disabled={isSubmitting}
+							{...form.getInputProps("description")}
+						/>
+					</Skeleton>
 
-					<Checkbox
-						label="Active"
-						labelPosition="right"
-						{...form.getInputProps("isActive", {
-							type: "checkbox",
-						})}
-					/>
+					<Skeleton visible={isFetching}>
+						<Checkbox
+							label="Active"
+							labelPosition="right"
+							{...form.getInputProps("isActive", {
+								type: "checkbox",
+							})}
+						/>
+					</Skeleton>
 
 					{/* Buttons */}
 					<Flex justify="flex-end" align="center" gap="lg" mt="lg">

src/app/dashboard/(auth)/roles/_modals/index.ts

@@ -1,5 +1,4 @@
-import CreateModal from "./CreateModal";
+import FormModal from "./FormModal";
+import DeleteModal from "./DeleteModal";
 
-export {
-    CreateModal
-}
+export { DeleteModal, FormModal };

src/app/dashboard/(auth)/roles/_tables/RolesTable/RolesTable.tsx

@@ -1,25 +1,48 @@
 "use client";
-import { Table, Text } from "@mantine/core";
+import { Table, Text, Flex, Button, Center } from "@mantine/core";
 import {
 	flexRender,
 	getCoreRowModel,
 	useReactTable,
 } from "@tanstack/react-table";
-import React from "react";
+import React, { useState } from "react";
 import CrudPermissions from "@/features/auth/types/CrudPermissions";
 import getRoles from "@/features/dashboard/roles/data/getRoles";
 import createColumns from "./columns";
+import FormModal from "../../_modals/FormModal";
+import { ModalProps } from "../../_modals/FormModal/FormModal";
+import { TbPlus } from "react-icons/tb";
+import { RoleFormData } from "@/features/dashboard/roles/formSchemas/RoleFormData";
+import { string } from "zod";
+import { DeleteModal } from "../../_modals";
+import { DeleteModalProps } from "../../_modals/DeleteModal/DeleteModal";
 
 interface Props {
-    permissions: Partial<CrudPermissions>,
-	roles: Awaited<ReturnType<typeof getRoles>>
+	permissions: Partial<CrudPermissions>;
+	roles: Awaited<ReturnType<typeof getRoles>>;
 }
 
 export default function RolesTable(props: Props) {
+	const [modalProps, setModalProps] = useState<ModalProps>({
+		opened: false,
+		title: "",
+	});
+
+	const [deleteModalProps, setDeleteModalProps] = useState<
+		Omit<DeleteModalProps, "onClose">
+	>({
+		data: undefined,
+	});
+
 	const table = useReactTable({
 		data: props.roles,
 		columns: createColumns({
-			permissions: props.permissions
+			permissions: props.permissions,
+			actions: {
+				detail: (id: string) => openFormModal("detail", id),
+				edit: (id: string) => openFormModal("edit", id),
+				delete: (id: string, name: string) => openDeleteModal(id, name),
+			},
 		}),
 		getCoreRowModel: getCoreRowModel(),
 		defaultColumn: {
@@ -27,54 +50,130 @@ export default function RolesTable(props: Props) {
 		},
 	});
 
-    // TODO: Add view when data is empty
+	const openFormModal = (type: "create" | "edit" | "detail", id?: string) => {
+		const openCreateModal = () => {
+			setModalProps({
+				id,
+				opened: true,
+				title: "Create new role",
+			});
+		};
+
+		const openDetailModal = () => {
+			setModalProps({
+				id,
+				opened: true,
+				title: "Role detail",
+				readonly: true,
+			});
+		};
+
+		const openEditModal = () => {
+			setModalProps({
+				id,
+				opened: true,
+				title: "Edit role",
+			});
+		};
+
+		type === "create"
+			? openCreateModal()
+			: type === "detail"
+			? openDetailModal()
+			: openEditModal();
+	};
+
+	const openDeleteModal = (id: string, name: string) => {
+		setDeleteModalProps({
+			data: {
+				id,
+				name,
+			},
+		});
+	};
+
+	const closeModal = () => {
+		setModalProps({
+			id: "",
+			opened: false,
+			title: "",
+		});
+	};
+
+	// TODO: Add view when data is empty
 
 	return (
-		<Table verticalSpacing="xs" horizontalSpacing="xs">
-			{/* Thead */}
-			<Table.Thead>
-				{table.getHeaderGroups().map((headerGroup) => (
-					<Table.Tr key={headerGroup.id}>
-						{headerGroup.headers.map((header) => (
-							<Table.Th
-								key={header.id}
-								style={{
-									maxWidth: `${header.column.columnDef.maxSize}px`,
-									width: `${header.getSize()}`,
-								}}
-							>
-								{header.isPlaceholder
-									? null
-									: flexRender(
-											header.column.columnDef.header,
-											header.getContext()
-									  )}
-							</Table.Th>
-						))}
-					</Table.Tr>
-				))}
-			</Table.Thead>
+		<>
+			<Flex justify="flex-end">
+				{props.permissions.create && (
+					<Button
+						leftSection={<TbPlus />}
+						onClick={() => openFormModal("create")}
+					>
+						New Role
+					</Button>
+				)}
+			</Flex>
+			<Table verticalSpacing="xs" horizontalSpacing="xs">
+				{/* Thead */}
+				<Table.Thead>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<Table.Tr key={headerGroup.id}>
+							{headerGroup.headers.map((header) => (
+								<Table.Th
+									key={header.id}
+									style={{
+										maxWidth: `${header.column.columnDef.maxSize}px`,
+										width: `${header.getSize()}`,
+									}}
+								>
+									{header.isPlaceholder
+										? null
+										: flexRender(
+												header.column.columnDef.header,
+												header.getContext()
+										  )}
+								</Table.Th>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Thead>
 
-			{/* Tbody */}
-			<Table.Tbody>
-				{table.getRowModel().rows.map((row) => (
-					<Table.Tr key={row.id}>
-						{row.getVisibleCells().map((cell) => (
-							<Table.Td
-								key={cell.id}
-								style={{
-									maxWidth: `${cell.column.columnDef.maxSize}px`,
-								}}
-							>
-								{flexRender(
-									cell.column.columnDef.cell,
-									cell.getContext()
-								)}
+				{/* Tbody */}
+				<Table.Tbody>
+					{table.getRowModel().rows.length > 0 ? (
+						table.getRowModel().rows.map((row) => (
+							<Table.Tr key={row.id}>
+								{row.getVisibleCells().map((cell) => (
+									<Table.Td
+										key={cell.id}
+										style={{
+											maxWidth: `${cell.column.columnDef.maxSize}px`,
+										}}
+									>
+										{flexRender(
+											cell.column.columnDef.cell,
+											cell.getContext()
+										)}
+									</Table.Td>
+								))}
+							</Table.Tr>
+						))
+					) : (
+						<Table.Tr>
+							<Table.Td colSpan={table.getAllColumns().length}>
+								<Center>- No Data -</Center>
 							</Table.Td>
-						))}
-					</Table.Tr>
-				))}
-			</Table.Tbody>
-		</Table>
+						</Table.Tr>
+					)}
+				</Table.Tbody>
+			</Table>
+
+			<FormModal {...modalProps} onClose={closeModal} />
+			<DeleteModal
+				{...deleteModalProps}
+				onClose={() => setDeleteModalProps({})}
+			/>
+		</>
 	);
 }

src/app/dashboard/(auth)/roles/_tables/RolesTable/columns.tsx

@@ -1,4 +1,5 @@
 import CrudPermissions from "@/features/auth/types/CrudPermissions";
+import { RoleFormData } from "@/features/dashboard/roles/formSchemas/RoleFormData";
 import createActionButtons from "@/features/dashboard/utils/createActionButtons";
 import { Badge, Flex, Tooltip, ActionIcon } from "@mantine/core";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -17,10 +18,10 @@ export interface RoleRow {
 
 interface ColumnOptions {
 	permissions: Partial<CrudPermissions>;
-	actions?: {
-		detail?: () => void;
-		edit?: () => void;
-		delete?: () => void;
+	actions: {
+		detail: (id: string) => void;
+		edit: (id: string) => void;
+		delete: (id: string, name: string) => void;
 	};
 }
 
@@ -67,28 +68,28 @@ const createColumns = (options: ColumnOptions) => {
 			meta: {
 				className: "w-fit",
 			},
-			cell: () => (
+			cell: (props) => (
 				<Flex gap="xs">
                     {
                         createActionButtons([
                             {
                                 label: "Detail",
                                 permission: options.permissions.read,
-                                action: options.actions?.detail,
+                                action: () => options.actions.detail(props.row.original.id),
                                 color: "green",
                                 icon: <TbEye />
                             },
                             {
                                 label: "Edit",
                                 permission: options.permissions.update,
-                                action: options.actions?.edit,
+                                action: () => options.actions.edit(props.row.original.id),
                                 color: "yellow",
                                 icon: <TbPencil />
                             },
                             {
                                 label: "Delete",
                                 permission: options.permissions.delete,
-                                action: options.actions?.delete,
+                                action: () => options.actions.delete(props.row.original.id, props.row.original.name),
                                 color: "red",
                                 icon: <TbTrash />
                             }

src/app/dashboard/(auth)/roles/page.tsx

@@ -1,45 +1,38 @@
-import { Button, Card, Flex, Stack, Title } from "@mantine/core";
+import { Card, Stack, Title } from "@mantine/core";
 import { Metadata } from "next";
 import React from "react";
 import RolesTable from "./_tables/RolesTable/RolesTable";
-import { TbPlus } from "react-icons/tb";
-import checkPermission from "@/features/auth/tools/checkPermission";
-import { unauthorized } from "@/BaseError";
-import Link from "next/link";
-import { CreateModal } from "./_modals";
-import FormModal from "./_modals/FormModal";
-import CreateButton from "./_components/CreateButton/CreateButton";
 import getRoles from "@/features/dashboard/roles/data/getRoles";
 import checkMultiplePermissions from "@/features/auth/tools/checkMultiplePermissions";
 
 interface Props {
-    searchParams: {
-        detail?: string,
-        edit?: string,
-        delete?: string,
-        create?: string,
-    }
+	searchParams: {
+		detail?: string;
+		edit?: string;
+		delete?: string;
+		create?: string;
+	};
 }
 
-export default async function RolesPage({searchParams}: Props) {
+export const metadata: Metadata = {
+	title: "Roles - Dashboard",
+};
 
+export default async function RolesPage({ searchParams }: Props) {
 	const permissions = await checkMultiplePermissions({
 		create: "role.create",
 		readAll: "role.readAll",
-		read: 'role.read',
-		update: 'role.update',
-		delete: 'role.delete'
-	})
+		read: "role.read",
+		update: "role.update",
+		delete: "role.delete",
+	});
 
-	const roles = await getRoles()
+	const roles = await getRoles();
 
 	return (
 		<Stack>
 			<Title order={1}>Roles</Title>
 			<Card>
-				<Flex justify="flex-end">
-					{ permissions.create && <CreateButton />}
-				</Flex>
 				<RolesTable permissions={permissions} roles={roles} />
 			</Card>
 		</Stack>

src/features/dashboard/roles/actions/deleteRole.ts

@@ -0,0 +1,26 @@
+"use server";
+
+import { unauthorized } from "@/BaseError";
+import prisma from "@/db";
+import checkPermission from "@/features/auth/tools/checkPermission";
+
+export default async function deleteRole(id: string) {
+	if (!(await checkPermission("role.delete"))) return unauthorized();
+
+	try {
+		const role = await prisma.role.delete({
+			where: { id },
+		});
+
+		return {
+			success: true,
+			message: "The role has been deleted successfully",
+		} as const;
+	} catch (e) {
+		//TODO: Handle error
+		return {
+			success: false,
+			message: "Unable to delete the role",
+		} as const;
+	}
+}

src/features/dashboard/roles/actions/getRoleById.ts

@@ -0,0 +1,40 @@
+"use server";
+
+import { unauthorized } from "@/BaseError";
+import prisma from "@/db";
+import checkPermission from "@/features/auth/tools/checkPermission";
+
+export default async function getRoleById(id: string) {
+	if (!(await checkPermission("role.read"))) unauthorized();
+
+	const role = await prisma.role.findFirst({
+		where: { id },
+		select: {
+			code: true,
+			description: true,
+			id: true,
+			isActive: true,
+			name: true,
+			permissions: {
+				select: {
+					id: true,
+					code: true,
+					name: true,
+				},
+			},
+		},
+	});
+
+	if (!role) {
+		return {
+			success: false,
+			message: "Role not found",
+		} as const;
+	}
+
+	return {
+		success: true,
+		message: "Role fetched successfully",
+		data: role,
+	} as const;
+}