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

@@ -1,7 +1,7 @@
 import stringToColorHex from "@/utils/stringToColorHex";
 import {
 	Avatar,
-	Button,
+	// Button,
 	Center,
 	Flex,
 	Modal,
@@ -9,7 +9,7 @@ import {
 	Stack,
 	Text
 } from "@mantine/core";
-// import { Button } from "@/shadcn/components/ui/button";
+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";
@@ -34,14 +34,9 @@ export default function UserFormModal() {
 
 	const searchParams = routeApi.useSearch();
 
-	const dataId = searchParams.detail || searchParams.edit;
+	const isModalOpen = Boolean(searchParams.create);
 
-	const isModalOpen = Boolean(dataId || searchParams.create);
-
-	const detailId = searchParams.detail;
-	const editId = searchParams.edit;
-
-	const formType = detailId ? "detail" : editId ? "edit" : "create";
+	const formType = "create";
 
 	/**
 	 * CHANGE FOLLOWING:
@@ -77,7 +72,6 @@ export default function UserFormModal() {
 		});
 
 		form.setErrors({});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [userQuery.data]);
 
 	const mutation = useMutation({
@@ -88,6 +82,18 @@ export default function UserFormModal() {
 			return await createAssessmentRequest(options.data);
 		  }
 		},
+		onSuccess: () => {
+			// Ini akan memaksa react-query untuk mengambil data terbaru
+			queryClient.invalidateQueries({ queryKey: ["assessmentRequest"] });
+		
+			notifications.show({
+			  message: "Permohonan Asesmen berhasil dibuat!",
+			  color: "green",
+			});
+		
+			// Menutup modal
+			navigate({ search: {} });
+		  },
 		onError: (error: unknown) => {
 		  console.log(error);
 	  
@@ -106,7 +112,6 @@ export default function UserFormModal() {
 	  });
 	  
 	  const handleSubmit = async (values: typeof form.values) => {
-		if (formType === "detail") return;
 	  
 		if (formType === "create") {
 		  try {
@@ -116,10 +121,6 @@ export default function UserFormModal() {
 				respondentsId: values.respondentsId,
 			  },
 			});
-			notifications.show({
-			  message: "Permohonan Asesmen berhasil dibuat!",
-			  color: "green",
-			});
 		  } catch (error) {
 			console.error(error);
 		  }
@@ -141,9 +142,10 @@ export default function UserFormModal() {
 
 				<Text>Apakah anda yakin ingin membuat Permohonan Asesmen Baru?</Text>
 
+				{/* Fields to display data will be sent */}
 				{createInputComponents({
 					disableAll: mutation.isPending,
-					readonlyAll: formType === "detail",
+					readonlyAll: formType === "create",
 					inputs: [
 						{
 							type: "text",
@@ -172,15 +174,15 @@ export default function UserFormModal() {
 				<Flex justify="flex-end" align="center" gap="lg" mt="lg">
 					<Button
 						variant="outline"
+						type="button"
 						onClick={() => navigate({ search: {} })}
 						disabled={mutation.isPending}
 					>
 						Tidak
 					</Button>
 						<Button
-							// variant="filled"
 							type="submit"
-							loading={mutation.isPending}
+							isLoading={mutation.isPending}
 						>
 							Ya
 						</Button>

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

@@ -4,7 +4,7 @@ import { queryOptions } from "@tanstack/react-query";
 
 export const assessmentRequestQueryOptions = (page: number, limit: number, q?: string) =>
 	queryOptions({
-		queryKey: ["assesmentRequest", { page, limit, q }],
+		queryKey: ["assessmentRequest", { page, limit, q }],
 		queryFn: () =>
 			fetchRPC(
 				client.assessmentRequest.$get({
@@ -19,7 +19,7 @@ export const assessmentRequestQueryOptions = (page: number, limit: number, q?: s
 
 export const createAssessmentRequest = async ({ respondentsId }: { respondentsId: string }) => {
 	const response = await client.assessmentRequest.$post({
-	  json: { respondentId: respondentsId }, // pastikan key-nya sesuai dengan backend API Anda
+	  json: { respondentId: respondentsId },
 	});
   
 	if (!response.ok) {

apps/frontend/src/shadcn/components/ui/button.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import { TbLoader2 } from "react-icons/tb"
 
 import { cn } from "@/lib/utils"
 
@@ -37,17 +38,25 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
+  isLoading?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, isLoading, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button"
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        disabled={isLoading || props.disabled} // Disable tombol jika loading
         {...props}
-      />
+      >
+        {isLoading ? (
+          <TbLoader2 className="mr-2 h-4 w-4 animate-spin" /> // Tampilkan spinner saat loading
+        ) : (
+          children
+        )}
+      </Comp>
     )
   }
 )