From b52a07eb42a5eda33fa69080ead20146a3ed0a71 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Thu, 31 Oct 2024 15:06:52 +0700
Subject: [PATCH] update: component modal using shadcn

---
 .../modals/ConfirmModal.tsx                   | 42 +++++++++++--------
 .../modals/FileSizeValidationModal.tsx        | 35 ++++++++++------
 .../modals/ValidationModal.tsx                | 35 ++++++++++------
 3 files changed, 70 insertions(+), 42 deletions(-)

diff --git a/apps/frontend/src/modules/assessmentManagement/modals/ConfirmModal.tsx b/apps/frontend/src/modules/assessmentManagement/modals/ConfirmModal.tsx
index 0d6f479..cc35e6c 100644
--- a/apps/frontend/src/modules/assessmentManagement/modals/ConfirmModal.tsx
+++ b/apps/frontend/src/modules/assessmentManagement/modals/ConfirmModal.tsx
@@ -1,5 +1,12 @@
-import { Modal, Text, Flex } from "@mantine/core";
 import { Button } from "@/shadcn/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shadcn/components/ui/dialog";
 
 interface FinishAssessmentModalProps {
     assessmentId: string;
@@ -15,22 +22,21 @@ export default function FinishAssessmentModal({
     onConfirm,
 }: FinishAssessmentModalProps) {
     return (
-        <Modal opened={opened} onClose={onClose} title="Konfirmasi Selesai Asesmen">
-            <Text>
-                Apakah Anda yakin ingin mengakhiri assessment ini? Pastikan semua jawaban sudah lengkap sebelum melanjutkan. Jika Anda sudah siap, klik 'Ya' untuk menyelesaikan.
-            </Text>
-            <Flex gap="sm" justify="flex-end" mt="md">
-                <Button variant="outline" onClick={onClose}>
-                    Tidak
-                </Button>
-                <Button
-                    onClick={() => {
-                        onConfirm(assessmentId);
-                    }}
-                >
-                    Ya
-                </Button>
-            </Flex>
-        </Modal>
+        <Dialog open={opened} onOpenChange={onClose}>
+            <DialogContent className="max-w-md">
+                <DialogHeader>
+                    <DialogTitle>Konfirmasi Selesai Asesmen</DialogTitle>
+                    <DialogDescription>
+                        Apakah Anda yakin ingin mengakhiri assessment ini? Pastikan semua jawaban sudah lengkap sebelum melanjutkan. Jika Anda sudah siap, klik 'Ya' untuk menyelesaikan.
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter className="flex justify-end gap-2">
+                    <Button variant="outline" onClick={onClose}>
+                        Tidak
+                    </Button>
+                    <Button onClick={() => onConfirm(assessmentId)}>Ya</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
     );
 }
\ No newline at end of file
diff --git a/apps/frontend/src/modules/assessmentManagement/modals/FileSizeValidationModal.tsx b/apps/frontend/src/modules/assessmentManagement/modals/FileSizeValidationModal.tsx
index 00ae75d..a9ed530 100644
--- a/apps/frontend/src/modules/assessmentManagement/modals/FileSizeValidationModal.tsx
+++ b/apps/frontend/src/modules/assessmentManagement/modals/FileSizeValidationModal.tsx
@@ -1,5 +1,12 @@
-import { Modal, Text, Flex } from "@mantine/core";
 import { Button } from "@/shadcn/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shadcn/components/ui/dialog";
 
 interface FileSizeValidationModalProps {
     opened: boolean;
@@ -13,16 +20,20 @@ export default function FileSizeValidationModal({
     fileName,
 }: FileSizeValidationModalProps) {
     return (
-        <Modal opened={opened} onClose={onClose} title="Peringatan Ukuran File">
-            <Text>
-                Ukuran file {fileName} melebihi batas maksimum 25 MB! 
-                Silakan pilih file yang lebih kecil.
-            </Text>
-            <Flex gap="sm" justify="flex-end" mt="md">
-                <Button variant="outline" onClick={onClose}>
-                    Tutup
-                </Button>
-            </Flex>
-        </Modal>
+        <Dialog open={opened} onOpenChange={onClose}>
+            <DialogContent className="max-w-md">
+                <DialogHeader>
+                    <DialogTitle>Peringatan Ukuran File</DialogTitle>
+                    <DialogDescription>
+                        Ukuran file {fileName} melebihi batas maksimum 25 MB! Silakan pilih file yang lebih kecil.
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter className="flex justify-end gap-2">
+                    <Button variant="outline" onClick={onClose}>
+                        Tutup
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
     );
 }
\ No newline at end of file
diff --git a/apps/frontend/src/modules/assessmentManagement/modals/ValidationModal.tsx b/apps/frontend/src/modules/assessmentManagement/modals/ValidationModal.tsx
index e370dc1..5427d78 100644
--- a/apps/frontend/src/modules/assessmentManagement/modals/ValidationModal.tsx
+++ b/apps/frontend/src/modules/assessmentManagement/modals/ValidationModal.tsx
@@ -1,5 +1,12 @@
-import { Modal, Text, Flex } from "@mantine/core";
 import { Button } from "@/shadcn/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/shadcn/components/ui/dialog";
 
 interface ValidationModalProps {
     opened: boolean;
@@ -13,16 +20,20 @@ export default function ValidationModal({
     unansweredQuestions,
 }: ValidationModalProps) {
     return (
-        <Modal opened={opened} onClose={onClose} title="Peringatan">
-            <Text>
-                Anda mempunyai {unansweredQuestions} pertanyaan yang belum terjawab! 
-                Pastikan semua jawaban sudah lengkap sebelum melanjutkan.
-            </Text>
-            <Flex gap="sm" justify="flex-end" mt="md">
-                <Button variant="outline" onClick={onClose}>
-                    Tutup
-                </Button>
-            </Flex>
-        </Modal>
+        <Dialog open={opened} onOpenChange={onClose}>
+            <DialogContent className="max-w-md">
+                <DialogHeader>
+                    <DialogTitle>Peringatan</DialogTitle>
+                    <DialogDescription>
+                        Anda mempunyai {unansweredQuestions} pertanyaan yang belum terjawab! Pastikan semua jawaban sudah lengkap sebelum melanjutkan.
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter className="flex justify-end gap-2">
+                    <Button variant="outline" onClick={onClose}>
+                        Tutup
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
     );
 }
\ No newline at end of file