apps/frontend/src/modules/aspectManagement/modals/AspectDeleteModal.tsx

@@ -1,5 +1,14 @@
 import client from "@/honoClient";
-import { Button, Flex, Modal, Text } from "@mantine/core";
+import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/shadcn/components/ui/alert-dialog";
+import { Button } from "@/shadcn/components/ui/button";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getRouteApi, useSearch } from "@tanstack/react-router";
 import { deleteAspect } from "../queries/aspectQueries";
@@ -9,89 +18,80 @@ import fetchRPC from "@/utils/fetchRPC";
 const routeApi = getRouteApi("/_dashboardLayout/aspect/");
 
 export default function AspectDeleteModal() {
-	const queryClient = useQueryClient();
+    const queryClient = useQueryClient();
+    const searchParams = useSearch({ from: "/_dashboardLayout/aspect/" }) as {
+        delete: string;
+    };
 
-	const searchParams = useSearch({ from: "/_dashboardLayout/aspect/" }) as {
+    const aspectId = searchParams.delete;
-		delete: string;
+    const navigate = routeApi.useNavigate();
-	};
 
-	const aspectId = searchParams.delete;
+    const aspectQuery = useQuery({
-	const navigate = routeApi.useNavigate();
+        queryKey: ["management-aspect", aspectId],
+        queryFn: async () => {
+            if (!aspectId) return null;
+            return await fetchRPC(
+                client["management-aspect"][":id"].$get({
+                    param: { id: aspectId },
+                    query: {},
+                })
+            );
+        },
+    });
 
-	const aspectQuery = useQuery({
+    const mutation = useMutation({
-		queryKey: ["management-aspect", aspectId],
+        mutationKey: ["deleteAspectMutation"],
-		queryFn: async () => {
+        mutationFn: async ({ id }: { id: string }) => {
-			if (!aspectId) return null;
+            return await deleteAspect(id);
-			return await fetchRPC(
+        },
-				client["management-aspect"][":id"].$get({
+        onError: (error: unknown) => {
-					param: {
+            if (error instanceof Error) {
-						id: aspectId,
+                notifications.show({
-					},
+                    message: error.message,
-					query: {},
+                    color: "red",
-				})
+                });
-			);
+            }
-		},
+        },
-	});
+        onSuccess: () => {
+            notifications.show({
+                message: "Aspek berhasil dihapus.",
+                color: "green",
+            });
+            queryClient.removeQueries({ queryKey: ["management-aspect", aspectId] });
+            queryClient.invalidateQueries({ queryKey: ["management-aspect"] });
+            navigate({ search: {} });
+        },
+    });
 
-	const mutation = useMutation({
+    const isModalOpen = Boolean(searchParams.delete && aspectQuery.data);
-		mutationKey: ["deleteAspectMutation"],
-		mutationFn: async ({ id }: { id: string }) => {
-			return await deleteAspect(id);
-		},
-		onError: (error: unknown) => {
-			if (error instanceof Error) {
-				notifications.show({
-					message: error.message,
-					color: "red",
-				});
-			}
-		},
-		onSuccess: () => {
-			notifications.show({
-				message: "Aspek berhasil dihapus.",
-				color: "green",
-			});
-			queryClient.removeQueries({ queryKey: ["management-aspect", aspectId] });
-			queryClient.invalidateQueries({ queryKey: ["management-aspect"] });
-			navigate({ search: {} });
-		},
-	});
 
-	const isModalOpen = Boolean(searchParams.delete && aspectQuery.data);
+    return (
-
+        <AlertDialog open={isModalOpen} onOpenChange={() => navigate({ search: {} })}>
-	return (
+            <AlertDialogContent>
-		<Modal
+                <AlertDialogHeader>
-			opened={isModalOpen}
+                    <AlertDialogTitle>Konfirmasi Hapus</AlertDialogTitle>
-			onClose={() => navigate({ search: {} })}
+                    <AlertDialogDescription>
-			title={`Konfirmasi Hapus`}
+                        Apakah Anda yakin ingin menghapus aspek{" "}
-		>
+                        <strong>{aspectQuery.data?.name}</strong>? Tindakan ini tidak dapat diubah.
-			<Text size="sm">
+                    </AlertDialogDescription>
-				Apakah Anda yakin ingin menghapus aspek{" "}
+                </AlertDialogHeader>
-				<Text span fw={700}>
+                <AlertDialogFooter>
-					{aspectQuery.data?.name}
+                    <AlertDialogCancel
-				</Text>
+                        onClick={() => navigate({ search: {} })}
-				? Tindakan ini tidak dapat diubah.
+                        disabled={mutation.isPending}
-			</Text>
+                    >
-
+                        Batal
-			{/* Buttons */}
+                    </AlertDialogCancel>
-			<Flex justify="flex-end" align="center" gap="lg" mt="lg">
+                    <Button
-				<Button
+                        variant="default"
-					variant="outline"
+                        color="red"
-					onClick={() => navigate({ search: {} })}
+                        onClick={() => mutation.mutate({ id: aspectId })}
-					disabled={mutation.isPending}
+                        disabled={mutation.isPending}
-				>
+                    >
-					Batal
+                        {mutation.isPending ? "Hapus..." : "Hapus Aspek"}
-				</Button>
+                    </Button>
-				<Button
+                </AlertDialogFooter>
-					variant="subtle"
+            </AlertDialogContent>
-					type="submit"
+        </AlertDialog>
-					color="red"
+    );
-					loading={mutation.isPending}
-					onClick={() => mutation.mutate({ id: aspectId })}
-				>
-					Hapus Aspek
-				</Button>
-			</Flex>
-		</Modal>
-	);
 }