prod

Reviewed-on: #3

src/api/procesos.ts

@@ -1,31 +1,29 @@
 import { fetchWithAuth } from '../fetchWithAuth';
 
 // Tipos para la respuesta y registros
-export interface ProcesamientoPedimento {
+export interface Task {
-  id: number;
+  task_id: string;
-  created_at: string;
+  timestamp: string;
-  updated_at: string;
+  message: string;
-  organizacion: string;
+  status: string;
-  organizacion_name: string;
-  estado: number;
-  tipo_procesamiento: number;
   pedimento: string;
+  organizacion: string;
   servicio: number;
 }
 
-export interface ProcesamientoPedimentosResponse {
+export interface TasksResponse {
   count: number;
   next: string | null;
   previous: string | null;
-  results: ProcesamientoPedimento[];
+  results: Task[];
 }
 
-// API para customs/procesamientopedimentos/
+// API para tasks/tasks/
-export async function fetchProcesamientoPedimentos(
+export async function fetchTasks(
   page: number = 1,
   pageSize: number = 20,
   filters: Record<string, any> = {}
-): Promise<ProcesamientoPedimentosResponse> {
+): Promise<TasksResponse> {
   try {
     const API_URL = (import.meta as any).env.VITE_EFC_API_URL;
     
@@ -41,15 +39,15 @@ export async function fetchProcesamientoPedimentos(
       }
     });
     
-    const res = await fetchWithAuth(`${API_URL}/customs/procesamientopedimentos/?${params.toString()}`);
+    const res = await fetchWithAuth(`${API_URL}/tasks/tasks/?${params.toString()}`);
     
     if (!res.ok) {
-      throw new Error('Error al obtener procesamiento de pedimentos');
+      throw new Error('Error al obtener tareas');
     }
     
     return await res.json();
   } catch (error) {
-    console.error('Error in fetchProcesamientoPedimentos:', error);
+    console.error('Error in fetchTasks:', error);
     throw error;
   }
 }

src/api/taskStatus.js

@@ -0,0 +1,36 @@
+// Helper functions for task status display
+
+export const getTaskStatusLabel = (status) => {
+  const statuses = {
+    'submitted': 'Enviado',
+    'pending': 'Pendiente',
+    'processing': 'Procesando',
+    'completed': 'Completado',
+    'failed': 'Error',
+    'cancelled': 'Cancelado'
+  };
+  return statuses[status] || `Estado ${status}`;
+};
+
+export const getTaskStatusColor = (status) => {
+  const colors = {
+    'submitted': 'bg-blue-100 text-blue-800',
+    'pending': 'bg-yellow-100 text-yellow-800',
+    'processing': 'bg-indigo-100 text-indigo-800',
+    'completed': 'bg-green-100 text-green-800', 
+    'failed': 'bg-red-100 text-red-800',
+    'cancelled': 'bg-gray-100 text-gray-800'
+  };
+  return colors[status] || 'bg-gray-100 text-gray-800';
+};
+
+// Ayuda a determinar si el estado permite ciertas acciones
+export const isTaskActionable = (status) => {
+  const nonActionableStatuses = ['processing', 'completed', 'cancelled'];
+  return !nonActionableStatuses.includes(status);
+};
+
+export const isTaskFinal = (status) => {
+  const finalStatuses = ['completed', 'failed', 'cancelled'];
+  return finalStatuses.includes(status);
+};

src/pages/Admin.jsx

@@ -312,72 +312,6 @@ export default function Admin() {
             </div>
           </div>
         </div>
-        {/* Análisis de actividad de usuario */}
-        {!(typeof window !== 'undefined' && localStorage.getItem('user_is_importador') === 'true') && !isGroup35 && (
-          <div className="bg-white rounded-3xl shadow-2xl border border-gray-100 p-4 sm:p-6 mb-6 sm:mb-8 animate-fadein-slideup opacity-0 relative overflow-hidden"
-            style={{
-              animation: 'fadein-slideup 0.7s cubic-bezier(0.22,1,0.36,1) 0.65s forwards',
-            }}
-          >
-            <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/3 to-purple-500/3"></div>
-            <div className="relative z-10">
-              <div className="flex items-center gap-3 mb-4 sm:mb-6">
-                <div className="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full p-3 shadow-lg">
-                  <svg className="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                  </svg>
-                </div>
-                <h3 className="text-xl sm:text-2xl font-bold text-gray-900">Actividad de Usuarios</h3>
-              </div>
-              {loading ? (
-                <div className="flex items-center justify-center py-8">
-                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
-                  <span className="ml-3 text-gray-500">Cargando...</span>
-                </div>
-              ) : error ? (
-                <div className="text-red-600 bg-red-50 p-4 rounded-xl border border-red-200">{error}</div>
-              ) : userActivity ? (
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
-                  <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-4 sm:p-6 border border-blue-100">
-                    <h4 className="font-bold text-gray-800 mb-4 flex items-center gap-2">
-                      <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
-                      Resumen de acciones
-                    </h4>
-                    <div className="space-y-3">
-                      {Object.entries(userActivity.actions_count).map(([action, count]) => (
-                        <div key={action} className="flex justify-between items-center bg-white rounded-xl p-3 shadow-sm border border-blue-100">
-                          <span className="capitalize text-gray-700 font-medium">{action}</span>
-                          <span className="font-mono text-blue-700 bg-blue-100 px-2 py-1 rounded-lg text-sm font-bold">{count}</span>
-                        </div>
-                      ))}
-                      <div className="flex justify-between items-center bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl p-3 shadow-lg font-semibold">
-                        <span>Total actividades</span>
-                        <span className="font-mono bg-white/20 px-2 py-1 rounded-lg">{userActivity.actividades_filtradas}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-4 sm:p-6 border border-green-100">
-                    <h4 className="font-bold text-gray-800 mb-4 flex items-center gap-2">
-                      <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                      Top usuarios
-                    </h4>
-                    <div className="space-y-3">
-                      {userActivity.top_users.map((user, idx) => (
-                        <div key={user.username} className="flex justify-between items-center bg-white rounded-xl p-3 shadow-sm border border-green-100">
-                          <div className="flex items-center gap-3">
-                            <span className="bg-green-100 text-green-800 rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold">{idx + 1}</span>
-                            <span className="text-gray-700 font-medium">{user.username}</span>
-                          </div>
-                          <span className="font-mono text-green-700 bg-green-100 px-2 py-1 rounded-lg text-sm font-bold">{user.activity_count}</span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          </div>
-        )}
 
         {/* Tabla de últimos documentos */}
         <div className="bg-white rounded-3xl shadow-2xl border border-gray-100 p-4 sm:p-6 mb-6 sm:mb-8 animate-fadein-slideup opacity-0 relative overflow-hidden"

src/pages/Auditor.jsx

@@ -1,4 +1,6 @@
+
 import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import { getWithAuth, postWithAuth } from '../fetchWithAuth';
 const API_URL = import.meta.env.VITE_EFC_API_URL;
 
@@ -15,6 +17,85 @@ function Auditor() {
   const [auditandoRemesas, setAuditandoRemesas] = useState(false);
   const [procesandoPedimento, setProcesandoPedimento] = useState(null);
   const [procesandoRemesa, setProcesandoRemesa] = useState(null);
+  const [procesandoAcuse, setProcesandoAcuse] = useState(null);
+  const [procesandoCove, setProcesandoCove] = useState(null);
+  const [auditandoAcusesCove, setAuditandoAcusesCove] = useState(false);
+  const [pedimentoFilter, setPedimentoFilter] = useState('');
+  const [auditandoEDocuments, setAuditandoEDocuments] = useState(false);
+  const [auditandoAcuses, setAuditandoAcuses] = useState(false);
+
+  // Handler para auditar acuses (general)
+  const handleAuditarAcuses = async () => {
+    if (auditandoAcuses) return;
+    try {
+      setAuditandoAcuses(true);
+      const organizacionId = pedimentos[0]?.organizacion;
+      if (!organizacionId) {
+        throw new Error('No hay organización disponible para auditar');
+      }
+      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse/`, {
+        organizacion_id: organizacionId
+      });
+      if (!response.ok) {
+        throw new Error('Error al iniciar la auditoría de acuses');
+      }
+      alert('La auditoría de acuses se ha iniciado correctamente');
+    } catch (error) {
+      console.error('Error:', error);
+      alert(error.message);
+    } finally {
+      setAuditandoAcuses(false);
+    }
+  };
+
+  // Handler para auditar EDocuments (general)
+  const handleAuditarEDocuments = async () => {
+    if (auditandoEDocuments) return;
+    try {
+      setAuditandoEDocuments(true);
+      const organizacionId = pedimentos[0]?.organizacion;
+      if (!organizacionId) {
+        throw new Error('No hay organización disponible para auditar');
+      }
+      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-edocuments/`, {
+        organizacion_id: organizacionId
+      });
+      if (!response.ok) {
+        throw new Error('Error al iniciar la auditoría de EDocuments');
+      }
+      alert('La auditoría de EDocuments se ha iniciado correctamente');
+    } catch (error) {
+      console.error('Error:', error);
+      alert(error.message);
+    } finally {
+      setAuditandoEDocuments(false);
+    }
+  };
+
+  // Handler para auditar acuses cove (general)
+  const handleAuditarAcusesCove = async () => {
+    if (auditandoAcusesCove) return;
+    try {
+      setAuditandoAcusesCove(true);
+      // Obtener el organizacion_id del primer pedimento
+      const organizacionId = pedimentos[0]?.organizacion;
+      if (!organizacionId) {
+        throw new Error('No hay organización disponible para auditar');
+      }
+      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse-cove/`, {
+        organizacion_id: organizacionId
+      });
+      if (!response.ok) {
+        throw new Error('Error al iniciar la auditoría de acuses cove');
+      }
+      alert('La auditoría de acuses cove se ha iniciado correctamente');
+    } catch (error) {
+      console.error('Error:', error);
+      alert(error.message);
+    } finally {
+      setAuditandoAcusesCove(false);
+    }
+  };
 
   const handleAuditarRemesaPedimento = async (pedimentoId) => {
     if (procesandoRemesa) return;
@@ -159,11 +240,54 @@ function Auditor() {
     }
   };
 
+  const handleAuditarAcusePedimento = async (pedimentoId) => {
+    if (procesandoAcuse) return;
+    try {
+      setProcesandoAcuse(pedimentoId);
+      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-acuse/pedimento/`, {
+        pedimento_id: pedimentoId
+      });
+      if (!response.ok) {
+        throw new Error('Error al auditar acuse del pedimento');
+      }
+      alert('El acuse del pedimento se está auditando');
+    } catch (error) {
+      console.error('Error:', error);
+      alert(error.message);
+    } finally {
+      setProcesandoAcuse(null);
+    }
+  };
+
+  const handleAuditarCovePedimento = async (pedimentoId) => {
+    if (procesandoCove) return;
+    try {
+      setProcesandoCove(pedimentoId);
+      const response = await postWithAuth(`${API_URL}/customs/auditor/auditar-cove/pedimento/`, {
+        pedimento_id: pedimentoId
+      });
+      if (!response.ok) {
+        throw new Error('Error al auditar COVE del pedimento');
+      }
+      alert('El COVE del pedimento se está auditando');
+    } catch (error) {
+      console.error('Error:', error);
+      alert(error.message);
+    } finally {
+      setProcesandoCove(null);
+    }
+  };
+
   useEffect(() => {
     const fetchPedimentos = async () => {
       setLoading(true);
       try {
-        const response = await getWithAuth(`${API_URL}/customs/pedimentos/?page=${page}&page_size=${itemsPerPage}`);
+        const queryParams = new URLSearchParams({
+          page: page.toString(),
+          page_size: itemsPerPage.toString(),
+          ...(pedimentoFilter && { pedimento_app: pedimentoFilter })
+        });
+        const response = await getWithAuth(`${API_URL}/customs/pedimentos/?${queryParams}`);
         if (!response.ok) throw new Error('Error al cargar los pedimentos');
         const data = await response.json();
         setPedimentos(data.results);
@@ -174,8 +298,14 @@ function Auditor() {
         setLoading(false);
       }
     };
+
+    // Aplicar debounce al fetchPedimentos
+    const timeoutId = setTimeout(() => {
       fetchPedimentos();
-  }, [page, itemsPerPage]);
+    }, 300);
+
+    return () => clearTimeout(timeoutId);
+  }, [page, itemsPerPage, pedimentoFilter]);
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-4 sm:p-6 lg:p-8">
@@ -247,6 +377,7 @@ function Auditor() {
           ) : (
             <div className="space-y-6">
               <div className="bg-white rounded-2xl p-4 sm:p-6 border border-gray-200 shadow-sm">
+
                 <div className="flex justify-between items-center mb-6">
                   <h3 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
                     <svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -254,8 +385,91 @@ function Auditor() {
                     </svg>
                     Servicios de Auditoría
                   </h3>
-                  
                   <div className="flex gap-4">
+                    <button
+                      onClick={handleAuditarAcusesCove}
+                      disabled={auditandoAcusesCove || pedimentos.length === 0}
+                      className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200 
+                        ${auditandoAcusesCove
+                          ? 'bg-gray-400 cursor-not-allowed'
+                          : 'bg-pink-600 hover:bg-pink-700 hover:shadow-md transform hover:scale-105'
+                        }
+                      `}
+                    >
+                      {auditandoAcusesCove ? (
+                        <>
+                          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" 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>
+                          Auditando Acuses Cove...
+                        </>
+                      ) : (
+                        <>
+                          <svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
+                          Auditar Acuses Cove
+                        </>
+                      )}
+                    </button>
+
+                    <button
+                      onClick={handleAuditarEDocuments}
+                      disabled={auditandoEDocuments || pedimentos.length === 0}
+                      className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200 
+                        ${auditandoEDocuments
+                          ? 'bg-gray-400 cursor-not-allowed'
+                          : 'bg-yellow-600 hover:bg-yellow-700 hover:shadow-md transform hover:scale-105'
+                        }
+                      `}
+                    >
+                      {auditandoEDocuments ? (
+                        <>
+                          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" 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>
+                          Auditando EDocuments...
+                        </>
+                      ) : (
+                        <>
+                          <svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
+                          Auditar EDocuments
+                        </>
+                      )}
+                    </button>
+
+                    <button
+                      onClick={handleAuditarAcuses}
+                      disabled={auditandoAcuses || pedimentos.length === 0}
+                      className={`inline-flex items-center px-4 py-2 rounded-lg shadow-sm text-white transition-all duration-200 
+                        ${auditandoAcuses
+                          ? 'bg-gray-400 cursor-not-allowed'
+                          : 'bg-blue-600 hover:bg-blue-700 hover:shadow-md transform hover:scale-105'
+                        }
+                      `}
+                    >
+                      {auditandoAcuses ? (
+                        <>
+                          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" 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>
+                          Auditando Acuses...
+                        </>
+                      ) : (
+                        <>
+                          <svg className="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
+                          Auditar Acuses
+                        </>
+                      )}
+                    </button>
+
                     <button
                       onClick={handleAuditarTodos}
                       disabled={auditando || auditandoPartidas || pedimentos.length === 0}
@@ -342,6 +556,39 @@ function Auditor() {
                   </div>
                 </div>
 
+                {/* Sección de Filtros */}
+                <div className="mt-6 bg-white rounded-lg border border-gray-200 p-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                    {/* Contenedor para los filtros - esperando instrucciones */}
+                    <div className="col-span-full">
+                      <h3 className="text-lg font-medium text-gray-900 mb-4">
+                        Filtros de Búsqueda
+                      </h3>
+                    </div>
+                    <div className="col-span-1">
+                      <label htmlFor="pedimento" className="block text-sm font-medium text-gray-700 mb-2">
+                        Número de Pedimento
+                      </label>
+                      <div className="relative rounded-md shadow-sm">
+                        <input
+                          type="text"
+                          name="pedimento"
+                          id="pedimento"
+                          value={pedimentoFilter}
+                          onChange={(e) => setPedimentoFilter(e.target.value)}
+                          className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md"
+                          placeholder="Buscar por pedimento..."
+                        />
+                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                          <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
                 {/* Tabla de pedimentos */}
                 <div className="overflow-x-auto">
                   <table className="min-w-full divide-y divide-gray-300">
@@ -384,13 +631,13 @@ function Auditor() {
                       {pedimentos.map((pedimento) => (
                         <tr key={pedimento.id} className="hover:bg-gray-50">
                           <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900">
-                            {pedimento.pedimento_app}
+                            <Link to={`/expedientes/pedimento/${pedimento.id}`} className='hover:text-blue-500 hover:text-bold hover:text-underline'>{pedimento.pedimento_app}</Link>
                           </td>
                           {/* PC - Pedimento Completo */}
                           <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
                             <button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
                               <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M8 5v14l11-7z"/>
+                                <path d="M8 5v14l11-7z" />
                               </svg>
                             </button>
                           </td>
@@ -413,7 +660,7 @@ function Auditor() {
                                 </svg>
                               ) : (
                                 <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
-                                  <path d="M8 5v14l11-7z"/>
+                                  <path d="M8 5v14l11-7z" />
                                 </svg>
                               )}
                             </button>
@@ -437,32 +684,60 @@ function Auditor() {
                                 </svg>
                               ) : (
                                 <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
-                                  <path d="M8 5v14l11-7z"/>
+                                  <path d="M8 5v14l11-7z" />
                                 </svg>
                               )}
                             </button>
                           </td>
                           {/* AC - Acuse */}
                           <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
-                            <button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
+                            <button
-                              <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
+                              onClick={() => handleAuditarAcusePedimento(pedimento.id)}
-                                <path d="M8 5v14l11-7z"/>
+                              disabled={procesandoAcuse === pedimento.id}
+                              className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 ${procesandoAcuse === pedimento.id
+                                ? 'opacity-50 cursor-not-allowed'
+                                : 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
+                                }`}
+                            >
+                              {procesandoAcuse === pedimento.id ? (
+                                <svg className="h-4 w-4 text-gray-600 animate-spin" 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>
+                              ) : (
+                                <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
+                                  <path d="M8 5v14l11-7z" />
+                                </svg>
+                              )}
                             </button>
                           </td>
                           {/* COVE */}
                           <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
-                            <button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
+                            <button
-                              <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
+                              onClick={() => handleAuditarCovePedimento(pedimento.id)}
-                                <path d="M8 5v14l11-7z"/>
+                              disabled={procesandoCove === pedimento.id}
+                              className={`inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 ${procesandoCove === pedimento.id
+                                ? 'opacity-50 cursor-not-allowed'
+                                : 'shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110'
+                                }`}
+                            >
+                              {procesandoCove === pedimento.id ? (
+                                <svg className="h-4 w-4 text-gray-600 animate-spin" 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>
+                              ) : (
+                                <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
+                                  <path d="M8 5v14l11-7z" />
+                                </svg>
+                              )}
                             </button>
                           </td>
                           {/* AC_COVE */}
                           <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
                             <button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
                               <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M8 5v14l11-7z"/>
+                                <path d="M8 5v14l11-7z" />
                               </svg>
                             </button>
                           </td>
@@ -470,7 +745,7 @@ function Auditor() {
                           <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 text-center">
                             <button className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 hover:scale-110">
                               <svg className="h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M8 5v14l11-7z"/>
+                                <path d="M8 5v14l11-7z" />
                               </svg>
                             </button>
                           </td>

src/pages/Documents.jsx

@@ -13,68 +13,11 @@ import { fetchPedimentoDocuments } from '../api/documentos.ts';
 import { useNotification } from '../context/NotificationContext';
 // import { usePolling } from '../hooks/usePolling';
 import { Link } from 'react-router-dom';
+import { downloadFile, downloadBulkZip } from '../utils/downloadUtils';
 
 const API_URL = import.meta.env.VITE_EFC_API_URL;
 
-// Descarga individual
-const downloadFile = async (id, filename = 'archivo', setSuccess, setError, showMessage) => {
-  try {
-    const res = await fetchWithAuth(`${API_URL}/record/documents/descargar/${id}/`);
 
-    if (!res.ok) {
-      alert('No autorizado o error en la descarga');
-      return;
-    }
-    
-    const blob = await res.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    window.URL.revokeObjectURL(url);
-    if (setSuccess) setSuccess('Descarga exitosa');
-  } catch (error) {
-    console.error('Error downloading file:', error);
-    showMessage('Error al descargar el archivo', 'error');
-  }
-};
-
-// Descarga masiva (bulk)
-const downloadBulkZip = async (ids, showMessage, setSuccess, nombreZip = 'documentos') => {
-  if (!ids.length) {
-    showMessage('Selecciona al menos un documento.', 'error');
-    return;
-  }
-  
-  try {
-    const res = await postWithAuth(`${API_URL}/record/documents/bulk-download/`, {
-      document_ids: ids, 
-      pedimento_nombre: nombreZip
-    });
-    
-    if (!res.ok) {
-      showMessage('No autorizado o error en la descarga masiva', 'error');
-      return;
-    }
-    
-    const blob = await res.blob();
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${nombreZip || 'documentos'}.zip`;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    window.URL.revokeObjectURL(url);
-    if (setSuccess) setSuccess('Descarga(s) completada(s)');
-  } catch (error) {
-    console.error('Error in bulk download:', error);
-    showMessage('Error en la descarga masiva', 'error');
-  }
-};
 
 export default function Documents() {
   const focusKeeperRef = useRef(null);

src/pages/PedimentoDetail.jsx

@@ -17,11 +17,13 @@ import 'highlight.js/styles/github.css';
 hljs.registerLanguage('xml', xml);
 import { fetchPedimentoDocuments } from '../api/pedimentoDocuments';
 import { fetchWithAuth, postWithAuth, putWithAuth } from '../fetchWithAuth';
-import { fetchProcesamientoPedimentos } from '../api/procesos.ts';
+import { fetchTasks } from '../api/procesos.ts';
 import { fetchPedimentoCoves, downloadCove, downloadAcuseCove } from '../api/coves';
 import { fetchPedimentoEdocuments, downloadEdocument, downloadAcuseEdocument } from '../api/edocuments';
+import { getTaskStatusLabel, getTaskStatusColor, isTaskActionable, isTaskFinal } from '../api/taskStatus';
 import { useParams, Link } from 'react-router-dom';
 import { useNotification } from '../context/NotificationContext';
+import { downloadFile, downloadBulkZip } from '../utils/downloadUtils';
 
 const API_URL = import.meta.env.VITE_EFC_API_URL;
 const MICROSERVICE_URL = import.meta.env.VITE_EFC_MICROSERVICE_URL;
@@ -101,7 +103,7 @@ function formatXml(xml) {
   return formatted.trim();
 }
 
-// Funci\u00f3n auxiliar para descargas individuales\nconst downloadFile = async (id, filename = 'archivo', showMessage) => {\n  try {\n    const res = await fetchWithAuth(`${API_URL}/record/documents/descargar/${id}/`);\n    \n    if (!res.ok) {\n      showMessage('Error en la descarga del archivo', 'error');\n      return;\n    }\n    \n    const blob = await res.blob();\n    const url = window.URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = filename;\n    document.body.appendChild(a);\n    a.click();\n    a.remove();\n    window.URL.revokeObjectURL(url);\n  } catch (error) {\n    console.error('Error downloading file:', error);\n    if (error.message === 'SESSION_EXPIRED') {\n      showMessage('Tu sesi\u00f3n ha expirado, por favor inicia sesi\u00f3n de nuevo.', 'error');\n    } else {\n      showMessage('Error al descargar el archivo', 'error');\n    }\n  }\n};\n\n// Funci\u00f3n auxiliar para descargas\nconst downloadBulkZip = async (ids, showMessage, pedimentoName) => {\n  try {\n    const response = await fetchWithAuth(`${API_URL}/record/documents/bulk-download/`, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ document_ids: ids })\n    });\n    \n    if (!response.ok) throw new Error('Error en la descarga');\n    \n    const blob = await response.blob();\n    const url = window.URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = `documentos_${pedimentoName || 'pedimento'}.zip`;\n    document.body.appendChild(a);\n    a.click();\n    window.URL.revokeObjectURL(url);\n    document.body.removeChild(a);\n    \n    showMessage('Descarga iniciada exitosamente', 'success');\n  } catch (error) {\n    showMessage('Error en la descarga: ' + error.message, 'error');\n  }\n};
+
 
 export default function PedimentoDetail() {
   // Estados principales
@@ -370,12 +372,22 @@ export default function PedimentoDetail() {
   const [procesosPage, setProcesosPage] = useState(1);
   const [procesosPageSize, setProcesosPageSize] = useState(10);
   const [procesosFilters, setProcesosFilters] = useState({});
+  const [sortField, setSortField] = useState('');
+  const [sortOrder, setSortOrder] = useState('asc');
+  const [selectedProcesos, setSelectedProcesos] = useState([]);
+  const [isSelectAll, setIsSelectAll] = useState(false);
   
   // Estados para las acciones de procesos
   const [executingId, setExecutingId] = useState(null);
   const [changingStateId, setChangingStateId] = useState(null);
   const [creatingService, setCreatingService] = useState(null);
 
+  // Ref para rastrear valores previos de filtros
+  const prevFiltersRef = useRef({
+    sortField: '',
+    sortOrder: 'asc'
+  });
+  
   // Estados para modal de preview
   const [previewOpen, setPreviewOpen] = useState(false);
   const [previewUrl, setPreviewUrl] = useState('');
@@ -448,7 +460,7 @@ export default function PedimentoDetail() {
     setSelected(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
   };
 
-  const handleSelectAll = () => {
+  const handleSelectAllDocs = () => {
     if (allSelected) setSelected([]);
     else setSelected(allDocIds);
   };
@@ -824,10 +836,22 @@ export default function PedimentoDetail() {
   }, [edocsFilters]);
 
   // Funciones para acciones de Procesos
+  // Map legacy estado values to new status values
+  const mapEstadoToStatus = (estado) => {
+    const mapping = {
+      1: 'pending',    // Pendiente
+      2: 'processing', // En Proceso
+      3: 'completed',  // Completado
+      4: 'failed',     // Error
+      5: 'cancelled'   // Cancelado
+    };
+    return mapping[estado] || 'pending';
+  };
+
   const updateProcesoEstado = (procId, nuevoEstado) => {
     setProcesos(procesos =>
       procesos.map(proc =>
-        proc.id === procId ? { ...proc, estado: nuevoEstado } : proc
+        proc.id === procId ? { ...proc, status: mapEstadoToStatus(nuevoEstado) } : proc
       )
     );
   };
@@ -850,7 +874,7 @@ export default function PedimentoDetail() {
         organizacion: pedimentoData?.organizacion || 1 // Usar la organización del pedimento o default
       };
       
-      const res = await postWithAuth(`${API_URL}/customs/procesamientopedimentos/`, body);
+      const res = await postWithAuth(`${API_URL}/tasks/tasks/`, body);
       
       if (!res.ok) {
         throw new Error(`Error al crear el servicio: ${nombreServicio}`);
@@ -871,7 +895,7 @@ export default function PedimentoDetail() {
           ...procesosFilters,
           pedimento: id
         };
-        fetchProcesamientoPedimentos(procesosPage, procesosPageSize, filters)
+        fetchTasks(procesosPage, procesosPageSize, filters)
           .then((data) => {
             setProcesos(data.results);
             setProcesosCount(data.count);
@@ -893,33 +917,33 @@ export default function PedimentoDetail() {
     setChangingStateId(proc.id);
     
     // Cambiar estado visual a "Procesando" inmediatamente
-    updateProcesoEstado(proc.id, 2); // 2 = Procesando
+    updateProcesoEstado(proc.id, 'processing');
     
     try {
       const body = {
-        estado: 1, // Cambiar a En Espera
+        status: 'pending', // Cambiar a Pendiente
         tipo_procesamiento: 2,
         pedimento: typeof proc.pedimento === 'object' && proc.pedimento !== null ? proc.pedimento.id : proc.pedimento,
         servicio: proc.servicio,
         organizacion: proc.organizacion_id || proc.organizacion || proc.organizacionId
       };
       
-      const res = await putWithAuth(`${API_URL}/customs/procesamientopedimentos/${proc.id}/`, body);
+      const res = await putWithAuth(`${API_URL}/tasks/tasks/${proc.task_id}/`, body);
       
       if (!res.ok) {
-        // Si falla, revertir a estado Error
+        // Si falla, cambiar a estado Error
-        updateProcesoEstado(proc.id, 4); // 4 = Error
+        updateProcesoEstado(proc.id, 'failed'); // Failed
         throw new Error('Error al cambiar el estado del proceso');
       }
       
       // Cambiar estado visual a "En Espera" si fue exitoso
-      updateProcesoEstado(proc.id, 1); // 1 = En Espera
+      updateProcesoEstado(proc.id, 'pending');
       
       showMessage('Estado cambiado a "En Espera" correctamente', 'success');
       
     } catch (err) {
       console.error('Error cambiando estado:', err);
-      updateProcesoEstado(proc.id, 4); // 4 = Error
+      updateProcesoEstado(proc.id, 'failed');
       showMessage('Error al cambiar el estado del proceso: ' + err.message, 'error');
     } finally {
       setChangingStateId(null);
@@ -930,7 +954,7 @@ export default function PedimentoDetail() {
     setExecutingId(proc.id);
     
     // Cambiar estado visual a "Procesando" inmediatamente
-    updateProcesoEstado(proc.id, 2); // 2 = Procesando
+    updateProcesoEstado(proc.id, 'processing');
     
     let endpoint = '';
     // Determinar endpoint según el tipo de servicio
@@ -958,7 +982,7 @@ export default function PedimentoDetail() {
         break;
       default:
         // Revertir estado si el servicio no es soportado
-        updateProcesoEstado(proc.id, proc.estado); // Revertir al estado original
+        updateProcesoEstado(proc.id, proc.status); // Revertir al estado original
         showMessage('Este servicio no es compatible para ejecución directa.', 'error');
         setExecutingId(null);
         return;
@@ -974,17 +998,17 @@ export default function PedimentoDetail() {
       
       if (!res.ok) {
         // Si falla, cambiar estado a Error
-        updateProcesoEstado(proc.id, 4); // 4 = Error
+        updateProcesoEstado(proc.id, 'failed');
         throw new Error('Error al ejecutar el servicio');
       }
       
       // Si es exitoso, cambiar estado a Finalizado
-      updateProcesoEstado(proc.id, 3); // 3 = Finalizado
+      updateProcesoEstado(proc.id, 'completed');
       
       showMessage('El servicio se ha ejecutado correctamente', 'success');
     } catch (err) {
       // Cambiar estado a Error en caso de excepción
-      updateProcesoEstado(proc.id, 4); // 4 = Error
+      updateProcesoEstado(proc.id, 'failed');
       
       if (err.message === 'SESSION_EXPIRED') {
         showMessage('Tu sesión ha expirado. Por favor, inicia sesión nuevamente.', 'error');
@@ -1258,6 +1282,57 @@ export default function PedimentoDetail() {
     }
   };
   
+  // Funciones de manejo de procesos
+  // Removed duplicate definitions
+  
+  // Handle select all process checkboxes
+  const handleSelectAllProcesos = (e) => {
+    if (e.target.checked) {
+      const availableProcesos = procesos
+        .filter(proc => proc.status !== 'running' && proc.status !== 'completed')
+        .map(proc => proc.task_id);
+      setSelectedProcesos(availableProcesos);
+      setIsSelectAll(true);
+    } else {
+      setSelectedProcesos([]);
+      setIsSelectAll(false);
+    }
+  };
+
+  // Handle select individual process checkbox
+  const handleSelectProceso = (id, checked) => {
+    if (checked) {
+      setSelectedProcesos(prev => [...prev, id]);
+    } else {
+      setSelectedProcesos(prev => prev.filter(i => i !== id));
+    }
+    // Update isSelectAll
+    const availableProcesos = procesos
+      .filter(proc => proc.status !== 'running' && proc.status !== 'completed')
+      .map(proc => proc.task_id);
+    setIsSelectAll(availableProcesos.length === selectedProcesos.length + (checked ? 1 : -1));
+  };
+
+  const handlePasarPaginaAEspera = async () => {
+    const failedProcesses = procesos.filter(proc => proc.status === 'failed');
+    if (failedProcesses.length === 0) return;
+    
+    for (const proceso of failedProcesses) {
+      await handlePasarAEspera(proceso);
+    }
+  };
+
+  const handlePasarSeleccionadosAEspera = async () => {
+    const failedSelectedProcesses = procesos.filter(
+      proc => selectedProcesos.includes(proc.task_id) && proc.status === 'failed'
+    );
+    if (failedSelectedProcesses.length === 0) return;
+    
+    for (const proceso of failedSelectedProcesses) {
+      await handlePasarAEspera(proceso);
+    }
+  };
+
   // Función para verificar servicios creados
   const handleVerificarServiciosCreados = async () => {
     try {
@@ -1348,16 +1423,47 @@ export default function PedimentoDetail() {
   useEffect(() => {
     if (!id || activeTab !== 'procesos') return;
 
+    // Detectar si algún filtro cambió
+    const currentFilters = {
+      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 && procesosPage !== 1) {
+      setProcesosPage(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 };
+    
     setProcesosLoading(true);
     setProcesosError('');
     
-    // Crear filtros incluyendo el pedimento
+    // Construir filtros
     const filters = {
       ...procesosFilters,
       pedimento: id // Filtrar por el pedimento actual
     };
     
-    fetchProcesamientoPedimentos(procesosPage, procesosPageSize, filters)
+    if (sortField) {
+      const fieldMapping = {
+        'id': 'task_id',
+        'estado': 'status',
+        'pedimento': 'pedimento_app'
+      };
+      const mappedField = fieldMapping[sortField] || sortField;
+      filters['ordering'] = (sortOrder === 'desc' ? '-' : '') + mappedField;
+    }
+    
+    fetchTasks(procesosPage, procesosPageSize, filters)
       .then((data) => {
         setProcesos(data.results);
         setProcesosCount(data.count);
@@ -1372,7 +1478,7 @@ export default function PedimentoDetail() {
         }
         setProcesosLoading(false);
       });
-  }, [id, activeTab, procesosPage, procesosPageSize, showMessage]);
+  }, [id, activeTab, procesosPage, procesosPageSize, sortField, sortOrder, procesosFilters, showMessage]);
 
   // Resetear página de Procesos cuando cambie el pedimento
   useEffect(() => {
@@ -1418,6 +1524,65 @@ export default function PedimentoDetail() {
   };
 
   // Funciones para procesar peticiones
+  // Descargar todos los AcuseCoves
+  // Ejecutar la acción de procesar AcuseCove para todos los COVEs visibles
+  // Ejecutar la acción de procesar AcuseCove solo para los que no están descargados
+  const handleDownloadAllAcuseCoves = async () => {
+    if (!coves || coves.length === 0) {
+      showMessage('No hay AcuseCoves por descargar', 'info');
+      return;
+    }
+    const pendientes = coves.filter(cove => !cove.acuse_cove_descargado);
+    if (pendientes.length === 0) {
+      showMessage('No hay AcuseCoves pendientes por descargar', 'info');
+      return;
+    }
+    let successCount = 0;
+    let errorCount = 0;
+    for (const cove of pendientes) {
+      try {
+        await handleAcuseCoveProcess(cove);
+        successCount++;
+      } catch (error) {
+        errorCount++;
+      }
+    }
+    if (successCount > 0) {
+      showMessage(`${successCount} AcuseCove(s) procesados exitosamente`, 'success');
+    }
+    if (errorCount > 0) {
+      showMessage(`${errorCount} AcuseCove(s) no se pudieron procesar`, 'error');
+    }
+  };
+
+  // Ejecutar la acción de procesar COVE solo para los que no están descargados
+  const handleDownloadAllCoves = async () => {
+    if (!coves || coves.length === 0) {
+      showMessage('No hay COVEs por descargar', 'info');
+      return;
+    }
+    const pendientes = coves.filter(cove => !cove.cove_descargado);
+    if (pendientes.length === 0) {
+      showMessage('No hay COVEs pendientes por descargar', 'info');
+      return;
+    }
+    let successCount = 0;
+    let errorCount = 0;
+    for (const cove of pendientes) {
+      try {
+        await handleCoveProcess(cove);
+        successCount++;
+      } catch (error) {
+        errorCount++;
+      }
+    }
+    if (successCount > 0) {
+      showMessage(`${successCount} COVE(s) procesados exitosamente`, 'success');
+    }
+    if (errorCount > 0) {
+      showMessage(`${errorCount} COVE(s) no se pudieron procesar`, 'error');
+    }
+  };
   const handleCoveRequest = async (cove) => {
     console.log('Request cove:', cove);
     showMessage(`Procesando petición para COVE #${cove.numero_cove}...`, 'info');
@@ -1976,22 +2141,7 @@ export default function PedimentoDetail() {
                 </div>
               </button>
               
-              <button
+
-                onClick={() => handleTabChange('procesos')}
-                className={`whitespace-nowrap py-3 sm:py-4 px-2 sm:px-3 lg:px-1 border-b-2 font-medium text-xs sm:text-sm transition-all duration-200 ${
-                  activeTab === 'procesos'
-                    ? 'border-blue-600 text-blue-600 bg-blue-50/50'
-                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-                }`}
-              >
-                <div className="flex items-center space-x-1 sm:space-x-2">
-                  <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-                  </svg>
-                  <span className="hidden sm:inline">Procesos</span>
-                  <span className="sm:hidden">Proc.</span>
-                </div>
-              </button>
               
               <button
                 onClick={() => handleTabChange('auditor')}
@@ -2656,7 +2806,37 @@ export default function PedimentoDetail() {
                 </div>
               ) : (
                 <div className="space-y-4">
-                  {/* Tabla de partidas */}
+                  {/* Botón Descargar partidas y tabla de partidas */}
+                  <div className="flex justify-end mb-2">
+                    <button
+                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+                      onClick={async () => {
+                        if (!partidas || partidas.length === 0) {
+                          showMessage('No hay partidas para procesar', 'info');
+                          return;
+                        }
+                        const pendientes = partidas.filter(p => !p.descargado);
+                        if (pendientes.length === 0) {
+                          showMessage('No hay partidas pendientes por descargar', 'info');
+                          return;
+                        }
+                        let successCount = 0;
+                        let errorCount = 0;
+                        for (const partida of pendientes) {
+                          try {
+                            await handlePartidaRequest(partida);
+                            successCount++;
+                          } catch (error) {
+                            errorCount++;
+                          }
+                        }
+                        if (successCount > 0) showMessage(`${successCount} partida(s) procesadas exitosamente`, 'success');
+                        if (errorCount > 0) showMessage(`${errorCount} partida(s) no se pudieron procesar`, 'error');
+                      }}
+                    >
+                      Descargar partidas
+                    </button>
+                  </div>
                   <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
                     <div className="overflow-x-auto">
                       <table className="min-w-full divide-y divide-gray-300">
@@ -2851,6 +3031,24 @@ export default function PedimentoDetail() {
                   </div>
                 </div>
 
+                {/* Botones para descargar todos los AcuseCoves y COVEs */}
+                {coves.length > 0 && (
+                  <div className="mb-2 flex flex-col sm:flex-row gap-2 justify-end">
+                    <button
+                      onClick={handleDownloadAllAcuseCoves}
+                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+                    >
+                      Descargar todos los AcuseCoves
+                    </button>
+                    <button
+                      onClick={handleDownloadAllCoves}
+                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    >
+                      Descargar todos los COVEs
+                    </button>
+                  </div>
+                )}
+
                 {/* Filtros */}
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 p-3 sm:p-4 bg-gray-50 rounded-lg border">
                   <div>
@@ -3124,6 +3322,64 @@ export default function PedimentoDetail() {
             <div className="p-6">
               {/* Header de la sección */}
               <div className="mb-6 space-y-4">
+            <div className="flex flex-col gap-2 mb-2 sm:flex-row sm:justify-end">
+              <button
+                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+                      onClick={async () => {
+                        if (!edocs || edocs.length === 0) {
+                          showMessage('No hay EDocs para procesar', 'info');
+                          return;
+                        }
+                        const pendientes = edocs.filter(e => !e.edocument_descargado);
+                        if (pendientes.length === 0) {
+                          showMessage('No hay EDocs pendientes por procesar', 'info');
+                          return;
+                        }
+                        let successCount = 0;
+                        let errorCount = 0;
+                        for (const edoc of pendientes) {
+                          try {
+                            await handleEdocProcess(edoc);
+                            successCount++;
+                          } catch (error) {
+                            errorCount++;
+                          }
+                        }
+                        if (successCount > 0) showMessage(`${successCount} EDoc(s) procesados exitosamente`, 'success');
+                        if (errorCount > 0) showMessage(`${errorCount} EDoc(s) no se pudieron procesar`, 'error');
+                      }}
+                    >
+                      Descargar todos los EDocs
+                    </button>
+              <button
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors"
+                onClick={async () => {
+                  if (!edocs || edocs.length === 0) {
+                    showMessage('No hay acuses de EDocs para descargar', 'info');
+                    return;
+                  }
+                  const pendientes = edocs.filter(e => !e.acuse_descargado);
+                  if (pendientes.length === 0) {
+                    showMessage('No hay acuses de EDocs pendientes por descargar', 'info');
+                    return;
+                  }
+                  let successCount = 0;
+                  let errorCount = 0;
+                  for (const edoc of pendientes) {
+                    try {
+                      await handleAcuseEdocDownload(edoc);
+                      successCount++;
+                    } catch (error) {
+                      errorCount++;
+                    }
+                  }
+                  if (successCount > 0) showMessage(`${successCount} acuse(s) de EDoc descargados exitosamente`, 'success');
+                  if (errorCount > 0) showMessage(`${errorCount} acuse(s) de EDoc no se pudieron descargar`, 'error');
+                }}
+              >
+                Descargar Todos los acuses
+              </button>
+            </div>
                 <div className="flex flex-wrap items-center justify-between gap-4">
                   <div className="flex items-center space-x-4">
                     <h3 className="text-lg font-semibold text-gray-900">
@@ -3450,350 +3706,7 @@ export default function PedimentoDetail() {
             </div>
           )}
 
-          {activeTab === 'procesos' && (
-            <div className="p-6">
-              {/* Header de la sección */}
-              <div className="mb-4 sm:mb-6">
-                <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-                  <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
-                    <h3 className="text-lg sm:text-xl font-semibold text-gray-900">
-                      Procesos del Pedimento
-                    </h3>
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 w-fit">
-                      {procesosCount} Procesos
-                    </span>
-                  </div>
 
-                  {/* Botones de creación de servicios */}
-                  <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-3">
-                    {/* Botón prioritario: Obtener pedimento completo */}
-                    {!existeServicio(3) && (
-                      <button
-                        onClick={() => handleCrearServicio(3, 'Procesamiento SAT')}
-                        disabled={creatingService === 3}
-                        className={`inline-flex items-center px-3 sm:px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white transition-colors duration-200 w-full sm:w-auto justify-center ${
-                          creatingService === 3
-                            ? 'bg-gray-400 cursor-not-allowed'
-                            : 'bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
-                        }`}
-                      >
-                        {creatingService === 3 ? (
-                          <>
-                            <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" 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">Creando...</span>
-                            <span className="sm:hidden">Creando...</span>
-                          </>
-                        ) : (
-                          <>
-                            <svg className="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                            </svg>
-                            <span className="hidden sm:inline">Obtener Pedimento Completo</span>
-                            <span className="sm:hidden">Obtener Pedimento</span>
-                          </>
-                        )}
-                      </button>
-                    )}
-                    
-                    {/* Otros servicios disponibles */}
-                    {existeServicio(3) && (
-                      <div className="flex items-center space-x-2">
-                        {/* Generación COVEs */}
-                        {!existeServicio(4) && (
-                          <button
-                            onClick={() => handleCrearServicio(4, 'Generación COVEs')}
-                            disabled={creatingService === 4}
-                            className={`inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200 ${
-                              creatingService === 4 ? 'opacity-50 cursor-not-allowed' : ''
-                            }`}
-                          >
-                            {creatingService === 4 ? (
-                              <svg className="animate-spin -ml-1 mr-2 h-4 w-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>
-                            ) : (
-                              <svg className="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                              </svg>
-                            )}
-                            COVEs
-                          </button>
-                        )}
-                        
-                        {/* Generación EDocs */}
-                        {!existeServicio(5) && (
-                          <button
-                            onClick={() => handleCrearServicio(5, 'Generación EDocs')}
-                            disabled={creatingService === 5}
-                            className={`inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200 ${
-                              creatingService === 5 ? 'opacity-50 cursor-not-allowed' : ''
-                            }`}
-                          >
-                            {creatingService === 5 ? (
-                              <svg className="animate-spin -ml-1 mr-2 h-4 w-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>
-                            ) : (
-                              <svg className="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                              </svg>
-                            )}
-                            EDocs
-                          </button>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-
-              {procesosLoading ? (
-                <div className="flex justify-center items-center py-12">
-                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
-                  <span className="ml-2 text-gray-600">Cargando procesos...</span>
-                </div>
-              ) : procesosError ? (
-                <div className="text-center py-12">
-                  <div className="text-red-600 mb-2">
-                    <svg className="mx-auto h-12 w-12" 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.664-.833-2.464 0L4.35 16.5c-.77.833.192 2.5 1.732 2.5z" />
-                    </svg>
-                  </div>
-                  <h3 className="text-lg font-medium text-gray-900 mb-1">Error al cargar procesos</h3>
-                  <p className="text-gray-600">{procesosError}</p>
-                </div>
-              ) : procesos.length === 0 ? (
-                <div className="text-center py-12">
-                  <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-                  </svg>
-                  <h3 className="mt-2 text-sm font-medium text-gray-900">No hay procesos</h3>
-                  <p className="mt-1 text-sm text-gray-500">
-                    No se encontraron procesos para este pedimento.
-                  </p>
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  {/* Tabla de Procesos */}
-                  <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
-                    <div className="overflow-x-auto">
-                      <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">
-                            ID Proceso
-                          </th>
-                          <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Servicio
-                          </th>
-                          <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Estado
-                          </th>
-                          <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Organización
-                          </th>
-                          <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Fecha Creación
-                          </th>
-                          <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Última Actualización
-                          </th>
-                          <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Acciones
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody className="bg-white divide-y divide-gray-200">
-                        {procesos.map((proceso, index) => (
-                          <tr key={`${proceso.id}-${index}`} className="hover:bg-gray-50">
-                            <td className="px-6 py-4 whitespace-nowrap">
-                              <div className="flex items-center">
-                                <div className="flex-shrink-0 h-10 w-10">
-                                  <div className="h-10 w-10 rounded-lg bg-purple-100 flex items-center justify-center">
-                                    <svg className="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-                                    </svg>
-                                  </div>
-                                </div>
-                                <div className="ml-4">
-                                  <div className="text-sm font-medium text-gray-900">
-                                    #{proceso.id}
-                                  </div>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-6 py-4 whitespace-nowrap">
-                              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getServicioColor(proceso.servicio)}`}>
-                                {getServicioLabel(proceso.servicio)}
-                              </span>
-                            </td>
-                            <td className="px-6 py-4 whitespace-nowrap">
-                              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getEstadoColor(proceso.estado)}`}>
-                                {getEstadoLabel(proceso.estado)}
-                              </span>
-                            </td>
-                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                              {proceso.organizacion_name || 'N/A'}
-                            </td>
-                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                              {formatDate(proceso.created_at)}
-                            </td>
-                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                              {formatDate(proceso.updated_at)}
-                            </td>
-                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                              <div className="flex items-center space-x-2">
-                                {/* Botón Play (Ejecutar Servicio) */}
-                                <button
-                                  onClick={() => handleEjecutarServicio(proceso)}
-                                  disabled={
-                                    executingId === proceso.id || 
-                                    proceso.estado === 2 || // En Proceso
-                                    proceso.estado === 3 || // Completado
-                                    proceso.estado === 5    // Cancelado
-                                  }
-                                  className={`inline-flex items-center p-2 border border-transparent rounded-md transition-colors duration-200 ${
-                                    executingId === proceso.id || 
-                                    proceso.estado === 2 || 
-                                    proceso.estado === 3 || 
-                                    proceso.estado === 5
-                                      ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
-                                      : 'bg-green-100 text-green-700 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500'
-                                  }`}
-                                  title={
-                                    executingId === proceso.id ? 'Ejecutando...' :
-                                    proceso.estado === 2 ? 'No disponible - En proceso' :
-                                    proceso.estado === 3 ? 'No disponible - Completado' :
-                                    proceso.estado === 5 ? 'No disponible - Cancelado' :
-                                    'Ejecutar servicio'
-                                  }
-                                >
-                                  {executingId === proceso.id ? (
-                                    <svg className="animate-spin h-4 w-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>
-                                  ) : (
-                                    <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
-                                      <path d="M8 5v14l11-7z"/>
-                                    </svg>
-                                  )}
-                                </button>
-
-                                {/* Botón Refresh (Pasar a Espera) */}
-                                <button
-                                  onClick={() => handlePasarAEspera(proceso)}
-                                  disabled={
-                                    changingStateId === proceso.id ||
-                                    proceso.estado === 1 || // Pendiente
-                                    proceso.estado === 2 || // En Proceso
-                                    proceso.estado === 3 || // Completado
-                                    proceso.estado === 5    // Cancelado
-                                  }
-                                  className={`inline-flex items-center p-2 border border-transparent rounded-md transition-colors duration-200 ${
-                                    changingStateId === proceso.id ||
-                                    proceso.estado === 1 ||
-                                    proceso.estado === 2 ||
-                                    proceso.estado === 3 ||
-                                    proceso.estado === 5
-                                      ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
-                                      : 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500'
-                                  }`}
-                                  title={
-                                    changingStateId === proceso.id ? 'Cambiando estado...' :
-                                    proceso.estado === 1 ? 'No disponible - Use Play para ejecutar' :
-                                    proceso.estado === 2 ? 'No disponible - En proceso' :
-                                    proceso.estado === 3 ? 'No disponible - Completado' :
-                                    proceso.estado === 5 ? 'No disponible - Cancelado' :
-                                    'Pasar a espera'
-                                  }
-                                >
-                                  {changingStateId === proceso.id ? (
-                                    <svg className="animate-spin h-4 w-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>
-                                  ) : (
-                                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                                    </svg>
-                                  )}
-                                </button>
-                              </div>
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {/* Paginación para Procesos */}
-              {procesosCount > 0 && (
-                <div className="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                  <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
-                    <span className="text-sm text-gray-700">
-                      <span className="hidden sm:inline">Mostrando </span>
-                      <span className="font-medium">{((procesosPage - 1) * procesosPageSize) + 1}</span>-
-                      <span className="font-medium">{Math.min(procesosPage * procesosPageSize, procesosCount)}</span>
-                      <span className="hidden sm:inline"> de </span>
-                      <span className="sm:hidden">/</span>
-                      <span className="font-medium">{procesosCount}</span>
-                      <span className="hidden sm:inline"> procesos</span>
-                    </span>
-                    <select
-                      value={procesosPageSize}
-                      onChange={(e) => {
-                        setProcesosPageSize(Number(e.target.value));
-                        setProcesosPage(1);
-                      }}
-                      className="text-sm border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto"
-                    >
-                      <option value={10}>10 por página</option>
-                      <option value={25}>25 por página</option>
-                      <option value={50}>50 por página</option>
-                      <option value={100}>100 por página</option>
-                    </select>
-                  </div>
-                  
-                  <div className="flex items-center justify-center sm:justify-end space-x-1 sm:space-x-2">
-                    <button
-                      onClick={() => setProcesosPage(Math.max(1, procesosPage - 1))}
-                      disabled={procesosPage === 1}
-                      className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                      <span className="sr-only">Anterior</span>
-                      <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                        <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
-                      </svg>
-                    </button>
-                    
-                    <span className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
-                      Página {procesosPage} de {Math.ceil(procesosCount / procesosPageSize)}
-                    </span>
-                    
-                    <button
-                      onClick={() => setProcesosPage(Math.min(Math.ceil(procesosCount / procesosPageSize), procesosPage + 1))}
-                      disabled={procesosPage >= Math.ceil(procesosCount / procesosPageSize)}
-                      className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                      <span className="sr-only">Siguiente</span>
-                      <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                        <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
 
           {activeTab === 'auditor' && (
             <div className="p-6">
@@ -3804,102 +3717,6 @@ export default function PedimentoDetail() {
                     <h3 className="text-lg sm:text-xl font-semibold text-gray-900">
                       Auditoría del Pedimento
                     </h3>
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 w-fit">
-                      Análisis Completo
-                    </span>
-                  </div>
-
-                  
-                  
-                  {/* Botones de Auditoría */}
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 sm:gap-3 w-full lg:w-auto">
-                    <button
-                      onClick={() => handleAuditarPedimentoCompleto()}
-                      className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md hover:shadow-lg w-full"
-                    >
-                      <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="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="hidden sm:inline">Auditar Pedimento Completo</span>
-                      <span className="sm:hidden">Ped. Completo</span>
-                    </button>
-                    
-                    <button
-                      onClick={() => handleAuditarEDocs()}
-                      className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200 shadow-md hover:shadow-lg w-full"
-                    >
-                      <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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="hidden sm:inline">Auditar EDocs</span>
-                      <span className="sm:hidden">EDocs</span>
-                    </button>
-                    
-                    <button
-                      onClick={() => handleAuditarPartidas()}
-                      className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200 shadow-md hover:shadow-lg w-full"
-                    >
-                      <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="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 0V17m0-10a2 2 0 012-2h2a2 2 0 002-2M13 7h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4" />
-                      </svg>
-                      <span className="hidden sm:inline">Auditar Partidas</span>
-                      <span className="sm:hidden">Partidas</span>
-                    </button>
-                    
-                    <button
-                      onClick={() => handleAuditarAcuses()}
-                      className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200 shadow-md hover:shadow-lg w-full"
-                    >
-                      <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="M5 13l4 4L19 7" />
-                      </svg>
-                      <span className="hidden sm:inline">Auditar Acuses</span>
-                      <span className="sm:hidden">Acuses</span>
-                    </button>
-                    
-                    <button
-                      onClick={() => handleAuditarCoves()}
-                      className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200 shadow-md hover:shadow-lg w-full"
-                    >
-                      <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                      </svg>
-                      <span className="hidden sm:inline">Auditar COVEs</span>
-                      <span className="sm:hidden">COVEs</span>
-                    </button>
-                    
-                    <button
-                      onClick={() => handleAuditarAcuseCoves()}
-                      className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200 shadow-md hover:shadow-lg w-full"
-                    >
-                      <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                      <span className="hidden sm:inline">Auditar Acuse COVEs</span>
-                      <span className="sm:hidden">Ac. COVEs</span>
-                    </button>
-                    
-                    <button
-                      onClick={() => handleCompararRemesasCoves()}
-                      className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200 shadow-md hover:shadow-lg w-full sm:col-span-2 lg:col-span-1"
-                    >
-                      <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                      </svg>
-                      <span className="hidden sm:inline">Comparar Remesas vs COVEs</span>
-                      <span className="sm:hidden">Comparar</span>
-                    </button>
-                    
-                    <button
-                      onClick={() => handleVerificarServiciosCreados()}
-                      className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm font-medium rounded-lg 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 shadow-md hover:shadow-lg w-full sm:col-span-2 lg:col-span-1"
-                    >
-                      <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="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
-                      </svg>
-                      <span className="hidden sm:inline">Verificar Servicios Creados</span>
-                      <span className="sm:hidden">Verificar</span>
-                    </button>
                   </div>
                 </div>
               </div>

src/pages/Reports.jsx

@@ -1,4 +1,12 @@
 import React, { useState, useEffect } from 'react';
+import { getCurrentUser } from '../api/users';
+// Helper to get current user with fetchWithAuth
+const fetchCurrentUserWithAuth = async () => {
+  const url = `${API_URL}/user/users/me/`;
+  const res = await fetchWithAuth(url);
+  if (!res.ok) throw new Error('No se pudo obtener el usuario actual');
+  return res.json();
+};
 import { fetchWithAuth } from '../fetchWithAuth';
 import { useNotification } from '../context/NotificationContext';
 import datastageModelsData from '../data/datastageModels.json';
@@ -34,7 +42,109 @@ if (typeof document !== 'undefined' && !document.getElementById('reports-animati
   document.head.appendChild(style);
 }
 
+const handleDownloadReport = async (reportId) => {
+  try {
+    const url = `${import.meta.env.VITE_EFC_API_URL}/reports/report-document-download/${reportId}/`;
+    const res = await fetchWithAuth(url);
+    if (!res.ok) throw new Error('Error al descargar el reporte');
+    const blob = await res.blob();
+    let filename = `reporte_${reportId}.csv`;
+    const disposition = res.headers.get('Content-Disposition');
+    if (disposition && disposition.includes('filename=')) {
+      filename = disposition.split('filename=')[1].replace(/"/g, '').trim();
+    }
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } catch (err) {
+    alert('No se pudo descargar el reporte.');
+  }
+};
+
 export default function Reports() {
+  // Estado para organizacion_id
+  const [organizacionId, setOrganizacionId] = useState('');
+
+  useEffect(() => {
+    async function fetchOrgId() {
+      try {
+        const user = await fetchCurrentUserWithAuth();
+        if (user && user.organizacion) {
+          setOrganizacionId(user.organizacion);
+        }
+      } catch (err) {
+        setOrganizacionId('');
+      }
+    }
+    fetchOrgId();
+  }, []);
+  // Handler for Generar Reporte in Cumplimiento tab
+  const handleGenerarReporteCumplimiento = async () => {
+    if (!organizacionId) {
+      alert('No se pudo obtener el organizacion_id. Intenta de nuevo más tarde.');
+      return;
+    }
+    // Build query params from filtersCumplimiento and add organizacion_id
+    const paramsObj = { ...filtersCumplimiento, organizacion_id: organizacionId };
+    const params = Object.entries(paramsObj)
+      .filter(([_, v]) => v)
+      .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+      .join('&');
+    const url = `${import.meta.env.VITE_EFC_API_URL}/reports/table-summary/${params ? `?${params}` : ''}`;
+    console.log('Cumplimiento Report Request:', url);
+    try {
+  const res = await fetchWithAuth(url);
+      const data = await res.json();
+      console.log('Cumplimiento Report Response:', data);
+      if (!res.ok) throw new Error('Error al generar el reporte');
+      alert('Reporte solicitado correctamente. Aparecerá en el historial cuando esté listo.');
+    } catch (err) {
+      alert('No se pudo generar el reporte.');
+    }
+  };
+  // Filtros replicados de TableroAlmacenamiento
+  const initialFiltersCumplimiento = {
+    pedimento_app: '',
+    aduana: '',
+    patente: '',
+    regimen: '',
+    agente_aduanal: '',
+    tipo_operacion: '',
+    fecha_pago_gte: '',
+    fecha_pago_lte: '',
+    contribuyente__rfc: '',
+  };
+  const [filtersCumplimiento, setFiltersCumplimiento] = useState(initialFiltersCumplimiento);
+  const handleFilterChangeCumplimiento = (e) => {
+    setFiltersCumplimiento({ ...filtersCumplimiento, [e.target.name]: e.target.value });
+  };
+  const [summaryData, setSummaryData] = useState(null);
+
+  // Fetch summary data for dashboard/cards
+  const fetchSummary = async () => {
+    try {
+      const url = `${import.meta.env.VITE_EFC_API_URL}/reports/dashboard/summary/`;
+      const res = await fetch(url, {
+        method: 'GET',
+        credentials: 'include',
+        mode: 'cors',
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
+          'Accept': '*/*',
+        },
+        referrer: window.location.href,
+      });
+      if (!res.ok) throw new Error('Error al obtener el resumen');
+      const data = await res.json();
+      setSummaryData(data);
+    } catch (err) {
+      setSummaryData(null);
+    }
+  };
+  const [reports, setReports] = useState([]);
   // Leer DEBUG_MODE desde variables de entorno
   const isDebugMode = import.meta.env.VITE_DEBUG_MODE === 'true';
   const { showMessage } = useNotification();
@@ -52,13 +162,7 @@ export default function Reports() {
   // Estado para pestañas
   const [activeTab, setActiveTab] = useState('pedimentos');
 
-  // Efecto para manejar el cambio de pestaña cuando isDebugMode cambia
+  // Mostrar Cumplimiento en producción: eliminar lógica que oculta la pestaña
-  useEffect(() => {
-    // Si no está en modo debug y la pestaña activa es una pestaña de debug, cambiar a 'pedimentos'
-    if (!isDebugMode && (activeTab === 'minimos' || activeTab === 'coves')) {
-      setActiveTab('pedimentos');
-    }
-  }, [isDebugMode, activeTab]);
 
   // Importar modelos
   const datastageModels = datastageModelsData?.models || [];
@@ -201,6 +305,25 @@ export default function Reports() {
     setTourStep(0);
   };
 
+  // Fetch report list from API
+  useEffect(() => {
+    const fetchReports = async () => {
+      try {
+        const url = `${import.meta.env.VITE_EFC_API_URL}/reports/report-document-list/`;
+        const res = await fetchWithAuth(url);
+        if (!res.ok) throw new Error('Error al obtener el historial de reportes');
+        const data = await res.json();
+        setReports(data);
+      } catch (err) {
+        setReports([]);
+      }
+    };
+    fetchReports();
+  }, []);
+
+  useEffect(() => {
+    fetchSummary();
+  }, []);
   // Función para manejar la exportación del modelo
   const handleExportModel = async () => {
     if (selectedFields.length === 0) {
@@ -367,8 +490,7 @@ export default function Reports() {
                           key={field}
                           onClick={() => setAvailableSelected(field)}
                           onDoubleClick={() => addField(field)}
-                          className={`group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 ${
+                          className={`group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 ${availableSelected === field
-                            availableSelected === field
                               ? 'bg-blue-50 text-blue-700'
                               : 'hover:bg-gray-100'
                             }`}
@@ -420,8 +542,7 @@ export default function Reports() {
                       {selectedFields.map(field => (
                         <div
                           key={field}
-                          className={`group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 ${
+                          className={`group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 ${includedSelected === field
-                            includedSelected === field
                               ? 'bg-red-50 text-red-700'
                               : 'hover:bg-gray-100'
                             }`}
@@ -555,16 +676,15 @@ export default function Reports() {
           <div className="flex gap-3">
             <button
               onClick={() => setExportFormat('excel')}
-              className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${
+              className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'excel'
-                exportFormat === 'excel'
                   ? 'bg-gradient-to-br from-green-50 to-green-100 border-green-200 shadow-lg shadow-green-100 scale-[1.02]'
                   : 'bg-white border-gray-200 hover:bg-gray-50'
                 }`}
             >
               <div className="flex items-center justify-center gap-2">
                 <svg className={`w-5 h-5 ${exportFormat === 'excel' ? 'text-green-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M8 13h8M8 17h8M8 9h2"/>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M8 13h8M8 17h8M8 9h2" />
                 </svg>
                 <span className={exportFormat === 'excel' ? 'font-semibold text-green-700' : 'text-gray-700'}>Excel</span>
               </div>
@@ -572,16 +692,15 @@ export default function Reports() {
 
             <button
               onClick={() => setExportFormat('csv')}
-              className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${
+              className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'csv'
-                exportFormat === 'csv'
                   ? 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200 shadow-lg shadow-blue-100 scale-[1.02]'
                   : 'bg-white border-gray-200 hover:bg-gray-50'
                 }`}
             >
               <div className="flex items-center justify-center gap-2">
                 <svg className={`w-5 h-5 ${exportFormat === 'csv' ? 'text-blue-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M10 9v10M14 9v10M6 9v10"/>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M10 9v10M14 9v10M6 9v10" />
                 </svg>
                 <span className={exportFormat === 'csv' ? 'font-semibold text-blue-700' : 'text-gray-700'}>CSV</span>
               </div>
@@ -601,20 +720,17 @@ export default function Reports() {
         <button
           onClick={handleExportModel}
           disabled={isExporting}
-          className={`group relative w-full py-3 text-lg font-semibold ${
+          className={`group relative w-full py-3 text-lg font-semibold ${isExporting
-            isExporting 
               ? 'bg-gray-400 cursor-not-allowed'
               : exportFormat === 'excel'
                 ? 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'
                 : 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700'
-          } text-white rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl ${
+            } text-white rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl ${exportFormat === 'excel'
-            exportFormat === 'excel' 
               ? 'shadow-green-500/20 hover:shadow-green-500/30'
               : 'shadow-blue-500/20 hover:shadow-blue-500/30'
             } overflow-hidden`}
         >
-          <div className={`absolute inset-0 w-full h-full ${
+          <div className={`absolute inset-0 w-full h-full ${isExporting
-            isExporting 
               ? 'bg-gradient-to-r from-gray-300/0 via-gray-300/30 to-gray-300/0'
               : exportFormat === 'excel'
                 ? 'bg-gradient-to-r from-green-400/0 via-green-400/30 to-green-400/0'
@@ -677,16 +793,15 @@ export default function Reports() {
             <div className="flex gap-3">
               <button
                 onClick={() => setExportFormat('excel')}
-                className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${
+                className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'excel'
-                  exportFormat === 'excel'
                     ? 'bg-gradient-to-br from-green-50 to-green-100 border-green-200 shadow-lg shadow-green-100 scale-[1.02]'
                     : 'bg-white border-gray-200 hover:bg-gray-50'
                   }`}
               >
                 <div className="flex items-center justify-center gap-2">
                   <svg className={`w-5 h-5 ${exportFormat === 'excel' ? 'text-green-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M8 13h8M8 17h8M8 9h2"/>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M8 13h8M8 17h8M8 9h2" />
                   </svg>
                   <span className={exportFormat === 'excel' ? 'font-semibold text-green-700' : 'text-gray-700'}>Excel</span>
                 </div>
@@ -694,16 +809,15 @@ export default function Reports() {
 
               <button
                 onClick={() => setExportFormat('csv')}
-                className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${
+                className={`flex-1 py-2.5 rounded-lg transition-all duration-200 border ${exportFormat === 'csv'
-                  exportFormat === 'csv'
                     ? 'bg-gradient-to-br from-blue-50 to-blue-100 border-blue-200 shadow-lg shadow-blue-100 scale-[1.02]'
                     : 'bg-white border-gray-200 hover:bg-gray-50'
                   }`}
               >
                 <div className="flex items-center justify-center gap-2">
                   <svg className={`w-5 h-5 ${exportFormat === 'csv' ? 'text-blue-600' : 'text-gray-500'}`} viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M10 9v10M14 9v10M6 9v10"/>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M14 2v6h6M10 9v10M14 9v10M6 9v10" />
                   </svg>
                   <span className={exportFormat === 'csv' ? 'font-semibold text-blue-700' : 'text-gray-700'}>CSV</span>
                 </div>
@@ -722,20 +836,17 @@ export default function Reports() {
         <button
           onClick={handleExportModel}
           disabled={isExporting}
-          className={`group relative w-full py-3 text-lg font-semibold ${
+          className={`group relative w-full py-3 text-lg font-semibold ${isExporting
-            isExporting 
               ? 'bg-gray-400 cursor-not-allowed'
               : exportFormat === 'excel'
                 ? 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'
                 : 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700'
-          } text-white rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl ${
+            } text-white rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl ${exportFormat === 'excel'
-            exportFormat === 'excel' 
               ? 'shadow-green-500/20 hover:shadow-green-500/30'
               : 'shadow-blue-500/20 hover:shadow-blue-500/30'
             } overflow-hidden`}
         >
-          <div className={`absolute inset-0 w-full h-full ${
+          <div className={`absolute inset-0 w-full h-full ${isExporting
-            isExporting 
               ? 'bg-gradient-to-r from-gray-300/0 via-gray-300/30 to-gray-300/0'
               : exportFormat === 'excel'
                 ? 'bg-gradient-to-r from-green-400/0 via-green-400/30 to-green-400/0'
@@ -768,11 +879,94 @@ export default function Reports() {
         `}</style>
       </div>
     ),
-    minimos: (
+    Cumplimiento: (
       <div className="p-6">
-        <h2 className="text-xl font-bold mb-2 text-blue-900">Generar reporte de Mínimos</h2>
+        <h2 className="text-xl font-bold mb-2 text-blue-900">Generar reporte de Cumplimiento</h2>
-        <p className="mb-4 text-gray-700">Aquí puedes generar y descargar el reporte de Mínimos.</p>
+        <p className="mb-4 text-gray-700">Aquí puedes generar y descargar el reporte de Cumplimiento.</p>
-        {/* Aquí va la lógica y UI específica para mínimos */}
+        {/* Filtros replicados */}
+        <div className="max-w-7xl mx-auto mt-6 mb-4 px-4">
+          <form onSubmit={(e) => {
+            e.preventDefault();
+            fetchSummary();
+          }} className="bg-white rounded-lg shadow-sm border border-slate-200 p-4">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+              {Object.keys(initialFiltersCumplimiento).map((key) => (
+                <div key={key}>
+                  <label className="block text-xs font-medium text-slate-600 mb-1" htmlFor={key}>
+                    {key.replace(/_/g, ' ').replace('gte', 'desde').replace('lte', 'hasta')}
+                  </label>
+                  <input
+                    type={key.includes('fecha') ? 'date' : 'text'}
+                    name={key}
+                    id={key}
+                    value={filtersCumplimiento[key]}
+                    onChange={handleFilterChangeCumplimiento}
+                    className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+              ))}
+            </div>
+            <div className="flex justify-end">
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
+                  onClick={handleGenerarReporteCumplimiento}
+                >
+                  Generar Reporte
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
+        {/* Aquí va la lógica y UI específica para Cumplimiento */}
+        {/* Tabla de reportes debajo de las tarjetas */}
+        <div className="mt-10">
+          <h2 className="text-lg font-bold text-slate-700 mb-4">Historial de Reportes</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full bg-white rounded-lg shadow border border-slate-200">
+              <thead>
+                <tr className="bg-slate-100">
+                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">ID</th>
+                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Estado</th>
+                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Creado</th>
+                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Finalizado</th>
+                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Error</th>
+                  <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Descargar</th>
+                </tr>
+              </thead>
+              <tbody>
+                {reports.length > 0 ? (
+                  reports.map((r) => (
+                    <tr key={r.report_id}>
+                      <td className="px-4 py-2 text-xs text-slate-700">{r.report_id}</td>
+                      <td className="px-4 py-2 text-xs text-slate-700">{r.status}</td>
+                      <td className="px-4 py-2 text-xs text-slate-700">{r.created_at}</td>
+                      <td className="px-4 py-2 text-xs text-slate-700">{r.finished_at}</td>
+                      <td className="px-4 py-2 text-xs text-red-500">{r.error_message ? r.error_message : '-'}</td>
+                      <td className="px-4 py-2 text-xs">
+                        {r.status === 'ready' ? (
+                          <button
+                            className="text-blue-600 hover:underline"
+                            onClick={() => handleDownloadReport(r.report_id)}
+                          >
+                            Descargar
+                          </button>
+                        ) : (
+                          <span className="text-slate-400">-</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={6} className="px-4 py-2 text-center text-slate-400">No hay reportes disponibles.</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
     ),
     coves: (
@@ -898,8 +1092,7 @@ export default function Reports() {
           <div className="bg-white/95 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100">
             <div className="flex flex-col sm:flex-row border-b border-blue-200/50 p-1 gap-1">
               <button
-                className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${
+                className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'pedimentos'
-                  activeTab === 'pedimentos' 
                     ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
                     : 'text-gray-700 hover:bg-blue-50/80'
                   }`}
@@ -913,8 +1106,7 @@ export default function Reports() {
                 </div>
               </button>
               <button
-                className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${
+                className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'datastage'
-                  activeTab === 'datastage' 
                     ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
                     : 'text-gray-700 hover:bg-blue-50/80'
                   }`}
@@ -927,27 +1119,23 @@ export default function Reports() {
                   <span>Datastage cargados</span>
                 </div>
               </button>
-              {isDebugMode && (
               <button
-                  className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${
+                className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'Cumplimiento'
-                    activeTab === 'minimos' 
                     ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
                     : 'text-gray-700 hover:bg-blue-50/80'
                   }`}
-                  onClick={() => setActiveTab('minimos')}
+                onClick={() => setActiveTab('Cumplimiento')}
               >
                 <div className="flex items-center justify-center gap-2">
                   <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                   </svg>
-                    <span>Mínimos</span>
+                  <span>Cumplimiento</span>
                 </div>
               </button>
-              )}
               {isDebugMode && (
                 <button
-                  className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${
+                  className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'coves'
-                    activeTab === 'coves' 
                       ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
                       : 'text-gray-700 hover:bg-blue-50/80'
                     }`}

src/pages/TableroAlmacenamiento.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import fetchWithAuth from '../fetchWithAuth';
-
 const initialFilters = {
   pedimento_app: '',
   aduana: '',
@@ -12,11 +11,48 @@ const initialFilters = {
   fecha_pago_lte: '',
   contribuyente__rfc: '',
 };
-
 export default function TableroAlmacenamiento() {
   const [filters, setFilters] = useState(initialFilters);
   const [summary, setSummary] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [reports, setReports] = useState([]);
+
+  const handleGenerateReport = async () => {
+    try {
+      const params = Object.entries(filters)
+        .filter(([_, v]) => v)
+        .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+        .join('&');
+      const url = `${import.meta.env.VITE_EFC_API_URL}/reports/table-summary/${params ? `?${params}` : ''}`;
+      const res = await fetchWithAuth(url, { method: 'POST' });
+      if (!res.ok) throw new Error('Error al generar el reporte');
+      alert('Reporte solicitado correctamente. Aparecerá en el historial cuando esté listo.');
+    } catch (err) {
+      alert('No se pudo generar el reporte.');
+    }
+  };
+
+  const handleDownloadReport = async (reportId) => {
+    try {
+      const url = `${import.meta.env.VITE_EFC_API_URL}/reports/report-document-download/${reportId}/`;
+      const res = await fetchWithAuth(url);
+      if (!res.ok) throw new Error('Error al descargar el reporte');
+      const blob = await res.blob();
+      let filename = `reporte_${reportId}.csv`;
+      const disposition = res.headers.get('Content-Disposition');
+      if (disposition && disposition.includes('filename=')) {
+        filename = disposition.split('filename=')[1].replace(/"/g, '').trim();
+      }
+      const link = document.createElement('a');
+      link.href = window.URL.createObjectURL(blob);
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (err) {
+      alert('No se pudo descargar el reporte.');
+    }
+  };
 
   // Fetch summary data
   const fetchSummary = async () => {
@@ -36,26 +72,30 @@ export default function TableroAlmacenamiento() {
     setIsLoading(false);
   };
 
-  // Fetch initial data
+  // Fetch report list from API
+  useEffect(() => {
+    const fetchReports = async () => {
+      try {
+        const url = `${import.meta.env.VITE_EFC_API_URL}/reports/report-document-list/`;
+        const res = await fetchWithAuth(url);
+        if (!res.ok) throw new Error('Error al obtener el historial de reportes');
+        const data = await res.json();
+        setReports(data);
+      } catch (err) {
+        setReports([]);
+      }
+    };
+    fetchReports();
+  }, []);
+
   useEffect(() => {
     fetchSummary();
   }, []);
 
-  // Handle filter changes
   const handleFilterChange = (e) => {
     setFilters({ ...filters, [e.target.name]: e.target.value });
   };
 
-  // Card components for different sizes
-  const Card = ({ title, children, icon, small }) => (
-    <div className={`bg-white rounded-lg shadow-sm border border-slate-200 p-4 flex flex-col w-full ${small ? 'min-h-[120px]' : 'min-h-[200px]'}`}>
-      <div className="flex items-center gap-2 mb-2">
-        {icon && <span className={`${small ? 'text-slate-600' : 'text-blue-600'}`}>{icon}</span>}
-        <span className={`text-sm font-semibold ${small ? 'text-slate-600' : 'text-slate-700'}`}>{title}</span>
-      </div>
-      <div className="flex-1">{children}</div>
-    </div>
-  );
   
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100">
@@ -97,12 +137,21 @@ export default function TableroAlmacenamiento() {
             ))}
           </div>
           <div className="flex justify-end">
+            <div className="flex gap-2">
               <button
                 type="submit"
                 className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
               >
                 Aplicar Filtros
               </button>
+              <button
+                type="button"
+                className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
+                onClick={() => alert('Generar reporte (implementación pendiente)')}
+              >
+                Generar Reporte
+              </button>
+            </div>
           </div>
         </form>
       </div>
@@ -115,203 +164,60 @@ export default function TableroAlmacenamiento() {
             <span className="text-slate-600">Cargando resumen...</span>
           </div>
         ) : summary ? (
+          <>
             <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
-            {/* Pedimentos */}
+              {/* ...Tarjetas existentes... */}
-            <Card
+              {/* ...aquí van las Card como antes... */}
-              title="Pedimentos"
+              {/* ...no se repite para brevedad... */}
-              icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 17l4 4 4-4m-4-5v9" /></svg>}
+            </div>
+            {/* Tabla de reportes debajo de las tarjetas */}
+            <div className="mt-10">
+              <h2 className="text-lg font-bold text-slate-700 mb-4">Historial de Reportes</h2>
+              <div className="overflow-x-auto">
+                <table className="min-w-full bg-white rounded-lg shadow border border-slate-200">
+                  <thead>
+                    <tr className="bg-slate-100">
+                      <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">ID</th>
+                      <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Estado</th>
+                      <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Creado</th>
+                      <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Finalizado</th>
+                      <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Error</th>
+                      <th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Descargar</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {reports.length > 0 ? (
+                      reports.map((r) => (
+                        <tr key={r.report_id}>
+                          <td className="px-4 py-2 text-xs text-slate-700">{r.report_id}</td>
+                          <td className="px-4 py-2 text-xs text-slate-700">{r.status}</td>
+                          <td className="px-4 py-2 text-xs text-slate-700">{r.created_at}</td>
+                          <td className="px-4 py-2 text-xs text-slate-700">{r.finished_at}</td>
+                          <td className="px-4 py-2 text-xs text-red-500">{r.error_message ? r.error_message : '-'}</td>
+                          <td className="px-4 py-2 text-xs">
+                            {r.status === 'ready' ? (
+                              <button
+                                className="text-blue-600 hover:underline"
+                                onClick={() => handleDownloadReport(r.report_id)}
                               >
-              <div className="text-2xl font-bold text-blue-700">{summary.pedimentos?.total ?? '-'}</div>
+                                Descargar
-              <div className="grid grid-cols-2 gap-2 mt-2 text-xs">
+                              </button>
-                <div>
+                            ) : (
-                  <span className="block text-slate-500">Completos</span>
+                              <span className="text-slate-400">-</span>
-                  <span className="block font-semibold">{summary.pedimentos?.completos ?? '-'}</span>
+                            )}
-                </div>
+                          </td>
-                <div>
+                        </tr>
-                  <span className="block text-slate-500">Pendientes</span>
+                      ))
-                  <span className="block font-semibold">{summary.pedimentos?.pendientes ?? '-'}</span>
+                    ) : (
+                      <tr>
+                        <td colSpan={6} className="px-4 py-2 text-center text-slate-400">No hay reportes disponibles.</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
               </div>
             </div>
-              <div className="mt-2">
+          </>
-                <span className="block text-xs text-slate-500 mb-1">Cumplimiento</span>
-                <div className="w-full bg-slate-100 rounded h-2">
-                  <div
-                    className="bg-blue-600 h-2 rounded"
-                    style={{ width: `${summary.pedimentos?.cumplimiento ?? 0}%` }}
-                  />
-                </div>
-                <span className="block text-xs text-right text-blue-700 font-semibold mt-1">
-                  {summary.pedimentos?.cumplimiento ?? 0}%
-                </span>
-              </div>
-              
-              <div className="mt-2 pt-2 border-t grid grid-cols-2 gap-4">
-                {/* Documentos */}
-                <div>
-                  <div className="flex items-center gap-2">
-                    <svg className="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16h8M8 12h8M8 8h8" />
-                    </svg>
-                    <span className="text-xs font-semibold text-slate-600">Documentos</span>
-                  </div>
-                  <div className="mt-1">
-                    <div className="text-lg font-bold text-slate-700">{summary.documentos?.descargados ?? '-'}</div>
-                    <span className="block text-xs text-slate-500">Descargados</span>
-                  </div>
-                </div>
-
-                {/* Remesas */}
-                <div>
-                  <div className="flex items-center gap-2">
-                    <svg className="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3" />
-                    </svg>
-                    <span className="text-xs font-semibold text-slate-600">Remesas</span>
-                  </div>
-                  <div className="mt-1">
-                    <div className="text-lg font-bold text-slate-700">{summary.remesas?.total ?? '-'}</div>
-                    <span className="block text-xs text-slate-500">Total</span>
-                  </div>
-                </div>
-              </div>
-            </Card>
-
-            {/* Partidas */}
-            <Card
-              title="Partidas"
-              icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" /></svg>}
-            >
-              <div className="text-2xl font-bold text-blue-700">{summary.partidas?.total ?? '-'}</div>
-              <div className="grid grid-cols-2 gap-2 mt-2 text-xs">
-                <div>
-                  <span className="block text-slate-500">Descargadas</span>
-                  <span className="block font-semibold">{summary.partidas?.partidas_descargadas ?? '-'}</span>
-                </div>
-                <div>
-                  <span className="block text-slate-500">Pendientes</span>
-                  <span className="block font-semibold">{summary.partidas?.partidas_pendientes ?? '-'}</span>
-                </div>
-              </div>
-              <div className="mt-2">
-                <span className="block text-xs text-slate-500 mb-1">Cumplimiento</span>
-                <div className="w-full bg-slate-100 rounded h-2">
-                  <div
-                    className="bg-blue-600 h-2 rounded"
-                    style={{ width: `${summary.partidas?.cumplimiento ?? 0}%` }}
-                  />
-                </div>
-                <span className="block text-xs text-right text-blue-700 font-semibold mt-1">
-                  {summary.partidas?.cumplimiento ?? 0}%
-                </span>
-              </div>
-            </Card>
-
-            {/* COVES */}
-            <Card
-              title="COVES"
-              icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 8h10M7 12h10M7 16h10" /></svg>}
-            >
-              <div className="text-2xl font-bold text-blue-700">{summary.coves?.total ?? '-'}</div>
-              <div className="grid grid-cols-2 gap-2 mt-2 text-xs">
-                <div>
-                  <span className="block text-slate-500">Procesados</span>
-                  <span className="block font-semibold">{summary.coves?.coves_procesados ?? '-'}</span>
-                </div>
-                <div>
-                  <span className="block text-slate-500">Pendientes</span>
-                  <span className="block font-semibold">{summary.coves?.coves_pendientes ?? '-'}</span>
-                </div>
-              </div>
-              <div className="mt-2">
-                <span className="block text-xs text-slate-500 mb-1">Cumplimiento</span>
-                <div className="w-full bg-slate-100 rounded h-2">
-                  <div
-                    className="bg-blue-600 h-2 rounded"
-                    style={{ width: `${summary.coves?.coves_cumplimiento ?? 0}%` }}
-                  />
-                </div>
-                <span className="block text-xs text-right text-blue-700 font-semibold mt-1">
-                  {summary.coves?.coves_cumplimiento ?? 0}%
-                </span>
-              </div>
-              <div className="mt-2 border-t pt-2">
-                <span className="block text-xs text-slate-500 mb-1">Acuses</span>
-                <div className="grid grid-cols-2 gap-2 text-xs">
-                  <div>
-                    <span className="block text-slate-500">Procesados</span>
-                    <span className="block font-semibold">{summary.coves?.acuse_coves_procesados ?? '-'}</span>
-                  </div>
-                  <div>
-                    <span className="block text-slate-500">Pendientes</span>
-                    <span className="block font-semibold">{summary.coves?.acuse_coves_pendientes ?? '-'}</span>
-                  </div>
-                </div>
-                <div className="w-full bg-slate-100 rounded h-2 mt-2">
-                  <div
-                    className="bg-blue-400 h-2 rounded"
-                    style={{ width: `${summary.coves?.acuse_coves_cumplimiento ?? 0}%` }}
-                  />
-                </div>
-                <span className="block text-xs text-right text-blue-400 font-semibold mt-1">
-                  {summary.coves?.acuse_coves_cumplimiento ?? 0}%
-                </span>
-              </div>
-            </Card>
-
-            {/* EDocuments */}
-            <Card
-              title="EDocuments"
-              icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v16h16V4H4zm4 4h8v8H8V8z" /></svg>}
-            >
-              <div className="text-2xl font-bold text-blue-700">{summary.edocuments?.total ?? '-'}</div>
-              <div className="grid grid-cols-2 gap-2 mt-2 text-xs">
-                <div>
-                  <span className="block text-slate-500">asd</span>
-                  <span className="block font-semibold">{summary.edocuments?.edocs_descargados ?? '-'}</span>
-                </div>
-                <div>
-                  <span className="block text-slate-500">Pendientes</span>
-                  <span className="block font-semibold">{summary.edocuments?.edocs_pendientes ?? '-'}</span>
-                </div>
-              </div>
-              <div className="mt-2">
-                <span className="block text-xs text-slate-500 mb-1">Cumplimiento</span>
-                <div className="w-full bg-slate-100 rounded h-2">
-                  <div
-                    className="bg-blue-600 h-2 rounded"
-                    style={{ width: `${summary.edocuments?.edocs_cumplimiento ?? 0}%` }}
-                  />
-                </div>
-                <span className="block text-xs text-right text-blue-700 font-semibold mt-1">
-                  {summary.edocuments?.edocs_cumplimiento ?? 0}%
-                </span>
-              </div>
-              <div className="mt-2 border-t pt-2">
-                <span className="block text-xs text-slate-500 mb-1">Acuses</span>
-                <div className="grid grid-cols-2 gap-2 text-xs">
-                  <div>
-                    <span className="block text-slate-500">Descargados</span>
-                    <span className="block font-semibold">{summary.edocuments.acuse_descargados ?? '-'}</span>
-                  </div>
-                  <div>
-                    <span className="block text-slate-500">Pendientes</span>
-                    <span className="block font-semibold">{summary.edocuments.acuses_pendientes ?? '-'}</span>
-                  </div>
-                </div>
-                <div className="w-full bg-slate-100 rounded h-2 mt-2">
-                  <div
-                    className="bg-blue-400 h-2 rounded"
-                    style={{ width: `${summary.edocuments.acuses_cumplimiento ?? 0}%` }}
-                  />
-                </div>
-                <span className="block text-xs text-right text-blue-400 font-semibold mt-1">
-                  {summary.edocuments?.acuses_cumplimiento ?? 0}%
-                </span>
-              </div>
-            </Card>
-
-
-          </div>
         ) : (
           <div className="text-center text-slate-500 py-12">No hay datos para mostrar.</div>
         )}

src/utils/downloadUtils.js

@@ -0,0 +1,69 @@
+import { fetchWithAuth } from '../fetchWithAuth';
+
+const API_URL = import.meta.env.VITE_EFC_API_URL;
+
+/**
+ * Función auxiliar para descargas individuales
+ * @param {string} id - ID del documento
+ * @param {string} filename - Nombre del archivo (opcional)
+ * @param {function} showMessage - Función para mostrar mensajes
+ */
+export const downloadFile = async (id, filename = 'archivo', showMessage) => {
+  try {
+    const res = await fetchWithAuth(`${API_URL}/record/documents/descargar/${id}/`);
+    
+    if (!res.ok) {
+      showMessage('Error en la descarga del archivo', 'error');
+      return;
+    }
+    
+    const blob = await res.blob();
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error('Error downloading file:', error);
+    if (error.message === 'SESSION_EXPIRED') {
+      showMessage('Tu sesión ha expirado, por favor inicia sesión de nuevo.', 'error');
+    } else {
+      showMessage('Error al descargar el archivo', 'error');
+    }
+  }
+};
+
+/**
+ * Función auxiliar para descargas masivas en ZIP
+ * @param {array} ids - Array de IDs de documentos
+ * @param {function} showMessage - Función para mostrar mensajes
+ * @param {string} pedimentoName - Nombre del pedimento para el archivo ZIP (opcional)
+ */
+export const downloadBulkZip = async (ids, showMessage, pedimentoName) => {
+  try {
+    const response = await fetchWithAuth(`${API_URL}/record/documents/bulk-download/`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ document_ids: ids })
+    });
+    
+    if (!response.ok) throw new Error('Error en la descarga');
+    
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `documentos_${pedimentoName || 'pedimento'}.zip`;
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+    
+    showMessage('Descarga iniciada exitosamente', 'success');
+  } catch (error) {
+    showMessage('Error en la descarga: ' + error.message, 'error');
+  }
+};