From 9c55f45c8a0d928ab6c0f17c37502b52fe8ca2e3 Mon Sep 17 00:00:00 2001
From: ronalds <ronalds@rshtech.com.py>
Date: Fri, 21 Nov 2025 17:44:45 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20Miniaturas=20en=20visualizaci=C3=B3n=20?=
 =?UTF-8?q?de=20inspecci=C3=B3n=20-=20frontend=20v1.0.23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Muestra miniaturas de fotos en cada pregunta usando media_files y photos
- Permite abrir imagen en grande al hacer click
- Actualización de docker-compose
---
 docker-compose.hub.yml |  2 +-
 frontend/src/App.jsx   | 26 ++++++++++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/docker-compose.hub.yml b/docker-compose.hub.yml
index 8bd14da..273da2e 100644
--- a/docker-compose.hub.yml
+++ b/docker-compose.hub.yml
@@ -38,7 +38,7 @@ services:
     command: uvicorn app.main:app --host 0.0.0.0 --port 8000 --workers 4
 
   frontend:
-    image: dymai/syntria-frontend:1.0.22
+    image: dymai/syntria-frontend:1.0.23
     container_name: syntria-frontend-prod
     restart: always
     depends_on:
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1b6a202..f3b58d4 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1266,8 +1266,8 @@ function QuestionsManagerModal({ checklist, onClose }) {
                         >
                           <div className="flex-1">
                             <div className="flex items-start gap-3">
-                              <span className="text-xs text-gray-400 mt-1">#{question.id}</span>
-                              <div>
+                              <div className="text-gray-400 text-sm mt-1">#{question.id}</div>
+                              <div className="flex-1">
                                 <div className="flex items-center gap-2">
                                   {isSubQuestion && (
                                     <span className="text-xs bg-blue-200 text-blue-800 px-2 py-1 rounded">
@@ -1777,9 +1777,23 @@ function InspectionDetailModal({ inspection, user, onClose, onUpdate }) {
                                         </div>
                                       )}
 
-                                      {/* Photos */}
-                                      {answer.photos && answer.photos.length > 0 && (
-                                        <div className="flex gap-2 flex-wrap">
+                                      {/* Photos - NUEVO: miniaturas de media_files */}
+                                      {(answer.media_files && answer.media_files.length > 0) && (
+                                        <div className="flex gap-2 flex-wrap mt-2">
+                                          {answer.media_files.map((media, idx) => (
+                                            <img
+                                              key={idx}
+                                              src={media.file_path}
+                                              alt={`Foto ${idx + 1}`}
+                                              className="w-20 h-20 object-cover rounded border border-gray-300 cursor-pointer hover:opacity-75"
+                                              onClick={() => window.open(media.file_path, '_blank')}
+                                            />
+                                          ))}
+                                        </div>
+                                      )}
+                                      {/* Photos - compatibilidad legacy */}
+                                      {(answer.photos && answer.photos.length > 0) && (
+                                        <div className="flex gap-2 flex-wrap mt-2">
                                           {answer.photos.map((photo, idx) => (
                                             <img
                                               key={idx}
@@ -3108,7 +3122,7 @@ function UsersTab({ user }) {
           <div key={u.id} className="bg-white rounded-lg shadow-md p-4">
             <div className="flex justify-between items-start">
               <div className="flex-1">
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-3 mb-2">
                   <div className="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold">
                     {u.username.charAt(0).toUpperCase()}
                   </div>