Compare commits
6 Commits
feature/Ag
...
repoCumpli
| Author | SHA1 | Date | |
|---|---|---|---|
| fd4fe5dc2b | |||
| f845629b81 | |||
| 5e50d6bac0 | |||
| e69fca99c0 | |||
| e371af3706 | |||
| 3f640307f8 |
95
package-lock.json
generated
95
package-lock.json
generated
@@ -14,7 +14,6 @@
|
|||||||
"@tanstack/react-query": "^5.62.7",
|
"@tanstack/react-query": "^5.62.7",
|
||||||
"chart.js": "^4.5.0",
|
"chart.js": "^4.5.0",
|
||||||
"highlight.js": "^11.11.1",
|
"highlight.js": "^11.11.1",
|
||||||
"jszip": "^3.10.1",
|
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-chartjs-2": "^5.3.0",
|
"react-chartjs-2": "^5.3.0",
|
||||||
"react-dom": "^19.1.0",
|
"react-dom": "^19.1.0",
|
||||||
@@ -1707,12 +1706,6 @@
|
|||||||
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
|
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/core-util-is": {
|
|
||||||
"version": "1.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
|
||||||
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/cross-spawn": {
|
"node_modules/cross-spawn": {
|
||||||
"version": "7.0.6",
|
"version": "7.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||||
@@ -2427,12 +2420,6 @@
|
|||||||
"node": ">= 4"
|
"node": ">= 4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/immediate": {
|
|
||||||
"version": "3.0.6",
|
|
||||||
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
|
|
||||||
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/imurmurhash": {
|
"node_modules/imurmurhash": {
|
||||||
"version": "0.1.4",
|
"version": "0.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
|
||||||
@@ -2442,12 +2429,6 @@
|
|||||||
"node": ">=0.8.19"
|
"node": ">=0.8.19"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/inherits": {
|
|
||||||
"version": "2.0.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
|
||||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
|
||||||
"license": "ISC"
|
|
||||||
},
|
|
||||||
"node_modules/is-binary-path": {
|
"node_modules/is-binary-path": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
@@ -2507,12 +2488,6 @@
|
|||||||
"node": ">=0.12.0"
|
"node": ">=0.12.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/isarray": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
|
||||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/jiti": {
|
"node_modules/jiti": {
|
||||||
"version": "2.5.1",
|
"version": "2.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
|
||||||
@@ -2556,27 +2531,6 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/jszip": {
|
|
||||||
"version": "3.10.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
|
|
||||||
"integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
|
|
||||||
"license": "(MIT OR GPL-3.0-or-later)",
|
|
||||||
"dependencies": {
|
|
||||||
"lie": "~3.3.0",
|
|
||||||
"pako": "~1.0.2",
|
|
||||||
"readable-stream": "~2.3.6",
|
|
||||||
"setimmediate": "^1.0.5"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/lie": {
|
|
||||||
"version": "3.3.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
|
|
||||||
"integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"immediate": "~3.0.5"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/lilconfig": {
|
"node_modules/lilconfig": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
||||||
@@ -2749,12 +2703,6 @@
|
|||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/pako": {
|
|
||||||
"version": "1.0.11",
|
|
||||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
|
||||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
|
|
||||||
"license": "(MIT AND Zlib)"
|
|
||||||
},
|
|
||||||
"node_modules/path-parse": {
|
"node_modules/path-parse": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
@@ -2971,12 +2919,6 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/process-nextick-args": {
|
|
||||||
"version": "2.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
|
||||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/react": {
|
"node_modules/react": {
|
||||||
"version": "19.1.1",
|
"version": "19.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
|
||||||
@@ -3087,21 +3029,6 @@
|
|||||||
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/readable-stream": {
|
|
||||||
"version": "2.3.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
|
|
||||||
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"core-util-is": "~1.0.0",
|
|
||||||
"inherits": "~2.0.3",
|
|
||||||
"isarray": "~1.0.0",
|
|
||||||
"process-nextick-args": "~2.0.0",
|
|
||||||
"safe-buffer": "~5.1.1",
|
|
||||||
"string_decoder": "~1.1.1",
|
|
||||||
"util-deprecate": "~1.0.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/readdirp": {
|
"node_modules/readdirp": {
|
||||||
"version": "3.6.0",
|
"version": "3.6.0",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
@@ -3142,12 +3069,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/safe-buffer": {
|
|
||||||
"version": "5.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
|
||||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/scheduler": {
|
"node_modules/scheduler": {
|
||||||
"version": "0.26.0",
|
"version": "0.26.0",
|
||||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
|
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
|
||||||
@@ -3161,26 +3082,11 @@
|
|||||||
"semver": "bin/semver.js"
|
"semver": "bin/semver.js"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/setimmediate": {
|
|
||||||
"version": "1.0.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
|
|
||||||
"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/shallowequal": {
|
"node_modules/shallowequal": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
|
||||||
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
|
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
|
||||||
},
|
},
|
||||||
"node_modules/string_decoder": {
|
|
||||||
"version": "1.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
|
||||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"safe-buffer": "~5.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/string-width-cjs": {
|
"node_modules/string-width-cjs": {
|
||||||
"name": "string-width",
|
"name": "string-width",
|
||||||
"version": "4.2.3",
|
"version": "4.2.3",
|
||||||
@@ -3821,6 +3727,7 @@
|
|||||||
},
|
},
|
||||||
"node_modules/util-deprecate": {
|
"node_modules/util-deprecate": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
|
|||||||
@@ -16,7 +16,6 @@
|
|||||||
"@tanstack/react-query": "^5.62.7",
|
"@tanstack/react-query": "^5.62.7",
|
||||||
"chart.js": "^4.5.0",
|
"chart.js": "^4.5.0",
|
||||||
"highlight.js": "^11.11.1",
|
"highlight.js": "^11.11.1",
|
||||||
"jszip": "^3.10.1",
|
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-chartjs-2": "^5.3.0",
|
"react-chartjs-2": "^5.3.0",
|
||||||
"react-dom": "^19.1.0",
|
"react-dom": "^19.1.0",
|
||||||
|
|||||||
@@ -312,72 +312,6 @@ export default function Admin() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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 */}
|
{/* 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"
|
<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"
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import React, { useEffect, useState, useLayoutEffect, useRef } from 'react';
|
import React, { useEffect, useState, useLayoutEffect, useRef } from 'react';
|
||||||
import { fetchWithAuth, postWithAuth, postFormDataWithAuth } from '../fetchWithAuth';
|
import { fetchWithAuth, postWithAuth } from '../fetchWithAuth';
|
||||||
import JSZip from 'jszip';
|
|
||||||
// Animación fade-in/slide-up para bloques
|
// Animación fade-in/slide-up para bloques
|
||||||
const fadeInSlideUp = `@keyframes fadein-slideup { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }`;
|
const fadeInSlideUp = `@keyframes fadein-slideup { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }`;
|
||||||
if (typeof document !== 'undefined' && !document.getElementById('fadein-slideup-documents')) {
|
if (typeof document !== 'undefined' && !document.getElementById('fadein-slideup-documents')) {
|
||||||
@@ -43,7 +42,6 @@ const downloadFile = async (id, filename = 'archivo', setSuccess, setError, show
|
|||||||
|
|
||||||
export default function Documents() {
|
export default function Documents() {
|
||||||
const focusKeeperRef = useRef(null);
|
const focusKeeperRef = useRef(null);
|
||||||
const fileInputRef = useRef(null);
|
|
||||||
const [success, setSuccess] = useState('');
|
const [success, setSuccess] = useState('');
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [itemsPerPage, setItemsPerPage] = useState(10);
|
const [itemsPerPage, setItemsPerPage] = useState(10);
|
||||||
@@ -68,23 +66,6 @@ export default function Documents() {
|
|||||||
// Estado para modal de confirmación de eliminación
|
// Estado para modal de confirmación de eliminación
|
||||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
|
|
||||||
// Estados para subir expedientes
|
|
||||||
const [showUploadModal, setShowUploadModal] = useState(false);
|
|
||||||
const [selectedFiles, setSelectedFiles] = useState([]);
|
|
||||||
const [uploadType, setUploadType] = useState('folders'); // 'folders', 'zip', 'rar'
|
|
||||||
const [uploadingFiles, setUploadingFiles] = useState(false);
|
|
||||||
const [isUploading, setIsUploading] = useState(false);
|
|
||||||
const [uploadProgress, setUploadProgress] = useState(0);
|
|
||||||
const [isCompressing, setIsCompressing] = useState(false);
|
|
||||||
const [compressionProgress, setCompressionProgress] = useState(0);
|
|
||||||
const [validationErrors, setValidationErrors] = useState([]);
|
|
||||||
const [importadores, setImportadores] = useState([]);
|
|
||||||
const [selectedContributor, setSelectedContributor] = useState('');
|
|
||||||
const [loadingContributors, setLoadingContributors] = useState(false);
|
|
||||||
|
|
||||||
// Estado para agendar todo
|
|
||||||
const [isScheduling, setIsScheduling] = useState(false);
|
|
||||||
|
|
||||||
// Estado para controlar la animación de entrada
|
// Estado para controlar la animación de entrada
|
||||||
const [showAnimation, setShowAnimation] = useState(false);
|
const [showAnimation, setShowAnimation] = useState(false);
|
||||||
const [hasAnimated, setHasAnimated] = useState(false);
|
const [hasAnimated, setHasAnimated] = useState(false);
|
||||||
@@ -274,263 +255,6 @@ export default function Documents() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Funciones para subir expedientes
|
|
||||||
const fetchImportadores = async () => {
|
|
||||||
if (importadores.length > 0) return; // Ya están cargados
|
|
||||||
|
|
||||||
setLoadingContributors(true);
|
|
||||||
try {
|
|
||||||
const response = await fetchWithAuth(`${API_URL}/customs/importadores/`);
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
// La API devuelve directamente el array, no un objeto con results
|
|
||||||
setImportadores(Array.isArray(data) ? data : []);
|
|
||||||
} else {
|
|
||||||
throw new Error('Error al cargar importadores');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading importadores:', error);
|
|
||||||
showMessage('Error al cargar la lista de importadores', 'error');
|
|
||||||
} finally {
|
|
||||||
setLoadingContributors(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFileSelect = (event) => {
|
|
||||||
const files = Array.from(event.target.files);
|
|
||||||
setSelectedFiles(files);
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateFolderNomenclature = (files) => {
|
|
||||||
// Patrón flexible: [AÑO(2 dígitos opcional)]-[ADUANA(2-3 dígitos)]-[PATENTE(4 dígitos)]-[PEDIMENTO(7 dígitos)]
|
|
||||||
// El año puede estar presente o ausente, si está presente debe ser 2 dígitos
|
|
||||||
// La aduana puede ser 2 o 3 dígitos
|
|
||||||
const pattern = /^(\d{2}-)?(\d{2,3})-(\d{4})-(\d{7})$/;
|
|
||||||
const invalidFolders = [];
|
|
||||||
|
|
||||||
for (const file of files) {
|
|
||||||
const pathParts = file.webkitRelativePath.split('/');
|
|
||||||
if (pathParts.length > 1) {
|
|
||||||
const folderName = pathParts[0];
|
|
||||||
if (!pattern.test(folderName)) {
|
|
||||||
invalidFolders.push(folderName);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return invalidFolders;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Función para comprimir carpetas en ZIP
|
|
||||||
const compressFoldersToZip = async (files) => {
|
|
||||||
const zip = new JSZip();
|
|
||||||
const folderGroups = {};
|
|
||||||
|
|
||||||
// Agrupar archivos por carpeta
|
|
||||||
files.forEach(file => {
|
|
||||||
const pathParts = file.webkitRelativePath.split('/');
|
|
||||||
const folderName = pathParts[0];
|
|
||||||
|
|
||||||
if (!folderGroups[folderName]) {
|
|
||||||
folderGroups[folderName] = [];
|
|
||||||
}
|
|
||||||
folderGroups[folderName].push(file);
|
|
||||||
});
|
|
||||||
|
|
||||||
const folderNames = Object.keys(folderGroups);
|
|
||||||
const compressedFiles = [];
|
|
||||||
|
|
||||||
setIsCompressing(true);
|
|
||||||
setCompressionProgress(0);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Comprimir cada carpeta individualmente
|
|
||||||
for (let i = 0; i < folderNames.length; i++) {
|
|
||||||
const folderName = folderNames[i];
|
|
||||||
const folderFiles = folderGroups[folderName];
|
|
||||||
|
|
||||||
const folderZip = new JSZip();
|
|
||||||
|
|
||||||
// Agregar archivos al ZIP de la carpeta
|
|
||||||
folderFiles.forEach(file => {
|
|
||||||
// Mantener la estructura de subcarpetas dentro de la carpeta principal
|
|
||||||
const relativePath = file.webkitRelativePath.substring(folderName.length + 1);
|
|
||||||
folderZip.file(relativePath, file);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Generar el ZIP de la carpeta
|
|
||||||
const zipBlob = await folderZip.generateAsync(
|
|
||||||
{ type: "blob" },
|
|
||||||
(metadata) => {
|
|
||||||
// Actualizar progreso de compresión
|
|
||||||
const folderProgress = metadata.percent;
|
|
||||||
const totalProgress = ((i * 100) + folderProgress) / folderNames.length;
|
|
||||||
setCompressionProgress(Math.round(totalProgress));
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// Crear un archivo File a partir del blob
|
|
||||||
const zipFile = new File([zipBlob], `${folderName}.zip`, { type: 'application/zip' });
|
|
||||||
compressedFiles.push(zipFile);
|
|
||||||
}
|
|
||||||
|
|
||||||
return compressedFiles;
|
|
||||||
} finally {
|
|
||||||
setIsCompressing(false);
|
|
||||||
setCompressionProgress(0);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Función para manejar la selección de archivos
|
|
||||||
const handleFileSelection = (event) => {
|
|
||||||
const files = Array.from(event.target.files);
|
|
||||||
|
|
||||||
if (uploadType === 'folders') {
|
|
||||||
// Para carpetas, agregar a los archivos existentes (acumular)
|
|
||||||
setSelectedFiles(prevFiles => [...prevFiles, ...files]);
|
|
||||||
setValidationErrors([]);
|
|
||||||
|
|
||||||
// Validar nomenclatura de todas las carpetas después de agregar
|
|
||||||
setTimeout(() => {
|
|
||||||
setSelectedFiles(currentFiles => {
|
|
||||||
const invalidFolders = validateFolderNomenclature(currentFiles);
|
|
||||||
if (invalidFolders.length > 0) {
|
|
||||||
setValidationErrors([
|
|
||||||
`Las siguientes carpetas no siguen la nomenclatura correcta ([AÑO]-ADUANA-PATENTE-PEDIMENTO): ${invalidFolders.join(', ')}`
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
return currentFiles;
|
|
||||||
});
|
|
||||||
}, 100);
|
|
||||||
} else {
|
|
||||||
// Para ZIP/RAR, también permitir acumular múltiples archivos
|
|
||||||
setSelectedFiles(prevFiles => [...prevFiles, ...files]);
|
|
||||||
setValidationErrors([]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Limpiar el input para permitir seleccionar la misma carpeta nuevamente
|
|
||||||
event.target.value = '';
|
|
||||||
};
|
|
||||||
|
|
||||||
// Función para eliminar una carpeta específica
|
|
||||||
const removeFolderFromSelection = (folderNameToRemove) => {
|
|
||||||
setSelectedFiles(prevFiles =>
|
|
||||||
prevFiles.filter(file => !file.webkitRelativePath.startsWith(folderNameToRemove + '/'))
|
|
||||||
);
|
|
||||||
setValidationErrors([]);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Función para eliminar un archivo específico (ZIP/RAR)
|
|
||||||
const removeFileFromSelection = (fileIndex) => {
|
|
||||||
setSelectedFiles(prevFiles =>
|
|
||||||
prevFiles.filter((_, index) => index !== fileIndex)
|
|
||||||
);
|
|
||||||
setValidationErrors([]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUploadFiles = async () => {
|
|
||||||
if (!selectedContributor) {
|
|
||||||
showMessage('Por favor selecciona un importador', 'warning');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedFiles.length === 0) {
|
|
||||||
showMessage('Por favor selecciona al menos un archivo', 'warning');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Validar nomenclatura si es tipo carpeta
|
|
||||||
if (uploadType === 'folders') {
|
|
||||||
const invalidFolders = validateFolderNomenclature(selectedFiles);
|
|
||||||
if (invalidFolders.length > 0) {
|
|
||||||
setValidationErrors([
|
|
||||||
`Las siguientes carpetas no siguen la nomenclatura correcta ([AÑO]-ADUANA-PATENTE-PEDIMENTO): ${invalidFolders.join(', ')}`
|
|
||||||
]);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsUploading(true);
|
|
||||||
setUploadProgress(0);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const formData = new FormData();
|
|
||||||
|
|
||||||
formData.append('contribuyente', selectedContributor);
|
|
||||||
|
|
||||||
let filesToUpload = selectedFiles;
|
|
||||||
|
|
||||||
// Comprimir carpetas automáticamente
|
|
||||||
if (uploadType === 'folders') {
|
|
||||||
showMessage('Comprimiendo carpetas...', 'info');
|
|
||||||
filesToUpload = await compressFoldersToZip(selectedFiles);
|
|
||||||
formData.append('tipo', 'zip'); // Cambiar tipo a zip después de comprimir
|
|
||||||
} else {
|
|
||||||
formData.append('tipo', uploadType);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Agregar archivos al FormData
|
|
||||||
if (uploadType === 'folders') {
|
|
||||||
// Para carpetas comprimidas, agregar como múltiples archivos ZIP
|
|
||||||
filesToUpload.forEach((file, index) => {
|
|
||||||
formData.append(`archivos`, file);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Para ZIP/RAR múltiples, agregar cada archivo
|
|
||||||
filesToUpload.forEach((file, index) => {
|
|
||||||
formData.append(`archivos`, file);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const fileCount = uploadType === 'folders' ? filesToUpload.length : selectedFiles.length;
|
|
||||||
showMessage(`Subiendo ${fileCount} archivo(s)...`, 'info');
|
|
||||||
|
|
||||||
const uploadEndpoint = `${API_URL}/customs/pedimentos/bulk-create/`;
|
|
||||||
const result = await postFormDataWithAuth(uploadEndpoint, formData);
|
|
||||||
|
|
||||||
showMessage(
|
|
||||||
`${result.uploaded_count || fileCount} archivo(s) subido(s) exitosamente`,
|
|
||||||
'success'
|
|
||||||
);
|
|
||||||
|
|
||||||
// Limpiar archivos seleccionados y cerrar modal
|
|
||||||
setSelectedFiles([]);
|
|
||||||
setSelectedContributor('');
|
|
||||||
setUploadProgress(0);
|
|
||||||
setCompressionProgress(0);
|
|
||||||
setValidationErrors([]);
|
|
||||||
setShowUploadModal(false);
|
|
||||||
|
|
||||||
// Refrescar la lista
|
|
||||||
refetch();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error durante la subida:', error);
|
|
||||||
showMessage(`Error durante la subida: ${error.message}`, 'error');
|
|
||||||
} finally {
|
|
||||||
setIsUploading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Función para agendar todo
|
|
||||||
const handleScheduleAll = async () => {
|
|
||||||
setIsScheduling(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const endpoint = `${API_URL}/customs/auditor/procesar-pedimentos/organizaciones/`;
|
|
||||||
const result = await postWithAuth(endpoint, {});
|
|
||||||
|
|
||||||
showMessage('Pedimentos agendados exitosamente', 'success');
|
|
||||||
|
|
||||||
// Refrescar la lista después de agendar
|
|
||||||
refetch();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error al agendar pedimentos:', error);
|
|
||||||
showMessage(`Error al agendar pedimentos: ${error.message}`, 'error');
|
|
||||||
} finally {
|
|
||||||
setIsScheduling(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Actualizar isSelectAll cuando cambia la selección
|
// Actualizar isSelectAll cuando cambia la selección
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentDocuments.length > 0) {
|
if (currentDocuments.length > 0) {
|
||||||
@@ -826,35 +550,6 @@ export default function Documents() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setShowUploadModal(true);
|
|
||||||
fetchImportadores();
|
|
||||||
}}
|
|
||||||
className="inline-flex items-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 transform hover:scale-105 shadow-lg"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
|
||||||
</svg>
|
|
||||||
Agregar Expedientes
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleScheduleAll}
|
|
||||||
disabled={isScheduling}
|
|
||||||
className="inline-flex items-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-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 transform hover:scale-105 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
|
|
||||||
>
|
|
||||||
{isScheduling ? (
|
|
||||||
<svg className="w-4 h-4 mr-2 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="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
{isScheduling ? 'Agendando...' : 'Agendar Todo'}
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
onClick={refetch}
|
onClick={refetch}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
@@ -867,7 +562,7 @@ export default function Documents() {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {}}
|
onClick={() => {}}
|
||||||
className="inline-flex items-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-200 transform hover:scale-105 shadow-lg"
|
className="inline-flex items-center px-4 py-2.5 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 transform hover:scale-105 shadow-lg"
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||||
@@ -1251,373 +946,6 @@ export default function Documents() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Modal de subida de expedientes */}
|
|
||||||
{showUploadModal && (
|
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
|
||||||
<div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full mx-4 transform transition-all duration-300 scale-100 max-h-[90vh] flex flex-col">
|
|
||||||
{/* Header del modal */}
|
|
||||||
<div className="px-6 py-4 border-b border-gray-200 flex-shrink-0">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="bg-blue-100 rounded-full p-3">
|
|
||||||
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900">Subir Expedientes</h3>
|
|
||||||
<p className="text-sm text-gray-600">Selecciona archivos, carpetas o ZIP</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setShowUploadModal(false);
|
|
||||||
setSelectedFiles([]);
|
|
||||||
setUploadProgress(0);
|
|
||||||
setIsUploading(false);
|
|
||||||
setValidationErrors([]);
|
|
||||||
}}
|
|
||||||
className="text-gray-400 hover:text-gray-600 transition-colors duration-200"
|
|
||||||
>
|
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contenido del modal - con scroll */}
|
|
||||||
<div className="flex-1 overflow-y-auto px-6 py-4 min-h-0">
|
|
||||||
{/* Selector de tipo de subida */}
|
|
||||||
<div className="mb-4">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Tipo de subida
|
|
||||||
</label>
|
|
||||||
<div className="grid grid-cols-3 gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => setUploadType('folders')}
|
|
||||||
className={`p-3 rounded-lg border text-sm font-medium transition-all duration-200 ${
|
|
||||||
uploadType === 'folders'
|
|
||||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
|
||||||
: 'border-gray-300 bg-white text-gray-700 hover:border-gray-400'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<svg className="w-5 h-5 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
|
||||||
</svg>
|
|
||||||
Carpeta
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setUploadType('zip')}
|
|
||||||
className={`p-3 rounded-lg border text-sm font-medium transition-all duration-200 ${
|
|
||||||
uploadType === 'zip'
|
|
||||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
|
||||||
: 'border-gray-300 bg-white text-gray-700 hover:border-gray-400'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<svg className="w-5 h-5 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 12l2 2 4-4" />
|
|
||||||
</svg>
|
|
||||||
ZIP
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setUploadType('rar')}
|
|
||||||
className={`p-3 rounded-lg border text-sm font-medium transition-all duration-200 ${
|
|
||||||
uploadType === 'rar'
|
|
||||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
|
||||||
: 'border-gray-300 bg-white text-gray-700 hover:border-gray-400'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<svg className="w-5 h-5 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
|
||||||
</svg>
|
|
||||||
RAR
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Área de selección de archivos */}
|
|
||||||
<div className="mb-4">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
{uploadType === 'folders' && 'Seleccionar carpetas'}
|
|
||||||
{uploadType === 'zip' && 'Seleccionar archivos ZIP'}
|
|
||||||
{uploadType === 'rar' && 'Seleccionar archivos RAR'}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{uploadType === 'folders' ? (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors duration-200">
|
|
||||||
<svg className="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
|
||||||
</svg>
|
|
||||||
<p className="text-sm text-gray-600 mb-3">
|
|
||||||
Selecciona una carpeta. Después puedes hacer clic nuevamente para agregar más carpetas.
|
|
||||||
</p>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={fileInputRef}
|
|
||||||
onChange={handleFileSelection}
|
|
||||||
multiple
|
|
||||||
webkitdirectory="true"
|
|
||||||
className="hidden"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={() => fileInputRef.current?.click()}
|
|
||||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
||||||
</svg>
|
|
||||||
Agregar Carpeta
|
|
||||||
{selectedFiles.length > 0 && (
|
|
||||||
<span className="ml-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full">
|
|
||||||
{[...new Set(selectedFiles.map(file => file.webkitRelativePath.split('/')[0]))].length}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Lista de carpetas seleccionadas - con altura máxima y scroll */}
|
|
||||||
{selectedFiles.length > 0 && (
|
|
||||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
|
||||||
<h4 className="text-sm font-medium text-gray-700 mb-2">Carpetas seleccionadas:</h4>
|
|
||||||
<div className="max-h-40 overflow-y-auto space-y-2">
|
|
||||||
{[...new Set(selectedFiles.map(file => file.webkitRelativePath.split('/')[0]))].map((folderName, index) => (
|
|
||||||
<div key={index} className="flex items-center justify-between bg-white p-3 rounded border">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg className="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
|
||||||
</svg>
|
|
||||||
<span className="text-sm font-medium">{folderName}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{selectedFiles.filter(file => file.webkitRelativePath.startsWith(folderName + '/')).length} archivos
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={() => removeFolderFromSelection(folderName)}
|
|
||||||
className="text-red-500 hover:text-red-700 p-1"
|
|
||||||
title="Eliminar carpeta"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedFiles([])}
|
|
||||||
className="mt-3 text-sm text-red-600 hover:text-red-800"
|
|
||||||
>
|
|
||||||
Limpiar todas las carpetas
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors duration-200">
|
|
||||||
<svg className="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
|
||||||
</svg>
|
|
||||||
<p className="text-sm text-gray-600 mb-3">
|
|
||||||
{uploadType === 'zip' && 'Selecciona archivos ZIP. Puedes hacer clic nuevamente para agregar más archivos.'}
|
|
||||||
{uploadType === 'rar' && 'Selecciona archivos RAR. Puedes hacer clic nuevamente para agregar más archivos.'}
|
|
||||||
</p>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={fileInputRef}
|
|
||||||
onChange={handleFileSelection}
|
|
||||||
accept={uploadType === 'zip' ? '.zip' : '.rar'}
|
|
||||||
multiple
|
|
||||||
className="hidden"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={() => fileInputRef.current?.click()}
|
|
||||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
||||||
</svg>
|
|
||||||
Agregar {uploadType === 'zip' ? 'ZIP' : 'RAR'}
|
|
||||||
{selectedFiles.length > 0 && (
|
|
||||||
<span className="ml-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full">
|
|
||||||
{selectedFiles.length}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Lista de archivos seleccionados */}
|
|
||||||
{selectedFiles.length > 0 && (
|
|
||||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
|
||||||
<h4 className="text-sm font-medium text-gray-700 mb-2">Archivos seleccionados:</h4>
|
|
||||||
<div className="max-h-40 overflow-y-auto space-y-2">
|
|
||||||
{selectedFiles.map((file, index) => (
|
|
||||||
<div key={index} className="flex items-center justify-between bg-white p-3 rounded border">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg className="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
||||||
</svg>
|
|
||||||
<span className="text-sm font-medium">{file.name}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{(file.size / 1024 / 1024).toFixed(2)} MB
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={() => removeFileFromSelection(index)}
|
|
||||||
className="text-red-500 hover:text-red-700 p-1"
|
|
||||||
title="Eliminar archivo"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedFiles([])}
|
|
||||||
className="mt-3 text-sm text-red-600 hover:text-red-800"
|
|
||||||
>
|
|
||||||
Limpiar todos los archivos
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Selector de contribuyente */}
|
|
||||||
<div className="mb-4">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Contribuyente
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={selectedContributor}
|
|
||||||
onChange={(e) => setSelectedContributor(e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
disabled={loadingContributors}
|
|
||||||
>
|
|
||||||
<option value="">Seleccionar contribuyente</option>
|
|
||||||
{importadores.map((imp) => (
|
|
||||||
<option key={imp.rfc} value={imp.rfc}>
|
|
||||||
{imp.rfc}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{loadingContributors && (
|
|
||||||
<p className="text-sm text-gray-500 mt-1">Cargando contribuyentes...</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Errores de validación */}
|
|
||||||
{validationErrors.length > 0 && (
|
|
||||||
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
|
|
||||||
<div className="flex items-center gap-2 mb-2">
|
|
||||||
<svg className="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
<span className="text-sm font-medium text-red-800">Errores de validación:</span>
|
|
||||||
</div>
|
|
||||||
<ul className="text-sm text-red-700 space-y-1">
|
|
||||||
{validationErrors.map((error, index) => (
|
|
||||||
<li key={index}>• {error}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Información de nomenclatura */}
|
|
||||||
{uploadType === 'folders' && (
|
|
||||||
<div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
|
|
||||||
<div className="flex items-center gap-2 mb-2">
|
|
||||||
<svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
<span className="text-sm font-medium text-blue-800">Nomenclatura de carpetas:</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-blue-700">
|
|
||||||
Las carpetas deben seguir el formato: <strong>[AÑO]-ADUANA-PATENTE-PEDIMENTO</strong>
|
|
||||||
<br />
|
|
||||||
• AÑO: 2 dígitos (opcional, ej: 24-)
|
|
||||||
<br />
|
|
||||||
• ADUANA: 2 o 3 dígitos (ej: 01, 001)
|
|
||||||
<br />
|
|
||||||
• PATENTE: 4 dígitos (ej: 3206)
|
|
||||||
<br />
|
|
||||||
• PEDIMENTO: 7 dígitos (ej: 1234567)
|
|
||||||
<br />
|
|
||||||
<strong>Ejemplos válidos:</strong> <em>24-01-3206-1234567</em>, <em>001-3206-1234567</em>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Barras de progreso */}
|
|
||||||
{isCompressing && (
|
|
||||||
<div className="mb-4">
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<span className="text-sm font-medium text-gray-700">Comprimiendo carpetas...</span>
|
|
||||||
<span className="text-sm text-gray-500">{compressionProgress}%</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
||||||
<div
|
|
||||||
className="bg-green-600 h-2 rounded-full transition-all duration-300"
|
|
||||||
style={{ width: `${compressionProgress}%` }}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isUploading && (
|
|
||||||
<div className="mb-4">
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<span className="text-sm font-medium text-gray-700">Subiendo...</span>
|
|
||||||
<span className="text-sm text-gray-500">{uploadProgress}%</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
||||||
<div
|
|
||||||
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
|
||||||
style={{ width: `${uploadProgress}%` }}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer del modal - fijo */}
|
|
||||||
<div className="flex-shrink-0 px-6 py-4 border-t border-gray-200 flex gap-3 justify-end">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setShowUploadModal(false);
|
|
||||||
setSelectedFiles([]);
|
|
||||||
setUploadProgress(0);
|
|
||||||
setCompressionProgress(0);
|
|
||||||
setIsUploading(false);
|
|
||||||
setIsCompressing(false);
|
|
||||||
setValidationErrors([]);
|
|
||||||
}}
|
|
||||||
disabled={isUploading || isCompressing}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleUploadFiles}
|
|
||||||
disabled={isUploading || isCompressing || selectedFiles.length === 0 || !selectedContributor || validationErrors.length > 0}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{isCompressing ? 'Comprimiendo...' : isUploading ? 'Subiendo...' : 'Subir expedientes'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Modal de confirmación para eliminación */}
|
{/* Modal de confirmación para eliminación */}
|
||||||
{showDeleteModal && (
|
{showDeleteModal && (
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ import xml from 'highlight.js/lib/languages/xml';
|
|||||||
import 'highlight.js/styles/github.css';
|
import 'highlight.js/styles/github.css';
|
||||||
hljs.registerLanguage('xml', xml);
|
hljs.registerLanguage('xml', xml);
|
||||||
import { fetchPedimentoDocuments } from '../api/pedimentoDocuments';
|
import { fetchPedimentoDocuments } from '../api/pedimentoDocuments';
|
||||||
import { fetchWithAuth, postWithAuth, putWithAuth, postFormDataWithAuth } from '../fetchWithAuth';
|
import { fetchWithAuth, postWithAuth, putWithAuth } from '../fetchWithAuth';
|
||||||
import { fetchTasks } from '../api/procesos.ts';
|
import { fetchTasks } from '../api/procesos.ts';
|
||||||
import { fetchPedimentoCoves, downloadCove, downloadAcuseCove } from '../api/coves';
|
import { fetchPedimentoCoves, downloadCove, downloadAcuseCove } from '../api/coves';
|
||||||
import { fetchPedimentoEdocuments, downloadEdocument, downloadAcuseEdocument } from '../api/edocuments';
|
import { fetchPedimentoEdocuments, downloadEdocument, downloadAcuseEdocument } from '../api/edocuments';
|
||||||
@@ -131,11 +131,6 @@ export default function PedimentoDetail() {
|
|||||||
const [selectedDocuments, setSelectedDocuments] = useState([]);
|
const [selectedDocuments, setSelectedDocuments] = useState([]);
|
||||||
const [isSelectAllDocs, setIsSelectAllDocs] = useState(false);
|
const [isSelectAllDocs, setIsSelectAllDocs] = useState(false);
|
||||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
const [showUploadModal, setShowUploadModal] = useState(false);
|
|
||||||
|
|
||||||
// Estados para subir documentos
|
|
||||||
const [selectedFiles, setSelectedFiles] = useState([]);
|
|
||||||
const [uploadingDocuments, setUploadingDocuments] = useState(false);
|
|
||||||
|
|
||||||
const [dashboardSummary, setDashboardSummary] = useState(null);
|
const [dashboardSummary, setDashboardSummary] = useState(null);
|
||||||
const [showFilters, setShowFilters] = useState(false);
|
const [showFilters, setShowFilters] = useState(false);
|
||||||
@@ -678,56 +673,6 @@ export default function PedimentoDetail() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Funciones para subir documentos
|
|
||||||
const handleFileSelect = (event) => {
|
|
||||||
const files = Array.from(event.target.files);
|
|
||||||
setSelectedFiles(files);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUploadDocuments = async () => {
|
|
||||||
if (selectedFiles.length === 0) {
|
|
||||||
showMessage('Por favor selecciona al menos un archivo', 'warning');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setUploadingDocuments(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const formData = new FormData();
|
|
||||||
|
|
||||||
// Agregar el ID del pedimento
|
|
||||||
formData.append('pedimento_id', id);
|
|
||||||
|
|
||||||
// Agregar archivos al FormData
|
|
||||||
selectedFiles.forEach((file) => {
|
|
||||||
formData.append('files', file);
|
|
||||||
});
|
|
||||||
|
|
||||||
showMessage(`Subiendo ${selectedFiles.length} archivo(s)...`, 'info');
|
|
||||||
|
|
||||||
const result = await postFormDataWithAuth(`${API_URL}/record/documents/bulk-upload/`, formData);
|
|
||||||
|
|
||||||
showMessage(
|
|
||||||
`${result.uploaded_count || selectedFiles.length} archivo(s) subido(s) exitosamente`,
|
|
||||||
'success'
|
|
||||||
);
|
|
||||||
|
|
||||||
// Limpiar archivos seleccionados y cerrar modal
|
|
||||||
setSelectedFiles([]);
|
|
||||||
setShowUploadModal(false);
|
|
||||||
|
|
||||||
// Forzar recarga de documentos
|
|
||||||
const currentPage = page;
|
|
||||||
setPage(0);
|
|
||||||
setTimeout(() => setPage(currentPage), 100);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error durante la subida:', error);
|
|
||||||
showMessage(`Error durante la subida: ${error.message}`, 'error');
|
|
||||||
} finally {
|
|
||||||
setUploadingDocuments(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Efecto para actualizar isSelectAllDocs cuando cambia la selección
|
// Efecto para actualizar isSelectAllDocs cuando cambia la selección
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (documents.length > 0) {
|
if (documents.length > 0) {
|
||||||
@@ -1579,6 +1524,65 @@ export default function PedimentoDetail() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Funciones para procesar peticiones
|
// 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) => {
|
const handleCoveRequest = async (cove) => {
|
||||||
console.log('Request cove:', cove);
|
console.log('Request cove:', cove);
|
||||||
showMessage(`Procesando petición para COVE #${cove.numero_cove}...`, 'info');
|
showMessage(`Procesando petición para COVE #${cove.numero_cove}...`, 'info');
|
||||||
@@ -2137,22 +2141,7 @@ export default function PedimentoDetail() {
|
|||||||
</div>
|
</div>
|
||||||
</button>
|
</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
|
<button
|
||||||
onClick={() => handleTabChange('auditor')}
|
onClick={() => handleTabChange('auditor')}
|
||||||
@@ -2188,58 +2177,45 @@ export default function PedimentoDetail() {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
{documents.length > 0 && (
|
||||||
<button
|
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
||||||
onClick={() => setShowUploadModal(true)}
|
<button
|
||||||
className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
onClick={downloadAll}
|
||||||
>
|
disabled={downloadingAll}
|
||||||
<svg className="w-4 h-4 mr-1 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
>
|
||||||
</svg>
|
{downloadingAll ? (
|
||||||
<span className="hidden sm:inline">Subir Documentos</span>
|
<>
|
||||||
<span className="sm:hidden">Subir</span>
|
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
</button>
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
<span className="hidden sm:inline">Descargando...</span>
|
||||||
|
<span className="sm:hidden">Descargando...</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<svg className="w-4 h-4 mr-1 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||||
|
</svg>
|
||||||
|
<span className="hidden sm:inline">Descargar Todos</span>
|
||||||
|
<span className="sm:hidden">Descargar</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
{documents.length > 0 && (
|
<button
|
||||||
<>
|
onClick={() => setShowFilters(!showFilters)}
|
||||||
<button
|
className="inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||||
onClick={downloadAll}
|
>
|
||||||
disabled={downloadingAll}
|
<svg className="w-4 h-4 mr-1 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
className="inline-flex items-center justify-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" />
|
||||||
>
|
</svg>
|
||||||
{downloadingAll ? (
|
<span className="hidden sm:inline">{showFilters ? 'Ocultar Filtros' : 'Mostrar Filtros'}</span>
|
||||||
<>
|
<span className="sm:hidden">Filtros</span>
|
||||||
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
</button>
|
||||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
</div>
|
||||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
)}
|
||||||
</svg>
|
|
||||||
<span className="hidden sm:inline">Descargando...</span>
|
|
||||||
<span className="sm:hidden">Descargando...</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<svg className="w-4 h-4 mr-1 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
||||||
</svg>
|
|
||||||
<span className="hidden sm:inline">Descargar Todos</span>
|
|
||||||
<span className="sm:hidden">Descargar</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => setShowFilters(!showFilters)}
|
|
||||||
className="inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4 mr-1 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" />
|
|
||||||
</svg>
|
|
||||||
<span className="hidden sm:inline">{showFilters ? 'Ocultar Filtros' : 'Mostrar Filtros'}</span>
|
|
||||||
<span className="sm:hidden">Filtros</span>
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Filtros expandibles */}
|
{/* Filtros expandibles */}
|
||||||
@@ -2830,7 +2806,37 @@ export default function PedimentoDetail() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-4">
|
<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-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
<table className="min-w-full divide-y divide-gray-300">
|
<table className="min-w-full divide-y divide-gray-300">
|
||||||
@@ -3025,6 +3031,24 @@ export default function PedimentoDetail() {
|
|||||||
</div>
|
</div>
|
||||||
</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 */}
|
{/* 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 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>
|
<div>
|
||||||
@@ -3298,6 +3322,64 @@ export default function PedimentoDetail() {
|
|||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
{/* Header de la sección */}
|
{/* Header de la sección */}
|
||||||
<div className="mb-6 space-y-4">
|
<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 flex-wrap items-center justify-between gap-4">
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-4">
|
||||||
<h3 className="text-lg font-semibold text-gray-900">
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
@@ -3624,349 +3706,7 @@ export default function PedimentoDetail() {
|
|||||||
</div>
|
</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.task_id}-${index}`} className={`hover:bg-gray-50 ${selectedProcesos.includes(proceso.task_id) ? 'bg-blue-50' : ''}`}>
|
|
||||||
<td className="px-3 py-4">
|
|
||||||
<div className="flex items-center justify-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={selectedProcesos.includes(proceso.task_id)}
|
|
||||||
onChange={(e) => handleSelectProceso(proceso.task_id, e.target.checked)}
|
|
||||||
disabled={proceso.status === 'running' || proceso.status === 'completed'}
|
|
||||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded disabled:opacity-50"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<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.task_id}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-500">
|
|
||||||
{proceso.pedimento_app}
|
|
||||||
</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 ${getTaskStatusColor(proceso.status)}`}>
|
|
||||||
{getTaskStatusLabel(proceso.status)}
|
|
||||||
</span>
|
|
||||||
{proceso.status === 'running' && (
|
|
||||||
<span className="ml-2 inline-flex items-center">
|
|
||||||
<svg className="animate-spin h-4 w-4 text-blue-600" 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>
|
|
||||||
)}
|
|
||||||
</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) */}
|
|
||||||
{isTaskActionable(proceso.status) && (
|
|
||||||
<button
|
|
||||||
onClick={() => handleEjecutarProceso(proceso)}
|
|
||||||
disabled={executingId === proceso.task_id || proceso.status === 'running'}
|
|
||||||
className={`group inline-flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200 ${
|
|
||||||
executingId === proceso.task_id || proceso.status === 'running'
|
|
||||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
|
||||||
: 'text-green-700 bg-green-100 hover:bg-green-200 hover:text-green-800'
|
|
||||||
}`}
|
|
||||||
title={
|
|
||||||
executingId === proceso.task_id ? 'Ejecutando...' :
|
|
||||||
proceso.status === 'running' ? 'En proceso...' :
|
|
||||||
'Ejecutar servicio'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{executingId === proceso.task_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 transition-transform group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M8 5v14l11-7z"/>
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Botón Retry (Reintentar) */}
|
|
||||||
{proceso.status === 'failed' && (
|
|
||||||
<button
|
|
||||||
onClick={() => handlePasarAEspera(proceso)}
|
|
||||||
disabled={changingStateId === proceso.task_id}
|
|
||||||
className={`group inline-flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200 ${
|
|
||||||
changingStateId === proceso.task_id
|
|
||||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
|
||||||
: 'text-yellow-700 bg-yellow-100 hover:bg-yellow-200 hover:text-yellow-800'
|
|
||||||
}`}
|
|
||||||
title={changingStateId === proceso.task_id ? 'Reiniciando...' : 'Reintentar proceso'}
|
|
||||||
>
|
|
||||||
{changingStateId === proceso.task_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 transition-transform group-hover:scale-110" 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' && (
|
{activeTab === 'auditor' && (
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
@@ -3977,102 +3717,6 @@ export default function PedimentoDetail() {
|
|||||||
<h3 className="text-lg sm:text-xl font-semibold text-gray-900">
|
<h3 className="text-lg sm:text-xl font-semibold text-gray-900">
|
||||||
Auditoría del Pedimento
|
Auditoría del Pedimento
|
||||||
</h3>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -4795,109 +4439,6 @@ export default function PedimentoDetail() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Modal para subir documentos */}
|
|
||||||
{showUploadModal && (
|
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
|
||||||
<div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full mx-4 transform transition-all duration-300 scale-100">
|
|
||||||
{/* Header del modal */}
|
|
||||||
<div className="px-6 py-4 border-b border-gray-200">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="bg-green-100 rounded-full p-3">
|
|
||||||
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900">
|
|
||||||
Subir Documentos
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600">Selecciona los archivos a subir</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contenido del modal */}
|
|
||||||
<div className="px-6 py-4">
|
|
||||||
<div className="mb-4">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Seleccionar archivos
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
multiple
|
|
||||||
onChange={handleFileSelect}
|
|
||||||
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{selectedFiles.length > 0 && (
|
|
||||||
<div className="mt-3 p-3 bg-gray-50 rounded-lg">
|
|
||||||
<p className="text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Archivos seleccionados ({selectedFiles.length}):
|
|
||||||
</p>
|
|
||||||
<div className="max-h-32 overflow-y-auto">
|
|
||||||
{selectedFiles.map((file, index) => (
|
|
||||||
<div key={index} className="text-xs text-gray-600 py-1 border-b border-gray-200 last:border-b-0">
|
|
||||||
{file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-3">
|
|
||||||
<div className="flex items-start gap-2">
|
|
||||||
<svg className="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-blue-800">Información</p>
|
|
||||||
<p className="text-sm text-blue-700 mt-1">
|
|
||||||
Los archivos se subirán al pedimento actual. Se aceptan múltiples formatos de archivo.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Botones del modal */}
|
|
||||||
<div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setShowUploadModal(false);
|
|
||||||
setSelectedFiles([]);
|
|
||||||
}}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleUploadDocuments}
|
|
||||||
disabled={selectedFiles.length === 0 || uploadingDocuments}
|
|
||||||
className="px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{uploadingDocuments ? (
|
|
||||||
<>
|
|
||||||
<svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
|
||||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
||||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
||||||
</svg>
|
|
||||||
Subiendo...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
|
||||||
</svg>
|
|
||||||
Subir {selectedFiles.length} archivo{selectedFiles.length !== 1 ? 's' : ''}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Modal de confirmación para eliminación */}
|
{/* Modal de confirmación para eliminación */}
|
||||||
{showDeleteModal && (
|
{showDeleteModal && (
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||||
|
|||||||
@@ -1,4 +1,12 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
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 { fetchWithAuth } from '../fetchWithAuth';
|
||||||
import { useNotification } from '../context/NotificationContext';
|
import { useNotification } from '../context/NotificationContext';
|
||||||
import datastageModelsData from '../data/datastageModels.json';
|
import datastageModelsData from '../data/datastageModels.json';
|
||||||
@@ -34,7 +42,109 @@ if (typeof document !== 'undefined' && !document.getElementById('reports-animati
|
|||||||
document.head.appendChild(style);
|
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() {
|
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
|
// Leer DEBUG_MODE desde variables de entorno
|
||||||
const isDebugMode = import.meta.env.VITE_DEBUG_MODE === 'true';
|
const isDebugMode = import.meta.env.VITE_DEBUG_MODE === 'true';
|
||||||
const { showMessage } = useNotification();
|
const { showMessage } = useNotification();
|
||||||
@@ -52,13 +162,7 @@ export default function Reports() {
|
|||||||
// Estado para pestañas
|
// Estado para pestañas
|
||||||
const [activeTab, setActiveTab] = useState('pedimentos');
|
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
|
// Importar modelos
|
||||||
const datastageModels = datastageModelsData?.models || [];
|
const datastageModels = datastageModelsData?.models || [];
|
||||||
@@ -201,6 +305,25 @@ export default function Reports() {
|
|||||||
setTourStep(0);
|
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
|
// Función para manejar la exportación del modelo
|
||||||
const handleExportModel = async () => {
|
const handleExportModel = async () => {
|
||||||
if (selectedFields.length === 0) {
|
if (selectedFields.length === 0) {
|
||||||
@@ -367,11 +490,10 @@ export default function Reports() {
|
|||||||
key={field}
|
key={field}
|
||||||
onClick={() => setAvailableSelected(field)}
|
onClick={() => setAvailableSelected(field)}
|
||||||
onDoubleClick={() => addField(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'
|
? 'bg-blue-50 text-blue-700'
|
||||||
: 'hover:bg-gray-100'
|
: 'hover:bg-gray-100'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span className="text-sm font-medium">{formatFieldName(field)}</span>
|
<span className="text-sm font-medium">{formatFieldName(field)}</span>
|
||||||
<button
|
<button
|
||||||
@@ -420,11 +542,10 @@ export default function Reports() {
|
|||||||
{selectedFields.map(field => (
|
{selectedFields.map(field => (
|
||||||
<div
|
<div
|
||||||
key={field}
|
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'
|
? 'bg-red-50 text-red-700'
|
||||||
: 'hover:bg-gray-100'
|
: 'hover:bg-gray-100'
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setIncludedSelected(field)}
|
onClick={() => setIncludedSelected(field)}
|
||||||
onDoubleClick={() => removeField(field)}
|
onDoubleClick={() => removeField(field)}
|
||||||
>
|
>
|
||||||
@@ -555,16 +676,15 @@ export default function Reports() {
|
|||||||
<div className="flex gap-3">
|
<div className="flex gap-3">
|
||||||
<button
|
<button
|
||||||
onClick={() => setExportFormat('excel')}
|
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-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'
|
||||||
: 'bg-white border-gray-200 hover:bg-gray-50'
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center gap-2">
|
<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">
|
<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>
|
</svg>
|
||||||
<span className={exportFormat === 'excel' ? 'font-semibold text-green-700' : 'text-gray-700'}>Excel</span>
|
<span className={exportFormat === 'excel' ? 'font-semibold text-green-700' : 'text-gray-700'}>Excel</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -572,16 +692,15 @@ export default function Reports() {
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setExportFormat('csv')}
|
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-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'
|
||||||
: 'bg-white border-gray-200 hover:bg-gray-50'
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center gap-2">
|
<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">
|
<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>
|
</svg>
|
||||||
<span className={exportFormat === 'csv' ? 'font-semibold text-blue-700' : 'text-gray-700'}>CSV</span>
|
<span className={exportFormat === 'csv' ? 'font-semibold text-blue-700' : 'text-gray-700'}>CSV</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -601,25 +720,22 @@ export default function Reports() {
|
|||||||
<button
|
<button
|
||||||
onClick={handleExportModel}
|
onClick={handleExportModel}
|
||||||
disabled={isExporting}
|
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'
|
? 'bg-gray-400 cursor-not-allowed'
|
||||||
: exportFormat === 'excel'
|
: 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-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'
|
: '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-green-500/20 hover:shadow-green-500/30'
|
||||||
: 'shadow-blue-500/20 hover:shadow-blue-500/30'
|
: 'shadow-blue-500/20 hover:shadow-blue-500/30'
|
||||||
} overflow-hidden`}
|
} 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'
|
? 'bg-gradient-to-r from-gray-300/0 via-gray-300/30 to-gray-300/0'
|
||||||
: exportFormat === 'excel'
|
: exportFormat === 'excel'
|
||||||
? 'bg-gradient-to-r from-green-400/0 via-green-400/30 to-green-400/0'
|
? 'bg-gradient-to-r from-green-400/0 via-green-400/30 to-green-400/0'
|
||||||
: 'bg-gradient-to-r from-blue-400/0 via-blue-400/30 to-blue-400/0'
|
: 'bg-gradient-to-r from-blue-400/0 via-blue-400/30 to-blue-400/0'
|
||||||
} skeleton-animation`}></div>
|
} skeleton-animation`}></div>
|
||||||
<span className="relative inline-flex items-center justify-center gap-2 px-4">
|
<span className="relative inline-flex items-center justify-center gap-2 px-4">
|
||||||
{isExporting ? (
|
{isExporting ? (
|
||||||
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
@@ -677,16 +793,15 @@ export default function Reports() {
|
|||||||
<div className="flex gap-3">
|
<div className="flex gap-3">
|
||||||
<button
|
<button
|
||||||
onClick={() => setExportFormat('excel')}
|
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-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'
|
||||||
: 'bg-white border-gray-200 hover:bg-gray-50'
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center gap-2">
|
<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">
|
<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>
|
</svg>
|
||||||
<span className={exportFormat === 'excel' ? 'font-semibold text-green-700' : 'text-gray-700'}>Excel</span>
|
<span className={exportFormat === 'excel' ? 'font-semibold text-green-700' : 'text-gray-700'}>Excel</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -694,16 +809,15 @@ export default function Reports() {
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setExportFormat('csv')}
|
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-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'
|
||||||
: 'bg-white border-gray-200 hover:bg-gray-50'
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center gap-2">
|
<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">
|
<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>
|
</svg>
|
||||||
<span className={exportFormat === 'csv' ? 'font-semibold text-blue-700' : 'text-gray-700'}>CSV</span>
|
<span className={exportFormat === 'csv' ? 'font-semibold text-blue-700' : 'text-gray-700'}>CSV</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -722,25 +836,22 @@ export default function Reports() {
|
|||||||
<button
|
<button
|
||||||
onClick={handleExportModel}
|
onClick={handleExportModel}
|
||||||
disabled={isExporting}
|
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'
|
? 'bg-gray-400 cursor-not-allowed'
|
||||||
: exportFormat === 'excel'
|
: 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-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'
|
: '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-green-500/20 hover:shadow-green-500/30'
|
||||||
: 'shadow-blue-500/20 hover:shadow-blue-500/30'
|
: 'shadow-blue-500/20 hover:shadow-blue-500/30'
|
||||||
} overflow-hidden`}
|
} 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'
|
? 'bg-gradient-to-r from-gray-300/0 via-gray-300/30 to-gray-300/0'
|
||||||
: exportFormat === 'excel'
|
: exportFormat === 'excel'
|
||||||
? 'bg-gradient-to-r from-green-400/0 via-green-400/30 to-green-400/0'
|
? 'bg-gradient-to-r from-green-400/0 via-green-400/30 to-green-400/0'
|
||||||
: 'bg-gradient-to-r from-blue-400/0 via-blue-400/30 to-blue-400/0'
|
: 'bg-gradient-to-r from-blue-400/0 via-blue-400/30 to-blue-400/0'
|
||||||
} skeleton-animation`}></div>
|
} skeleton-animation`}></div>
|
||||||
<span className="relative inline-flex items-center justify-center gap-2 px-4">
|
<span className="relative inline-flex items-center justify-center gap-2 px-4">
|
||||||
{isExporting ? (
|
{isExporting ? (
|
||||||
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
@@ -768,11 +879,94 @@ export default function Reports() {
|
|||||||
`}</style>
|
`}</style>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
minimos: (
|
Cumplimiento: (
|
||||||
<div className="p-6">
|
<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>
|
</div>
|
||||||
),
|
),
|
||||||
coves: (
|
coves: (
|
||||||
@@ -898,11 +1092,10 @@ export default function Reports() {
|
|||||||
<div className="bg-white/95 backdrop-blur-xl rounded-2xl shadow-xl border border-blue-100">
|
<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">
|
<div className="flex flex-col sm:flex-row border-b border-blue-200/50 p-1 gap-1">
|
||||||
<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 === 'pedimentos'
|
||||||
activeTab === 'pedimentos'
|
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
|
||||||
? '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'
|
||||||
: 'text-gray-700 hover:bg-blue-50/80'
|
}`}
|
||||||
}`}
|
|
||||||
onClick={() => setActiveTab('pedimentos')}
|
onClick={() => setActiveTab('pedimentos')}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center gap-2">
|
<div className="flex items-center justify-center gap-2">
|
||||||
@@ -913,11 +1106,10 @@ export default function Reports() {
|
|||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<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]'
|
||||||
? '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'
|
||||||
: 'text-gray-700 hover:bg-blue-50/80'
|
}`}
|
||||||
}`}
|
|
||||||
onClick={() => setActiveTab('datastage')}
|
onClick={() => setActiveTab('datastage')}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center gap-2">
|
<div className="flex items-center justify-center gap-2">
|
||||||
@@ -927,30 +1119,26 @@ export default function Reports() {
|
|||||||
<span>Datastage cargados</span>
|
<span>Datastage cargados</span>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
{isDebugMode && (
|
<button
|
||||||
<button
|
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'Cumplimiento'
|
||||||
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${
|
|
||||||
activeTab === 'minimos'
|
|
||||||
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
|
? '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'
|
: 'text-gray-700 hover:bg-blue-50/80'
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setActiveTab('minimos')}
|
onClick={() => setActiveTab('Cumplimiento')}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center gap-2">
|
<div className="flex items-center justify-center gap-2">
|
||||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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" />
|
<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>
|
</svg>
|
||||||
<span>Mínimos</span>
|
<span>Cumplimiento</span>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
)}
|
|
||||||
{isDebugMode && (
|
{isDebugMode && (
|
||||||
<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 === 'coves'
|
||||||
activeTab === 'coves'
|
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
|
||||||
? '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'
|
||||||
: 'text-gray-700 hover:bg-blue-50/80'
|
}`}
|
||||||
}`}
|
|
||||||
onClick={() => setActiveTab('coves')}
|
onClick={() => setActiveTab('coves')}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center gap-2">
|
<div className="flex items-center justify-center gap-2">
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import fetchWithAuth from '../fetchWithAuth';
|
import fetchWithAuth from '../fetchWithAuth';
|
||||||
|
|
||||||
const initialFilters = {
|
const initialFilters = {
|
||||||
pedimento_app: '',
|
pedimento_app: '',
|
||||||
aduana: '',
|
aduana: '',
|
||||||
@@ -12,11 +11,48 @@ const initialFilters = {
|
|||||||
fecha_pago_lte: '',
|
fecha_pago_lte: '',
|
||||||
contribuyente__rfc: '',
|
contribuyente__rfc: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function TableroAlmacenamiento() {
|
export default function TableroAlmacenamiento() {
|
||||||
const [filters, setFilters] = useState(initialFilters);
|
const [filters, setFilters] = useState(initialFilters);
|
||||||
const [summary, setSummary] = useState(null);
|
const [summary, setSummary] = useState(null);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
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
|
// Fetch summary data
|
||||||
const fetchSummary = async () => {
|
const fetchSummary = async () => {
|
||||||
@@ -36,26 +72,30 @@ export default function TableroAlmacenamiento() {
|
|||||||
setIsLoading(false);
|
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(() => {
|
useEffect(() => {
|
||||||
fetchSummary();
|
fetchSummary();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Handle filter changes
|
|
||||||
const handleFilterChange = (e) => {
|
const handleFilterChange = (e) => {
|
||||||
setFilters({ ...filters, [e.target.name]: e.target.value });
|
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 (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100">
|
<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>
|
||||||
<div className="flex justify-end">
|
<div className="flex justify-end">
|
||||||
<button
|
<div className="flex gap-2">
|
||||||
type="submit"
|
<button
|
||||||
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"
|
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>
|
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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -115,203 +164,60 @@ export default function TableroAlmacenamiento() {
|
|||||||
<span className="text-slate-600">Cargando resumen...</span>
|
<span className="text-slate-600">Cargando resumen...</span>
|
||||||
</div>
|
</div>
|
||||||
) : summary ? (
|
) : summary ? (
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
|
<>
|
||||||
{/* Pedimentos */}
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
|
||||||
<Card
|
{/* ...Tarjetas existentes... */}
|
||||||
title="Pedimentos"
|
{/* ...aquí van las Card como antes... */}
|
||||||
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>}
|
{/* ...no se repite para brevedad... */}
|
||||||
>
|
</div>
|
||||||
<div className="text-2xl font-bold text-blue-700">{summary.pedimentos?.total ?? '-'}</div>
|
{/* Tabla de reportes debajo de las tarjetas */}
|
||||||
<div className="grid grid-cols-2 gap-2 mt-2 text-xs">
|
<div className="mt-10">
|
||||||
<div>
|
<h2 className="text-lg font-bold text-slate-700 mb-4">Historial de Reportes</h2>
|
||||||
<span className="block text-slate-500">Completos</span>
|
<div className="overflow-x-auto">
|
||||||
<span className="block font-semibold">{summary.pedimentos?.completos ?? '-'}</span>
|
<table className="min-w-full bg-white rounded-lg shadow border border-slate-200">
|
||||||
</div>
|
<thead>
|
||||||
<div>
|
<tr className="bg-slate-100">
|
||||||
<span className="block text-slate-500">Pendientes</span>
|
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">ID</th>
|
||||||
<span className="block font-semibold">{summary.pedimentos?.pendientes ?? '-'}</span>
|
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Estado</th>
|
||||||
</div>
|
<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 className="mt-2">
|
</div>
|
||||||
<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>
|
<div className="text-center text-slate-500 py-12">No hay datos para mostrar.</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user