1234

frontend/src/pages/Sites/List.tsx

@@ -17,6 +17,7 @@ import InputField from '../../components/form/input/InputField';
 import Select from '../../components/form/Select';
 import ViewToggle from '../../components/common/ViewToggle';
 import WorkflowGuide from '../../components/onboarding/WorkflowGuide';
+import ConfirmDialog from '../../components/common/ConfirmDialog';
 import { useOnboardingStore } from '../../store/onboardingStore';
 import { 
   PlusIcon, 
@@ -75,6 +76,9 @@ export default function SiteList() {
   // Site Management Modals
   const [selectedSite, setSelectedSite] = useState<Site | null>(null);
   const [togglingSiteId, setTogglingSiteId] = useState<number | null>(null);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [siteToDelete, setSiteToDelete] = useState<Site | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
   
   // Filters
   const [searchTerm, setSearchTerm] = useState('');
@@ -229,10 +233,20 @@ export default function SiteList() {
     }
   };
 
-  const handleDeleteSite = async (siteId: number) => {
+  const handleDeleteSite = (site: Site) => {
+    setSiteToDelete(site);
+    setShowDeleteConfirm(true);
+  };
+
+  const confirmDeleteSite = async () => {
+    if (!siteToDelete) return;
+
     try {
-      await deleteSite(siteId);
+      setIsDeleting(true);
+      await deleteSite(siteToDelete.id);
       toast.success('Site deleted successfully');
+      setShowDeleteConfirm(false);
+      setSiteToDelete(null);
       await loadSites();
     } catch (error: any) {
       if (isUpgradeError(error)) {
@@ -240,6 +254,8 @@ export default function SiteList() {
       } else {
         toast.error(`Failed to delete site: ${error.message}`);
       }
+    } finally {
+      setIsDeleting(false);
     }
   };
 
@@ -414,15 +430,13 @@ export default function SiteList() {
             </div>
             {/* Status badge and toggle in top right */}
             <div className="absolute top-0 right-0 flex items-center gap-2">
-              <Button
-                onClick={() => handleDeleteSite(site.id)}
-                variant="solid"
-                tone="danger"
-                size="xs"
-                className="bg-red-600 hover:bg-red-700 text-white"
-                startIcon={<TrashBinIcon className="w-3.5 h-3.5" />}
+              <button
+                onClick={() => handleDeleteSite(site)}
+                className="p-1.5 rounded-md bg-error-600 hover:bg-error-700 text-white transition-colors shadow-theme-sm"
                 title="Delete site"
-              />
+              >
+                <TrashBinIcon className="w-3.5 h-3.5" />
+              </button>
               <Switch
                 checked={site.is_active}
                 onChange={(enabled) => handleToggle(site.id, enabled)}
@@ -597,7 +611,10 @@ export default function SiteList() {
           }}
           onFilterReset={clearFilters}
           onDelete={async (id) => {
-            await handleDeleteSite(id);
+            const site = filteredSites.find(s => s.id === id);
+            if (site) {
+              handleDeleteSite(site);
+            }
           }}
           getItemDisplayName={(row) => row.name}
         />
@@ -680,6 +697,22 @@ export default function SiteList() {
           )}
         </>
       )}
+
+      {/* Delete Confirmation Dialog */}
+      <ConfirmDialog
+        isOpen={showDeleteConfirm}
+        onClose={() => {
+          setShowDeleteConfirm(false);
+          setSiteToDelete(null);
+        }}
+        onConfirm={confirmDeleteSite}
+        title="Delete Site"
+        message={`Are you sure you want to delete "${siteToDelete?.name}"? This action cannot be undone.`}
+        confirmText="Delete"
+        cancelText="Cancel"
+        variant="danger"
+        isLoading={isDeleting}
+      />
     </>
   );
 }