update: component modal for delete on aspect, change modal to alert dialog from shadcn

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 {
-		delete: string;
-	};
+    const aspectId = searchParams.delete;
+    const navigate = routeApi.useNavigate();
 
-	const aspectId = searchParams.delete;
-	const navigate = routeApi.useNavigate();
+    const aspectQuery = useQuery({
+        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({
-		queryKey: ["management-aspect", aspectId],
-		queryFn: async () => {
-			if (!aspectId) return null;
-			return await fetchRPC(
-				client["management-aspect"][":id"].$get({
-					param: {
-						id: aspectId,
-					},
-					query: {},
-				})
-			);
-		},
-	});
+    const mutation = useMutation({
+        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 mutation = useMutation({
-		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);
 
-	const isModalOpen = Boolean(searchParams.delete && aspectQuery.data);
-
-	return (
-		<Modal
-			opened={isModalOpen}
-			onClose={() => navigate({ search: {} })}
-			title={`Konfirmasi Hapus`}
-		>
-			<Text size="sm">
-				Apakah Anda yakin ingin menghapus aspek{" "}
-				<Text span fw={700}>
-					{aspectQuery.data?.name}
-				</Text>
-				? Tindakan ini tidak dapat diubah.
-			</Text>
-
-			{/* Buttons */}
-			<Flex justify="flex-end" align="center" gap="lg" mt="lg">
-				<Button
-					variant="outline"
-					onClick={() => navigate({ search: {} })}
-					disabled={mutation.isPending}
-				>
-					Batal
-				</Button>
-				<Button
-					variant="subtle"
-					type="submit"
-					color="red"
-					loading={mutation.isPending}
-					onClick={() => mutation.mutate({ id: aspectId })}
-				>
-					Hapus Aspek
-				</Button>
-			</Flex>
-		</Modal>
-	);
+    return (
+        <AlertDialog open={isModalOpen} onOpenChange={() => navigate({ search: {} })}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Konfirmasi Hapus</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        Apakah Anda yakin ingin menghapus aspek{" "}
+                        <strong>{aspectQuery.data?.name}</strong>? Tindakan ini tidak dapat diubah.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel
+                        onClick={() => navigate({ search: {} })}
+                        disabled={mutation.isPending}
+                    >
+                        Batal
+                    </AlertDialogCancel>
+                    <Button
+                        variant="default"
+                        color="red"
+                        onClick={() => mutation.mutate({ id: aspectId })}
+                        disabled={mutation.isPending}
+                    >
+                        {mutation.isPending ? "Hapus..." : "Hapus Aspek"}
+                    </Button>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
 }