feat: Implementar subida avanzada de expedientes con compresión automática
- ✨ Agregar selección múltiple de carpetas con validación de nomenclatura - ✨ Implementar compresión automática de carpetas usando JSZip - ✨ Permitir selección múltiple de archivos ZIP y RAR - 🎨 Mejorar UI del modal con scroll y gestión de archivos individual - 🔧 Agregar barras de progreso para compresión y subida - 🔧 Corregir endpoint a bulk-create y formato FormData - 🔧 Resolver warnings de React con webkitdirectory - 📦 Instalar JSZip como dependencia Funcionalidades nuevas: - Modal responsivo con altura máxima y scroll interno - Compresión automática de carpetas antes de envío - Interfaz consistente para carpetas, ZIP y RAR - Eliminar archivos/carpetas individualmente - Contador visual de archivos seleccionados - Validación flexible de nomenclatura de expedientes
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useState, useLayoutEffect, useRef } from 'react';
|
||||
import { fetchWithAuth, postWithAuth } from '../fetchWithAuth';
|
||||
import { fetchWithAuth, postWithAuth, postFormDataWithAuth } from '../fetchWithAuth';
|
||||
import JSZip from 'jszip';
|
||||
// Animación fade-in/slide-up para bloques
|
||||
const fadeInSlideUp = `@keyframes fadein-slideup { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }`;
|
||||
if (typeof document !== 'undefined' && !document.getElementById('fadein-slideup-documents')) {
|
||||
@@ -42,6 +43,7 @@ const downloadFile = async (id, filename = 'archivo', setSuccess, setError, show
|
||||
|
||||
export default function Documents() {
|
||||
const focusKeeperRef = useRef(null);
|
||||
const fileInputRef = useRef(null);
|
||||
const [success, setSuccess] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||
@@ -66,6 +68,20 @@ export default function Documents() {
|
||||
// Estado para modal de confirmación de eliminación
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
|
||||
// Estados para subir expedientes
|
||||
const [showUploadModal, setShowUploadModal] = useState(false);
|
||||
const [selectedFiles, setSelectedFiles] = useState([]);
|
||||
const [uploadType, setUploadType] = useState('folders'); // 'folders', 'zip', 'rar'
|
||||
const [uploadingFiles, setUploadingFiles] = useState(false);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState(0);
|
||||
const [isCompressing, setIsCompressing] = useState(false);
|
||||
const [compressionProgress, setCompressionProgress] = useState(0);
|
||||
const [validationErrors, setValidationErrors] = useState([]);
|
||||
const [importadores, setImportadores] = useState([]);
|
||||
const [selectedContributor, setSelectedContributor] = useState('');
|
||||
const [loadingContributors, setLoadingContributors] = useState(false);
|
||||
|
||||
// Estado para controlar la animación de entrada
|
||||
const [showAnimation, setShowAnimation] = useState(false);
|
||||
const [hasAnimated, setHasAnimated] = useState(false);
|
||||
@@ -255,6 +271,243 @@ export default function Documents() {
|
||||
}
|
||||
};
|
||||
|
||||
// Funciones para subir expedientes
|
||||
const fetchImportadores = async () => {
|
||||
if (importadores.length > 0) return; // Ya están cargados
|
||||
|
||||
setLoadingContributors(true);
|
||||
try {
|
||||
const response = await fetchWithAuth(`${API_URL}/customs/importadores/`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
// La API devuelve directamente el array, no un objeto con results
|
||||
setImportadores(Array.isArray(data) ? data : []);
|
||||
} else {
|
||||
throw new Error('Error al cargar importadores');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading importadores:', error);
|
||||
showMessage('Error al cargar la lista de importadores', 'error');
|
||||
} finally {
|
||||
setLoadingContributors(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileSelect = (event) => {
|
||||
const files = Array.from(event.target.files);
|
||||
setSelectedFiles(files);
|
||||
};
|
||||
|
||||
const validateFolderNomenclature = (files) => {
|
||||
// Patrón flexible: [AÑO(2 dígitos opcional)]-[ADUANA(2-3 dígitos)]-[PATENTE(4 dígitos)]-[PEDIMENTO(7 dígitos)]
|
||||
// El año puede estar presente o ausente, si está presente debe ser 2 dígitos
|
||||
// La aduana puede ser 2 o 3 dígitos
|
||||
const pattern = /^(\d{2}-)?(\d{2,3})-(\d{4})-(\d{7})$/;
|
||||
const invalidFolders = [];
|
||||
|
||||
for (const file of files) {
|
||||
const pathParts = file.webkitRelativePath.split('/');
|
||||
if (pathParts.length > 1) {
|
||||
const folderName = pathParts[0];
|
||||
if (!pattern.test(folderName)) {
|
||||
invalidFolders.push(folderName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return invalidFolders;
|
||||
};
|
||||
|
||||
// Función para comprimir carpetas en ZIP
|
||||
const compressFoldersToZip = async (files) => {
|
||||
const zip = new JSZip();
|
||||
const folderGroups = {};
|
||||
|
||||
// Agrupar archivos por carpeta
|
||||
files.forEach(file => {
|
||||
const pathParts = file.webkitRelativePath.split('/');
|
||||
const folderName = pathParts[0];
|
||||
|
||||
if (!folderGroups[folderName]) {
|
||||
folderGroups[folderName] = [];
|
||||
}
|
||||
folderGroups[folderName].push(file);
|
||||
});
|
||||
|
||||
const folderNames = Object.keys(folderGroups);
|
||||
const compressedFiles = [];
|
||||
|
||||
setIsCompressing(true);
|
||||
setCompressionProgress(0);
|
||||
|
||||
try {
|
||||
// Comprimir cada carpeta individualmente
|
||||
for (let i = 0; i < folderNames.length; i++) {
|
||||
const folderName = folderNames[i];
|
||||
const folderFiles = folderGroups[folderName];
|
||||
|
||||
const folderZip = new JSZip();
|
||||
|
||||
// Agregar archivos al ZIP de la carpeta
|
||||
folderFiles.forEach(file => {
|
||||
// Mantener la estructura de subcarpetas dentro de la carpeta principal
|
||||
const relativePath = file.webkitRelativePath.substring(folderName.length + 1);
|
||||
folderZip.file(relativePath, file);
|
||||
});
|
||||
|
||||
// Generar el ZIP de la carpeta
|
||||
const zipBlob = await folderZip.generateAsync(
|
||||
{ type: "blob" },
|
||||
(metadata) => {
|
||||
// Actualizar progreso de compresión
|
||||
const folderProgress = metadata.percent;
|
||||
const totalProgress = ((i * 100) + folderProgress) / folderNames.length;
|
||||
setCompressionProgress(Math.round(totalProgress));
|
||||
}
|
||||
);
|
||||
|
||||
// Crear un archivo File a partir del blob
|
||||
const zipFile = new File([zipBlob], `${folderName}.zip`, { type: 'application/zip' });
|
||||
compressedFiles.push(zipFile);
|
||||
}
|
||||
|
||||
return compressedFiles;
|
||||
} finally {
|
||||
setIsCompressing(false);
|
||||
setCompressionProgress(0);
|
||||
}
|
||||
};
|
||||
|
||||
// Función para manejar la selección de archivos
|
||||
const handleFileSelection = (event) => {
|
||||
const files = Array.from(event.target.files);
|
||||
|
||||
if (uploadType === 'folders') {
|
||||
// Para carpetas, agregar a los archivos existentes (acumular)
|
||||
setSelectedFiles(prevFiles => [...prevFiles, ...files]);
|
||||
setValidationErrors([]);
|
||||
|
||||
// Validar nomenclatura de todas las carpetas después de agregar
|
||||
setTimeout(() => {
|
||||
setSelectedFiles(currentFiles => {
|
||||
const invalidFolders = validateFolderNomenclature(currentFiles);
|
||||
if (invalidFolders.length > 0) {
|
||||
setValidationErrors([
|
||||
`Las siguientes carpetas no siguen la nomenclatura correcta ([AÑO]-ADUANA-PATENTE-PEDIMENTO): ${invalidFolders.join(', ')}`
|
||||
]);
|
||||
}
|
||||
return currentFiles;
|
||||
});
|
||||
}, 100);
|
||||
} else {
|
||||
// Para ZIP/RAR, también permitir acumular múltiples archivos
|
||||
setSelectedFiles(prevFiles => [...prevFiles, ...files]);
|
||||
setValidationErrors([]);
|
||||
}
|
||||
|
||||
// Limpiar el input para permitir seleccionar la misma carpeta nuevamente
|
||||
event.target.value = '';
|
||||
};
|
||||
|
||||
// Función para eliminar una carpeta específica
|
||||
const removeFolderFromSelection = (folderNameToRemove) => {
|
||||
setSelectedFiles(prevFiles =>
|
||||
prevFiles.filter(file => !file.webkitRelativePath.startsWith(folderNameToRemove + '/'))
|
||||
);
|
||||
setValidationErrors([]);
|
||||
};
|
||||
|
||||
// Función para eliminar un archivo específico (ZIP/RAR)
|
||||
const removeFileFromSelection = (fileIndex) => {
|
||||
setSelectedFiles(prevFiles =>
|
||||
prevFiles.filter((_, index) => index !== fileIndex)
|
||||
);
|
||||
setValidationErrors([]);
|
||||
};
|
||||
|
||||
const handleUploadFiles = async () => {
|
||||
if (!selectedContributor) {
|
||||
showMessage('Por favor selecciona un importador', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedFiles.length === 0) {
|
||||
showMessage('Por favor selecciona al menos un archivo', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validar nomenclatura si es tipo carpeta
|
||||
if (uploadType === 'folders') {
|
||||
const invalidFolders = validateFolderNomenclature(selectedFiles);
|
||||
if (invalidFolders.length > 0) {
|
||||
setValidationErrors([
|
||||
`Las siguientes carpetas no siguen la nomenclatura correcta ([AÑO]-ADUANA-PATENTE-PEDIMENTO): ${invalidFolders.join(', ')}`
|
||||
]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setIsUploading(true);
|
||||
setUploadProgress(0);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append('contribuyente', selectedContributor);
|
||||
|
||||
let filesToUpload = selectedFiles;
|
||||
|
||||
// Comprimir carpetas automáticamente
|
||||
if (uploadType === 'folders') {
|
||||
showMessage('Comprimiendo carpetas...', 'info');
|
||||
filesToUpload = await compressFoldersToZip(selectedFiles);
|
||||
formData.append('tipo', 'zip'); // Cambiar tipo a zip después de comprimir
|
||||
} else {
|
||||
formData.append('tipo', uploadType);
|
||||
}
|
||||
|
||||
// Agregar archivos al FormData
|
||||
if (uploadType === 'folders') {
|
||||
// Para carpetas comprimidas, agregar como múltiples archivos ZIP
|
||||
filesToUpload.forEach((file, index) => {
|
||||
formData.append(`archivos`, file);
|
||||
});
|
||||
} else {
|
||||
// Para ZIP/RAR múltiples, agregar cada archivo
|
||||
filesToUpload.forEach((file, index) => {
|
||||
formData.append(`archivos`, file);
|
||||
});
|
||||
}
|
||||
|
||||
const fileCount = uploadType === 'folders' ? filesToUpload.length : selectedFiles.length;
|
||||
showMessage(`Subiendo ${fileCount} archivo(s)...`, 'info');
|
||||
|
||||
const uploadEndpoint = `${API_URL}/customs/pedimentos/bulk-create/`;
|
||||
const result = await postFormDataWithAuth(uploadEndpoint, formData);
|
||||
|
||||
showMessage(
|
||||
`${result.uploaded_count || fileCount} archivo(s) subido(s) exitosamente`,
|
||||
'success'
|
||||
);
|
||||
|
||||
// Limpiar archivos seleccionados y cerrar modal
|
||||
setSelectedFiles([]);
|
||||
setSelectedContributor('');
|
||||
setUploadProgress(0);
|
||||
setCompressionProgress(0);
|
||||
setValidationErrors([]);
|
||||
setShowUploadModal(false);
|
||||
|
||||
// Refrescar la lista
|
||||
refetch();
|
||||
} catch (error) {
|
||||
console.error('Error durante la subida:', error);
|
||||
showMessage(`Error durante la subida: ${error.message}`, 'error');
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Actualizar isSelectAll cuando cambia la selección
|
||||
useEffect(() => {
|
||||
if (currentDocuments.length > 0) {
|
||||
@@ -550,6 +803,18 @@ export default function Documents() {
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowUploadModal(true);
|
||||
fetchImportadores();
|
||||
}}
|
||||
className="inline-flex items-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 transform hover:scale-105 shadow-lg"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
Agregar Expedientes
|
||||
</button>
|
||||
<button
|
||||
onClick={refetch}
|
||||
disabled={loading}
|
||||
@@ -562,7 +827,7 @@ export default function Documents() {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {}}
|
||||
className="inline-flex items-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 transform hover:scale-105 shadow-lg"
|
||||
className="inline-flex items-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-200 transform hover:scale-105 shadow-lg"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
@@ -946,6 +1211,373 @@ export default function Documents() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal de subida de expedientes */}
|
||||
{showUploadModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full mx-4 transform transition-all duration-300 scale-100 max-h-[90vh] flex flex-col">
|
||||
{/* Header del modal */}
|
||||
<div className="px-6 py-4 border-b border-gray-200 flex-shrink-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-blue-100 rounded-full p-3">
|
||||
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">Subir Expedientes</h3>
|
||||
<p className="text-sm text-gray-600">Selecciona archivos, carpetas o ZIP</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowUploadModal(false);
|
||||
setSelectedFiles([]);
|
||||
setUploadProgress(0);
|
||||
setIsUploading(false);
|
||||
setValidationErrors([]);
|
||||
}}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors duration-200"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contenido del modal - con scroll */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4 min-h-0">
|
||||
{/* Selector de tipo de subida */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Tipo de subida
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<button
|
||||
onClick={() => setUploadType('folders')}
|
||||
className={`p-3 rounded-lg border text-sm font-medium transition-all duration-200 ${
|
||||
uploadType === 'folders'
|
||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
||||
: 'border-gray-300 bg-white text-gray-700 hover:border-gray-400'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-5 h-5 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
Carpeta
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setUploadType('zip')}
|
||||
className={`p-3 rounded-lg border text-sm font-medium transition-all duration-200 ${
|
||||
uploadType === 'zip'
|
||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
||||
: 'border-gray-300 bg-white text-gray-700 hover:border-gray-400'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-5 h-5 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 12l2 2 4-4" />
|
||||
</svg>
|
||||
ZIP
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setUploadType('rar')}
|
||||
className={`p-3 rounded-lg border text-sm font-medium transition-all duration-200 ${
|
||||
uploadType === 'rar'
|
||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
||||
: 'border-gray-300 bg-white text-gray-700 hover:border-gray-400'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-5 h-5 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
RAR
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Área de selección de archivos */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{uploadType === 'folders' && 'Seleccionar carpetas'}
|
||||
{uploadType === 'zip' && 'Seleccionar archivos ZIP'}
|
||||
{uploadType === 'rar' && 'Seleccionar archivos RAR'}
|
||||
</label>
|
||||
|
||||
{uploadType === 'folders' ? (
|
||||
<div className="space-y-3">
|
||||
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors duration-200">
|
||||
<svg className="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
<p className="text-sm text-gray-600 mb-3">
|
||||
Selecciona una carpeta. Después puedes hacer clic nuevamente para agregar más carpetas.
|
||||
</p>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileSelection}
|
||||
multiple
|
||||
webkitdirectory="true"
|
||||
className="hidden"
|
||||
/>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Agregar Carpeta
|
||||
{selectedFiles.length > 0 && (
|
||||
<span className="ml-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full">
|
||||
{[...new Set(selectedFiles.map(file => file.webkitRelativePath.split('/')[0]))].length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Lista de carpetas seleccionadas - con altura máxima y scroll */}
|
||||
{selectedFiles.length > 0 && (
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-2">Carpetas seleccionadas:</h4>
|
||||
<div className="max-h-40 overflow-y-auto space-y-2">
|
||||
{[...new Set(selectedFiles.map(file => file.webkitRelativePath.split('/')[0]))].map((folderName, index) => (
|
||||
<div key={index} className="flex items-center justify-between bg-white p-3 rounded border">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium">{folderName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">
|
||||
{selectedFiles.filter(file => file.webkitRelativePath.startsWith(folderName + '/')).length} archivos
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeFolderFromSelection(folderName)}
|
||||
className="text-red-500 hover:text-red-700 p-1"
|
||||
title="Eliminar carpeta"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedFiles([])}
|
||||
className="mt-3 text-sm text-red-600 hover:text-red-800"
|
||||
>
|
||||
Limpiar todas las carpetas
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors duration-200">
|
||||
<svg className="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<p className="text-sm text-gray-600 mb-3">
|
||||
{uploadType === 'zip' && 'Selecciona archivos ZIP. Puedes hacer clic nuevamente para agregar más archivos.'}
|
||||
{uploadType === 'rar' && 'Selecciona archivos RAR. Puedes hacer clic nuevamente para agregar más archivos.'}
|
||||
</p>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileSelection}
|
||||
accept={uploadType === 'zip' ? '.zip' : '.rar'}
|
||||
multiple
|
||||
className="hidden"
|
||||
/>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Agregar {uploadType === 'zip' ? 'ZIP' : 'RAR'}
|
||||
{selectedFiles.length > 0 && (
|
||||
<span className="ml-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full">
|
||||
{selectedFiles.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Lista de archivos seleccionados */}
|
||||
{selectedFiles.length > 0 && (
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-2">Archivos seleccionados:</h4>
|
||||
<div className="max-h-40 overflow-y-auto space-y-2">
|
||||
{selectedFiles.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between bg-white p-3 rounded border">
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium">{file.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">
|
||||
{(file.size / 1024 / 1024).toFixed(2)} MB
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeFileFromSelection(index)}
|
||||
className="text-red-500 hover:text-red-700 p-1"
|
||||
title="Eliminar archivo"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedFiles([])}
|
||||
className="mt-3 text-sm text-red-600 hover:text-red-800"
|
||||
>
|
||||
Limpiar todos los archivos
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Selector de contribuyente */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Contribuyente
|
||||
</label>
|
||||
<select
|
||||
value={selectedContributor}
|
||||
onChange={(e) => setSelectedContributor(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
disabled={loadingContributors}
|
||||
>
|
||||
<option value="">Seleccionar contribuyente</option>
|
||||
{importadores.map((imp) => (
|
||||
<option key={imp.rfc} value={imp.rfc}>
|
||||
{imp.rfc}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{loadingContributors && (
|
||||
<p className="text-sm text-gray-500 mt-1">Cargando contribuyentes...</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Errores de validación */}
|
||||
{validationErrors.length > 0 && (
|
||||
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<svg className="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-red-800">Errores de validación:</span>
|
||||
</div>
|
||||
<ul className="text-sm text-red-700 space-y-1">
|
||||
{validationErrors.map((error, index) => (
|
||||
<li key={index}>• {error}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Información de nomenclatura */}
|
||||
{uploadType === 'folders' && (
|
||||
<div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-blue-800">Nomenclatura de carpetas:</span>
|
||||
</div>
|
||||
<p className="text-sm text-blue-700">
|
||||
Las carpetas deben seguir el formato: <strong>[AÑO]-ADUANA-PATENTE-PEDIMENTO</strong>
|
||||
<br />
|
||||
• AÑO: 2 dígitos (opcional, ej: 24-)
|
||||
<br />
|
||||
• ADUANA: 2 o 3 dígitos (ej: 01, 001)
|
||||
<br />
|
||||
• PATENTE: 4 dígitos (ej: 3206)
|
||||
<br />
|
||||
• PEDIMENTO: 7 dígitos (ej: 1234567)
|
||||
<br />
|
||||
<strong>Ejemplos válidos:</strong> <em>24-01-3206-1234567</em>, <em>001-3206-1234567</em>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Barras de progreso */}
|
||||
{isCompressing && (
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-700">Comprimiendo carpetas...</span>
|
||||
<span className="text-sm text-gray-500">{compressionProgress}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-green-600 h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${compressionProgress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isUploading && (
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-700">Subiendo...</span>
|
||||
<span className="text-sm text-gray-500">{uploadProgress}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${uploadProgress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer del modal - fijo */}
|
||||
<div className="flex-shrink-0 px-6 py-4 border-t border-gray-200 flex gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowUploadModal(false);
|
||||
setSelectedFiles([]);
|
||||
setUploadProgress(0);
|
||||
setCompressionProgress(0);
|
||||
setIsUploading(false);
|
||||
setIsCompressing(false);
|
||||
setValidationErrors([]);
|
||||
}}
|
||||
disabled={isUploading || isCompressing}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
onClick={handleUploadFiles}
|
||||
disabled={isUploading || isCompressing || selectedFiles.length === 0 || !selectedContributor || validationErrors.length > 0}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isCompressing ? 'Comprimiendo...' : isUploading ? 'Subiendo...' : 'Subir expedientes'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal de confirmación para eliminación */}
|
||||
{showDeleteModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
|
||||
@@ -16,7 +16,7 @@ import xml from 'highlight.js/lib/languages/xml';
|
||||
import 'highlight.js/styles/github.css';
|
||||
hljs.registerLanguage('xml', xml);
|
||||
import { fetchPedimentoDocuments } from '../api/pedimentoDocuments';
|
||||
import { fetchWithAuth, postWithAuth, putWithAuth } from '../fetchWithAuth';
|
||||
import { fetchWithAuth, postWithAuth, putWithAuth, postFormDataWithAuth } from '../fetchWithAuth';
|
||||
import { fetchTasks } from '../api/procesos.ts';
|
||||
import { fetchPedimentoCoves, downloadCove, downloadAcuseCove } from '../api/coves';
|
||||
import { fetchPedimentoEdocuments, downloadEdocument, downloadAcuseEdocument } from '../api/edocuments';
|
||||
@@ -131,6 +131,11 @@ export default function PedimentoDetail() {
|
||||
const [selectedDocuments, setSelectedDocuments] = useState([]);
|
||||
const [isSelectAllDocs, setIsSelectAllDocs] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [showUploadModal, setShowUploadModal] = useState(false);
|
||||
|
||||
// Estados para subir documentos
|
||||
const [selectedFiles, setSelectedFiles] = useState([]);
|
||||
const [uploadingDocuments, setUploadingDocuments] = useState(false);
|
||||
|
||||
const [dashboardSummary, setDashboardSummary] = useState(null);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
@@ -673,6 +678,56 @@ export default function PedimentoDetail() {
|
||||
}
|
||||
};
|
||||
|
||||
// Funciones para subir documentos
|
||||
const handleFileSelect = (event) => {
|
||||
const files = Array.from(event.target.files);
|
||||
setSelectedFiles(files);
|
||||
};
|
||||
|
||||
const handleUploadDocuments = async () => {
|
||||
if (selectedFiles.length === 0) {
|
||||
showMessage('Por favor selecciona al menos un archivo', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
setUploadingDocuments(true);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
|
||||
// Agregar el ID del pedimento
|
||||
formData.append('pedimento_id', id);
|
||||
|
||||
// Agregar archivos al FormData
|
||||
selectedFiles.forEach((file) => {
|
||||
formData.append('files', file);
|
||||
});
|
||||
|
||||
showMessage(`Subiendo ${selectedFiles.length} archivo(s)...`, 'info');
|
||||
|
||||
const result = await postFormDataWithAuth(`${API_URL}/record/documents/bulk-upload/`, formData);
|
||||
|
||||
showMessage(
|
||||
`${result.uploaded_count || selectedFiles.length} archivo(s) subido(s) exitosamente`,
|
||||
'success'
|
||||
);
|
||||
|
||||
// Limpiar archivos seleccionados y cerrar modal
|
||||
setSelectedFiles([]);
|
||||
setShowUploadModal(false);
|
||||
|
||||
// Forzar recarga de documentos
|
||||
const currentPage = page;
|
||||
setPage(0);
|
||||
setTimeout(() => setPage(currentPage), 100);
|
||||
} catch (error) {
|
||||
console.error('Error durante la subida:', error);
|
||||
showMessage(`Error durante la subida: ${error.message}`, 'error');
|
||||
} finally {
|
||||
setUploadingDocuments(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Efecto para actualizar isSelectAllDocs cuando cambia la selección
|
||||
useEffect(() => {
|
||||
if (documents.length > 0) {
|
||||
@@ -2133,45 +2188,58 @@ export default function PedimentoDetail() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{documents.length > 0 && (
|
||||
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
||||
<button
|
||||
onClick={downloadAll}
|
||||
disabled={downloadingAll}
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
|
||||
>
|
||||
{downloadingAll ? (
|
||||
<>
|
||||
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span className="hidden sm:inline">Descargando...</span>
|
||||
<span className="sm:hidden">Descargando...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4 mr-1 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
<span className="hidden sm:inline">Descargar Todos</span>
|
||||
<span className="sm:hidden">Descargar</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" />
|
||||
</svg>
|
||||
<span className="hidden sm:inline">{showFilters ? 'Ocultar Filtros' : 'Mostrar Filtros'}</span>
|
||||
<span className="sm:hidden">Filtros</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
||||
<button
|
||||
onClick={() => setShowUploadModal(true)}
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<span className="hidden sm:inline">Subir Documentos</span>
|
||||
<span className="sm:hidden">Subir</span>
|
||||
</button>
|
||||
|
||||
{documents.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={downloadAll}
|
||||
disabled={downloadingAll}
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
|
||||
>
|
||||
{downloadingAll ? (
|
||||
<>
|
||||
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span className="hidden sm:inline">Descargando...</span>
|
||||
<span className="sm:hidden">Descargando...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4 mr-1 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
<span className="hidden sm:inline">Descargar Todos</span>
|
||||
<span className="sm:hidden">Descargar</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" />
|
||||
</svg>
|
||||
<span className="hidden sm:inline">{showFilters ? 'Ocultar Filtros' : 'Mostrar Filtros'}</span>
|
||||
<span className="sm:hidden">Filtros</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filtros expandibles */}
|
||||
@@ -4727,6 +4795,109 @@ export default function PedimentoDetail() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal para subir documentos */}
|
||||
{showUploadModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full mx-4 transform transition-all duration-300 scale-100">
|
||||
{/* Header del modal */}
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-green-100 rounded-full p-3">
|
||||
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
Subir Documentos
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">Selecciona los archivos a subir</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contenido del modal */}
|
||||
<div className="px-6 py-4">
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Seleccionar archivos
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
onChange={handleFileSelect}
|
||||
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
|
||||
{selectedFiles.length > 0 && (
|
||||
<div className="mt-3 p-3 bg-gray-50 rounded-lg">
|
||||
<p className="text-sm font-medium text-gray-700 mb-2">
|
||||
Archivos seleccionados ({selectedFiles.length}):
|
||||
</p>
|
||||
<div className="max-h-32 overflow-y-auto">
|
||||
{selectedFiles.map((file, index) => (
|
||||
<div key={index} className="text-xs text-gray-600 py-1 border-b border-gray-200 last:border-b-0">
|
||||
{file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<svg className="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-800">Información</p>
|
||||
<p className="text-sm text-blue-700 mt-1">
|
||||
Los archivos se subirán al pedimento actual. Se aceptan múltiples formatos de archivo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Botones del modal */}
|
||||
<div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowUploadModal(false);
|
||||
setSelectedFiles([]);
|
||||
}}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
onClick={handleUploadDocuments}
|
||||
disabled={selectedFiles.length === 0 || uploadingDocuments}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{uploadingDocuments ? (
|
||||
<>
|
||||
<svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Subiendo...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
Subir {selectedFiles.length} archivo{selectedFiles.length !== 1 ? 's' : ''}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal de confirmación para eliminación */}
|
||||
{showDeleteModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
|
||||
Reference in New Issue
Block a user