chore: show all the fields from the getAll

src/private/catalogs/products/ProductCollections.jsx

@@ -192,7 +192,7 @@ export default function ProductCollections() {
               borderRadius: 2,
               p: 1,
             }}
-            onClick={() => handleEditClick(params)}
+            onClick={() => { setEditRow(p.row); setOpen(true); }}
           >
             <EditRoundedIcon fontSize="small" />
           </IconButton>
@@ -237,9 +237,44 @@ export default function ProductCollections() {
     },
     { field: 'currency', headerName: 'Currency', width: 120, valueGetter: (p) => labelCurrency(p?.row?.currency) },
     { field: 'stock', headerName: 'Stock', width: 100, type: 'number', valueGetter: (p) => Number(p?.row?.stock ?? 0) },
-    { field: 'attributes.material', headerName: 'Material', width: 150, valueGetter: (p) => labelMaterial(p?.row?.attributes?.material) },
-    { field: 'attributes.legs', headerName: 'Legs', width: 140, valueGetter: (p) => labelLegs(p?.row?.attributes?.legs) },
-    { field: 'attributes.origin', headerName: 'Origin', width: 150, valueGetter: (p) => labelOrigin(p?.row?.attributes?.origin) },
+    {
+      field: 'attributes',
+      headerName: 'Attributes',
+      minWidth: 300,
+      flex: 1.5,
+      sortable: false,
+      filterable: false,
+      renderCell: (params) => {
+        const a = params?.row?.attributes || {};
+        const chips = [
+          ['Material', labelMaterial(a.material)],
+          ['Legs', labelLegs(a.legs)],
+          ['Origin', labelOrigin(a.origin)],
+        ].filter(([, value]) => !!value);
+
+        return (
+          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
+            {chips.map(([label, value]) => (
+              <Box
+                key={label}
+                component="span"
+                sx={{
+                  px: 1.5,
+                  py: 0.5,
+                  borderRadius: '12px',
+                  backgroundColor: '#DFCCBC',
+                  fontSize: 12,
+                  color: '#26201A',
+                  lineHeight: '18px',
+                }}
+              >
+                {label}: {value}
+              </Box>
+            ))}
+          </Box>
+        );
+      }
+    },
     { field: 'status', headerName: 'Status', width: 120 }
   ];
 
@@ -247,7 +282,7 @@ export default function ProductCollections() {
     <Box sx={{ height: 'calc(100vh - 64px - 64px)', display: 'flex', flexDirection: 'column', gap: 2 }}>
       <SectionContainer>
       <Box display="flex" alignItems="center" justifyContent="space-between" mb={2} flexWrap="wrap" gap={2}>
-        <Typography variant="h6">Furniture Variants</Typography>
+        <Typography variant="h6">Product Collection</Typography>
         <Box display="flex" alignItems="center" gap={2}>
           <ToggleButtonGroup
             value={statusFilter}
@@ -260,7 +295,7 @@ export default function ProductCollections() {
             <ToggleButton value="Inactive">Inactive</ToggleButton>
           </ToggleButtonGroup>
           <Button variant="contained" className="button-gold" startIcon={<AddRoundedIcon />} onClick={() => { setEditRow(null); setOpen(true); }}>
-            Add Variant
+            Add Product Collection
           </Button>
         </Box>
       </Box>