chore: delete implementation in product collection

src/api/ProductsApi.js

@@ -52,4 +52,15 @@ export default class ProductsApi {
     if (!res.ok) throw new Error(`Delete error ${res.status}: ${await res.text()}`);
     return res.json();
   }
+
+    async changeStatusVariant(payload) {
+    // If your API is change status, reuse updateVariant.
+    const res = await fetch(`${this.baseUrl}/ChangeStatus`, {
+      method: 'PATCH',
+      headers: this.headers(),
+      body: JSON.stringify(payload),
+    });
+    if (!res.ok) throw new Error(`ChangeStatus error ${res.status}: ${await res.text()}`);
+    return res.json();
+  }
 }

src/private/catalogs/categories/Categories.jsx

@@ -370,8 +370,8 @@ export default function Categories() {
         <DialogTitle>Delete Category</DialogTitle>
         <DialogContent>
           <Box sx={{ display: 'flex', gap: 1, mt: 2, mb: 1 }}>
-            <Button onClick={() => setConfirmOpen(false)}>Cancel</Button>
-            <Button color="error" variant="contained" onClick={confirmDelete}>Delete</Button>
+            <Button onClick={() => setConfirmOpen(false)} className='button-transparent'>Cancel</Button>
+            <Button color="error" variant="contained" onClick={confirmDelete} className="button-gold">Delete</Button>
           </Box>
         </DialogContent>
       </Dialog>

src/private/catalogs/products/ProductCollections.jsx

@@ -55,6 +55,8 @@ export default function ProductCollections() {
 
   const [viewOnly, setViewOnly] = useState(false);
 
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
   // Tags
   const [loadingTags, setLoadingTags] = useState(true);
   const [typeMap, setTypeMap] = useState({});
@@ -167,6 +169,26 @@ export default function ProductCollections() {
     }
   }, [statusFilter, rawRows]);
 
+  const handleDeleteClick = (row) => {
+    setEditRow(row);
+    setConfirmOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    try {
+      if (!editRow?.id) return;
+      await api.changeStatusVariant({ mongoId: editRow.id, status: 'Inactive' });
+      await load();
+      toast.success('Deleted successfully');
+    } catch (err) {
+      console.error(err);
+      toast.error(err?.message || 'Delete failed');
+    } finally {
+      setConfirmOpen(false);
+      setEditRow(null);
+    }
+  };
+
   const columns = [
     {
       field: 'actions',
@@ -212,7 +234,7 @@ export default function ProductCollections() {
               borderRadius: 2,
               p: 1,
             }}
-            onClick={() => { setEditRow(params.row); setViewOnly(false); handleDeleteClick(params?.row); }}
+            onClick={() => { setViewOnly(false); handleDeleteClick(params?.row); }}
           >
             <DeleteRoundedIcon fontSize="small" />
           </IconButton>
@@ -362,6 +384,16 @@ export default function ProductCollections() {
           />
         </DialogContent>
       </Dialog>
+      
+      <Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
+        <DialogTitle>Delete Product Collection</DialogTitle>
+        <DialogContent>
+          <Box sx={{ display: 'flex', gap: 1, mt: 2, mb: 1 }}>
+            <Button onClick={() => setConfirmOpen(false)} className='button-transparent'>Cancel</Button>
+            <Button color="error" variant="contained" onClick={confirmDelete} className="button-gold">Delete</Button>
+          </Box>
+        </DialogContent>
+      </Dialog>
     </Box>
   );
 }