Feat: Cambios Varios
This commit is contained in:
398
frontend/admin-panel/package-lock.json
generated
398
frontend/admin-panel/package-lock.json
generated
@@ -15,6 +15,7 @@
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.10.1",
|
||||
"recharts": "^3.6.0",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"zustand": "^5.0.9"
|
||||
},
|
||||
@@ -1026,6 +1027,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",
|
||||
@@ -1341,6 +1378,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",
|
||||
@@ -1642,6 +1691,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",
|
||||
@@ -1686,6 +1798,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",
|
||||
@@ -2306,6 +2424,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",
|
||||
@@ -2324,6 +2563,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",
|
||||
@@ -2428,6 +2673,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",
|
||||
@@ -2677,6 +2932,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",
|
||||
@@ -3008,6 +3269,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",
|
||||
@@ -3035,6 +3306,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",
|
||||
@@ -3731,6 +4011,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",
|
||||
@@ -3779,6 +4089,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",
|
||||
@@ -3940,6 +4301,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",
|
||||
@@ -4069,6 +4436,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",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.10.1",
|
||||
"recharts": "^3.6.0",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"zustand": "^5.0.9"
|
||||
},
|
||||
|
||||
@@ -2,12 +2,16 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import Login from './pages/Login';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import ProtectedLayout from './layouts/ProtectedLayout';
|
||||
|
||||
import CategoryManager from './pages/Categories/CategoryManager';
|
||||
import UserManager from './pages/Users/UserManager';
|
||||
import DiagramPage from './pages/Diagram/DiagramPage';
|
||||
import PricingManager from './pages/Pricing/PricingManager';
|
||||
import PromotionsManager from './pages/Pricing/PromotionsManager';
|
||||
import SalesByCategory from './pages/Reports/SalesByCategory';
|
||||
import ModerationPage from './pages/Moderation/ModerationPage';
|
||||
import ListingExplorer from './pages/Listings/ListingExplorer';
|
||||
import AuditTimeline from './pages/Audit/AuditTimeline';
|
||||
import ClientManager from './pages/Clients/ClientManager';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -17,11 +21,16 @@ function App() {
|
||||
|
||||
<Route element={<ProtectedLayout />}>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/moderation" element={<ModerationPage />} />
|
||||
<Route path="/listings" element={<ListingExplorer />} />
|
||||
<Route path="/categories" element={<CategoryManager />} />
|
||||
<Route path="/clients" element={<ClientManager />} />
|
||||
<Route path="/users" element={<UserManager />} />
|
||||
<Route path="/diagram" element={<DiagramPage />} />
|
||||
<Route path="/pricing" element={<PricingManager />} />
|
||||
<Route path="/promotions" element={<PromotionsManager />} />
|
||||
<Route path="/reports/categories" element={<SalesByCategory />} />
|
||||
<Route path="/audit" element={<AuditTimeline />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
import { X, Printer, Globe, Tag, Image as ImageIcon, Info, User } from 'lucide-react';
|
||||
|
||||
export default function ListingDetailModal({ isOpen, onClose, detail }: any) {
|
||||
if (!isOpen || !detail) return null;
|
||||
const { listing, attributes, images } = detail;
|
||||
|
||||
// Helper para la URL de imagen (asegura que no haya doble barra)
|
||||
const getImageUrl = (url: string) => {
|
||||
const base = import.meta.env.VITE_API_URL.replace('/api', '');
|
||||
return `${base}${url}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200">
|
||||
|
||||
{/* HEADER */}
|
||||
<div className="p-6 border-b flex justify-between items-center bg-gray-50">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-blue-600 uppercase mb-1">
|
||||
<Tag size={14} /> {listing.categoryName || 'Aviso Clasificado'}
|
||||
</div>
|
||||
<h2 className="text-2xl font-black text-gray-800">#{listing.id} - {listing.title}</h2>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 hover:bg-gray-200 rounded-full transition-colors"><X size={24} /></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
|
||||
{/* COLUMNA IZQUIERDA */}
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
|
||||
{/* DATOS DEL CLIENTE (NUEVO) */}
|
||||
<section className="bg-blue-50/50 p-4 rounded-xl border border-blue-100 flex items-center gap-6">
|
||||
<div className="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center shadow-md">
|
||||
<User size={24} />
|
||||
</div>
|
||||
<div className="flex-1 grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span className="block text-[10px] font-bold text-blue-400 uppercase">Solicitante</span>
|
||||
<span className="font-bold text-gray-700">{listing.clientName || 'Consumidor Final'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-[10px] font-bold text-blue-400 uppercase">DNI / CUIT</span>
|
||||
<span className="font-mono text-sm text-gray-600">{listing.clientDni || 'N/A'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FOTOS */}
|
||||
<section>
|
||||
<h3 className="text-sm font-bold text-gray-400 uppercase mb-4 flex items-center gap-2"><ImageIcon size={16} /> Galería de Fotos</h3>
|
||||
{images.length > 0 ? (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{images.map((img: any) => (
|
||||
<img
|
||||
key={img.id}
|
||||
src={getImageUrl(img.url)}
|
||||
className="w-full h-56 object-cover rounded-xl border shadow-sm hover:opacity-90 transition-opacity cursor-pointer"
|
||||
alt="Aviso"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-100 h-32 rounded-xl flex items-center justify-center text-gray-400 italic border-2 border-dashed">
|
||||
El usuario no cargó imágenes
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ATRIBUTOS */}
|
||||
<section>
|
||||
<h3 className="text-sm font-bold text-gray-400 uppercase mb-4 flex items-center gap-2"><Info size={16} /> Ficha Técnica</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{attributes.map((attr: any) => (
|
||||
<div key={attr.id} className="bg-white p-3 rounded-lg border border-gray-100 shadow-sm">
|
||||
<span className="block text-[10px] font-bold text-gray-400 uppercase">{attr.attributeName}</span>
|
||||
<span className="font-bold text-gray-700">{attr.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* COLUMNA DERECHA (DATOS TÉCNICOS) */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gray-900 text-white p-6 rounded-2xl shadow-xl">
|
||||
<div className="text-xs opacity-50 uppercase font-bold mb-1">Total Cobrado</div>
|
||||
<div className="text-4xl font-black text-green-400 mb-6">${listing.adFee?.toLocaleString()}</div>
|
||||
|
||||
<div className="space-y-3 pt-4 border-t border-white/10">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="opacity-60">Valor Producto</span>
|
||||
<span className="font-bold text-blue-300">${listing.price?.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="opacity-60">Estado</span>
|
||||
<span className="font-bold uppercase text-xs tracking-widest">{listing.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* IMPRESIÓN MEJORADA */}
|
||||
<div className="border border-gray-200 rounded-2xl p-6 space-y-4 bg-white shadow-sm">
|
||||
<h3 className="text-sm font-bold text-gray-800 flex items-center gap-2 border-b pb-2">
|
||||
<Printer size={18} className="text-gray-400" /> Publicación Impresa
|
||||
</h3>
|
||||
{listing.printText ? (
|
||||
<>
|
||||
<div className={`p-4 rounded-lg border-2 ${listing.isFrame ? 'border-black' : 'border-gray-100'} bg-gray-50`}>
|
||||
<p className={`text-sm leading-relaxed ${listing.isBold ? 'font-bold' : ''}`}>
|
||||
{listing.printText}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-[10px] font-bold text-gray-500 uppercase">
|
||||
<div className="bg-gray-100 p-2 rounded text-center">Días: {listing.printDaysCount}</div>
|
||||
<div className="bg-gray-100 p-2 rounded text-center">Negrita: {listing.isBold ? 'SI' : 'NO'}</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="py-4 text-center">
|
||||
<span className="text-xs font-bold text-orange-500 bg-orange-50 px-3 py-1 rounded-full uppercase">
|
||||
Aviso sólo para Web
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* TEXTO WEB */}
|
||||
<div className="bg-gray-50 rounded-2xl p-6 space-y-2 border border-gray-100">
|
||||
<h3 className="text-sm font-bold text-gray-500 flex items-center gap-2">
|
||||
<Globe size={18} /> Descripción Web
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 italic">"{listing.description || 'Sin descripción adicional.'}"</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,77 +1,69 @@
|
||||
import { Navigate, Outlet } from 'react-router-dom';
|
||||
import { Navigate, Outlet, useLocation } from 'react-router-dom';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import { LogOut, LayoutDashboard, FolderTree, Users, FileText, DollarSign, Percent } from 'lucide-react';
|
||||
import {
|
||||
LogOut, LayoutDashboard, FolderTree, Users,
|
||||
FileText, DollarSign, Eye, History, User as ClientIcon, Search
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function ProtectedLayout() {
|
||||
const { isAuthenticated, logout } = useAuthStore();
|
||||
const { isAuthenticated, role, logout } = useAuthStore();
|
||||
const location = useLocation();
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
if (!isAuthenticated) return <Navigate to="/login" replace />;
|
||||
|
||||
// Definición de permisos por ruta
|
||||
const menuItems = [
|
||||
{ label: 'Dashboard', href: '/', icon: <LayoutDashboard size={20} />, roles: ['Admin', 'Cajero'] },
|
||||
{ label: 'Moderación', href: '/moderation', icon: <Eye size={20} />, roles: ['Admin', 'Moderador'] },
|
||||
{ label: 'Explorador', href: '/listings', icon: <Search size={20} />, roles: ['Admin', 'Cajero', 'Moderador'] },
|
||||
{ label: 'Clientes', href: '/clients', icon: <ClientIcon size={20} />, roles: ['Admin', 'Cajero'] },
|
||||
{ label: 'Categorías', href: '/categories', icon: <FolderTree size={20} />, roles: ['Admin'] },
|
||||
{ label: 'Usuarios', href: '/users', icon: <Users size={20} />, roles: ['Admin'] },
|
||||
{ label: 'Tarifas', href: '/pricing', icon: <DollarSign size={20} />, roles: ['Admin'] },
|
||||
{ label: 'Diagramación', href: '/diagram', icon: <FileText size={20} />, roles: ['Admin', 'Diagramador'] },
|
||||
{ label: 'Auditoría', href: '/audit', icon: <History size={20} />, roles: ['Admin'] },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 flex">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 bg-gray-900 text-white flex flex-col transition-all duration-300">
|
||||
<div className="p-4 text-xl font-bold border-b border-gray-800 flex items-center gap-2">
|
||||
<LayoutDashboard className="text-blue-500" />
|
||||
SIG-CM
|
||||
<div className="flex h-screen bg-gray-100 overflow-hidden">
|
||||
<aside className="w-64 bg-gray-900 text-white flex flex-col shadow-xl">
|
||||
<div className="p-6 text-xl font-black border-b border-gray-800 tracking-tighter italic text-blue-500">
|
||||
SIG-CM <span className="text-[10px] text-gray-500 not-italic font-medium">ADMIN</span>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-4">
|
||||
<ul className="space-y-1">
|
||||
<li>
|
||||
<a href="/" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<LayoutDashboard size={20} />
|
||||
<span>Dashboard</span>
|
||||
<nav className="flex-1 p-4 space-y-1">
|
||||
{menuItems.map((item) => {
|
||||
// FILTRO DE SEGURIDAD UI: Solo mostrar si el rol del usuario está permitido
|
||||
if (!item.roles.includes(role || '')) return null;
|
||||
|
||||
return (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-3 p-3 rounded-xl transition-all ${location.pathname === item.href
|
||||
? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20'
|
||||
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
<span className="font-medium text-sm">{item.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/categories" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<FolderTree size={20} />
|
||||
<span>Categorías</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/users" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<Users size={20} />
|
||||
<span>Usuarios</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/pricing" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<DollarSign size={20} />
|
||||
<span>Tarifas y Reglas</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/promotions" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<Percent size={20} />
|
||||
<span>Promociones</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/diagram" className="flex items-center gap-3 p-3 hover:bg-gray-800 rounded transition-colors text-gray-300 hover:text-white">
|
||||
<FileText size={20} />
|
||||
<span>Diagramación</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-gray-800">
|
||||
<button
|
||||
onClick={logout}
|
||||
className="flex items-center gap-3 text-red-400 hover:text-red-300 w-full p-2 transition-colors"
|
||||
>
|
||||
<LogOut size={20} />
|
||||
<span>Cerrar Sesión</span>
|
||||
<div className="mb-4 px-3 py-2 bg-gray-800/50 rounded-lg">
|
||||
<p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Sesión actual</p>
|
||||
<p className="text-xs font-bold text-blue-400">{role}</p>
|
||||
</div>
|
||||
<button onClick={logout} className="flex items-center gap-3 text-red-400 hover:text-red-300 w-full p-2 transition-colors text-sm font-bold">
|
||||
<LogOut size={18} /> Cerrar Sesión
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 p-8 overflow-y-auto">
|
||||
<main className="flex-1 overflow-y-auto p-8 relative">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
57
frontend/admin-panel/src/pages/Audit/AuditTimeline.tsx
Normal file
57
frontend/admin-panel/src/pages/Audit/AuditTimeline.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '../../services/api';
|
||||
import { History, User as UserIcon, CheckCircle, XCircle, FileText, Clock } from 'lucide-react';
|
||||
|
||||
export default function AuditTimeline() {
|
||||
const [logs, setLogs] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
api.get('/reports/audit').then(res => {
|
||||
setLogs(res.data);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const getIcon = (action: string) => {
|
||||
if (action === 'Aprobar') return <CheckCircle className="text-green-500" size={18} />;
|
||||
if (action === 'Rechazar') return <XCircle className="text-red-500" size={18} />;
|
||||
return <FileText className="text-blue-500" size={18} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<History className="text-blue-600" />
|
||||
<h2 className="text-2xl font-bold text-gray-800">Auditoría de Actividad</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border shadow-sm overflow-hidden">
|
||||
<div className="p-4 bg-gray-50 border-b font-bold text-gray-600 text-sm">
|
||||
Últimas acciones realizadas por el equipo
|
||||
</div>
|
||||
|
||||
<div className="divide-y">
|
||||
{loading ? (
|
||||
<div className="p-10 text-center text-gray-400 italic">Cargando historial...</div>
|
||||
) : logs.map(log => (
|
||||
<div key={log.id} className="p-4 hover:bg-gray-50 transition flex items-start gap-4">
|
||||
<div className="mt-1">{getIcon(log.action)}</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="font-bold text-gray-800 flex items-center gap-1 italic">
|
||||
<UserIcon size={14} className="text-gray-400" /> {log.username}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 flex items-center gap-1">
|
||||
<Clock size={12} /> {new Date(log.createdAt).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-1">{log.details}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,10 +5,11 @@ import { categoryService } from '../../services/categoryService';
|
||||
import { attributeService } from '../../services/attributeService';
|
||||
import { type AttributeDefinition } from '../../types/AttributeDefinition';
|
||||
import Modal from '../../components/Modal';
|
||||
import { Plus, Edit, Trash2, ChevronRight, ChevronDown, Folder, FolderOpen, Settings, LayoutList } from 'lucide-react';
|
||||
import { Plus, Edit, Trash2, ChevronRight, ChevronDown, Folder, FolderOpen, Settings, LayoutList, GitMerge, Move, ArrowRightCircle } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
import { operationService } from '../../services/operationService';
|
||||
import { type Operation } from '../../types/Operation';
|
||||
import api from '../../services/api';
|
||||
|
||||
// Type helper for the tree structure
|
||||
interface CategoryNode extends Category {
|
||||
@@ -18,9 +19,14 @@ interface CategoryNode extends Category {
|
||||
|
||||
export default function CategoryManager() {
|
||||
const [categories, setCategories] = useState<CategoryNode[]>([]);
|
||||
const [flatCategories, setFlatCategories] = useState<Category[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
// Drag & Drop State
|
||||
const [draggedNode, setDraggedNode] = useState<CategoryNode | null>(null);
|
||||
const [dragOverNodeId, setDragOverNodeId] = useState<number | null>(null);
|
||||
|
||||
// Form state
|
||||
const [editingCategory, setEditingCategory] = useState<Category | null>(null);
|
||||
const [formData, setFormData] = useState<Partial<Category>>({ name: '', slug: '', active: true, parentId: null });
|
||||
@@ -31,7 +37,7 @@ export default function CategoryManager() {
|
||||
const [configuringCategory, setConfiguringCategory] = useState<Category | null>(null);
|
||||
const [isOpsModalOpen, setIsOpsModalOpen] = useState(false);
|
||||
|
||||
// State for Attributes (ESTO FALTABA)
|
||||
// State for Attributes
|
||||
const [isAttrModalOpen, setIsAttrModalOpen] = useState(false);
|
||||
const [attributes, setAttributes] = useState<AttributeDefinition[]>([]);
|
||||
const [newAttrData, setNewAttrData] = useState({
|
||||
@@ -40,6 +46,13 @@ export default function CategoryManager() {
|
||||
required: false
|
||||
});
|
||||
|
||||
// State for Merge
|
||||
const [isMergeModalOpen, setIsMergeModalOpen] = useState(false);
|
||||
const [targetMergeId, setTargetMergeId] = useState<number>(0);
|
||||
|
||||
// State for Move Content (Nueva funcionalidad)
|
||||
const [isMoveContentModalOpen, setIsMoveContentModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadCategories();
|
||||
}, []);
|
||||
@@ -48,6 +61,7 @@ export default function CategoryManager() {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await categoryService.getAll();
|
||||
setFlatCategories(data);
|
||||
const tree = buildTree(data);
|
||||
setCategories(tree);
|
||||
} catch (error) {
|
||||
@@ -67,6 +81,106 @@ export default function CategoryManager() {
|
||||
}));
|
||||
};
|
||||
|
||||
// --- LÓGICA DRAG & DROP ---
|
||||
|
||||
const handleDragStart = (e: React.DragEvent, node: CategoryNode) => {
|
||||
e.stopPropagation();
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/plain', JSON.stringify(node));
|
||||
setTimeout(() => {
|
||||
setDraggedNode(node);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const handleDragEnd = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setDraggedNode(null);
|
||||
setDragOverNodeId(null);
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent, targetId: number) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!draggedNode || draggedNode.id === targetId) return;
|
||||
if (isDescendant(draggedNode, targetId)) return;
|
||||
setDragOverNodeId(targetId);
|
||||
};
|
||||
|
||||
const handleDragLeave = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleDrop = async (e: React.DragEvent, targetNode: CategoryNode | null) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragOverNodeId(null);
|
||||
|
||||
if (!draggedNode) return;
|
||||
|
||||
const newParentId = targetNode ? targetNode.id : null;
|
||||
|
||||
// 1. Validación: No mover si es el mismo padre
|
||||
if (draggedNode.parentId === newParentId) {
|
||||
setDraggedNode(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Validación: No mover dentro de sus propios hijos (Ciclo)
|
||||
if (targetNode && isDescendant(draggedNode, targetNode.id)) {
|
||||
alert("Operación inválida: No puedes mover una categoría dentro de sus propios hijos.");
|
||||
setDraggedNode(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const actionText = targetNode ? `dentro de "${targetNode.name}"` : "al nivel Raíz";
|
||||
|
||||
if (!confirm(`¿Mover "${draggedNode.name}" ${actionText}?`)) {
|
||||
setDraggedNode(null);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await categoryService.update(draggedNode.id, {
|
||||
id: draggedNode.id,
|
||||
name: draggedNode.name,
|
||||
slug: draggedNode.slug,
|
||||
active: draggedNode.active,
|
||||
parentId: newParentId
|
||||
});
|
||||
|
||||
loadCategories(); // Recargar árbol si tuvo éxito
|
||||
} catch (error: any) {
|
||||
console.error("Error detallado en Drop:", error);
|
||||
|
||||
let errorMessage = "Error al mover la categoría";
|
||||
|
||||
// Caso 1: BadRequest simple (string plano desde .NET)
|
||||
if (typeof error.response?.data === 'string') {
|
||||
errorMessage = error.response.data;
|
||||
}
|
||||
// Caso 2: Objeto JSON con propiedad 'message' o 'title' (ProblemDetails)
|
||||
else if (error.response?.data) {
|
||||
errorMessage = error.response.data.message || error.response.data.title || JSON.stringify(error.response.data);
|
||||
}
|
||||
// Caso 3: Error de red sin respuesta
|
||||
else if (error.message) {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
|
||||
alert(`❌ Operación Rechazada:\n${errorMessage}`);
|
||||
} finally {
|
||||
setDraggedNode(null);
|
||||
}
|
||||
};
|
||||
|
||||
const isDescendant = (sourceNode: CategoryNode, targetId: number): boolean => {
|
||||
if (sourceNode.children.some(child => child.id === targetId)) return true;
|
||||
return sourceNode.children.some(child => isDescendant(child, targetId));
|
||||
};
|
||||
|
||||
// --- FIN LÓGICA DRAG & DROP ---
|
||||
|
||||
const handleCreate = (parentId: number | null = null) => {
|
||||
setEditingCategory(null);
|
||||
setFormData({ name: '', slug: '', active: true, parentId });
|
||||
@@ -100,21 +214,20 @@ export default function CategoryManager() {
|
||||
}
|
||||
setIsModalOpen(false);
|
||||
loadCategories();
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
console.error('Error saving category:', error);
|
||||
// Mostrar validación del backend (ej: Padre con avisos)
|
||||
alert(error.response?.data || 'Error al guardar la categoría. Verifique las reglas.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfigureOps = async (category: Category) => {
|
||||
setConfiguringCategory(category);
|
||||
setIsOpsModalOpen(true);
|
||||
|
||||
// Load data in parallel
|
||||
const [ops, catOps] = await Promise.all([
|
||||
operationService.getAll(),
|
||||
categoryService.getOperations(category.id)
|
||||
]);
|
||||
|
||||
setAllOperations(ops);
|
||||
setSelectedCategoryOps(catOps);
|
||||
};
|
||||
@@ -133,18 +246,15 @@ export default function CategoryManager() {
|
||||
const handleCreateAttribute = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!configuringCategory || !newAttrData.name) return;
|
||||
|
||||
try {
|
||||
await attributeService.create({
|
||||
...newAttrData,
|
||||
categoryId: configuringCategory.id,
|
||||
dataType: newAttrData.dataType as any // Type assertion for simplicity
|
||||
dataType: newAttrData.dataType as any
|
||||
});
|
||||
setNewAttrData({ name: '', dataType: 'text', required: false });
|
||||
loadAttributes(configuringCategory.id);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
} catch (error) { console.error(error); }
|
||||
};
|
||||
|
||||
const handleDeleteAttribute = async (id: number) => {
|
||||
@@ -152,108 +262,133 @@ export default function CategoryManager() {
|
||||
try {
|
||||
await attributeService.delete(id);
|
||||
if (configuringCategory) loadAttributes(configuringCategory.id);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
} catch (error) { console.error(error); }
|
||||
};
|
||||
|
||||
const toggleOperation = async (opId: number, isChecked: boolean) => {
|
||||
if (!configuringCategory) return;
|
||||
|
||||
try {
|
||||
if (isChecked) {
|
||||
await categoryService.addOperation(configuringCategory.id, opId);
|
||||
// Optimistic update
|
||||
const opToAdd = allOperations.find(o => o.id === opId);
|
||||
if (opToAdd) setSelectedCategoryOps([...selectedCategoryOps, opToAdd]);
|
||||
} else {
|
||||
await categoryService.removeOperation(configuringCategory.id, opId);
|
||||
setSelectedCategoryOps(selectedCategoryOps.filter(o => o.id !== opId));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Error actualizando operación");
|
||||
}
|
||||
} catch (error) { console.error(error); alert("Error actualizando operación"); }
|
||||
};
|
||||
|
||||
// Recursive component for rendering specific tree items
|
||||
// --- MERGE LOGIC ---
|
||||
const handleOpenMerge = (cat: Category) => {
|
||||
setEditingCategory(cat);
|
||||
setTargetMergeId(0);
|
||||
setIsMergeModalOpen(true);
|
||||
}
|
||||
|
||||
const handleMerge = async () => {
|
||||
if (!editingCategory || !targetMergeId) return;
|
||||
if (confirm(`¿CONFIRMAR FUSIÓN?\n\nTodo el contenido de "${editingCategory.name}" pasará a la categoría destino.\n"${editingCategory.name}" será ELIMINADA permanentemente.`)) {
|
||||
try {
|
||||
await api.post('/categories/merge', { sourceId: editingCategory.id, targetId: targetMergeId });
|
||||
setIsMergeModalOpen(false);
|
||||
loadCategories();
|
||||
alert("Fusión completada.");
|
||||
} catch (e) { console.error(e); alert("Error al fusionar"); }
|
||||
}
|
||||
}
|
||||
|
||||
// --- MOVE CONTENT LOGIC (Nuevo) ---
|
||||
const handleOpenMoveContent = (cat: Category) => {
|
||||
setEditingCategory(cat);
|
||||
setTargetMergeId(0);
|
||||
setIsMoveContentModalOpen(true);
|
||||
}
|
||||
|
||||
const handleMoveContent = async () => {
|
||||
if (!editingCategory || !targetMergeId) return;
|
||||
try {
|
||||
// Usamos el endpoint para mover solo avisos
|
||||
await api.post('/categories/move-content', {
|
||||
sourceId: editingCategory.id,
|
||||
targetId: targetMergeId
|
||||
});
|
||||
setIsMoveContentModalOpen(false);
|
||||
alert("Avisos movidos correctamente. Ahora puede agregar subcategorías.");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert("Error al mover avisos");
|
||||
}
|
||||
}
|
||||
|
||||
// Componente Recursivo de Nodo
|
||||
const CategoryItem = ({ node }: { node: CategoryNode }) => {
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const isDragOver = dragOverNodeId === node.id;
|
||||
const isBeingDragged = draggedNode?.id === node.id;
|
||||
|
||||
return (
|
||||
<div className="mb-1">
|
||||
<div
|
||||
className={clsx("mb-1 transition-all duration-200", isBeingDragged && "opacity-40 grayscale")}
|
||||
style={{ marginLeft: `${node.level * 20}px` }}
|
||||
>
|
||||
<div
|
||||
draggable="true"
|
||||
onDragStart={(e) => handleDragStart(e, node)}
|
||||
onDragOver={(e) => handleDragOver(e, node.id)}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={(e) => handleDrop(e, node)}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={clsx(
|
||||
"flex items-center p-2 rounded hover:bg-gray-100 transition-colors group border-b border-gray-100",
|
||||
node.level === 0 && "font-semibold bg-gray-50 border-gray-200"
|
||||
"flex items-center p-2 rounded transition-all group border-b border-gray-100 cursor-grab active:cursor-grabbing select-none",
|
||||
node.level === 0 && "font-semibold bg-gray-50 border-gray-200",
|
||||
isDragOver
|
||||
? "bg-blue-100 border-2 border-blue-500 shadow-md transform scale-[1.01] z-10"
|
||||
: "hover:bg-gray-100 border-transparent"
|
||||
)}
|
||||
style={{ marginLeft: `${node.level * 20}px` }}
|
||||
>
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className={clsx("mr-2 text-gray-500", node.children.length === 0 && "opacity-0")}
|
||||
>
|
||||
<div className="mr-2 text-gray-300 group-hover:text-gray-500 cursor-grab">
|
||||
<Move size={14} />
|
||||
</div>
|
||||
|
||||
<button onClick={() => setIsExpanded(!isExpanded)} className={clsx("mr-2 text-gray-500", node.children.length === 0 && "opacity-0")}>
|
||||
{isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
|
||||
</button>
|
||||
|
||||
<span className="text-blue-500 mr-2">
|
||||
<span className={clsx("mr-2", isDragOver ? "text-blue-700" : "text-blue-500")}>
|
||||
{isExpanded ? <FolderOpen size={18} /> : <Folder size={18} />}
|
||||
</span>
|
||||
|
||||
<span className="flex-1">{node.name}</span>
|
||||
<span className="flex-1 font-medium text-gray-700">{node.name}</span>
|
||||
|
||||
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{/* Attributes Button */}
|
||||
<button
|
||||
onClick={() => handleConfigureAttributes(node)}
|
||||
className="p-1 text-orange-600 hover:bg-orange-100 rounded"
|
||||
title="Atributos Dinámicos"
|
||||
>
|
||||
<LayoutList size={16} />
|
||||
</button>
|
||||
<button onClick={() => handleConfigureAttributes(node)} className="p-1 text-orange-600 hover:bg-orange-100 rounded" title="Atributos"><LayoutList size={16} /></button>
|
||||
<button onClick={() => handleConfigureOps(node)} className="p-1 text-purple-600 hover:bg-purple-100 rounded" title="Operaciones"><Settings size={16} /></button>
|
||||
|
||||
<button
|
||||
onClick={() => handleConfigureOps(node)}
|
||||
className="p-1 text-purple-600 hover:bg-purple-100 rounded"
|
||||
title="Configurar Operaciones"
|
||||
>
|
||||
<Settings size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCreate(node.id)}
|
||||
className="p-1 text-green-600 hover:bg-green-100 rounded"
|
||||
title="Agregar Subcategoría"
|
||||
>
|
||||
<Plus size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleEdit(node)}
|
||||
className="p-1 text-blue-600 hover:bg-blue-100 rounded"
|
||||
title="Editar"
|
||||
>
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(node.id)}
|
||||
className="p-1 text-red-600 hover:bg-red-100 rounded"
|
||||
title="Eliminar"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
{/* Botón Mover Contenido (Nuevo) */}
|
||||
<button onClick={() => handleOpenMoveContent(node)} className="p-1 text-teal-600 hover:bg-teal-100 rounded" title="Mover Avisos (Vaciar)"><ArrowRightCircle size={16} /></button>
|
||||
|
||||
<button onClick={() => handleOpenMerge(node)} className="p-1 text-indigo-600 hover:bg-indigo-100 rounded" title="Fusionar (Merge)"><GitMerge size={16} /></button>
|
||||
<button onClick={() => handleCreate(node.id)} className="p-1 text-green-600 hover:bg-green-100 rounded" title="Subcategoría"><Plus size={16} /></button>
|
||||
<button onClick={() => handleEdit(node)} className="p-1 text-blue-600 hover:bg-blue-100 rounded" title="Editar"><Edit size={16} /></button>
|
||||
<button onClick={() => handleDelete(node.id)} className="p-1 text-red-600 hover:bg-red-100 rounded" title="Eliminar"><Trash2 size={16} /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isExpanded && node.children.length > 0 && (
|
||||
<div className="border-l border-gray-200 ml-4 py-1">
|
||||
{node.children.map(child => (
|
||||
<CategoryItem key={child.id} node={child} />
|
||||
))}
|
||||
<div className="border-l-2 border-gray-200 ml-5 pl-1 py-1">
|
||||
{node.children.map(child => <CategoryItem key={child.id} node={child} />)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Helper para saber si una categoría es padre (tiene hijos)
|
||||
const isParentCategory = (id: number) => {
|
||||
return flatCategories.some(c => c.parentId === id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
@@ -267,14 +402,22 @@ export default function CategoryManager() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Operation Manager Section */}
|
||||
<OperationManager />
|
||||
|
||||
<div className="bg-white rounded shadow p-6 min-h-[500px]">
|
||||
<div
|
||||
className={clsx(
|
||||
"bg-white rounded shadow p-6 min-h-[500px] border-2 transition-all duration-200",
|
||||
draggedNode && dragOverNodeId === null
|
||||
? "border-dashed border-blue-400 bg-blue-50/50"
|
||||
: "border-transparent"
|
||||
)}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOverNodeId(null); }}
|
||||
onDrop={(e) => handleDrop(e, null)}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="text-center text-gray-500 py-10">Cargando taxonomía...</div>
|
||||
) : categories.length === 0 ? (
|
||||
<div className="text-center text-gray-400 py-10">No hay categorías definidas. Crea la primera.</div>
|
||||
<div className="text-center text-gray-400 py-10">No hay categorías definidas. Crea la primera o arrastra aquí para mover a la raíz.</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{categories.map(node => (
|
||||
@@ -282,8 +425,20 @@ export default function CategoryManager() {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{draggedNode && (
|
||||
<div className={clsx(
|
||||
"mt-8 py-8 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center text-gray-400 pointer-events-none transition-opacity duration-300",
|
||||
draggedNode ? "opacity-100" : "opacity-0 h-0 py-0 mt-0 overflow-hidden"
|
||||
)}>
|
||||
<Move className="mr-2" /> Soltar aquí para convertir en Categoría Raíz
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* --- MODALES --- */}
|
||||
|
||||
{/* Main Modal (Create/Edit) */}
|
||||
<Modal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
@@ -370,7 +525,7 @@ export default function CategoryManager() {
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Attributes Configuration Modal (ESTO FALTABA EN EL JSX) */}
|
||||
{/* Attributes Configuration Modal */}
|
||||
<Modal
|
||||
isOpen={isAttrModalOpen}
|
||||
onClose={() => setIsAttrModalOpen(false)}
|
||||
@@ -439,6 +594,88 @@ export default function CategoryManager() {
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Merge Modal */}
|
||||
<Modal isOpen={isMergeModalOpen} onClose={() => setIsMergeModalOpen(false)} title="Fusionar Categorías">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600 bg-yellow-50 p-3 rounded border border-yellow-200">
|
||||
Está a punto de mover todo el contenido de <strong>{editingCategory?.name}</strong> a otra categoría.
|
||||
<br />
|
||||
<span className="text-red-600 font-bold">¡La categoría original será eliminada!</span>
|
||||
</p>
|
||||
<div>
|
||||
<label className="block text-sm font-bold mb-2">Seleccione Categoría Destino:</label>
|
||||
<select
|
||||
className="w-full border p-2 rounded focus:ring-2 focus:ring-indigo-500 outline-none"
|
||||
onChange={e => setTargetMergeId(Number(e.target.value))}
|
||||
value={targetMergeId}
|
||||
>
|
||||
<option value="0">-- Seleccionar Destino --</option>
|
||||
{flatCategories
|
||||
.filter(c => c.id !== editingCategory?.id)
|
||||
.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<button onClick={() => setIsMergeModalOpen(false)} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">Cancelar</button>
|
||||
<button
|
||||
onClick={handleMerge}
|
||||
disabled={!targetMergeId}
|
||||
className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Confirmar Fusión
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* MOVE CONTENT MODAL */}
|
||||
<Modal isOpen={isMoveContentModalOpen} onClose={() => setIsMoveContentModalOpen(false)} title="Mover Avisos (Vaciar)">
|
||||
<div className="space-y-4">
|
||||
<div className="bg-blue-50 p-3 rounded border border-blue-200 text-sm text-gray-700">
|
||||
<p className="font-bold mb-1">Mover avisos de: {editingCategory?.name}</p>
|
||||
<p>Seleccione un destino para los avisos. <br />
|
||||
<span className="text-xs text-blue-600">* Solo se permiten categorías finales (sin hijos).</span></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-bold mb-2">Destino de los avisos:</label>
|
||||
<select
|
||||
className="w-full border p-2 rounded focus:ring-2 focus:ring-teal-500 outline-none"
|
||||
onChange={e => setTargetMergeId(Number(e.target.value))}
|
||||
value={targetMergeId}
|
||||
>
|
||||
<option value="0">-- Seleccionar Destino --</option>
|
||||
{flatCategories
|
||||
.filter(c =>
|
||||
c.id !== editingCategory?.id && // No el mismo
|
||||
!isParentCategory(c.id) // No permitir mover a Padres
|
||||
)
|
||||
.map(c => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{targetMergeId === 0 && (
|
||||
<p className="text-xs text-red-500 mt-1">Debe seleccionar un destino válido.</p>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<button onClick={() => setIsMoveContentModalOpen(false)} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">Cancelar</button>
|
||||
<button
|
||||
onClick={handleMoveContent}
|
||||
disabled={!targetMergeId}
|
||||
className="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Mover Avisos
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
95
frontend/admin-panel/src/pages/Clients/ClientManager.tsx
Normal file
95
frontend/admin-panel/src/pages/Clients/ClientManager.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { clientService } from '../../services/clientService';
|
||||
import { User, Search, Phone, Mail, FileText, CreditCard } from 'lucide-react';
|
||||
|
||||
export default function ClientManager() {
|
||||
const [clients, setClients] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
clientService.getAll().then(res => {
|
||||
setClients(res);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const filteredClients = clients.filter(c =>
|
||||
c.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
c.dniOrCuit.includes(search)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<User className="text-blue-600" />
|
||||
Directorio de Clientes
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Buscador */}
|
||||
<div className="bg-white p-4 rounded-xl border shadow-sm relative">
|
||||
<Search className="absolute left-7 top-7 text-gray-400" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar por nombre o DNI/CUIT..."
|
||||
className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Grid de Clientes */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{loading ? (
|
||||
<p className="col-span-full text-center text-gray-400 py-10">Cargando base de datos...</p>
|
||||
) : filteredClients.map(client => (
|
||||
<div key={client.id} className="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all overflow-hidden group">
|
||||
<div className="p-5 border-b border-gray-50 bg-gray-50/50">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="w-10 h-10 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center font-bold">
|
||||
{client.name.charAt(0)}
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest bg-white px-2 py-1 rounded-full border">
|
||||
ID: #{client.id}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-3 font-bold text-gray-800 text-lg line-clamp-1">{client.name}</h3>
|
||||
<div className="flex items-center gap-1.5 text-xs text-gray-500 mt-1">
|
||||
<CreditCard size={14} />
|
||||
{client.dniOrCuit}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<Mail size={16} className="text-gray-400" />
|
||||
{client.email || 'Sin correo'}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<Phone size={16} className="text-gray-400" />
|
||||
{client.phone || 'Sin teléfono'}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 mt-4 pt-4 border-t border-gray-100">
|
||||
<div className="text-center border-r border-gray-100">
|
||||
<div className="text-xs text-gray-400 font-bold uppercase">Avisos</div>
|
||||
<div className="text-lg font-black text-gray-800">{client.totalAds}</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-xs text-gray-400 font-bold uppercase">Invertido</div>
|
||||
<div className="text-lg font-black text-green-600">${client.totalSpent?.toLocaleString() || 0}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full py-3 bg-white text-blue-600 text-xs font-bold uppercase tracking-tighter hover:bg-blue-600 hover:text-white transition-all flex items-center justify-center gap-2 border-t">
|
||||
<FileText size={14} /> Ver Historial Completo
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,362 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
DollarSign, FileText, Printer, TrendingUp,
|
||||
Download, PieChart as PieIcon,
|
||||
Clock, RefreshCw, UserCheck, ListChecks, ChevronRight, Users, ArrowLeft,
|
||||
History, CheckCircle, XCircle
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
LineChart, Line, XAxis, YAxis, CartesianGrid,
|
||||
Tooltip, ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
import { dashboardService, type DashboardData } from '../services/dashboardService';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import api from '../services/api';
|
||||
import { reportService } from '../services/reportService';
|
||||
|
||||
const getLocalDateString = (date: Date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
export default function Dashboard() {
|
||||
const { role } = useAuthStore();
|
||||
const [data, setData] = useState<DashboardData | any>(null);
|
||||
const [cashiers, setCashiers] = useState<any[]>([]);
|
||||
const [recentTransactions, setRecentTransactions] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// --- NUEVOS ESTADOS PARA MONITOR INTEGRADO ---
|
||||
const [selectedCashier, setSelectedCashier] = useState<{ id: number, name: string } | null>(null);
|
||||
const [selectedCashierLogs, setSelectedCashierLogs] = useState<any[]>([]);
|
||||
const [loadingLogs, setLoadingLogs] = useState(false);
|
||||
|
||||
const todayStr = getLocalDateString(new Date());
|
||||
const [dates, setDates] = useState({ from: todayStr, to: todayStr });
|
||||
|
||||
const loadDashboardData = async () => {
|
||||
if (new Date(dates.from) > new Date(dates.to)) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
if (role === 'Admin') {
|
||||
if (selectedCashier) {
|
||||
const res = await api.get(`/reports/cashier-detail/${selectedCashier.id}`, {
|
||||
params: { from: dates.from, to: dates.to }
|
||||
});
|
||||
setData(res.data);
|
||||
// Cargar logs del cajero seleccionado
|
||||
loadCashierLogs(selectedCashier.id);
|
||||
} else {
|
||||
const stats = await dashboardService.getStats(dates.from, dates.to);
|
||||
setData(stats);
|
||||
const usersRes = await api.get('/users');
|
||||
setCashiers(usersRes.data.filter((u: any) => u.role === 'Cajero'));
|
||||
}
|
||||
} else {
|
||||
const res = await api.get('/reports/cashier', {
|
||||
params: { from: dates.from, to: dates.to }
|
||||
});
|
||||
setData(res.data);
|
||||
}
|
||||
|
||||
const params: any = {};
|
||||
if (selectedCashier) params.userId = selectedCashier.id;
|
||||
const recentRes = await api.get('/listings', { params });
|
||||
setRecentTransactions(recentRes.data.slice(0, 5));
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error cargando dashboard:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadCashierLogs = async (userId: number) => {
|
||||
setLoadingLogs(true);
|
||||
try {
|
||||
const res = await api.get(`/reports/audit/user/${userId}`);
|
||||
setSelectedCashierLogs(res.data);
|
||||
} catch (e) {
|
||||
console.error("Error cargando logs");
|
||||
} finally {
|
||||
setLoadingLogs(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadDashboardData();
|
||||
}, [dates, role, selectedCashier]);
|
||||
|
||||
const setQuickRange = (days: number) => {
|
||||
const now = new Date();
|
||||
const start = new Date();
|
||||
start.setDate(now.getDate() - days);
|
||||
setDates({ from: getLocalDateString(start), to: getLocalDateString(now) });
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
await reportService.exportCierre(dates.from, dates.to, selectedCashier?.id);
|
||||
} catch (e) {
|
||||
alert("Error al generar el reporte");
|
||||
}
|
||||
};
|
||||
|
||||
const getAuditIcon = (action: string) => {
|
||||
if (action === 'Aprobar') return <CheckCircle className="text-green-500" size={14} />;
|
||||
if (action === 'Rechazar') return <XCircle className="text-red-500" size={14} />;
|
||||
return <Clock className="text-blue-500" size={14} />;
|
||||
};
|
||||
|
||||
if (loading && !data) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-64 text-gray-500">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
|
||||
<p className="font-medium">Sincronizando información...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
const isInvalidRange = new Date(dates.from) > new Date(dates.to);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-800 mb-4">Bienvenido al Panel de Administración</h1>
|
||||
<p className="text-gray-600">Seleccione una opción del menú para comenzar.</p>
|
||||
<div className="space-y-6">
|
||||
{/* HEADER UNIFICADO */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-white p-4 rounded-xl border border-gray-200 shadow-sm transition-all">
|
||||
<div className="flex items-center gap-4">
|
||||
{selectedCashier && (
|
||||
<button
|
||||
onClick={() => setSelectedCashier(null)}
|
||||
className="p-2 hover:bg-gray-100 rounded-full text-gray-500 transition-colors"
|
||||
title="Volver a Vista Global"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
)}
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-xl font-bold text-gray-800">
|
||||
{role === 'Admin'
|
||||
? (selectedCashier ? `Auditoría: ${selectedCashier.name}` : 'Resumen Gerencial')
|
||||
: 'Mi Rendimiento'}
|
||||
</h1>
|
||||
{loading && <RefreshCw size={14} className="animate-spin text-blue-500" />}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<Clock size={14} />
|
||||
<span>{new Date(dates.from).toLocaleDateString()} - {new Date(dates.to).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="flex bg-gray-100 p-1 rounded-lg">
|
||||
<button onClick={() => setQuickRange(0)} className={`px-3 py-1 text-xs font-bold rounded transition-all ${dates.from === todayStr ? 'bg-white shadow text-blue-600' : 'text-gray-500'}`}>HOY</button>
|
||||
<button onClick={() => setQuickRange(7)} className={`px-3 py-1 text-xs font-bold rounded transition-all ${dates.from !== todayStr ? 'bg-white shadow text-blue-600' : 'text-gray-500'}`}>7D</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 border-l pl-3 border-gray-200">
|
||||
<input type="date" value={dates.from} onChange={(e) => setDates({ ...dates, from: e.target.value })} className={`text-xs border ${isInvalidRange ? 'border-red-500 bg-red-50' : 'border-gray-300 bg-gray-50'} rounded p-1.5 outline-none focus:ring-2 focus:ring-blue-500/20`} />
|
||||
<span className="text-gray-400 text-xs">-</span>
|
||||
<input type="date" value={dates.to} onChange={(e) => setDates({ ...dates, to: e.target.value })} className={`text-xs border ${isInvalidRange ? 'border-red-500 bg-red-50' : 'border-gray-300 bg-gray-50'} rounded p-1.5 outline-none focus:ring-2 focus:ring-blue-500/20`} />
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="flex items-center gap-2 bg-gray-900 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-gray-700 transition shadow-md"
|
||||
>
|
||||
<Download size={16} />
|
||||
{role === 'Admin' ? (selectedCashier ? 'DESCARGAR CAJA' : 'DESCARGAR CIERRE GLOBAL') : 'MI ACTIVIDAD'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPIs */}
|
||||
{(role === 'Cajero' || selectedCashier) ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<KpiCard title="Recaudación Caja" value={`$${(data.myRevenue ?? 0).toLocaleString()}`} trend="Ingresos" icon={<DollarSign />} color="bg-green-50 text-green-600" />
|
||||
<KpiCard title="Avisos Procesados" value={(data.myAdsCount ?? 0).toString()} trend="Cargas" icon={<UserCheck />} color="bg-blue-50 text-blue-700" />
|
||||
<KpiCard title="En Revisión" value={(data.myPendingAds ?? 0).toString()} trend="Pendientes" icon={<ListChecks />} color="bg-orange-50 text-orange-700" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<KpiCard title="Recaudación" value={`$${data.revenueToday.toLocaleString()}`} trend="Total" icon={<DollarSign />} color="bg-green-50 text-green-600" />
|
||||
<KpiCard title="Avisos Vendidos" value={data.adsToday.toString()} trend="Aprobados" icon={<FileText />} color="bg-blue-50 text-blue-600" />
|
||||
<KpiCard title="Ocupación Papel" value={`${Math.round(data.paperOccupation)}%`} trend="Mañana" progress={data.paperOccupation} icon={<Printer />} color="bg-orange-50 text-orange-600" />
|
||||
<KpiCard title="Ticket Promedio" value={`$${Math.round(data.ticketAverage).toLocaleString()}`} trend="Promedio" icon={<TrendingUp />} color="bg-purple-50 text-purple-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
|
||||
<h3 className="font-bold text-gray-700 mb-6 flex items-center gap-2"><TrendingUp size={18} className="text-blue-500" /> Evolución de Ingresos</h3>
|
||||
<div className="h-72 relative">
|
||||
{role === 'Admin' && !selectedCashier ? (
|
||||
<ResponsiveContainer width="100%" height="100%" minWidth={0} debounce={50}>
|
||||
<LineChart data={data.weeklyTrend}>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#F3F4F6" />
|
||||
<XAxis dataKey="day" axisLine={false} tickLine={false} tick={{ fill: '#9CA3AF', fontSize: 11 }} dy={10} />
|
||||
<YAxis axisLine={false} tickLine={false} tick={{ fill: '#9CA3AF', fontSize: 11 }} />
|
||||
<Tooltip formatter={(val: any) => [`$${Number(val).toLocaleString()}`, "Ventas"]} contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)' }} />
|
||||
<Line type="monotone" dataKey="amount" stroke="#3B82F6" strokeWidth={4} dot={{ r: 4, fill: '#3B82F6', strokeWidth: 2, stroke: '#fff' }} activeDot={{ r: 6, strokeWidth: 0 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-50/50 rounded-xl text-gray-400 italic text-sm">
|
||||
Gráfico de tendencia disponible en vista gerencial global
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MONITOR INTEGRADO (LISTA O AUDITORÍA) */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm flex flex-col overflow-hidden">
|
||||
{role === 'Admin' && !selectedCashier ? (
|
||||
<>
|
||||
<div className="p-4 border-b bg-gray-50/50 flex justify-between items-center">
|
||||
<h3 className="font-bold text-gray-700 flex items-center gap-2">
|
||||
<Users size={18} className="text-blue-500" /> Monitor de Cajeros
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4 space-y-3 overflow-y-auto flex-1">
|
||||
{cashiers.map(c => (
|
||||
<div
|
||||
key={c.id}
|
||||
onClick={() => setSelectedCashier({ id: c.id, name: c.username })}
|
||||
className="flex items-center justify-between p-3 rounded-xl border border-gray-100 bg-white hover:bg-blue-50 hover:border-blue-200 transition-all cursor-pointer group"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center text-xs font-bold text-gray-500 group-hover:text-blue-600 transition-colors">
|
||||
{c.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-700">{c.username}</span>
|
||||
</div>
|
||||
<ChevronRight size={16} className="text-gray-300 group-hover:text-blue-500" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : role === 'Admin' && selectedCashier ? (
|
||||
<>
|
||||
<div className="p-4 border-b bg-blue-600 text-white flex justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<History size={18} />
|
||||
<h3 className="font-bold text-sm truncate">Logs: {selectedCashier.name}</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedCashier(null)}
|
||||
className="text-[10px] bg-white/20 hover:bg-white/30 px-2 py-1 rounded font-bold transition-colors"
|
||||
>
|
||||
CERRAR
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-white">
|
||||
{loadingLogs ? (
|
||||
<div className="h-full flex items-center justify-center text-gray-400 animate-pulse text-xs italic">Consultando actividad...</div>
|
||||
) : selectedCashierLogs.length === 0 ? (
|
||||
<div className="h-full flex items-center justify-center text-gray-400 text-xs italic">Sin actividad registrada</div>
|
||||
) : (
|
||||
selectedCashierLogs.map(log => (
|
||||
<div key={log.id} className="relative pl-6 pb-4 border-l border-gray-100 last:pb-0">
|
||||
<div className="absolute left-[-7px] top-1 bg-white p-0.5">
|
||||
{getAuditIcon(log.action)}
|
||||
</div>
|
||||
<div className="text-[11px] font-bold text-gray-700 flex justify-between">
|
||||
<span>{log.action}</span>
|
||||
<span className="font-normal text-gray-400 font-mono">
|
||||
{new Date(log.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-500 mt-0.5 line-clamp-2 leading-relaxed">{log.details}</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center space-y-4 p-6">
|
||||
<div className="p-4 bg-blue-50 rounded-full text-blue-600"><PieIcon size={32} /></div>
|
||||
<div>
|
||||
<h4 className="font-bold text-gray-700">Mi Puesto</h4>
|
||||
<p className="text-xs text-gray-400">Visualizando tus métricas de hoy.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TABLA DE ÚLTIMOS MOVIMIENTOS */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||||
<div className="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
|
||||
<h3 className="font-bold text-gray-700">
|
||||
{role === 'Admin' ? (selectedCashier ? `Cargas de ${selectedCashier.name}` : 'Últimos Avisos Procesados') : 'Mis Últimas Cargas'}
|
||||
</h3>
|
||||
<a href="/listings" className="text-sm text-blue-600 font-semibold hover:underline">Ver todo</a>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse text-sm">
|
||||
<thead className="text-xs font-bold text-gray-400 uppercase tracking-wider bg-gray-50/50">
|
||||
<tr>
|
||||
<th className="p-4 border-b border-gray-100">Fecha / Hora</th>
|
||||
<th className="p-4 border-b border-gray-100">Rubro / Título</th>
|
||||
<th className="p-4 border-b border-gray-100">Monto (Fee)</th>
|
||||
<th className="p-4 border-b border-gray-100">Estado</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{recentTransactions.map(t => (
|
||||
<tr key={t.id} className="hover:bg-gray-50/80 transition-colors">
|
||||
<td className="p-4 text-gray-500 font-medium">
|
||||
<div>{new Date(t.createdAt).toLocaleDateString()}</div>
|
||||
<div className="text-[10px] opacity-60 font-mono">{new Date(t.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="font-bold text-gray-700">{t.title}</div>
|
||||
<div className="text-[11px] text-gray-400 uppercase tracking-tighter">{t.categoryName || 'General'}</div>
|
||||
</td>
|
||||
<td className="p-4 font-black text-blue-600">${t.adFee?.toLocaleString() || "0"}</td>
|
||||
<td className="p-4">
|
||||
<span className={`flex items-center gap-1.5 font-bold ${t.status === 'Published' ? 'text-green-600' : 'text-orange-500'}`}>
|
||||
<div className={`w-1.5 h-1.5 rounded-full ${t.status === 'Published' ? 'bg-green-600' : 'bg-orange-500'}`}></div>
|
||||
{t.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{recentTransactions.length === 0 && (
|
||||
<tr><td colSpan={4} className="p-8 text-center text-gray-400 italic">No hay transacciones para mostrar.</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function KpiCard({ title, value, trend, icon, color, progress }: any) {
|
||||
return (
|
||||
<div className="bg-white p-5 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all group">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className={`p-2.5 rounded-lg transition-colors ${color}`}>{icon}</div>
|
||||
<div className="text-[10px] font-black px-2 py-1 rounded-full uppercase bg-gray-100 text-gray-500 group-hover:bg-gray-200 transition-colors">
|
||||
{trend}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs font-bold text-gray-400 uppercase tracking-wider">{title}</p>
|
||||
<h4 className="text-2xl font-black text-gray-800 mt-1">{value}</h4>
|
||||
{progress !== undefined && (
|
||||
<div className="mt-4 w-full bg-gray-100 rounded-full h-2">
|
||||
<div className={`h-2 rounded-full transition-all duration-700 ${progress > 90 ? 'bg-red-500' : 'bg-orange-500'}`} style={{ width: `${progress}%` }}></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
174
frontend/admin-panel/src/pages/Listings/ListingExplorer.tsx
Normal file
174
frontend/admin-panel/src/pages/Listings/ListingExplorer.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '../../services/api';
|
||||
import ListingDetailModal from '../../components/Listings/ListingDetailModal';
|
||||
import { listingService } from '../../services/listingService';
|
||||
import { Search, ExternalLink, Calendar, Tag, User as UserIcon } from 'lucide-react';
|
||||
|
||||
export default function ListingExplorer() {
|
||||
const [listings, setListings] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [query, setQuery] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState("");
|
||||
const [selectedDetail, setSelectedDetail] = useState<any>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const handleOpenDetail = async (id: number) => {
|
||||
const detail = await listingService.getById(id);
|
||||
setSelectedDetail(detail);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const loadListings = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Usamos el endpoint de búsqueda que ya tiene el backend
|
||||
const res = await api.get('/listings', {
|
||||
params: { q: query }
|
||||
});
|
||||
|
||||
let data = res.data;
|
||||
if (statusFilter) {
|
||||
data = data.filter((l: any) => l.status === statusFilter);
|
||||
}
|
||||
|
||||
setListings(data);
|
||||
} catch (error) {
|
||||
console.error("Error cargando avisos:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadListings();
|
||||
}, [statusFilter]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center text-gray-800">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Explorador de Avisos</h2>
|
||||
<p className="text-sm text-gray-500">Gestión y búsqueda histórica de publicaciones</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BARRA DE HERRAMIENTAS */}
|
||||
<div className="bg-white p-4 rounded-xl border shadow-sm flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-3 text-gray-400" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar por título, contenido o ID..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && loadListings()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="border border-gray-200 rounded-lg px-4 py-2 text-sm font-medium text-gray-600 outline-none"
|
||||
>
|
||||
<option value="">Todos los estados</option>
|
||||
<option value="Published">Publicados</option>
|
||||
<option value="Pending">Pendientes</option>
|
||||
<option value="Rejected">Rechazados</option>
|
||||
<option value="Draft">Borradores</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
onClick={loadListings}
|
||||
className="bg-gray-900 text-white px-6 py-2 rounded-lg font-bold hover:bg-gray-800 transition shadow-md"
|
||||
>
|
||||
BUSCAR
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RESULTADOS */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-50 text-gray-400 text-xs uppercase font-bold tracking-wider">
|
||||
<tr>
|
||||
<th className="p-4 border-b">ID</th>
|
||||
<th className="p-4 border-b">Aviso / Título</th>
|
||||
<th className="p-4 border-b">Ingreso (Aviso)</th>
|
||||
<th className="p-4 border-b">Valor Producto</th>
|
||||
<th className="p-4 border-b">Creado</th>
|
||||
<th className="p-4 border-b">Vía</th>
|
||||
<th className="p-4 border-b text-center">Estado</th>
|
||||
<th className="p-4 border-b text-right">Detalles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100 text-sm">
|
||||
{loading ? (
|
||||
<tr><td colSpan={7} className="p-10 text-center text-gray-400">Buscando en la base de datos...</td></tr>
|
||||
) : listings.length === 0 ? (
|
||||
<tr><td colSpan={7} className="p-10 text-center text-gray-400 italic">No se encontraron avisos con esos criterios.</td></tr>
|
||||
) : (
|
||||
listings.map((l) => (
|
||||
<tr key={l.id} className="hover:bg-gray-50 transition-colors group">
|
||||
<td className="p-4 font-mono text-gray-400">#{l.id}</td>
|
||||
<td className="p-4">
|
||||
<div className="font-bold text-gray-800 group-hover:text-blue-600 transition-colors">{l.title}</div>
|
||||
<div className="text-xs text-gray-400 flex items-center gap-1 mt-0.5">
|
||||
<Tag size={12} /> {l.categoryName || 'Sin Rubro'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="font-bold text-green-700">
|
||||
${l.adFee?.toLocaleString() ?? "0"}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-gray-500 text-xs">${l.price?.toLocaleString()}</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-gray-600 flex items-center gap-1.5">
|
||||
<Calendar size={14} className="text-gray-300" />
|
||||
{new Date(l.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-black uppercase ${l.userId === null ? 'bg-blue-50 text-blue-600' : 'bg-green-50 text-green-600'
|
||||
}`}>
|
||||
<UserIcon size={10} />
|
||||
{l.userId === null ? 'Web' : 'Mostrador'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
<span className={`px-2 py-1 rounded-full text-[10px] font-bold uppercase border ${l.status === 'Published' ? 'bg-green-50 text-green-700 border-green-200' :
|
||||
l.status === 'Pending' ? 'bg-yellow-50 text-yellow-700 border-yellow-200' :
|
||||
'bg-gray-50 text-gray-600 border-gray-200'
|
||||
}`}>
|
||||
{l.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="p-4 text-right">
|
||||
<button
|
||||
onClick={() => handleOpenDetail(l.id)}
|
||||
className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all"
|
||||
title="Ver Detalles"
|
||||
>
|
||||
<ExternalLink size={18} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<ListingDetailModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
detail={selectedDetail}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
130
frontend/admin-panel/src/pages/Moderation/ModerationPage.tsx
Normal file
130
frontend/admin-panel/src/pages/Moderation/ModerationPage.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '../../services/api';
|
||||
import { Check, X, Printer, Globe, MessageSquare } from 'lucide-react';
|
||||
|
||||
interface Listing {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
price: number;
|
||||
currency: string;
|
||||
createdAt: string;
|
||||
status: string;
|
||||
printText: string;
|
||||
isBold: boolean;
|
||||
isFrame: boolean;
|
||||
printDaysCount: number;
|
||||
}
|
||||
|
||||
export default function ModerationPage() {
|
||||
const [listings, setListings] = useState<Listing[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => { loadPending(); }, []);
|
||||
|
||||
const loadPending = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Este endpoint ya lo tenemos en el ListingsController que hicimos al inicio
|
||||
const res = await api.get('/listings/pending');
|
||||
setListings(res.data);
|
||||
} catch (error) { console.error(error); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
|
||||
const handleAction = async (id: number, action: 'Published' | 'Rejected') => {
|
||||
try {
|
||||
await api.put(`/listings/${id}/status`, JSON.stringify(action), {
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
setListings(listings.filter(l => l.id !== id));
|
||||
} catch (e) { alert("Error al procesar el aviso"); }
|
||||
};
|
||||
|
||||
if (loading) return <div className="p-10 text-center text-gray-500">Cargando avisos para revisar...</div>;
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-800">Panel de Moderación</h2>
|
||||
<p className="text-gray-500">Revisión de avisos entrantes para Web y Diario Papel</p>
|
||||
</div>
|
||||
|
||||
{listings.length === 0 ? (
|
||||
<div className="bg-white p-12 rounded-xl border-2 border-dashed text-center">
|
||||
<Check className="mx-auto text-green-500 mb-4" size={48} />
|
||||
<h3 className="text-lg font-bold text-gray-700">¡Bandeja vacía!</h3>
|
||||
<p className="text-gray-500">No hay avisos pendientes de moderación en este momento.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{listings.map(listing => (
|
||||
<div key={listing.id} className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col md:flex-row">
|
||||
|
||||
{/* Info del Aviso */}
|
||||
<div className="flex-1 p-6">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<span className="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded uppercase tracking-wider">
|
||||
ID: #{listing.id}
|
||||
</span>
|
||||
<h3 className="text-xl font-bold text-gray-900 mt-1">{listing.title}</h3>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-lg font-black text-gray-900">{listing.currency} ${listing.price.toLocaleString()}</p>
|
||||
<p className="text-xs text-gray-400">{new Date(listing.createdAt).toLocaleString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Versión Web */}
|
||||
<div className="bg-gray-50 p-4 rounded-lg border border-gray-100">
|
||||
<div className="flex items-center gap-2 mb-2 text-gray-700 font-bold text-sm">
|
||||
<Globe size={16} /> VERSIÓN WEB / MOBILE
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 italic line-clamp-3">"{listing.description}"</p>
|
||||
</div>
|
||||
|
||||
{/* Versión Impresa - CRÍTICO */}
|
||||
<div className={`p-4 rounded-lg border-2 ${listing.isFrame ? 'border-black' : 'border-gray-200'} bg-white`}>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2 text-gray-700 font-bold text-sm">
|
||||
<Printer size={16} /> VERSIÓN IMPRESA
|
||||
</div>
|
||||
<span className="text-[10px] bg-gray-100 px-2 py-0.5 rounded font-bold">
|
||||
{listing.printDaysCount} DÍAS
|
||||
</span>
|
||||
</div>
|
||||
<div className={`text-sm p-2 bg-gray-50 rounded border border-dashed border-gray-300 ${listing.isBold ? 'font-bold' : ''}`}>
|
||||
{listing.printText || "Sin texto de impresión definido"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Acciones Laterales */}
|
||||
<div className="bg-gray-50 border-t md:border-t-0 md:border-l border-gray-200 p-6 flex flex-row md:flex-col gap-3 justify-center min-w-[200px]">
|
||||
<button
|
||||
onClick={() => handleAction(listing.id, 'Published')}
|
||||
className="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition shadow-sm"
|
||||
>
|
||||
<Check size={20} /> APROBAR
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAction(listing.id, 'Rejected')}
|
||||
className="flex-1 bg-white hover:bg-red-50 text-red-600 border border-red-200 font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition"
|
||||
>
|
||||
<X size={20} /> RECHAZAR
|
||||
</button>
|
||||
<button className="p-3 text-gray-400 hover:text-gray-600 flex items-center justify-center gap-2 text-xs font-medium">
|
||||
<MessageSquare size={16} /> Enviar Nota
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '../../services/api';
|
||||
import { Save, DollarSign } from 'lucide-react';
|
||||
import { Save, DollarSign, FileText, Type, AlertCircle } from 'lucide-react';
|
||||
import { processCategories, type FlatCategory } from '../../utils/categoryTreeUtils';
|
||||
|
||||
interface PricingConfig {
|
||||
basePrice: number;
|
||||
@@ -12,129 +13,202 @@ interface PricingConfig {
|
||||
frameSurcharge: number;
|
||||
}
|
||||
|
||||
interface Category { id: number; name: string; }
|
||||
|
||||
export default function PricingManager() {
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [flatCategories, setFlatCategories] = useState<FlatCategory[]>([]);
|
||||
const [selectedCat, setSelectedCat] = useState<number | null>(null);
|
||||
const [config, setConfig] = useState<PricingConfig>({
|
||||
|
||||
// Configuración por defecto
|
||||
const defaultConfig: PricingConfig = {
|
||||
basePrice: 0, baseWordCount: 15, extraWordPrice: 0,
|
||||
specialChars: '!', specialCharPrice: 0, boldSurcharge: 0, frameSurcharge: 0
|
||||
});
|
||||
};
|
||||
|
||||
const [config, setConfig] = useState<PricingConfig>(defaultConfig);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Cargar categorías
|
||||
api.get('/categories').then(res => setCategories(res.data));
|
||||
// Cargar categorías y procesar árbol
|
||||
api.get('/categories').then(res => {
|
||||
const processed = processCategories(res.data);
|
||||
setFlatCategories(processed);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedCat) {
|
||||
setLoading(true);
|
||||
// Cargar config existente
|
||||
api.get(`/pricing/${selectedCat}`).then(res => {
|
||||
if (res.data) setConfig(res.data);
|
||||
else setConfig({ // Default si no existe
|
||||
basePrice: 0, baseWordCount: 15, extraWordPrice: 0,
|
||||
specialChars: '!', specialCharPrice: 0, boldSurcharge: 0, frameSurcharge: 0
|
||||
});
|
||||
});
|
||||
api.get(`/pricing/${selectedCat}`)
|
||||
.then(res => {
|
||||
if (res.data) setConfig(res.data);
|
||||
else setConfig(defaultConfig); // Reset si es nuevo
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
}, [selectedCat]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!selectedCat) return;
|
||||
setLoading(true);
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.post('/pricing', { ...config, categoryId: selectedCat });
|
||||
alert('Configuración guardada correctamente.');
|
||||
} catch (e) {
|
||||
alert('Error al guardar.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Helper para el nombre del rubro seleccionado
|
||||
const selectedCatName = flatCategories.find(c => c.id === selectedCat)?.path;
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-2xl font-bold mb-6 flex items-center gap-2 text-gray-800">
|
||||
<DollarSign className="text-green-600" />
|
||||
Gestor de Tarifas y Reglas
|
||||
</h2>
|
||||
|
||||
<div className="bg-white p-6 rounded shadow mb-6">
|
||||
<label className="block text-sm font-medium mb-2">Seleccionar Rubro a Configurar</label>
|
||||
<select
|
||||
className="w-full border p-2 rounded"
|
||||
onChange={e => setSelectedCat(Number(e.target.value))}
|
||||
value={selectedCat || ''}
|
||||
>
|
||||
<option value="">-- Seleccione --</option>
|
||||
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
{/* SELECTOR DE RUBRO */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
|
||||
<label className="block text-sm font-bold text-gray-700 mb-2">Seleccionar Rubro a Configurar</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
className="w-full border border-gray-300 p-3 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none font-medium appearance-none bg-white"
|
||||
onChange={e => setSelectedCat(Number(e.target.value) || null)}
|
||||
value={selectedCat || ''}
|
||||
>
|
||||
<option value="">-- Seleccione un Rubro --</option>
|
||||
{flatCategories.map(cat => (
|
||||
<option
|
||||
key={cat.id}
|
||||
value={cat.id}
|
||||
disabled={!cat.isSelectable} // Bloqueamos padres para forzar config en hojas
|
||||
className={cat.isSelectable ? "text-gray-900 font-medium" : "text-gray-400 font-bold bg-gray-50"}
|
||||
>
|
||||
{'\u00A0\u00A0'.repeat(cat.level)}
|
||||
{cat.hasChildren ? `📂 ${cat.name}` : `↳ ${cat.name}`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{/* Flecha custom para estilo */}
|
||||
<div className="absolute right-4 top-3.5 pointer-events-none text-gray-500">▼</div>
|
||||
</div>
|
||||
|
||||
{selectedCat && (
|
||||
<p className="mt-2 text-sm text-blue-600 bg-blue-50 p-2 rounded inline-block">
|
||||
Editando: <strong>{selectedCatName}</strong>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedCat && (
|
||||
<div className="bg-white p-6 rounded shadow border border-gray-200">
|
||||
<h3 className="font-bold text-lg mb-4 border-b pb-2">Reglas de Precio</h3>
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* Tarifa Base */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold text-blue-600">Base</h4>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Precio Mínimo ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.basePrice} onChange={e => setConfig({ ...config, basePrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Palabras Incluidas (Cant.)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.baseWordCount} onChange={e => setConfig({ ...config, baseWordCount: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Costo Palabra Extra ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.extraWordPrice} onChange={e => setConfig({ ...config, extraWordPrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
{/* Extras y Estilos */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold text-purple-600">Extras y Recargos</h4>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Caracteres Especiales (ej: !$%)</label>
|
||||
<input type="text" className="border p-2 rounded w-full"
|
||||
value={config.specialChars} onChange={e => setConfig({ ...config, specialChars: e.target.value })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Costo por Caracter Especial ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.specialCharPrice} onChange={e => setConfig({ ...config, specialCharPrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{/* TARIFA BASE */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<h3 className="font-bold text-lg mb-4 pb-2 border-b border-gray-100 flex items-center gap-2 text-gray-800">
|
||||
<FileText size={20} className="text-blue-500" /> Tarifa Base (Texto)
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Recargo Negrita ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.boldSurcharge} onChange={e => setConfig({ ...config, boldSurcharge: parseFloat(e.target.value) })} />
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Precio Mínimo ($)</label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-3 top-2 text-gray-500">$</span>
|
||||
<input type="number" className="pl-6 border p-2 rounded w-full focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={config.basePrice} onChange={e => setConfig({ ...config, basePrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">Costo por el aviso básico por día.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600">Recargo Recuadro ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full"
|
||||
value={config.frameSurcharge} onChange={e => setConfig({ ...config, frameSurcharge: parseFloat(e.target.value) })} />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Palabras Incluidas</label>
|
||||
<input type="number" className="border p-2 rounded w-full focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={config.baseWordCount} onChange={e => setConfig({ ...config, baseWordCount: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Costo Palabra Extra ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={config.extraWordPrice} onChange={e => setConfig({ ...config, extraWordPrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CONTENIDO ESPECIAL */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<h3 className="font-bold text-lg mb-4 pb-2 border-b border-gray-100 flex items-center gap-2 text-gray-800">
|
||||
<AlertCircle size={20} className="text-orange-500" /> Caracteres Especiales
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Caracteres a cobrar (ej: !$%)</label>
|
||||
<input type="text" className="border p-2 rounded w-full font-mono tracking-widest focus:ring-2 focus:ring-orange-500 outline-none"
|
||||
value={config.specialChars} onChange={e => setConfig({ ...config, specialChars: e.target.value })} />
|
||||
<p className="text-xs text-gray-400 mt-1">Cada uno de estos símbolos se cobrará aparte.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Costo por Símbolo ($)</label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-3 top-2 text-gray-500">$</span>
|
||||
<input type="number" className="pl-6 border p-2 rounded w-full focus:ring-2 focus:ring-orange-500 outline-none"
|
||||
value={config.specialCharPrice} onChange={e => setConfig({ ...config, specialCharPrice: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ESTILOS VISUALES */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 lg:col-span-2">
|
||||
<h3 className="font-bold text-lg mb-4 pb-2 border-b border-gray-100 flex items-center gap-2 text-gray-800">
|
||||
<Type size={20} className="text-purple-500" /> Estilos Visuales (Recargos)
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="flex items-center gap-4 bg-gray-50 p-4 rounded border border-gray-200">
|
||||
<div className="font-bold text-xl px-3 py-1 border-2 border-transparent bg-white shadow-sm">N</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Recargo Negrita ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full focus:ring-2 focus:ring-purple-500 outline-none"
|
||||
value={config.boldSurcharge} onChange={e => setConfig({ ...config, boldSurcharge: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 bg-gray-50 p-4 rounded border border-gray-200">
|
||||
<div className="font-bold text-xl px-3 py-1 border-2 border-black bg-white shadow-sm">A</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">Recargo Recuadro ($)</label>
|
||||
<input type="number" className="border p-2 rounded w-full focus:ring-2 focus:ring-purple-500 outline-none"
|
||||
value={config.frameSurcharge} onChange={e => setConfig({ ...config, frameSurcharge: parseFloat(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex justify-end">
|
||||
{/* BARRA DE ACCIÓN FLOTANTE */}
|
||||
<div className="sticky bottom-4 bg-gray-900 text-white p-4 rounded-lg shadow-lg flex justify-between items-center z-10">
|
||||
<div className="text-sm">
|
||||
Configurando tarifas para: <span className="font-bold text-green-400">{selectedCatName}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 flex items-center gap-2"
|
||||
disabled={saving}
|
||||
className="bg-green-600 text-white px-8 py-2 rounded font-bold hover:bg-green-500 disabled:opacity-50 transition flex items-center gap-2"
|
||||
>
|
||||
<Save size={18} /> Guardar Configuración
|
||||
<Save size={20} /> {saving ? 'Guardando...' : 'GUARDAR CAMBIOS'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
105
frontend/admin-panel/src/pages/Reports/SalesByCategory.tsx
Normal file
105
frontend/admin-panel/src/pages/Reports/SalesByCategory.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { reportService, type CategorySales } from '../../services/reportService';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';
|
||||
import { LayoutGrid, Calendar, ArrowRight } from 'lucide-react';
|
||||
|
||||
const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];
|
||||
|
||||
export default function SalesByCategory() {
|
||||
const [data, setData] = useState<CategorySales[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await reportService.getSalesByCategory();
|
||||
setData(res);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<LayoutGrid className="text-blue-600" />
|
||||
Rendimiento por Rubro
|
||||
</h2>
|
||||
<div className="flex gap-2 items-center bg-white p-2 rounded-lg border text-sm">
|
||||
<Calendar size={16} className="text-gray-400" />
|
||||
<span className="text-gray-600">Últimos 30 días</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Gráfico de Barras */}
|
||||
<div className="lg:col-span-2 bg-white p-6 rounded-xl border shadow-sm">
|
||||
<h3 className="font-bold text-gray-700 mb-6">Ingresos Totales por Rubro (Consolidado)</h3>
|
||||
<div className="h-80">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={data} layout="vertical" margin={{ left: 30, right: 30 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#F3F4F6" />
|
||||
<XAxis type="number" hide />
|
||||
<YAxis
|
||||
dataKey="categoryName"
|
||||
type="category"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
width={100}
|
||||
tick={{ fill: '#4B5563', fontSize: 12, fontWeight: 600 }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number | undefined) => value ? [`$${value.toLocaleString()}`, 'Ventas'] : ['-', 'Ventas']}
|
||||
cursor={{ fill: '#F9FAFB' }}
|
||||
/>
|
||||
<Bar dataKey="totalSales" radius={[0, 4, 4, 0]} barSize={30}>
|
||||
{data.map((_, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resumen Lateral */}
|
||||
<div className="bg-white p-6 rounded-xl border shadow-sm flex flex-col">
|
||||
<h3 className="font-bold text-gray-700 mb-4">Top Participación</h3>
|
||||
<div className="space-y-4 flex-1">
|
||||
{data.map((item, index) => (
|
||||
<div key={item.categoryId} className="group cursor-default">
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="font-medium text-gray-600">{item.categoryName}</span>
|
||||
<span className="font-bold text-gray-900">{item.percentage}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-100 rounded-full h-2">
|
||||
<div
|
||||
className="h-2 rounded-full transition-all duration-500"
|
||||
style={{
|
||||
width: `${item.percentage}%`,
|
||||
backgroundColor: COLORS[index % COLORS.length]
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div className="flex justify-between mt-1">
|
||||
<span className="text-[10px] text-gray-400 uppercase">{item.adCount} avisos</span>
|
||||
<span className="text-[10px] font-bold text-gray-500">${item.totalSales.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="mt-6 w-full py-2 bg-gray-50 text-gray-600 text-xs font-bold rounded-lg border border-gray-100 hover:bg-gray-100 flex items-center justify-center gap-2">
|
||||
DESCARGAR DETALLE <ArrowRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL, // Usa la variable de entorno
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
});
|
||||
|
||||
// 1. Interceptor de Solicitud (Request): Pega el token antes de salir
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
@@ -12,4 +13,30 @@ api.interceptors.request.use((config) => {
|
||||
return config;
|
||||
});
|
||||
|
||||
// 2. Interceptor de Respuesta (Response): Atrapa errores al volver
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
// Si la respuesta es exitosa (200-299), la dejamos pasar
|
||||
return response;
|
||||
},
|
||||
(error) => {
|
||||
// Si hay un error de respuesta
|
||||
if (error.response && error.response.status === 401) {
|
||||
console.warn("Sesión expirada o no autorizada. Redirigiendo al login...");
|
||||
|
||||
// Borramos el token vencido/inválido
|
||||
localStorage.removeItem('token');
|
||||
|
||||
// Forzamos la redirección al Login
|
||||
// Usamos window.location.href para asegurar una recarga limpia fuera del Router de React si es necesario
|
||||
if (window.location.pathname !== '/login') {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
}
|
||||
|
||||
// Rechazamos la promesa para que el componente sepa que hubo error (si necesita mostrar alerta)
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
12
frontend/admin-panel/src/services/clientService.ts
Normal file
12
frontend/admin-panel/src/services/clientService.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import api from './api';
|
||||
|
||||
export const clientService = {
|
||||
getAll: async () => {
|
||||
const res = await api.get('/clients');
|
||||
return res.data;
|
||||
},
|
||||
getHistory: async (id: number) => {
|
||||
const res = await api.get(`/clients/${id}/history`);
|
||||
return res.data;
|
||||
}
|
||||
};
|
||||
19
frontend/admin-panel/src/services/dashboardService.ts
Normal file
19
frontend/admin-panel/src/services/dashboardService.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import api from './api';
|
||||
|
||||
export interface DashboardData {
|
||||
revenueToday: number;
|
||||
adsToday: number;
|
||||
ticketAverage: number;
|
||||
paperOccupation: number;
|
||||
weeklyTrend: { day: string; amount: number }[];
|
||||
channelMix: { name: string; value: number }[];
|
||||
}
|
||||
|
||||
export const dashboardService = {
|
||||
getStats: async (from?: string, to?: string): Promise<DashboardData> => {
|
||||
const response = await api.get<DashboardData>('/reports/dashboard', {
|
||||
params: { from, to }
|
||||
});
|
||||
return response.data;
|
||||
}
|
||||
};
|
||||
12
frontend/admin-panel/src/services/listingService.ts
Normal file
12
frontend/admin-panel/src/services/listingService.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import api from './api';
|
||||
|
||||
export const listingService = {
|
||||
getPendingCount: async (): Promise<number> => {
|
||||
const response = await api.get<number>('/listings/pending/count');
|
||||
return response.data;
|
||||
},
|
||||
getById: async (id: number) => {
|
||||
const res = await api.get(`/listings/${id}`);
|
||||
return res.data;
|
||||
},
|
||||
};
|
||||
32
frontend/admin-panel/src/services/reportService.ts
Normal file
32
frontend/admin-panel/src/services/reportService.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import api from './api';
|
||||
|
||||
export interface CategorySales {
|
||||
categoryId: number;
|
||||
categoryName: string;
|
||||
totalSales: number;
|
||||
adCount: number;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
export const reportService = {
|
||||
getSalesByCategory: async (from?: string, to?: string): Promise<CategorySales[]> => {
|
||||
const response = await api.get<CategorySales[]>('/reports/sales-by-category', {
|
||||
params: { from, to }
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
exportCierre: async (from: string, to: string, userId?: number) => {
|
||||
const response = await api.get(`/reports/export-cierre`, {
|
||||
params: { from, to, userId },
|
||||
responseType: 'blob'
|
||||
});
|
||||
|
||||
const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', userId ? `Caja_Cajero_${userId}.pdf` : `Cierre_Global.pdf`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
}
|
||||
};
|
||||
@@ -2,20 +2,36 @@ import { create } from 'zustand';
|
||||
|
||||
interface AuthState {
|
||||
token: string | null;
|
||||
role: string | null;
|
||||
isAuthenticated: boolean;
|
||||
setToken: (token: string) => void;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
// Helper para decodificar el JWT sin librerías externas
|
||||
const parseJwt = (token: string) => {
|
||||
try {
|
||||
return JSON.parse(atob(token.split('.')[1]));
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const useAuthStore = create<AuthState>((set) => ({
|
||||
token: localStorage.getItem('token'),
|
||||
role: localStorage.getItem('role'),
|
||||
isAuthenticated: !!localStorage.getItem('token'),
|
||||
setToken: (token: string) => {
|
||||
const payload = parseJwt(token);
|
||||
const role = payload["http://schemas.microsoft.com/ws/2008/06/identity/claims/role"];
|
||||
|
||||
localStorage.setItem('token', token);
|
||||
set({ token, isAuthenticated: true });
|
||||
localStorage.setItem('role', role);
|
||||
set({ token, role, isAuthenticated: true });
|
||||
},
|
||||
logout: () => {
|
||||
localStorage.removeItem('token');
|
||||
set({ token: null, isAuthenticated: false });
|
||||
localStorage.removeItem('role');
|
||||
set({ token: null, role: null, isAuthenticated: false });
|
||||
},
|
||||
}));
|
||||
}));
|
||||
75
frontend/admin-panel/src/utils/categoryTreeUtils.ts
Normal file
75
frontend/admin-panel/src/utils/categoryTreeUtils.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
import { type Category } from '../types/Category';
|
||||
|
||||
export interface FlatCategory {
|
||||
id: number;
|
||||
name: string;
|
||||
level: number;
|
||||
parentId: number | null;
|
||||
path: string;
|
||||
isSelectable: boolean; // True si no tiene hijos
|
||||
hasChildren: boolean;
|
||||
}
|
||||
|
||||
interface CategoryNode extends Category {
|
||||
children: CategoryNode[];
|
||||
}
|
||||
|
||||
export const buildTree = (categories: Category[]): CategoryNode[] => {
|
||||
const map = new Map<number, CategoryNode>();
|
||||
const roots: CategoryNode[] = [];
|
||||
|
||||
// 1. Inicializar nodos
|
||||
categories.forEach(cat => {
|
||||
// @ts-ignore
|
||||
map.set(cat.id, { ...cat, children: [] });
|
||||
});
|
||||
|
||||
// 2. Construir relaciones
|
||||
categories.forEach(cat => {
|
||||
const node = map.get(cat.id);
|
||||
if (node) {
|
||||
if (cat.parentId && map.has(cat.parentId)) {
|
||||
map.get(cat.parentId)!.children.push(node);
|
||||
} else {
|
||||
roots.push(node);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return roots;
|
||||
};
|
||||
|
||||
export const flattenCategoriesForSelect = (
|
||||
nodes: CategoryNode[],
|
||||
level = 0,
|
||||
parentPath = ""
|
||||
): FlatCategory[] => {
|
||||
let result: FlatCategory[] = [];
|
||||
const sortedNodes = [...nodes].sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
for (const node of sortedNodes) {
|
||||
const currentPath = parentPath ? `${parentPath} > ${node.name}` : node.name;
|
||||
const hasChildren = node.children && node.children.length > 0;
|
||||
|
||||
result.push({
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
level: level,
|
||||
parentId: node.parentId || null,
|
||||
path: currentPath,
|
||||
hasChildren: hasChildren,
|
||||
isSelectable: !hasChildren
|
||||
});
|
||||
|
||||
if (hasChildren) {
|
||||
const childrenFlat = flattenCategoriesForSelect(node.children, level + 1, currentPath);
|
||||
result = [...result, ...childrenFlat];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const processCategories = (rawCategories: Category[]): FlatCategory[] => {
|
||||
const tree = buildTree(rawCategories);
|
||||
return flattenCategoriesForSelect(tree);
|
||||
};
|
||||
@@ -1,13 +1,22 @@
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
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 LoginPage from './pages/LoginPage';
|
||||
|
||||
// Componente simple de protección
|
||||
const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
|
||||
const token = localStorage.getItem('token');
|
||||
return token ? <>{children}</> : <Navigate to="/login" />;
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route element={<CounterLayout />}>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
|
||||
<Route element={<PrivateRoute><CounterLayout /></PrivateRoute>}>
|
||||
<Route path="/" element={<FastEntryPage />} />
|
||||
<Route path="/cash-register" element={<CashRegisterPage />} />
|
||||
</Route>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -6,11 +6,16 @@ export default function CounterLayout() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const handleLogout = () => {
|
||||
if (confirm('¿Cerrar sesión de caja?')) {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
navigate('/login');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Evitar conflictos si el usuario está escribiendo en un input,
|
||||
// excepto para F-Keys que suelen ser globales
|
||||
|
||||
switch (e.key) {
|
||||
case 'F2':
|
||||
e.preventDefault();
|
||||
@@ -20,8 +25,13 @@ export default function CounterLayout() {
|
||||
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':
|
||||
// Lógica para cancelar o volver
|
||||
// Opcional: Cancelar o Logout rápido
|
||||
break;
|
||||
}
|
||||
};
|
||||
@@ -32,7 +42,7 @@ export default function CounterLayout() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-gray-100">
|
||||
{/* Header tipo Sistema Legacy pero moderno */}
|
||||
{/* 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">
|
||||
@@ -45,7 +55,11 @@ export default function CounterLayout() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="text-red-400 hover:text-red-300 flex items-center gap-1 text-sm font-bold">
|
||||
{/* 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>
|
||||
@@ -57,10 +71,18 @@ export default function CounterLayout() {
|
||||
|
||||
{/* 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">
|
||||
<ShortcutKey k="F2" label="Nuevo Aviso" active={location.pathname === '/'} />
|
||||
<ShortcutKey k="F4" label="Caja Diaria" active={location.pathname === '/cash-register'} />
|
||||
<ShortcutKey k="F10" label="Cobrar/Imprimir" />
|
||||
<ShortcutKey k="ESC" label="Cancelar" />
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -1,38 +1,126 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { cashRegisterService } from '../services/cashRegisterService';
|
||||
import { Printer, Download, Clock, CheckCircle, RefreshCw } from 'lucide-react';
|
||||
|
||||
export default function CashRegisterPage() {
|
||||
const [data, setData] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await cashRegisterService.getDailyStatus();
|
||||
setData(result);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
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");
|
||||
}
|
||||
};
|
||||
|
||||
if (loading && !data) return <div className="p-10 text-center text-gray-500">Sincronizando caja...</div>;
|
||||
|
||||
return (
|
||||
<div className="p-6 w-full">
|
||||
<h2 className="text-2xl font-bold text-slate-800 mb-6">Caja Diaria</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-white p-6 rounded shadow border-l-4 border-green-500">
|
||||
<div className="text-gray-500 text-sm font-bold uppercase">Total Efectivo</div>
|
||||
<div className="text-3xl font-mono mt-2">$ 15,400.00</div>
|
||||
<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="bg-white p-6 rounded shadow border-l-4 border-blue-500">
|
||||
<div className="text-gray-500 text-sm font-bold uppercase">Avisos Cobrados</div>
|
||||
<div className="text-3xl font-mono mt-2">12</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' : ''} />
|
||||
</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"
|
||||
>
|
||||
<Printer size={20} /> FINALIZAR Y CERRAR (F4)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded shadow overflow-hidden">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-gray-50 border-b">
|
||||
<tr>
|
||||
<th className="p-3">Hora</th>
|
||||
<th className="p-3">Concepto</th>
|
||||
<th className="p-3">Usuario</th>
|
||||
<th className="p-3 text-right">Monto</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b">
|
||||
<td className="p-3 font-mono">09:15</td>
|
||||
<td className="p-3">Aviso Automotores x3 días</td>
|
||||
<td className="p-3">cajero1</td>
|
||||
<td className="p-3 text-right font-mono">$ 4,500.00</td>
|
||||
</tr>
|
||||
{/* Más filas mock */}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* 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>
|
||||
</div>
|
||||
<div className="p-4 bg-green-50 rounded-full text-green-600">
|
||||
<Download size={32} />
|
||||
</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>
|
||||
</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
|
||||
</div>
|
||||
<div className="overflow-y-auto flex-1">
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,45 +1,37 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import api from '../services/api';
|
||||
import { useDebounce } from '../hooks/useDebounce';
|
||||
import { processCategories, type FlatCategory } from '../utils/categoryTreeUtils';
|
||||
import {
|
||||
Printer, Save, CheckSquare, Square, Tag,
|
||||
Printer, Save,
|
||||
AlignLeft, AlignCenter, AlignRight, AlignJustify,
|
||||
Type
|
||||
Type, Search, ChevronDown, Bold, Square as FrameIcon
|
||||
} from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
interface Category { id: number; name: string; }
|
||||
// Interfaces
|
||||
interface Operation { id: number; name: string; }
|
||||
|
||||
interface Client { id: number; name: string; dniOrCuit: string; }
|
||||
interface PricingResult {
|
||||
totalPrice: number;
|
||||
baseCost: number;
|
||||
extraCost: number;
|
||||
surcharges: number;
|
||||
discount: number;
|
||||
wordCount: number;
|
||||
specialCharCount: number;
|
||||
details: string;
|
||||
appliedPromotion: string;
|
||||
totalPrice: number; baseCost: number; extraCost: number;
|
||||
surcharges: number; discount: number; wordCount: number;
|
||||
specialCharCount: number; details: string; appliedPromotion: string;
|
||||
}
|
||||
|
||||
export default function FastEntryPage() {
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [flatCategories, setFlatCategories] = useState<FlatCategory[]>([]);
|
||||
const [operations, setOperations] = useState<Operation[]>([]);
|
||||
|
||||
const [categorySearch, setCategorySearch] = useState("");
|
||||
const [isCatDropdownOpen, setIsCatDropdownOpen] = useState(false);
|
||||
const catWrapperRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
categoryId: '',
|
||||
operationId: '',
|
||||
text: '',
|
||||
days: 3,
|
||||
clientName: '',
|
||||
categoryId: '', operationId: '', text: '', days: 3, clientName: '', clientDni: '',
|
||||
});
|
||||
|
||||
const [options, setOptions] = useState({
|
||||
isBold: false,
|
||||
isFrame: false,
|
||||
fontSize: 'normal', // 'small', 'normal', 'large', 'extra'
|
||||
alignment: 'left' // 'left', 'center', 'right', 'justify'
|
||||
isBold: false, isFrame: false, fontSize: 'normal', alignment: 'left'
|
||||
});
|
||||
|
||||
const [pricing, setPricing] = useState<PricingResult>({
|
||||
@@ -47,337 +39,386 @@ export default function FastEntryPage() {
|
||||
wordCount: 0, specialCharCount: 0, details: '', appliedPromotion: ''
|
||||
});
|
||||
|
||||
const [clientSuggestions, setClientSuggestions] = useState<Client[]>([]);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const debouncedClientSearch = useDebounce(formData.clientName, 300);
|
||||
const clientWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const textInputRef = useRef<HTMLTextAreaElement>(null);
|
||||
const debouncedText = useDebounce(formData.text, 500);
|
||||
|
||||
const filteredCategories = flatCategories.filter(cat =>
|
||||
cat.path.toLowerCase().includes(categorySearch.toLowerCase()) ||
|
||||
cat.name.toLowerCase().includes(categorySearch.toLowerCase())
|
||||
);
|
||||
|
||||
const selectedCategoryName = flatCategories.find(c => c.id === parseInt(formData.categoryId))?.name;
|
||||
|
||||
const printCourtesyTicket = (data: any, priceInfo: PricingResult) => {
|
||||
const printWindow = window.open('', '_blank', 'width=300,height=600');
|
||||
if (!printWindow) return;
|
||||
|
||||
const html = `
|
||||
<html>
|
||||
<body style="font-family: 'Courier New', monospace; width: 280px; padding: 10px; font-size: 12px;">
|
||||
<div style="text-align: center; border-bottom: 1px dashed #000; padding-bottom: 10px; margin-bottom: 10px;">
|
||||
<h2 style="margin: 0;">DIARIO EL DIA</h2>
|
||||
<p>Comprobante de Recepción</p>
|
||||
<p>${new Date().toLocaleString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<b>CLIENTE:</b> ${data.clientName || 'Consumidor Final'}<br/>
|
||||
<b>RUBRO:</b> ${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()}
|
||||
</div>
|
||||
<div style="text-align: right; border-top: 1px dashed #000; padding-top: 5px;">
|
||||
<b style="font-size: 16px;">TOTAL: $${priceInfo.totalPrice.toLocaleString()}</b>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
printWindow.document.write(html);
|
||||
printWindow.document.close();
|
||||
printWindow.focus();
|
||||
setTimeout(() => { printWindow.print(); printWindow.close(); }, 250);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [catRes, opRes] = await Promise.all([
|
||||
api.get('/categories'),
|
||||
api.get('/operations')
|
||||
]);
|
||||
setCategories(catRes.data);
|
||||
const [catRes, opRes] = await Promise.all([api.get('/categories'), api.get('/operations')]);
|
||||
setFlatCategories(processCategories(catRes.data));
|
||||
setOperations(opRes.data);
|
||||
} catch (error) {
|
||||
console.error("Error cargando datos base", error);
|
||||
}
|
||||
} catch (error) { console.error(error); }
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!formData.categoryId || !formData.text) {
|
||||
setPricing(prev => ({ ...prev, totalPrice: 0, details: '' }));
|
||||
return;
|
||||
}
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'F10') {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [formData, pricing, options]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (catWrapperRef.current && !catWrapperRef.current.contains(event.target as Node)) setIsCatDropdownOpen(false);
|
||||
if (clientWrapperRef.current && !clientWrapperRef.current.contains(event.target as Node)) setShowSuggestions(false);
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!formData.categoryId) return;
|
||||
const calculatePrice = async () => {
|
||||
try {
|
||||
const res = await api.post('/pricing/calculate', {
|
||||
categoryId: parseInt(formData.categoryId),
|
||||
text: formData.text,
|
||||
text: debouncedText || "",
|
||||
days: formData.days,
|
||||
isBold: options.isBold,
|
||||
isFrame: options.isFrame,
|
||||
startDate: new Date().toISOString()
|
||||
});
|
||||
setPricing(res.data);
|
||||
} catch (error) {
|
||||
console.error("Error calculando precio", error);
|
||||
}
|
||||
} catch (error) { console.error(error); }
|
||||
};
|
||||
|
||||
calculatePrice();
|
||||
}, [debouncedText, formData.categoryId, formData.days, options]);
|
||||
|
||||
useEffect(() => {
|
||||
if (debouncedClientSearch.length > 2 && showSuggestions) {
|
||||
api.get(`/clients/search?q=${debouncedClientSearch}`)
|
||||
.then(res => setClientSuggestions(res.data))
|
||||
.catch(() => setClientSuggestions([]));
|
||||
}
|
||||
}, [debouncedClientSearch, showSuggestions]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.categoryId || !formData.operationId || !formData.text) {
|
||||
alert("Faltan datos obligatorios.");
|
||||
alert("⚠️ Error: Complete Rubro, Operación y Texto.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`¿Confirmar cobro de $${pricing.totalPrice.toLocaleString()}?`)) return;
|
||||
|
||||
try {
|
||||
const startDate = new Date();
|
||||
startDate.setDate(startDate.getDate() + 1);
|
||||
|
||||
const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
await api.post('/listings', {
|
||||
categoryId: parseInt(formData.categoryId),
|
||||
operationId: parseInt(formData.operationId),
|
||||
title: formData.text.substring(0, 40) + (formData.text.length > 40 ? '...' : ''),
|
||||
title: formData.text.substring(0, 40) + '...',
|
||||
description: formData.text,
|
||||
price: 0,
|
||||
currency: 'ARS',
|
||||
price: 0, adFee: pricing.totalPrice,
|
||||
status: 'Published',
|
||||
userId: null,
|
||||
printText: formData.text,
|
||||
printStartDate: startDate.toISOString(),
|
||||
printStartDate: tomorrow.toISOString(),
|
||||
printDaysCount: formData.days,
|
||||
isBold: options.isBold,
|
||||
isFrame: options.isFrame,
|
||||
printFontSize: options.fontSize,
|
||||
printAlignment: options.alignment
|
||||
isBold: options.isBold, isFrame: options.isFrame,
|
||||
printFontSize: options.fontSize, printAlignment: options.alignment,
|
||||
clientName: formData.clientName, clientDni: formData.clientDni
|
||||
});
|
||||
|
||||
alert('✅ Aviso guardado y ticket generado.');
|
||||
setFormData({ ...formData, text: '', clientName: '' });
|
||||
printCourtesyTicket(formData, pricing);
|
||||
setFormData({ ...formData, text: '', clientName: '', clientDni: '' });
|
||||
setOptions({ isBold: false, isFrame: false, fontSize: 'normal', alignment: 'left' });
|
||||
textInputRef.current?.focus();
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('❌ Error al procesar el cobro.');
|
||||
}
|
||||
alert('✅ Aviso procesado correctamente.');
|
||||
} catch (err) { alert('❌ Error al procesar el cobro.'); }
|
||||
};
|
||||
|
||||
// Helper para clases de Tailwind según estado
|
||||
const getFontSizeClass = (size: string) => {
|
||||
switch (size) {
|
||||
case 'small': return 'text-xs';
|
||||
case 'large': return 'text-lg';
|
||||
case 'extra': return 'text-xl';
|
||||
default: return 'text-sm';
|
||||
}
|
||||
};
|
||||
|
||||
const getAlignClass = (align: string) => {
|
||||
switch (align) {
|
||||
case 'center': return 'text-center';
|
||||
case 'right': return 'text-right';
|
||||
case 'justify': return 'text-justify';
|
||||
default: return 'text-left';
|
||||
}
|
||||
const handleSelectClient = (client: Client) => {
|
||||
setFormData(prev => ({ ...prev, clientName: client.name, clientDni: client.dniOrCuit }));
|
||||
setShowSuggestions(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full p-4 flex gap-4 bg-gray-100">
|
||||
<div className="w-full h-full p-4 flex gap-4 bg-gray-100 overflow-hidden max-h-screen">
|
||||
|
||||
{/* --- COLUMNA IZQUIERDA: INPUTS --- */}
|
||||
<div className="flex-1 bg-white rounded-lg shadow-sm border border-gray-200 p-6 flex flex-col">
|
||||
<div className="flex justify-between items-center mb-6 border-b pb-2">
|
||||
<h2 className="text-xl font-bold text-slate-800">Nueva Publicación (F2)</h2>
|
||||
<span className="text-xs font-mono text-slate-400">ID TERMINAL: T-01</span>
|
||||
{/* 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>
|
||||
</div>
|
||||
<Printer size={24} className="text-slate-300" />
|
||||
</div>
|
||||
|
||||
<form className="flex-1 flex flex-col gap-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-slate-700 mb-1">Rubro</label>
|
||||
<select
|
||||
className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 bg-gray-50 outline-none"
|
||||
value={formData.categoryId}
|
||||
onChange={e => setFormData({ ...formData, categoryId: e.target.value })}
|
||||
autoFocus
|
||||
<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)}
|
||||
>
|
||||
<option value="">-- Seleccionar --</option>
|
||||
{categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
<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>
|
||||
|
||||
{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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-slate-700 mb-1">Operación</label>
|
||||
<select
|
||||
className="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 bg-gray-50 outline-none"
|
||||
value={formData.operationId}
|
||||
onChange={e => setFormData({ ...formData, operationId: e.target.value })}
|
||||
>
|
||||
<option value="">-- Seleccionar --</option>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col">
|
||||
<label className="block text-sm font-bold text-slate-700 mb-1">Texto del Aviso</label>
|
||||
|
||||
{/* --- Textarea limpio sin estilos condicionales --- */}
|
||||
<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-4 border border-gray-300 rounded resize-none focus:ring-2 focus:ring-blue-500 outline-none font-mono text-lg text-slate-700 leading-relaxed"
|
||||
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-2 text-sm text-slate-500">
|
||||
<div className="flex gap-2">
|
||||
<span>Palabras: <b>{pricing.wordCount}</b></span>
|
||||
{pricing.specialCharCount > 0 && <span className="text-orange-600">Signos (+$$): <b>{pricing.specialCharCount}</b></span>}
|
||||
<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-xs uppercase">Escribir en Mayúsculas recomendado</span>
|
||||
<span className="text-[10px] text-slate-300 font-bold italic uppercase">Uso de mayúsculas recomendado</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 bg-gray-50 p-4 rounded border border-gray-200">
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-slate-500 uppercase">Días</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full p-2 border rounded font-mono text-center font-bold"
|
||||
value={formData.days}
|
||||
onChange={e => setFormData({ ...formData, days: Math.max(1, parseInt(e.target.value) || 0) })}
|
||||
min={1}
|
||||
/>
|
||||
<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">
|
||||
<label className="block text-xs font-bold text-slate-500 uppercase">Cliente / Razón Social</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full p-2 border rounded"
|
||||
placeholder="Consumidor Final"
|
||||
value={formData.clientName}
|
||||
onChange={e => setFormData({ ...formData, clientName: e.target.value })}
|
||||
/>
|
||||
<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>
|
||||
)}
|
||||
</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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- COLUMNA DERECHA: TOTALES Y OPCIONES --- */}
|
||||
<div className="w-96 flex flex-col gap-4">
|
||||
{/* PANEL DERECHO: TOTALES Y VISTA PREVIA */}
|
||||
<div className="flex-[3] flex flex-col gap-4 min-h-0 overflow-hidden">
|
||||
|
||||
{/* Panel de Totales */}
|
||||
<div className="bg-slate-900 text-white rounded-xl p-6 shadow-xl relative overflow-hidden">
|
||||
<div className="relative z-10">
|
||||
<div className="text-xs text-slate-400 uppercase tracking-widest mb-1 font-semibold">Total a Cobrar</div>
|
||||
<div className="text-5xl font-mono font-bold text-green-400 mb-4">
|
||||
${pricing.totalPrice.toLocaleString()}
|
||||
{/* 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>
|
||||
|
||||
<div className="space-y-2 text-sm border-t border-slate-700 pt-3">
|
||||
<div className="flex justify-between text-slate-300">
|
||||
<span>Base ({formData.days} días)</span>
|
||||
<span>${pricing.baseCost.toLocaleString()}</span>
|
||||
{pricing.extraCost > 0 && (
|
||||
<div className="flex justify-between text-orange-400">
|
||||
<span>Recargos por texto</span>
|
||||
<span>+${pricing.extraCost.toLocaleString()}</span>
|
||||
</div>
|
||||
|
||||
{pricing.extraCost > 0 && (
|
||||
<div className="flex justify-between text-yellow-300">
|
||||
<span>Excedentes</span>
|
||||
<span>+${pricing.extraCost.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pricing.surcharges > 0 && (
|
||||
<div className="flex justify-between text-blue-300">
|
||||
<span>Adicionales (Estilo)</span>
|
||||
<span>+${pricing.surcharges.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pricing.discount > 0 && (
|
||||
<div className="flex justify-between text-green-400 font-bold bg-green-900/30 p-1 rounded px-2 -mx-2">
|
||||
<span className="flex items-center gap-1"><Tag size={12} /> Descuento</span>
|
||||
)}
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{pricing.appliedPromotion && (
|
||||
<div className="mt-3 text-xs text-center bg-green-600 text-white py-1 rounded">
|
||||
¡{pricing.appliedPromotion}!
|
||||
<span className="text-[9px] opacity-70 italic">{pricing.appliedPromotion}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- NUEVA BARRA DE HERRAMIENTAS (TOOLBAR) --- */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-2 flex justify-between items-center shadow-sm">
|
||||
{/* CONTENEDOR CENTRAL SCROLLABLE (Toolbar + Preview) */}
|
||||
<div className="flex-1 overflow-y-auto min-h-0 flex flex-col gap-4 pr-1 custom-scrollbar">
|
||||
|
||||
{/* Alineación */}
|
||||
<div className="flex bg-gray-100 rounded p-1 gap-1">
|
||||
<button onClick={() => setOptions({ ...options, alignment: 'left' })}
|
||||
className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'left' && "bg-white shadow text-blue-600")}>
|
||||
<AlignLeft size={18} />
|
||||
</button>
|
||||
<button onClick={() => setOptions({ ...options, alignment: 'center' })}
|
||||
className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'center' && "bg-white shadow text-blue-600")}>
|
||||
<AlignCenter size={18} />
|
||||
</button>
|
||||
<button onClick={() => setOptions({ ...options, alignment: 'right' })}
|
||||
className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'right' && "bg-white shadow text-blue-600")}>
|
||||
<AlignRight size={18} />
|
||||
</button>
|
||||
<button onClick={() => setOptions({ ...options, alignment: 'justify' })}
|
||||
className={clsx("p-1.5 rounded hover:bg-white transition", options.alignment === 'justify' && "bg-white shadow text-blue-600")}>
|
||||
<AlignJustify size={18} />
|
||||
</button>
|
||||
{/* 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>
|
||||
|
||||
<div className="w-px h-6 bg-gray-300 mx-1"></div>
|
||||
|
||||
{/* Tamaño de Fuente */}
|
||||
<div className="flex bg-gray-100 rounded p-1 gap-1">
|
||||
<button onClick={() => setOptions({ ...options, fontSize: 'small' })} title="Pequeño"
|
||||
className={clsx("p-1.5 rounded hover:bg-white transition flex items-end", options.fontSize === 'small' && "bg-white shadow text-blue-600")}>
|
||||
<Type size={14} />
|
||||
</button>
|
||||
<button onClick={() => setOptions({ ...options, fontSize: 'normal' })} title="Normal"
|
||||
className={clsx("p-1.5 rounded hover:bg-white transition flex items-end", options.fontSize === 'normal' && "bg-white shadow text-blue-600")}>
|
||||
<Type size={18} />
|
||||
</button>
|
||||
<button onClick={() => setOptions({ ...options, fontSize: 'large' })} title="Grande"
|
||||
className={clsx("p-1.5 rounded hover:bg-white transition flex items-end", options.fontSize === 'large' && "bg-white shadow text-blue-600")}>
|
||||
<Type size={22} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Vista Previa Papel */}
|
||||
<div className="flex-1 bg-[#fffdf0] border border-yellow-200 rounded-lg p-4 shadow-sm overflow-y-auto flex flex-col min-h-[150px]">
|
||||
<h3 className="text-[10px] font-bold text-yellow-800 uppercase mb-2 flex items-center gap-1 opacity-70">
|
||||
<Printer size={12} /> Vista Previa Impresión (Papel)
|
||||
</h3>
|
||||
<div className={clsx(
|
||||
"font-mono leading-tight whitespace-pre-wrap break-words p-2 border-2 transition-all",
|
||||
// Aplicar Clases Dinámicas
|
||||
options.isBold ? "font-bold" : "font-normal",
|
||||
options.isFrame ? "border-slate-900" : "border-transparent",
|
||||
getFontSizeClass(options.fontSize),
|
||||
getAlignClass(options.alignment)
|
||||
)}>
|
||||
{formData.text || "(Texto vacío)"}
|
||||
{/* 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>
|
||||
|
||||
{/* Botones Estilo Rápido (Negrita/Recuadro) */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOptions({ ...options, isBold: !options.isBold })}
|
||||
className={clsx(
|
||||
"px-2 py-3 rounded-lg border flex items-center justify-center gap-2 transition-all text-sm",
|
||||
options.isBold
|
||||
? "border-blue-600 bg-blue-50 text-blue-700 font-bold"
|
||||
: "border-gray-200 bg-white text-gray-500 hover:border-gray-300"
|
||||
)}
|
||||
>
|
||||
{options.isBold ? <CheckSquare size={18} /> : <Square size={18} />}
|
||||
Negrita
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOptions({ ...options, isFrame: !options.isFrame })}
|
||||
className={clsx(
|
||||
"px-2 py-3 rounded-lg border flex items-center justify-center gap-2 transition-all text-sm",
|
||||
options.isFrame
|
||||
? "border-slate-900 bg-slate-100 text-slate-900 font-bold"
|
||||
: "border-gray-200 bg-white text-gray-500 hover:border-gray-300"
|
||||
)}
|
||||
>
|
||||
{options.isFrame ? <CheckSquare size={18} /> : <Square size={18} />}
|
||||
Recuadro
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ACCIÓN PRINCIPAL (FIJO ABAJO) */}
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white py-4 rounded-lg font-bold shadow-lg shadow-blue-200 flex items-center justify-center gap-2 transition-transform active:scale-95 text-lg mt-2"
|
||||
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"
|
||||
>
|
||||
<Save size={24} />
|
||||
COBRAR (F10)
|
||||
<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>
|
||||
|
||||
44
frontend/counter-panel/src/pages/LoginPage.tsx
Normal file
44
frontend/counter-panel/src/pages/LoginPage.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useState } from 'react';
|
||||
import api from '../services/api';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Monitor } from 'lucide-react';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
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
|
||||
navigate('/');
|
||||
} catch (e) {
|
||||
alert('Credenciales inválidas');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-slate-900 flex items-center justify-center">
|
||||
<div className="bg-white p-8 rounded-lg shadow-2xl w-96">
|
||||
<div className="flex justify-center mb-4 text-slate-800">
|
||||
<Monitor size={48} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-center mb-6 text-slate-800">Acceso Mostrador</h2>
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-bold mb-1">Usuario</label>
|
||||
<input type="text" value={username} onChange={e => setUsername(e.target.value)} className="w-full border p-2 rounded" autoFocus />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold mb-1">Contraseña</label>
|
||||
<input type="password" value={password} onChange={e => setPassword(e.target.value)} className="w-full border p-2 rounded" />
|
||||
</div>
|
||||
<button type="submit" className="w-full bg-blue-600 text-white py-2 rounded font-bold hover:bg-blue-700">INGRESAR</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL, // Usa la variable de entorno
|
||||
// Asegúrate de usar la variable de entorno o la URL correcta
|
||||
baseURL: import.meta.env.VITE_API_URL || 'http://localhost:5176/api',
|
||||
});
|
||||
|
||||
// 1. Interceptor de REQUEST: Pega el token
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
@@ -12,4 +14,27 @@ api.interceptors.request.use((config) => {
|
||||
return config;
|
||||
});
|
||||
|
||||
// 2. Interceptor de RESPONSE: Maneja errores globales (como 401)
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
return response;
|
||||
},
|
||||
(error) => {
|
||||
// Si el error es 401 (Token vencido o inválido)
|
||||
if (error.response && error.response.status === 401) {
|
||||
console.warn("Sesión de caja expirada. Redirigiendo...");
|
||||
|
||||
// Limpiar almacenamiento
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
|
||||
// Redirigir al Login (forzado fuera de React Router para limpiar estado)
|
||||
if (window.location.pathname !== '/login') {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
26
frontend/counter-panel/src/services/cashRegisterService.ts
Normal file
26
frontend/counter-panel/src/services/cashRegisterService.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import api from './api';
|
||||
|
||||
export const cashRegisterService = {
|
||||
// Obtener resumen y lista de transacciones de hoy
|
||||
getDailyStatus: async () => {
|
||||
const res = await api.get('/reports/cashier-transactions');
|
||||
return res.data; // Devuelve el GlobalReportDto
|
||||
},
|
||||
|
||||
// Disparar la descarga del PDF de cierre
|
||||
downloadClosurePdf: async () => {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
const res = await api.get('/reports/export-cierre', {
|
||||
params: { from: today, to: today },
|
||||
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', `Cierre_Caja_${today}.pdf`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
}
|
||||
};
|
||||
6
frontend/counter-panel/src/types/Category.ts
Normal file
6
frontend/counter-panel/src/types/Category.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export interface Category {
|
||||
id: number;
|
||||
name: string;
|
||||
parentId?: number;
|
||||
subcategories?: Category[];
|
||||
}
|
||||
92
frontend/counter-panel/src/utils/categoryTreeUtils.ts
Normal file
92
frontend/counter-panel/src/utils/categoryTreeUtils.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import { type Category } from '../types/Category';
|
||||
|
||||
// Interfaz para la categoría "Aplanada" y enriquecida para UI
|
||||
export interface FlatCategory {
|
||||
id: number;
|
||||
name: string;
|
||||
level: number;
|
||||
parentId: number | null;
|
||||
path: string; // "Vehículos > Autos"
|
||||
isSelectable: boolean; // True si no tiene hijos (es hoja)
|
||||
hasChildren: boolean;
|
||||
}
|
||||
|
||||
// Interfaz auxiliar para el árbol
|
||||
interface CategoryNode extends Category {
|
||||
children: CategoryNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Convierte una lista plana de BD en un árbol recursivo
|
||||
*/
|
||||
export const buildTree = (categories: Category[]): CategoryNode[] => {
|
||||
const map = new Map<number, CategoryNode>();
|
||||
const roots: CategoryNode[] = [];
|
||||
|
||||
// 1. Inicializar nodos
|
||||
categories.forEach(cat => {
|
||||
map.set(cat.id, { ...cat, children: [] });
|
||||
});
|
||||
|
||||
// 2. Construir relaciones
|
||||
categories.forEach(cat => {
|
||||
const node = map.get(cat.id);
|
||||
if (node) {
|
||||
if (cat.parentId && map.has(cat.parentId)) {
|
||||
map.get(cat.parentId)!.children.push(node);
|
||||
} else {
|
||||
roots.push(node);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return roots;
|
||||
};
|
||||
|
||||
/**
|
||||
* Aplana el árbol para usarlo en Selects/Autocompletes
|
||||
* Calcula breadcrumbs y deshabilita padres
|
||||
*/
|
||||
export const flattenCategoriesForSelect = (
|
||||
nodes: CategoryNode[],
|
||||
level = 0,
|
||||
parentPath = ""
|
||||
): FlatCategory[] => {
|
||||
let result: FlatCategory[] = [];
|
||||
|
||||
// Ordenar alfabéticamente para facilitar búsqueda visual
|
||||
const sortedNodes = [...nodes].sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
for (const node of sortedNodes) {
|
||||
const currentPath = parentPath ? `${parentPath} > ${node.name}` : node.name;
|
||||
const hasChildren = node.children && node.children.length > 0;
|
||||
|
||||
// Agregamos el nodo actual
|
||||
result.push({
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
level: level,
|
||||
parentId: node.parentId || null,
|
||||
path: currentPath,
|
||||
hasChildren: hasChildren,
|
||||
// REGLA DE ORO: Solo seleccionable si NO tiene hijos
|
||||
isSelectable: !hasChildren
|
||||
});
|
||||
|
||||
// Recursión para los hijos
|
||||
if (hasChildren) {
|
||||
const childrenFlat = flattenCategoriesForSelect(node.children, level + 1, currentPath);
|
||||
result = [...result, ...childrenFlat];
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Función Helper que hace todo el proceso desde la respuesta de la API
|
||||
*/
|
||||
export const processCategories = (rawCategories: Category[]): FlatCategory[] => {
|
||||
const tree = buildTree(rawCategories);
|
||||
return flattenCategoriesForSelect(tree);
|
||||
};
|
||||
@@ -15,8 +15,9 @@ function App() {
|
||||
</nav>
|
||||
<div>
|
||||
<a
|
||||
href="http://localhost:5174"
|
||||
href="http://localhost:5177"
|
||||
className="bg-primary-600 text-white px-5 py-2 rounded-full font-medium hover:bg-primary-700 transition"
|
||||
target='_blank'
|
||||
>
|
||||
Publicar Aviso
|
||||
</a>
|
||||
|
||||
@@ -3,12 +3,23 @@ import SearchBar from '../components/SearchBar';
|
||||
import ListingCard from '../components/ListingCard';
|
||||
import { publicService } from '../services/publicService';
|
||||
import type { Listing, Category } from '../types';
|
||||
import { Filter, X } from 'lucide-react';
|
||||
import { processCategoriesForSelect, type FlatCategory } from '../utils/categoryTreeUtils';
|
||||
|
||||
export default function HomePage() {
|
||||
const [listings, setListings] = useState<Listing[]>([]);
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
|
||||
// Usamos FlatCategory para el renderizado
|
||||
const [flatCategories, setFlatCategories] = useState<FlatCategory[]>([]);
|
||||
const [rawCategories, setRawCategories] = useState<Category[]>([]); // Guardamos raw para los botones del home
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Estado de Búsqueda
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [selectedCatId, setSelectedCatId] = useState<number | null>(null);
|
||||
const [dynamicFilters, setDynamicFilters] = useState<Record<string, string>>({});
|
||||
|
||||
useEffect(() => {
|
||||
loadInitialData();
|
||||
}, []);
|
||||
@@ -21,72 +32,136 @@ export default function HomePage() {
|
||||
publicService.getCategories()
|
||||
]);
|
||||
setListings(latestListings);
|
||||
setCategories(cats);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
setRawCategories(cats);
|
||||
|
||||
// Procesamos el árbol para el select
|
||||
const processed = processCategoriesForSelect(cats);
|
||||
setFlatCategories(processed);
|
||||
|
||||
} catch (e) { console.error(e); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
|
||||
const handleSearch = async (query: string) => {
|
||||
const performSearch = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const results = await publicService.searchListings(query);
|
||||
setListings(results);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
const response = await import('../services/api').then(m => m.default.post('/listings/search', {
|
||||
query: searchText,
|
||||
categoryId: selectedCatId,
|
||||
filters: dynamicFilters
|
||||
}));
|
||||
setListings(response.data);
|
||||
} catch (e) { console.error(e); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
|
||||
const mainCategories = categories.filter(c => !c.parentId);
|
||||
useEffect(() => {
|
||||
if (searchText || selectedCatId || Object.keys(dynamicFilters).length > 0) {
|
||||
performSearch();
|
||||
}
|
||||
}, [selectedCatId, dynamicFilters]);
|
||||
|
||||
const handleSearchText = (q: string) => {
|
||||
setSearchText(q);
|
||||
performSearch();
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setDynamicFilters({});
|
||||
setSelectedCatId(null);
|
||||
setSearchText('');
|
||||
publicService.getLatestListings().then(setListings); // Reset list
|
||||
}
|
||||
|
||||
// Para los botones del Home, solo mostramos los Raíz
|
||||
const rootCategories = rawCategories.filter(c => !c.parentId);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 pb-20">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-primary-900 text-white py-20 px-4 relative overflow-hidden">
|
||||
{/* Hero */}
|
||||
<div className="bg-primary-900 text-white py-16 px-4 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-900 to-gray-900 opacity-90"></div>
|
||||
<div className="max-w-4xl mx-auto text-center relative z-10">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6">Encuentra tu próximo objetivo</h1>
|
||||
<p className="text-xl text-primary-100 mb-10">Clasificados verificados de Autos, Propiedades y más.</p>
|
||||
<h1 className="text-3xl md:text-5xl font-bold mb-6">Encuentra tu próximo objetivo</h1>
|
||||
<div className="flex justify-center">
|
||||
<SearchBar onSearch={handleSearch} />
|
||||
<SearchBar onSearch={handleSearchText} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories Quick Links */}
|
||||
<div className="max-w-6xl mx-auto px-4 -mt-8 relative z-20">
|
||||
<div className="bg-white rounded-xl shadow-lg p-6 flex flex-wrap justify-center gap-4 md:gap-8 border border-gray-100">
|
||||
{mainCategories.map(cat => (
|
||||
<button key={cat.id} className="flex flex-col items-center gap-2 group">
|
||||
<div className="w-12 h-12 rounded-full bg-primary-50 flex items-center justify-center text-primary-600 group-hover:bg-primary-600 group-hover:text-white transition">
|
||||
<div className="font-bold text-lg">{cat.name.charAt(0)}</div>
|
||||
<div className="max-w-7xl mx-auto px-4 mt-8 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
{/* SIDEBAR DE FILTROS */}
|
||||
<div className="w-full lg:w-64 flex-shrink-0 space-y-6">
|
||||
<div className="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="font-bold text-gray-800 flex items-center gap-2">
|
||||
<Filter size={18} /> Filtros
|
||||
</h3>
|
||||
{(selectedCatId || Object.keys(dynamicFilters).length > 0) && (
|
||||
<button onClick={clearFilters} className="text-xs text-red-500 hover:underline flex items-center">
|
||||
<X size={12} /> Limpiar
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filtro Categoría (MEJORADO) */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-600 mb-2">Categoría</label>
|
||||
<select
|
||||
className="w-full border border-gray-300 rounded p-2 text-sm focus:ring-2 focus:ring-primary-500 outline-none"
|
||||
value={selectedCatId || ''}
|
||||
onChange={(e) => setSelectedCatId(Number(e.target.value) || null)}
|
||||
>
|
||||
<option value="">Todas las categorías</option>
|
||||
{flatCategories.map(cat => (
|
||||
<option
|
||||
key={cat.id}
|
||||
value={cat.id}
|
||||
className={cat.level === 0 ? "font-bold text-gray-900" : "text-gray-600"}
|
||||
>
|
||||
{cat.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Filtros Dinámicos */}
|
||||
{selectedCatId && (
|
||||
<div className="space-y-3 pt-3 border-t">
|
||||
<p className="text-xs font-bold text-gray-400 uppercase">Atributos</p>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filtrar por Kilometraje..."
|
||||
className="w-full border p-2 rounded text-sm"
|
||||
onChange={(e) => setDynamicFilters({ ...dynamicFilters, 'Kilometraje': e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-600 group-hover:text-primary-700">{cat.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Latest Listings */}
|
||||
<div className="max-w-6xl mx-auto px-4 mt-16">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-8">
|
||||
{loading ? 'Cargando...' : 'Resultados Recientes'}
|
||||
</h2>
|
||||
|
||||
{!loading && listings.length === 0 && (
|
||||
<div className="text-center text-gray-500 py-10">
|
||||
No se encontraron avisos con esos criterios.
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{listings.map(listing => (
|
||||
<ListingCard key={listing.id} listing={listing} />
|
||||
))}
|
||||
{/* LISTADO */}
|
||||
<div className="flex-1">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||
{loading ? 'Cargando...' : selectedCatId
|
||||
? `${listings.length} Resultados en ${flatCategories.find(c => c.id === selectedCatId)?.name}`
|
||||
: 'Resultados Recientes'}
|
||||
</h2>
|
||||
|
||||
{!loading && listings.length === 0 && (
|
||||
<div className="text-center text-gray-500 py-20 bg-white rounded-lg border border-dashed border-gray-300">
|
||||
No se encontraron avisos con esos criterios.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{listings.map(listing => (
|
||||
<ListingCard key={listing.id} listing={listing} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
71
frontend/public-web/src/utils/categoryTreeUtils.ts
Normal file
71
frontend/public-web/src/utils/categoryTreeUtils.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
export interface Category {
|
||||
id: number;
|
||||
name: string;
|
||||
parentId?: number | null;
|
||||
}
|
||||
|
||||
export interface FlatCategory {
|
||||
id: number;
|
||||
name: string;
|
||||
level: number;
|
||||
parentId: number | null;
|
||||
label: string; // Para mostrar en el select con indentación
|
||||
}
|
||||
|
||||
interface CategoryNode extends Category {
|
||||
children: CategoryNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Construye el árbol y luego lo aplana ordenadamente con niveles
|
||||
*/
|
||||
export const processCategoriesForSelect = (rawCategories: Category[]): FlatCategory[] => {
|
||||
const map = new Map<number, CategoryNode>();
|
||||
const roots: CategoryNode[] = [];
|
||||
|
||||
// 1. Map
|
||||
rawCategories.forEach(cat => {
|
||||
// @ts-ignore
|
||||
map.set(cat.id, { ...cat, children: [] });
|
||||
});
|
||||
|
||||
// 2. Tree
|
||||
rawCategories.forEach(cat => {
|
||||
const node = map.get(cat.id);
|
||||
if (node) {
|
||||
if (cat.parentId && map.has(cat.parentId)) {
|
||||
map.get(cat.parentId)!.children.push(node);
|
||||
} else {
|
||||
roots.push(node);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 3. Flatten Recursive
|
||||
const flatten = (nodes: CategoryNode[], level = 0): FlatCategory[] => {
|
||||
let result: FlatCategory[] = [];
|
||||
// Ordenar alfabéticamente
|
||||
const sorted = nodes.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
for (const node of sorted) {
|
||||
// Creamos el label visual con espacios
|
||||
// Usamos caracteres unicode especiales para que se note la jerarquía
|
||||
const prefix = level === 0 ? '' : '\u00A0\u00A0'.repeat(level) + '↳ ';
|
||||
|
||||
result.push({
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
parentId: node.parentId || null,
|
||||
level: level,
|
||||
label: prefix + node.name
|
||||
});
|
||||
|
||||
if (node.children.length > 0) {
|
||||
result = [...result, ...flatten(node.children, level + 1)];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
return flatten(roots);
|
||||
};
|
||||
@@ -3,11 +3,13 @@ import { useWizardStore } from '../../store/wizardStore';
|
||||
import { wizardService } from '../../services/wizardService';
|
||||
import { StepWrapper } from '../../components/StepWrapper';
|
||||
import type { AttributeDefinition } from '../../types';
|
||||
import { CreditCard, Wallet } from 'lucide-react';
|
||||
|
||||
export default function SummaryStep({ definitions }: { definitions: AttributeDefinition[] }) {
|
||||
const { selectedCategory, selectedOperation, attributes, setStep } = useWizardStore();
|
||||
const { selectedCategory, selectedOperation, attributes, photos, setStep } = useWizardStore();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [createdId, setCreatedId] = useState<number | null>(null);
|
||||
const [paymentMethod, setPaymentMethod] = useState<'mercadopago' | 'stripe'>('mercadopago');
|
||||
|
||||
const handlePublish = async () => {
|
||||
if (!selectedCategory || !selectedOperation) return;
|
||||
@@ -15,37 +17,36 @@ export default function SummaryStep({ definitions }: { definitions: AttributeDef
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const attributePayload: Record<number, string> = {};
|
||||
// Ideally we should have stored definitions in store or passed them.
|
||||
// For now assuming 'definitions' prop contains current category definitions
|
||||
|
||||
// For now assuming 'definitions' prop contains current category definitions
|
||||
|
||||
definitions.forEach(def => {
|
||||
if (attributes[def.name]) {
|
||||
attributePayload[def.id] = attributes[def.name].toString();
|
||||
}
|
||||
});
|
||||
|
||||
// Crear aviso con estado PENDING (Esperando pago)
|
||||
const payload = {
|
||||
categoryId: selectedCategory.id,
|
||||
operationId: selectedOperation.id,
|
||||
title: attributes['title'],
|
||||
description: 'Generated via Wizard', // Todo: Add description field
|
||||
description: 'Generated via Wizard',
|
||||
price: parseFloat(attributes['price']),
|
||||
currency: 'ARS',
|
||||
status: 'Pending', // <-- Importante para moderación
|
||||
attributes: attributePayload
|
||||
};
|
||||
|
||||
const result = await wizardService.createListing(payload);
|
||||
|
||||
// Upload Images
|
||||
const { photos } = useWizardStore.getState();
|
||||
if (photos.length > 0) {
|
||||
for (const photo of photos) {
|
||||
await wizardService.uploadImage(result.id, photo);
|
||||
}
|
||||
}
|
||||
|
||||
// Simulación de Pago
|
||||
await new Promise(resolve => setTimeout(resolve, 2000)); // Fake network delay
|
||||
|
||||
setCreatedId(result.id);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
@@ -58,11 +59,16 @@ export default function SummaryStep({ definitions }: { definitions: AttributeDef
|
||||
if (createdId) {
|
||||
return (
|
||||
<StepWrapper>
|
||||
<div className="text-center py-10">
|
||||
<div className="text-4xl text-green-500 mb-4">✓</div>
|
||||
<h2 className="text-2xl font-bold mb-2">¡Aviso Publicado!</h2>
|
||||
<p className="text-gray-500">ID de referencia: #{createdId}</p>
|
||||
<button onClick={() => window.location.reload()} className="mt-8 text-brand-600 underline">Publicar otro</button>
|
||||
<div className="text-center py-10 bg-white rounded-xl shadow p-8 border border-green-100">
|
||||
<div className="text-6xl text-green-500 mb-4 animate-bounce">✓</div>
|
||||
<h2 className="text-3xl font-bold mb-2 text-gray-800">¡Pago Exitoso!</h2>
|
||||
<p className="text-gray-500 text-lg">Tu aviso #{createdId} ha sido enviado a moderación.</p>
|
||||
<div className="mt-8 p-4 bg-gray-50 rounded text-sm text-gray-600">
|
||||
Comprobante de pago: {paymentMethod === 'mercadopago' ? 'MP-123456789' : 'ST-987654321'}
|
||||
</div>
|
||||
<button onClick={() => window.location.reload()} className="mt-8 bg-brand-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-brand-700 transition">
|
||||
Publicar otro aviso
|
||||
</button>
|
||||
</div>
|
||||
</StepWrapper>
|
||||
);
|
||||
@@ -70,48 +76,62 @@ export default function SummaryStep({ definitions }: { definitions: AttributeDef
|
||||
|
||||
return (
|
||||
<StepWrapper>
|
||||
<h2 className="text-2xl font-bold mb-6 text-brand-900">Resumen y Confirmación</h2>
|
||||
<h2 className="text-2xl font-bold mb-6 text-brand-900">Resumen y Pago</h2>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm mb-6">
|
||||
<div className="mb-4">
|
||||
<span className="block text-xs text-slate-500 uppercase tracking-wide">Categoría</span>
|
||||
<span className="font-semibold text-lg">{selectedCategory?.name}</span>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<span className="block text-xs text-slate-500 uppercase tracking-wide">Operación</span>
|
||||
<span className="font-semibold text-lg">{selectedOperation?.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-4 mt-4">
|
||||
<h3 className="font-bold mb-2">{attributes['title']}</h3>
|
||||
<div className="text-2xl font-bold text-green-600 mb-4">$ {attributes['price']}</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
{definitions.map(def => attributes[def.name] && (
|
||||
<div key={def.id}>
|
||||
<span className="text-slate-500">{def.name}:</span> <span className="font-medium">{attributes[def.name]}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-between items-center mb-4 border-b pb-4">
|
||||
<div>
|
||||
<span className="block text-xs text-slate-500 uppercase tracking-wide">Categoría</span>
|
||||
<span className="font-semibold text-lg">{selectedCategory?.name}</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="block text-xs text-slate-500 uppercase tracking-wide">Operación</span>
|
||||
<span className="font-semibold text-lg">{selectedOperation?.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-bold mb-2 text-xl">{attributes['title']}</h3>
|
||||
<div className="text-3xl font-bold text-green-600 mb-6">$ {attributes['price']}</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 text-sm bg-gray-50 p-4 rounded-lg">
|
||||
{definitions.map(def => attributes[def.name] && (
|
||||
<div key={def.id}>
|
||||
<span className="text-slate-500 font-medium">{def.name}:</span> <span className="text-slate-800">{attributes[def.name]}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selector de Pago */}
|
||||
<div className="mb-8">
|
||||
<h3 className="font-bold text-gray-800 mb-3 text-lg">Selecciona Método de Pago</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<label className={`flex items-center gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${paymentMethod === 'mercadopago' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 bg-white hover:border-blue-200'}`}>
|
||||
<input type="radio" name="payment" value="mercadopago" checked={paymentMethod === 'mercadopago'} onChange={() => setPaymentMethod('mercadopago')} className="hidden" />
|
||||
<div className="bg-blue-100 p-2 rounded-full text-blue-600"><Wallet size={24} /></div>
|
||||
<div>
|
||||
<div className="font-bold text-gray-800">Mercado Pago</div>
|
||||
<div className="text-xs text-gray-500">QR, Débito, Crédito</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label className={`flex items-center gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${paymentMethod === 'stripe' ? 'border-indigo-500 bg-indigo-50' : 'border-gray-200 bg-white hover:border-indigo-200'}`}>
|
||||
<input type="radio" name="payment" value="stripe" checked={paymentMethod === 'stripe'} onChange={() => setPaymentMethod('stripe')} className="hidden" />
|
||||
<div className="bg-indigo-100 p-2 rounded-full text-indigo-600"><CreditCard size={24} /></div>
|
||||
<div>
|
||||
<div className="font-bold text-gray-800">Tarjeta Crédito</div>
|
||||
<div className="text-xs text-gray-500">Procesado por Stripe</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => setStep(3)}
|
||||
className="flex-1 py-3 text-slate-600 hover:bg-slate-100 rounded-lg"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Volver
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePublish}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 py-3 bg-brand-600 text-white font-bold rounded-lg hover:bg-brand-700 disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? 'Publicando...' : 'Confirmar y Publicar'}
|
||||
<button onClick={() => setStep(4)} className="px-6 py-3 text-slate-600 hover:bg-slate-100 rounded-lg font-medium" disabled={isSubmitting}>Volver</button>
|
||||
<button onClick={handlePublish} disabled={isSubmitting} className="flex-1 py-3 bg-brand-600 text-white font-bold rounded-xl hover:bg-brand-700 disabled:opacity-70 disabled:cursor-not-allowed shadow-lg shadow-brand-200 transition-all text-lg">
|
||||
{isSubmitting ? 'Procesando pago...' : 'Pagar y Publicar'}
|
||||
</button>
|
||||
</div>
|
||||
</StepWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user