chore: add filters

src/private/catalogs/products/ProductCollections.jsx

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { DataGrid } from '@mui/x-data-grid';
 import {
   Typography, Button, Dialog, DialogTitle, DialogContent,
-  IconButton, Box, FormControlLabel, Switch, Tooltip
+  IconButton, Box, Tooltip, ToggleButtonGroup, ToggleButton
 } from '@mui/material';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
@@ -48,9 +48,10 @@ export default function ProductCollections() {
   const [rawRows, setRawRows] = useState([]);
   const [open, setOpen] = useState(false);
   const [editRow, setEditRow] = useState(null);
-  const [showInactive, setShowInactive] = useState(false);
   const [loading, setLoading] = useState(true);
 
+  const [statusFilter, setStatusFilter] = useState('All');
+
   // Tags
   const [loadingTags, setLoadingTags] = useState(true);
   const [typeMap, setTypeMap] = useState({});
@@ -154,7 +155,6 @@ export default function ProductCollections() {
         createdBy: r.createdBy ?? null,
       }));
       setRawRows(normalized);
-      setRows(normalized.filter(r => showInactive ? true : r.status !== 'Inactive'));
     } catch (err) {
       console.error(err);
       toast.error(err?.message || 'Error loading variants');
@@ -165,8 +165,13 @@ export default function ProductCollections() {
 
   useEffect(() => { load(); /* eslint-disable-next-line */ }, []);
   useEffect(() => {
-    setRows(rawRows.filter(r => showInactive ? true : r.status !== 'Inactive'));
-  }, [showInactive, rawRows]);
+    if (statusFilter === 'All') {
+      setRows(rawRows);
+    } else {
+      const want = statusFilter.toLowerCase();
+      setRows(rawRows.filter(r => String(r.status ?? 'Active').toLowerCase() === want));
+    }
+  }, [statusFilter, rawRows]);
 
   const columns = [
     { field: 'modelId', headerName: 'Model Id', width: 220 },
@@ -233,10 +238,19 @@ export default function ProductCollections() {
 
   return (
     <SectionContainer>
-      <Box display="flex" alignItems="center" justifyContent="space-between" mb={2}>
+      <Box display="flex" alignItems="center" justifyContent="space-between" mb={2} flexWrap="wrap" gap={2}>
         <Typography variant="h6">Furniture Variants</Typography>
         <Box display="flex" alignItems="center" gap={2}>
-          <FormControlLabel control={<Switch checked={showInactive} onChange={(_, v) => setShowInactive(v)} />} label="Show Inactive" />
+          <ToggleButtonGroup
+            value={statusFilter}
+            exclusive
+            onChange={(_, v) => v && setStatusFilter(v)}
+            size="small"
+          >
+            <ToggleButton value="Active">Active</ToggleButton>
+            <ToggleButton value="All">All</ToggleButton>
+            <ToggleButton value="Inactive">Inactive</ToggleButton>
+          </ToggleButtonGroup>
           <Button variant="contained" className="button-gold" startIcon={<AddRoundedIcon />} onClick={() => { setEditRow(null); setOpen(true); }}>
             Add Variant
           </Button>