From 73699009fc021ea90fc24be69a3db0fc670a30b8 Mon Sep 17 00:00:00 2001
From: Rodolfo Ruiz <rodolfo.ruiz@heathus.com>
Date: Sat, 6 Sep 2025 18:44:42 -0600
Subject: [PATCH] chore: fix products columns

---
 .../catalogs/products/ProductCollections.jsx  | 90 ++++++++++---------
 1 file changed, 50 insertions(+), 40 deletions(-)

diff --git a/src/private/catalogs/products/ProductCollections.jsx b/src/private/catalogs/products/ProductCollections.jsx
index b8cf900..0f7e065 100644
--- a/src/private/catalogs/products/ProductCollections.jsx
+++ b/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, Tooltip, ToggleButtonGroup, ToggleButton
+  IconButton, Box, ToggleButtonGroup, ToggleButton
 } from '@mui/material';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
@@ -174,7 +174,46 @@ export default function ProductCollections() {
   }, [statusFilter, rawRows]);
 
   const columns = [
-    { field: 'modelId', headerName: 'Model Id', width: 220 },
+   {
+      field: 'actions',
+      headerName: '',
+      width: 130,
+      sortable: false,
+      filterable: false,
+      disableExport: true,
+      renderCell: (params) => (
+        <Box display="flex" alignItems="center" justifyContent="flex-start" height="100%" gap={1}>
+          <IconButton
+            size="small"
+            sx={{
+              backgroundColor: '#DFCCBC',
+              color: '#26201A',
+              '&:hover': { backgroundColor: '#C2B2A4' },
+              borderRadius: 2,
+              p: 1,
+            }}
+            onClick={() => handleEditClick(params)}
+          >
+            <EditRoundedIcon fontSize="small" />
+          </IconButton>
+          <IconButton
+            size="small"
+            sx={{
+              backgroundColor: '#FBE9E7',
+              color: '#C62828',
+              '&:hover': { backgroundColor: '#EF9A9A' },
+              borderRadius: 2,
+              p: 1,
+            }}
+            onClick={() => handleDeleteClick(params?.row)}
+          >
+            <DeleteRoundedIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      ),
+    },
+
+    
     { field: 'name', headerName: 'Name', width: 200 },
     { field: 'categoryId', headerName: 'Category', width: 170, valueGetter: (p) => labelCategory(p?.row?.categoryId) },
     { field: 'providerId', headerName: 'Provider', width: 170, valueGetter: (p) => labelProvider(p?.row?.providerId) },
@@ -201,43 +240,12 @@ export default function ProductCollections() {
     { 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: 'status', headerName: 'Status', width: 120 },
-    {
-      field: 'actions',
-      headerName: '',
-      sortable: false,
-      width: 110,
-      renderCell: (p) => (
-        <Box display="flex" gap={1}>
-          <Tooltip title="Edit">
-            <IconButton size="small" onClick={() => { setEditRow(p.row); setOpen(true); }}>
-              <EditRoundedIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
-          <Tooltip title={p.row.status === 'Active' ? 'Deactivate' : 'Activate'}>
-            <IconButton
-              size="small"
-              onClick={async () => {
-                try {
-                  const updated = { ...p.row, status: p.row.status === 'Active' ? 'Inactive' : 'Active' };
-                  await api.updateVariant(updated);
-                  setRawRows(prev => prev.map(r => r.id === p.row.id ? updated : r));
-                } catch (err) {
-                  console.error(err);
-                  toast.error(err?.message || 'Error updating status');
-                }
-              }}
-            >
-              <DeleteRoundedIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
-        </Box>
-      )
-    },
+    { field: 'status', headerName: 'Status', width: 120 }
   ];
 
   return (
-    <SectionContainer>
+    <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>
         <Box display="flex" alignItems="center" gap={2}>
@@ -257,21 +265,22 @@ export default function ProductCollections() {
         </Box>
       </Box>
 
-      <Box sx={{ width: '100%', height: 560 }}>
+      <Box sx={{ flex: 1, minHeight: 0 }}>
         <DataGrid
           rows={rows}
           columns={columns}
           disableRowSelectionOnClick
           loading={loading || loadingTags}
-          pageSizeOptions={[10, 25, 50]}
+          pageSizeOptions={[50, 100, 200]}
           initialState={{
-            pagination: { paginationModel: { pageSize: 10 } },
+            pagination: { paginationModel: { pageSize: 50 } },
             columns: { columnVisibilityModel: { id: false, _Id: false } },
           }}
           getRowHeight={() => 'auto'}
           sx={{
             '& .MuiDataGrid-cell': { display: 'flex', alignItems: 'center' },
             '& .MuiDataGrid-columnHeader': { display: 'flex', alignItems: 'center' },
+            '& .MuiDataGrid-virtualScroller': { overflowX: 'hidden' },
           }}
         />
       </Box>
@@ -293,6 +302,7 @@ export default function ProductCollections() {
           />
         </DialogContent>
       </Dialog>
-    </SectionContainer>
+      </SectionContainer>
+    </Box>
   );
 }