v1.0.65 Backend / v1.0.59 Frontend - Fix client_name + Mejoras en carga de fotos
Backend (1.0.65): - Fix: Todas las referencias client_name cambiadas a order_number - Actualizado webhook n8n: "cliente" → "pedido" - Actualizado contexto IA: "Cliente" → "Nº Pedido" - PDF ahora muestra "Nº de Pedido" en lugar de "Cliente" Frontend (1.0.59): - 📸 NUEVO: Vista previa de fotos cargadas (grid 3 columnas con thumbnails) - 📸 NUEVO: Botón "✕" para eliminar fotos individuales - 📸 NUEVO: Botón manual "🤖 Analizar con IA" (no auto-análisis) - 📸 MEJORA: Permite cargar múltiples fotos respetando max_photos - 📸 MEJORA: Input file solo required si no hay fotos cargadas - 📸 MEJORA: Muestra contador "X foto(s) cargada(s)" - 🔧 Fix: Ya no analiza automáticamente al subir (espera click en botón) - 🔧 Fix: Permite re-cargar fotos eliminando las anteriores - 🔧 Fix: Previene exceder max_photos mostrando alerta UX Improvements: - Usuario sube 1-3 fotos y las ve en preview - Puede eliminar individualmente con hover + click en ✕ - Click en "Analizar con IA" procesa todas las fotos juntas - Análisis secuencial con summary multi-imagen Nota: No requiere migración (ya ejecutada en v1.0.64)
This commit is contained in:
@@ -3615,25 +3615,46 @@ function InspectionModal({ checklist, user, onClose, onComplete }) {
|
||||
const question = questions.find(q => q.id === questionId)
|
||||
let filesArray = Array.from(files)
|
||||
|
||||
// Get existing photos
|
||||
const existingPhotos = answers[questionId]?.photos || []
|
||||
|
||||
// Combine existing and new photos
|
||||
const allPhotos = [...existingPhotos, ...filesArray]
|
||||
|
||||
// Validar límite de fotos
|
||||
if (question.max_photos && filesArray.length > question.max_photos) {
|
||||
if (question.max_photos && allPhotos.length > question.max_photos) {
|
||||
alert(`⚠️ Solo puedes subir hasta ${question.max_photos} foto${question.max_photos > 1 ? 's' : ''} para esta pregunta`)
|
||||
filesArray = filesArray.slice(0, question.max_photos)
|
||||
return
|
||||
}
|
||||
|
||||
// Update photos immediately
|
||||
// Update photos immediately (do NOT auto-analyze)
|
||||
setAnswers(prev => ({
|
||||
...prev,
|
||||
[questionId]: {
|
||||
...(prev[questionId] || { value: '', observations: '', photos: [] }),
|
||||
photos: filesArray
|
||||
photos: allPhotos
|
||||
}
|
||||
}))
|
||||
|
||||
// If AI mode is assisted or full, analyze the photos
|
||||
if ((checklist.ai_mode === 'assisted' || checklist.ai_mode === 'full') && filesArray.length > 0) {
|
||||
await analyzePhotosWithAI(questionId, filesArray)
|
||||
}
|
||||
|
||||
const handleRemovePhoto = (questionId, photoIndex) => {
|
||||
setAnswers(prev => ({
|
||||
...prev,
|
||||
[questionId]: {
|
||||
...(prev[questionId] || { value: '', observations: '', photos: [] }),
|
||||
photos: prev[questionId].photos.filter((_, index) => index !== photoIndex)
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
const handleAnalyzePhotos = async (questionId) => {
|
||||
const photos = answers[questionId]?.photos || []
|
||||
if (photos.length === 0) {
|
||||
alert('Primero debes subir al menos una foto')
|
||||
return
|
||||
}
|
||||
|
||||
await analyzePhotosWithAI(questionId, photos)
|
||||
}
|
||||
|
||||
const analyzePhotosWithAI = async (questionId, files) => {
|
||||
@@ -4197,10 +4218,11 @@ function InspectionModal({ checklist, user, onClose, onComplete }) {
|
||||
)}
|
||||
{(checklist.ai_mode === 'assisted' || checklist.ai_mode === 'full') && (
|
||||
<span className="ml-2 text-xs text-blue-600">
|
||||
🤖 Análisis IA activado
|
||||
🤖 Análisis IA disponible
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@@ -4208,26 +4230,78 @@ function InspectionModal({ checklist, user, onClose, onComplete }) {
|
||||
onChange={(e) => handlePhotoChange(currentQuestion.id, e.target.files)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
disabled={aiAnalyzing}
|
||||
required
|
||||
required={!answers[currentQuestion.id]?.photos?.length}
|
||||
/>
|
||||
|
||||
{/* Photo Previews */}
|
||||
{answers[currentQuestion.id]?.photos?.length > 0 && (
|
||||
<div className="mt-3 space-y-2">
|
||||
<div className="text-sm font-medium text-gray-700">
|
||||
{answers[currentQuestion.id].photos.length} foto(s) cargada(s):
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{answers[currentQuestion.id].photos.map((photo, index) => (
|
||||
<div key={index} className="relative group">
|
||||
<img
|
||||
src={URL.createObjectURL(photo)}
|
||||
alt={`Foto ${index + 1}`}
|
||||
className="w-full h-24 object-cover rounded-lg border border-gray-300"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemovePhoto(currentQuestion.id, index)}
|
||||
className="absolute top-1 right-1 bg-red-600 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
title="Eliminar foto"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div className="text-xs text-center text-gray-600 mt-1">
|
||||
Foto {index + 1}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Analyze Button */}
|
||||
{(checklist.ai_mode === 'assisted' || checklist.ai_mode === 'full') && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleAnalyzePhotos(currentQuestion.id)}
|
||||
disabled={aiAnalyzing}
|
||||
className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 transition flex items-center justify-center gap-2"
|
||||
>
|
||||
{aiAnalyzing ? (
|
||||
<>
|
||||
<div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
|
||||
<span>Analizando...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>🤖</span>
|
||||
<span>Analizar con IA</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{aiAnalyzing && (
|
||||
<div className="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex items-center gap-2 text-blue-700">
|
||||
<div className="animate-spin h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full"></div>
|
||||
<span className="text-sm font-medium">Analizando imagen con IA...</span>
|
||||
<span className="text-sm font-medium">Analizando {answers[currentQuestion.id]?.photos?.length || 0} imagen(es) con IA...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{answers[currentQuestion.id]?.photos?.length > 0 && !aiAnalyzing && (
|
||||
<div className="text-sm text-gray-600 mt-1">
|
||||
{answers[currentQuestion.id].photos.length} foto(s) seleccionada(s)
|
||||
{checklist.ai_mode === 'full' && answers[currentQuestion.id]?.value && (
|
||||
<span className="ml-2 text-green-600">✓ Analizada</span>
|
||||
<span className="text-green-600">✓ Analizada</span>
|
||||
)}
|
||||
{checklist.ai_mode === 'assisted' && answers[currentQuestion.id]?.observations.includes('[IA Sugiere') && (
|
||||
<span className="ml-2 text-blue-600">✓ Sugerencia generada</span>
|
||||
<span className="text-blue-600">✓ Sugerencia generada</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user