From efdb48919f061f7644370b42b1ffc1ad673ff2a4 Mon Sep 17 00:00:00 2001
From: Rodolfo Ruiz <rodolfo.ruiz@heathus.com>
Date: Sat, 6 Sep 2025 20:08:39 -0600
Subject: [PATCH] chore: add the logic to see in view mode the categories as
 well

---
 .../categories/AddOrEditCategoryForm.jsx      | 18 ++++++--
 .../catalogs/categories/Categories.jsx        | 43 +++++++++++++++++++
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/private/catalogs/categories/AddOrEditCategoryForm.jsx b/src/private/catalogs/categories/AddOrEditCategoryForm.jsx
index deec321..1786cf9 100644
--- a/src/private/catalogs/categories/AddOrEditCategoryForm.jsx
+++ b/src/private/catalogs/categories/AddOrEditCategoryForm.jsx
@@ -43,7 +43,7 @@ function formatDateSafe(value) {
   }).format(d);
 }
 
-export default function AddOrEditCategoryForm({ onAdd, initialData, onCancel, materials: materialsProp = [], initialMaterialNames = [] }) {
+export default function AddOrEditCategoryForm({ onAdd, initialData, onCancel, materials: materialsProp = [], initialMaterialNames = [], viewOnly = false }) {
   const { user } = useAuth();
   const token = user?.thalosToken || localStorage.getItem('thalosToken');
   const api = useMemo(() => new CategoriesApi(token), [token]);
@@ -248,6 +248,7 @@ const tagLabelById = useMemo(() => {
           fullWidth
           sx={{ mb: 2 }}
           InputProps={{ readOnly: true }}
+          disabled={viewOnly}
         />
       )}
 
@@ -259,6 +260,7 @@ const tagLabelById = useMemo(() => {
         fullWidth
         sx={{ mb: 2 }}
         required
+        disabled={viewOnly}
       />
 
       <TextField
@@ -270,6 +272,7 @@ const tagLabelById = useMemo(() => {
         fullWidth
         sx={{ mb: 2 }}
         required
+        disabled={viewOnly}
       >
         {types.map((t) => {
           const value = t._id;
@@ -304,6 +307,7 @@ const tagLabelById = useMemo(() => {
         }}
         fullWidth
         sx={{ mb: 2 }}
+        disabled={viewOnly}
       >
         {allTags.map((t) => {
           const value = t._id;
@@ -323,6 +327,7 @@ const tagLabelById = useMemo(() => {
         onChange={handleChange}
         fullWidth
         sx={{ mb: 2 }}
+        disabled={viewOnly}
       />
 
       <TextField
@@ -333,6 +338,7 @@ const tagLabelById = useMemo(() => {
         onChange={handleChange}
         fullWidth
         sx={{ mb: 2 }}
+        disabled={viewOnly}
       />
 
       <TextField
@@ -343,6 +349,7 @@ const tagLabelById = useMemo(() => {
         fullWidth
         sx={{ mb: 2 }}
         required
+        disabled={viewOnly}
       />
 
       <TextField
@@ -353,6 +360,7 @@ const tagLabelById = useMemo(() => {
         select
         fullWidth
         sx={{ mb: 2 }}
+        disabled={viewOnly}
       >
         <MenuItem value="Active">Active</MenuItem>
         <MenuItem value="Inactive">Inactive</MenuItem>
@@ -368,12 +376,14 @@ const tagLabelById = useMemo(() => {
       ) : null}
 
       <Box display="flex" justifyContent="space-between" gap={1} mt={3}>
-        {form._id ? (
+        {form._id && !viewOnly ? (
           <Button color="error" onClick={handleDelete}>Delete</Button>
         ) : <span />}
         <Box sx={{ display: 'flex', gap: 1 }}>
-          <Button onClick={onCancel} className="button-transparent">Cancel</Button>
-          <Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
+          <Button onClick={onCancel} className="button-transparent">{viewOnly ? 'Close' : 'Cancel'}</Button>
+          {!viewOnly && (
+            <Button variant="contained" onClick={handleSubmit} className="button-gold">Save</Button>
+          )}
         </Box>
       </Box>
     </Paper>
diff --git a/src/private/catalogs/categories/Categories.jsx b/src/private/catalogs/categories/Categories.jsx
index be9a904..9da0707 100644
--- a/src/private/catalogs/categories/Categories.jsx
+++ b/src/private/catalogs/categories/Categories.jsx
@@ -6,6 +6,7 @@ import {
 import { DataGrid } from '@mui/x-data-grid';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
 import AddOrEditCategoryForm from './AddOrEditCategoryForm';
 import CategoriesApi from '../../../api/CategoriesApi';
 import { useAuth } from '../../../context/AuthContext';
@@ -22,6 +23,7 @@ export default function Categories() {
   const [editingCategory, setEditingCategory] = useState(null);
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [rowToDelete, setRowToDelete] = useState(null);
+  const [viewOnly, setViewOnly] = useState(false);
   const hasLoaded = useRef(false);
 
   const pageSize = 100; // Número de filas por página
@@ -68,11 +70,13 @@ export default function Categories() {
   };
 
   const handleAddClick = () => {
+    setViewOnly(false);
     setEditingCategory(null);
     setOpen(true);
   };
 
   const handleEditClick = (params) => {
+    setViewOnly(false);
     const r = params?.row;
     if (!r) return;
     setEditingCategory({
@@ -164,6 +168,44 @@ export default function Categories() {
           >
             <EditRoundedIcon fontSize="small" />
           </IconButton>
+          <IconButton
+            size="small"
+            sx={{
+              backgroundColor: '#E3F2FD',
+              color: '#1565C0',
+              '&:hover': { backgroundColor: '#BBDEFB' },
+              borderRadius: 2,
+              p: 1,
+            }}
+            onClick={() => {
+              const r = params?.row;
+              if (!r) return;
+              setEditingCategory({
+                _id: String(r._id || ''),
+                id: String(r.id || ''),
+                tagName: r.tagName || r.name || '',
+                typeId: r.typeId || '',
+                parentTagId: Array.isArray(r.parentTagId) ? r.parentTagId : [],
+                slug: r.slug || '',
+                displayOrder: Number(r.displayOrder ?? 0),
+                icon: r.icon || '',
+                status: r.status ?? 'Active',
+                materialNames: Array.isArray(r.materialNames)
+                  ? r.materialNames
+                  : (typeof r.material === 'string'
+                    ? r.material.split(',').map(s => s.trim()).filter(Boolean)
+                    : []),
+                createdAt: r.createdAt ?? null,
+                createdBy: r.createdBy ?? null,
+                updatedAt: r.updatedAt ?? null,
+                updatedBy: r.updatedBy ?? null,
+              });
+              setViewOnly(true);
+              setOpen(true);
+            }}
+          >
+            <VisibilityRoundedIcon fontSize="small" />
+          </IconButton>
           <IconButton
             size="small"
             sx={{
@@ -319,6 +361,7 @@ export default function Categories() {
             initialMaterialNames={editingCategory?.materialNames || []}
             onAdd={handleFormDone}
             onCancel={() => { setOpen(false); setEditingCategory(null); }}
+            viewOnly={viewOnly}
           />
         </DialogContent>
       </Dialog>