Merge pull request 'feat: Add checkbox selection and bulk operations' (#1) from feature/checkbox-bulk-operations into main

Reviewed-on: #1

src/pages/Expedientes.jsx

@@ -58,6 +58,14 @@ export default function Documents() {
   const [tipoOperacionFilter, setTipoOperacionFilter] = useState('');
   const [clavePedimentoFilter, setClavePedimentoFilter] = useState('');
   const { showMessage } = useNotification();
+  
+  // Estados para selección múltiple
+  const [selectedDocuments, setSelectedDocuments] = useState([]);
+  const [isSelectAll, setIsSelectAll] = useState(false);
+  
+  // Estado para modal de confirmación de eliminación
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  
   // Estado para controlar la animación de entrada
   const [showAnimation, setShowAnimation] = useState(false);
   const [hasAnimated, setHasAnimated] = useState(false);
@@ -148,6 +156,119 @@ export default function Documents() {
     setCurrentPage(1); // Reset a la primera página
   };
 
+  // Funciones para manejo de selección múltiple
+  const handleSelectDocument = (documentId, isSelected) => {
+    if (isSelected) {
+      setSelectedDocuments(prev => [...prev, documentId]);
+    } else {
+      setSelectedDocuments(prev => prev.filter(id => id !== documentId));
+    }
+  };
+
+  const handleSelectAll = () => {
+    if (isSelectAll) {
+      setSelectedDocuments([]);
+      setIsSelectAll(false);
+    } else {
+      const allDocumentIds = currentDocuments.map(doc => doc.id);
+      setSelectedDocuments(allDocumentIds);
+      setIsSelectAll(true);
+    }
+  };
+
+  // Función para descargar documentos seleccionados
+  const handleDownloadSelected = async () => {
+    if (selectedDocuments.length === 0) {
+      showMessage('No hay documentos seleccionados para descargar', 'warning');
+      return;
+    }
+
+    try {
+      showMessage(`Iniciando descarga de ${selectedDocuments.length} documento(s)...`, 'info');
+      
+      for (const docId of selectedDocuments) {
+        const document = currentDocuments.find(doc => doc.id === docId);
+        if (document) {
+          await downloadFile(docId, `expediente_${document.pedimento_app}`, null, null, showMessage);
+          // Pequeña pausa entre descargas para no sobrecargar
+          await new Promise(resolve => setTimeout(resolve, 500));
+        }
+      }
+      
+      showMessage(`Descarga completada de ${selectedDocuments.length} documento(s)`, 'success');
+      setSelectedDocuments([]);
+      setIsSelectAll(false);
+    } catch (error) {
+      showMessage('Error durante la descarga masiva', 'error');
+    }
+  };
+
+  // Función para eliminar documentos seleccionados
+  const handleDeleteSelected = async () => {
+    if (selectedDocuments.length === 0) {
+      showMessage('No hay documentos seleccionados para eliminar', 'warning');
+      return;
+    }
+
+    // Mostrar modal de confirmación
+    setShowDeleteModal(true);
+  };
+
+  // Función para confirmar la eliminación
+  const confirmDelete = async () => {
+    setShowDeleteModal(false);
+
+    try {
+      showMessage(`Eliminando ${selectedDocuments.length} documento(s)...`, 'info');
+      
+      // Enviar todos los IDs seleccionados a un endpoint específico
+      const response = await fetchWithAuth(`${API_URL}/customs/pedimentos/bulk-delete/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          ids: selectedDocuments
+        })
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        throw new Error(errorData?.detail || errorData?.message || `Error ${response.status}: ${response.statusText}`);
+      }
+      
+      const result = await response.json();
+      
+      showMessage(
+        `${result.deleted_count || selectedDocuments.length} documento(s) eliminado(s) exitosamente`, 
+        'success'
+      );
+      
+      setSelectedDocuments([]);
+      setIsSelectAll(false);
+      
+      // Refrescar la lista
+      refetch();
+    } catch (error) {
+      console.error('Error durante la eliminación masiva:', error);
+      showMessage(`Error durante la eliminación: ${error.message}`, 'error');
+    }
+  };
+
+  // Actualizar isSelectAll cuando cambia la selección
+  useEffect(() => {
+    if (currentDocuments.length > 0) {
+      const allSelected = currentDocuments.every(doc => selectedDocuments.includes(doc.id));
+      setIsSelectAll(allSelected && selectedDocuments.length > 0);
+    }
+  }, [selectedDocuments, currentDocuments]);
+
+  // Limpiar selección cuando cambia de página
+  useEffect(() => {
+    setSelectedDocuments([]);
+    setIsSelectAll(false);
+  }, [currentPage]);
+
 
   // El layout principal y la tabla siempre se renderizan, loader/error/empty solo dentro del área de la tabla
 
@@ -362,6 +483,54 @@ export default function Documents() {
               </div>
             </div>
 
+            {/* Área de acciones para documentos seleccionados */}
+            {selectedDocuments.length > 0 && (
+              <div className="mb-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl overflow-hidden">
+                <div className="px-6 py-4 border-b border-blue-200">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className="bg-blue-100 rounded-full p-2">
+                        <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-gray-900">
+                          {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''} seleccionado{selectedDocuments.length !== 1 ? 's' : ''}
+                        </h3>
+                        <p className="text-sm text-gray-600">Selecciona una acción para continuar</p>
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => {
+                        setSelectedDocuments([]);
+                        setIsSelectAll(false);
+                      }}
+                      className="text-gray-400 hover:text-gray-600 transition-colors"
+                      title="Limpiar selección"
+                    >
+                      <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>
+                <div className="px-6 py-4">
+                  <div className="flex flex-wrap gap-3">
+                    <button
+                      onClick={handleDeleteSelected}
+                      className="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-200 shadow-sm hover:shadow-md"
+                    >
+                      <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                      Eliminar seleccionados
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+
             <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
               <div className="flex items-center gap-3">
                 <span className="inline-flex items-center text-xs text-blue-600 bg-blue-50 px-3 py-2 rounded-full font-medium">
@@ -425,6 +594,14 @@ export default function Documents() {
                 <table className="min-w-full divide-y divide-gray-300" style={{ minWidth: '1200px' }}>
                   <thead className="bg-gray-50">
                     <tr>
+                      <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        <input
+                          type="checkbox"
+                          checked={isSelectAll}
+                          onChange={handleSelectAll}
+                          className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                        />
+                      </th>
                       <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pedimento</th>
                       <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha Pago</th>
                       <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contribuyente</th>
@@ -442,7 +619,7 @@ export default function Documents() {
                   <tbody className="bg-white divide-y divide-gray-200">
                     {loading ? (
                       <tr>
-                        <td colSpan={11} className="px-6 py-12 text-center">
+                        <td colSpan={12} className="px-6 py-12 text-center">
                           <div className="flex flex-col items-center">
                             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
                             <span className="text-gray-500 text-lg font-medium">Cargando expedientes...</span>
@@ -451,7 +628,7 @@ export default function Documents() {
                       </tr>
                     ) : error ? (
                       <tr>
-                        <td colSpan={11} className="px-6 py-12 text-center">
+                        <td colSpan={12} className="px-6 py-12 text-center">
                           <div className="flex flex-col items-center">
                             <div className="bg-red-100 rounded-full p-3 mb-4">
                               <svg className="h-8 w-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -465,6 +642,14 @@ export default function Documents() {
                     ) : currentDocuments.length > 0 ? (
                       currentDocuments.map(ped => (
                         <tr key={ped.id} className="hover:bg-gray-50">
+                          <td className="px-4 py-3 whitespace-nowrap">
+                            <input
+                              type="checkbox"
+                              checked={selectedDocuments.includes(ped.id)}
+                              onChange={(e) => handleSelectDocument(ped.id, e.target.checked)}
+                              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                            />
+                          </td>
                           <td className="px-4 py-3 whitespace-nowrap">
                             <Link 
                               to={`/expedientes/pedimento/${ped.id}`}
@@ -534,7 +719,7 @@ export default function Documents() {
                       ))
                     ) : (
                       <tr>
-                        <td colSpan={11} className="px-6 py-12 text-center">
+                        <td colSpan={12} className="px-6 py-12 text-center">
                           <div className="flex flex-col items-center">
                             <div className="bg-gray-100 rounded-full p-4 mb-4">
                               <svg className="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -571,14 +756,24 @@ export default function Documents() {
               ) : currentDocuments.length > 0 ? (
                 currentDocuments.map(ped => (
                   <div key={ped.id} className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-300 relative">
-                    <div className="flex items-start justify-between mb-4">
+                    {/* Checkbox en la esquina superior derecha */}
+                    <div className="absolute top-4 right-4">
+                      <input
+                        type="checkbox"
+                        checked={selectedDocuments.includes(ped.id)}
+                        onChange={(e) => handleSelectDocument(ped.id, e.target.checked)}
+                        className="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                      />
+                    </div>
+                    
+                    <div className="flex items-start justify-between mb-4 pr-8">{/* Agregamos pr-8 para dar espacio al checkbox */}
                       <div className="flex items-center gap-3">
                         <div className="bg-blue-100 rounded-xl p-2 flex-shrink-0">
                           <svg className="w-5 h-5 text-blue-600" 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>
                         </div>
-                        <div>
+                        <div className="flex-1">
                           <Link 
                             to={`/expedientes/pedimento/${ped.id}`}
                             className="text-lg font-semibold text-blue-600 hover:text-blue-800 transition-colors duration-200"
@@ -586,9 +781,7 @@ export default function Documents() {
                             {ped.pedimento_app}
                           </Link>
                           <p className="text-sm text-gray-500">{ped.fechapago}</p>
-                        </div>
+                          <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold mt-1 ${
-                      </div>
-                      <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold ${
                             ped.existe_expediente 
                               ? 'bg-green-100 text-green-800 border border-green-200' 
                               : 'bg-gray-100 text-gray-600 border border-gray-200'
@@ -596,6 +789,8 @@ export default function Documents() {
                             {ped.existe_expediente ? 'Con expediente' : 'Sin expediente'}
                           </span>
                         </div>
+                      </div>
+                    </div>
                     
                     <div className="space-y-3 mb-4">
                       <div className="flex items-center justify-between">
@@ -750,6 +945,76 @@ export default function Documents() {
             )}
           </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">
+            <div className="bg-white rounded-2xl shadow-2xl max-w-md 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-red-100 rounded-full p-3">
+                    <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-gray-900">
+                      Confirmar eliminación
+                    </h3>
+                    <p className="text-sm text-gray-600">Esta acción no se puede deshacer</p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Contenido del modal */}
+              <div className="px-6 py-4">
+                <div className="mb-4">
+                  <p className="text-gray-700 mb-3">
+                    ¿Estás seguro de que deseas eliminar{' '}
+                    <span className="font-semibold text-red-600">
+                      {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''}
+                    </span>
+                    ?
+                  </p>
+                  
+                  <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                    <div className="flex items-start gap-2">
+                      <svg className="w-5 h-5 text-red-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+                      </svg>
+                      <div>
+                        <p className="text-sm font-medium text-red-800">Advertencia importante</p>
+                        <p className="text-sm text-red-700 mt-1">
+                          Los documentos eliminados no podrán ser recuperados. Asegúrate de que realmente deseas proceder con esta acción.
+                        </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={() => setShowDeleteModal(false)}
+                  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={confirmDelete}
+                  className="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 flex items-center gap-2"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                  Eliminar {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

src/pages/PedimentoDetail.jsx

@@ -124,6 +124,12 @@ export default function PedimentoDetail() {
   const [selected, setSelected] = useState([]);
   const [downloading, setDownloading] = useState(false);
   const [downloadingAll, setDownloadingAll] = useState(false);
+  
+  // Estados para selección múltiple con checkboxes
+  const [selectedDocuments, setSelectedDocuments] = useState([]);
+  const [isSelectAllDocs, setIsSelectAllDocs] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  
   const [dashboardSummary, setDashboardSummary] = useState(null);
   const [showFilters, setShowFilters] = useState(false);
   
@@ -580,6 +586,95 @@ export default function PedimentoDetail() {
     return fuentes[fuente] || 'Desconocida';
   };
 
+  // Funciones para manejo de selección múltiple de documentos
+  const handleSelectDocument = (documentId) => {
+    const isSelected = selectedDocuments.includes(documentId);
+    if (isSelected) {
+      setSelectedDocuments(prev => prev.filter(id => id !== documentId));
+    } else {
+      setSelectedDocuments(prev => [...prev, documentId]);
+    }
+  };
+
+  const handleSelectAllDocuments = () => {
+    if (isSelectAllDocs) {
+      setSelectedDocuments([]);
+      setIsSelectAllDocs(false);
+    } else {
+      const allDocumentIds = documents.map(doc => doc.id);
+      setSelectedDocuments(allDocumentIds);
+      setIsSelectAllDocs(true);
+    }
+  };
+
+  // Función para eliminar documentos seleccionados
+  const handleDeleteSelectedDocuments = async () => {
+    if (selectedDocuments.length === 0) {
+      showMessage('No hay documentos seleccionados para eliminar', 'warning');
+      return;
+    }
+
+    // Mostrar modal de confirmación
+    setShowDeleteModal(true);
+  };
+
+  // Función para confirmar la eliminación
+  const confirmDeleteDocuments = async () => {
+    setShowDeleteModal(false);
+
+    try {
+      showMessage(`Eliminando ${selectedDocuments.length} documento(s)...`, 'info');
+      
+      // Enviar todos los IDs seleccionados a un endpoint específico
+      const response = await fetchWithAuth(`${API_URL}/record/documents/bulk-delete/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          ids: selectedDocuments
+        })
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        throw new Error(errorData?.detail || errorData?.message || `Error ${response.status}: ${response.statusText}`);
+      }
+      
+      const result = await response.json();
+      
+      showMessage(
+        `${result.deleted_count || selectedDocuments.length} documento(s) eliminado(s) exitosamente`, 
+        'success'
+      );
+      
+      setSelectedDocuments([]);
+      setIsSelectAllDocs(false);
+      
+      // Forzar recarga de documentos cambiando la página temporalmente
+      const currentPage = page;
+      setPage(0); // Cambio temporal
+      setTimeout(() => setPage(currentPage), 100); // Restaurar después de un breve delay
+    } catch (error) {
+      console.error('Error durante la eliminación masiva:', error);
+      showMessage(`Error durante la eliminación: ${error.message}`, 'error');
+    }
+  };
+
+  // Efecto para actualizar isSelectAllDocs cuando cambia la selección
+  useEffect(() => {
+    if (documents.length > 0) {
+      const allSelected = documents.every(doc => selectedDocuments.includes(doc.id));
+      setIsSelectAllDocs(allSelected && selectedDocuments.length > 0);
+    }
+  }, [selectedDocuments, documents]);
+
+  // Efecto para limpiar selección cuando cambia de página
+  useEffect(() => {
+    setSelectedDocuments([]);
+    setIsSelectAllDocs(false);
+  }, [page]);
+
   // Efecto para cargar datos del pedimento
   useEffect(() => {
     const fetchPedimento = async () => {
@@ -2093,6 +2188,55 @@ export default function PedimentoDetail() {
                   </div>
                 )}
               </div>
+
+              {/* Área de acciones para documentos seleccionados */}
+              {selectedDocuments.length > 0 && (
+                <div className="mb-4 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl overflow-hidden">
+                  <div className="px-6 py-4 border-b border-blue-200">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <div className="bg-blue-100 rounded-full p-2">
+                          <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                        </div>
+                        <div>
+                          <h3 className="text-lg font-semibold text-gray-900">
+                            {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''} seleccionado{selectedDocuments.length !== 1 ? 's' : ''}
+                          </h3>
+                          <p className="text-sm text-gray-600">Selecciona una acción para continuar</p>
+                        </div>
+                      </div>
+                      <button
+                        onClick={() => {
+                          setSelectedDocuments([]);
+                          setIsSelectAllDocs(false);
+                        }}
+                        className="text-gray-400 hover:text-gray-600 transition-colors"
+                        title="Limpiar selección"
+                      >
+                        <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>
+                  <div className="px-6 py-4">
+                    <div className="flex flex-wrap gap-3">
+                      <button
+                        onClick={handleDeleteSelectedDocuments}
+                        className="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-200 shadow-sm hover:shadow-md"
+                      >
+                        <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                        Eliminar seleccionados
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
               {loading ? (
                 <div className="flex justify-center items-center py-12">
                   <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
@@ -2126,6 +2270,14 @@ export default function PedimentoDetail() {
                       <table className="min-w-full divide-y divide-gray-300">
                       <thead className="bg-gray-50">
                         <tr>
+                          <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            <input
+                              type="checkbox"
+                              checked={isSelectAllDocs}
+                              onChange={handleSelectAllDocuments}
+                              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                            />
+                          </th>
                           <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                             <button
                               onClick={() => handleSort('archivo')}
@@ -2192,6 +2344,14 @@ export default function PedimentoDetail() {
                       <tbody className="bg-white divide-y divide-gray-200">
                         {documents.map((doc, index) => (
                           <tr key={`${doc.id}-${index}`} className="hover:bg-gray-50">
+                            <td className="px-6 py-4 whitespace-nowrap">
+                              <input
+                                type="checkbox"
+                                checked={selectedDocuments.includes(doc.id)}
+                                onChange={() => handleSelectDocument(doc.id)}
+                                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                              />
+                            </td>
                             <td className="px-6 py-4 whitespace-nowrap">
                               <div className="flex items-center">
                                 <div className="flex-shrink-0 h-10 w-10">
@@ -4461,6 +4621,76 @@ export default function PedimentoDetail() {
           </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">
+          <div className="bg-white rounded-2xl shadow-2xl max-w-md 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-red-100 rounded-full p-3">
+                  <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900">
+                    Confirmar eliminación
+                  </h3>
+                  <p className="text-sm text-gray-600">Esta acción no se puede deshacer</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Contenido del modal */}
+            <div className="px-6 py-4">
+              <div className="mb-4">
+                <p className="text-gray-700 mb-3">
+                  ¿Estás seguro de que deseas eliminar{' '}
+                  <span className="font-semibold text-red-600">
+                    {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''}
+                  </span>
+                  ?
+                </p>
+                
+                <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                  <div className="flex items-start gap-2">
+                    <svg className="w-5 h-5 text-red-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+                    </svg>
+                    <div>
+                      <p className="text-sm font-medium text-red-800">Advertencia importante</p>
+                      <p className="text-sm text-red-700 mt-1">
+                        Los documentos eliminados no podrán ser recuperados. Asegúrate de que realmente deseas proceder con esta acción.
+                      </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={() => setShowDeleteModal(false)}
+                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={confirmDeleteDocuments}
+                className="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 flex items-center gap-2"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+                Eliminar {selectedDocuments.length} documento{selectedDocuments.length !== 1 ? 's' : ''}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/pages/Procesos.jsx

@@ -1,5 +1,5 @@
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { fetchProcesamientoPedimentos } from '../api/procesos.ts';
 import { postWithAuth, putWithAuth } from '../fetchWithAuth';
@@ -40,6 +40,15 @@ export default function Procesos() {
   const [selectedProcesos, setSelectedProcesos] = useState([]);
   const [isSelectAll, setIsSelectAll] = useState(false);
 
+  // Ref para rastrear valores previos de filtros y detectar cambios
+  const prevFiltersRef = useRef({
+    pedimentoPedimentoFilter: '',
+    estadoFilter: '',
+    servicioFilter: '',
+    sortField: '',
+    sortOrder: 'asc'
+  });
+
   // Función para mostrar toast
   const showToast = (type, title, message, details = '', persistent = false, progress = null) => {
     const id = Date.now();
@@ -691,6 +700,30 @@ export default function Procesos() {
 
   useEffect(() => {
     async function fetchProcesos() {
+      // Detectar si algún filtro cambió
+      const currentFilters = {
+        pedimentoPedimentoFilter,
+        estadoFilter,
+        servicioFilter,
+        sortField,
+        sortOrder
+      };
+      
+      const filtersChanged = Object.keys(currentFilters).some(
+        key => currentFilters[key] !== prevFiltersRef.current[key]
+      );
+      
+      // Si los filtros cambiaron y no estamos en la página 1, resetear página
+      if (filtersChanged && page !== 1) {
+        setPage(1);
+        // Actualizar ref con valores actuales
+        prevFiltersRef.current = { ...currentFilters };
+        return; // Salir temprano, el efecto se ejecutará de nuevo con page = 1
+      }
+      
+      // Actualizar ref con valores actuales
+      prevFiltersRef.current = { ...currentFilters };
+      
       setLoading(true);
       setError('');
       try {