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";
@@ -10,7 +19,6 @@ const routeApi = getRouteApi("/_dashboardLayout/aspect/");
 
 export default function AspectDeleteModal() {
     const queryClient = useQueryClient();
-
     const searchParams = useSearch({ from: "/_dashboardLayout/aspect/" }) as {
         delete: string;
     };
@@ -24,9 +32,7 @@ export default function AspectDeleteModal() {
             if (!aspectId) return null;
             return await fetchRPC(
                 client["management-aspect"][":id"].$get({
-					param: {
-						id: aspectId,
-					},
+                    param: { id: aspectId },
                     query: {},
                 })
             );
@@ -60,38 +66,32 @@ export default function AspectDeleteModal() {
     const isModalOpen = Boolean(searchParams.delete && aspectQuery.data);
 
     return (
-		<Modal
-			opened={isModalOpen}
-			onClose={() => navigate({ search: {} })}
-			title={`Konfirmasi Hapus`}
-		>
-			<Text size="sm">
+        <AlertDialog open={isModalOpen} onOpenChange={() => navigate({ search: {} })}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Konfirmasi Hapus</AlertDialogTitle>
+                    <AlertDialogDescription>
                         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"
+                        <strong>{aspectQuery.data?.name}</strong>? Tindakan ini tidak dapat diubah.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel
                         onClick={() => navigate({ search: {} })}
                         disabled={mutation.isPending}
                     >
                         Batal
-				</Button>
+                    </AlertDialogCancel>
                     <Button
-					variant="subtle"
-					type="submit"
+                        variant="default"
                         color="red"
-					loading={mutation.isPending}
                         onClick={() => mutation.mutate({ id: aspectId })}
+                        disabled={mutation.isPending}
                     >
-					Hapus Aspek
+                        {mutation.isPending ? "Hapus..." : "Hapus Aspek"}
                     </Button>
-			</Flex>
-		</Modal>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
     );
 }