chore: improve the ui for Products

src/private/catalogs/products/AddOrEditProductCollectionForm.jsx

@@ -199,12 +199,13 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
     <Box>
       <Box display="flex" flexDirection="column" gap={2}>
         {/* Name */}
-        <TextField label="Name" fullWidth value={form.name} onChange={(e) => setVal('name', e.target.value)} />
-        {/* Status */}
-        <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>
+        <TextField
+          label="Name"
+          fullWidth
+          value={form.name}
+          onChange={(e) => setVal('name', e.target.value)}
+          sx={{ mt: 1 }}
+        />
 
         {/* Category / Provider */}
         <TextField
@@ -233,57 +234,81 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
           ))}
         </TextField>
 
-        {/* Color / Line / Currency */}
-        <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>
-        <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>
-        <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 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>
+
+        <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>
 
         {/* Attributes */}
-        <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>
         <TextField
           select
           label="Legs"
@@ -309,9 +334,11 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
           ))}
         </TextField>
 
-        {/* Stock / Price */}
-        <TextField label="Stock" type="number" fullWidth value={form.stock} onChange={(e) => setVal('stock', e.target.value)} />
-        <TextField label="Price" type="number" fullWidth value={form.price} onChange={(e) => setVal('price', e.target.value)} />
+        {/* Status */}
+        <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}>