Update : Integrasi on Create Assessment Request

apps/backend/src/drizzle/schema/assessments.ts

@@ -4,7 +4,7 @@ import { relations } from "drizzle-orm";
 import { respondents } from "./respondents";
 import { users } from "./users";
 
-const statusEnum = pgEnum("status", ["menunggu konfirmasi", "disetujui", "ditolak", "selesai"]);
+const statusEnum = pgEnum("status", ["menunggu konfirmasi", "diterima", "ditolak", "selesai"]);
 
 export const assessments = pgTable("assessments", {
     id: varchar("id", { length: 50 })

apps/backend/src/routes/assessmentRequest/route.ts

@@ -1,4 +1,4 @@
-import { eq, sql, ilike, isNull, and } from "drizzle-orm";
+import { eq, sql, ilike, isNull, and, desc } from "drizzle-orm";
 import { Hono } from "hono";
 import { z } from "zod";
 import db from "../../drizzle";
@@ -69,6 +69,9 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
                     id: assessments.id,
                     tanggal: assessments.createdAt,
                     status: assessments.status,
+                    respondentId: respondents.id,
+                    email: users.email,
+                    username: users.username,
                 })
                 .from(users)
                 .leftJoin(rolesToUsers, eq(users.id, rolesToUsers.userId))
@@ -81,9 +84,11 @@ const assessmentRequestRoute = new Hono<HonoEnv>()
                         q ? ilike(assessments.status, `%${q}%`) : undefined
                     )
                 )
+                .orderBy(desc(assessments.createdAt))
                 .offset(page * limit)
                 .limit(limit);
                 
+    
             if (!queryResult[0]) throw notFound();
     
             // Mengembalikan data dengan metadata pagination

apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx

@@ -0,0 +1,191 @@
+import stringToColorHex from "@/utils/stringToColorHex";
+import {
+	Avatar,
+	Button,
+	Center,
+	Flex,
+	Modal,
+	ScrollArea,
+	Stack,
+	Text
+} from "@mantine/core";
+// import { Button } from "@/shadcn/components/ui/button";
+import { useForm } from "@mantine/form";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { getRouteApi } from "@tanstack/react-router";
+import { useEffect } from "react";
+import { notifications } from "@mantine/notifications";
+import FormResponseError from "@/errors/FormResponseError";
+import createInputComponents from "@/utils/createInputComponents";
+import { assessmentRequestQueryOptions, createAssessmentRequest } from "../queries/assessmentRequestQueries";
+
+/**
+ * Change this
+ */
+const routeApi = getRouteApi("/_dashboardLayout/assessmentRequest/");
+
+export default function UserFormModal() {
+	/**
+	 * DON'T CHANGE FOLLOWING:
+	 */
+	const queryClient = useQueryClient();
+
+	const navigate = routeApi.useNavigate();
+
+	const searchParams = routeApi.useSearch();
+
+	const dataId = searchParams.detail || searchParams.edit;
+
+	const isModalOpen = Boolean(dataId || searchParams.create);
+
+	const detailId = searchParams.detail;
+	const editId = searchParams.edit;
+
+	const formType = detailId ? "detail" : editId ? "edit" : "create";
+
+	/**
+	 * CHANGE FOLLOWING:
+	 */
+
+	const userQuery = useQuery(assessmentRequestQueryOptions(0, 10));
+
+	const modalTitle = 
+	<b>
+		Konfirmasi
+	</b>
+
+	const form = useForm({
+		initialValues: {
+			id: "",
+			respondentsId: "",
+			name: "",
+		},
+	});
+
+	useEffect(() => {
+		const data = userQuery.data;
+
+		if (!data) {
+			form.reset();
+			return;
+		}
+
+		form.setValues({
+			id: data.data[0].id ?? "",
+			respondentsId: data.data[0].respondentId ?? "",
+			name: data.data[0].name ?? "",
+		});
+
+		form.setErrors({});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [userQuery.data]);
+
+	const mutation = useMutation({
+		mutationKey: ["usersMutation"],
+		mutationFn: async (options: { action: "create"; data: { respondentsId: string } }) => {
+		console.log("called");
+		  if (options.action === "create") {
+			return await createAssessmentRequest(options.data);
+		  }
+		},
+		onError: (error: unknown) => {
+		  console.log(error);
+	  
+		  if (error instanceof FormResponseError) {
+			form.setErrors(error.formErrors);
+			return;
+		  }
+	  
+		  if (error instanceof Error) {
+			notifications.show({
+			  message: error.message,
+			  color: "red",
+			});
+		  }
+		},
+	  });
+	  
+	  const handleSubmit = async (values: typeof form.values) => {
+		if (formType === "detail") return;
+	  
+		if (formType === "create") {
+		  try {
+			await mutation.mutateAsync({
+			  action: "create",
+			  data: {
+				respondentsId: values.respondentsId,
+			  },
+			});
+			notifications.show({
+			  message: "Permohonan Asesmen berhasil dibuat!",
+			  color: "green",
+			});
+		  } catch (error) {
+			console.error(error);
+		  }
+		}
+	  
+		queryClient.invalidateQueries({ queryKey: ["users"] });
+		navigate({ search: {} });
+	  };
+	  
+
+	return (
+		<Modal
+			opened={isModalOpen}
+			onClose={() => navigate({ search: {} })}
+			title= {modalTitle} 
+			size="md"
+		>	
+			<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
+
+				<Text>Apakah anda yakin ingin membuat Permohonan Asesmen Baru?</Text>
+
+				{createInputComponents({
+					disableAll: mutation.isPending,
+					readonlyAll: formType === "detail",
+					inputs: [
+						{
+							type: "text",
+							label: "User ID",
+							readOnly: true,
+							variant: "filled",
+							...form.getInputProps("id"),
+							hidden: true
+						},
+						{
+							type: "text",
+							label: "Respondent ID",
+							...form.getInputProps("respondentsId"),
+							hidden: true,
+						},
+						{
+							type: "text",
+							label: "Name",
+							...form.getInputProps("name"),
+							hidden: true,
+						},
+					],
+				})}
+
+				{/* Buttons */}
+				<Flex justify="flex-end" align="center" gap="lg" mt="lg">
+					<Button
+						variant="outline"
+						onClick={() => navigate({ search: {} })}
+						disabled={mutation.isPending}
+					>
+						Tidak
+					</Button>
+						<Button
+							// variant="filled"
+							type="submit"
+							loading={mutation.isPending}
+						>
+							Ya
+						</Button>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}

apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts

@@ -1,7 +1,6 @@
 import client from "@/honoClient";
 import fetchRPC from "@/utils/fetchRPC";
 import { queryOptions } from "@tanstack/react-query";
-import { InferRequestType } from "hono";
 
 export const assessmentRequestQueryOptions = (page: number, limit: number, q?: string) =>
 	queryOptions({
@@ -18,51 +17,14 @@ export const assessmentRequestQueryOptions = (page: number, limit: number, q?: s
 			),
 	});
 
-export const getUserByIdQueryOptions = (userId: string | undefined) =>
+export const createAssessmentRequest = async ({ respondentsId }: { respondentsId: string }) => {
-	queryOptions({
+	const response = await client.assessmentRequest.$post({
-		queryKey: ["user", userId],
+	  json: { respondentId: respondentsId }, // pastikan key-nya sesuai dengan backend API Anda
-		queryFn: () =>
-			fetchRPC(
-				client.users[":id"].$get({
-					param: {
-						id: userId!,
-					},
-					query: {},
-				})
-			),
-		enabled: Boolean(userId),
 	});
   
-export const createUser = async (
+	if (!response.ok) {
-	form: InferRequestType<typeof client.users.$post>["form"]
+	  throw new Error("Failed to create assessment request");
-) => {
-	return await fetchRPC(
-		client.users.$post({
-			form,
-		})
-	);
-};
-
-export const updateUser = async (
-	form: InferRequestType<(typeof client.users)[":id"]["$patch"]>["form"] & {
-		id: string;
 	}
-) => {
-	return await fetchRPC(
-		client.users[":id"].$patch({
-			param: {
-				id: form.id,
-			},
-			form,
-		})
-	);
-};
   
-export const deleteUser = async (id: string) => {
+	return await response.json();
-	return await fetchRPC(
-		client.users[":id"].$delete({
-			param: { id },
-			form: {},
-		})
-	);
   };

apps/frontend/src/routeTree.gen.ts

@@ -17,12 +17,17 @@ import { Route as DashboardLayoutImport } from './routes/_dashboardLayout'
 import { Route as DashboardLayoutUsersIndexImport } from './routes/_dashboardLayout/users/index'
 import { Route as DashboardLayoutTimetableIndexImport } from './routes/_dashboardLayout/timetable/index'
 import { Route as DashboardLayoutDashboardIndexImport } from './routes/_dashboardLayout/dashboard/index'
+import { Route as DashboardLayoutAssessmentRequestIndexImport } from './routes/_dashboardLayout/assessmentRequest/index'
 
 // Create Virtual Routes
 
 const IndexLazyImport = createFileRoute('/')()
 const LogoutIndexLazyImport = createFileRoute('/logout/')()
 const LoginIndexLazyImport = createFileRoute('/login/')()
+const ForgotPasswordIndexLazyImport = createFileRoute('/forgot-password/')()
+const ForgotPasswordVerifyLazyImport = createFileRoute(
+  '/forgot-password/verify',
+)()
 
 // Create/Update Routes
 
@@ -46,6 +51,20 @@ const LoginIndexLazyRoute = LoginIndexLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/login/index.lazy').then((d) => d.Route))
 
+const ForgotPasswordIndexLazyRoute = ForgotPasswordIndexLazyImport.update({
+  path: '/forgot-password/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/forgot-password/index.lazy').then((d) => d.Route),
+)
+
+const ForgotPasswordVerifyLazyRoute = ForgotPasswordVerifyLazyImport.update({
+  path: '/forgot-password/verify',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/forgot-password/verify.lazy').then((d) => d.Route),
+)
+
 const DashboardLayoutUsersIndexRoute = DashboardLayoutUsersIndexImport.update({
   path: '/users/',
   getParentRoute: () => DashboardLayoutRoute,
@@ -65,6 +84,16 @@ const DashboardLayoutDashboardIndexRoute =
     getParentRoute: () => DashboardLayoutRoute,
   } as any)
 
+const DashboardLayoutAssessmentRequestIndexRoute =
+  DashboardLayoutAssessmentRequestIndexImport.update({
+    path: '/assessmentRequest/',
+    getParentRoute: () => DashboardLayoutRoute,
+  } as any).lazy(() =>
+    import('./routes/_dashboardLayout/assessmentRequest/index.lazy').then(
+      (d) => d.Route,
+    ),
+  )
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -83,6 +112,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardLayoutImport
       parentRoute: typeof rootRoute
     }
+    '/forgot-password/verify': {
+      id: '/forgot-password/verify'
+      path: '/forgot-password/verify'
+      fullPath: '/forgot-password/verify'
+      preLoaderRoute: typeof ForgotPasswordVerifyLazyImport
+      parentRoute: typeof rootRoute
+    }
+    '/forgot-password/': {
+      id: '/forgot-password/'
+      path: '/forgot-password'
+      fullPath: '/forgot-password'
+      preLoaderRoute: typeof ForgotPasswordIndexLazyImport
+      parentRoute: typeof rootRoute
+    }
     '/login/': {
       id: '/login/'
       path: '/login'
@@ -97,6 +140,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LogoutIndexLazyImport
       parentRoute: typeof rootRoute
     }
+    '/_dashboardLayout/assessmentRequest/': {
+      id: '/_dashboardLayout/assessmentRequest/'
+      path: '/assessmentRequest'
+      fullPath: '/assessmentRequest'
+      preLoaderRoute: typeof DashboardLayoutAssessmentRequestIndexImport
+      parentRoute: typeof DashboardLayoutImport
+    }
     '/_dashboardLayout/dashboard/': {
       id: '/_dashboardLayout/dashboard/'
       path: '/dashboard'
@@ -126,10 +176,13 @@ declare module '@tanstack/react-router' {
 export const routeTree = rootRoute.addChildren({
   IndexLazyRoute,
   DashboardLayoutRoute: DashboardLayoutRoute.addChildren({
+    DashboardLayoutAssessmentRequestIndexRoute,
     DashboardLayoutDashboardIndexRoute,
     DashboardLayoutTimetableIndexRoute,
     DashboardLayoutUsersIndexRoute,
   }),
+  ForgotPasswordVerifyLazyRoute,
+  ForgotPasswordIndexLazyRoute,
   LoginIndexLazyRoute,
   LogoutIndexLazyRoute,
 })
@@ -144,6 +197,8 @@ export const routeTree = rootRoute.addChildren({
       "children": [
         "/",
         "/_dashboardLayout",
+        "/forgot-password/verify",
+        "/forgot-password/",
         "/login/",
         "/logout/"
       ]
@@ -154,17 +209,28 @@ export const routeTree = rootRoute.addChildren({
     "/_dashboardLayout": {
       "filePath": "_dashboardLayout.tsx",
       "children": [
+        "/_dashboardLayout/assessmentRequest/",
         "/_dashboardLayout/dashboard/",
         "/_dashboardLayout/timetable/",
         "/_dashboardLayout/users/"
       ]
     },
+    "/forgot-password/verify": {
+      "filePath": "forgot-password/verify.lazy.tsx"
+    },
+    "/forgot-password/": {
+      "filePath": "forgot-password/index.lazy.tsx"
+    },
     "/login/": {
       "filePath": "login/index.lazy.tsx"
     },
     "/logout/": {
       "filePath": "logout/index.lazy.tsx"
     },
+    "/_dashboardLayout/assessmentRequest/": {
+      "filePath": "_dashboardLayout/assessmentRequest/index.tsx",
+      "parent": "/_dashboardLayout"
+    },
     "/_dashboardLayout/dashboard/": {
       "filePath": "_dashboardLayout/dashboard/index.tsx",
       "parent": "/_dashboardLayout"

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

@@ -1,11 +1,10 @@
 import { assessmentRequestQueryOptions } from "@/modules/assessmentRequestManagement/queries/assessmentRequestQueries";
 import PageTemplate from "@/components/PageTemplate";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import UserFormModal from "@/modules/assessmentRequestManagement/modals/UserFormModal";
+import FormModal from "@/modules/assessmentRequestManagement/modals/FormModal";
 import ExtractQueryDataType from "@/types/ExtractQueryDataType";
 import { createColumnHelper } from "@tanstack/react-table";
 import { Badge, Flex } from "@mantine/core";
-import UserDeleteModal from "@/modules/assessmentRequestManagement/modals/UserDeleteModal";
 import { Button } from "@/shadcn/components/ui/button";
 
 export const Route = createLazyFileRoute("/_dashboardLayout/assessmentRequest/")({
@@ -19,9 +18,9 @@ const columnHelper = createColumnHelper<DataType>();
 export default function UsersPage() {
 	return (
 		<PageTemplate
-			title="Users"
+			title="Permohonan Asesmen"
 			queryOptions={assessmentRequestQueryOptions}
-			modals={[<UserFormModal />, <UserDeleteModal />]}
+			modals={[<FormModal />]}
 			columnDefs={[
 				columnHelper.display({
 					header: "No",

apps/frontend/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
 	plugins: [react(), TanStackRouterVite()],
 	resolve: {
 		alias: {
-			"@": path.resolve(__dirname,"/src"),
+			"@": path.resolve(__dirname,"src"),
 		},
 	},
 });