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

@@ -1,4 +1,14 @@
-import { Button, Flex, Modal, ScrollArea } from "@mantine/core";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/shadcn/components/ui/dialog";
+import { Button } from "@/shadcn/components/ui/button";
+import { ScrollArea } from "@/shadcn/components/ui/scroll-area";
+// import { Button, Flex, Modal, ScrollArea } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getRouteApi } from "@tanstack/react-router";
@@ -124,8 +134,13 @@ export default function AssessmentRequestManagementFormModal({
 	const { status } = form.values;
 
 	return (
-		<Modal opened={isOpen} onClose={onClose} title="Detail Permohonan Asesmen">
-			<ScrollArea style={{ height: "400px", paddingRight: "15px" }} scrollbarSize={8}>
+		<Dialog open={isOpen} onOpenChange={onClose}>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Detail Permohonan Asesmen</DialogTitle>
+				</DialogHeader>
+				<DialogDescription>
+					<ScrollArea className="h-[400px] w-full rounded-md p-4">
 						{createInputComponents({
 							disableAll: mutation.isPending,
 							readonlyAll: true,
@@ -183,32 +198,32 @@ export default function AssessmentRequestManagementFormModal({
 							],
 						})}
 
-				<Flex justify="flex-end" align="center" gap="lg" mt="lg">
-					<Button variant="outline" onClick={onClose} disabled={mutation.isPending}>
+						<div className="flex justify-end gap-4 mt-4">
+							<Button onClick={onClose} variant="outline" disabled={mutation.isPending}>
 								Tutup
 							</Button>
 							{status !== "selesai" && (
 								<>
 									<Button
-								variant="filled"
-								color="red"
 										onClick={() => handleStatusChange("ditolak")}
+										variant="destructive"
 										disabled={mutation.isPending}
 									>
 										Tolak
 									</Button>
 									<Button
-								variant="filled"
-								color="blue"
 										onClick={() => handleStatusChange("diterima")}
+										variant="default"
 										disabled={mutation.isPending}
 									>
 										Terima
 									</Button>
 								</>
 							)}
-				</Flex>
+						</div>
 					</ScrollArea>
-		</Modal>
+				</DialogDescription>
+			</DialogContent>
+		</Dialog>
 	);
 }