เพิ่ม Custom Confirmation Dialog ที่ใช้ Modal Component ของ Daisy UI เพื่อแทนที่ window.confirm()

web/src/components/ConfirmModal.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { FaTrash, FaTimesCircle } from 'react-icons/fa'; // Icons
+
+export default function ConfirmModal({ message, onConfirm, onCancel, isOpen, isDeleting }) {
+
+    // ใช้ open={isOpen} ใน <dialog> เพื่อควบคุมการแสดงผล
+    if (!isOpen) return null;
+
+    return (
+        // Div ครอบคลุมจอทั้งหมด (Backdrop)
+        <div className="fixed inset-0 bg-gray-300 bg-opacity-30 z-[110] flex justify-center items-center p-4">
+            <dialog className="modal modal-open" open={isOpen}>
+                <div className="modal-box max-w-md bg-white p-6 shadow-2xl rounded-lg">
+
+                    {/* Header/Title */}
+                    <h3 className="font-bold text-xl text-error flex items-center">
+                        <FaTimesCircle className="h-6 w-6 mr-2" />
+                        ยืนยันการลบข้อมูล
+                    </h3>
+
+                    {/* Message Body */}
+                    <p className="py-4 text-gray-700 whitespace-normal break-words">{message}</p>
+
+                    {/* Action Buttons */}
+                    <div className="modal-action">
+                        {/* ปุ่มยกเลิก */}
+                        <button
+                            className="btn btn-ghost"
+                            onClick={onCancel}
+                            disabled={isDeleting}
+                        >
+                            ยกเลิก
+                        </button>
+
+                        {/* ปุ่มยืนยันการลบ */}
+                        <button
+                            // ใช้ isDeleting เพื่อแสดง Loading Spinner
+                            className={"btn btn-error " + (isDeleting ? 'loading' : '')}
+                            onClick={onConfirm}
+                            disabled={isDeleting}
+                        >
+                            {isDeleting ? 'กำลังดำเนินการ...' : 'ยืนยันการลบ'}
+                            <FaTrash className="w-4 h-4 ml-2" />
+                        </button>
+                    </div>
+                </div>
+            </dialog>
+        </div>
+    );
+}

web/src/pages/data/ModelRegistry.jsx

@@ -12,7 +12,7 @@ import {
 } from '../../services/modelRegistryApi';
 import ModelTable from '../../components/ModelRegistry/ModelTable';
 import ModelTopBar from '../../components/ModelRegistry/ModelTopBar';
-
+import ConfirmModal from '../../components/ConfirmModal';
 
 function ModelRegistry() {
     const [isOpen, setIsOpen] = useState(false);
@@ -20,6 +20,10 @@ function ModelRegistry() {
     const [selectedModel, setSelectedModel] = useState(null);
     const [searchTerm, setSearchTerm] = useState(''); // State สำหรับ Search
 
+    // State สำหรับ Confirm Modal
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+    const [modelToDelete, setModelToDelete] = useState(null);
+
     // TanStack Query Hooks
     const { data: models, isLoading, isError } = useModelList();
     const deleteMutation = useDeleteModel();
@@ -51,6 +55,26 @@ function ModelRegistry() {
         }
     };
 
+    // ----------------------------------------------------
+    // Logic การลบ (ใช้ Custom Confirmation)
+    // ----------------------------------------------------
+
+    // Handler สำหรับเปิด Custom Confirmation Modal
+    const handleConfirmDelete = (modelId) => {
+        setModelToDelete(modelId); // เก็บ ID ที่จะลบไว้ใน State
+        setIsConfirmOpen(true);    // เปิด Custom Modal
+    };
+
+    // Handler ที่รันเมื่อผู้ใช้ยืนยันการลบใน Custom Modal
+    const executeDelete = () => {
+        if (modelToDelete) {
+            deleteMutation.mutate(modelToDelete); // รัน Mutation จริง
+        }
+        // ปิด Modal และเคลียร์ State เสมอ
+        setIsConfirmOpen(false);
+        setModelToDelete(null);
+    };
+
     // ----------------------------------------------------
     // Logic การกรองข้อมูล (Filter/Search)
     // ----------------------------------------------------
@@ -78,7 +102,7 @@ function ModelRegistry() {
                     <ModelTable
                         models={filteredModels || []}
                         handleOpenEdit={(model) => handleOpen('edit', model)}
-                        handleDelete={handleDelete}
+                        handleDelete={handleConfirmDelete}
                         deleteLoading={deleteMutation.isPending}
 
                         // ส่ง Hook ไปให้ Component ย่อยใช้งาน
@@ -97,6 +121,14 @@ function ModelRegistry() {
                 model={selectedModel}
                 isSubmitting={isSubmitting}
             />
+            {/* Confirm Modal Component (ใช้แทน window.confirm) */}
+            <ConfirmModal
+                message={`คุณแน่ใจหรือไม่ว่าต้องการลบ Model ID: ${modelToDelete || 'N/A'} นี้? การกระทำนี้ไม่สามารถย้อนกลับได้`}
+                isOpen={isConfirmOpen}
+                onConfirm={executeDelete} // รัน Mutation จริงเมื่อยืนยัน
+                onCancel={() => setIsConfirmOpen(false)}
+                isDeleting={deleteMutation.isPending} // ส่งสถานะ Loading ไปให้ Modal
+            />
         </div>
     );
 }