trabajar por logos para checklists

frontend/src/App.jsx

@@ -1458,9 +1458,11 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [showQuestionsModal, setShowQuestionsModal] = useState(false)
   const [showEditPermissionsModal, setShowEditPermissionsModal] = useState(false)
+  const [showLogoModal, setShowLogoModal] = useState(false)
   const [selectedChecklist, setSelectedChecklist] = useState(null)
   const [creating, setCreating] = useState(false)
   const [updating, setUpdating] = useState(false)
+  const [uploadingLogo, setUploadingLogo] = useState(false)
   const [mechanics, setMechanics] = useState([])
   const [searchTerm, setSearchTerm] = useState('')
   const [aiModeFilter, setAiModeFilter] = useState('all') // all, off, optional, required
@@ -1583,6 +1585,78 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection
     }
   }
 
+  const handleUploadLogo = async (e) => {
+    const file = e.target.files[0]
+    if (!file) return
+
+    // Validar que sea imagen
+    if (!file.type.startsWith('image/')) {
+      alert('Por favor selecciona una imagen válida')
+      return
+    }
+
+    setUploadingLogo(true)
+
+    try {
+      const token = localStorage.getItem('token')
+      const API_URL = import.meta.env.VITE_API_URL || ''
+      
+      const formData = new FormData()
+      formData.append('file', file)
+
+      const response = await fetch(`${API_URL}/api/checklists/${selectedChecklist.id}/upload-logo`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        },
+        body: formData
+      })
+
+      if (response.ok) {
+        setShowLogoModal(false)
+        setSelectedChecklist(null)
+        onChecklistCreated() // Reload checklists
+        alert('Logo subido exitosamente')
+      } else {
+        const error = await response.json()
+        alert(error.detail || 'Error al subir el logo')
+      }
+    } catch (error) {
+      console.error('Error:', error)
+      alert('Error al subir el logo')
+    } finally {
+      setUploadingLogo(false)
+    }
+  }
+
+  const handleDeleteLogo = async () => {
+    if (!confirm('¿Estás seguro de eliminar el logo?')) return
+
+    try {
+      const token = localStorage.getItem('token')
+      const API_URL = import.meta.env.VITE_API_URL || ''
+
+      const response = await fetch(`${API_URL}/api/checklists/${selectedChecklist.id}/logo`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      })
+
+      if (response.ok) {
+        setShowLogoModal(false)
+        setSelectedChecklist(null)
+        onChecklistCreated() // Reload checklists
+        alert('Logo eliminado exitosamente')
+      } else {
+        alert('Error al eliminar el logo')
+      }
+    } catch (error) {
+      console.error('Error:', error)
+      alert('Error al eliminar el logo')
+    }
+  }
+
   return (
     <div className="space-y-4">
       {user.role === 'admin' && (
@@ -1669,7 +1743,22 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection
       ) : (
         filteredChecklists.map((checklist) => (
           <div key={checklist.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
-            <div className="flex justify-between items-start">
+            <div className="flex justify-between items-start gap-4">
+              {/* Logo del Checklist */}
+              <div className="flex-shrink-0">
+                {checklist.logo_url ? (
+                  <img 
+                    src={checklist.logo_url} 
+                    alt={`Logo ${checklist.name}`} 
+                    className="w-16 h-16 object-contain rounded-lg border border-gray-200"
+                  />
+                ) : (
+                  <div className="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-lg flex items-center justify-center">
+                    <span className="text-2xl">📋</span>
+                  </div>
+                )}
+              </div>
+              
               <div className="flex-1">
                 <h3 className="text-lg font-semibold text-gray-900">{checklist.name}</h3>
                 <p className="text-sm text-gray-600 mt-1">{checklist.description}</p>
@@ -1701,6 +1790,16 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection
               <div className="flex gap-2">
                 {user.role === 'admin' && (
                   <>
+                    <button 
+                      onClick={() => {
+                        setSelectedChecklist(checklist)
+                        setShowLogoModal(true)
+                      }}
+                      className="px-3 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-lg hover:from-blue-600 hover:to-cyan-600 transition-all transform hover:scale-105 shadow-lg text-sm"
+                      title="Gestionar logo"
+                    >
+                      🖼️ Logo
+                    </button>
                     <button 
                       onClick={() => {
                         setSelectedChecklist(checklist)
@@ -2039,6 +2138,76 @@ function ChecklistsTab({ checklists, user, onChecklistCreated, onStartInspection
           </div>
         </div>
       )}
+
+      {/* Modal Gestionar Logo */}
+      {showLogoModal && selectedChecklist && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-lg max-w-md w-full">
+            <div className="p-6">
+              <h2 className="text-2xl font-bold text-gray-900 mb-2">Gestionar Logo</h2>
+              <p className="text-sm text-gray-600 mb-4">
+                {selectedChecklist.name}
+              </p>
+
+              {/* Logo actual */}
+              <div className="mb-6 flex justify-center">
+                {selectedChecklist.logo_url ? (
+                  <div className="relative">
+                    <img 
+                      src={selectedChecklist.logo_url} 
+                      alt="Logo actual" 
+                      className="w-32 h-32 object-contain rounded-lg border-2 border-gray-200"
+                    />
+                  </div>
+                ) : (
+                  <div className="w-32 h-32 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-lg flex items-center justify-center">
+                    <span className="text-4xl">📋</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Botones de acción */}
+              <div className="space-y-3">
+                <label className="block">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={handleUploadLogo}
+                    className="hidden"
+                    disabled={uploadingLogo}
+                  />
+                  <div className="px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-center cursor-pointer">
+                    {uploadingLogo ? 'Subiendo...' : selectedChecklist.logo_url ? '🔄 Cambiar Logo' : '📤 Subir Logo'}
+                  </div>
+                </label>
+
+                {selectedChecklist.logo_url && (
+                  <button
+                    onClick={handleDeleteLogo}
+                    className="w-full px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
+                  >
+                    🗑️ Eliminar Logo
+                  </button>
+                )}
+
+                <button
+                  onClick={() => {
+                    setShowLogoModal(false)
+                    setSelectedChecklist(null)
+                  }}
+                  className="w-full px-4 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition"
+                >
+                  Cerrar
+                </button>
+              </div>
+
+              <p className="mt-4 text-xs text-gray-500 text-center">
+                💡 Tamaño recomendado: 200x200px o similar. Formatos: JPG, PNG, SVG
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }