chore: add the view button

src/private/catalogs/products/AddOrEditProductCollectionForm.jsx

@@ -19,7 +19,7 @@ const TYPE_NAMES = {
   origin: 'Origin',
 };
 
-export default function AddOrEditProductCollectionForm({ initialData, onAdd, onCancel }) {
+export default function AddOrEditProductCollectionForm({ initialData, onAdd, onCancel, viewOnly = false }) {
   const { user } = useAuth();
   const token = user?.thalosToken || localStorage.getItem('thalosToken');
 
@@ -205,6 +205,7 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
           value={form.name}
           onChange={(e) => setVal('name', e.target.value)}
           sx={{ mt: 1 }}
+          disabled={viewOnly}
         />
 
         {/* Category / Provider */}
@@ -215,6 +216,7 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
           value={form.categoryId}
           onChange={(e) => setVal('categoryId', e.target.value)}
           helperText="Se envía el tagName por ahora"
+          disabled={viewOnly}
         >
           {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
           {!loadingTags && options.categories.filter(t => t.status !== 'Inactive').map(tag => (
@@ -227,6 +229,7 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
           fullWidth
           value={form.providerId}
           onChange={(e) => setVal('providerId', e.target.value)}
+          disabled={viewOnly}
         >
           {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
           {!loadingTags && options.providers.filter(t => t.status !== 'Inactive').map(tag => (
@@ -243,6 +246,7 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
               fullWidth
               value={form.color}
               onChange={(e) => setVal('color', e.target.value)}
+              disabled={viewOnly}
             >
               {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
               {!loadingTags && options.colors.filter(t => t.status !== 'Inactive').map(tag => (
@@ -258,6 +262,7 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
               fullWidth
               value={form.line}
               onChange={(e) => setVal('line', e.target.value)}
+              disabled={viewOnly}
             >
               {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
               {!loadingTags && options.lines.filter(t => t.status !== 'Inactive').map(tag => (
@@ -273,6 +278,7 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
               fullWidth
               value={form.attributes.material}
               onChange={(e) => setVal('attributes.material', e.target.value)}
+              disabled={viewOnly}
             >
               {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
               {!loadingTags && options.materials.filter(t => t.status !== 'Inactive').map(tag => (
@@ -285,11 +291,11 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
         <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)} />
+            <TextField label="Price" type="number" fullWidth value={form.price} onChange={(e) => setVal('price', e.target.value)} disabled={viewOnly} />
           </Box>
           {/* Stock */}
           <Box flex={1}>
-            <TextField label="Stock" type="number" fullWidth value={form.stock} onChange={(e) => setVal('stock', e.target.value)} />
+            <TextField label="Stock" type="number" fullWidth value={form.stock} onChange={(e) => setVal('stock', e.target.value)} disabled={viewOnly} />
           </Box>
           {/* Currency */}
           <Box flex={1}>
@@ -299,6 +305,7 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
               fullWidth
               value={form.currency}
               onChange={(e) => setVal('currency', e.target.value)}
+              disabled={viewOnly}
             >
               {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
               {!loadingTags && options.currencies.filter(t => t.status !== 'Inactive').map(tag => (
@@ -315,6 +322,7 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
           fullWidth
           value={form.attributes.legs}
           onChange={(e) => setVal('attributes.legs', e.target.value)}
+          disabled={viewOnly}
         >
           {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
           {!loadingTags && options.legs.filter(t => t.status !== 'Inactive').map(tag => (
@@ -327,6 +335,7 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
           fullWidth
           value={form.attributes.origin}
           onChange={(e) => setVal('attributes.origin', e.target.value)}
+          disabled={viewOnly}
         >
           {loadingTags && <MenuItem value="" disabled><CircularProgress size={16} /> Cargando…</MenuItem>}
           {!loadingTags && options.origins.filter(t => t.status !== 'Inactive').map(tag => (
@@ -335,15 +344,17 @@ export default function AddOrEditProductCollectionForm({ initialData, onAdd, onC
         </TextField>
 
         {/* Status */}
-        <TextField select label="Status" fullWidth value={form.status} onChange={(e) => setVal('status', e.target.value)}>
+        <TextField select label="Status" fullWidth value={form.status} onChange={(e) => setVal('status', e.target.value)} disabled={viewOnly}>
           <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>
+        <Button onClick={onCancel} className="button-transparent">{viewOnly ? 'Close' : 'Cancel'}</Button>
+        {!viewOnly && (
           <Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
+        )}
       </Box>
     </Box>
   );

src/private/catalogs/products/ProductCollections.jsx

@@ -8,6 +8,7 @@ import {
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
 import AddOrEditProductCollectionForm from './AddOrEditProductCollectionForm';
 import FurnitureVariantApi from '../../../api/ProductsApi';
 import CategoriesApi from '../../../api/CategoriesApi';
@@ -52,6 +53,8 @@ export default function ProductCollections() {
 
   const [statusFilter, setStatusFilter] = useState('All');
 
+  const [viewOnly, setViewOnly] = useState(false);
+
   // Tags
   const [loadingTags, setLoadingTags] = useState(true);
   const [typeMap, setTypeMap] = useState({});
@@ -168,7 +171,7 @@ export default function ProductCollections() {
     {
       field: 'actions',
       headerName: '',
-      width: 130,
+      width: 190,
       sortable: false,
       filterable: false,
       disableExport: true,
@@ -183,10 +186,23 @@ export default function ProductCollections() {
               borderRadius: 2,
               p: 1,
             }}
-            onClick={() => { setEditRow(params.row); setOpen(true); }}
+            onClick={() => { setEditRow(params.row); setViewOnly(false); setOpen(true); }}
           >
             <EditRoundedIcon fontSize="small" />
           </IconButton>
+          <IconButton
+            size="small"
+            sx={{
+              backgroundColor: '#E3F2FD',
+              color: '#1565C0',
+              '&:hover': { backgroundColor: '#BBDEFB' },
+              borderRadius: 2,
+              p: 1,
+            }}
+            onClick={() => { setEditRow(params.row); setOpen(true); setViewOnly(true); }}
+          >
+            <VisibilityRoundedIcon fontSize="small" />
+          </IconButton>
           <IconButton
             size="small"
             sx={{
@@ -196,7 +212,7 @@ export default function ProductCollections() {
               borderRadius: 2,
               p: 1,
             }}
-            onClick={() => handleDeleteClick(params?.row)}
+            onClick={() => { setEditRow(params.row); setViewOnly(false); handleDeleteClick(params?.row); }}
           >
             <DeleteRoundedIcon fontSize="small" />
           </IconButton>
@@ -285,7 +301,7 @@ export default function ProductCollections() {
             <ToggleButton value="All">All</ToggleButton>
             <ToggleButton value="Inactive">Inactive</ToggleButton>
           </ToggleButtonGroup>
-          <Button variant="contained" className="button-gold" startIcon={<AddRoundedIcon />} onClick={() => { setEditRow(null); setOpen(true); }}>
+          <Button variant="contained" className="button-gold" startIcon={<AddRoundedIcon />} onClick={() => { setEditRow(null); setViewOnly(false); setOpen(true); }}>
             Add Product Collection
           </Button>
         </Box>
@@ -323,10 +339,17 @@ export default function ProductCollections() {
       </Box>
 
       <Dialog open={open} onClose={() => setOpen(false)} maxWidth="md" fullWidth>
-        <DialogTitle>{editRow ? 'Edit Product Collection' : 'Add Product Collection'}</DialogTitle>
+      <DialogTitle>
+        {viewOnly
+          ? 'View Product Collection'
+          : editRow
+          ? 'Edit Product Collection'
+          : 'Add Product Collection'}
+      </DialogTitle>
         <DialogContent>
           <AddOrEditProductCollectionForm
             initialData={editRow}
+            viewOnly={viewOnly}
             onAdd={(saved) => {
               setOpen(false);
               if (editRow) {