chore: improve the ui for Products

src/private/catalogs/categories/Categories.jsx

@@ -254,7 +254,7 @@ export default function Categories() {
       }}
     >
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
-        <Typography variant="h6">Categories</Typography>
+        <Typography color='text.primary' variant="h6">Categories</Typography>
 
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
           <ToggleButtonGroup

src/private/catalogs/products/AddOrEditProductCollectionForm.jsx

@@ -1,6 +1,6 @@
 // src/private/furniture/AddOrEditFurnitureVariantForm.jsx
 import { useEffect, useMemo, useState } from 'react';
-import { Box, Button, TextField, MenuItem, Grid, CircularProgress } from '@mui/material';
+import { Box, Button, TextField, MenuItem, CircularProgress } from '@mui/material';
 import FurnitureVariantApi from '../../../api/ProductsApi';
 import CategoriesApi from '../../../api/CategoriesApi';
 import TagTypeApi from '../../../api/TagTypeApi';
@@ -197,154 +197,149 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={12} md={6}>
-          <TextField label="Model Id" fullWidth value={form.modelId} onChange={(e) => setVal('modelId', e.target.value)} />
-        </Grid>
-        <Grid item xs={12} md={6}>
-          <TextField label="Name" fullWidth value={form.name} onChange={(e) => setVal('name', e.target.value)} />
-        </Grid>
+      <Box display="flex" flexDirection="column" gap={2}>
+        {/* Name */}
+        <TextField
+          label="Name"
+          fullWidth
+          value={form.name}
+          onChange={(e) => setVal('name', e.target.value)}
+          sx={{ mt: 1 }}
+        />
 
-        {/* Clasificación */}
-        <Grid item xs={12} md={6}>
-          <TextField
-            select
-            label="Category"
-            fullWidth
-            value={form.categoryId}
-            onChange={(e) => setVal('categoryId', e.target.value)}
-            helperText="Se envía el tagName por ahora"
-          >
-            {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
-            {!loadingTags && options.categories.filter(t => t.status !== 'Inactive').map(tag => (
-              <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
-            ))}
-          </TextField>
-        </Grid>
+        {/* Category / Provider */}
+        <TextField
+          select
+          label="Category"
+          fullWidth
+          value={form.categoryId}
+          onChange={(e) => setVal('categoryId', e.target.value)}
+          helperText="Se envía el tagName por ahora"
+        >
+          {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
+          {!loadingTags && options.categories.filter(t => t.status !== 'Inactive').map(tag => (
+            <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
+          ))}
+        </TextField>
+        <TextField
+          select
+          label="Provider"
+          fullWidth
+          value={form.providerId}
+          onChange={(e) => setVal('providerId', e.target.value)}
+        >
+          {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
+          {!loadingTags && options.providers.filter(t => t.status !== 'Inactive').map(tag => (
+            <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
+          ))}
+        </TextField>
 
-        <Grid item xs={12} md={6}>
-          <TextField
-            select
-            label="Provider"
-            fullWidth
-            value={form.providerId}
-            onChange={(e) => setVal('providerId', e.target.value)}
-          >
-            {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
-            {!loadingTags && options.providers.filter(t => t.status !== 'Inactive').map(tag => (
-              <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
-            ))}
-          </TextField>
-        </Grid>
+        <Box display="flex" gap={2}>
+          {/* Color */}
+          <Box flex={1}>
+            <TextField
+              select
+              label="Color"
+              fullWidth
+              value={form.color}
+              onChange={(e) => setVal('color', e.target.value)}
+            >
+              {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
+              {!loadingTags && options.colors.filter(t => t.status !== 'Inactive').map(tag => (
+                <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
+              ))}
+            </TextField>
+          </Box>
+          {/* Line */}
+          <Box flex={1}>
+            <TextField
+              select
+              label="Line"
+              fullWidth
+              value={form.line}
+              onChange={(e) => setVal('line', e.target.value)}
+            >
+              {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
+              {!loadingTags && options.lines.filter(t => t.status !== 'Inactive').map(tag => (
+                <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
+              ))}
+            </TextField>
+          </Box>
+          {/* Material */}
+          <Box flex={1}>
+            <TextField
+              select
+              label="Material"
+              fullWidth
+              value={form.attributes.material}
+              onChange={(e) => setVal('attributes.material', e.target.value)}
+            >
+              {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
+              {!loadingTags && options.materials.filter(t => t.status !== 'Inactive').map(tag => (
+                <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
+              ))}
+            </TextField>
+          </Box>
+        </Box>
 
-        {/* Específicos de variante */}
-        <Grid item xs={12} md={4}>
-          <TextField
-            select
-            label="Color"
-            fullWidth
-            value={form.color}
-            onChange={(e) => setVal('color', e.target.value)}
-          >
-            {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
-            {!loadingTags && options.colors.filter(t => t.status !== 'Inactive').map(tag => (
-              <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
-            ))}
-          </TextField>
-        </Grid>
+        <Box display="flex" gap={2}>
+          {/* Price */}
+          <Box flex={1}>
+            <TextField label="Price" type="number" fullWidth value={form.price} onChange={(e) => setVal('price', e.target.value)} />
+          </Box>
+          {/* Stock */}
+          <Box flex={1}>
+            <TextField label="Stock" type="number" fullWidth value={form.stock} onChange={(e) => setVal('stock', e.target.value)} />
+          </Box>
+          {/* Currency */}
+          <Box flex={1}>
+            <TextField
+              select
+              label="Currency"
+              fullWidth
+              value={form.currency}
+              onChange={(e) => setVal('currency', e.target.value)}
+            >
+              {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
+              {!loadingTags && options.currencies.filter(t => t.status !== 'Inactive').map(tag => (
+                <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
+              ))}
+            </TextField>
+          </Box>
+        </Box>
 
-        <Grid item xs={12} md={4}>
-          <TextField
-            select
-            label="Line"
-            fullWidth
-            value={form.line}
-            onChange={(e) => setVal('line', e.target.value)}
-          >
-            {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
-            {!loadingTags && options.lines.filter(t => t.status !== 'Inactive').map(tag => (
-              <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
-            ))}
-          </TextField>
-        </Grid>
-
-        <Grid item xs={12} md={4}>
-          <TextField
-            select
-            label="Currency"
-            fullWidth
-            value={form.currency}
-            onChange={(e) => setVal('currency', e.target.value)}
-          >
-            {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
-            {!loadingTags && options.currencies.filter(t => t.status !== 'Inactive').map(tag => (
-              <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
-            ))}
-          </TextField>
-        </Grid>
-
-        {/* Atributos como catálogos */}
-        <Grid item xs={12} md={4}>
-          <TextField
-            select
-            label="Material"
-            fullWidth
-            value={form.attributes.material}
-            onChange={(e) => setVal('attributes.material', e.target.value)}
-          >
-            {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
-            {!loadingTags && options.materials.filter(t => t.status !== 'Inactive').map(tag => (
-              <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
-            ))}
-          </TextField>
-        </Grid>
-
-        <Grid item xs={12} md={4}>
-          <TextField
-            select
-            label="Legs"
-            fullWidth
-            value={form.attributes.legs}
-            onChange={(e) => setVal('attributes.legs', e.target.value)}
-          >
-            {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
-            {!loadingTags && options.legs.filter(t => t.status !== 'Inactive').map(tag => (
-              <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
-            ))}
-          </TextField>
-        </Grid>
-
-        <Grid item xs={12} md={4}>
-          <TextField
-            select
-            label="Origin"
-            fullWidth
-            value={form.attributes.origin}
-            onChange={(e) => setVal('attributes.origin', e.target.value)}
-          >
-            {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
-            {!loadingTags && options.origins.filter(t => t.status !== 'Inactive').map(tag => (
-              <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
-            ))}
-          </TextField>
-        </Grid>
-
-        {/* Números */}
-        <Grid item xs={12} md={4}>
-          <TextField label="Stock" type="number" fullWidth value={form.stock} onChange={(e) => setVal('stock', e.target.value)} />
-        </Grid>
-        <Grid item xs={12} md={4}>
-          <TextField label="Price" type="number" fullWidth value={form.price} onChange={(e) => setVal('price', e.target.value)} />
-        </Grid>
+        {/* Attributes */}
+        <TextField
+          select
+          label="Legs"
+          fullWidth
+          value={form.attributes.legs}
+          onChange={(e) => setVal('attributes.legs', e.target.value)}
+        >
+          {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
+          {!loadingTags && options.legs.filter(t => t.status !== 'Inactive').map(tag => (
+            <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
+          ))}
+        </TextField>
+        <TextField
+          select
+          label="Origin"
+          fullWidth
+          value={form.attributes.origin}
+          onChange={(e) => setVal('attributes.origin', e.target.value)}
+        >
+          {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
+          {!loadingTags && options.origins.filter(t => t.status !== 'Inactive').map(tag => (
+            <MenuItem key={tag._id?.$oid || tag._id || tag.id} value={tag.tagName}>{tag.tagName}</MenuItem>
+          ))}
+        </TextField>
 
         {/* Status */}
-        <Grid item xs={12} md={4}>
-          <TextField select label="Status" fullWidth value={form.status} onChange={(e) => setVal('status', e.target.value)}>
-            <MenuItem value="Active">Active</MenuItem>
-            <MenuItem value="Inactive">Inactive</MenuItem>
-          </TextField>
-        </Grid>
-      </Grid>
+        <TextField select label="Status" fullWidth value={form.status} onChange={(e) => setVal('status', e.target.value)}>
+          <MenuItem value="Active">Active</MenuItem>
+          <MenuItem value="Inactive">Inactive</MenuItem>
+        </TextField>
+      </Box>
 
       <Box display="flex" justifyContent="flex-end" mt={3} gap={1}>
         <Button onClick={onCancel} className="button-transparent">Cancel</Button>

src/private/catalogs/products/ProductCollections.jsx

@@ -80,16 +80,7 @@ export default function ProductCollections() {
       return found?.tagName || String(value);
     };
   };
-
-  const labelCategory = useMemo(() => buildLabelResolver(TYPE_NAMES.category), [byType]);
-  const labelProvider = useMemo(() => buildLabelResolver(TYPE_NAMES.provider), [byType]);
-  const labelColor = useMemo(() => buildLabelResolver(TYPE_NAMES.color), [byType]);
-  const labelLine = useMemo(() => buildLabelResolver(TYPE_NAMES.line), [byType]);
-  const labelCurrency = useMemo(() => buildLabelResolver(TYPE_NAMES.currency), [byType]);
-  const labelMaterial = useMemo(() => buildLabelResolver(TYPE_NAMES.material), [byType]);
-  const labelLegs = useMemo(() => buildLabelResolver(TYPE_NAMES.legs), [byType]);
-  const labelOrigin = useMemo(() => buildLabelResolver(TYPE_NAMES.origin), [byType]);
-
+  
   // Cargar TagTypes + Tags
   useEffect(() => {
     let mounted = true;
@@ -273,10 +264,16 @@ export default function ProductCollections() {
   ];
 
   return (
-    <Box sx={{ height: 'calc(100vh - 64px - 64px)', display: 'flex', flexDirection: 'column', gap: 2 }}>
-     <SectionContainer sx={{ px: 0, maxWidth: '100%!important', width: '100%' }}>
+    <Box
+      sx={{
+        height: 'calc(100vh - 64px - 64px)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
       <Box display="flex" alignItems="center" justifyContent="space-between" mb={2} flexWrap="wrap" gap={2}>
-        <Typography variant="h6">Product Collection</Typography>
+        <Typography color='text.primary' variant="h6">Product Collection</Typography>
         <Box display="flex" alignItems="center" gap={2}>
           <ToggleButtonGroup
             value={statusFilter}
@@ -308,27 +305,20 @@ export default function ProductCollections() {
           getRowHeight={() => 'auto'}
           columnBuffer={0}
           sx={{
-            width: '100%',
-            '& .MuiDataGrid-cell': {
+            height: '100%',
+            '& .MuiDataGrid-cell, & .MuiDataGrid-columnHeader': {
               display: 'flex',
               alignItems: 'center',
-              whiteSpace: 'normal',
-              wordBreak: 'break-word',
-              minHeight: '100%',
             },
-            '& .MuiDataGrid-columnHeader': {
-              display: 'flex',
-              alignItems: 'center',
-              whiteSpace: 'normal',
-              wordBreak: 'break-word',
-            },
-            '& .MuiDataGrid-virtualScroller': {
-              overflowX: 'auto',
-            },
-            '& .MuiDataGrid-main': {
-              minWidth: '1000px',
+            '& .MuiDataGrid-filler': {
+              display: 'none',
             },
           }}
+          slots={{
+            noRowsOverlay: () => (
+              <Box sx={{ p: 2 }}>No product collection found. Try switching the status filter to "All".</Box>
+            ),
+          }}
         />
       </Box>
 
@@ -349,7 +339,6 @@ export default function ProductCollections() {
           />
         </DialogContent>
       </Dialog>
-      </SectionContainer>
     </Box>
   );
 }