Feat: Cambios Varios 2
This commit is contained in:
2
frontend/counter-panel/.env
Normal file
2
frontend/counter-panel/.env
Normal file
@@ -0,0 +1,2 @@
|
||||
VITE_API_URL=http://localhost:5176/api
|
||||
VITE_BASE_URL=http://localhost:5176
|
||||
447
frontend/counter-panel/package-lock.json
generated
447
frontend/counter-panel/package-lock.json
generated
@@ -10,10 +10,12 @@
|
||||
"dependencies": {
|
||||
"axios": "^1.13.2",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.23.26",
|
||||
"lucide-react": "^0.561.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.11.0",
|
||||
"recharts": "^3.6.0",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"zustand": "^5.0.9"
|
||||
},
|
||||
@@ -1032,6 +1034,42 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
|
||||
"integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@standard-schema/spec": "^1.0.0",
|
||||
"@standard-schema/utils": "^0.3.0",
|
||||
"immer": "^11.0.0",
|
||||
"redux": "^5.0.1",
|
||||
"redux-thunk": "^3.1.0",
|
||||
"reselect": "^5.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
|
||||
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit/node_modules/immer": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-11.1.0.tgz",
|
||||
"integrity": "sha512-dlzb07f5LDY+tzs+iLCSXV2yuhaYfezqyZQc+n6baLECWkOMEWxkECAOnXL0ba7lsA25fM9b2jtzpu/uxo1a7g==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/pluginutils": {
|
||||
"version": "1.0.0-beta.53",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
|
||||
@@ -1347,6 +1385,18 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@standard-schema/spec": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
|
||||
"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@standard-schema/utils": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
|
||||
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tailwindcss/node": {
|
||||
"version": "4.1.18",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
|
||||
@@ -1663,6 +1713,69 @@
|
||||
"@babel/types": "^7.28.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-array": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
|
||||
"integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-color": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
|
||||
"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-ease": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
|
||||
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-interpolate": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
|
||||
"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-color": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-path": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
|
||||
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-scale": {
|
||||
"version": "4.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
|
||||
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-time": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-shape": {
|
||||
"version": "3.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
|
||||
"integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-path": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-time": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
|
||||
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/d3-timer": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
|
||||
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||
@@ -1707,6 +1820,12 @@
|
||||
"@types/react": "^19.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
|
||||
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.50.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.50.0.tgz",
|
||||
@@ -2327,6 +2446,127 @@
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-ease": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
|
||||
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
|
||||
"integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-path": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
|
||||
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-shape": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
|
||||
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-path": "^3.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-timer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||
@@ -2345,6 +2585,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/decimal.js-light": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
|
||||
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/deep-is": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
|
||||
@@ -2451,6 +2697,16 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-toolkit": {
|
||||
"version": "1.43.0",
|
||||
"resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.43.0.tgz",
|
||||
"integrity": "sha512-SKCT8AsWvYzBBuUqMk4NPwFlSdqLpJwmy6AP322ERn8W2YLIB6JBXnwMI2Qsh2gfphT3q7EKAxKb23cvFHFwKA==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"docs",
|
||||
"benchmarks"
|
||||
]
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.27.2",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
|
||||
@@ -2700,6 +2956,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
|
||||
"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
@@ -2840,6 +3102,33 @@
|
||||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "12.23.26",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.26.tgz",
|
||||
"integrity": "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.23.23",
|
||||
"motion-utils": "^12.23.6",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
@@ -3032,6 +3321,16 @@
|
||||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/immer": {
|
||||
"version": "10.2.0",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
|
||||
"integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
||||
@@ -3059,6 +3358,15 @@
|
||||
"node": ">=0.8.19"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/is-extglob": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
@@ -3546,6 +3854,21 @@
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.23.23",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
|
||||
"integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.23.6"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "12.23.6",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
|
||||
"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
@@ -3772,6 +4095,36 @@
|
||||
"react": "^19.2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "19.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
|
||||
"integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^18.2.25 || ^19",
|
||||
"react": "^18.0 || ^19",
|
||||
"redux": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
|
||||
@@ -3820,6 +4173,57 @@
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.6.0.tgz",
|
||||
"integrity": "sha512-L5bjxvQRAe26RlToBAziKUB7whaGKEwD3znoM6fz3DrTowCIC/FnJYnuq1GEzB8Zv2kdTfaxQfi5GoH0tBinyg==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"www"
|
||||
],
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "1.x.x || 2.x.x",
|
||||
"clsx": "^2.1.1",
|
||||
"decimal.js-light": "^2.5.1",
|
||||
"es-toolkit": "^1.39.3",
|
||||
"eventemitter3": "^5.0.1",
|
||||
"immer": "^10.1.1",
|
||||
"react-redux": "8.x.x || 9.x.x",
|
||||
"reselect": "5.1.1",
|
||||
"tiny-invariant": "^1.3.3",
|
||||
"use-sync-external-store": "^1.2.2",
|
||||
"victory-vendor": "^37.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
||||
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"redux": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
||||
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
@@ -3984,6 +4388,12 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
|
||||
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinyglobby": {
|
||||
"version": "0.2.15",
|
||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
|
||||
@@ -4014,6 +4424,12 @@
|
||||
"typescript": ">=4.8.4"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
@@ -4113,6 +4529,37 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
|
||||
"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/victory-vendor": {
|
||||
"version": "37.3.6",
|
||||
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
|
||||
"integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
|
||||
"license": "MIT AND ISC",
|
||||
"dependencies": {
|
||||
"@types/d3-array": "^3.0.3",
|
||||
"@types/d3-ease": "^3.0.0",
|
||||
"@types/d3-interpolate": "^3.0.1",
|
||||
"@types/d3-scale": "^4.0.2",
|
||||
"@types/d3-shape": "^3.1.0",
|
||||
"@types/d3-time": "^3.0.0",
|
||||
"@types/d3-timer": "^3.0.0",
|
||||
"d3-array": "^3.1.6",
|
||||
"d3-ease": "^3.0.1",
|
||||
"d3-interpolate": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-shape": "^3.1.0",
|
||||
"d3-time": "^3.0.0",
|
||||
"d3-timer": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "7.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
|
||||
|
||||
@@ -12,10 +12,12 @@
|
||||
"dependencies": {
|
||||
"axios": "^1.13.2",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.23.26",
|
||||
"lucide-react": "^0.561.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.11.0",
|
||||
"recharts": "^3.6.0",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"zustand": "^5.0.9"
|
||||
},
|
||||
|
||||
@@ -2,7 +2,12 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import CounterLayout from './layouts/CounterLayout';
|
||||
import FastEntryPage from './pages/FastEntryPage';
|
||||
import CashRegisterPage from './pages/CashRegisterPage';
|
||||
import AdminDashboard from './pages/AdminDashboard';
|
||||
import AdvancedAnalytics from './pages/AdvancedAnalytics';
|
||||
import LoginPage from './pages/LoginPage';
|
||||
import { ToastProvider } from './context/ToastContext';
|
||||
import HistoryPage from './pages/HistoryPage';
|
||||
import TreasuryPage from './pages/TreasuryPage';
|
||||
|
||||
// Componente simple de protección
|
||||
const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
|
||||
@@ -12,16 +17,23 @@ const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<ToastProvider>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
|
||||
<Route element={<PrivateRoute><CounterLayout /></PrivateRoute>}>
|
||||
<Route path="/" element={<FastEntryPage />} />
|
||||
<Route path="/cash-register" element={<CashRegisterPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
<Route element={<PrivateRoute><CounterLayout /></PrivateRoute>}>
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
<Route path="/dashboard" element={<AdminDashboard />} />
|
||||
<Route path="/nuevo-aviso" element={<FastEntryPage />} />
|
||||
<Route path="/caja" element={<CashRegisterPage />} />
|
||||
<Route path="/analitica" element={<AdvancedAnalytics />} />
|
||||
<Route path="/historial" element={<HistoryPage />} />
|
||||
<Route path="/tesoreria" element={<TreasuryPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</ToastProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
200
frontend/counter-panel/src/components/CashClosingModal.tsx
Normal file
200
frontend/counter-panel/src/components/CashClosingModal.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Banknote, CreditCard, ArrowRightLeft, CheckCircle2, X, AlertCircle, RefreshCw, Printer } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import clsx from 'clsx';
|
||||
import api from '../services/api';
|
||||
|
||||
interface CashClosingModalProps {
|
||||
onClose: () => void;
|
||||
onComplete: () => void;
|
||||
}
|
||||
|
||||
export default function CashClosingModal({ onClose, onComplete }: CashClosingModalProps) {
|
||||
const [summary, setSummary] = useState<any>(null);
|
||||
const [loadingSummary, setLoadingSummary] = useState(true);
|
||||
const [notes, setNotes] = useState('');
|
||||
const [isClosing, setIsClosing] = useState(false);
|
||||
const [done, setDone] = useState(false);
|
||||
const [closedSessionId, setClosedSessionId] = useState<number | null>(null);
|
||||
|
||||
// 1. Al abrir el modal, traemos lo que el sistema dice que debería haber
|
||||
useEffect(() => {
|
||||
const fetchSummary = async () => {
|
||||
try {
|
||||
const res = await api.get('/cashsessions/summary');
|
||||
setSummary(res.data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingSummary(false);
|
||||
}
|
||||
};
|
||||
fetchSummary();
|
||||
}, []);
|
||||
|
||||
const handleFinalClose = async () => {
|
||||
setIsClosing(true);
|
||||
try {
|
||||
const res = await api.post('/cashsessions/close', {
|
||||
declaredCash: summary.cashSales + summary.openingBalance,
|
||||
declaredDebit: summary.cardSales,
|
||||
declaredCredit: 0,
|
||||
declaredTransfer: summary.transferSales,
|
||||
notes: notes || "Cierre confirmado por cajero"
|
||||
});
|
||||
|
||||
setClosedSessionId(res.data.sessionId);
|
||||
setDone(true);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert('Error al cerrar caja');
|
||||
} finally {
|
||||
setIsClosing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadPdf = async () => {
|
||||
if (!closedSessionId) return;
|
||||
try {
|
||||
const res = await api.get(`/cashsessions/${closedSessionId}/pdf`, { responseType: 'blob' });
|
||||
const url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', `Acta_Cierre_${closedSessionId}.pdf`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
} catch (error) {
|
||||
alert("Error al descargar el comprobante");
|
||||
}
|
||||
};
|
||||
|
||||
if (loadingSummary) return (
|
||||
<div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[200] flex items-center justify-center">
|
||||
<RefreshCw className="animate-spin text-white" size={40} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-slate-900/60 backdrop-blur-md flex items-center justify-center z-[200] p-4 overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
className="bg-white rounded-[2.5rem] shadow-2xl max-w-lg w-full overflow-hidden border border-white/20"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="bg-slate-900 p-8 text-white relative">
|
||||
<div className="flex justify-between items-center relative z-10">
|
||||
<div>
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400">Finalización de Turno</span>
|
||||
<h2 className="text-3xl font-black tracking-tight">Cierre de Caja</h2>
|
||||
</div>
|
||||
{!done && (
|
||||
<button onClick={onClose} className="p-2 hover:bg-white/10 rounded-xl transition-colors">
|
||||
<X size={24} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<AnimatePresence mode="wait">
|
||||
{!done ? (
|
||||
<motion.div key="summary" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-6">
|
||||
|
||||
{/* Visualización de Totales del Sistema */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Resumen de Valores en Caja</h4>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<SummaryRow label="Fondo de Apertura" value={summary.openingBalance} icon={<Banknote size={16} />} />
|
||||
<SummaryRow label="Ventas Efectivo" value={summary.cashSales} icon={<Banknote size={16} />} isSale />
|
||||
<SummaryRow label="Ventas Tarjetas" value={summary.cardSales} icon={<CreditCard size={16} />} isSale />
|
||||
<SummaryRow label="Ventas Transferencia" value={summary.transferSales} icon={<ArrowRightLeft size={16} />} isSale />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Total a Entregar */}
|
||||
<div className="bg-slate-900 p-6 rounded-[2rem] flex justify-between items-center text-white shadow-xl">
|
||||
<div>
|
||||
<span className="text-[10px] font-black uppercase text-slate-500 block mb-1">Total Final a Entregar</span>
|
||||
<span className="text-4xl font-mono font-black text-green-400">
|
||||
$ {summary.totalExpected.toLocaleString('es-AR', { minimumFractionDigits: 2 })}
|
||||
</span>
|
||||
</div>
|
||||
<CheckCircle2 size={40} className="text-green-500 opacity-20" />
|
||||
</div>
|
||||
|
||||
{/* Notas opcionales */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase ml-1">Notas u Observaciones</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Opcional: aclaraciones sobre el turno..."
|
||||
className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl text-sm font-bold outline-none focus:border-blue-500 transition-all resize-none h-24"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-amber-50 p-4 rounded-2xl border border-amber-100 flex gap-3">
|
||||
<AlertCircle className="text-amber-500 shrink-0" size={18} />
|
||||
<p className="text-[10px] text-amber-800 font-bold leading-tight uppercase opacity-80">
|
||||
Al confirmar, declaras que el dinero físico coincide con este resumen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleFinalClose}
|
||||
disabled={isClosing}
|
||||
className="w-full py-5 bg-blue-600 text-white font-black uppercase text-xs tracking-widest rounded-2xl shadow-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2 active:scale-95"
|
||||
>
|
||||
{isClosing ? 'Procesando...' : 'Confirmar y Cerrar Caja'}
|
||||
</button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="done" initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="text-center py-10">
|
||||
<div className="w-20 h-20 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle2 size={48} />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-slate-900 uppercase mb-2">¡Caja Cerrada!</h3>
|
||||
<p className="text-slate-500 font-bold text-sm mb-8">El turno ha finalizado correctamente. Los reportes han sido enviados a tesorería.</p>
|
||||
<button
|
||||
onClick={handleDownloadPdf}
|
||||
className="w-full py-4 bg-blue-600 text-white font-black uppercase text-xs rounded-2xl hover:bg-blue-700 transition-all mb-3 flex items-center justify-center gap-2"
|
||||
>
|
||||
<Printer size={16} /> Descargar Acta de Cierre
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { onComplete(); onClose(); }}
|
||||
className="w-full py-5 bg-slate-900 text-white font-black uppercase text-xs rounded-2xl hover:bg-black transition-all"
|
||||
>
|
||||
Volver al Inicio
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface SummaryRowProps {
|
||||
label: string;
|
||||
value: number;
|
||||
icon: React.ReactNode;
|
||||
isSale?: boolean;
|
||||
}
|
||||
|
||||
function SummaryRow({ label, value, icon, isSale }: SummaryRowProps) {
|
||||
return (
|
||||
<div className="flex justify-between items-center p-3.5 bg-slate-50 rounded-xl border border-slate-100 group hover:bg-white hover:border-blue-100 transition-all">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-slate-400 group-hover:text-blue-500 transition-colors">{icon}</div>
|
||||
<span className="text-[10px] font-black text-slate-500 uppercase tracking-tight">{label}</span>
|
||||
</div>
|
||||
<span className={clsx("font-mono font-black text-sm", isSale ? "text-slate-800" : "text-slate-400")}>
|
||||
$ {value.toLocaleString('es-AR', { minimumFractionDigits: 2 })}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
119
frontend/counter-panel/src/components/CashOpeningModal.tsx
Normal file
119
frontend/counter-panel/src/components/CashOpeningModal.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Play, ShieldCheck, Lock, X } from 'lucide-react';
|
||||
import api from '../services/api';
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useToast } from '../context/use-toast';
|
||||
|
||||
interface Props {
|
||||
onSuccess: () => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
export default function CashOpeningModal({ onSuccess, onCancel }: Props) {
|
||||
const { showToast } = useToast();
|
||||
const [openingBalance, setOpeningBalance] = useState<number>(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleCancel = () => {
|
||||
if (onCancel) {
|
||||
onCancel();
|
||||
} else {
|
||||
navigate('/dashboard');
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpen = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (openingBalance < 0) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
// Enviamos el fondo inicial al endpoint que creamos en C#
|
||||
await api.post('/cashsessions/open', openingBalance);
|
||||
showToast("Caja abierta correctamente. ¡Buen turno!", "success");
|
||||
onSuccess();
|
||||
} catch (error) {
|
||||
showToast("Error al abrir la sesión de caja", "error");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-slate-950/80 backdrop-blur-md z-[500] flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }}
|
||||
className="bg-white w-full max-w-md rounded-[2.5rem] shadow-2xl overflow-hidden border border-white/20"
|
||||
>
|
||||
{/* Header (Igual al anterior) */}
|
||||
<div className="p-8 bg-slate-900 text-white relative">
|
||||
<div className="absolute top-0 right-0 p-8 opacity-10"><Lock size={80} /></div>
|
||||
{/* Botón X de cerrar en el header */}
|
||||
|
||||
<div className="relative z-10">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400 block mb-2">Inicio de Jornada</span>
|
||||
<h2 className="text-3xl font-black tracking-tight uppercase">Apertura de Caja</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="absolute z-20 top-6 right-6 p-2 hover:bg-white/10 rounded-xl transition-colors text-slate-400 hover:text-white"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleOpen} className="p-8 space-y-8">
|
||||
<div className="bg-blue-50 border border-blue-100 p-4 rounded-2xl flex gap-4">
|
||||
<ShieldCheck className="text-blue-600 shrink-0" size={24} />
|
||||
<p className="text-[11px] text-blue-800 font-bold leading-tight uppercase opacity-80">
|
||||
Debe declarar el fondo de inicio (dinero para cambio) recibido de tesorería para habilitar los cobros.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Fondo Inicial en Efectivo</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-5 top-1/2 -translate-y-1/2 text-slate-300 font-mono text-2xl font-bold">$</div>
|
||||
<input
|
||||
type="number"
|
||||
required autoFocus
|
||||
min="0"
|
||||
step="0.01"
|
||||
className="w-full pl-12 pr-6 py-6 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none focus:border-blue-600 focus:bg-white text-3xl font-mono font-black text-slate-900 transition-all shadow-inner"
|
||||
placeholder="0.00"
|
||||
value={openingBalance || ''}
|
||||
onChange={e => setOpeningBalance(parseFloat(e.target.value) || 0)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit" disabled={loading}
|
||||
className="w-full py-5 bg-blue-600 text-white font-black uppercase text-xs tracking-[0.2em] rounded-2xl shadow-xl shadow-blue-200 hover:bg-blue-700 transition-all flex items-center justify-center gap-3 active:scale-95"
|
||||
>
|
||||
<Play size={18} fill="currentColor" /> {loading ? 'Procesando...' : 'Iniciar Sesión de Trabajo'}
|
||||
</button>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCancel}
|
||||
className="flex-1 py-5 bg-slate-100 text-slate-500 font-black uppercase text-xs tracking-widest rounded-2xl hover:bg-slate-200 transition-all active:scale-95"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex-[2] py-5 bg-blue-600 text-white font-black uppercase text-xs tracking-[0.2em] rounded-2xl shadow-xl shadow-blue-200 hover:bg-blue-700 transition-all flex items-center justify-center gap-3 active:scale-95"
|
||||
>
|
||||
<Play size={18} fill="currentColor" /> {loading ? 'Cargando...' : 'Iniciar Turno'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
119
frontend/counter-panel/src/components/ClaimModal.tsx
Normal file
119
frontend/counter-panel/src/components/ClaimModal.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { X, AlertTriangle, Send, MessageSquare } from 'lucide-react';
|
||||
import api from '../services/api';
|
||||
import { useToast } from '../context/use-toast';
|
||||
|
||||
interface ClaimModalProps {
|
||||
listingId: number;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
const CLAIM_TYPES = [
|
||||
"Error en Texto",
|
||||
"Error en Cobro / Importe",
|
||||
"Datos de Cliente incorrectos",
|
||||
"Solicitud de Baja",
|
||||
"Queja de Cliente",
|
||||
"Otros"
|
||||
];
|
||||
|
||||
export default function ClaimModal({ listingId, onClose, onSuccess }: ClaimModalProps) {
|
||||
const { showToast } = useToast();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
claimType: '',
|
||||
description: ''
|
||||
});
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!formData.claimType || !formData.description) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await api.post('/claims', {
|
||||
listingId,
|
||||
claimType: formData.claimType,
|
||||
description: formData.description
|
||||
});
|
||||
showToast("Reclamo registrado correctamente", "success");
|
||||
onSuccess();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
showToast("Error al registrar el reclamo", "error");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-slate-950/60 backdrop-blur-sm z-[300] flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
className="bg-white w-full max-w-lg rounded-[2.5rem] shadow-2xl overflow-hidden border border-slate-100"
|
||||
>
|
||||
<div className="p-8 bg-slate-900 text-white flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 bg-blue-600 rounded-2xl shadow-lg shadow-blue-500/20">
|
||||
<AlertTriangle size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400">Atención al Cliente</span>
|
||||
<h3 className="text-xl font-black uppercase tracking-tight">Nuevo Reclamo</h3>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 hover:bg-white/10 rounded-xl transition-colors"><X /></button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-8 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Motivo del reclamo</label>
|
||||
<select
|
||||
required
|
||||
className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none focus:border-blue-500 font-bold text-slate-700"
|
||||
value={formData.claimType}
|
||||
onChange={e => setFormData({ ...formData, claimType: e.target.value })}
|
||||
>
|
||||
<option value="">Seleccione una categoría...</option>
|
||||
{CLAIM_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Descripción detallada</label>
|
||||
<div className="relative">
|
||||
<MessageSquare className="absolute left-4 top-4 text-slate-300" size={20} />
|
||||
<textarea
|
||||
required
|
||||
className="w-full p-4 pl-12 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none focus:border-blue-500 font-bold text-slate-700 min-h-[150px] resize-none"
|
||||
placeholder="Explique lo ocurrido con el máximo detalle posible..."
|
||||
value={formData.description}
|
||||
onChange={e => setFormData({ ...formData, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 py-4 bg-slate-50 text-slate-500 font-black uppercase text-xs tracking-widest rounded-2xl hover:bg-slate-100 transition-all"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex-[1.5] py-4 bg-blue-600 text-white font-black uppercase text-xs tracking-widest rounded-2xl shadow-xl shadow-blue-200 hover:bg-blue-700 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Send size={16} /> {loading ? 'Registrando...' : 'Confirmar Reporte'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { Bell, X, Info, AlertTriangle, Clock } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
import api from '../services/api';
|
||||
|
||||
export default function NotificationDropdown({ notifications, onClose, onRefresh }: any) {
|
||||
|
||||
const markAsRead = async (id: number) => {
|
||||
await api.put(`/notifications/${id}/read`);
|
||||
onRefresh();
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 10, scale: 0.95 }}
|
||||
className="absolute right-0 mt-3 w-80 bg-white rounded-[2rem] shadow-2xl border border-slate-100 overflow-hidden z-[100]"
|
||||
>
|
||||
<div className="p-5 bg-slate-50 border-b border-slate-100 flex justify-between items-center">
|
||||
<h3 className="text-xs font-black uppercase tracking-widest text-slate-900">Notificaciones</h3>
|
||||
<button onClick={onClose} className="text-slate-400 hover:text-slate-600"><X size={16} /></button>
|
||||
</div>
|
||||
|
||||
<div className="max-h-96 overflow-y-auto custom-scrollbar">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="p-10 text-center text-slate-300">
|
||||
<Bell size={32} className="mx-auto mb-2 opacity-20" />
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest">Sin alertas nuevas</p>
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((n: any) => (
|
||||
<div
|
||||
key={n.id}
|
||||
onClick={() => markAsRead(n.id)}
|
||||
className={clsx(
|
||||
"p-4 border-b border-slate-50 flex gap-4 cursor-pointer transition-all hover:bg-slate-50 relative",
|
||||
!n.isRead && "bg-blue-50/30"
|
||||
)}
|
||||
>
|
||||
{!n.isRead && <div className="absolute left-2 top-1/2 -translate-y-1/2 w-1 h-8 bg-blue-600 rounded-full"></div>}
|
||||
|
||||
<div className={clsx(
|
||||
"w-10 h-10 rounded-2xl flex items-center justify-center shrink-0",
|
||||
n.type === 'warning' ? "bg-amber-100 text-amber-600" :
|
||||
n.type === 'error' ? "bg-rose-100 text-rose-600" : "bg-blue-100 text-blue-600"
|
||||
)}>
|
||||
{n.type === 'warning' ? <AlertTriangle size={18} /> : <Info size={18} />}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-black text-slate-800 uppercase leading-tight mb-1">{n.title}</p>
|
||||
<p className="text-[11px] text-slate-500 font-medium leading-snug">{n.message}</p>
|
||||
<p className="text-[8px] text-slate-400 font-bold uppercase mt-2 flex items-center gap-1">
|
||||
<Clock size={10} /> {new Date(n.createdAt).toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
263
frontend/counter-panel/src/components/PaymentModal.tsx
Normal file
263
frontend/counter-panel/src/components/PaymentModal.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { CreditCard, Banknote, ArrowRightLeft, DollarSign, X } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
// Interfaz de Pago
|
||||
export interface Payment {
|
||||
amount: number;
|
||||
paymentMethod: string;
|
||||
cardPlan?: string;
|
||||
surcharge: number;
|
||||
}
|
||||
|
||||
// Props del Modal de Pagos
|
||||
interface PaymentModalProps {
|
||||
totalAmount: number;
|
||||
onConfirm: (payments: Payment[]) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
// Planes de Tarjetas de Crédito con sus recargos
|
||||
const CARD_PLANS = [
|
||||
{ value: 'Ahora12', label: 'Ahora 12', surcharge: 15 },
|
||||
{ value: 'Ahora18', label: 'Ahora 18', surcharge: 20 },
|
||||
{ value: 'Credit3', label: '3 Cuotas', surcharge: 8 },
|
||||
{ value: 'Credit6', label: '6 Cuotas', surcharge: 12 },
|
||||
];
|
||||
|
||||
export default function PaymentModal({ totalAmount, onConfirm, onCancel }: PaymentModalProps) {
|
||||
// Estado de pagos acumulados
|
||||
const [payments, setPayments] = useState<Payment[]>([]);
|
||||
const [currentMethod, setCurrentMethod] = useState('Cash');
|
||||
const [currentAmount, setCurrentAmount] = useState(totalAmount);
|
||||
const [currentPlan, setCurrentPlan] = useState('');
|
||||
|
||||
// Cálculos de totales
|
||||
const totalPaid = payments.reduce((sum, p) => sum + p.amount, 0);
|
||||
const pendingAmount = totalAmount - totalPaid;
|
||||
|
||||
// Actualizar monto actual cuando cambia el pendiente
|
||||
useEffect(() => {
|
||||
setCurrentAmount(Math.max(0, pendingAmount));
|
||||
}, [pendingAmount]);
|
||||
|
||||
// Agregar un nuevo pago a la lista
|
||||
const addPayment = () => {
|
||||
if (currentAmount <= 0 || currentAmount > pendingAmount) {
|
||||
alert('❌ Monto inválido');
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentMethod === 'Credit' && !currentPlan) {
|
||||
alert('❌ Seleccione un plan de cuotas');
|
||||
return;
|
||||
}
|
||||
|
||||
const planInfo = CARD_PLANS.find(p => p.value === currentPlan);
|
||||
const surcharge = currentMethod === 'Credit' && planInfo ? (currentAmount * planInfo.surcharge) / 100 : 0;
|
||||
|
||||
const newPayment: Payment = {
|
||||
amount: currentAmount,
|
||||
paymentMethod: currentMethod,
|
||||
cardPlan: currentMethod === 'Credit' ? currentPlan : undefined,
|
||||
surcharge
|
||||
};
|
||||
|
||||
setPayments([...payments, newPayment]);
|
||||
setCurrentMethod('Cash');
|
||||
setCurrentPlan('');
|
||||
};
|
||||
|
||||
// Eliminar un pago de la lista
|
||||
const removePayment = (index: number) => {
|
||||
setPayments(payments.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// Confirmar todos los pagos
|
||||
const handleConfirm = () => {
|
||||
if (pendingAmount > 0) {
|
||||
alert('❌ Aún falta completar el pago');
|
||||
return;
|
||||
}
|
||||
onConfirm(payments);
|
||||
};
|
||||
|
||||
// Total incluyendo recargos
|
||||
const totalWithSurcharges = payments.reduce((sum, p) => sum + p.amount + p.surcharge, 0);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-3xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
{/* Encabezado */}
|
||||
<div className="sticky top-0 bg-gradient-to-r from-blue-600 to-indigo-600 text-white p-6 rounded-t-3xl">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-2xl font-black">Procesar Pago</h2>
|
||||
<p className="text-sm text-blue-100 mt-1">Configure los medios de pago</p>
|
||||
</div>
|
||||
<button onClick={onCancel} className="hover:bg-white/20 p-2 rounded-full transition">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Resumen de Importes */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-blue-50 p-4 rounded-xl border border-blue-200">
|
||||
<div className="text-xs text-blue-600 font-bold uppercase mb-1">Total Original</div>
|
||||
<div className="text-2xl font-black text-blue-900">${totalAmount.toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="bg-green-50 p-4 rounded-xl border border-green-200">
|
||||
<div className="text-xs text-green-600 font-bold uppercase mb-1">Pagado</div>
|
||||
<div className="text-2xl font-black text-green-900">${totalPaid.toLocaleString()}</div>
|
||||
</div>
|
||||
<div className={clsx("p-4 rounded-xl border", pendingAmount > 0 ? "bg-orange-50 border-orange-200" : "bg-gray-50 border-gray-200")}>
|
||||
<div className={clsx("text-xs font-bold uppercase mb-1", pendingAmount > 0 ? "text-orange-600" : "text-gray-500")}>Pendiente</div>
|
||||
<div className={clsx("text-2xl font-black", pendingAmount > 0 ? "text-orange-900" : "text-gray-400")}>${pendingAmount.toLocaleString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lista de Pagos Agregados */}
|
||||
{payments.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-bold text-gray-600 uppercase">Pagos Agregados</h3>
|
||||
{payments.map((payment, index) => (
|
||||
<div key={index} className="flex items-center justify-between bg-gray-50 p-3 rounded-lg border border-gray-200">
|
||||
<div className="flex items-center gap-3">
|
||||
{payment.paymentMethod === 'Cash' && <Banknote className="text-green-600" size={20} />}
|
||||
{payment.paymentMethod === 'Debit' && <CreditCard className="text-blue-600" size={20} />}
|
||||
{payment.paymentMethod === 'Credit' && <CreditCard className="text-purple-600" size={20} />}
|
||||
{payment.paymentMethod === 'Transfer' && <ArrowRightLeft className="text-indigo-600" size={20} />}
|
||||
<div>
|
||||
<div className="font-bold text-sm">
|
||||
{payment.paymentMethod === 'Cash' && 'Efectivo'}
|
||||
{payment.paymentMethod === 'Debit' && 'Débito'}
|
||||
{payment.paymentMethod === 'Credit' && payment.cardPlan}
|
||||
{payment.paymentMethod === 'Transfer' && 'Transferencia'}
|
||||
</div>
|
||||
{payment.surcharge > 0 && (
|
||||
<div className="text-xs text-orange-600">+${payment.surcharge.toLocaleString()} recargo</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-black text-lg">${payment.amount.toLocaleString()}</span>
|
||||
<button onClick={() => removePayment(index)} className="text-red-500 hover:bg-red-50 p-1 rounded">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Formulario para Agregar Pago */}
|
||||
{pendingAmount > 0 && (
|
||||
<div className="border-2 border-dashed border-gray-300 rounded-xl p-4 space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-600 uppercase">Agregar Pago</h3>
|
||||
|
||||
{/* Selector de Método de Pago */}
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{[
|
||||
{ value: 'Cash', label: 'Efectivo', icon: Banknote, color: 'green' },
|
||||
{ value: 'Debit', label: 'Débito', icon: CreditCard, color: 'blue' },
|
||||
{ value: 'Credit', label: 'Crédito', icon: CreditCard, color: 'purple' },
|
||||
{ value: 'Transfer', label: 'Transferencia', icon: ArrowRightLeft, color: 'indigo' }
|
||||
].map((method) => (
|
||||
<button
|
||||
key={method.value}
|
||||
onClick={() => setCurrentMethod(method.value)}
|
||||
className={clsx(
|
||||
"p-3 rounded-lg border-2 transition-all flex flex-col items-center gap-1",
|
||||
currentMethod === method.value
|
||||
? `border-${method.color}-600 bg-${method.color}-50`
|
||||
: "border-gray-200 hover:border-gray-300"
|
||||
)}
|
||||
>
|
||||
<method.icon size={20} className={currentMethod === method.value ? `text-${method.color}-600` : 'text-gray-400'} />
|
||||
<span className="text-xs font-bold">{method.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Selector de Plan de Cuotas (solo para Crédito) */}
|
||||
{currentMethod === 'Credit' && (
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-600 uppercase mb-2">Plan de Cuotas</label>
|
||||
<select
|
||||
value={currentPlan}
|
||||
onChange={(e) => setCurrentPlan(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded-lg font-bold"
|
||||
>
|
||||
<option value="">-- Seleccionar Plan --</option>
|
||||
{CARD_PLANS.map(plan => (
|
||||
<option key={plan.value} value={plan.value}>
|
||||
{plan.label} (+{plan.surcharge}% recargo)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input de Monto */}
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-gray-600 uppercase mb-2">Monto</label>
|
||||
<div className="relative">
|
||||
<DollarSign className="absolute left-3 top-3 text-gray-400" size={20} />
|
||||
<input
|
||||
type="number"
|
||||
value={currentAmount}
|
||||
onChange={(e) => setCurrentAmount(parseFloat(e.target.value) || 0)}
|
||||
className="w-full pl-10 p-3 border border-gray-300 rounded-lg font-black text-xl"
|
||||
max={pendingAmount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={addPayment}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-black uppercase transition"
|
||||
>
|
||||
+ Agregar Pago
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Resumen Final con Recargos */}
|
||||
{totalWithSurcharges !== totalAmount && (
|
||||
<div className="bg-orange-50 border border-orange-200 p-4 rounded-lg">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-bold text-orange-700">Total con Recargos</span>
|
||||
<span className="text-2xl font-black text-orange-900">${totalWithSurcharges.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Botones de Acción */}
|
||||
<div className="sticky bottom-0 bg-gray-50 p-6 rounded-b-3xl border-t border-gray-200 flex gap-3">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="flex-1 bg-white border-2 border-gray-300 text-gray-700 py-4 rounded-xl font-black uppercase hover:bg-gray-100 transition"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
disabled={pendingAmount > 0}
|
||||
className={clsx(
|
||||
"flex-1 py-4 rounded-xl font-black uppercase transition",
|
||||
pendingAmount > 0
|
||||
? "bg-gray-300 text-gray-500 cursor-not-allowed"
|
||||
: "bg-green-600 hover:bg-green-700 text-white"
|
||||
)}
|
||||
>
|
||||
{pendingAmount > 0 ? 'Completar Pagos' : 'Confirmar Cobro'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
159
frontend/counter-panel/src/components/ResolveClaimModal.tsx
Normal file
159
frontend/counter-panel/src/components/ResolveClaimModal.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { X, CheckCircle2, Save, FileText, Calendar, Clock, Wrench, ChevronRight } from 'lucide-react';
|
||||
import api from '../services/api';
|
||||
import { useToast } from '../context/use-toast';
|
||||
import clsx from 'clsx';
|
||||
|
||||
export default function ResolveClaimModal({ claim, listing, onClose, onSuccess }: any) {
|
||||
const { showToast } = useToast();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showTools, setShowTools] = useState(false);
|
||||
|
||||
// Usamos valores defensivos para que no rompa si listing es undefined
|
||||
const [solutionData, setSolutionData] = useState({
|
||||
solution: '',
|
||||
applyAdjustments: false,
|
||||
newPrintText: listing?.printText || listing?.description || '',
|
||||
newStartDate: listing?.printStartDate ? listing.printStartDate.split('T')[0] : '',
|
||||
newDaysCount: listing?.printDaysCount || 3
|
||||
});
|
||||
|
||||
const handleResolve = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
// Enviamos la resolución + los ajustes técnicos
|
||||
await api.put(`/claims/${claim.id}/resolve`, {
|
||||
solution: solutionData.solution,
|
||||
// Solo enviamos ajustes si el switch está activo
|
||||
newPrintText: solutionData.applyAdjustments ? solutionData.newPrintText : null,
|
||||
newStartDate: solutionData.applyAdjustments ? solutionData.newStartDate : null,
|
||||
newDaysCount: solutionData.applyAdjustments ? solutionData.newDaysCount : null,
|
||||
});
|
||||
|
||||
showToast("Solución aplicada y aviso actualizado con éxito", "success");
|
||||
onSuccess();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
showToast("Error al procesar la resolución técnica", "error");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-slate-950/60 backdrop-blur-sm z-[400] flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}
|
||||
className="bg-white w-full max-w-2xl rounded-[2.5rem] shadow-2xl overflow-hidden border border-slate-100"
|
||||
>
|
||||
<div className="p-6 bg-emerald-600 text-white flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle2 size={24} />
|
||||
<h3 className="text-lg font-black uppercase tracking-tight">Aplicar Solución Técnica</h3>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 hover:bg-white/10 rounded-xl"><X /></button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleResolve} className="p-8 space-y-6 max-h-[80vh] overflow-y-auto custom-scrollbar">
|
||||
|
||||
{/* INFO DEL RECLAMO */}
|
||||
<div className="bg-slate-50 p-4 rounded-2xl border border-slate-100">
|
||||
<p className="text-[10px] font-black text-slate-400 uppercase mb-1">Motivo: {claim.claimType}</p>
|
||||
<p className="text-xs font-bold text-slate-700 italic">"{claim.description}"</p>
|
||||
</div>
|
||||
|
||||
{/* TEXTO DE LA SOLUCIÓN */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Informe de Resolución</label>
|
||||
<textarea
|
||||
required
|
||||
className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none focus:border-emerald-500 font-bold text-slate-700 min-h-[100px] resize-none text-sm"
|
||||
placeholder="Describa qué acciones tomó para resolver este reclamo..."
|
||||
value={solutionData.solution}
|
||||
onChange={e => setSolutionData({ ...solutionData, solution: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* HERRAMIENTAS DE AJUSTE (Técnico) */}
|
||||
<div className="pt-4 border-t border-slate-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowTools(!showTools);
|
||||
setSolutionData({ ...solutionData, applyAdjustments: !showTools });
|
||||
}}
|
||||
className={clsx(
|
||||
"w-full p-4 rounded-2xl flex items-center justify-between transition-all",
|
||||
showTools ? "bg-blue-600 text-white shadow-lg" : "bg-blue-50 text-blue-600 hover:bg-blue-100"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Wrench size={18} />
|
||||
<span className="text-xs font-black uppercase tracking-widest">Habilitar Ajustes Técnicos</span>
|
||||
</div>
|
||||
<ChevronRight className={clsx("transition-transform", showTools && "rotate-90")} size={18} />
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{showTools && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="p-6 mt-2 space-y-6 bg-slate-50 rounded-3xl border-2 border-blue-100">
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-blue-600 uppercase flex items-center gap-2">
|
||||
<FileText size={12} /> Corrección de Texto (Imprenta)
|
||||
</label>
|
||||
<textarea
|
||||
className="w-full p-4 bg-white border border-blue-200 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 font-mono text-xs uppercase"
|
||||
value={solutionData.newPrintText}
|
||||
onChange={e => setSolutionData({ ...solutionData, newPrintText: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-blue-600 uppercase flex items-center gap-2">
|
||||
<Calendar size={12} /> Nueva Fecha Inicio
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
className="w-full p-3 bg-white border border-blue-200 rounded-xl text-xs font-bold"
|
||||
value={solutionData.newStartDate}
|
||||
onChange={e => setSolutionData({ ...solutionData, newStartDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-blue-600 uppercase flex items-center gap-2">
|
||||
<Clock size={12} /> Días de extensión
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full p-3 bg-white border border-blue-200 rounded-xl text-xs font-bold"
|
||||
value={solutionData.newDaysCount}
|
||||
onChange={e => setSolutionData({ ...solutionData, newDaysCount: parseInt(e.target.value) })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit" disabled={loading}
|
||||
className="w-full py-5 bg-emerald-600 text-white font-black uppercase text-xs tracking-[.2em] rounded-2xl shadow-xl shadow-emerald-200 hover:bg-emerald-700 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Save size={18} /> {loading ? 'Procesando...' : 'Confirmar y Aplicar Cambios'}
|
||||
</button>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
91
frontend/counter-panel/src/components/SettingsPanel.tsx
Normal file
91
frontend/counter-panel/src/components/SettingsPanel.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { X, User, Lock, Save, ShieldCheck } from 'lucide-react';
|
||||
import api from '../services/api';
|
||||
import { useToast } from '../context/use-toast';
|
||||
|
||||
export default function SettingsPanel({ onClose }: any) {
|
||||
const { showToast } = useToast();
|
||||
const user = JSON.parse(localStorage.getItem('user') || '{}');
|
||||
const [passwords, setPasswords] = useState({ old: '', new: '' });
|
||||
|
||||
const handleUpdatePassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
// Endpoint que deberías tener en AuthController o UsersController
|
||||
await api.put('/users/change-password', passwords);
|
||||
showToast("Contraseña actualizada con éxito", "success");
|
||||
onClose();
|
||||
} catch (e) {
|
||||
showToast("Error: La contraseña actual es incorrecta", "error");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[300] flex justify-end">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
|
||||
onClick={onClose} className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 200 }}
|
||||
className="relative w-full max-w-sm bg-white h-full shadow-2xl flex flex-col border-l border-slate-200"
|
||||
>
|
||||
<div className="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
||||
<h3 className="text-xl font-black text-slate-900 uppercase tracking-tighter">Mi Perfil</h3>
|
||||
<button onClick={onClose} className="p-2 hover:bg-slate-200 rounded-xl transition-colors text-slate-400"><X /></button>
|
||||
</div>
|
||||
|
||||
<div className="p-8 flex-1 overflow-y-auto space-y-10 custom-scrollbar">
|
||||
{/* Info del Cajero */}
|
||||
<section className="text-center">
|
||||
<div className="w-20 h-20 bg-blue-600 rounded-[2rem] flex items-center justify-center text-white mx-auto mb-4 shadow-xl shadow-blue-200">
|
||||
<User size={40} />
|
||||
</div>
|
||||
<h4 className="text-lg font-black text-slate-900 uppercase">{user.username}</h4>
|
||||
<span className="text-[10px] font-black text-blue-500 bg-blue-50 px-3 py-1 rounded-full uppercase tracking-widest border border-blue-100">
|
||||
Cajero Central
|
||||
</span>
|
||||
</section>
|
||||
|
||||
{/* Cambio de Contraseña */}
|
||||
<section className="space-y-6">
|
||||
<h5 className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
|
||||
<Lock size={14} /> Seguridad de Acceso
|
||||
</h5>
|
||||
<form onSubmit={handleUpdatePassword} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[9px] font-black text-slate-500 uppercase ml-1">Contraseña Actual</label>
|
||||
<input
|
||||
type="password" required
|
||||
className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl p-3 text-xs font-bold"
|
||||
value={passwords.old}
|
||||
onChange={e => setPasswords({ ...passwords, old: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[9px] font-black text-slate-500 uppercase ml-1">Nueva Contraseña</label>
|
||||
<input
|
||||
type="password" required
|
||||
className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl p-3 text-xs font-bold"
|
||||
value={passwords.new}
|
||||
onChange={e => setPasswords({ ...passwords, new: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<button className="w-full py-4 bg-slate-900 text-white rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-black transition-all flex items-center justify-center gap-2">
|
||||
<Save size={16} /> Guardar Cambios
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<div className="p-4 bg-emerald-50 rounded-2xl border border-emerald-100 flex items-center gap-3">
|
||||
<ShieldCheck size={20} className="text-emerald-500" />
|
||||
<p className="text-[10px] text-emerald-800 font-bold uppercase leading-tight">Su terminal cuenta con cifrado de punto a punto activo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
interface StatsCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
icon: LucideIcon;
|
||||
trend?: {
|
||||
value: number;
|
||||
isUp: boolean;
|
||||
};
|
||||
color: 'blue' | 'purple' | 'emerald' | 'amber' | 'rose';
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
const colorMap = {
|
||||
blue: 'from-blue-500/10 to-blue-600/10 text-blue-600 border-blue-200/50',
|
||||
purple: 'from-purple-500/10 to-purple-600/10 text-purple-600 border-purple-200/50',
|
||||
emerald: 'from-emerald-500/10 to-emerald-600/10 text-emerald-600 border-emerald-200/50',
|
||||
amber: 'from-amber-500/10 to-amber-600/10 text-amber-600 border-amber-200/50',
|
||||
rose: 'from-rose-500/10 to-rose-600/10 text-rose-600 border-rose-200/50',
|
||||
};
|
||||
|
||||
export default function StatsCard({ title, value, icon: Icon, trend, color, delay = 0 }: StatsCardProps) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay }}
|
||||
className={clsx(
|
||||
"relative overflow-hidden rounded-2xl border bg-white/50 backdrop-blur-xl p-6 shadow-sm transition-all hover:shadow-md",
|
||||
colorMap[color]
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-500">{title}</p>
|
||||
<h3 className="mt-1 text-3xl font-bold tracking-tight text-slate-900">{value}</h3>
|
||||
|
||||
{trend && (
|
||||
<div className={clsx(
|
||||
"mt-2 flex items-center text-xs font-semibold",
|
||||
trend.isUp ? "text-emerald-600" : "text-rose-600"
|
||||
)}>
|
||||
{trend.isUp ? '↑' : '↓'} {Math.abs(trend.value)}%
|
||||
<span className="ml-1 font-normal text-slate-400">vs mes anterior</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={clsx(
|
||||
"flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br shadow-inner",
|
||||
colorMap[color]
|
||||
)}>
|
||||
<Icon size={24} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Elemento decorativo de fondo */}
|
||||
<div className="absolute -bottom-6 -right-6 h-24 w-24 rounded-full bg-current opacity-[0.03]" />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
69
frontend/counter-panel/src/context/ToastContext.tsx
Normal file
69
frontend/counter-panel/src/context/ToastContext.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { CheckCircle2, AlertCircle, X, Info } from 'lucide-react';
|
||||
import { clsx } from 'clsx';
|
||||
import { ToastContext, type Toast, type ToastType } from './use-toast';
|
||||
|
||||
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||
|
||||
const showToast = useCallback((message: string, type: ToastType) => {
|
||||
const id = Math.random().toString(36).substring(2, 9);
|
||||
setToasts((prev) => [...prev, { id, message, type }]);
|
||||
|
||||
setTimeout(() => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
}, 5000);
|
||||
}, []);
|
||||
|
||||
const removeToast = (id: string) => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
};
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ showToast }}>
|
||||
{children}
|
||||
<div className="fixed bottom-8 right-8 z-[1000] flex flex-col gap-3 pointer-events-none">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{toasts.map((toast) => (
|
||||
<motion.div
|
||||
key={toast.id}
|
||||
layout
|
||||
initial={{ opacity: 0, x: 50, scale: 0.8 }}
|
||||
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, x: 20, scale: 0.5, transition: { duration: 0.2 } }}
|
||||
className={clsx(
|
||||
"pointer-events-auto flex items-center gap-3 px-5 py-4 rounded-2xl shadow-2xl border backdrop-blur-md min-w-[300px] max-w-md",
|
||||
toast.type === 'success' && "bg-emerald-50/90 border-emerald-100 text-emerald-900",
|
||||
toast.type === 'error' && "bg-rose-50/90 border-rose-100 text-rose-900",
|
||||
toast.type === 'info' && "bg-blue-50/90 border-blue-100 text-blue-900"
|
||||
)}
|
||||
>
|
||||
<div className={clsx(
|
||||
"p-2 rounded-xl",
|
||||
toast.type === 'success' && "bg-emerald-500 text-white",
|
||||
toast.type === 'error' && "bg-rose-500 text-white",
|
||||
toast.type === 'info' && "bg-blue-500 text-white"
|
||||
)}>
|
||||
{toast.type === 'success' && <CheckCircle2 size={18} />}
|
||||
{toast.type === 'error' && <AlertCircle size={18} />}
|
||||
{toast.type === 'info' && <Info size={18} />}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-black tracking-tight leading-tight">{toast.message}</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => removeToast(toast.id)}
|
||||
className="p-1 hover:bg-black/5 rounded-lg transition-colors text-slate-400"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
}
|
||||
21
frontend/counter-panel/src/context/use-toast.ts
Normal file
21
frontend/counter-panel/src/context/use-toast.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
|
||||
export type ToastType = 'success' | 'error' | 'info';
|
||||
|
||||
export interface Toast {
|
||||
id: string;
|
||||
message: string;
|
||||
type: ToastType;
|
||||
}
|
||||
|
||||
export interface ToastContextType {
|
||||
showToast: (message: string, type: ToastType) => void;
|
||||
}
|
||||
|
||||
export const ToastContext = createContext<ToastContextType | undefined>(undefined);
|
||||
|
||||
export const useToast = () => {
|
||||
const context = useContext(ToastContext);
|
||||
if (!context) throw new Error('useToast must be used within ToastProvider');
|
||||
return context;
|
||||
};
|
||||
31
frontend/counter-panel/src/hooks/useCashSession.ts
Normal file
31
frontend/counter-panel/src/hooks/useCashSession.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import api from '../services/api';
|
||||
|
||||
export function useCashSession() {
|
||||
const [session, setSession] = useState<{ isOpen: boolean; data: any | null }>({
|
||||
isOpen: false,
|
||||
data: null
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const checkStatus = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await api.get('/cashsessions/status');
|
||||
setSession({
|
||||
isOpen: res.data.isOpen,
|
||||
data: res.data.session
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error al verificar estado de caja", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
checkStatus();
|
||||
}, [checkStatus]);
|
||||
|
||||
return { session, loading, refreshSession: checkStatus };
|
||||
}
|
||||
@@ -1,10 +1,30 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Monitor, LogOut } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Outlet, useNavigate, useLocation, Link } from 'react-router-dom';
|
||||
import {
|
||||
LayoutDashboard, PlusCircle, Banknote, LogOut,
|
||||
ChevronLeft, ChevronRight, Settings, Bell,
|
||||
Search, User as UserIcon, Monitor,
|
||||
TrendingUp, ClipboardList, ShieldCheck
|
||||
} from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import clsx from 'clsx';
|
||||
import NotificationDropdown from '../components/NotificationDropdown';
|
||||
import SettingsPanel from '../components/SettingsPanel';
|
||||
import api from '../services/api';
|
||||
|
||||
export default function CounterLayout() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
|
||||
const [notifications, setNotifications] = useState<any>({ items: [], unreadCount: 0 });
|
||||
const [showNotifications, setShowNotifications] = useState(false);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
|
||||
// Parsing del usuario más seguro
|
||||
const storedUser = localStorage.getItem('user');
|
||||
const user = storedUser && storedUser.startsWith('{')
|
||||
? JSON.parse(storedUser)
|
||||
: { username: storedUser || "Admin" };
|
||||
|
||||
const handleLogout = () => {
|
||||
if (confirm('¿Cerrar sesión de caja?')) {
|
||||
@@ -14,85 +34,183 @@ export default function CounterLayout() {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchNotifications = async () => {
|
||||
try {
|
||||
const res = await api.get('/notifications');
|
||||
setNotifications(res.data);
|
||||
} catch (e) { console.error("Error al obtener notificaciones", e); }
|
||||
};
|
||||
|
||||
// Listener de atajos de teclado completo (F1 - F9)
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
switch (e.key) {
|
||||
case 'F2':
|
||||
e.preventDefault();
|
||||
navigate('/');
|
||||
break;
|
||||
case 'F4':
|
||||
e.preventDefault();
|
||||
navigate('/cash-register');
|
||||
break;
|
||||
case 'F10':
|
||||
// F10 se maneja en el componente hijo (FastEntryPage),
|
||||
// pero prevenimos el default del navegador
|
||||
e.preventDefault();
|
||||
break;
|
||||
case 'Escape':
|
||||
// Opcional: Cancelar o Logout rápido
|
||||
break;
|
||||
const map: Record<string, string> = {
|
||||
'F1': '/dashboard',
|
||||
'F2': '/nuevo-aviso',
|
||||
'F4': '/caja',
|
||||
'F6': '/analitica',
|
||||
'F8': '/historial',
|
||||
'F9': '/tesoreria'
|
||||
};
|
||||
|
||||
if (map[e.key]) {
|
||||
e.preventDefault();
|
||||
navigate(map[e.key]);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchNotifications();
|
||||
const interval = setInterval(fetchNotifications, 60000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const menuItems = [
|
||||
{ path: '/dashboard', label: 'Panel Principal', icon: LayoutDashboard, shortcut: 'F1' },
|
||||
{ path: '/nuevo-aviso', label: 'Nuevo Aviso', icon: PlusCircle, shortcut: 'F2' },
|
||||
{ path: '/caja', label: 'Caja Diaria', icon: Banknote, shortcut: 'F4' },
|
||||
{ path: '/historial', label: 'Consultas', icon: ClipboardList, shortcut: 'F8' },
|
||||
{ path: '/analitica', label: 'Analítica', icon: TrendingUp, shortcut: 'F6' },
|
||||
{ path: '/tesoreria', label: 'Tesorería', icon: ShieldCheck, shortcut: 'F9' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-gray-100">
|
||||
{/* Header */}
|
||||
<header className="bg-slate-800 text-white p-3 flex justify-between items-center shadow-md">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="font-bold text-xl tracking-wider flex items-center gap-2">
|
||||
<Monitor className="text-green-400" />
|
||||
SIG-CM <span className="text-slate-400 text-sm font-normal">MOSTRADOR v1.0</span>
|
||||
<div className="flex h-screen bg-[#f8fafc] overflow-hidden">
|
||||
{/* --- SIDEBAR --- */}
|
||||
<motion.aside
|
||||
initial={false}
|
||||
animate={{ width: isSidebarOpen ? 260 : 80 }}
|
||||
className="relative bg-slate-900 text-slate-300 flex flex-col z-30 shadow-2xl"
|
||||
>
|
||||
<div className="p-6 flex items-center gap-3 border-b border-slate-800/50">
|
||||
<div className="bg-blue-600 p-2 rounded-xl shadow-lg shadow-blue-500/20">
|
||||
<Monitor size={20} className="text-white" />
|
||||
</div>
|
||||
<div className="h-6 w-px bg-slate-600 mx-2"></div>
|
||||
<div className="text-sm text-slate-300">
|
||||
Sucursal: <span className="text-white font-mono">CENTRAL</span> | Caja: <span className="text-white font-mono">01</span>
|
||||
{isSidebarOpen && (
|
||||
<motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="font-bold text-xl tracking-tight text-white">
|
||||
SIG-CM
|
||||
</motion.span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-4 py-6 space-y-2 overflow-y-auto custom-scrollbar">
|
||||
{menuItems.map((item) => {
|
||||
const isActive = location.pathname === item.path;
|
||||
return (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className={clsx(
|
||||
"flex items-center gap-3 px-3 py-3 rounded-xl transition-all group relative",
|
||||
isActive ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "hover:bg-slate-800 hover:text-white"
|
||||
)}
|
||||
>
|
||||
<item.icon size={22} className={clsx(isActive ? "text-white" : "text-slate-400 group-hover:text-blue-400")} />
|
||||
{isSidebarOpen && (
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex-1 flex justify-between items-center">
|
||||
<span className="font-medium">{item.label}</span>
|
||||
<span className="text-[10px] bg-slate-800 px-1.5 py-0.5 rounded opacity-50 font-mono">{item.shortcut}</span>
|
||||
</motion.div>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-slate-800/50">
|
||||
<button onClick={handleLogout} className="flex items-center gap-3 w-full px-3 py-3 rounded-xl hover:bg-rose-500/10 hover:text-rose-400 transition-colors group">
|
||||
<LogOut size={22} className="text-slate-500 group-hover:text-rose-400" />
|
||||
{isSidebarOpen && <span className="font-medium text-sm">Cerrar Sesión</span>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button onClick={() => setIsSidebarOpen(!isSidebarOpen)} className="absolute -right-3 top-20 bg-white text-slate-900 border border-slate-200 rounded-full p-1 shadow-md hover:scale-110 transition-transform hidden lg:block">
|
||||
{isSidebarOpen ? <ChevronLeft size={14} /> : <ChevronRight size={14} />}
|
||||
</button>
|
||||
</motion.aside>
|
||||
|
||||
{/* --- MAIN CONTENT --- */}
|
||||
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
{/* TOP HEADER */}
|
||||
<header className="h-16 bg-white/80 backdrop-blur-md border-b border-slate-200 px-8 flex items-center justify-between z-20 sticky top-0">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="relative max-w-md w-full hidden md:block">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
|
||||
<input type="text" placeholder="Buscar avisos, clientes..." className="w-full pl-10 pr-4 py-2 bg-slate-100 border-none rounded-xl text-sm focus:ring-2 focus:ring-blue-500/20 transition-all outline-none font-medium" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOTÓN SALIR CONECTADO */}
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-red-400 hover:text-red-300 flex items-center gap-1 text-sm font-bold transition-colors cursor-pointer"
|
||||
>
|
||||
<LogOut size={16} /> SALIR
|
||||
</button>
|
||||
</header>
|
||||
<div className="flex items-center gap-4">
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 overflow-hidden flex">
|
||||
<Outlet />
|
||||
</main>
|
||||
{/* CAMPANITA */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowNotifications(!showNotifications)}
|
||||
className={clsx(
|
||||
"relative p-2.5 rounded-xl transition-all",
|
||||
showNotifications ? "bg-blue-600 text-white shadow-lg" : "text-slate-500 hover:text-blue-600 hover:bg-slate-100"
|
||||
)}
|
||||
>
|
||||
<Bell size={20} />
|
||||
{notifications.unreadCount > 0 && (
|
||||
<span className="absolute top-1.5 right-1.5 w-4 h-4 bg-rose-500 text-white text-[9px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-sm">
|
||||
{notifications.unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Footer con Barra de Atajos */}
|
||||
<footer className="bg-slate-900 text-white p-2 flex gap-4 text-sm font-mono border-t-4 border-blue-600">
|
||||
<button onClick={() => navigate('/')} className="hover:bg-slate-800 p-1 rounded transition focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer">
|
||||
<ShortcutKey k="F2" label="Nuevo Aviso" active={location.pathname === '/'} />
|
||||
</button>
|
||||
<button onClick={() => navigate('/cash-register')} className="hover:bg-slate-800 p-1 rounded transition focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer">
|
||||
<ShortcutKey k="F4" label="Caja Diaria" active={location.pathname === '/cash-register'} />
|
||||
</button>
|
||||
<div className="opacity-75 cursor-help" title="Presione F10 en la pantalla de carga">
|
||||
<ShortcutKey k="F10" label="Cobrar/Imprimir" />
|
||||
</div>
|
||||
<div className="opacity-75">
|
||||
<ShortcutKey k="ESC" label="Cancelar" />
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<AnimatePresence>
|
||||
{showNotifications && (
|
||||
<NotificationDropdown
|
||||
notifications={notifications.items}
|
||||
onClose={() => setShowNotifications(false)}
|
||||
onRefresh={fetchNotifications}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
function ShortcutKey({ k, label, active = false }: { k: string, label: string, active?: boolean }) {
|
||||
return (
|
||||
<div className={`flex items-center gap-2 px-3 py-1 rounded ${active ? 'bg-blue-700 text-white' : 'text-slate-400'}`}>
|
||||
<span className="bg-slate-700 px-2 rounded text-white font-bold">{k}</span>
|
||||
<span>{label}</span>
|
||||
{/* ENGRANAJE */}
|
||||
<button
|
||||
onClick={() => setShowSettings(true)}
|
||||
className={clsx(
|
||||
"p-2.5 rounded-xl transition-all",
|
||||
showSettings ? "bg-blue-600 text-white shadow-lg" : "text-slate-500 hover:text-blue-600 hover:bg-slate-100"
|
||||
)}
|
||||
>
|
||||
<Settings size={20} />
|
||||
</button>
|
||||
|
||||
<div className="h-6 w-px bg-slate-200 mx-2" />
|
||||
|
||||
{/* USUARIO */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-right hidden sm:block">
|
||||
<p className="text-sm font-black text-slate-900 leading-none">{user.username}</p>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-tighter mt-1">Cajero Central</p>
|
||||
</div>
|
||||
<div className="h-10 w-10 rounded-[1rem] bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white shadow-lg border-2 border-white">
|
||||
<UserIcon size={20} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 overflow-y-auto bg-[#f8fafc]">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* PANEL DE AJUSTES (Movido fuera del flujo del header para mejor renderizado) */}
|
||||
<AnimatePresence>
|
||||
{showSettings && (
|
||||
<SettingsPanel onClose={() => setShowSettings(false)} />
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
251
frontend/counter-panel/src/pages/AdminDashboard.tsx
Normal file
251
frontend/counter-panel/src/pages/AdminDashboard.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
||||
AreaChart, Area, PieChart, Pie, Cell
|
||||
} from 'recharts';
|
||||
import {
|
||||
TrendingUp, DollarSign, FileText, Calendar,
|
||||
Download, Clock, Zap, ArrowUpRight
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { dashboardService } from '../services/dashboardService';
|
||||
import api from '../services/api';
|
||||
import clsx from 'clsx';
|
||||
|
||||
interface DashboardStats {
|
||||
revenueToday: number;
|
||||
adsToday: number;
|
||||
ticketAverage: number;
|
||||
paperOccupation: number;
|
||||
weeklyTrend: Array<{ day: string; amount: number }>;
|
||||
channelMix: Array<{ name: string; value: number }>;
|
||||
}
|
||||
|
||||
interface RecentListing {
|
||||
id: number;
|
||||
title: string;
|
||||
categoryName: string;
|
||||
createdAt: string;
|
||||
adFee: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
const COLORS = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#f43f5e'];
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [data, setData] = useState<DashboardStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [recentAds, setRecentAds] = useState<RecentListing[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const stats = await dashboardService.getStats();
|
||||
setData(stats);
|
||||
const res = await api.get('/listings');
|
||||
setRecentAds(res.data.slice(0, 5));
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Formateadores locales
|
||||
const formatCurrency = (val: number) =>
|
||||
val.toLocaleString('es-AR', { minimumFractionDigits: 2 });
|
||||
|
||||
const formatLocalTime = (dateString: string) => {
|
||||
if (!dateString) return "--:--";
|
||||
let isoStr = dateString.replace(" ", "T");
|
||||
if (!isoStr.endsWith("Z")) isoStr += "Z";
|
||||
return new Date(isoStr).toLocaleTimeString('es-AR', {
|
||||
hour: '2-digit', minute: '2-digit', hour12: true,
|
||||
timeZone: 'America/Argentina/Buenos_Aires'
|
||||
});
|
||||
};
|
||||
|
||||
if (loading || !data) return (
|
||||
<div className="flex h-screen items-center justify-center bg-slate-50">
|
||||
<div className="h-10 w-10 animate-spin rounded-full border-4 border-blue-600 border-t-transparent" />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#f8fafc] p-6 space-y-6">
|
||||
|
||||
{/* HEADER COMPACTO */}
|
||||
<div className="flex items-end justify-between">
|
||||
<motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
|
||||
<span className="text-[9px] font-black text-blue-600 uppercase tracking-[0.3em] mb-0.5 block">Inteligencia de Negocio</span>
|
||||
<h1 className="text-2xl font-black tracking-tight text-slate-900 uppercase flex items-center gap-2">
|
||||
<span className="bg-blue-600 w-1.5 h-6 rounded-full"></span>
|
||||
Métricas Globales
|
||||
</h1>
|
||||
<p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-1 opacity-80">Estado operativo del diario en tiempo real</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="flex items-center gap-2 rounded-xl bg-white px-4 py-2 text-[10px] font-black uppercase tracking-widest text-slate-600 shadow-sm border border-slate-200 hover:bg-slate-50 transition-all">
|
||||
<Download size={14} /> Exportar
|
||||
</button>
|
||||
<button className="flex items-center gap-2 rounded-xl bg-blue-600 px-4 py-2 text-[10px] font-black uppercase tracking-widest text-white shadow-lg shadow-blue-500/20 hover:bg-blue-700 transition-all">
|
||||
<Calendar size={14} /> Últimos 30 días
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* GRID DE STATS REFINADO */}
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatsCard title="Recaudación Hoy" value={`$ ${formatCurrency(data.revenueToday)}`} icon={DollarSign} color="blue" delay={0.1} />
|
||||
<StatsCard title="Avisos Publicados" value={data.adsToday} icon={FileText} color="emerald" delay={0.2} />
|
||||
<StatsCard title="Ticket Promedio" value={`$ ${formatCurrency(data.ticketAverage)}`} icon={TrendingUp} color="purple" delay={0.3} />
|
||||
<StatsCard title="Ocupación Papel" value={`${data.paperOccupation.toFixed(1)}%`} icon={Zap} color="amber" delay={0.4} />
|
||||
</div>
|
||||
|
||||
{/* SECCIÓN GRÁFICOS */}
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
|
||||
{/* Tendencia de Ingresos */}
|
||||
<div className="lg:col-span-2 rounded-[2rem] border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50">
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<h3 className="text-xs font-black text-slate-500 uppercase tracking-[0.2em]">Tendencia Semanal</h3>
|
||||
<span className="text-[10px] font-black text-blue-600 bg-blue-50 px-2.5 py-1 rounded-lg border border-blue-100">+12% vs semana anterior</span>
|
||||
</div>
|
||||
<div className="h-[280px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={data.weeklyTrend}>
|
||||
<defs>
|
||||
<linearGradient id="colorRev" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.1} />
|
||||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
|
||||
<XAxis dataKey="day" axisLine={false} tickLine={false} tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 'bold' }} dy={10} />
|
||||
<YAxis axisLine={false} tickLine={false} tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 'bold' }} />
|
||||
<Tooltip
|
||||
contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1)', fontSize: '12px', fontWeight: 'bold' }}
|
||||
/>
|
||||
<Area type="monotone" dataKey="amount" stroke="#3b82f6" strokeWidth={4} fillOpacity={1} fill="url(#colorRev)" />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Canales de Venta */}
|
||||
<div className="rounded-[2rem] border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50">
|
||||
<h3 className="mb-8 text-xs font-black text-slate-500 uppercase tracking-[0.2em]">Mix de Canales</h3>
|
||||
<div className="h-[220px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie data={data.channelMix} innerRadius={65} outerRadius={85} paddingAngle={8} dataKey="value">
|
||||
{data.channelMix.map((_, idx) => <Cell key={idx} fill={COLORS[idx % COLORS.length]} />)}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="mt-6 space-y-3">
|
||||
{data.channelMix.map((item, idx) => (
|
||||
<div key={item.name} className="flex items-center justify-between bg-slate-50 px-4 py-2 rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-2 w-2 rounded-full" style={{ backgroundColor: COLORS[idx] }} />
|
||||
<span className="text-[10px] text-slate-600 font-black uppercase tracking-tighter">{item.name}</span>
|
||||
</div>
|
||||
<span className="text-xs font-black text-slate-900">{item.value} ads</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TABLA DE ÚLTIMAS OPERACIONES (ESTILO CAJA DIARIA) */}
|
||||
<div className="rounded-[2rem] border border-slate-200 bg-white overflow-hidden shadow-xl shadow-slate-200/50 flex flex-col">
|
||||
<div className="p-6 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
|
||||
<h3 className="text-xs font-black text-slate-800 uppercase tracking-[0.2em]">Últimas Operaciones Recibidas</h3>
|
||||
<button className="text-[10px] font-black text-blue-600 uppercase tracking-widest hover:text-blue-700 flex items-center gap-1">
|
||||
Ver todas <ArrowUpRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead className="bg-slate-50/30 text-[9px] uppercase text-slate-400 font-black tracking-[0.15em] border-b border-slate-100">
|
||||
<tr>
|
||||
<th className="px-8 py-4">Aviso / Detalle</th>
|
||||
<th className="px-8 py-4 text-center">Horario (GMT-3)</th>
|
||||
<th className="px-8 py-4 text-center">Estado</th>
|
||||
<th className="px-8 py-4 text-right">Monto Neto</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-50">
|
||||
{recentAds.map((ad) => (
|
||||
<tr key={ad.id} className="hover:bg-blue-50/30 transition-colors group">
|
||||
<td className="px-8 py-4">
|
||||
<div className="font-extrabold text-slate-900 uppercase text-xs tracking-tight group-hover:text-blue-600 transition-colors">{ad.title}</div>
|
||||
<div className="text-[9px] text-slate-500 font-bold uppercase tracking-tighter mt-0.5">
|
||||
{ad.categoryName} • ID #{ad.id.toString().padStart(6, '0')}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-8 py-4 text-center">
|
||||
<div className="inline-flex items-center gap-1.5 text-slate-800 font-black bg-slate-100 px-2.5 py-1 rounded-lg text-[10px]">
|
||||
<Clock size={12} className="text-blue-500" />
|
||||
{formatLocalTime(ad.createdAt)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-8 py-4 text-center">
|
||||
<span className={clsx(
|
||||
"inline-flex items-center rounded-md px-2.5 py-1 text-[8px] font-black uppercase tracking-tighter border",
|
||||
ad.status === 'Published'
|
||||
? 'bg-emerald-50 text-emerald-700 border-emerald-100'
|
||||
: 'bg-amber-50 text-amber-700 border-amber-100'
|
||||
)}>
|
||||
{ad.status === 'Published' ? 'Cobrado' : 'Pendiente'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-8 py-4 text-right font-black text-slate-950 text-sm">
|
||||
<span className="text-[10px] opacity-40 mr-1">$</span>
|
||||
{formatCurrency(ad.adFee)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// StatsCard actualizado con estética Premium
|
||||
function StatsCard({ title, value, icon: Icon, color, delay }: any) {
|
||||
const colorMap: any = {
|
||||
blue: 'text-blue-600 bg-blue-50 border-blue-100',
|
||||
emerald: 'text-emerald-600 bg-emerald-50 border-emerald-100',
|
||||
purple: 'text-purple-600 bg-purple-50 border-purple-100',
|
||||
amber: 'text-amber-600 bg-amber-50 border-amber-100',
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay }}
|
||||
whileHover={{ y: -3 }}
|
||||
className="relative overflow-hidden rounded-[2rem] border border-slate-200 bg-white p-6 shadow-lg shadow-slate-200/50"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5">{title}</p>
|
||||
<h3 className="text-2xl font-black tracking-tighter text-slate-900">{value}</h3>
|
||||
</div>
|
||||
<div className={clsx("flex h-11 w-11 items-center justify-center rounded-2xl border shadow-inner", colorMap[color])}>
|
||||
<Icon size={20} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -bottom-4 -right-4 h-16 w-16 rounded-full bg-slate-50 opacity-50" />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
312
frontend/counter-panel/src/pages/AdvancedAnalytics.tsx
Normal file
312
frontend/counter-panel/src/pages/AdvancedAnalytics.tsx
Normal file
@@ -0,0 +1,312 @@
|
||||
import { useEffect, useState, useCallback, type ReactNode } from 'react';
|
||||
import { dashboardService } from '../services/dashboardService';
|
||||
import type {
|
||||
AdvancedAnalyticsData,
|
||||
PaymentMethodStat,
|
||||
CategoryPerformanceStat
|
||||
} from '../types/Analytics';
|
||||
import {
|
||||
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
||||
PieChart, Pie, Cell, AreaChart, Area
|
||||
} from 'recharts';
|
||||
import {
|
||||
TrendingUp, DollarSign,
|
||||
Clock, ArrowUpRight, ArrowDownRight, Award, PieChart as PieChartIcon
|
||||
} from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import clsx from 'clsx';
|
||||
|
||||
// Colores para gráficos con estética premium
|
||||
const COLORS = ['#3b82f6', '#8b5cf6', '#ec4899', '#f59e0b', '#10b981'];
|
||||
|
||||
export default function AdvancedAnalytics() {
|
||||
const [data, setData] = useState<AdvancedAnalyticsData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [timeRange, setTimeRange] = useState('month');
|
||||
|
||||
const loadAnalytics = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const end = new Date().toISOString();
|
||||
const start = new Date();
|
||||
if (timeRange === 'week') start.setDate(start.getDate() - 7);
|
||||
else if (timeRange === 'month') start.setMonth(start.getMonth() - 1);
|
||||
else if (timeRange === 'year') start.setFullYear(start.getFullYear() - 1);
|
||||
|
||||
const res = await dashboardService.getAdvancedAnalytics(start.toISOString(), end);
|
||||
setData(res);
|
||||
} catch (error) {
|
||||
console.error('Error al cargar analítica:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [timeRange]);
|
||||
|
||||
useEffect(() => {
|
||||
loadAnalytics();
|
||||
}, [loadAnalytics]);
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-slate-50">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
|
||||
<p className="text-slate-500 font-bold uppercase tracking-widest text-xs text-center">Sincronizando con el servidor central...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-7xl mx-auto space-y-8 animate-in fade-in duration-700">
|
||||
{/* Encabezado con selector de rango temporal */}
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-4xl font-black text-slate-900 tracking-tighter uppercase flex items-center gap-3">
|
||||
<span className="bg-blue-600 w-2 h-8 rounded-full"></span>
|
||||
BI & Analítica Avanzada
|
||||
</h1>
|
||||
<p className="text-slate-400 font-bold uppercase tracking-widest text-[10px] mt-1">Inteligencia de negocios y reportes gerenciales</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-1 rounded-2xl shadow-xl border border-slate-100 flex gap-1">
|
||||
{['week', 'month', 'year'].map((r) => (
|
||||
<button
|
||||
key={r}
|
||||
onClick={() => setTimeRange(r)}
|
||||
className={`px-6 py-2 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${timeRange === r ? 'bg-slate-900 text-white shadow-lg' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
{r === 'week' ? '7 Días' : r === 'month' ? '30 Días' : 'Año'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tarjetas de KPIs Principales */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<KPICard
|
||||
title="Recaudación Neto"
|
||||
value={`$${data.totalRevenue?.toLocaleString() || 0}`}
|
||||
growth={data.revenueGrowth}
|
||||
icon={<DollarSign className="text-blue-600" />}
|
||||
color="blue"
|
||||
/>
|
||||
<KPICard
|
||||
title="Avisos Publicados"
|
||||
value={data.totalAds}
|
||||
growth={data.adsGrowth}
|
||||
icon={<Award className="text-emerald-600" />}
|
||||
color="emerald"
|
||||
/>
|
||||
<KPICard
|
||||
title="Promedio por Aviso"
|
||||
value={`$${((data.totalRevenue || 0) / (data.totalAds || 1)).toLocaleString()}`}
|
||||
icon={<TrendingUp className="text-indigo-600" />}
|
||||
color="indigo"
|
||||
simple
|
||||
/>
|
||||
<KPICard
|
||||
title="Crecimiento vs Ant."
|
||||
value={`${data.revenueGrowth?.toFixed(1) || 0}%`}
|
||||
icon={<PieChartIcon className="text-amber-600" />}
|
||||
color="amber"
|
||||
simple
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
{/* Gráfico de Línea: Tendencia Temporal */}
|
||||
<div className="lg:col-span-8 bg-white p-8 rounded-[3rem] shadow-2xl shadow-slate-200/50 border border-slate-100">
|
||||
<h3 className="text-lg font-black text-slate-800 uppercase tracking-tight mb-8">Tendencia de Ingresos Diarios</h3>
|
||||
<div className="h-[350px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={data.dailyTrends}>
|
||||
<defs>
|
||||
<linearGradient id="colorAmountArea" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.1} />
|
||||
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
|
||||
<XAxis dataKey="day" axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: '#64748b' }} dy={10} />
|
||||
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: '#64748b' }} />
|
||||
<Tooltip
|
||||
contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1)' }}
|
||||
labelStyle={{ fontWeight: 'bold', color: '#1e293b' }}
|
||||
/>
|
||||
<Area type="monotone" dataKey="amount" stroke="#3b82f6" strokeWidth={4} fillOpacity={1} fill="url(#colorAmountArea)" />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gráfico de Torta: Canales de Cobro */}
|
||||
<div className="lg:col-span-4 bg-white p-8 rounded-[3rem] shadow-2xl shadow-slate-200/50 border border-slate-100">
|
||||
<h3 className="text-lg font-black text-slate-800 uppercase tracking-tight mb-8">Manejo de Tesorería</h3>
|
||||
<div className="h-[350px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data.paymentsDistribution}
|
||||
innerRadius={70}
|
||||
outerRadius={100}
|
||||
paddingAngle={8}
|
||||
dataKey="total"
|
||||
nameKey="method"
|
||||
>
|
||||
{data.paymentsDistribution?.map((_: PaymentMethodStat, index: number) => (
|
||||
<Cell key={`cell-analytics-${index}`} fill={COLORS[index % COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-2 mt-4 px-4 overflow-y-auto max-h-[100px]">
|
||||
{data.paymentsDistribution?.map((p: PaymentMethodStat, idx: number) => (
|
||||
<div key={idx} className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: COLORS[idx % COLORS.length] }}></div>
|
||||
<span className="text-[10px] font-bold text-slate-500 uppercase">{p.method}</span>
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-slate-900">${p.total?.toLocaleString()}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dentro del return de AdvancedAnalytics.tsx */}
|
||||
<div className="bg-white p-8 rounded-[3rem] shadow-xl border border-slate-100">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h3 className="text-xs font-black text-slate-500 uppercase tracking-widest">Eficiencia de Canales</h3>
|
||||
<span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-lg">Real-time</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<ChannelProgress
|
||||
label="Mostrador (Venta Presencial)"
|
||||
value={data.sourceMix?.mostradorPercent || 0}
|
||||
count={data.sourceMix?.mostradorCount || 0}
|
||||
color="bg-slate-900"
|
||||
/>
|
||||
<ChannelProgress
|
||||
label="Web (Wizard Digital)"
|
||||
value={data.sourceMix?.webPercent || 0}
|
||||
count={data.sourceMix?.webCount || 0}
|
||||
color="bg-blue-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Gráfico de Barras: Horas Pico */}
|
||||
<div className="bg-slate-900 p-10 rounded-[3rem] text-white shadow-2xl relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-600/10 rounded-full -mr-32 -mt-32 blur-[80px]"></div>
|
||||
<h3 className="text-lg font-black uppercase tracking-tight mb-10 flex items-center gap-3 relative z-10">
|
||||
<Clock size={20} className="text-blue-400" />
|
||||
Frecuencia de Operatividad (Horas Pico)
|
||||
</h3>
|
||||
<div className="h-[280px] relative z-10">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={data.hourlyActivity}>
|
||||
<XAxis dataKey="hour" axisLine={false} tickLine={false} tick={{ fill: '#94a3b8', fontSize: 10 }} />
|
||||
<Tooltip cursor={{ fill: '#ffffff10' }} contentStyle={{ color: '#000', borderRadius: '12px', border: 'none' }} />
|
||||
<Bar dataKey="count" fill="#3b82f6" radius={[6, 6, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Listado de Rubros: Participación en Ingresos */}
|
||||
<div className="bg-white p-10 rounded-[3rem] shadow-2xl shadow-slate-200/50 border border-slate-100">
|
||||
<h3 className="text-lg font-black text-slate-800 uppercase tracking-tight mb-10">Ranking de Rubros por Ingresos</h3>
|
||||
<div className="space-y-6">
|
||||
{data.categoryPerformance?.slice(0, 5).map((cp: CategoryPerformanceStat, idx: number) => (
|
||||
<div key={idx} className="group cursor-default">
|
||||
<div className="flex justify-between items-end mb-2">
|
||||
<span className="text-[10px] font-black text-slate-900 uppercase tracking-widest">{cp.categoryName}</span>
|
||||
<div className="text-right">
|
||||
<span className="text-xs font-black text-blue-600 block leading-none">${cp.revenue?.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-2.5 bg-slate-50 rounded-full overflow-hidden border border-slate-100">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${cp.share || 0}%` }}
|
||||
transition={{ duration: 1, ease: 'easeOut' }}
|
||||
className="h-full bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full"
|
||||
></motion.div>
|
||||
</div>
|
||||
<div className="flex justify-between mt-1.5 opacity-60">
|
||||
<span className="text-[9px] font-bold text-slate-400 uppercase">{cp.adsCount} avisos</span>
|
||||
<span className="text-[9px] font-black text-indigo-500 uppercase">{cp.share?.toFixed(1)}% del total</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface KPICardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
growth?: number;
|
||||
icon: ReactNode;
|
||||
color: string;
|
||||
simple?: boolean;
|
||||
}
|
||||
|
||||
function ChannelProgress({ label, value, count, color }: any) {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-end text-[10px] font-black uppercase mb-2">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-slate-400">{label}</span>
|
||||
<span className="text-slate-900 text-xs">{count} avisos</span>
|
||||
</div>
|
||||
<span className="text-blue-600 text-lg tracking-tighter">{value.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="h-2.5 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${value}%` }}
|
||||
transition={{ duration: 1, ease: "easeOut" }}
|
||||
className={clsx("h-full shadow-lg", color)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Subcomponente reutilizable para tarjetas de métricas (KPIs)
|
||||
function KPICard({ title, value, growth, icon, color, simple = false }: KPICardProps) {
|
||||
const isPositive = (growth ?? 0) >= 0;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
className="bg-white p-8 rounded-[2.5rem] shadow-2xl shadow-slate-200/50 border border-slate-100 relative overflow-hidden"
|
||||
>
|
||||
<div className={`absolute top-0 right-0 w-20 h-20 bg-${color}-500/5 rounded-full -mr-10 -mt-10`}></div>
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<div className={`p-3 rounded-2xl bg-${color}-50`}>
|
||||
{icon}
|
||||
</div>
|
||||
{!simple && growth !== undefined && (
|
||||
<div className={`flex items-center gap-1 text-[9px] font-black uppercase px-2 py-1 rounded-lg ${isPositive ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600'
|
||||
}`}>
|
||||
{isPositive ? <ArrowUpRight size={12} /> : <ArrowDownRight size={12} />}
|
||||
{Math.abs(growth).toFixed(1)}%
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h4 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2 leading-none">{title}</h4>
|
||||
<div className="text-3xl font-black text-slate-900 tracking-tighter leading-none">{value}</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,127 +1,295 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { cashRegisterService } from '../services/cashRegisterService';
|
||||
import { Printer, Download, Clock, CheckCircle, RefreshCw } from 'lucide-react';
|
||||
import type { GlobalReport, ReportItem } from '../types/Report';
|
||||
import {
|
||||
Printer,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
RefreshCw,
|
||||
Wallet,
|
||||
CreditCard,
|
||||
Banknote,
|
||||
Search,
|
||||
Filter,
|
||||
ArrowRightLeft
|
||||
} from 'lucide-react';
|
||||
import CashClosingModal from '../components/CashClosingModal';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useToast } from '../context/use-toast';
|
||||
|
||||
export default function CashRegisterPage() {
|
||||
const [data, setData] = useState<any>(null);
|
||||
const { showToast } = useToast();
|
||||
const [data, setData] = useState<GlobalReport | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showClosingModal, setShowClosingModal] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
const loadData = async () => {
|
||||
const loadData = useCallback(async (isManual = false) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await cashRegisterService.getDailyStatus();
|
||||
setData(result);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
if (isManual) showToast('Datos de caja sincronizados correctamente.', 'success');
|
||||
} catch {
|
||||
showToast('Error al conectar con el servidor de tesorería.', 'error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}, [showToast]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
}, [loadData]);
|
||||
|
||||
const handleCerrarCaja = async () => {
|
||||
if (!confirm("¿Desea finalizar el turno y descargar el comprobante de cierre?")) return;
|
||||
try {
|
||||
await cashRegisterService.downloadClosurePdf();
|
||||
alert("Cierre generado con éxito. Entregue el reporte junto con el efectivo.");
|
||||
} catch (e) {
|
||||
alert("Error al generar el PDF");
|
||||
}
|
||||
const handleCerrarCaja = () => {
|
||||
setShowClosingModal(true);
|
||||
};
|
||||
|
||||
if (loading && !data) return <div className="p-10 text-center text-gray-500">Sincronizando caja...</div>;
|
||||
const handleClosingComplete = () => {
|
||||
loadData();
|
||||
};
|
||||
|
||||
const formatCurrency = (val: number) =>
|
||||
val.toLocaleString('es-AR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
|
||||
// SOLUCIÓN AL HORARIO: Forzar interpretación UTC
|
||||
const formatLocalTime = (dateString: string) => {
|
||||
if (!dateString) return "--:--";
|
||||
|
||||
// 1. Convertimos el formato de SQL (espacio) a ISO (T)
|
||||
let isoStr = dateString.replace(" ", "T");
|
||||
|
||||
// 2. Si no tiene la 'Z' al final, se la agregamos para decirle al navegador: "Esto es UTC"
|
||||
if (!isoStr.endsWith("Z")) {
|
||||
isoStr += "Z";
|
||||
}
|
||||
|
||||
const date = new Date(isoStr);
|
||||
|
||||
return date.toLocaleTimeString('es-AR', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: true,
|
||||
timeZone: 'America/Argentina/Buenos_Aires' // Forzamos la zona de Argentina
|
||||
});
|
||||
};
|
||||
|
||||
const filteredItems = data?.items.filter((item: ReportItem) =>
|
||||
item.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
item.category?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
) || [];
|
||||
|
||||
if (loading && !data) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-4 text-slate-500">
|
||||
<RefreshCw size={32} className="animate-spin text-blue-600" />
|
||||
<span className="font-black tracking-[0.2em] text-[10px] uppercase">Sincronizando flujos...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8 w-full flex flex-col gap-6 bg-gray-100 h-full overflow-y-auto">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-2xl font-black text-slate-800 tracking-tight">MI CAJA DIARIA</h2>
|
||||
<p className="text-gray-500 text-sm flex items-center gap-1">
|
||||
<Clock size={14} /> Turno actual: {new Date().toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button onClick={loadData} className="p-2 text-gray-400 hover:text-blue-600 transition-colors">
|
||||
<RefreshCw size={20} className={loading ? 'animate-spin' : ''} />
|
||||
<div className="p-5 w-full flex flex-col gap-5 bg-slate-50/50 h-full overflow-hidden">
|
||||
|
||||
{/* Header Section Refinado */}
|
||||
<div className="flex justify-between items-start">
|
||||
<motion.div initial={{ opacity: 0, x: -15 }} animate={{ opacity: 1, x: 0 }}>
|
||||
<span className="text-[9px] font-black text-blue-600 uppercase tracking-[0.3em] mb-0.5 block">Control de Tesorería</span>
|
||||
<h2 className="text-xl font-black text-slate-900 tracking-tight uppercase flex items-center gap-2">
|
||||
<span className="bg-blue-600 w-1.5 h-5 rounded-full"></span>
|
||||
Caja Diaria
|
||||
</h2>
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
<div className="flex items-center gap-1.5 px-2 py-0.5 bg-white border border-slate-200 rounded-lg text-[9px] font-black text-slate-500 shadow-sm uppercase">
|
||||
<Clock size={10} className="text-blue-500" />
|
||||
TURNO: {new Date().toLocaleDateString('es-AR', { weekday: 'short', day: 'numeric', month: 'short' })}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div initial={{ opacity: 0, x: 15 }} animate={{ opacity: 1, x: 0 }} className="flex gap-3">
|
||||
<button
|
||||
onClick={() => loadData(true)}
|
||||
className="p-2 bg-white border border-slate-200 text-slate-500 hover:text-blue-600 hover:border-blue-200 rounded-xl transition-all shadow-sm active:scale-95"
|
||||
>
|
||||
<RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCerrarCaja}
|
||||
className="bg-gray-900 text-white px-6 py-2 rounded-lg font-bold flex items-center gap-2 hover:bg-black transition-all shadow-lg active:scale-95"
|
||||
className="bg-slate-900 text-white px-5 py-2 rounded-xl font-black text-[10px] flex items-center gap-2 hover:bg-black transition-all shadow-lg shadow-slate-200 active:scale-95 group tracking-widest"
|
||||
>
|
||||
<Printer size={20} /> FINALIZAR Y CERRAR (F4)
|
||||
<Printer size={14} className="text-blue-400" />
|
||||
CERRAR CAJA (F4)
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* KPIs DE CAJA */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-white p-8 rounded-2xl shadow-sm border-b-4 border-green-500 flex justify-between items-center">
|
||||
<div>
|
||||
<div className="text-gray-400 text-xs font-bold uppercase tracking-widest">Efectivo a Rendir</div>
|
||||
<div className="text-4xl font-black text-slate-800 mt-1">$ {data?.totalRevenue?.toLocaleString('es-AR', { minimumFractionDigits: 2 })}</div>
|
||||
{/* KPI Section Refinado (Más compacto) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
<KPICard
|
||||
icon={<Banknote size={18} />}
|
||||
label="Recaudación Turno"
|
||||
value={`$ ${formatCurrency(data?.totalRevenue || 0)}`}
|
||||
badge="EN EFECTIVO"
|
||||
color="emerald"
|
||||
/>
|
||||
<KPICard
|
||||
icon={<CheckCircle size={18} />}
|
||||
label="Avisos Procesados"
|
||||
value={data?.totalAds || 0}
|
||||
badge="OPERACIONES"
|
||||
color="blue"
|
||||
/>
|
||||
<motion.div
|
||||
whileHover={{ y: -3 }}
|
||||
className="bg-slate-900 p-4 rounded-[1.5rem] shadow-xl flex flex-col justify-between text-white overflow-hidden relative border-b-4 border-blue-600"
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-20 h-20 bg-blue-600/10 rounded-full -mr-8 -mt-8 blur-2xl"></div>
|
||||
<div className="flex justify-between items-start mb-2 relative z-10">
|
||||
<div className="p-2 bg-white/5 rounded-xl text-blue-400"><Wallet size={16} /></div>
|
||||
<span className="text-[8px] font-black text-blue-400 bg-blue-500/10 border border-blue-500/20 px-2 py-0.5 rounded-md uppercase tracking-widest">PRÓXIMO CIERRE</span>
|
||||
</div>
|
||||
<div className="p-4 bg-green-50 rounded-full text-green-600">
|
||||
<Download size={32} />
|
||||
<div className="relative z-10">
|
||||
<div className="text-slate-500 text-[8px] font-black uppercase tracking-widest mb-0.5">Arqueo Estimado</div>
|
||||
<div className="text-2xl font-mono font-black text-white leading-none">
|
||||
$ {formatCurrency(data?.totalRevenue || 0)}
|
||||
</div>
|
||||
<div className="mt-2 flex gap-1 opacity-20">
|
||||
{[1, 2, 3, 4, 5, 6].map(i => <div key={i} className="h-0.5 flex-1 bg-white rounded-full"></div>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-2xl shadow-sm border-b-4 border-blue-500 flex justify-between items-center">
|
||||
<div>
|
||||
<div className="text-gray-400 text-xs font-bold uppercase tracking-widest">Avisos Procesados</div>
|
||||
<div className="text-4xl font-black text-slate-800 mt-1">{data?.totalAds} <span className="text-lg text-gray-300">Clasificados</span></div>
|
||||
</div>
|
||||
<div className="p-4 bg-blue-50 rounded-full text-blue-600">
|
||||
<CheckCircle size={32} />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* TABLA DE MOVIMIENTOS */}
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden flex-1 flex flex-col">
|
||||
<div className="p-4 bg-gray-50 border-b font-bold text-slate-600 text-sm uppercase tracking-wider">
|
||||
Detalle de transacciones del turno
|
||||
{/* Table Section (Contraste aumentado) */}
|
||||
<div className="flex-1 bg-white rounded-[1.8rem] shadow-xl shadow-slate-200/50 border border-slate-200 overflow-hidden flex flex-col min-h-0">
|
||||
<div className="px-5 py-3 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<div className="relative max-w-xs w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" size={14} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar movimiento..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-9 pr-4 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-4 focus:ring-blue-500/5 outline-none transition-all placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
<button className="flex items-center gap-2 px-3 py-2 bg-white border border-slate-200 rounded-xl text-[9px] font-black text-slate-600 hover:border-slate-400 transition-all shadow-sm uppercase tracking-tighter">
|
||||
<Filter size={12} /> Filtrar Pagos
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-[9px] font-black uppercase tracking-widest text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-100">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
Turno Activo
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-y-auto flex-1">
|
||||
|
||||
<div className="overflow-y-auto flex-1 custom-scrollbar">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-50 text-gray-400 text-[10px] uppercase font-bold sticky top-0 z-10">
|
||||
<thead className="bg-slate-50 text-slate-600 text-[9px] uppercase font-black tracking-[0.15em] sticky top-0 z-10 backdrop-blur-md border-b border-slate-100">
|
||||
<tr>
|
||||
<th className="p-4 border-b">ID</th>
|
||||
<th className="p-4 border-b">Hora</th>
|
||||
<th className="p-4 border-b">Aviso / Título</th>
|
||||
<th className="p-4 border-b">Rubro</th>
|
||||
<th className="p-4 border-b text-right">Monto</th>
|
||||
<th className="px-6 py-4">ID Operación</th>
|
||||
<th className="px-6 py-4 text-center">Horario (GMT-3)</th>
|
||||
<th className="px-6 py-4">Detalle del Aviso</th>
|
||||
<th className="px-6 py-4">Rubro</th>
|
||||
<th className="px-6 py-4 text-right">Importe</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100 text-sm">
|
||||
{data?.items.map((item: any) => (
|
||||
<tr key={item.id} className="hover:bg-blue-50/50 transition-colors">
|
||||
<td className="p-4 font-mono text-gray-400">#{item.id}</td>
|
||||
<td className="p-4 text-gray-600">{new Date(item.date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</td>
|
||||
<td className="p-4 font-bold text-slate-700">{item.title}</td>
|
||||
<td className="p-4">
|
||||
<span className="bg-gray-100 px-2 py-1 rounded text-[10px] font-bold text-gray-500 uppercase">{item.category}</span>
|
||||
</td>
|
||||
<td className="p-4 text-right font-black text-slate-900">$ {item.amount.toLocaleString()}</td>
|
||||
</tr>
|
||||
))}
|
||||
{data?.items.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="p-20 text-center text-gray-400 italic">No se han registrado cobros en este turno todavía.</td>
|
||||
</tr>
|
||||
)}
|
||||
<tbody className="divide-y divide-slate-50 text-xs">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{filteredItems.map((item: ReportItem, idx: number) => (
|
||||
<motion.tr
|
||||
key={item.id}
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.02 }}
|
||||
className="hover:bg-blue-50/40 transition-all group"
|
||||
>
|
||||
<td className="px-6 py-4 font-mono text-slate-500 font-bold">#{item.id.toString().padStart(6, '0')}</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<div className="inline-flex items-center gap-1.5 text-slate-800 font-black bg-slate-100 px-2.5 py-1 rounded-lg">
|
||||
<Clock size={12} className="text-blue-500" />
|
||||
{formatLocalTime(item.date)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-extrabold text-slate-900 tracking-tight group-hover:text-blue-600 transition-colors uppercase line-clamp-1">{item.title}</span>
|
||||
<span className="text-[9px] text-slate-500 font-bold tracking-tighter opacity-80 italic">{item.clientName || 'Consumidor Final'}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="bg-slate-100 px-2.5 py-1 rounded-md text-[8px] font-black text-slate-700 uppercase tracking-tighter border border-slate-200">
|
||||
{item.category}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right font-black text-slate-950 text-sm">
|
||||
<span className="text-[10px] opacity-40 mr-1">$</span>
|
||||
{formatCurrency(item.amount)}
|
||||
</td>
|
||||
</motion.tr>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Footer de la tabla con el total */}
|
||||
<div className="p-4 bg-slate-900 text-white flex justify-between items-center">
|
||||
<span className="text-xs font-bold uppercase opacity-60">Total en Caja</span>
|
||||
<span className="text-xl font-mono font-bold text-green-400">$ {data?.totalRevenue?.toLocaleString()}</span>
|
||||
{/* Footer Dark Bar (Más compacta y alto contraste) */}
|
||||
<div className="px-6 py-4 bg-slate-900 border-t border-slate-800 flex justify-between items-center shadow-[0_-10px_30px_rgba(0,0,0,0.15)] flex-shrink-0">
|
||||
<div className="flex items-center gap-8">
|
||||
<SummaryItem icon={<Banknote size={14} />} label="Efectivo" value={formatCurrency(data?.totalCash || 0)} color="text-emerald-400" />
|
||||
<SummaryItem icon={<CreditCard size={14} />} label="Tarjetas" value={formatCurrency((data?.totalDebit || 0) + (data?.totalCredit || 0))} color="text-blue-400" />
|
||||
<SummaryItem icon={<ArrowRightLeft size={14} />} label="Transf." value={formatCurrency(data?.totalTransfer || 0)} color="text-indigo-400" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-[8px] font-black text-blue-500 uppercase tracking-[0.2em] mb-0.5">Cierre Parcial</span>
|
||||
<div className="text-xl font-mono font-black text-white flex items-baseline gap-1.5">
|
||||
<span className="text-[9px] font-sans font-bold text-white/30 uppercase tracking-widest">TOTAL</span>
|
||||
<span className="text-green-400">$ {formatCurrency(data?.totalRevenue || 0)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showClosingModal && (
|
||||
<CashClosingModal onClose={() => setShowClosingModal(false)} onComplete={handleClosingComplete} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function KPICard({ icon, label, value, badge, color }: any) {
|
||||
const colorStyles: any = {
|
||||
emerald: "bg-emerald-500/10 text-emerald-600",
|
||||
blue: "bg-blue-500/10 text-blue-600"
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div whileHover={{ y: -3 }} className="bg-white p-4 rounded-[1.5rem] shadow-lg border border-slate-100 flex flex-col justify-between">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div className={`p-2 rounded-xl ${colorStyles[color]}`}>{icon}</div>
|
||||
<span className={`text-[8px] font-black px-2 py-0.5 rounded-md uppercase tracking-widest ${colorStyles[color]}`}>{badge}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-slate-600 text-[8px] font-black uppercase tracking-widest mb-0.5">{label}</div>
|
||||
<div className="text-2xl font-mono font-black text-slate-950 leading-none">
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryItem({ icon, label, value, color }: any) {
|
||||
return (
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className={`p-1.5 bg-white/5 rounded-lg ${color}`}>{icon}</div>
|
||||
<div className="flex flex-col leading-tight">
|
||||
<span className="text-[7px] font-black text-slate-500 uppercase tracking-tighter">{label}</span>
|
||||
<span className="text-xs font-mono font-bold text-white tracking-tighter">$ {value}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,21 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import api from '../services/api';
|
||||
import { useDebounce } from '../hooks/useDebounce';
|
||||
import { processCategories, type FlatCategory } from '../utils/categoryTreeUtils';
|
||||
import {
|
||||
Printer, Save,
|
||||
AlignLeft, AlignCenter, AlignRight, AlignJustify,
|
||||
Type, Search, ChevronDown, Bold, Square as FrameIcon
|
||||
Type, Search, ChevronDown, Bold, Square as FrameIcon,
|
||||
ArrowUpRight,
|
||||
RefreshCw
|
||||
} from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
import PaymentModal, { type Payment } from '../components/PaymentModal';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useToast } from '../context/use-toast';
|
||||
import { useCashSession } from '../hooks/useCashSession';
|
||||
import CashOpeningModal from '../components/CashOpeningModal';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
// Interfaces
|
||||
interface Operation { id: number; name: string; }
|
||||
@@ -18,9 +26,22 @@ interface PricingResult {
|
||||
specialCharCount: number; details: string; appliedPromotion: string;
|
||||
}
|
||||
|
||||
const escapeHTML = (str: string) => {
|
||||
return str.replace(/[&<>"']/g, (m) => ({
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
}[m] || m));
|
||||
};
|
||||
|
||||
export default function FastEntryPage() {
|
||||
const navigate = useNavigate();
|
||||
const { showToast } = useToast();
|
||||
const [flatCategories, setFlatCategories] = useState<FlatCategory[]>([]);
|
||||
const [operations, setOperations] = useState<Operation[]>([]);
|
||||
const { session, loading: sessionLoading, refreshSession } = useCashSession();
|
||||
|
||||
const [categorySearch, setCategorySearch] = useState("");
|
||||
const [isCatDropdownOpen, setIsCatDropdownOpen] = useState(false);
|
||||
@@ -45,6 +66,8 @@ export default function FastEntryPage() {
|
||||
const clientWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const textInputRef = useRef<HTMLTextAreaElement>(null);
|
||||
const debouncedText = useDebounce(formData.text, 500);
|
||||
const [showPaymentModal, setShowPaymentModal] = useState(false);
|
||||
const [errors, setErrors] = useState<Record<string, boolean>>({});
|
||||
|
||||
const filteredCategories = flatCategories.filter(cat =>
|
||||
cat.path.toLowerCase().includes(categorySearch.toLowerCase()) ||
|
||||
@@ -53,7 +76,17 @@ export default function FastEntryPage() {
|
||||
|
||||
const selectedCategoryName = flatCategories.find(c => c.id === parseInt(formData.categoryId))?.name;
|
||||
|
||||
const printCourtesyTicket = (data: any, priceInfo: PricingResult) => {
|
||||
const validate = useCallback(() => {
|
||||
const newErrors: Record<string, boolean> = {
|
||||
categoryId: !formData.categoryId,
|
||||
operationId: !formData.operationId,
|
||||
text: !formData.text || formData.text.trim().length === 0,
|
||||
};
|
||||
setErrors(newErrors);
|
||||
return !Object.values(newErrors).some(v => v);
|
||||
}, [formData]);
|
||||
|
||||
const printCourtesyTicket = (data: typeof formData, priceInfo: PricingResult) => {
|
||||
const printWindow = window.open('', '_blank', 'width=300,height=600');
|
||||
if (!printWindow) return;
|
||||
|
||||
@@ -66,12 +99,12 @@ export default function FastEntryPage() {
|
||||
<p>${new Date().toLocaleString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<b>CLIENTE:</b> ${data.clientName || 'Consumidor Final'}<br/>
|
||||
<b>RUBRO:</b> ${selectedCategoryName}<br/>
|
||||
<b>CLIENTE:</b> ${escapeHTML(data.clientName || 'Consumidor Final')}<br/>
|
||||
<b>RUBRO:</b> ${escapeHTML(selectedCategoryName || '')}<br/>
|
||||
<b>DÍAS:</b> ${data.days}<br/>
|
||||
</div>
|
||||
<div style="background: #f0f0f0; padding: 8px; margin: 10px 0; border: 1px solid #000;">
|
||||
${data.text.toUpperCase()}
|
||||
${escapeHTML(data.text).toUpperCase()}
|
||||
</div>
|
||||
<div style="text-align: right; border-top: 1px dashed #000; padding-top: 5px;">
|
||||
<b style="font-size: 16px;">TOTAL: $${priceInfo.totalPrice.toLocaleString()}</b>
|
||||
@@ -85,6 +118,78 @@ export default function FastEntryPage() {
|
||||
setTimeout(() => { printWindow.print(); printWindow.close(); }, 250);
|
||||
};
|
||||
|
||||
const printPaymentReceipt = (data: typeof formData, priceInfo: PricingResult, payments: Payment[]) => {
|
||||
const printWindow = window.open('', '_blank', 'width=350,height=700');
|
||||
if (!printWindow) return;
|
||||
|
||||
const username = localStorage.getItem('username') || 'Cajero';
|
||||
const now = new Date();
|
||||
const totalWithSurcharges = payments.reduce((sum, p) => sum + p.amount + p.surcharge, 0);
|
||||
|
||||
const paymentRows = payments.map(p => {
|
||||
const paymentMethodMap: Record<string, string> = {
|
||||
'Cash': 'Efectivo',
|
||||
'Debit': 'Débito',
|
||||
'Credit': p.cardPlan || 'Crédito',
|
||||
'Transfer': 'Transferencia'
|
||||
};
|
||||
const methodName = paymentMethodMap[p.paymentMethod] || p.paymentMethod;
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td style="padding: 5px 0; border-bottom: 1px solid #ddd;">${methodName}</td>
|
||||
<td style="padding: 5px 0; text-align: right; border-bottom: 1px solid #ddd;">$${p.amount.toLocaleString()}</td>
|
||||
${p.surcharge > 0 ? `<td style="padding: 5px 0; text-align: right; border-bottom: 1px solid #ddd; color: #f59e0b;">+$${p.surcharge.toLocaleString()}</td>` : '<td></td>'}
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
const html = `
|
||||
<html>
|
||||
<head><style>@media print { body { margin: 0; } }</style></head>
|
||||
<body style="font-family: 'Courier New', monospace; width: 320px; padding: 15px; font-size: 11px; background: white;">
|
||||
<div style="text-align: center; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 10px;">
|
||||
<h1 style="margin: 0; font-size: 20px; font-weight: bold;">DIARIO EL DÍA</h1>
|
||||
<p style="margin: 2px 0; font-size: 10px;">Comprobante de Pago</p>
|
||||
<p style="margin: 2px 0; font-size: 10px; font-weight: bold;">N° ${Math.floor(Math.random() * 100000).toString().padStart(8, '0')}</p>
|
||||
<p style="margin: 5px 0; font-size: 9px;">${now.toLocaleDateString('es-AR')} - ${now.toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit' })}</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<p style="margin: 3px 0;"><b>CLIENTE:</b> ${escapeHTML(data.clientName || 'Consumidor Final')}</p>
|
||||
${data.clientDni ? `<p style="margin: 3px 0;"><b>DNI/CUIT:</b> ${escapeHTML(data.clientDni)}</p>` : ''}
|
||||
<p style="margin: 3px 0;"><b>ATENDIDO POR:</b> ${escapeHTML(username)}</p>
|
||||
</div>
|
||||
<div style="border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 8px 0; margin-bottom: 10px;">
|
||||
<p style="margin: 3px 0; font-weight: bold;">DETALLE DEL SERVICIO:</p>
|
||||
<p style="margin: 3px 0;">Rubro: ${escapeHTML(selectedCategoryName || '')}</p>
|
||||
<p style="margin: 3px 0;">Duración: ${data.days} día${data.days > 1 ? 's' : ''}</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<table style="width: 100%; font-size: 10px;">
|
||||
<tr><td>Tarifa Base</td><td style="text-align: right;">$${priceInfo.baseCost.toLocaleString()}</td></tr>
|
||||
${priceInfo.extraCost > 0 ? `<tr><td>Recargo texto</td><td style="text-align: right;">+$${priceInfo.extraCost.toLocaleString()}</td></tr>` : ''}
|
||||
<tr style="border-top: 2px solid #000; font-weight: bold; font-size: 12px;">
|
||||
<td style="padding: 8px 0;">SUBTOTAL</td><td style="text-align: right; padding: 8px 0;">$${priceInfo.totalPrice.toLocaleString()}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border-top: 2px solid #000; padding-top: 10px; margin-bottom: 10px;">
|
||||
<p style="margin: 5px 0; font-weight: bold; text-align: center;">MEDIOS DE PAGO</p>
|
||||
<table style="width: 100%; font-size: 10px;">${paymentRows}</table>
|
||||
</div>
|
||||
<div style="background: #000; color: #fff; padding: 12px; text-align: center; border-radius: 5px;">
|
||||
<p style="margin: 0; font-size: 10px;">TOTAL A PAGAR</p>
|
||||
<p style="margin: 5px 0; font-size: 24px; font-weight: bold;">$${totalWithSurcharges.toLocaleString('es-AR', { minimumFractionDigits: 2 })}</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
printWindow.document.write(html);
|
||||
printWindow.document.close();
|
||||
printWindow.focus();
|
||||
setTimeout(() => { printWindow.print(); printWindow.close(); }, 250);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
@@ -96,16 +201,18 @@ export default function FastEntryPage() {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = useCallback(async () => {
|
||||
if (!validate()) return;
|
||||
setShowPaymentModal(true);
|
||||
}, [validate]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'F10') {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
if (e.key === 'F10') { e.preventDefault(); handleSubmit(); }
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [formData, pricing, options]);
|
||||
}, [handleSubmit]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
@@ -142,13 +249,7 @@ export default function FastEntryPage() {
|
||||
}
|
||||
}, [debouncedClientSearch, showSuggestions]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.categoryId || !formData.operationId || !formData.text) {
|
||||
alert("⚠️ Error: Complete Rubro, Operación y Texto.");
|
||||
return;
|
||||
}
|
||||
if (!confirm(`¿Confirmar cobro de $${pricing.totalPrice.toLocaleString()}?`)) return;
|
||||
|
||||
const handlePaymentConfirm = async (payments: Payment[]) => {
|
||||
try {
|
||||
const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
await api.post('/listings', {
|
||||
@@ -156,21 +257,30 @@ export default function FastEntryPage() {
|
||||
operationId: parseInt(formData.operationId),
|
||||
title: formData.text.substring(0, 40) + '...',
|
||||
description: formData.text,
|
||||
price: 0, adFee: pricing.totalPrice,
|
||||
price: 0,
|
||||
adFee: pricing.totalPrice,
|
||||
status: 'Published',
|
||||
printText: formData.text,
|
||||
printStartDate: tomorrow.toISOString(),
|
||||
printDaysCount: formData.days,
|
||||
isBold: options.isBold, isFrame: options.isFrame,
|
||||
printFontSize: options.fontSize, printAlignment: options.alignment,
|
||||
clientName: formData.clientName, clientDni: formData.clientDni
|
||||
isBold: options.isBold,
|
||||
isFrame: options.isFrame,
|
||||
printFontSize: options.fontSize,
|
||||
printAlignment: options.alignment,
|
||||
clientName: formData.clientName,
|
||||
clientDni: formData.clientDni,
|
||||
payments
|
||||
});
|
||||
|
||||
printCourtesyTicket(formData, pricing);
|
||||
setTimeout(() => { printPaymentReceipt(formData, pricing, payments); }, 500);
|
||||
setFormData({ ...formData, text: '', clientName: '', clientDni: '' });
|
||||
setOptions({ isBold: false, isFrame: false, fontSize: 'normal', alignment: 'left' });
|
||||
alert('✅ Aviso procesado correctamente.');
|
||||
} catch (err) { alert('❌ Error al procesar el cobro.'); }
|
||||
setShowPaymentModal(false);
|
||||
setErrors({});
|
||||
showToast('Aviso procesado correctamente.', 'success');
|
||||
} catch (err) {
|
||||
showToast('Error al procesar el cobro.', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectClient = (client: Client) => {
|
||||
@@ -178,249 +288,209 @@ export default function FastEntryPage() {
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
if (sessionLoading) {
|
||||
return (
|
||||
<div className="h-full w-full flex items-center justify-center bg-slate-50">
|
||||
<RefreshCw className="animate-spin text-blue-600" size={40} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="w-full h-full p-4 flex gap-4 bg-gray-100 overflow-hidden max-h-screen">
|
||||
<>
|
||||
{/* BLOQUEO DE SEGURIDAD: Si no hay sesión, mostramos el modal de apertura */}
|
||||
<AnimatePresence>
|
||||
{!session.isOpen && (
|
||||
<CashOpeningModal
|
||||
onSuccess={refreshSession}
|
||||
onCancel={() => navigate('/dashboard')} // Si cancela la apertura, lo sacamos de "Nuevo Aviso"
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* PANEL IZQUIERDO: FORMULARIO */}
|
||||
<div className="flex-[7] bg-white rounded-2xl shadow-sm border border-gray-200 p-6 flex flex-col min-h-0">
|
||||
<div className="flex justify-between items-center mb-6 border-b border-gray-100 pb-3">
|
||||
<div>
|
||||
<h2 className="text-xl font-black text-slate-800 tracking-tight uppercase">Nueva Publicación</h2>
|
||||
<p className="text-[10px] text-slate-400 font-mono">ID TERMINAL: T-01 | CAJA: 01</p>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.99 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
// Si no hay sesión, aplicamos un filtro de desenfoque y desaturación
|
||||
filter: session.isOpen ? "blur(0px) grayscale(0)" : "blur(8px) grayscale(1)"
|
||||
}}
|
||||
transition={{ duration: 0.7, ease: "easeInOut" }}
|
||||
className={clsx(
|
||||
"w-full h-full p-5 flex gap-5 bg-slate-50/50 overflow-hidden max-h-screen",
|
||||
// Bloqueamos interacciones físicas mientras el modal esté presente
|
||||
!session.isOpen && "pointer-events-none select-none opacity-40"
|
||||
)}
|
||||
>
|
||||
{/* PANEL IZQUIERDO: FORMULARIO */}
|
||||
<div className="flex-[7] bg-white rounded-[2rem] shadow-xl shadow-slate-200/50 border border-slate-200 p-6 flex flex-col min-h-0 relative">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-black text-slate-900 tracking-tight uppercase flex items-center gap-3">
|
||||
<span className="bg-blue-600 w-1.5 h-6 rounded-full"></span>
|
||||
Nueva Publicación
|
||||
</h2>
|
||||
<p className="text-[9px] text-slate-500 font-bold tracking-[0.2em] mt-0.5 uppercase opacity-80">Caja 01 - Recepción de Avisos</p>
|
||||
</div>
|
||||
<div className="bg-slate-100 p-2 rounded-xl text-slate-400"><Printer size={18} /></div>
|
||||
</div>
|
||||
<Printer size={24} className="text-slate-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6 flex-1 min-h-0">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="relative" ref={catWrapperRef}>
|
||||
<label className="block text-xs font-bold text-slate-500 uppercase mb-1 tracking-wider">Rubro</label>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full p-3 border rounded-xl bg-gray-50 flex justify-between items-center cursor-pointer transition-all",
|
||||
isCatDropdownOpen ? "border-blue-500 ring-4 ring-blue-500/10" : "border-gray-200 hover:border-gray-300"
|
||||
)}
|
||||
onClick={() => setIsCatDropdownOpen(!isCatDropdownOpen)}
|
||||
>
|
||||
<span className={clsx("font-bold text-sm", !formData.categoryId && "text-gray-400")}>
|
||||
{selectedCategoryName || "-- Seleccionar Rubro --"}
|
||||
</span>
|
||||
<ChevronDown size={18} className={clsx("text-gray-400 transition-transform", isCatDropdownOpen && "rotate-180")} />
|
||||
<div className="flex flex-col gap-6 flex-1 min-h-0">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="relative" ref={catWrapperRef}>
|
||||
<label className={clsx("block text-[10px] font-black uppercase mb-1.5 tracking-widest transition-colors", errors.categoryId ? "text-rose-500" : "text-slate-500")}>
|
||||
Rubro Seleccionado {errors.categoryId && "• Requerido"}
|
||||
</label>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full p-3.5 border-2 rounded-xl flex justify-between items-center cursor-pointer transition-all duration-300",
|
||||
isCatDropdownOpen ? "border-blue-500 bg-blue-50/30" : errors.categoryId ? "border-rose-200 bg-rose-50/50" : "border-slate-100 bg-slate-50/50 hover:border-slate-300"
|
||||
)}
|
||||
onClick={() => setIsCatDropdownOpen(!isCatDropdownOpen)}
|
||||
>
|
||||
<span className={clsx("font-extrabold text-sm tracking-tight", !formData.categoryId ? "text-slate-400" : "text-slate-800")}>
|
||||
{selectedCategoryName || "BUSCAR RUBRO..."}
|
||||
</span>
|
||||
<ChevronDown size={18} className={clsx("transition-transform", isCatDropdownOpen ? "rotate-180 text-blue-500" : "text-slate-400")} />
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{isCatDropdownOpen && (
|
||||
<motion.div initial={{ opacity: 0, y: 5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="absolute top-full left-0 right-0 bg-white border-2 border-slate-100 shadow-2xl rounded-2xl mt-2 z-[100] flex flex-col max-h-[350px] overflow-hidden">
|
||||
<div className="p-3 bg-slate-50 border-b flex items-center gap-2">
|
||||
<Search size={16} className="text-slate-400" />
|
||||
<input autoFocus type="text" placeholder="Filtrar por nombre o código..." className="bg-transparent w-full outline-none text-sm font-bold text-slate-700 placeholder:text-slate-400" value={categorySearch} onChange={(e) => setCategorySearch(e.target.value)} />
|
||||
</div>
|
||||
<div className="overflow-y-auto flex-1 py-2 px-1 custom-scrollbar">
|
||||
{filteredCategories.map(cat => (
|
||||
<div key={cat.id} className={clsx("mx-1 px-4 py-2.5 text-xs cursor-pointer rounded-lg transition-all mb-1 flex items-center gap-3", !cat.isSelectable ? "text-slate-300 italic opacity-60" : "hover:bg-blue-50 text-slate-600 font-bold", parseInt(formData.categoryId) === cat.id && "bg-blue-600 text-white shadow-lg pl-6")} style={{ marginLeft: `${(cat.level * 12) + 4}px` }} onClick={() => { if (cat.isSelectable) { setFormData({ ...formData, categoryId: cat.id.toString() }); setIsCatDropdownOpen(false); setErrors({ ...errors, categoryId: false }); } }}>
|
||||
<span className={clsx("w-1 h-1 rounded-full", parseInt(formData.categoryId) === cat.id ? "bg-white" : "bg-slate-300")}></span>
|
||||
{cat.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div>
|
||||
<label className={clsx("block text-[10px] font-black uppercase mb-1.5 tracking-widest transition-colors", errors.operationId ? "text-rose-500" : "text-slate-500")}>Operación {errors.operationId && "• Requerido"}</label>
|
||||
<select className={clsx("w-full p-3.5 border-2 rounded-xl outline-none font-extrabold text-sm tracking-tight transition-all appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%207.5L10%2012.5L15%207.5%22%20stroke%3D%22%2364748B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E')] bg-[length:18px_18px] bg-[right_1rem_center] bg-no-repeat", formData.operationId ? "border-slate-100 bg-slate-50 text-slate-800" : errors.operationId ? "border-rose-200 bg-rose-50/50 text-rose-400" : "border-slate-100 bg-slate-50 text-slate-400")} value={formData.operationId} onChange={e => { setFormData({ ...formData, operationId: e.target.value }); setErrors({ ...errors, operationId: false }); }}>
|
||||
<option value="">ELIJA OPERACIÓN...</option>
|
||||
{operations.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isCatDropdownOpen && (
|
||||
<div className="absolute top-full left-0 right-0 bg-white border border-gray-200 shadow-2xl rounded-xl mt-2 z-[100] flex flex-col max-h-[300px] overflow-hidden">
|
||||
<div className="p-3 bg-gray-50 border-b flex items-center gap-2">
|
||||
<Search size={16} className="text-gray-400" />
|
||||
<input autoFocus type="text" placeholder="Filtrar rubros..." className="bg-transparent w-full outline-none text-sm font-medium"
|
||||
value={categorySearch} onChange={(e) => setCategorySearch(e.target.value)} />
|
||||
</div>
|
||||
<div className="overflow-y-auto flex-1 py-2">
|
||||
{filteredCategories.map(cat => (
|
||||
<div key={cat.id} className={clsx("px-4 py-2 text-sm cursor-pointer border-l-4 transition-all",
|
||||
!cat.isSelectable ? "text-gray-400 font-bold bg-gray-50/50 italic pointer-events-none" : "hover:bg-blue-50 border-transparent hover:border-blue-600",
|
||||
parseInt(formData.categoryId) === cat.id && "bg-blue-100 border-blue-600 font-bold"
|
||||
)}
|
||||
style={{ paddingLeft: `${(cat.level * 16) + 16}px` }}
|
||||
onClick={() => { setFormData({ ...formData, categoryId: cat.id.toString() }); setIsCatDropdownOpen(false); }}
|
||||
>
|
||||
{cat.name}
|
||||
<div className="flex flex-col flex-1 min-h-0">
|
||||
<label className={clsx("block text-[10px] font-black uppercase mb-1.5 tracking-widest transition-colors", errors.text ? "text-rose-500" : "text-slate-500")}>Cuerpo del Aviso {errors.text && "• Requerido"}</label>
|
||||
<div className="relative flex-1 group">
|
||||
<textarea ref={textInputRef} className={clsx("w-full h-full p-6 border-2 rounded-[1.5rem] resize-none outline-none font-mono text-xl tracking-tighter leading-snug transition-all duration-300", errors.text ? "border-rose-200 bg-rose-50/30" : "border-slate-100 bg-slate-50/30 group-focus-within:border-blue-400 group-focus-within:bg-white text-slate-800")} placeholder="ESCRIBA EL TEXTO AQUÍ PARA IMPRENTA..." value={formData.text} onChange={e => { setFormData({ ...formData, text: e.target.value }); setErrors({ ...errors, text: false }); }}></textarea>
|
||||
<div className="absolute top-3 right-3"><div className="bg-white/80 backdrop-blur px-2 py-1 rounded-lg border border-slate-100 shadow-sm text-[9px] font-black text-slate-400 uppercase tracking-widest">F10 para Cobrar</div></div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-3 bg-slate-900 px-5 py-2.5 rounded-xl shadow-lg">
|
||||
<div className="flex gap-6">
|
||||
<div className="flex flex-col"><span className="text-[8px] text-slate-500 font-black uppercase">Palabras</span><span className={clsx("text-base font-mono font-black", pricing.wordCount > 0 ? "text-blue-400" : "text-slate-700")}>{pricing.wordCount.toString().padStart(2, '0')}</span></div>
|
||||
<div className="flex flex-col"><span className="text-[8px] text-slate-500 font-black uppercase">Signos Especiales</span><span className={clsx("text-base font-mono font-black", pricing.specialCharCount > 0 ? "text-amber-400" : "text-slate-700")}>{pricing.specialCharCount.toString().padStart(2, '0')}</span></div>
|
||||
</div>
|
||||
<div className="text-right"><span className="text-[9px] text-slate-400 font-bold italic uppercase tracking-tighter">Vista optimizada para diario</span><div className="flex gap-1 mt-0.5 justify-end">{[1, 2, 3, 4, 5].map(i => <div key={i} className={clsx("h-0.5 w-2.5 rounded-full", formData.text.length > i * 15 ? "bg-blue-500" : "bg-slate-800")}></div>)}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4 bg-slate-50/50 p-4 rounded-[1.5rem] border-2 border-slate-100">
|
||||
<div className="col-span-1">
|
||||
<label className="block text-[9px] font-black text-slate-500 uppercase mb-1 tracking-widest">Días</label>
|
||||
<div className="flex items-center bg-white rounded-lg border border-slate-200 overflow-hidden h-10">
|
||||
<button onClick={() => setFormData(f => ({ ...f, days: Math.max(1, f.days - 1) }))} className="px-2.5 hover:bg-slate-50 text-slate-400 font-bold transition-colors">-</button>
|
||||
<input type="number" className="w-full text-center font-black text-blue-600 outline-none bg-transparent text-sm" value={formData.days} onChange={e => setFormData({ ...formData, days: Math.max(1, parseInt(e.target.value) || 0) })} />
|
||||
<button onClick={() => setFormData(f => ({ ...f, days: f.days + 1 }))} className="px-2.5 hover:bg-slate-50 text-slate-400 font-bold transition-colors">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2 relative" ref={clientWrapperRef}>
|
||||
<label className="block text-[9px] font-black text-slate-500 uppercase mb-1 tracking-widest">Cliente / Razón Social</label>
|
||||
<div className="relative h-10">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
|
||||
<input type="text" className="w-full h-full pl-10 pr-4 bg-white border border-slate-200 rounded-lg outline-none focus:border-blue-500 font-extrabold text-xs tracking-tight placeholder:text-slate-400" placeholder="NOMBRE O RAZÓN SOCIAL..." value={formData.clientName} onFocus={() => setShowSuggestions(true)} onChange={e => { setFormData({ ...formData, clientName: e.target.value }); setShowSuggestions(true); }} />
|
||||
</div>
|
||||
<AnimatePresence>{showSuggestions && clientSuggestions.length > 0 && (
|
||||
<motion.div initial={{ opacity: 0, y: -5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="absolute bottom-full mb-2 left-0 right-0 bg-white border-2 border-slate-100 shadow-2xl rounded-xl overflow-hidden z-[110]">
|
||||
{clientSuggestions.map(client => (
|
||||
<div key={client.id} className="p-3 hover:bg-blue-50 cursor-pointer border-b border-slate-50 flex justify-between items-center group transition-colors" onClick={() => handleSelectClient(client)}>
|
||||
<div><div className="font-extrabold text-slate-800 text-[11px] uppercase group-hover:text-blue-600">{client.name}</div><div className="text-[9px] text-slate-500 font-mono mt-0.5">{client.dniOrCuit}</div></div>
|
||||
<ArrowUpRight size={12} className="text-slate-300 group-hover:text-blue-400" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}</AnimatePresence>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<label className="block text-[9px] font-black text-slate-500 uppercase mb-1 tracking-widest">DNI / CUIT</label>
|
||||
<input type="text" className="w-full h-10 bg-white border border-slate-200 rounded-lg font-mono text-center font-black text-xs outline-none focus:border-blue-500 placeholder:text-slate-400" placeholder="S/D" value={formData.clientDni} onChange={e => setFormData({ ...formData, clientDni: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-slate-500 uppercase mb-1 tracking-wider">Operación</label>
|
||||
<select className="w-full p-3 border border-gray-200 rounded-xl bg-gray-50 outline-none focus:border-blue-500 font-bold text-sm"
|
||||
value={formData.operationId} onChange={e => setFormData({ ...formData, operationId: e.target.value })}>
|
||||
<option value="">-- Operación --</option>
|
||||
{operations.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
|
||||
</select>
|
||||
{/* PANEL DERECHO */}
|
||||
<div className="flex-[3] flex flex-col gap-4 min-h-0 overflow-hidden">
|
||||
<div className="bg-slate-900 text-white rounded-[2rem] p-5 shadow-xl border-b-4 border-blue-600 flex-shrink-0">
|
||||
<div className="text-[9px] text-blue-400 uppercase tracking-widest mb-0.5 font-black">Total a Cobrar</div>
|
||||
<div className="text-4xl font-mono font-black text-green-400 flex items-start gap-1">
|
||||
<span className="text-lg mt-1 opacity-50">$</span>{pricing.totalPrice.toLocaleString()}
|
||||
</div>
|
||||
<div className="mt-3 pt-3 border-t border-slate-800 space-y-1.5 text-[10px] font-bold uppercase tracking-tighter">
|
||||
<div className="flex justify-between text-slate-500 italic"><span>Tarifa Base</span><span className="text-slate-300">${pricing.baseCost.toLocaleString()}</span></div>
|
||||
{pricing.extraCost > 0 && <div className="flex justify-between text-orange-500"><span>Recargos Texto</span><span>+${pricing.extraCost.toLocaleString()}</span></div>}
|
||||
{pricing.discount > 0 && <div className="mt-2 p-2 bg-green-500/10 rounded-lg text-green-400 flex flex-col border border-green-500/20"><div className="flex justify-between"><span>Descuento</span><span>-${pricing.discount.toLocaleString()}</span></div></div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col flex-1 min-h-0">
|
||||
<label className="block text-xs font-bold text-slate-500 uppercase mb-1 tracking-wider">Cuerpo del Aviso (Texto para Imprenta)</label>
|
||||
<textarea
|
||||
ref={textInputRef}
|
||||
className="flex-1 w-full p-5 border border-gray-300 rounded-2xl resize-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 outline-none font-mono text-xl text-slate-700 leading-relaxed shadow-inner bg-gray-50/30"
|
||||
placeholder="ESCRIBA EL TEXTO AQUÍ..."
|
||||
value={formData.text}
|
||||
onChange={e => setFormData({ ...formData, text: e.target.value })}
|
||||
></textarea>
|
||||
<div className="flex justify-between items-center mt-3 bg-slate-50 p-2 rounded-lg border border-slate-100">
|
||||
<div className="flex gap-4 text-xs font-bold uppercase tracking-widest text-slate-400">
|
||||
<span className={pricing.wordCount > 0 ? "text-blue-600" : ""}>Palabras: {pricing.wordCount}</span>
|
||||
{pricing.specialCharCount > 0 && <span className="text-orange-600">Signos: {pricing.specialCharCount}</span>}
|
||||
</div>
|
||||
<span className="text-[10px] text-slate-300 font-bold italic uppercase">Uso de mayúsculas recomendado</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4 bg-slate-50 p-4 rounded-2xl border border-slate-100">
|
||||
<div className="col-span-1">
|
||||
<label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">Días</label>
|
||||
<input type="number" className="w-full p-2.5 border border-gray-200 rounded-lg font-black text-center text-blue-600 outline-none"
|
||||
value={formData.days} onChange={e => setFormData({ ...formData, days: Math.max(1, parseInt(e.target.value) || 0) })} />
|
||||
</div>
|
||||
<div className="col-span-2 relative" ref={clientWrapperRef}>
|
||||
<label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">Cliente / Razón Social</label>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 text-gray-300" size={16} />
|
||||
<input type="text" className="w-full pl-9 p-2.5 border border-gray-200 rounded-lg outline-none focus:border-blue-500 font-bold text-sm"
|
||||
placeholder="Buscar o crear..." value={formData.clientName}
|
||||
onFocus={() => setShowSuggestions(true)}
|
||||
onChange={e => { setFormData({ ...formData, clientName: e.target.value }); setShowSuggestions(true); }}
|
||||
/>
|
||||
</div>
|
||||
{showSuggestions && clientSuggestions.length > 0 && (
|
||||
<div className="absolute bottom-full mb-2 left-0 right-0 bg-white border border-gray-200 shadow-2xl rounded-xl overflow-hidden z-[110]">
|
||||
{clientSuggestions.map(client => (
|
||||
<div key={client.id} className="p-3 hover:bg-blue-50 cursor-pointer border-b border-gray-50 flex justify-between items-center transition-colors"
|
||||
onClick={() => handleSelectClient(client)}>
|
||||
<div>
|
||||
<div className="font-bold text-slate-800 text-xs">{client.name}</div>
|
||||
<div className="text-[10px] text-slate-400 font-mono">{client.dniOrCuit}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto min-h-0 flex flex-col gap-4 pr-1 custom-scrollbar">
|
||||
<div className="bg-white rounded-2xl border border-slate-200 p-2.5 flex flex-col gap-2 shadow-sm flex-shrink-0">
|
||||
<div className="flex justify-between items-center px-1">
|
||||
<div className="flex bg-slate-100 rounded-lg p-1 gap-1">
|
||||
{['left', 'center', 'right', 'justify'].map(align => (
|
||||
<button key={align} onClick={() => setOptions({ ...options, alignment: align })} className={clsx("p-1.5 rounded-md hover:bg-white transition-all", options.alignment === align && "bg-white text-blue-600 shadow-sm")}>
|
||||
{align === 'left' && <AlignLeft size={14} />}{align === 'center' && <AlignCenter size={14} />}{align === 'right' && <AlignRight size={14} />}{align === 'justify' && <AlignJustify size={14} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<label className="block text-[10px] font-bold text-slate-400 uppercase mb-1">DNI / CUIT</label>
|
||||
<input type="text" className="w-full p-2.5 border border-gray-200 rounded-lg font-mono text-center font-bold text-sm"
|
||||
placeholder="Documento" value={formData.clientDni} onChange={e => setFormData({ ...formData, clientDni: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PANEL DERECHO: TOTALES Y VISTA PREVIA */}
|
||||
<div className="flex-[3] flex flex-col gap-4 min-h-0 overflow-hidden">
|
||||
|
||||
{/* TOTALES (FIJO ARRIBA) */}
|
||||
<div className="bg-slate-900 text-white rounded-3xl p-6 shadow-xl border-b-4 border-blue-600 flex-shrink-0">
|
||||
<div className="text-[10px] text-blue-400 uppercase tracking-widest mb-1 font-black">Total a Cobrar</div>
|
||||
<div className="text-5xl font-mono font-black text-green-400 flex items-start gap-1">
|
||||
<span className="text-xl mt-1.5 opacity-50">$</span>
|
||||
{pricing.totalPrice.toLocaleString()}
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t border-slate-800 space-y-2 text-[11px] font-bold uppercase tracking-tighter">
|
||||
<div className="flex justify-between text-slate-400 italic">
|
||||
<span>Tarifa Base</span>
|
||||
<span className="text-white">${pricing.baseCost.toLocaleString()}</span>
|
||||
</div>
|
||||
{pricing.extraCost > 0 && (
|
||||
<div className="flex justify-between text-orange-400">
|
||||
<span>Recargos por texto</span>
|
||||
<span>+${pricing.extraCost.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
{pricing.surcharges > 0 && (
|
||||
<div className="flex justify-between text-blue-400">
|
||||
<span>Estilos visuales</span>
|
||||
<span>+${pricing.surcharges.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
{pricing.discount > 0 && (
|
||||
<div className="mt-2 p-2 bg-green-500/10 rounded-lg text-green-400 flex flex-col border border-green-500/20 animate-pulse">
|
||||
<div className="flex justify-between">
|
||||
<span>Descuento Aplicado</span>
|
||||
<span>-${pricing.discount.toLocaleString()}</span>
|
||||
<div className="flex bg-slate-100 rounded-lg p-1 gap-1">
|
||||
{['small', 'normal', 'large'].map(size => (
|
||||
<button key={size} onClick={() => setOptions({ ...options, fontSize: size })} className={clsx("p-1.5 rounded-md hover:bg-white transition-all flex items-end", options.fontSize === size && "bg-white text-blue-600 shadow-sm")}>
|
||||
<Type size={size === 'small' ? 10 : size === 'normal' ? 14 : 18} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-[9px] opacity-70 italic">{pricing.appliedPromotion}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-2 gap-2 mt-1">
|
||||
<button onClick={() => setOptions({ ...options, isBold: !options.isBold })} className={clsx("p-2 rounded-lg border text-[9px] font-black transition-all flex items-center justify-center gap-2", options.isBold ? "bg-blue-600 border-blue-600 text-white" : "bg-slate-50 border-slate-200 text-slate-400 hover:bg-slate-100")}><Bold size={12} /> NEGRITA</button>
|
||||
<button onClick={() => setOptions({ ...options, isFrame: !options.isFrame })} className={clsx("p-2 rounded-lg border text-[9px] font-black transition-all flex items-center justify-center gap-2", options.isFrame ? "bg-slate-800 border-slate-800 text-white" : "bg-slate-50 border-slate-200 text-slate-400 hover:bg-slate-100")}><FrameIcon size={12} /> RECUADRO</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#fffef5] border border-yellow-200 rounded-2xl p-4 shadow-sm min-h-[140px] h-auto flex flex-col relative group flex-shrink-0">
|
||||
<div className="absolute top-0 left-0 w-full h-0.5 bg-yellow-400 opacity-20"></div>
|
||||
<h3 className="text-[8px] font-black text-yellow-700/60 uppercase mb-3 flex items-center gap-1.5 tracking-widest"><Printer size={10} /> Previsualización Real</h3>
|
||||
<div className="p-1">
|
||||
<div className={clsx("w-full leading-tight whitespace-pre-wrap break-words transition-all duration-300", options.isBold ? "font-bold text-slate-900" : "font-medium text-slate-700", options.isFrame ? "border-2 border-slate-900 p-3 bg-white shadow-sm" : "border-none", options.fontSize === 'small' ? 'text-[11px]' : options.fontSize === 'large' ? 'text-base' : 'text-xs', options.alignment === 'center' ? 'text-center' : options.alignment === 'right' ? 'text-right' : options.alignment === 'justify' ? 'text-justify' : 'text-left')}>
|
||||
{formData.text || "(Aviso vacío)"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={handleSubmit} className="bg-blue-600 hover:bg-blue-700 text-white py-4 rounded-2xl font-black shadow-xl flex flex-col items-center justify-center transition-all active:scale-95 group overflow-hidden flex-shrink-0">
|
||||
<div className="flex items-center gap-3 text-lg relative z-10"><Save size={20} /> COBRAR E IMPRIMIR</div>
|
||||
<span className="text-[8px] opacity-60 tracking-[0.3em] relative z-10 font-mono mt-0.5">SHORTCUT: F10</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* CONTENEDOR CENTRAL SCROLLABLE (Toolbar + Preview) */}
|
||||
<div className="flex-1 overflow-y-auto min-h-0 flex flex-col gap-4 pr-1 custom-scrollbar">
|
||||
|
||||
{/* TOOLBAR ESTILOS */}
|
||||
<div className="bg-white rounded-2xl border border-gray-200 p-2 flex flex-col gap-2 shadow-sm flex-shrink-0">
|
||||
<div className="flex justify-between items-center px-1">
|
||||
<div className="flex bg-gray-100 rounded-lg p-1 gap-1">
|
||||
{['left', 'center', 'right', 'justify'].map(align => (
|
||||
<button key={align} onClick={() => setOptions({ ...options, alignment: align })}
|
||||
className={clsx("p-1.5 rounded-md hover:bg-white transition-all shadow-sm", options.alignment === align && "bg-white text-blue-600")}>
|
||||
{align === 'left' && <AlignLeft size={16} />}
|
||||
{align === 'center' && <AlignCenter size={16} />}
|
||||
{align === 'right' && <AlignRight size={16} />}
|
||||
{align === 'justify' && <AlignJustify size={16} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex bg-gray-100 rounded-lg p-1 gap-1">
|
||||
{['small', 'normal', 'large'].map(size => (
|
||||
<button key={size} onClick={() => setOptions({ ...options, fontSize: size })}
|
||||
className={clsx("p-1.5 rounded-md hover:bg-white transition-all flex items-end", options.fontSize === size && "bg-white shadow-sm text-blue-600")}>
|
||||
<Type size={size === 'small' ? 12 : size === 'normal' ? 16 : 20} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 mt-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOptions({ ...options, isBold: !options.isBold })}
|
||||
className={clsx(
|
||||
"p-2 rounded-lg border text-[10px] font-black transition-all flex items-center justify-center gap-2",
|
||||
options.isBold ? "bg-blue-600 border-blue-600 text-white shadow-inner" : "bg-gray-50 border-gray-200 text-gray-400 hover:bg-gray-100"
|
||||
)}
|
||||
>
|
||||
<Bold size={14} /> NEGRITA
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOptions({ ...options, isFrame: !options.isFrame })}
|
||||
className={clsx(
|
||||
"p-2 rounded-lg border text-[10px] font-black transition-all flex items-center justify-center gap-2",
|
||||
options.isFrame ? "bg-slate-800 border-slate-800 text-white shadow-inner" : "bg-gray-50 border-gray-200 text-gray-400 hover:bg-gray-100"
|
||||
)}
|
||||
>
|
||||
<FrameIcon size={14} /> RECUADRO
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* VISTA PREVIA (DINÁMICA AL ALTO DEL TEXTO) */}
|
||||
<div className="bg-[#fffef5] border border-yellow-200 rounded-2xl p-5 shadow-sm min-h-[180px] h-auto flex flex-col relative group flex-shrink-0">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-yellow-400 opacity-20"></div>
|
||||
<h3 className="text-[9px] font-black text-yellow-700 uppercase mb-4 flex items-center gap-1.5 opacity-40 tracking-widest">
|
||||
<Printer size={12} /> Previsualización Real
|
||||
</h3>
|
||||
<div className="p-2">
|
||||
<div className={clsx(
|
||||
"w-full leading-tight whitespace-pre-wrap break-words transition-all duration-300",
|
||||
options.isBold ? "font-bold text-gray-900" : "font-medium text-gray-700",
|
||||
options.isFrame ? "border-2 border-gray-900 p-4 bg-white shadow-md" : "border-none",
|
||||
options.fontSize === 'small' ? 'text-xs' : options.fontSize === 'large' ? 'text-lg' : 'text-sm',
|
||||
options.alignment === 'center' ? 'text-center' : options.alignment === 'right' ? 'text-right' : options.alignment === 'justify' ? 'text-justify' : 'text-left'
|
||||
)}>
|
||||
{formData.text || "(Aviso vacío)"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ACCIÓN PRINCIPAL (FIJO ABAJO) */}
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-black shadow-2xl flex flex-col items-center justify-center gap-0.5 transition-all active:scale-95 group relative overflow-hidden flex-shrink-0"
|
||||
>
|
||||
<div className="absolute inset-0 bg-white/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
|
||||
<div className="flex items-center gap-3 text-xl relative z-10">
|
||||
<Save size={24} /> COBRAR E IMPRIMIR
|
||||
</div>
|
||||
<span className="text-[9px] opacity-60 tracking-[0.3em] relative z-10 font-mono">SHORTCUT: F10</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{showPaymentModal && (
|
||||
<PaymentModal totalAmount={pricing.totalPrice} onConfirm={handlePaymentConfirm} onCancel={() => setShowPaymentModal(false)} />
|
||||
)}
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
524
frontend/counter-panel/src/pages/HistoryPage.tsx
Normal file
524
frontend/counter-panel/src/pages/HistoryPage.tsx
Normal file
@@ -0,0 +1,524 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import api from '../services/api';
|
||||
import {
|
||||
Search, User as UserIcon, ChevronRight,
|
||||
X, FileText, Banknote, CreditCard,
|
||||
Clock, Filter, Printer,
|
||||
MessageSquare, ShieldAlert, CheckCircle2,
|
||||
ShieldCheck
|
||||
} from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useToast } from '../context/use-toast';
|
||||
import clsx from 'clsx';
|
||||
import ClaimModal from '../components/ClaimModal';
|
||||
import ResolveClaimModal from '../components/ResolveClaimModal';
|
||||
|
||||
export default function HistoryPage() {
|
||||
const { showToast } = useToast();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [items, setItems] = useState<any[]>([]);
|
||||
const [cajeros, setCajeros] = useState<any[]>([]);
|
||||
const [selectedItem, setSelectedItem] = useState<any>(null);
|
||||
const [showClaimModal, setShowClaimModal] = useState(false);
|
||||
const [claims, setClaims] = useState<any[]>([]);
|
||||
const [resolvingClaim, setResolvingClaim] = useState<any>(null);
|
||||
const [activeDetailTab, setActiveDetailTab] = useState<'info' | 'claims'>('info');
|
||||
|
||||
// Filtros
|
||||
const [filters, setFilters] = useState({
|
||||
from: new Date().toISOString().split('T')[0],
|
||||
to: new Date().toISOString().split('T')[0],
|
||||
userId: '',
|
||||
query: '',
|
||||
source: 'All' // 'All' | 'Web' | 'Mostrador'
|
||||
});
|
||||
|
||||
const loadInitialData = async () => {
|
||||
try {
|
||||
const res = await api.get('/reports/cajeros');
|
||||
setCajeros(res.data);
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const loadHistory = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await api.get('/reports/cashier-transactions', {
|
||||
params: {
|
||||
from: filters.from,
|
||||
to: filters.to,
|
||||
userId: filters.userId || null
|
||||
}
|
||||
});
|
||||
setItems(response.data.items || []);
|
||||
} catch (error) {
|
||||
console.error("Error al cargar historial:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filters]);
|
||||
|
||||
useEffect(() => {
|
||||
loadInitialData();
|
||||
loadHistory();
|
||||
}, [loadHistory]);
|
||||
|
||||
const loadItemClaims = async (listingId: number) => {
|
||||
try {
|
||||
const res = await api.get(`/claims/listing/${listingId}`);
|
||||
setClaims(res.data);
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const handleOpenDetail = async (id: number) => {
|
||||
setActiveDetailTab('info');
|
||||
try {
|
||||
const res = await api.get(`/listings/${id}`);
|
||||
setSelectedItem(res.data);
|
||||
loadItemClaims(id);
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
|
||||
const formatLocalTime = (dateString: string) => {
|
||||
let isoStr = dateString.replace(" ", "T");
|
||||
if (!isoStr.endsWith("Z")) isoStr += "Z";
|
||||
return new Date(isoStr).toLocaleTimeString('es-AR', {
|
||||
hour: '2-digit', minute: '2-digit', hour12: true,
|
||||
timeZone: 'America/Argentina/Buenos_Aires'
|
||||
});
|
||||
};
|
||||
|
||||
const escapeHTML = (str: string) => {
|
||||
return str?.replace(/[&<>"']/g, (m) => ({
|
||||
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
|
||||
}[m] || m)) || '';
|
||||
};
|
||||
|
||||
const handlePrintDuplicate = () => {
|
||||
if (!selectedItem) return;
|
||||
|
||||
const { listing, payments } = selectedItem;
|
||||
const printWindow = window.open('', '_blank', 'width=350,height=700');
|
||||
if (!printWindow) return;
|
||||
|
||||
const now = new Date();
|
||||
const totalWithSurcharges = payments.reduce((sum: number, p: any) => sum + p.amount + p.surcharge, 0);
|
||||
|
||||
const paymentRows = payments.map((p: any) => {
|
||||
const methodName = p.paymentMethod === 'Credit' ? p.cardPlan : p.paymentMethod;
|
||||
return `
|
||||
<tr>
|
||||
<td style="padding: 5px 0; border-bottom: 1px solid #ddd;">${methodName}</td>
|
||||
<td style="padding: 5px 0; text-align: right; border-bottom: 1px solid #ddd;">$${p.amount.toLocaleString()}</td>
|
||||
${p.surcharge > 0 ? `<td style="padding: 5px 0; text-align: right; border-bottom: 1px solid #ddd; color: #f59e0b;">+$${p.surcharge.toLocaleString()}</td>` : '<td></td>'}
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
const html = `
|
||||
<html>
|
||||
<body style="font-family: 'Courier New', monospace; width: 300px; padding: 10px; font-size: 11px;">
|
||||
<div style="text-align: center; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 10px;">
|
||||
<h1 style="margin: 0; font-size: 18px;">DIARIO EL DÍA</h1>
|
||||
<p style="margin: 2px 0; font-weight: bold; background: #000; color: #fff; display: inline-block; padding: 2px 10px;">*** DUPLICADO ***</p>
|
||||
<p style="margin: 5px 0; font-size: 9px;">Original: ${new Date(listing.createdAt).toLocaleString('es-AR')}</p>
|
||||
<p style="margin: 2px 0; font-size: 9px;">Re-impresión: ${now.toLocaleString('es-AR')}</p>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<b>AVISO ID:</b> #${listing.id.toString().padStart(6, '0')}<br/>
|
||||
<b>RUBRO:</b> ${escapeHTML(listing.categoryName)}<br/>
|
||||
<b>ESTADO:</b> ${listing.status}<br/>
|
||||
</div>
|
||||
<div style="border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 8px 0; margin-bottom: 10px;">
|
||||
<b>CUERPO DEL AVISO:</b><br/>
|
||||
<p style="text-transform: uppercase; line-height: 1.4;">${escapeHTML(listing.description)}</p>
|
||||
</div>
|
||||
<table style="width: 100%; font-size: 10px; margin-bottom: 10px;">
|
||||
${paymentRows}
|
||||
</table>
|
||||
<div style="background: #000; color: #fff; padding: 10px; text-align: center; font-size: 18px; font-weight: bold;">
|
||||
TOTAL: $${totalWithSurcharges.toLocaleString()}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
printWindow.document.write(html);
|
||||
printWindow.document.close();
|
||||
printWindow.focus();
|
||||
setTimeout(() => { printWindow.print(); printWindow.close(); }, 250);
|
||||
showToast("Duplicado enviado a la cola de impresión", "success");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 flex flex-col gap-6 h-full bg-[#f8fafc] overflow-hidden">
|
||||
|
||||
{/* FILTROS */}
|
||||
<div className="bg-white rounded-[2rem] p-6 shadow-xl border border-slate-200 flex-shrink-0">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<span className="text-[9px] font-black text-blue-600 uppercase tracking-[0.3em] mb-0.5 block">Auditoría & Consultas</span>
|
||||
<h2 className="text-xl font-black text-slate-900 tracking-tight uppercase flex items-center gap-2">
|
||||
<span className="bg-slate-900 w-1.5 h-5 rounded-full"></span>
|
||||
Historial de Operaciones
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={loadHistory}
|
||||
className="bg-blue-600 text-white px-5 py-2.5 rounded-xl font-black text-[10px] uppercase tracking-widest shadow-lg shadow-blue-200 hover:bg-blue-700 transition-all flex items-center gap-2"
|
||||
>
|
||||
{loading ? <Clock className="animate-spin" size={14} /> : <Filter size={14} />}
|
||||
Actualizar Vista
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[9px] font-black text-slate-500 uppercase ml-1">Desde</label>
|
||||
<input type="date" value={filters.from} onChange={e => setFilters({ ...filters, from: e.target.value })} className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl p-3 text-xs font-bold text-slate-700 outline-none focus:border-blue-500 transition-all" />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[9px] font-black text-slate-500 uppercase ml-1">Hasta</label>
|
||||
<input type="date" value={filters.to} onChange={e => setFilters({ ...filters, to: e.target.value })} className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl p-3 text-xs font-bold text-slate-700 outline-none focus:border-blue-500 transition-all" />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[9px] font-black text-slate-500 uppercase ml-1">Origen del Aviso</label>
|
||||
<div className="flex bg-slate-100 p-1 rounded-xl">
|
||||
{['All', 'Mostrador', 'Web'].map(s => (
|
||||
<button
|
||||
key={s}
|
||||
onClick={() => setFilters({ ...filters, source: s })}
|
||||
className={clsx(
|
||||
"flex-1 py-2 text-[9px] font-black uppercase rounded-lg transition-all",
|
||||
filters.source === s ? "bg-white text-blue-600 shadow-sm" : "text-slate-400 hover:text-slate-600"
|
||||
)}
|
||||
>
|
||||
{s === 'All' ? 'Todos' : s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[9px] font-black text-slate-500 uppercase ml-1">Cajero Responsable</label>
|
||||
<select
|
||||
value={filters.userId}
|
||||
onChange={e => setFilters({ ...filters, userId: e.target.value })}
|
||||
className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl p-3 text-xs font-bold text-slate-700 outline-none focus:border-blue-500 transition-all appearance-none"
|
||||
>
|
||||
<option value="">TODOS LOS CAJEROS</option>
|
||||
{cajeros.map((u) => (
|
||||
<option key={u.id || u.Id} value={u.id || u.Id}>
|
||||
{(u.username || u.Username || 'Sin Nombre').toUpperCase()}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[9px] font-black text-slate-500 uppercase ml-1">Búsqueda Directa</label>
|
||||
<div className="relative">
|
||||
<Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<input type="text" placeholder="Título o aviso..." value={filters.query} onChange={e => setFilters({ ...filters, query: e.target.value })} className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl p-3 pl-10 text-xs font-bold text-slate-700 outline-none focus:border-blue-500 transition-all placeholder:text-slate-300" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TABLA */}
|
||||
<div className="flex-1 bg-white rounded-[2rem] shadow-xl border border-slate-200 overflow-hidden flex flex-col min-h-0">
|
||||
<div className="overflow-y-auto flex-1 custom-scrollbar">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-slate-50 text-slate-500 text-[9px] uppercase font-black tracking-[0.15em] sticky top-0 z-10 border-b border-slate-100 backdrop-blur-md">
|
||||
<tr>
|
||||
<th className="px-8 py-4">Operación / Fecha</th>
|
||||
<th className="px-8 py-4">Detalle del Aviso</th>
|
||||
<th className="px-8 py-4 text-center">Cajero</th>
|
||||
<th className="px-8 py-4 text-right">Monto Total</th>
|
||||
<th className="px-8 py-4"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-50">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{items
|
||||
.filter(i => (filters.source === 'All' || i.source === filters.source))
|
||||
.filter(i => i.title.toLowerCase().includes(filters.query.toLowerCase()))
|
||||
.map((item) => (
|
||||
<motion.tr
|
||||
key={item.id}
|
||||
initial={{ opacity: 0 }} animate={{ opacity: 1 }}
|
||||
className="hover:bg-blue-50/40 transition-all group"
|
||||
>
|
||||
<td className="px-8 py-4">
|
||||
{/* Badge de Origen */}
|
||||
<div className={clsx(
|
||||
"inline-flex px-2 py-0.5 rounded text-[8px] font-black uppercase mb-2",
|
||||
item.source === 'Web' ? "bg-blue-600 text-white shadow-lg shadow-blue-200" : "bg-slate-200 text-slate-600"
|
||||
)}>
|
||||
{item.source}
|
||||
</div>
|
||||
<div className="font-mono text-slate-400 font-bold text-[10px]">#{item.id.toString().padStart(6, '0')}</div>
|
||||
<div className="text-[10px] font-black text-slate-700 mt-1 flex items-center gap-1.5">
|
||||
<Clock size={12} className="text-blue-500" />
|
||||
{new Date(item.date).toLocaleDateString('es-AR')} - {formatLocalTime(item.date)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-8 py-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-extrabold text-slate-900 uppercase text-xs tracking-tight line-clamp-1 group-hover:text-blue-600 transition-colors">{item.title}</span>
|
||||
<span className="text-[9px] text-slate-500 font-bold uppercase tracking-tighter mt-0.5">{item.category}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-8 py-4 text-center">
|
||||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-slate-100 rounded-lg text-[9px] font-black text-slate-600 uppercase border border-slate-200">
|
||||
<UserIcon size={10} className="text-slate-400" /> {item.cashier || 'SISTEMA'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-8 py-4 text-right font-black text-slate-950 text-sm">
|
||||
<span className="text-[10px] opacity-30 mr-1">$</span>
|
||||
{item.amount.toLocaleString('es-AR', { minimumFractionDigits: 2 })}
|
||||
</td>
|
||||
<td className="px-8 py-4 text-right">
|
||||
<button
|
||||
onClick={() => handleOpenDetail(item.id)}
|
||||
className="p-2.5 bg-slate-50 text-slate-400 hover:bg-blue-600 hover:text-white rounded-xl transition-all shadow-sm active:scale-90"
|
||||
>
|
||||
<ChevronRight size={18} />
|
||||
</button>
|
||||
</td>
|
||||
</motion.tr>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PANEL LATERAL */}
|
||||
<AnimatePresence>
|
||||
{selectedItem && (
|
||||
<div className="fixed inset-0 bg-slate-950/40 backdrop-blur-sm z-[200] flex justify-end">
|
||||
<motion.div
|
||||
initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }}
|
||||
className="bg-white w-full max-w-xl h-full shadow-2xl flex flex-col border-l border-slate-200"
|
||||
>
|
||||
{/* HEADER DEL PANEL */}
|
||||
<div className="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50/30">
|
||||
<div>
|
||||
<span className="text-[10px] font-black text-blue-600 uppercase tracking-[0.3em]">Auditoría de Aviso</span>
|
||||
<h3 className="text-2xl font-black text-slate-900 tracking-tighter uppercase">#{selectedItem.listing.id.toString().padStart(6, '0')}</h3>
|
||||
</div>
|
||||
<button onClick={() => setSelectedItem(null)} className="p-3 hover:bg-slate-100 rounded-2xl transition-colors text-slate-400">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* BARRA DE NAVEGACIÓN DE PESTAÑAS (TABS) */}
|
||||
<div className="flex bg-white border-b border-slate-100 px-8 gap-8">
|
||||
<button
|
||||
onClick={() => setActiveDetailTab('info')}
|
||||
className={clsx(
|
||||
"py-4 text-[10px] font-black uppercase tracking-widest transition-all border-b-2",
|
||||
activeDetailTab === 'info' ? "border-blue-600 text-blue-600" : "border-transparent text-slate-400 hover:text-slate-600"
|
||||
)}
|
||||
>
|
||||
Ficha Técnica
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveDetailTab('claims')}
|
||||
className={clsx(
|
||||
"py-4 text-[10px] font-black uppercase tracking-widest transition-all border-b-2 flex items-center gap-2",
|
||||
activeDetailTab === 'claims' ? "border-rose-500 text-rose-500" : "border-transparent text-slate-400 hover:text-slate-600"
|
||||
)}
|
||||
>
|
||||
Incidencias
|
||||
{claims.length > 0 && (
|
||||
<span className={clsx(
|
||||
"px-1.5 py-0.5 rounded-md text-[9px]",
|
||||
activeDetailTab === 'claims' ? "bg-rose-500 text-white" : "bg-slate-100 text-slate-400"
|
||||
)}>
|
||||
{claims.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* CUERPO DEL PANEL CON SCROLL INDEPENDIENTE */}
|
||||
<div className="flex-1 overflow-y-auto p-8 custom-scrollbar">
|
||||
<AnimatePresence mode="wait">
|
||||
|
||||
{/* PESTAÑA 1: INFORMACIÓN GENERAL */}
|
||||
{activeDetailTab === 'info' && (
|
||||
<motion.div
|
||||
key="info-tab" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }}
|
||||
className="space-y-10"
|
||||
>
|
||||
{/* Status & Total */}
|
||||
<div className="bg-blue-600 text-white p-6 rounded-[2rem] shadow-xl shadow-blue-200 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-20"><CheckCircle2 size={80} /></div>
|
||||
<div className="relative z-10">
|
||||
<span className="text-[10px] font-black uppercase opacity-60">Recaudación Total</span>
|
||||
<div className="text-4xl font-mono font-black">$ {selectedItem.listing.adFee?.toLocaleString('es-AR')}</div>
|
||||
<div className="mt-4 flex items-center gap-2 text-[10px] font-bold uppercase bg-white/10 w-fit px-3 py-1 rounded-full border border-white/20">
|
||||
<ShieldCheck size={14} /> {selectedItem.listing.status}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Texto para Imprenta */}
|
||||
<section>
|
||||
<h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2">
|
||||
<FileText size={14} className="text-slate-500" /> Cuerpo de Publicación
|
||||
</h4>
|
||||
<div className="p-6 bg-slate-900 rounded-[1.5rem] text-slate-300 font-mono text-sm leading-relaxed uppercase">
|
||||
{selectedItem.listing.description}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Desglose de Pagos */}
|
||||
<section>
|
||||
<h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2">
|
||||
<Banknote size={14} className="text-emerald-500" /> Medios de Pago
|
||||
</h4>
|
||||
<div className="space-y-3">
|
||||
{selectedItem.payments?.map((p: any, pIdx: number) => (
|
||||
<div key={pIdx} className="bg-slate-50 p-4 rounded-2xl border border-slate-100 flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 bg-white rounded-xl shadow-sm text-slate-400">
|
||||
{p.paymentMethod === 'Cash' ? <Banknote size={18} /> : <CreditCard size={18} />}
|
||||
</div>
|
||||
<span className="font-black text-slate-700 uppercase text-[11px]">{p.paymentMethod} {p.cardPlan || ''}</span>
|
||||
</div>
|
||||
<span className="font-mono font-black text-slate-900">$ {p.amount.toLocaleString()}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Datos Técnicos */}
|
||||
<section className="grid grid-cols-2 gap-3">
|
||||
<InfoBox label="Rubro" value={selectedItem.listing.categoryName} />
|
||||
<InfoBox label="Duración" value={`${selectedItem.listing.printDaysCount} DÍAS`} />
|
||||
<InfoBox label="Fecha Op." value={new Date(selectedItem.listing.createdAt).toLocaleDateString()} />
|
||||
<InfoBox label="Responsable" value={selectedItem.listing.userId ? `ID #${selectedItem.listing.userId}` : 'Web'} />
|
||||
</section>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* PESTAÑA 2: INCIDENCIAS Y RECLAMOS */}
|
||||
{activeDetailTab === 'claims' && (
|
||||
<motion.div
|
||||
key="claims-tab" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-[10px] font-black text-rose-500 uppercase tracking-widest flex items-center gap-2">
|
||||
<ShieldAlert size={14} /> Historial de Reclamos
|
||||
</h4>
|
||||
<span className="text-[9px] font-bold text-slate-400 uppercase">Total: {claims.length} eventos</span>
|
||||
</div>
|
||||
|
||||
{claims.length === 0 ? (
|
||||
<div className="py-20 flex flex-col items-center justify-center bg-slate-50 rounded-[2rem] border-2 border-dashed border-slate-100 text-slate-300">
|
||||
<ShieldAlert size={40} className="mb-4 opacity-20" />
|
||||
<p className="font-black text-[10px] uppercase tracking-widest">Sin incidencias registradas</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{claims.map((c: any) => (
|
||||
<div key={c.id} className={clsx(
|
||||
"p-6 rounded-[2rem] border-2 transition-all relative",
|
||||
c.status === 'Open' ? "bg-rose-50 border-rose-100 shadow-lg shadow-rose-100/50" : "bg-emerald-50 border-emerald-100"
|
||||
)}>
|
||||
{/* ... (Contenido del card de reclamo, igual que antes) ... */}
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<span className={clsx(
|
||||
"px-2.5 py-1 rounded-lg text-[9px] font-black uppercase tracking-tighter",
|
||||
c.status === 'Open' ? "bg-rose-500 text-white" : "bg-emerald-500 text-white"
|
||||
)}>
|
||||
{c.status === 'Open' ? 'Pendiente de Resolución' : 'Incidencia Resuelta'}
|
||||
</span>
|
||||
<span className="text-[10px] font-bold text-slate-400">{new Date(c.createdAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<p className="text-sm font-black text-slate-800 uppercase mb-2">{c.claimType}</p>
|
||||
<p className="text-xs text-slate-600 leading-relaxed bg-white/50 p-3 rounded-xl border border-black/5 italic mb-4">"{c.description}"</p>
|
||||
|
||||
{c.status === 'Open' ? (
|
||||
<button
|
||||
onClick={() => setResolvingClaim(c)}
|
||||
className="w-full py-3 bg-white border border-rose-200 text-rose-500 rounded-xl text-[10px] font-black uppercase hover:bg-rose-500 hover:text-white transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<CheckCircle2 size={14} /> Brindar Solución
|
||||
</button>
|
||||
) : (
|
||||
<div className="space-y-2 mt-4 pt-4 border-t border-black/5">
|
||||
{c.originalValues && (
|
||||
<div className="p-3 bg-slate-200/50 rounded-xl">
|
||||
<p className="text-[8px] font-black text-slate-400 uppercase mb-1">Snapshot Pre-ajuste:</p>
|
||||
<p className="text-[10px] text-slate-500 font-mono leading-tight">{c.originalValues}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-3 bg-white rounded-xl border border-emerald-200">
|
||||
<p className="text-[9px] font-black text-emerald-700 uppercase mb-1">Solución aplicada:</p>
|
||||
<p className="text-[11px] text-emerald-800 font-bold italic">"{c.solutionDescription}"</p>
|
||||
<p className="text-[8px] mt-2 text-emerald-600/50 font-black uppercase">Por: {c.resolvedByUsername} • {new Date(c.resolvedAt).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* FOOTER GLOBAL (SIEMPRE VISIBLE) */}
|
||||
<div className="p-8 bg-slate-50 border-t border-slate-100 flex gap-4">
|
||||
<button onClick={handlePrintDuplicate} className="flex-1 bg-white border-2 border-slate-200 text-slate-600 font-black text-[10px] uppercase py-4 rounded-2xl hover:bg-slate-100 transition-all flex items-center justify-center gap-2">
|
||||
<Printer size={16} /> Duplicado Ticket
|
||||
</button>
|
||||
<button onClick={() => setShowClaimModal(true)} className="flex-1 bg-slate-900 text-white font-black text-[10px] uppercase py-4 rounded-2xl hover:bg-black transition-all flex items-center justify-center gap-2 shadow-lg">
|
||||
<MessageSquare size={16} className="text-blue-400" /> Abrir Reclamo
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* MODAL DE RECLAMO */}
|
||||
<AnimatePresence>
|
||||
{showClaimModal && selectedItem && (
|
||||
<ClaimModal
|
||||
listingId={selectedItem.listing.id}
|
||||
onClose={() => setShowClaimModal(false)}
|
||||
onSuccess={() => loadItemClaims(selectedItem.listing.id)}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
{/* MODAL DE RESOLUCION DE RECLAMO */}
|
||||
<AnimatePresence>
|
||||
{resolvingClaim && selectedItem && (
|
||||
<ResolveClaimModal
|
||||
claim={resolvingClaim}
|
||||
listing={selectedItem.listing}
|
||||
onClose={() => setResolvingClaim(null)}
|
||||
onSuccess={() => {
|
||||
loadItemClaims(selectedItem.listing.id);
|
||||
loadHistory();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoBox({ label, value, color = "text-slate-800" }: any) {
|
||||
return (
|
||||
<div className="p-3.5 bg-white border border-slate-100 rounded-xl shadow-sm">
|
||||
<span className="text-[8px] font-black text-slate-400 uppercase block mb-0.5 tracking-widest">{label}</span>
|
||||
<span className={clsx("text-[11px] font-black uppercase truncate block", color)}>{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -13,9 +13,12 @@ export default function LoginPage() {
|
||||
try {
|
||||
const res = await api.post('/auth/login', { username, password });
|
||||
localStorage.setItem('token', res.data.token);
|
||||
localStorage.setItem('user', username); // Guardar usuario para mostrar en header
|
||||
|
||||
// CAMBIO AQUÍ: Guardar como objeto stringificado
|
||||
localStorage.setItem('user', JSON.stringify({ username }));
|
||||
|
||||
navigate('/');
|
||||
} catch (e) {
|
||||
} catch {
|
||||
alert('Credenciales inválidas');
|
||||
}
|
||||
};
|
||||
|
||||
154
frontend/counter-panel/src/pages/TreasuryPage.tsx
Normal file
154
frontend/counter-panel/src/pages/TreasuryPage.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '../services/api';
|
||||
import {
|
||||
ShieldCheck, AlertCircle, CheckCircle2,
|
||||
User as UserIcon, Clock
|
||||
} from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useToast } from '../context/use-toast';
|
||||
import clsx from 'clsx';
|
||||
|
||||
export default function TreasuryPage() {
|
||||
const { showToast } = useToast();
|
||||
const [pending, setPending] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedSession, setSelectedSession] = useState<any>(null);
|
||||
const [notes, setNotes] = useState('');
|
||||
|
||||
const loadPending = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await api.get('/cashsessions/pending');
|
||||
setPending(res.data);
|
||||
} catch (e) {
|
||||
showToast("Error al cargar sesiones pendientes", "error");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { loadPending(); }, []);
|
||||
|
||||
const handleValidate = async () => {
|
||||
if (!selectedSession) return;
|
||||
try {
|
||||
await api.post(`/cashsessions/${selectedSession.id}/validate`, JSON.stringify(notes), {
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
showToast("Caja liquidada y archivada", "success");
|
||||
setSelectedSession(null);
|
||||
setNotes('');
|
||||
loadPending();
|
||||
} catch (e) {
|
||||
showToast("Error al validar", "error");
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div className="p-20 text-center uppercase font-black text-xs text-slate-400 animate-pulse">Cargando Tesorería...</div>;
|
||||
|
||||
return (
|
||||
<div className="p-8 flex flex-col gap-8 bg-[#f8fafc] h-full">
|
||||
<header>
|
||||
<span className="text-[10px] font-black text-blue-600 uppercase tracking-[0.3em] mb-1 block">Administración Central</span>
|
||||
<h2 className="text-3xl font-black text-slate-900 tracking-tight uppercase">Validación de Cajas</h2>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
|
||||
|
||||
{/* LISTADO DE CAJAS PENDIENTES */}
|
||||
<div className="lg:col-span-7 space-y-4">
|
||||
<h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-2">Sesiones esperando cierre definitivo</h4>
|
||||
{pending.length === 0 ? (
|
||||
<div className="bg-white p-20 rounded-[2.5rem] border-2 border-dashed border-slate-200 text-center opacity-40">
|
||||
<CheckCircle2 size={48} className="mx-auto mb-4 text-emerald-500" />
|
||||
<p className="font-black text-xs uppercase tracking-widest">No hay cajas pendientes de validación</p>
|
||||
</div>
|
||||
) : (
|
||||
pending.map(s => (
|
||||
<motion.div
|
||||
key={s.id}
|
||||
whileHover={{ x: 5 }}
|
||||
onClick={() => setSelectedSession(s)}
|
||||
className={clsx(
|
||||
"p-6 bg-white rounded-[2rem] border-2 transition-all cursor-pointer flex justify-between items-center group",
|
||||
selectedSession?.id === s.id ? "border-blue-600 shadow-xl shadow-blue-100" : "border-slate-100 hover:border-blue-200 shadow-sm"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="w-14 h-14 bg-slate-100 rounded-2xl flex items-center justify-center text-slate-400 group-hover:bg-blue-600 group-hover:text-white transition-colors">
|
||||
<UserIcon size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-black text-slate-900 uppercase text-sm">{s.username}</p>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase flex items-center gap-1.5 mt-1">
|
||||
<Clock size={12} /> Cerrada: {new Date(s.closingDate).toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-xl font-mono font-black text-slate-900">$ {(s.declaredCash + s.declaredCards + s.declaredTransfers).toLocaleString()}</p>
|
||||
<span className="text-[9px] font-black text-blue-600 bg-blue-50 px-2 py-1 rounded-md mt-1 inline-block">PENDIENTE LIQUIDAR</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* PANEL DE ACCIÓN (DERECHA) */}
|
||||
<div className="lg:col-span-5">
|
||||
<AnimatePresence mode="wait">
|
||||
{selectedSession ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 10 }}
|
||||
className="bg-slate-900 rounded-[2.5rem] p-8 text-white shadow-2xl relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-8 opacity-5"><ShieldCheck size={120} /></div>
|
||||
<h3 className="text-xl font-black uppercase mb-8 flex items-center gap-3">
|
||||
<AlertCircle className="text-blue-400" /> Detalle de Liquidación
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6 relative z-10">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<TreasuryStat label="Efectivo Declarado" value={selectedSession.declaredCash} />
|
||||
<TreasuryStat label="Diferencia" value={selectedSession.totalDifference} color={selectedSession.totalDifference >= 0 ? "text-emerald-400" : "text-rose-400"} />
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 rounded-3xl p-6 border border-white/10 space-y-4">
|
||||
<label className="text-[10px] font-black text-blue-400 uppercase tracking-widest block">Observaciones de Tesorería</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={e => setNotes(e.target.value)}
|
||||
placeholder="Indique si el dinero coincide con el sobre entregado..."
|
||||
className="w-full bg-transparent border-none outline-none text-sm font-medium placeholder:opacity-20 min-h-[100px] resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleValidate}
|
||||
className="w-full py-5 bg-blue-600 hover:bg-blue-700 text-white rounded-2xl font-black uppercase text-xs tracking-widest shadow-xl shadow-blue-500/20 transition-all flex items-center justify-center gap-3"
|
||||
>
|
||||
<CheckCircle2 size={18} /> Validar y Archivar Caja
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="p-10 text-center text-slate-300 border-2 border-dashed border-slate-200 rounded-[2.5rem]">
|
||||
<p className="text-xs font-black uppercase tracking-widest">Seleccione una caja para auditar</p>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TreasuryStat({ label, value, color = "text-white" }: any) {
|
||||
return (
|
||||
<div className="bg-white/5 p-4 rounded-2xl border border-white/10">
|
||||
<span className="text-[9px] font-black text-slate-500 uppercase block mb-1">{label}</span>
|
||||
<span className={clsx("text-lg font-mono font-black", color)}>$ {value.toLocaleString()}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,7 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const api = axios.create({
|
||||
// Asegúrate de usar la variable de entorno o la URL correcta
|
||||
baseURL: import.meta.env.VITE_API_URL || 'http://localhost:5176/api',
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
});
|
||||
|
||||
// 1. Interceptor de REQUEST: Pega el token
|
||||
|
||||
36
frontend/counter-panel/src/services/dashboardService.ts
Normal file
36
frontend/counter-panel/src/services/dashboardService.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
const API_URL = `${import.meta.env.VITE_API_URL}/dashboard`;
|
||||
|
||||
export const dashboardService = {
|
||||
getStats: async (start?: string, end?: string) => {
|
||||
const token = localStorage.getItem('token');
|
||||
const params = new URLSearchParams();
|
||||
if (start) params.append('start', start);
|
||||
if (end) params.append('end', end);
|
||||
|
||||
const response = await fetch(`${API_URL}/stats?${params.toString()}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Error al cargar estadísticas');
|
||||
return await response.json();
|
||||
},
|
||||
|
||||
// Obtiene analítica avanzada para reportes gerenciales detallados
|
||||
getAdvancedAnalytics: async (start?: string, end?: string) => {
|
||||
const token = localStorage.getItem('token');
|
||||
const params = new URLSearchParams();
|
||||
if (start) params.append('start', start);
|
||||
if (end) params.append('end', end);
|
||||
|
||||
const response = await fetch(`${API_URL}/analytics?${params.toString()}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Error al cargar analítica avanzada');
|
||||
return await response.json();
|
||||
}
|
||||
};
|
||||
40
frontend/counter-panel/src/types/Analytics.ts
Normal file
40
frontend/counter-panel/src/types/Analytics.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
export type PaymentMethodStat = {
|
||||
method: string;
|
||||
total: number;
|
||||
count: number;
|
||||
};
|
||||
|
||||
export type CategoryPerformanceStat = {
|
||||
categoryName: string;
|
||||
revenue: number;
|
||||
adsCount: number;
|
||||
share: number;
|
||||
};
|
||||
|
||||
export type HourlyStat = {
|
||||
hour: number;
|
||||
count: number;
|
||||
};
|
||||
|
||||
export type DailyRevenue = {
|
||||
day: string;
|
||||
amount: number;
|
||||
};
|
||||
|
||||
export type AdvancedAnalyticsData = {
|
||||
totalRevenue: number;
|
||||
totalAds: number;
|
||||
revenueGrowth: number;
|
||||
adsGrowth: number;
|
||||
paymentsDistribution: PaymentMethodStat[];
|
||||
categoryPerformance: CategoryPerformanceStat[];
|
||||
hourlyActivity: HourlyStat[];
|
||||
dailyTrends: DailyRevenue[];
|
||||
|
||||
sourceMix: {
|
||||
mostradorCount: number;
|
||||
webCount: number;
|
||||
mostradorPercent: number;
|
||||
webPercent: number;
|
||||
};
|
||||
};
|
||||
22
frontend/counter-panel/src/types/Report.ts
Normal file
22
frontend/counter-panel/src/types/Report.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
export interface ReportItem {
|
||||
id: number;
|
||||
date: string;
|
||||
title: string;
|
||||
category: string;
|
||||
cashier: string;
|
||||
amount: number;
|
||||
clientName?: string;
|
||||
source: 'Web' | 'Mostrador';
|
||||
}
|
||||
|
||||
export interface GlobalReport {
|
||||
fromDate: string;
|
||||
toDate: string;
|
||||
items: ReportItem[];
|
||||
totalRevenue: number;
|
||||
totalAds: number;
|
||||
totalCash: number;
|
||||
totalDebit: number;
|
||||
totalCredit: number;
|
||||
totalTransfer: number;
|
||||
}
|
||||
Reference in New Issue
Block a user