Compare commits
14 Commits
510ebe8058
..
dev
| Author | SHA1 | Date | |
|---|---|---|---|
 EidanThen
|
952384fbca | ||
|
EidanThen
|
9a67a66dd1 | ||
|
EidanThen
|
95312c9621 | ||
|
EidanThen
|
dc2fa3e681 | ||
|
EidanThen
|
d355feb243 | ||
|
EidanThen
|
f0ef20c41f | ||
|
EidanThen
|
dfa0d63061 | ||
|
EidanThen
|
f2e914dbfa | ||
|
EidanThen
|
cb0636c957 | ||
|
EidanThen
|
c252573824 | ||
|
EidanThen
|
f172d62ed4 | ||
|
EidanThen
|
4b4685675c | ||
|
EidanThen
|
4ea71b7300 | ||
|
EidanThen
|
710045ee11 |
Generated
+222
-1
@@ -9,9 +9,13 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@supabase/supabase-js": "^2.108.2",
|
"@supabase/supabase-js": "^2.108.2",
|
||||||
|
"file-saver": "^2.0.5",
|
||||||
|
"jszip": "^3.10.1",
|
||||||
|
"lucide-react": "^1.23.0",
|
||||||
"react": "^19.2.7",
|
"react": "^19.2.7",
|
||||||
"react-dom": "^19.2.7",
|
"react-dom": "^19.2.7",
|
||||||
"react-router-dom": "^7.18.1"
|
"react-router-dom": "^7.18.1",
|
||||||
|
"xlsx": "^0.18.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^10.0.1",
|
"@eslint/js": "^10.0.1",
|
||||||
@@ -1039,6 +1043,15 @@
|
|||||||
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/adler-32": {
|
||||||
|
"version": "1.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
|
||||||
|
"integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/ajv": {
|
"node_modules/ajv": {
|
||||||
"version": "6.15.0",
|
"version": "6.15.0",
|
||||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
|
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
|
||||||
@@ -1147,6 +1160,28 @@
|
|||||||
],
|
],
|
||||||
"license": "CC-BY-4.0"
|
"license": "CC-BY-4.0"
|
||||||
},
|
},
|
||||||
|
"node_modules/cfb": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
|
||||||
|
"integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"adler-32": "~1.3.0",
|
||||||
|
"crc-32": "~1.2.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/codepage": {
|
||||||
|
"version": "1.15.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
|
||||||
|
"integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/convert-source-map": {
|
"node_modules/convert-source-map": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
|
||||||
@@ -1167,6 +1202,24 @@
|
|||||||
"url": "https://opencollective.com/express"
|
"url": "https://opencollective.com/express"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"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/crc-32": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
|
||||||
|
"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"bin": {
|
||||||
|
"crc32": "bin/crc32.njs"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"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",
|
||||||
@@ -1491,6 +1544,12 @@
|
|||||||
"node": ">=16.0.0"
|
"node": ">=16.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/file-saver": {
|
||||||
|
"version": "2.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
|
||||||
|
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/find-up": {
|
"node_modules/find-up": {
|
||||||
"version": "5.0.0",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
|
||||||
@@ -1529,6 +1588,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
},
|
},
|
||||||
|
"node_modules/frac": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/fsevents": {
|
"node_modules/fsevents": {
|
||||||
"version": "2.3.3",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||||
@@ -1616,6 +1684,12 @@
|
|||||||
"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",
|
||||||
@@ -1626,6 +1700,12 @@
|
|||||||
"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-extglob": {
|
"node_modules/is-extglob": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||||
@@ -1649,6 +1729,12 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.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/isexe": {
|
"node_modules/isexe": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||||
@@ -1710,6 +1796,18 @@
|
|||||||
"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/keyv": {
|
"node_modules/keyv": {
|
||||||
"version": "4.5.4",
|
"version": "4.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
|
||||||
@@ -1734,6 +1832,15 @@
|
|||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"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/lightningcss": {
|
"node_modules/lightningcss": {
|
||||||
"version": "1.32.0",
|
"version": "1.32.0",
|
||||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
|
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
|
||||||
@@ -2033,6 +2140,15 @@
|
|||||||
"yallist": "^3.0.2"
|
"yallist": "^3.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/lucide-react": {
|
||||||
|
"version": "1.23.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.23.0.tgz",
|
||||||
|
"integrity": "sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw==",
|
||||||
|
"license": "ISC",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/minimatch": {
|
"node_modules/minimatch": {
|
||||||
"version": "10.2.5",
|
"version": "10.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
|
||||||
@@ -2142,6 +2258,12 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"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-exists": {
|
"node_modules/path-exists": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
|
||||||
@@ -2221,6 +2343,12 @@
|
|||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.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/punycode": {
|
"node_modules/punycode": {
|
||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||||
@@ -2290,6 +2418,21 @@
|
|||||||
"react-dom": ">=18"
|
"react-dom": ">=18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"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/rolldown": {
|
"node_modules/rolldown": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.3.tgz",
|
||||||
@@ -2324,6 +2467,12 @@
|
|||||||
"@rolldown/binding-win32-x64-msvc": "1.1.3"
|
"@rolldown/binding-win32-x64-msvc": "1.1.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"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.27.0",
|
"version": "0.27.0",
|
||||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
||||||
@@ -2346,6 +2495,12 @@
|
|||||||
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"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/shebang-command": {
|
"node_modules/shebang-command": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||||
@@ -2379,6 +2534,27 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/ssf": {
|
||||||
|
"version": "0.11.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
|
||||||
|
"integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"frac": "~1.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"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/tinyglobby": {
|
"node_modules/tinyglobby": {
|
||||||
"version": "0.2.17",
|
"version": "0.2.17",
|
||||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
|
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
|
||||||
@@ -2456,6 +2632,12 @@
|
|||||||
"punycode": "^2.1.0"
|
"punycode": "^2.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/util-deprecate": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "8.1.0",
|
"version": "8.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-8.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-8.1.0.tgz",
|
||||||
@@ -2550,6 +2732,24 @@
|
|||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/wmf": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/word": {
|
||||||
|
"version": "0.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
|
||||||
|
"integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/word-wrap": {
|
"node_modules/word-wrap": {
|
||||||
"version": "1.2.5",
|
"version": "1.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
|
||||||
@@ -2560,6 +2760,27 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/xlsx": {
|
||||||
|
"version": "0.18.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
|
||||||
|
"integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"adler-32": "~1.3.0",
|
||||||
|
"cfb": "~1.2.1",
|
||||||
|
"codepage": "~1.15.0",
|
||||||
|
"crc-32": "~1.2.1",
|
||||||
|
"ssf": "~0.11.2",
|
||||||
|
"wmf": "~1.0.1",
|
||||||
|
"word": "~0.3.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"xlsx": "bin/xlsx.njs"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/yallist": {
|
"node_modules/yallist": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||||
|
|||||||
+5
-1
@@ -11,9 +11,13 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@supabase/supabase-js": "^2.108.2",
|
"@supabase/supabase-js": "^2.108.2",
|
||||||
|
"file-saver": "^2.0.5",
|
||||||
|
"jszip": "^3.10.1",
|
||||||
|
"lucide-react": "^1.23.0",
|
||||||
"react": "^19.2.7",
|
"react": "^19.2.7",
|
||||||
"react-dom": "^19.2.7",
|
"react-dom": "^19.2.7",
|
||||||
"react-router-dom": "^7.18.1"
|
"react-router-dom": "^7.18.1",
|
||||||
|
"xlsx": "^0.18.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^10.0.1",
|
"@eslint/js": "^10.0.1",
|
||||||
|
|||||||
+169
-22
@@ -1,29 +1,176 @@
|
|||||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
import { BrowserRouter, Routes, Route, Navigate, useLocation } from "react-router-dom";
|
||||||
|
import { supabase } from "./services/supabase";
|
||||||
|
import { useEffect, useState, createContext, useContext } from "react";
|
||||||
|
import Login from "./components/Login";
|
||||||
import EmployeeCard from "./components/EmployeeCard";
|
import EmployeeCard from "./components/EmployeeCard";
|
||||||
import IdCardGenerator from "./Generator";
|
import IdCardGenerator from "./Generator";
|
||||||
|
import "./components/Login.css";
|
||||||
|
|
||||||
export default function App() {
|
const AuthContext = createContext(null);
|
||||||
|
|
||||||
|
export const useAuth = () => useContext(AuthContext);
|
||||||
|
|
||||||
|
const ALLOWED_DOMAIN = "@gomezleemarketing.com";
|
||||||
|
const GLM_LOGO = "https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM_completo.png";
|
||||||
|
|
||||||
|
function AuthProvider({ children }) {
|
||||||
|
const [user, setUser] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!supabase) {
|
||||||
|
console.warn("Supabase no configurado - falta VITE_SUPABASE_ANON_KEY");
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
supabase.auth.getSession().then(({ data: { session } }) => {
|
||||||
|
setUser(session?.user ?? null);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
|
||||||
|
setUser(session?.user ?? null);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => subscription.unsubscribe();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const signOut = async () => {
|
||||||
|
if (supabase) await supabase.auth.signOut();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
minHeight: '100vh',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
background: '#EEF6E8',
|
||||||
|
fontFamily: 'Arial, sans-serif'
|
||||||
|
}}>
|
||||||
|
<div style={{
|
||||||
|
width: 40, height: 40, border: '3px solid #D0D0D0',
|
||||||
|
borderTopColor: '#6CC24A', borderRadius: '50%',
|
||||||
|
animation: 'spin 0.8s linear infinite'
|
||||||
|
}} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<AuthContext.Provider value={{ user, signOut, loading }}>
|
||||||
<BrowserRouter>
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
<Routes>
|
);
|
||||||
|
}
|
||||||
<Route
|
|
||||||
path="/employee"
|
function ProtectedRoute({ children }) {
|
||||||
element={<IdCardGenerator />}
|
const { user, signOut, loading } = useAuth();
|
||||||
/>
|
const location = useLocation();
|
||||||
|
|
||||||
<Route
|
if (loading) return null;
|
||||||
path="/employee/:employeeNumber"
|
|
||||||
element={<EmployeeCard />}
|
if (!user) {
|
||||||
/>
|
return <Navigate to="/empleado-id/login" state={{ from: location }} replace />;
|
||||||
|
}
|
||||||
</Routes>
|
|
||||||
|
if (!user.email?.endsWith(ALLOWED_DOMAIN)) {
|
||||||
</BrowserRouter>
|
signOut();
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
minHeight: '100vh',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
background: '#EEF6E8',
|
||||||
|
fontFamily: 'Arial, sans-serif',
|
||||||
|
padding: '20px',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
<img src={GLM_LOGO} alt="GLM" style={{ maxWidth: 220, marginBottom: 24 }} />
|
||||||
|
<h1 style={{ color: '#4F758B', fontSize: 24, fontWeight: 700, marginBottom: 16 }}>
|
||||||
|
Acceso no autorizado
|
||||||
|
</h1>
|
||||||
|
<p style={{ color: '#6B8FA3', fontSize: 16, marginBottom: 24, maxWidth: 400 }}>
|
||||||
|
Solo se permite acceso con cuentas corporativas <strong>@gomezleemarketing.com</strong>.
|
||||||
|
Tu cuenta <strong>{user.email}</strong> no tiene permisos.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={signOut}
|
||||||
|
style={{
|
||||||
|
padding: '14px 32px',
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: 600,
|
||||||
|
fontFamily: 'Arial',
|
||||||
|
color: '#fff',
|
||||||
|
background: '#4F758B',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: 10,
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cerrar sesión y volver a intentar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PublicRoute({ children }) {
|
||||||
|
const { user, loading } = useAuth();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
if (loading) return null;
|
||||||
|
|
||||||
|
if (user?.email?.endsWith(ALLOWED_DOMAIN)) {
|
||||||
|
const from = location.state?.from?.pathname || '/empleado-id/';
|
||||||
|
return <Navigate to={from} replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<AuthProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route
|
||||||
|
path="/empleado-id/login"
|
||||||
|
element={
|
||||||
|
<PublicRoute>
|
||||||
|
<Login />
|
||||||
|
</PublicRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Route
|
||||||
|
path="/empleado-id/"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<IdCardGenerator />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Route
|
||||||
|
path="/empleado-id/:employeeNumber"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<EmployeeCard />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Route path="*" element={<Navigate to="/empleado-id/" replace />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
</AuthProvider>
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -45,6 +45,7 @@ body {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
margin-top: 30px
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── CONTROLS PANEL ── */
|
/* ── CONTROLS PANEL ── */
|
||||||
@@ -255,11 +256,11 @@ body {
|
|||||||
/* ── FRONT DYNAMIC OVERLAYS ── */
|
/* ── FRONT DYNAMIC OVERLAYS ── */
|
||||||
.front-photo-frame {
|
.front-photo-frame {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 99px;
|
top: 98.5px;
|
||||||
left: 50%;
|
left: 49.9%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 145px;
|
width: 145.5px;
|
||||||
height: 145px;
|
height: 145.5px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -272,7 +273,7 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
display: none;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.front-photo-frame .placeholder-svg {
|
.front-photo-frame .placeholder-svg {
|
||||||
+415
-199
@@ -1,142 +1,356 @@
|
|||||||
import React, { useState, useRef, useEffect } from 'react';
|
import { useState, useRef, useEffect } from 'react';
|
||||||
import './App.css';
|
import './Generator.css';
|
||||||
// Importamos las funciones lógicas nativas desde el archivo portado script.jsx
|
import { renderQRCode, downloadIDCards, downloadBulkIDCards, getXLSXLib, clientTemplates } from './script/script.jsx';
|
||||||
import { renderQRCode, downloadIDCards } from './script/script.jsx';
|
import { uploadEmployeePhoto, saveClienteProyecto } from './services/storage.js';
|
||||||
import { uploadEmployeePhoto } from './services/storage.js';
|
|
||||||
import { supabase } from "./services/supabase";
|
import { supabase } from "./services/supabase";
|
||||||
|
|
||||||
|
// Convierte datos binarios recibidos (base64, buffer, array de bytes) en un Blob URL local de forma robusta
|
||||||
|
const convertBinaryToBlobUrl = (data) => {
|
||||||
|
if (!data) return null;
|
||||||
|
try {
|
||||||
|
if (typeof data === 'object' && data.type === 'Buffer' && Array.isArray(data.data)) {
|
||||||
|
const byteArray = new Uint8Array(data.data);
|
||||||
|
const blob = new Blob([byteArray], { type: 'image/jpeg' });
|
||||||
|
return URL.createObjectURL(blob);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(data)) {
|
||||||
|
const byteArray = new Uint8Array(data);
|
||||||
|
const blob = new Blob([byteArray], { type: 'image/jpeg' });
|
||||||
|
return URL.createObjectURL(blob);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof data === 'string') {
|
||||||
|
const cleanBase64 = data.replace(/^data:image\/\w+;base64,/, "");
|
||||||
|
const byteCharacters = atob(cleanBase64);
|
||||||
|
const byteNumbers = new Array(byteCharacters.length);
|
||||||
|
for (let i = 0; i < byteCharacters.length; i++) {
|
||||||
|
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
||||||
|
}
|
||||||
|
const byteArray = new Uint8Array(byteNumbers);
|
||||||
|
const blob = new Blob([byteArray], { type: 'image/jpeg' });
|
||||||
|
return URL.createObjectURL(blob);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error convirtiendo formato binario a Blob URL:", e);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
export default function IdCardGenerator() {
|
export default function IdCardGenerator() {
|
||||||
// --- Estados para manejar la lógica en tiempo real ───
|
// --- Estados formulario individual ───
|
||||||
const [name, setName] = useState('');
|
const [name, setName] = useState('');
|
||||||
const [role, setRole] = useState('');
|
const [role, setRole] = useState('');
|
||||||
const [language, setLanguage] = useState('Esp'); // 'Esp' o 'Ing'
|
const [language, setLanguage] = useState('Esp');
|
||||||
const [selectedClient, setSelectedClient] = useState('Generico'); // Sin tildes de forma interna
|
const [selectedClient, setSelectedClient] = useState('Generico');
|
||||||
const [employeeId, setEmployeeId] = useState('');
|
const [employeeId, setEmployeeId] = useState('');
|
||||||
const [photoSrc, setPhotoSrc] = useState('');
|
const [photoSrc, setPhotoSrc] = useState('');
|
||||||
const [photoFile, setPhotoFile] = useState(null);
|
const [photoFile, setPhotoFile] = useState(null);
|
||||||
|
const [photoProcessing, setPhotoProcessing] = useState(false);
|
||||||
// Estado para controlar la UI del botón de descarga mientras procesa
|
|
||||||
const [downloadStatus, setDownloadStatus] = useState({ processing: false, text: '⬇ Descargar' });
|
const [downloadStatus, setDownloadStatus] = useState({ processing: false, text: '⬇ Descargar' });
|
||||||
|
|
||||||
// Referencias del DOM controladas por React
|
// Bloquea el botón Descargar hasta que nombre, puesto e ID estén llenos
|
||||||
|
const isFormComplete = name.trim() && role.trim() && employeeId.trim();
|
||||||
|
|
||||||
|
// --- Estados Lote / Excel Masivo ───
|
||||||
|
const [bulkEmployees, setBulkEmployees] = useState([]);
|
||||||
|
const [bulkStatusText, setBulkStatusText] = useState('');
|
||||||
|
const [bulkDownloadStatus, setBulkDownloadStatus] = useState({ processing: false, text: '⬇ Descargar' });
|
||||||
|
const [showTooltip, setShowTooltip] = useState(false);
|
||||||
|
|
||||||
const fileInputRef = useRef(null);
|
const fileInputRef = useRef(null);
|
||||||
|
const excelInputRef = useRef(null);
|
||||||
const qrCanvasRef = useRef(null);
|
const qrCanvasRef = useRef(null);
|
||||||
|
|
||||||
// EFECTO AUTOMÁTICO: Renderiza el QR en tiempo real mientras escribes mediante referencias
|
const baseUrl = import.meta.env.BASE_URL.endsWith('/')
|
||||||
|
? import.meta.env.BASE_URL
|
||||||
|
: `${import.meta.env.BASE_URL}/`;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (qrCanvasRef.current) {
|
if (qrCanvasRef.current) {
|
||||||
renderQRCode(employeeId, qrCanvasRef.current);
|
renderQRCode(employeeId, qrCanvasRef.current);
|
||||||
}
|
}
|
||||||
}, [employeeId]);
|
}, [employeeId]);
|
||||||
|
|
||||||
const handlePhotoUpload = (e) => {
|
const handlePhotoUpload = async (e) => {
|
||||||
const file = e.target.files[0];
|
const file = e.target.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
if (file) {
|
setPhotoFile(file);
|
||||||
setPhotoFile(file);
|
setPhotoSrc(URL.createObjectURL(file));
|
||||||
|
setPhotoProcessing(true);
|
||||||
const localUrl = URL.createObjectURL(file);
|
|
||||||
setPhotoSrc(localUrl);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleLanguageChange = (lang) => {
|
|
||||||
setLanguage(lang);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClientChange = (e) => {
|
|
||||||
setSelectedClient(e.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Forzar generación del QR manualmente si se desea mediante el botón verde
|
|
||||||
const triggerGenerateQR = () => {
|
|
||||||
if (qrCanvasRef.current) {
|
|
||||||
renderQRCode(employeeId, qrCanvasRef.current);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Disparador del motor de renderizado ULTRA MAX QUALITY en sandbox
|
|
||||||
const triggerDownload = async () => {
|
|
||||||
if (!validateForm()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
const editedBlob = await processPhotoWithAI(file);
|
||||||
|
const editedUrl = URL.createObjectURL(editedBlob);
|
||||||
|
setPhotoSrc(editedUrl);
|
||||||
|
setPhotoFile(new File([editedBlob], file.name, { type: editedBlob.type || 'image/jpeg' }));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error al procesar la foto con IA en n8n:', error);
|
||||||
|
alert('No se pudo procesar la foto con IA. Se usará la foto original para la vista previa.');
|
||||||
|
} finally {
|
||||||
|
setPhotoProcessing(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Solo si el usuario seleccionó una foto
|
const processPhotoWithAI = async (file) => {
|
||||||
if (photoFile) {
|
const N8N_WEBHOOK_URL = import.meta.env.VITE_N8N_WEBHOOK_URL;
|
||||||
|
const TOKEN_SECRETO = import.meta.env.VITE_WEBHOOK_TOKEN;
|
||||||
|
|
||||||
const photoUrl = await uploadEmployeePhoto(
|
const formData = new FormData();
|
||||||
employeeId,
|
formData.append('edited', file, file.name);
|
||||||
photoFile
|
formData.append('name', name);
|
||||||
);
|
formData.append('role', role);
|
||||||
|
formData.append('employeeId', employeeId);
|
||||||
|
formData.append('fechaProcesado', new Date().toISOString());
|
||||||
|
|
||||||
console.log("Foto subida:", photoUrl);
|
const response = await fetch(N8N_WEBHOOK_URL, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Authorization': TOKEN_SECRETO
|
||||||
|
},
|
||||||
|
body: formData
|
||||||
|
});
|
||||||
|
|
||||||
const { data, error } = await supabase.rpc(
|
if (!response.ok) {
|
||||||
"save_employee_photo",
|
throw new Error(`El servidor de n8n rechazó la petición (Código: ${response.status})`);
|
||||||
{
|
}
|
||||||
p_employee_number: employeeId,
|
|
||||||
p_photo_url: photoUrl
|
const contentType = response.headers.get('content-type') || '';
|
||||||
|
if (contentType.includes('application/json')) {
|
||||||
|
const data = await response.json();
|
||||||
|
const bin = data.edited || data.data || data.foto_processed_base64 || data.photo || data.binary || (Array.isArray(data) && (data[0]?.edited || data[0]?.data));
|
||||||
|
const blobUrl = convertBinaryToBlobUrl(bin);
|
||||||
|
if (!blobUrl) throw new Error('n8n no devolvió un binario válido.');
|
||||||
|
const blob = await (await fetch(blobUrl)).blob();
|
||||||
|
return blob;
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = await response.blob();
|
||||||
|
if (!blob || blob.size === 0) throw new Error('n8n devolvió un binario vacío.');
|
||||||
|
return blob;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEmployeeIdChange = (e) => {
|
||||||
|
const rawValue = e.target.value;
|
||||||
|
const cleanValue = rawValue.replace(/[-\s]/g, '');
|
||||||
|
setEmployeeId(cleanValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
const enviarDatosAn8n = async (datosEmpleados) => {
|
||||||
|
const N8N_WEBHOOK_URL = import.meta.env.VITE_N8N_WEBHOOK_URL;
|
||||||
|
const TOKEN_SECRETO = import.meta.env.VITE_WEBHOOK_TOKEN;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(N8N_WEBHOOK_URL, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': TOKEN_SECRETO
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
empleados: datosEmpleados,
|
||||||
|
total: datosEmpleados.length,
|
||||||
|
fechaProcesado: new Date().toISOString()
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`El servidor de n8n rechazó la petición (Código: ${response.status})`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const resData = await response.json();
|
||||||
|
return Array.isArray(resData) ? resData : (resData.empleados || resData.data || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error de comunicación con n8n:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBulkSupabaseSync = async (cedula, blobData, currentEmployee) => {
|
||||||
|
const cleanCedula = String(cedula).replace(/[-\s]/g, '');
|
||||||
|
if (!cleanCedula) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Se usa el cliente extraído directamente del array renderizado
|
||||||
|
const clienteProyectoValue = currentEmployee?.selectedClient || 'Generico';
|
||||||
|
await saveClienteProyecto(cleanCedula, clienteProyectoValue);
|
||||||
|
console.log(`[Supabase DB] Guardado: ${cleanCedula} → ${clienteProyectoValue}`);
|
||||||
|
|
||||||
|
const customFile = new File([blobData], `${cleanCedula}.jpg`, { type: 'image/jpeg' });
|
||||||
|
const remoteStorageUrl = await uploadEmployeePhoto(cleanCedula, customFile);
|
||||||
|
|
||||||
|
if (remoteStorageUrl) {
|
||||||
|
await supabase.rpc("save_employee_photo", {
|
||||||
|
p_employee_number: cleanCedula,
|
||||||
|
p_photo_url: remoteStorageUrl
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`[Supabase Sync Fallido] Cédula ${cleanCedula}:`, error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExcelUpload = async (e) => {
|
||||||
|
const file = e.target.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
setBulkStatusText('Leyendo documento...');
|
||||||
|
try {
|
||||||
|
const XLSXLib = await getXLSXLib();
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = async (evt) => {
|
||||||
|
try {
|
||||||
|
const bstr = evt.target.result;
|
||||||
|
const wb = XLSXLib.read(bstr, { type: 'binary' });
|
||||||
|
const wsname = wb.SheetNames[0];
|
||||||
|
const ws = wb.Sheets[wsname];
|
||||||
|
const jsonRows = XLSXLib.utils.sheet_to_json(ws);
|
||||||
|
|
||||||
|
if (jsonRows.length === 0) {
|
||||||
|
setBulkStatusText('❌ El archivo está vacío.');
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
);
|
|
||||||
|
|
||||||
if (error) {
|
const formatted = jsonRows.map((row) => {
|
||||||
throw error;
|
let rawLang = String(row.lenguaje || 'Esp').trim().toLowerCase();
|
||||||
}
|
if (rawLang.includes('es') || rawLang.includes('esp')) {
|
||||||
|
rawLang = 'Esp';
|
||||||
|
} else if (rawLang.includes('en') || rawLang.includes('ing')) {
|
||||||
|
rawLang = 'Ing';
|
||||||
|
} else {
|
||||||
|
rawLang = 'Esp';
|
||||||
|
}
|
||||||
|
|
||||||
if (!data.success) {
|
let rawClient = String(row['cliente/proyecto'] || 'Generico')
|
||||||
console.warn(data.message);
|
.trim()
|
||||||
} else {
|
.normalize("NFD")
|
||||||
console.log(data.message);
|
.replace(/[\u0300-\u036f]/g, "");
|
||||||
|
|
||||||
|
const lowerClient = rawClient.toLowerCase();
|
||||||
|
if (lowerClient.includes('nestle')) rawClient = 'Nestle';
|
||||||
|
else if (lowerClient.includes('claro')) rawClient = 'Claro';
|
||||||
|
else if (lowerClient.includes('colgate')) rawClient = 'Colgate';
|
||||||
|
else if (lowerClient.includes('kitchenaid') || lowerClient.includes('kitchen')) rawClient = 'KitchenAid';
|
||||||
|
else if (lowerClient.includes('kraft')) rawClient = 'Kraft';
|
||||||
|
else if (lowerClient.includes('motorola')) rawClient = 'Motorola';
|
||||||
|
else if (lowerClient.includes('p&g') || lowerClient.includes('p y g')) rawClient = 'P&G';
|
||||||
|
else if (lowerClient.includes('philip') || lowerClient.includes('morris')) rawClient = 'Philip Morris';
|
||||||
|
else if (lowerClient.includes('whirlpool')) rawClient = 'Whirlpool';
|
||||||
|
else rawClient = 'Generico';
|
||||||
|
|
||||||
|
const cleanedCedula = String(row.cedula || '').replace(/[-\s]/g, '');
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: String(row.nombre || '').trim(),
|
||||||
|
role: String(row.puesto || '').trim(),
|
||||||
|
selectedClient: rawClient,
|
||||||
|
language: rawLang,
|
||||||
|
employeeId: cleanedCedula,
|
||||||
|
fotoUrl: String(row.foto_url || '').trim()
|
||||||
|
};
|
||||||
|
}).filter(emp => emp.name && emp.role && emp.employeeId);
|
||||||
|
|
||||||
|
setBulkEmployees(formatted);
|
||||||
|
setBulkStatusText(`✅ ¡Cargados ${formatted.length} colaboradores! Listo para procesar.`);
|
||||||
|
setBulkDownloadStatus({ processing: false, text: '⬇ Descargar' });
|
||||||
|
|
||||||
|
} catch (innerErr) {
|
||||||
|
console.error(innerErr);
|
||||||
|
setBulkStatusText('❌ Error de lectura. Revisa el formato de columnas.');
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
reader.readAsBinaryString(file);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
setBulkStatusText('❌ Error cargando el motor XLSX.');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const triggerBulkDownload = async () => {
|
||||||
|
if (bulkEmployees.length === 0) return;
|
||||||
|
|
||||||
|
setBulkDownloadStatus({ processing: true, text: '🔄 Descargando...' });
|
||||||
|
setBulkStatusText('Descargando retratos...');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resultadosN8n = await enviarDatosAn8n(bulkEmployees);
|
||||||
|
setBulkStatusText('Generando frentes, reversos y empaquetando en carpetas locales...');
|
||||||
|
|
||||||
|
const employeesReadyForRender = bulkEmployees.map((originalEmp, index) => {
|
||||||
|
const n8nEmp = resultadosN8n[index] || resultadosN8n.find(e => e.employeeId === originalEmp.employeeId) || {};
|
||||||
|
|
||||||
|
const base64Source = n8nEmp.data || n8nEmp.foto_processed_base64 || originalEmp.data;
|
||||||
|
let finalPhotoUrl = convertBinaryToBlobUrl(base64Source) || originalEmp.fotoUrl;
|
||||||
|
|
||||||
|
const validClient = n8nEmp.selectedClient || originalEmp.selectedClient || 'Generico';
|
||||||
|
const validLang = n8nEmp.language || originalEmp.language || 'Esp';
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: n8nEmp.name || originalEmp.name,
|
||||||
|
role: n8nEmp.role || originalEmp.role,
|
||||||
|
selectedClient: validClient,
|
||||||
|
language: validLang,
|
||||||
|
employeeId: n8nEmp.employeeId || originalEmp.employeeId,
|
||||||
|
fotoUrl: finalPhotoUrl
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
await downloadBulkIDCards({
|
||||||
|
employees: employeesReadyForRender,
|
||||||
|
baseUrl,
|
||||||
|
onStateChange: null,
|
||||||
|
// CORRECCIÓN AQUÍ: Buscamos al empleado en nuestro arreglo usando la cédula que nos devuelve script.jsx
|
||||||
|
onProcessEmployeePhoto: (cedula, blobData) => {
|
||||||
|
const currentEmp = employeesReadyForRender.find(emp => emp.employeeId === cedula);
|
||||||
|
return handleBulkSupabaseSync(cedula, blobData, currentEmp);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
setBulkStatusText('🎉 ¡Lote de carnets guardado correctamente!');
|
||||||
|
setBulkEmployees([]);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
setBulkStatusText(`❌ Error al procesar: ${error.message || error}`);
|
||||||
|
} finally {
|
||||||
|
setBulkDownloadStatus({ processing: false, text: '⬇ Descargar' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const triggerDownload = async () => {
|
||||||
|
if (!validateForm()) return;
|
||||||
|
setDownloadStatus({ processing: true, text: '🔄 Descargando...' });
|
||||||
|
try {
|
||||||
|
await saveClienteProyecto(employeeId, selectedClient);
|
||||||
|
|
||||||
|
if (photoFile) {
|
||||||
|
const photoUrl = await uploadEmployeePhoto(employeeId, photoFile);
|
||||||
|
await supabase.rpc("save_employee_photo", {
|
||||||
|
p_employee_number: employeeId,
|
||||||
|
p_photo_url: photoUrl
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
await downloadIDCards({
|
await downloadIDCards({
|
||||||
name,
|
name, role, selectedClient, language, photoSrc,
|
||||||
role,
|
baseUrl,
|
||||||
selectedClient,
|
|
||||||
language,
|
|
||||||
photoSrc,
|
|
||||||
baseUrl: import.meta.env.BASE_URL.endsWith('/')
|
|
||||||
? import.meta.env.BASE_URL
|
|
||||||
: `${import.meta.env.BASE_URL}/`,
|
|
||||||
qrCanvas: qrCanvasRef.current,
|
qrCanvas: qrCanvasRef.current,
|
||||||
onStateChange: setDownloadStatus
|
onStateChange: setDownloadStatus
|
||||||
});
|
});
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
alert(err.message);
|
alert(err.message);
|
||||||
|
setDownloadStatus({ processing: false, text: '⬇ Descargar' });
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const baseUrl = import.meta.env.BASE_URL.endsWith('/')
|
|
||||||
? import.meta.env.BASE_URL
|
|
||||||
: `${import.meta.env.BASE_URL}/`;
|
|
||||||
|
|
||||||
const validateForm = () => {
|
const validateForm = () => {
|
||||||
if (!name.trim()) {
|
if (!name.trim()) { alert("Debe ingresar el nombre."); return false; }
|
||||||
alert("Debe ingresar el nombre.");
|
if (!role.trim()) { alert("Debe ingresar el puesto."); return false; }
|
||||||
return false;
|
if (!employeeId.trim()) { alert("Debe ingresar el ID del empleado."); return false; }
|
||||||
}
|
if (!photoFile) { alert("Debe subir la foto del colaborador."); return false; }
|
||||||
|
|
||||||
if (!role.trim()) {
|
|
||||||
alert("Debe ingresar el puesto.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!employeeId.trim()) {
|
|
||||||
alert("Debe ingresar el ID del empleado.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!photoFile) {
|
|
||||||
alert("Debe subir la foto del colaborador.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -147,83 +361,111 @@ export default function IdCardGenerator() {
|
|||||||
<p>GomezLee Marketing · Carnet Corporativo CR80</p>
|
<p>GomezLee Marketing · Carnet Corporativo CR80</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="main-container">
|
<div className="main-container" style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
|
||||||
<div className="panel">
|
{/* FORMULARIO MASIVO EXCEL */}
|
||||||
|
<div className="panel" style={{ minWidth: '320px' }}>
|
||||||
|
<div className="preview-badge" style={{ background: '#FFF3E0', color: '#E65100' }}>
|
||||||
|
<div className="dot" style={{ background: '#E65100' }}></div>
|
||||||
|
<span>Módulo de Lotes Automáticos</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="panel-section">
|
||||||
|
<div className="panel-section-title" style={{ display: 'flex', alignItems: 'center', gap: '6px', position: 'relative' }}>
|
||||||
|
<span>Carga Masiva de Colaboradores</span>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
width: '16px', height: '16px', borderRadius: '50%',
|
||||||
|
background: '#cbd5e1', color: '#334155', fontSize: '11px',
|
||||||
|
fontWeight: 'bold', cursor: 'help', userSelect: 'none'
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => setShowTooltip(true)}
|
||||||
|
onMouseLeave={() => setShowTooltip(false)}
|
||||||
|
>
|
||||||
|
?
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showTooltip && (
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', top: '24px', left: '0', right: '0',
|
||||||
|
background: '#1e293b', color: '#ffffff', padding: '10px',
|
||||||
|
borderRadius: '6px', fontSize: '11px', lineHeight: '1.4',
|
||||||
|
zIndex: '99', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
|
||||||
|
fontWeight: 'normal', textTransform: 'none'
|
||||||
|
}}>
|
||||||
|
Formato de columnas requeridas en el Excel: <br />
|
||||||
|
<b style={{ color: '#6CC24A' }}>nombre, puesto, cliente/proyecto, cedula, lenguaje, foto_url</b>.<br />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="upload-btn" style={{ background: '#475569', marginTop: '12px' }} onClick={() => excelInputRef.current.click()}>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||||||
|
<polyline points="14 2 14 8 20 8" />
|
||||||
|
<line x1="16" y1="13" x2="8" y2="13" />
|
||||||
|
<line x1="16" y1="17" x2="8" y2="17" />
|
||||||
|
</svg>
|
||||||
|
Seleccionar Archivo Excel
|
||||||
|
</div>
|
||||||
|
<input type="file" accept=".xlsx, .xls, .csv" style={{ display: 'none' }} ref={excelInputRef} onChange={handleExcelUpload} />
|
||||||
|
|
||||||
|
{bulkStatusText && (
|
||||||
|
<div style={{ fontSize: '12px', marginTop: '8px', fontWeight: '500', color: '#475569' }}>
|
||||||
|
{bulkStatusText}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="divider"></div>
|
||||||
|
|
||||||
|
<div className="panel-section">
|
||||||
|
<div className="panel-section-title">Exportar Lote</div>
|
||||||
|
<button
|
||||||
|
className="export-btn blue"
|
||||||
|
disabled={bulkDownloadStatus.processing || bulkEmployees.length === 0}
|
||||||
|
onClick={triggerBulkDownload}
|
||||||
|
style={{ opacity: bulkEmployees.length === 0 ? 0.6 : 1 }}
|
||||||
|
>
|
||||||
|
{bulkDownloadStatus.text}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FORMULARIO INDIVIDUAL */}
|
||||||
|
<div className="panel">
|
||||||
<div className="preview-badge">
|
<div className="preview-badge">
|
||||||
<div className="dot"></div>
|
<div className="dot"></div>
|
||||||
<span>Vista previa en tiempo real</span>
|
<span>Vista previa en tiempo real</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Sección Colaborador */}
|
|
||||||
<div className="panel-section">
|
<div className="panel-section">
|
||||||
<div className="panel-section-title">Colaborador</div>
|
<div className="panel-section-title">Colaborador</div>
|
||||||
|
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<label>Nombre</label>
|
<label>Nombre</label>
|
||||||
<input
|
<input type="text" placeholder="Ej: Alexi Zabala" value={name} onChange={(e) => setName(e.target.value)} />
|
||||||
type="text"
|
|
||||||
id="inputName"
|
|
||||||
placeholder="Ej: Alexi Zabala"
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<label>Puesto</label>
|
<label>Puesto</label>
|
||||||
<input
|
<input type="text" placeholder="Ej: Mercaderista" value={role} onChange={(e) => setRole(e.target.value)} />
|
||||||
type="text"
|
|
||||||
id="inputRole"
|
|
||||||
placeholder="Ej: Mercaderista"
|
|
||||||
value={role}
|
|
||||||
onChange={(e) => setRole(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="upload-btn" onClick={() => !photoProcessing && fileInputRef.current.click()} style={{ opacity: photoProcessing ? 0.6 : 1, cursor: photoProcessing ? 'wait' : 'pointer' }}>
|
||||||
<div className="upload-btn" onClick={() => fileInputRef.current.click()}>
|
{photoProcessing ? '⏳ Procesando foto con IA...' : 'Subir foto del colaborador'}
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
||||||
<circle cx="7" cy="5" r="3" stroke="currentColor" strokeWidth="1.2" />
|
|
||||||
<path d="M1 12c0-3.5 12-3.5 12 0" stroke="currentColor" strokeWidth="1.2" />
|
|
||||||
</svg>
|
|
||||||
Subir foto del colaborador
|
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input type="file" accept="image/*" style={{ display: 'none' }} ref={fileInputRef} onChange={handlePhotoUpload} />
|
||||||
type="file"
|
|
||||||
id="photoInput"
|
|
||||||
accept="image/*"
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
ref={fileInputRef}
|
|
||||||
onChange={handlePhotoUpload}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="divider"></div>
|
<div className="divider"></div>
|
||||||
|
|
||||||
{/* Sección Cliente / Proyecto */}
|
|
||||||
<div className="panel-section">
|
<div className="panel-section">
|
||||||
<div className="panel-section-title">Cliente / Proyecto</div>
|
<div className="panel-section-title">Cliente / Proyecto</div>
|
||||||
|
|
||||||
<div className="lang-container">
|
<div className="lang-container">
|
||||||
<button
|
<button type="button" className={`lang-btn ${language === 'Esp' ? 'active' : ''}`} onClick={() => setLanguage('Esp')}>Español</button>
|
||||||
type="button"
|
<button type="button" className={`lang-btn ${language === 'Ing' ? 'active' : ''}`} onClick={() => setLanguage('Ing')}>Inglés</button>
|
||||||
className={`lang-btn ${language === 'Esp' ? 'active' : ''}`}
|
|
||||||
onClick={() => handleLanguageChange('Esp')}
|
|
||||||
>
|
|
||||||
Español
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`lang-btn ${language === 'Ing' ? 'active' : ''}`}
|
|
||||||
onClick={() => handleLanguageChange('Ing')}
|
|
||||||
>
|
|
||||||
Inglés
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<label>Seleccionar Cliente</label>
|
<label>Seleccionar Cliente</label>
|
||||||
<select id="selectClient" value={selectedClient} onChange={handleClientChange}>
|
<select value={selectedClient} onChange={(e) => setSelectedClient(e.target.value)}>
|
||||||
<option value="Generico">Genérico (Por defecto)</option>
|
<option value="Generico">Genérico (Por defecto)</option>
|
||||||
<option value="Claro">Claro</option>
|
<option value="Claro">Claro</option>
|
||||||
<option value="Colgate">Colgate</option>
|
<option value="Colgate">Colgate</option>
|
||||||
@@ -240,103 +482,77 @@ export default function IdCardGenerator() {
|
|||||||
|
|
||||||
<div className="divider"></div>
|
<div className="divider"></div>
|
||||||
|
|
||||||
{/* Sección Código QR */}
|
|
||||||
<div className="panel-section">
|
<div className="panel-section">
|
||||||
<div className="panel-section-title">Código QR</div>
|
<div className="panel-section-title">Código QR</div>
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<label>ID del empleado</label>
|
<label>ID del empleado / Cédula</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="inputQR"
|
placeholder="Ej: 123456789 (Sin guiones ni espacios)"
|
||||||
placeholder="Ej: 12345"
|
|
||||||
value={employeeId}
|
value={employeeId}
|
||||||
onChange={(e) => setEmployeeId(e.target.value)}
|
onChange={handleEmployeeIdChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button className="export-btn" style={{ background: '#6CC24A', marginTop: '2px' }} onClick={() => renderQRCode(employeeId, qrCanvasRef.current)}>
|
||||||
className="export-btn"
|
|
||||||
style={{ background: '#6CC24A', marginTop: '2px' }}
|
|
||||||
onClick={triggerGenerateQR}
|
|
||||||
>
|
|
||||||
⟳ Generar QR
|
⟳ Generar QR
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="divider"></div>
|
<div className="divider"></div>
|
||||||
|
|
||||||
{/* Sección Exportar */}
|
|
||||||
<div className="panel-section">
|
<div className="panel-section">
|
||||||
<div className="panel-section-title">Exportar</div>
|
<div className="panel-section-title">Exportar</div>
|
||||||
<button
|
<button className="export-btn blue" disabled={downloadStatus.processing || !isFormComplete} onClick={triggerDownload} style={{ opacity: (!isFormComplete || downloadStatus.processing) ? 0.6 : 1 }}>
|
||||||
className="export-btn blue"
|
|
||||||
id="btnDownload"
|
|
||||||
disabled={downloadStatus.processing}
|
|
||||||
onClick={triggerDownload}
|
|
||||||
>
|
|
||||||
{downloadStatus.text}
|
{downloadStatus.text}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* --- STAGE: Vista previa de las tarjetas ─── */}
|
{/* VISTA PREVIA */}
|
||||||
<div className="stage">
|
<div className="stage">
|
||||||
|
|
||||||
{/* Frente */}
|
|
||||||
<div className="card-wrap">
|
<div className="card-wrap">
|
||||||
<div className="card-label">Frente</div>
|
<div className="card-label">Frente</div>
|
||||||
<div
|
<div className="card" id="cardFront" style={{ backgroundImage: `url('${baseUrl}images/AF GLM Frente.png')` }}>
|
||||||
className="card"
|
<div className="front-photo-frame" style={{ position: 'relative', overflow: 'hidden' }}>
|
||||||
id="cardFront"
|
|
||||||
style={{ backgroundImage: `url('${baseUrl}images/AF GLM Frente.png')` }}
|
|
||||||
>
|
|
||||||
<div className="front-photo-frame" id="photoFrame" style={{ position: 'relative', overflow: 'hidden' }}>
|
|
||||||
{photoSrc ? (
|
{photoSrc ? (
|
||||||
<img
|
<img src={photoSrc} alt="Foto Colaborador" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
||||||
id="photoImg"
|
) : (null)}
|
||||||
src={photoSrc}
|
{photoProcessing && (
|
||||||
alt="Foto Colaborador"
|
<div style={{
|
||||||
style={{
|
position: 'absolute', inset: 0, display: 'flex',
|
||||||
width: '100%',
|
alignItems: 'center', justifyContent: 'center',
|
||||||
height: '100%',
|
background: 'rgba(0,0,0,0.45)', color: '#fff',
|
||||||
objectFit: 'cover',
|
fontSize: '13px', fontWeight: '600', textAlign: 'center', padding: '8px'
|
||||||
display: 'block'
|
}}>
|
||||||
}}
|
⏳ Editando foto con IA...
|
||||||
/>
|
</div>
|
||||||
) : (
|
)}
|
||||||
<svg className="placeholder-svg" id="photoPlaceholder" viewBox="0 0 28 28" fill="none" style={{ width: '60%', height: '60%', opacity: 0.4 }}>
|
{!photoSrc && (
|
||||||
|
<svg className="placeholder-svg" viewBox="0 0 28 28" fill="none" style={{ width: '60%', height: '60%', opacity: 0.4 }}>
|
||||||
<circle cx="14" cy="10" r="5.5" stroke="currentColor" strokeWidth="1.5" />
|
<circle cx="14" cy="10" r="5.5" stroke="currentColor" strokeWidth="1.5" />
|
||||||
<path d="M3 24c0-6 22-6 22 0" stroke="currentColor" strokeWidth="1.5" />
|
<path d="M3 24c0-6 22-6 22 0" stroke="currentColor" strokeWidth="1.5" />
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="front-dynamic-name">{name ? name.toUpperCase() : 'NOMBRE APELLIDO'}</div>
|
||||||
<div className="front-dynamic-name" id="displayName">
|
<div className="front-dynamic-role">{role ? role.toUpperCase() : 'PUESTO'}</div>
|
||||||
{name ? name.toUpperCase() : 'NOMBRE APELLIDO'}
|
|
||||||
</div>
|
|
||||||
<div className="front-dynamic-role" id="displayRole">
|
|
||||||
{role ? role.toUpperCase() : 'PUESTO'}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Reverso */}
|
|
||||||
<div className="card-wrap">
|
<div className="card-wrap">
|
||||||
<div className="card-label">Reverso</div>
|
<div className="card-label">Reverso</div>
|
||||||
<div
|
<div
|
||||||
className="card"
|
className="card"
|
||||||
id="cardBack"
|
id="cardBack"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url('${baseUrl}${selectedClient === 'Colgate' ? 'images/GLM Colgate' : 'images/AF ' + selectedClient} ${language}.png')`
|
backgroundImage: `url('${baseUrl}${(clientTemplates[language] || clientTemplates['Esp'])[selectedClient] || (clientTemplates[language] || clientTemplates['Esp'])['Generico']}')`
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="back-qr-zone">
|
<div className="back-qr-zone">
|
||||||
{/* Asignamos la referencia de React para un control de pixeles seguro */}
|
<canvas ref={qrCanvasRef} width={55} height={55}></canvas>
|
||||||
<canvas ref={qrCanvasRef} width="55" height="55"></canvas>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -0,0 +1,155 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--azul-glm: #4F758B;
|
||||||
|
--azul-medio: #5B7F95;
|
||||||
|
--acero-claro: #6B8FA3;
|
||||||
|
--verde-glm: #6CC24A;
|
||||||
|
--verde-claro: #A4D65E;
|
||||||
|
--verde-bg: #EEF6E8;
|
||||||
|
--azul-seccion: #D6E8F4;
|
||||||
|
--gris-oscuro: #4A4A4A;
|
||||||
|
--gris-medio: #D0D0D0;
|
||||||
|
--gris-claro: #F5F5F5;
|
||||||
|
--blanco: #FFFFFF;
|
||||||
|
--naranja: #FF6A13;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page {
|
||||||
|
min-height: 90vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-page.loading .login-card {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
background: var(--blanco);
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 8px 32px rgba(79, 117, 139, 0.12);
|
||||||
|
padding: 48px 40px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid var(--gris-medio);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 180px;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--azul-glm);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-divider {
|
||||||
|
height: 2px;
|
||||||
|
background: var(--verde-glm);
|
||||||
|
margin: 24px 0;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-google {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px 24px;
|
||||||
|
background: var(--blanco);
|
||||||
|
border: 2px solid var(--gris-medio);
|
||||||
|
border-radius: 10px;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gris-oscuro);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-google:hover:not(:disabled) {
|
||||||
|
border-color: var(--verde-glm);
|
||||||
|
background: var(--verde-bg);
|
||||||
|
color: var(--azul-glm);
|
||||||
|
box-shadow: 0 4px 16px rgba(108, 194, 74, 0.2);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-google:active:not(:disabled) {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-google:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.google-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.domain-hint {
|
||||||
|
margin-top: 14px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--acero-claro);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #FDECEA;
|
||||||
|
border: 1px solid #F5C6CB;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #C0392B;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 3px solid var(--gris-medio);
|
||||||
|
border-top-color: var(--verde-glm);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
margin: 16px auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.login-card {
|
||||||
|
padding: 36px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { supabase } from '../services/supabase';
|
||||||
|
import './Login.css';
|
||||||
|
|
||||||
|
const ALLOWED_DOMAIN = '@gomezleemarketing.com';
|
||||||
|
const GLM_LOGO = 'https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM_completo.png';
|
||||||
|
|
||||||
|
export default function Login() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
supabase.auth.getSession().then(({ data: { session } }) => {
|
||||||
|
if (session?.user?.email?.endsWith(ALLOWED_DOMAIN)) {
|
||||||
|
navigate('/empleado-id/');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [navigate]);
|
||||||
|
|
||||||
|
const handleGoogleLogin = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
const redirectUrl = `${window.location.origin}/empleado-id/`;
|
||||||
|
|
||||||
|
const { error: authError } = await supabase.auth.signInWithOAuth({
|
||||||
|
provider: 'google',
|
||||||
|
options: {
|
||||||
|
redirectTo: redirectUrl,
|
||||||
|
queryParams: {
|
||||||
|
hd: 'gomezleemarketing.com',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (authError) {
|
||||||
|
setError(authError.message);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="login-page loading">
|
||||||
|
<div className="login-card">
|
||||||
|
<img src={GLM_LOGO} alt="GLM" className="logo" />
|
||||||
|
<div className="spinner" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="login-page">
|
||||||
|
<div className="login-card">
|
||||||
|
<img src={GLM_LOGO} alt="GomezLee Marketing" className="logo" />
|
||||||
|
|
||||||
|
<h1 className="title">GLM ID Card Generator</h1>
|
||||||
|
|
||||||
|
<div className="login-divider" />
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn-google"
|
||||||
|
onClick={handleGoogleLogin}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
<svg className="google-icon" viewBox="0 0 24 24" width="20" height="20">
|
||||||
|
<path
|
||||||
|
fill="#4285F4"
|
||||||
|
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill="#34A853"
|
||||||
|
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill="#FBBC05"
|
||||||
|
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill="#EA4335"
|
||||||
|
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>Continuar con Google</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p className="domain-hint">Solo cuentas @gomezleemarketing.com</p>
|
||||||
|
|
||||||
|
{error && <div className="error-message">{error}</div>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
+272
-56
@@ -3,7 +3,7 @@ export const clientTemplates = {
|
|||||||
'Esp': {
|
'Esp': {
|
||||||
'Generico': 'images/AF Generico Esp.png',
|
'Generico': 'images/AF Generico Esp.png',
|
||||||
'Claro': 'images/AF Claro Esp.png',
|
'Claro': 'images/AF Claro Esp.png',
|
||||||
'Colgate': 'images/GLM Colgate Esp.png',
|
'Colgate': 'images/AF Colgate Esp.png',
|
||||||
'KitchenAid': 'images/AF KitchenAid Esp.png',
|
'KitchenAid': 'images/AF KitchenAid Esp.png',
|
||||||
'Kraft': 'images/AF Kraft Esp.png',
|
'Kraft': 'images/AF Kraft Esp.png',
|
||||||
'Motorola': 'images/AF Motorola Esp.png',
|
'Motorola': 'images/AF Motorola Esp.png',
|
||||||
@@ -15,7 +15,7 @@ export const clientTemplates = {
|
|||||||
'Ing': {
|
'Ing': {
|
||||||
'Generico': 'images/AF Generico Ing.png',
|
'Generico': 'images/AF Generico Ing.png',
|
||||||
'Claro': 'images/AF Claro Ing.png',
|
'Claro': 'images/AF Claro Ing.png',
|
||||||
'Colgate': 'images/GLM Colgate Ing.png',
|
'Colgate': 'images/AF Colgate Ing.png',
|
||||||
'KitchenAid': 'images/AF KitchenAid Ing.png',
|
'KitchenAid': 'images/AF KitchenAid Ing.png',
|
||||||
'Kraft': 'images/AF Kraft Ing.png',
|
'Kraft': 'images/AF Kraft Ing.png',
|
||||||
'Motorola': 'images/AF Motorola Ing.png',
|
'Motorola': 'images/AF Motorola Ing.png',
|
||||||
@@ -37,17 +37,94 @@ function loadScript(src, globalKey) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const getQRLib = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js', 'QRCode');
|
export const getQRLib = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js', 'QRCode');
|
||||||
const getHtml2Canvas = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', 'html2canvas');
|
const getHtml2Canvas = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', 'html2canvas');
|
||||||
|
export const getJSZip = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js', 'JSZip');
|
||||||
|
export const getXLSXLib = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js', 'XLSX');
|
||||||
|
|
||||||
// ── GENERADOR DE QR NATIVO (REACT RENDERING) ──
|
export function convertDriveUrlToDirect(url) {
|
||||||
|
if (!url) return '';
|
||||||
|
|
||||||
|
if (!url.includes('drive.google.com') && !url.includes('docs.google.com')) {
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const regExp = /(?:https?:\/\/)?(?:drive\.google\.com\/)(?:file\/d\/|open\?id=)([\w-]+)/;
|
||||||
|
const match = url.match(regExp);
|
||||||
|
if (match && match[1]) {
|
||||||
|
// Endpoint optimizado para saltar bloqueos pesados de descargas directas anónimas
|
||||||
|
return `https://drive.google.com/thumbnail?id=${match[1]}&sz=w1000`;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error convirtiendo la URL de Drive:", e);
|
||||||
|
}
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function fetchImageAsBlob(url) {
|
||||||
|
if (!url) return null;
|
||||||
|
|
||||||
|
if (url.startsWith('blob:') || url.startsWith('data:')) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url);
|
||||||
|
if (response.ok) return await response.blob();
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error al obtener Blob local de URL blob/data:", e);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (url.includes('drive.google.com') || url.includes('docs.google.com')) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url);
|
||||||
|
if (response.ok) return await response.blob();
|
||||||
|
} catch {
|
||||||
|
console.warn("No se pudo obtener el Blob directo de Drive debido a restricciones CORS.");
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const proxyUrl = `https://images.weserv.nl/?url=${encodeURIComponent(url)}&default=${encodeURIComponent(url)}`;
|
||||||
|
const response = await fetch(proxyUrl);
|
||||||
|
if (!response.ok) throw new Error("Error en respuesta de red proxy");
|
||||||
|
return await response.blob();
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error haciendo fetch con bypass CORS a la imagen externa:", e);
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, { mode: 'cors' });
|
||||||
|
return await response.blob();
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function preloadImage(src) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
if (!src) return resolve(null);
|
||||||
|
const img = new Image();
|
||||||
|
img.crossOrigin = 'anonymous';
|
||||||
|
img.onload = () => resolve(src);
|
||||||
|
img.onerror = () => {
|
||||||
|
const retryImg = new Image();
|
||||||
|
retryImg.onload = () => resolve(src);
|
||||||
|
retryImg.onerror = () => resolve(null);
|
||||||
|
retryImg.src = src;
|
||||||
|
};
|
||||||
|
img.src = src;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── GENERADOR DE QR NATIVO (Garantiza ID limpio en URL) ──
|
||||||
export async function renderQRCode(employeeId, canvasElement) {
|
export async function renderQRCode(employeeId, canvasElement) {
|
||||||
if (!canvasElement) return;
|
if (!canvasElement) return;
|
||||||
const text = (employeeId || '').trim();
|
const cleanId = (employeeId || '').replace(/[-\s]/g, '');
|
||||||
const ctx = canvasElement.getContext('2d');
|
const ctx = canvasElement.getContext('2d');
|
||||||
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
||||||
|
|
||||||
if (text.length <= 2) return;
|
if (cleanId.length <= 2) return;
|
||||||
|
|
||||||
const QRCodeLib = await getQRLib();
|
const QRCodeLib = await getQRLib();
|
||||||
const tmp = document.createElement('div');
|
const tmp = document.createElement('div');
|
||||||
@@ -55,7 +132,7 @@ export async function renderQRCode(employeeId, canvasElement) {
|
|||||||
document.body.appendChild(tmp);
|
document.body.appendChild(tmp);
|
||||||
|
|
||||||
new QRCodeLib(tmp, {
|
new QRCodeLib(tmp, {
|
||||||
text: `http://localhost:5173/employee/${text}`,
|
text: `http://localhost:5173/empleado-id/${cleanId}`,
|
||||||
width: 55,
|
width: 55,
|
||||||
height: 55,
|
height: 55,
|
||||||
colorDark: '#000000',
|
colorDark: '#000000',
|
||||||
@@ -63,32 +140,42 @@ export async function renderQRCode(employeeId, canvasElement) {
|
|||||||
correctLevel: QRCodeLib.CorrectLevel.M
|
correctLevel: QRCodeLib.CorrectLevel.M
|
||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
await new Promise((resolve) => setTimeout(resolve, 60));
|
||||||
const img = tmp.querySelector('img') || tmp.querySelector('canvas');
|
|
||||||
|
|
||||||
const drawIt = (src) => {
|
const img = tmp.querySelector('img') || tmp.querySelector('canvas');
|
||||||
|
|
||||||
|
const drawIt = (src) => {
|
||||||
|
return new Promise((res) => {
|
||||||
const i = new Image();
|
const i = new Image();
|
||||||
i.onload = () => {
|
i.onload = () => {
|
||||||
ctx.fillStyle = '#ffffff';
|
ctx.fillStyle = '#ffffff';
|
||||||
ctx.fillRect(0, 0, 55, 55);
|
ctx.fillRect(0, 0, 55, 55);
|
||||||
ctx.drawImage(i, 0, 0, 55, 55);
|
ctx.drawImage(i, 0, 0, 55, 55);
|
||||||
if (tmp.parentNode) document.body.removeChild(tmp);
|
if (tmp.parentNode) document.body.removeChild(tmp);
|
||||||
|
res();
|
||||||
};
|
};
|
||||||
i.src = src;
|
i.src = src;
|
||||||
};
|
});
|
||||||
|
};
|
||||||
|
|
||||||
if (img && img.tagName === 'CANVAS') {
|
if (img && img.tagName === 'CANVAS') {
|
||||||
drawIt(img.toDataURL());
|
await drawIt(img.toDataURL());
|
||||||
} else if (img) {
|
} else if (img) {
|
||||||
if (img.complete) drawIt(img.src);
|
if (img.complete) await drawIt(img.src);
|
||||||
else img.onload = () => drawIt(img.src);
|
else {
|
||||||
} else {
|
await new Promise((res) => {
|
||||||
if (tmp.parentNode) document.body.removeChild(tmp);
|
img.onload = async () => {
|
||||||
|
await drawIt(img.src);
|
||||||
|
res();
|
||||||
|
};
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}, 50);
|
} else {
|
||||||
|
if (tmp.parentNode) document.body.removeChild(tmp);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── ENGINE DE PROCESAMIENTO ULTRA MAX QUALITY (650x1004) ──
|
// ── ENGINE DE PROCESAMIENTO INDIVIDUAL ──
|
||||||
export async function downloadIDCards(config) {
|
export async function downloadIDCards(config) {
|
||||||
const { name, role, selectedClient, language, photoSrc, baseUrl, qrCanvas, onStateChange } = config;
|
const { name, role, selectedClient, language, photoSrc, baseUrl, qrCanvas, onStateChange } = config;
|
||||||
|
|
||||||
@@ -97,13 +184,11 @@ export async function downloadIDCards(config) {
|
|||||||
const html2canvasLib = await getHtml2Canvas();
|
const html2canvasLib = await getHtml2Canvas();
|
||||||
const cleanName = name.trim().replace(/\s+/g, '') || 'Empleado';
|
const cleanName = name.trim().replace(/\s+/g, '') || 'Empleado';
|
||||||
|
|
||||||
// Resolver rutas absolutas
|
|
||||||
const frontBgUrl = `${baseUrl}images/AF GLM Frente.png`;
|
const frontBgUrl = `${baseUrl}images/AF GLM Frente.png`;
|
||||||
const currentGroup = clientTemplates[language] || clientTemplates['Esp'];
|
const currentGroup = clientTemplates[language] || clientTemplates['Esp'];
|
||||||
const backBgFile = currentGroup[selectedClient] || 'images/AF Generico Esp.png';
|
const backBgFile = currentGroup[selectedClient] || 'images/AF Generico Esp.png';
|
||||||
const backBgUrl = `${baseUrl}${backBgFile}`;
|
const backBgUrl = `${baseUrl}${backBgFile}`;
|
||||||
|
|
||||||
// Sandbox virtual aislado
|
|
||||||
const sandbox = document.createElement('div');
|
const sandbox = document.createElement('div');
|
||||||
sandbox.style.position = 'fixed';
|
sandbox.style.position = 'fixed';
|
||||||
sandbox.style.top = '-9999px';
|
sandbox.style.top = '-9999px';
|
||||||
@@ -125,27 +210,23 @@ export async function downloadIDCards(config) {
|
|||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 1. Frente Virtual en tamaño real
|
|
||||||
const vFront = document.createElement('div');
|
const vFront = document.createElement('div');
|
||||||
vFront.style.cssText = cardStyleBase;
|
vFront.style.cssText = cardStyleBase;
|
||||||
vFront.style.backgroundImage = `url('${frontBgUrl}')`;
|
vFront.style.backgroundImage = `url('${frontBgUrl}')`;
|
||||||
|
|
||||||
let photoStyleHtml = `background: #e1e9ee; display: flex; align-items: center; justify-content: center;`;
|
let photoTagHtml = `
|
||||||
let innerPhotoContent = `<svg style="width:100px; height:100px; opacity:0.3; color:#4F758B;" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="10" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 24c0-6 22-6 22 0" stroke="currentColor" stroke-width="1.5"/></svg>`;
|
<div style="width:100%; height:100%; background:#e1e9ee; display:flex; align-items:center; justify-content: center;">
|
||||||
|
<svg style="width:100px; height:100px; opacity:0.3; color:#4F758B;" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="10" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 24c0-6 22-6 22 0" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
if (photoSrc) {
|
if (photoSrc) {
|
||||||
photoStyleHtml = `
|
photoTagHtml = `<div style="width:100%; height:100%; background-image:url('${photoSrc}'); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>`;
|
||||||
background-image: url('${photoSrc}') !important;
|
|
||||||
background-size: cover !important;
|
|
||||||
background-position: center center !important;
|
|
||||||
background-repeat: no-repeat !important;
|
|
||||||
`;
|
|
||||||
innerPhotoContent = '';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
vFront.innerHTML = `
|
vFront.innerHTML = `
|
||||||
<div style="position:absolute; top:260.5px; left:131.5px; width:384px; height:384px; border-radius:50%; overflow:hidden; z-index:5; ${photoStyleHtml}">
|
<div style="position:absolute; top:260.5px; left:131.5px; width:384px; height:384px; border-radius:50%; overflow:hidden; z-index:5;">
|
||||||
${innerPhotoContent}
|
${photoTagHtml}
|
||||||
</div>
|
</div>
|
||||||
<div style="position:absolute; top:715px; left:20px; right:20px; font-size:38px; font-weight:900; color:#FFFFFF; text-align:center; text-transform:uppercase; letter-spacing:1px; word-break:break-word; z-index:5;">
|
<div style="position:absolute; top:715px; left:20px; right:20px; font-size:38px; font-weight:900; color:#FFFFFF; text-align:center; text-transform:uppercase; letter-spacing:1px; word-break:break-word; z-index:5;">
|
||||||
${name.toUpperCase() || 'NOMBRE APELLIDO'}
|
${name.toUpperCase() || 'NOMBRE APELLIDO'}
|
||||||
@@ -155,24 +236,12 @@ export async function downloadIDCards(config) {
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 2. Reverso Virtual en tamaño real
|
|
||||||
const vBack = document.createElement('div');
|
const vBack = document.createElement('div');
|
||||||
vBack.style.cssText = cardStyleBase;
|
vBack.style.cssText = cardStyleBase;
|
||||||
vBack.style.backgroundImage = `url('${backBgUrl}')`;
|
vBack.style.backgroundImage = `url('${backBgUrl}')`;
|
||||||
|
|
||||||
const vQRZone = document.createElement('div');
|
const vQRZone = document.createElement('div');
|
||||||
vQRZone.style.cssText = `
|
vQRZone.style.cssText = `position: absolute; bottom: 27px; right: 27px; background: #ffffff; padding: 11px; border-radius: 16px; display: flex; align-items: center; justify-content: center; z-index: 5;`;
|
||||||
position: absolute;
|
|
||||||
bottom: 27px;
|
|
||||||
right: 27px;
|
|
||||||
background: #ffffff;
|
|
||||||
padding: 11px;
|
|
||||||
border-radius: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 5;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const vQRCanvas = document.createElement('canvas');
|
const vQRCanvas = document.createElement('canvas');
|
||||||
vQRCanvas.width = 149;
|
vQRCanvas.width = 149;
|
||||||
@@ -191,15 +260,7 @@ export async function downloadIDCards(config) {
|
|||||||
sandbox.appendChild(vFront);
|
sandbox.appendChild(vFront);
|
||||||
sandbox.appendChild(vBack);
|
sandbox.appendChild(vBack);
|
||||||
|
|
||||||
const renderOpts = {
|
const renderOpts = { scale: 1, useCORS: true, allowTaint: false, backgroundColor: null, logging: false, width: 650, height: 1004 };
|
||||||
scale: 1,
|
|
||||||
useCORS: true,
|
|
||||||
allowTaint: false,
|
|
||||||
backgroundColor: null,
|
|
||||||
logging: false,
|
|
||||||
width: 650,
|
|
||||||
height: 1004
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const frontCanvas = await html2canvasLib(vFront, renderOpts);
|
const frontCanvas = await html2canvasLib(vFront, renderOpts);
|
||||||
@@ -215,6 +276,161 @@ export async function downloadIDCards(config) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── ENGINE MASIVO CON SOLUCIÓN TOTAL POR INYECCIÓN DE IMG CORS NATIVA ──
|
||||||
|
export async function downloadBulkIDCards({ employees, baseUrl, onStateChange, onProcessEmployeePhoto }) {
|
||||||
|
if (onStateChange) onStateChange({ processing: true, text: 'Descargando...' });
|
||||||
|
|
||||||
|
const html2canvasLib = await getHtml2Canvas();
|
||||||
|
const JSZipLib = await getJSZip();
|
||||||
|
const zip = new JSZipLib();
|
||||||
|
|
||||||
|
const hiddenQRCanvas = document.createElement('canvas');
|
||||||
|
hiddenQRCanvas.width = 55;
|
||||||
|
hiddenQRCanvas.height = 55;
|
||||||
|
|
||||||
|
const sandbox = document.createElement('div');
|
||||||
|
sandbox.style.position = 'fixed';
|
||||||
|
sandbox.style.top = '-9999px';
|
||||||
|
sandbox.style.left = '-9999px';
|
||||||
|
sandbox.style.width = '1400px';
|
||||||
|
document.body.appendChild(sandbox);
|
||||||
|
|
||||||
|
const cardStyleBase = `
|
||||||
|
position: relative;
|
||||||
|
width: 650px;
|
||||||
|
height: 1004px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const renderOpts = { scale: 1, useCORS: true, allowTaint: false, backgroundColor: null, logging: false, width: 650, height: 1004 };
|
||||||
|
|
||||||
|
for (let i = 0; i < employees.length; i++) {
|
||||||
|
const emp = employees[i];
|
||||||
|
const currentClient = emp.selectedClient || 'Generico';
|
||||||
|
const sanitizedEmpName = (emp.name || '').trim().replace(/[\\/:*?"<>|]/g, '-') || `Empleado_${i + 1}`;
|
||||||
|
const sanitizedClientName = String(currentClient).trim().replace(/[\\/:*?"<>|]/g, '-');
|
||||||
|
const folderName = `${sanitizedEmpName} - ${sanitizedClientName}`;
|
||||||
|
|
||||||
|
const strictCleanId = String(emp.employeeId || '').replace(/[-\s]/g, '');
|
||||||
|
|
||||||
|
await renderQRCode(strictCleanId, hiddenQRCanvas);
|
||||||
|
|
||||||
|
const directDriveUrl = convertDriveUrlToDirect(emp.fotoUrl);
|
||||||
|
let validatedPhotoUrl = null;
|
||||||
|
|
||||||
|
if (directDriveUrl && strictCleanId) {
|
||||||
|
try {
|
||||||
|
const blobData = await fetchImageAsBlob(directDriveUrl);
|
||||||
|
if (blobData) {
|
||||||
|
validatedPhotoUrl = URL.createObjectURL(blobData);
|
||||||
|
if (onProcessEmployeePhoto) {
|
||||||
|
await onProcessEmployeePhoto(strictCleanId, blobData, emp.selectedClient || '');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error guardando foto en Supabase para Cédula: ${strictCleanId}`, err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!validatedPhotoUrl && directDriveUrl) {
|
||||||
|
validatedPhotoUrl = await preloadImage(directDriveUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Renderizar Frente Virtual ---
|
||||||
|
const vFront = document.createElement('div');
|
||||||
|
vFront.style.cssText = cardStyleBase;
|
||||||
|
vFront.style.backgroundImage = `url('${baseUrl}images/AF GLM Frente.png')`;
|
||||||
|
|
||||||
|
// CAMBIO ESTRATÉGICO AQUÍ: Usamos una etiqueta <img> HTML real con crossorigin explícito,
|
||||||
|
// esto destruye el bloqueo "Anti-Taint" de los lienzos y obliga a html2canvas a procesar la foto de Drive.
|
||||||
|
let photoTagHtml = `
|
||||||
|
<div style="width:100%; height:100%; background:#e1e9ee; display:flex; align-items:center; justify-content: center;">
|
||||||
|
<svg style="width:100px; height:100px; opacity:0.3; color:#4F758B;" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="10" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 24c0-6 22-6 22 0" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
if (validatedPhotoUrl) {
|
||||||
|
photoTagHtml = `<div style="width:100%; height:100%; background-image:url('${validatedPhotoUrl}'); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
vFront.innerHTML = `
|
||||||
|
<div style="position:absolute; top:260.5px; left:131.5px; width:384px; height:384px; border-radius:50%; overflow:hidden; z-index:5;">
|
||||||
|
${photoTagHtml}
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute; top:715px; left:20px; right:20px; font-size:38px; font-weight:900; color:#FFFFFF; text-align:center; text-transform:uppercase; letter-spacing:1px; word-break:break-word; z-index:5;">
|
||||||
|
${emp.name.toUpperCase()}
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute; bottom:32px; right:15px; font-size:26px; font-weight:700; color:#6B8499; text-align:right; text-transform:uppercase; letter-spacing:1px; max-width:550px; white-space:nowrap; z-index:5;">
|
||||||
|
${emp.role.toUpperCase()}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
sandbox.appendChild(vFront);
|
||||||
|
|
||||||
|
// --- Renderizar Reverso Virtual ---
|
||||||
|
const currentGroup = clientTemplates[emp.language] || clientTemplates['Esp'];
|
||||||
|
const backBgFile = currentGroup[currentClient] || currentGroup['Generico'];
|
||||||
|
const backBgUrl = `${baseUrl}${backBgFile}`;
|
||||||
|
|
||||||
|
const vBack = document.createElement('div');
|
||||||
|
vBack.style.cssText = cardStyleBase;
|
||||||
|
vBack.style.backgroundImage = `url('${backBgUrl}')`;
|
||||||
|
|
||||||
|
const vQRZone = document.createElement('div');
|
||||||
|
vQRZone.style.cssText = `position: absolute; bottom: 27px; right: 27px; background: #ffffff; padding: 11px; border-radius: 16px; display: flex; align-items: center; justify-content: center; z-index: 5;`;
|
||||||
|
|
||||||
|
const vQRCanvas = document.createElement('canvas');
|
||||||
|
vQRCanvas.width = 149;
|
||||||
|
vQRCanvas.height = 149;
|
||||||
|
vQRCanvas.style.width = '100px';
|
||||||
|
vQRCanvas.style.height = '100px';
|
||||||
|
const vQRContext = vQRCanvas.getContext('2d');
|
||||||
|
if (vQRContext) {
|
||||||
|
vQRContext.imageSmoothingEnabled = false;
|
||||||
|
vQRContext.drawImage(hiddenQRCanvas, 0, 0, 149, 149);
|
||||||
|
}
|
||||||
|
vQRZone.appendChild(vQRCanvas);
|
||||||
|
vBack.appendChild(vQRZone);
|
||||||
|
sandbox.appendChild(vBack);
|
||||||
|
|
||||||
|
// Forzar un retraso mínimo de microsegundos para asegurar el render interno
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 30));
|
||||||
|
|
||||||
|
// Capturas gráficas del ZIP
|
||||||
|
const frontCanvas = await html2canvasLib(vFront, renderOpts);
|
||||||
|
const frontData = frontCanvas.toDataURL('image/png').split(',')[1];
|
||||||
|
zip.file(`${folderName}/Frente.png`, frontData, { base64: true });
|
||||||
|
|
||||||
|
const backCanvas = await html2canvasLib(vBack, renderOpts);
|
||||||
|
const backData = backCanvas.toDataURL('image/png').split(',')[1];
|
||||||
|
zip.file(`${folderName}/Reverso.png`, backData, { base64: true });
|
||||||
|
|
||||||
|
if (validatedPhotoUrl && validatedPhotoUrl.startsWith('blob:')) {
|
||||||
|
URL.revokeObjectURL(validatedPhotoUrl);
|
||||||
|
}
|
||||||
|
|
||||||
|
sandbox.removeChild(vFront);
|
||||||
|
sandbox.removeChild(vBack);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sandbox.parentNode) document.body.removeChild(sandbox);
|
||||||
|
|
||||||
|
const content = await zip.generateAsync({ type: 'blob' });
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = URL.createObjectURL(content);
|
||||||
|
link.download = `Lote_Carnets_GLM.zip`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
|
||||||
|
if (onStateChange) onStateChange({ processing: false, text: '⬇ Descargar' });
|
||||||
|
}
|
||||||
|
|
||||||
function executeFileDownload(dataUrl, fileName) {
|
function executeFileDownload(dataUrl, fileName) {
|
||||||
const link = document.createElement('a');
|
const link = document.createElement('a');
|
||||||
link.href = dataUrl;
|
link.href = dataUrl;
|
||||||
|
|||||||
+84
-8
@@ -1,21 +1,97 @@
|
|||||||
import { supabase } from "./supabase";
|
import { supabase } from "./supabase";
|
||||||
|
|
||||||
export async function uploadEmployeePhoto(employeeNumber, file) {
|
/**
|
||||||
|
* Registra el cliente/proyecto de un carnet descargado en la tabla
|
||||||
|
* "carnet_empleados_creados_glm".
|
||||||
|
*
|
||||||
|
* @param {string} employeeNumber - Número de cédula limpio (sin guiones/espacios)
|
||||||
|
* @param {string} clienteProyecto - Nombre del cliente/proyecto seleccionado
|
||||||
|
* @returns {Promise<void>}
|
||||||
|
*/
|
||||||
|
export async function saveClienteProyecto(employeeNumber, clienteProyecto) {
|
||||||
|
const cleanCedula = String(employeeNumber || '').replace(/[-\s]/g, '');
|
||||||
|
const valorCliente = clienteProyecto || 'Generico';
|
||||||
|
|
||||||
const extension = file.name.split(".").pop();
|
console.log(`[Supabase] → saveClienteProyecto llamada con: cedula="${cleanCedula}", cliente_proyecto="${valorCliente}"`);
|
||||||
|
|
||||||
const fileName = `${employeeNumber}.${extension}`;
|
if (!cleanCedula) {
|
||||||
|
console.warn('[Supabase] saveClienteProyecto abortada: cédula vacía.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// CORRECCIÓN: El objeto debe llevar la cédula para que upsert funcione por conflicto
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('carnet_empleados_creados_glm')
|
||||||
|
.upsert(
|
||||||
|
{
|
||||||
|
cedula: cleanCedula,
|
||||||
|
cliente_proyecto: valorCliente
|
||||||
|
},
|
||||||
|
{ onConflict: 'cedula' }
|
||||||
|
)
|
||||||
|
.select();
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error(`[Supabase] ❌ Error guardando cliente_proyecto para cédula ${cleanCedula}:`, error);
|
||||||
|
} else {
|
||||||
|
console.log(`[Supabase] ✅ Guardado exitoso carnet_empleados_creados_glm:`, data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sube la foto de un empleado al bucket "foto_empleados".
|
||||||
|
*
|
||||||
|
* El nombre del archivo sigue el patrón:
|
||||||
|
* <cedula>_<cliente>.jpg — primera foto
|
||||||
|
* <cedula>_<cliente>1.jpg — segunda foto del mismo empleado+cliente
|
||||||
|
* <cedula>_<cliente>2.jpg — tercera, etc.
|
||||||
|
*
|
||||||
|
* @param {string} employeeNumber - Número de cédula limpio (sin guiones/espacios)
|
||||||
|
* @param {File} file - Archivo de imagen a subir
|
||||||
|
* @param {string} [clientKey=''] - Nombre del cliente/proyecto (p.ej. "claro", "nestle")
|
||||||
|
* @returns {Promise<string>} - URL pública del archivo subido
|
||||||
|
*/
|
||||||
|
export async function uploadEmployeePhoto(employeeNumber, file, clientKey = '') {
|
||||||
|
const extension = file.name.split('.').pop() || 'jpg';
|
||||||
|
|
||||||
|
// Normalizar el nombre del cliente: minúsculas, sin espacios ni caracteres especiales
|
||||||
|
const safeClient = clientKey
|
||||||
|
? '_' + clientKey.toLowerCase().replace(/[^a-z0-9]/g, '')
|
||||||
|
: '';
|
||||||
|
|
||||||
|
const baseName = `${employeeNumber}${safeClient}`;
|
||||||
|
|
||||||
|
// Buscar archivos existentes con el mismo prefijo para elegir el sufijo correcto
|
||||||
|
const { data: existingFiles } = await supabase.storage
|
||||||
|
.from('foto_empleados')
|
||||||
|
.list('', { search: baseName });
|
||||||
|
|
||||||
|
// Filtrar exactamente los archivos que tengan el mismo baseName base
|
||||||
|
const pattern = new RegExp(`^${baseName}(\\d*)\\.${extension}$`);
|
||||||
|
const matches = (existingFiles || []).filter(f => pattern.test(f.name));
|
||||||
|
|
||||||
|
let fileName;
|
||||||
|
if (matches.length === 0) {
|
||||||
|
// No existe ninguno: usar el nombre base sin sufijo numérico
|
||||||
|
fileName = `${baseName}.${extension}`;
|
||||||
|
} else {
|
||||||
|
// Extraer los sufijos numéricos usados y elegir el siguiente
|
||||||
|
const usedSuffixes = matches.map(f => {
|
||||||
|
const m = f.name.match(pattern);
|
||||||
|
return m ? parseInt(m[1] || '0', 10) : 0;
|
||||||
|
});
|
||||||
|
const nextSuffix = Math.max(...usedSuffixes) + 1;
|
||||||
|
fileName = `${baseName}${nextSuffix}.${extension}`;
|
||||||
|
}
|
||||||
|
|
||||||
const { error } = await supabase.storage
|
const { error } = await supabase.storage
|
||||||
.from("foto_empleados")
|
.from('foto_empleados')
|
||||||
.upload(fileName, file, {
|
.upload(fileName, file, { upsert: false });
|
||||||
upsert: false
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) throw error;
|
if (error) throw error;
|
||||||
|
|
||||||
const { data } = supabase.storage
|
const { data } = supabase.storage
|
||||||
.from("foto_empleados")
|
.from('foto_empleados')
|
||||||
.getPublicUrl(fileName);
|
.getPublicUrl(fileName);
|
||||||
|
|
||||||
return data.publicUrl;
|
return data.publicUrl;
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { createClient } from "@supabase/supabase-js";
|
import { createClient } from "@supabase/supabase-js";
|
||||||
|
|
||||||
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
|
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
|
||||||
const supabaseKey = import.meta.env.VITE_SUPABASE_SERVICE_ROLE_KEY;
|
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
|
||||||
|
|
||||||
export const supabase = createClient(supabaseUrl, supabaseKey);
|
// Single client for auth (uses anon key)
|
||||||
|
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
|
||||||
+1
-1
@@ -4,5 +4,5 @@ import react from '@vitejs/plugin-react'
|
|||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
base: '/employee'
|
base: '/empleado-id/'
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user