apps/frontend/src/modules/questionsManagement/modals/QuestionDeleteModal.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 { deleteQuestion } from "../queries/questionQueries";
@@ -60,40 +69,30 @@ export default function QuestionDeleteModal() {
 	const isModalOpen = Boolean(searchParams.delete && questionQuery.data);
 
 	return (
-		<Modal
-			opened={isModalOpen}
-			onClose={() => navigate({ search: {} })}
-			title={`Delete confirmation`}
-		>
-			<Text size="sm">
-				Are you sure you want to delete question{" "}
-				<Text span fw={700}>
-					"{questionQuery.data?.question}"
-				</Text>
-				{" "}? This action is irreversible.
-			</Text>
-
-			{/* {errorMessage && <Alert color="red">{errorMessage}</Alert>} */}
-			{/* Buttons */}
-			<Flex justify="flex-end" align="center" gap="lg" mt="lg">
-				<Button
-					variant="outline"
-					onClick={() => navigate({ search: {} })}
-					disabled={mutation.isPending}
-				>
-					Cancel
-				</Button>
-				<Button
-					variant="subtle"
-					// leftSection={<TbDeviceFloppy size={20} />}
-					type="submit"
-					color="red"
-					loading={mutation.isPending}
-					onClick={() => mutation.mutate({ id: questionId })}
-				>
-					Delete Question
-				</Button>
-			</Flex>
-		</Modal>
+		<AlertDialog open={isModalOpen} onOpenChange={() => navigate({ search: {} })}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Konfirmasi Hapus</AlertDialogTitle>
+                    <AlertDialogDescription>
+						Apakah Anda yakin ingin menghapus pertanyaan ini? Tindakan ini tidak dapat diubah.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel
+                        onClick={() => navigate({ search: {} })}
+                        disabled={mutation.isPending}
+                    >
+                        Batal
+                    </AlertDialogCancel>
+                    <Button
+                        variant="destructive"
+                        onClick={() => mutation.mutate({ id: questionId })}
+                        disabled={mutation.isPending}
+                    >
+                        {mutation.isPending ? "Menghapus..." : "Hapus Pertanyaan"}
+                    </Button>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
 	);
 }