Refactor: Add custom deletion confirmation modal in AssetsPage

Channel-Frontend/src/pages/AssetsPage.tsx

@@ -29,6 +29,7 @@ import { ManageGroupsModal } from "../features/assets/components/ManageGroupsMod
 import { PageHeader } from "../components/ui/PageHeader";
 import Button from "../components/ui/Button";
 import { PageLayout } from "../components/layout/PageLayout";
+import Modal from "../components/ui/Modal";
 
 // Type Definitions
 import type { Asset, Organization } from "../types/assets";
@@ -74,6 +75,7 @@ export const AssetsPage = () => {
   const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
   const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);
   const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
+  const [assetToDelete, setAssetToDelete] = useState<{ id: string, title: string } | null>(null);
 
   useEffect(() => {
     fetchData();
@@ -138,16 +140,19 @@ export const AssetsPage = () => {
     setIsDetailsOpen(true);
   };
 
-  const handleDeleteAsset = async (id: string) => {
+  const handleDeleteAsset = (id: string) => {
     const asset = assets.find(a => a.id === id);
-    const title = asset ? asset.title : "this asset";
-    if (
-      !window.confirm(`Are you sure you want to permanently delete "${title}"?`)
-    )
-      return;
+    if (asset) {
+      setAssetToDelete({ id: asset.id, title: asset.title });
+    }
+  };
+
+  const confirmDeleteAsset = async () => {
+    if (!assetToDelete) return;
     try {
-      await deleteAsset(id);
-      success("Asset deleted successfully", `"${title}" has been permanently removed.`);
+      await deleteAsset(assetToDelete.id);
+      success("Asset deleted successfully", `"${assetToDelete.title}" has been permanently removed.`);
+      setAssetToDelete(null);
       await fetchData();
     } catch (err: any) {
       console.error("Failed to delete asset", err);
@@ -474,6 +479,37 @@ export const AssetsPage = () => {
         groups={groups}
         onRefresh={fetchData}
       />
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        isOpen={assetToDelete !== null}
+        onClose={() => setAssetToDelete(null)}
+        title="Delete Asset"
+        subtitle="Confirm permanent resource deletion."
+        size="sm"
+      >
+        <div className="space-y-4 font-sans">
+          <p className="text-xs text-ink-600 leading-relaxed">
+            Are you sure you want to permanently delete <span className="font-bold text-ink-900">"{assetToDelete?.title}"</span>? This action cannot be undone.
+          </p>
+          <div className="flex gap-3 justify-end pt-2">
+            <Button
+              onClick={() => setAssetToDelete(null)}
+              variant="secondary"
+              size="sm"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={confirmDeleteAsset}
+              variant="danger"
+              size="sm"
+            >
+              Delete Permanently
+            </Button>
+          </div>
+        </div>
+      </Modal>
     </PageLayout>
   );
 };