Layouts separados por roles
This commit is contained in:
parent
6d2cbce90d
commit
78a80ab3d5
179
package-lock.json
generated
179
package-lock.json
generated
@ -8,9 +8,11 @@
|
|||||||
"name": "notsoweb.frontend",
|
"name": "notsoweb.frontend",
|
||||||
"version": "0.9.12",
|
"version": "0.9.12",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@popperjs/core": "^2.11.8",
|
||||||
"@tailwindcss/postcss": "^4.0.9",
|
"@tailwindcss/postcss": "^4.0.9",
|
||||||
"@tailwindcss/vite": "^4.0.9",
|
"@tailwindcss/vite": "^4.0.9",
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"apexcharts": "^5.3.5",
|
||||||
"axios": "^1.8.1",
|
"axios": "^1.8.1",
|
||||||
"laravel-echo": "^2.0.2",
|
"laravel-echo": "^2.0.2",
|
||||||
"luxon": "^3.5.0",
|
"luxon": "^3.5.0",
|
||||||
@ -19,11 +21,13 @@
|
|||||||
"tailwindcss": "^4.0",
|
"tailwindcss": "^4.0",
|
||||||
"toastr": "^2.1.4",
|
"toastr": "^2.1.4",
|
||||||
"uuid": "^11.1.0",
|
"uuid": "^11.1.0",
|
||||||
|
"v-calendar": "^3.1.2",
|
||||||
"vite": "^6.2.0",
|
"vite": "^6.2.0",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-i18n": "^11.1.1",
|
"vue-i18n": "^11.1.1",
|
||||||
"vue-multiselect": "^3.2.0",
|
"vue-multiselect": "^3.2.0",
|
||||||
"vue-router": "^4.5.0",
|
"vue-router": "^4.5.0",
|
||||||
|
"vue3-apexcharts": "^1.8.0",
|
||||||
"ziggy-js": "^2.5.2"
|
"ziggy-js": "^2.5.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -89,6 +93,15 @@
|
|||||||
"node": ">=6.0.0"
|
"node": ">=6.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@babel/runtime": {
|
||||||
|
"version": "7.28.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
|
||||||
|
"integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@babel/types": {
|
"node_modules/@babel/types": {
|
||||||
"version": "7.28.1",
|
"version": "7.28.1",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
|
||||||
@ -658,6 +671,16 @@
|
|||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@popperjs/core": {
|
||||||
|
"version": "2.11.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||||
|
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/popperjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@rollup/pluginutils": {
|
"node_modules/@rollup/pluginutils": {
|
||||||
"version": "4.2.1",
|
"version": "4.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
|
||||||
@ -952,6 +975,62 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true
|
"peer": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@svgdotjs/svg.draggable.js": {
|
||||||
|
"version": "3.0.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.draggable.js/-/svg.draggable.js-3.0.6.tgz",
|
||||||
|
"integrity": "sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"@svgdotjs/svg.js": "^3.2.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@svgdotjs/svg.filter.js": {
|
||||||
|
"version": "3.0.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.filter.js/-/svg.filter.js-3.0.9.tgz",
|
||||||
|
"integrity": "sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@svgdotjs/svg.js": "^3.2.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@svgdotjs/svg.js": {
|
||||||
|
"version": "3.2.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.5.tgz",
|
||||||
|
"integrity": "sha512-/VNHWYhNu+BS7ktbYoVGrCmsXDh+chFMaONMwGNdIBcFHrWqk2jY8fNyr3DLdtQUIalvkPfM554ZSFa3dm3nxQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/Fuzzyma"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@svgdotjs/svg.resize.js": {
|
||||||
|
"version": "2.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.resize.js/-/svg.resize.js-2.0.5.tgz",
|
||||||
|
"integrity": "sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 14.18"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@svgdotjs/svg.js": "^3.2.4",
|
||||||
|
"@svgdotjs/svg.select.js": "^4.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@svgdotjs/svg.select.js": {
|
||||||
|
"version": "4.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.select.js/-/svg.select.js-4.0.3.tgz",
|
||||||
|
"integrity": "sha512-qkMgso1sd2hXKd1FZ1weO7ANq12sNmQJeGDjs46QwDVsxSRcHmvWKL2NDF7Yimpwf3sl5esOLkPqtV2bQ3v/Jg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 14.18"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@svgdotjs/svg.js": "^3.2.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@tailwindcss/node": {
|
"node_modules/@tailwindcss/node": {
|
||||||
"version": "4.1.11",
|
"version": "4.1.11",
|
||||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
|
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
|
||||||
@ -1233,12 +1312,24 @@
|
|||||||
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/lodash": {
|
||||||
|
"version": "4.17.20",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
|
||||||
|
"integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@types/qs": {
|
"node_modules/@types/qs": {
|
||||||
"version": "6.14.0",
|
"version": "6.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
|
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
|
||||||
"integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
|
"integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/resize-observer-browser": {
|
||||||
|
"version": "0.1.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz",
|
||||||
|
"integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@vitejs/plugin-vue": {
|
"node_modules/@vitejs/plugin-vue": {
|
||||||
"version": "5.2.4",
|
"version": "5.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
|
||||||
@ -1397,6 +1488,12 @@
|
|||||||
"integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
|
"integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@yr/monotone-cubic-spline": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/acorn": {
|
"node_modules/acorn": {
|
||||||
"version": "8.15.0",
|
"version": "8.15.0",
|
||||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||||
@ -1426,6 +1523,20 @@
|
|||||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/apexcharts": {
|
||||||
|
"version": "5.3.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-5.3.5.tgz",
|
||||||
|
"integrity": "sha512-I04DY/WBZbJgJD2uixeV5EzyiL+J5LgKQXEu8rctqAwyRmKv44aDVeofJoLdTJe3ao4r2KEQfCgtVzXn6pqirg==",
|
||||||
|
"license": "SEE LICENSE IN LICENSE",
|
||||||
|
"dependencies": {
|
||||||
|
"@svgdotjs/svg.draggable.js": "^3.0.4",
|
||||||
|
"@svgdotjs/svg.filter.js": "^3.0.8",
|
||||||
|
"@svgdotjs/svg.js": "^3.2.4",
|
||||||
|
"@svgdotjs/svg.resize.js": "^2.0.2",
|
||||||
|
"@svgdotjs/svg.select.js": "^4.0.1",
|
||||||
|
"@yr/monotone-cubic-spline": "^1.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/async": {
|
"node_modules/async": {
|
||||||
"version": "3.2.6",
|
"version": "3.2.6",
|
||||||
"resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
|
"resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
|
||||||
@ -1783,6 +1894,31 @@
|
|||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/date-fns": {
|
||||||
|
"version": "2.30.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
|
||||||
|
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.21.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.11"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/date-fns"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/date-fns-tz": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"date-fns": "2.x"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
"version": "4.3.7",
|
"version": "4.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||||
@ -2761,6 +2897,12 @@
|
|||||||
"url": "https://opencollective.com/parcel"
|
"url": "https://opencollective.com/parcel"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/lodash": {
|
||||||
|
"version": "4.17.21",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||||
|
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/lower-case": {
|
"node_modules/lower-case": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
|
||||||
@ -3491,6 +3633,24 @@
|
|||||||
"uuid": "dist/esm/bin/uuid"
|
"uuid": "dist/esm/bin/uuid"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/v-calendar": {
|
||||||
|
"version": "3.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.1.2.tgz",
|
||||||
|
"integrity": "sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/lodash": "^4.14.165",
|
||||||
|
"@types/resize-observer-browser": "^0.1.7",
|
||||||
|
"date-fns": "^2.16.1",
|
||||||
|
"date-fns-tz": "^2.0.0",
|
||||||
|
"lodash": "^4.17.20",
|
||||||
|
"vue-screen-utils": "^1.0.0-beta.13"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@popperjs/core": "^2.0.0",
|
||||||
|
"vue": "^3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "6.3.5",
|
"version": "6.3.5",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
|
||||||
@ -3667,6 +3827,25 @@
|
|||||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
|
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/vue-screen-utils": {
|
||||||
|
"version": "1.0.0-beta.13",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz",
|
||||||
|
"integrity": "sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/vue3-apexcharts": {
|
||||||
|
"version": "1.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.8.0.tgz",
|
||||||
|
"integrity": "sha512-5tSD4mXTBbIJ9ir+58qHE6oNtIe0RNgqIRYMKpcsIaxkKtwUww4JhvPkpUFlmiW4OJbbdklgjleXq1lfcM4gdA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"apexcharts": ">=4.0.0",
|
||||||
|
"vue": ">=3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/ws": {
|
"node_modules/ws": {
|
||||||
"version": "8.17.1",
|
"version": "8.17.1",
|
||||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
|
"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
|
||||||
|
|||||||
@ -10,9 +10,11 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@popperjs/core": "^2.11.8",
|
||||||
"@tailwindcss/postcss": "^4.0.9",
|
"@tailwindcss/postcss": "^4.0.9",
|
||||||
"@tailwindcss/vite": "^4.0.9",
|
"@tailwindcss/vite": "^4.0.9",
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"apexcharts": "^5.3.5",
|
||||||
"axios": "^1.8.1",
|
"axios": "^1.8.1",
|
||||||
"laravel-echo": "^2.0.2",
|
"laravel-echo": "^2.0.2",
|
||||||
"luxon": "^3.5.0",
|
"luxon": "^3.5.0",
|
||||||
@ -21,11 +23,13 @@
|
|||||||
"tailwindcss": "^4.0",
|
"tailwindcss": "^4.0",
|
||||||
"toastr": "^2.1.4",
|
"toastr": "^2.1.4",
|
||||||
"uuid": "^11.1.0",
|
"uuid": "^11.1.0",
|
||||||
|
"v-calendar": "^3.1.2",
|
||||||
"vite": "^6.2.0",
|
"vite": "^6.2.0",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-i18n": "^11.1.1",
|
"vue-i18n": "^11.1.1",
|
||||||
"vue-multiselect": "^3.2.0",
|
"vue-multiselect": "^3.2.0",
|
||||||
"vue-router": "^4.5.0",
|
"vue-router": "^4.5.0",
|
||||||
|
"vue3-apexcharts": "^1.8.0",
|
||||||
"ziggy-js": "^2.5.2"
|
"ziggy-js": "^2.5.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@ -1,8 +1,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { APP_VERSION, APP_COPYRIGHT } from '@/config.js'
|
import { APP_VERSION, APP_COPYRIGHT } from '@/config.js'
|
||||||
import useLeftSidebar from '@Stores/LeftSidebar'
|
import useLeftSidebar from '@Stores/LeftSidebar'
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
import Logo from '@Holos/Logo.vue';
|
|
||||||
|
|
||||||
/** Definidores */
|
/** Definidores */
|
||||||
const leftSidebar = useLeftSidebar()
|
const leftSidebar = useLeftSidebar()
|
||||||
@ -16,7 +15,6 @@ const props = defineProps({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const year = (new Date).getFullYear();
|
const year = (new Date).getFullYear();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -29,30 +27,32 @@ const year = (new Date).getFullYear();
|
|||||||
:class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
|
:class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col h-full p-2 md:w-64">
|
<div class="flex flex-col h-full p-2 md:w-64">
|
||||||
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
|
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-white dark:bg-primary-d text-page-t dark:text-page-dt border-r border-gray-200 dark:border-primary/20">
|
||||||
<div>
|
<div class="py-4 bg-transparent">
|
||||||
<div class="flex w-full px-2 mt-2">
|
<div class="flex flex-row justify-center items-center w-full px-4 mb-6 gap-2">
|
||||||
<Logo
|
<GoogleIcon class="bg-[#2563eb] text-white text-3xl rounded p-1" name="apartment" />
|
||||||
class="text-lg inline-flex"
|
<div class="flex flex-col items-center justify-center gap-1">
|
||||||
/>
|
<h2 class="text-gray-800 dark:text-primary-dt font-bold text-xl"> HR Manager</h2>
|
||||||
|
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Sistema de RRHH</span>
|
||||||
</div>
|
</div>
|
||||||
<ul class="flex h-full flex-col md:pb-4 space-y-1">
|
</div>
|
||||||
|
<ul class="flex h-full flex-col space-y-1 px-2">
|
||||||
<slot />
|
<slot />
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-4 px-5 space-y-1">
|
<div class="mb-4 px-4 py-4 border-t border-gray-200">
|
||||||
<p class="block text-center text-xs">
|
<p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
|
||||||
© {{ year }} {{ APP_COPYRIGHT }}
|
© {{ year }} {{ APP_COPYRIGHT }}
|
||||||
</p>
|
</p>
|
||||||
<p class="text-center text-xs text-yellow-500 cursor-pointer">
|
<p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
|
||||||
<RouterLink :to="{name:'changelogs.app'}"> APP {{ APP_VERSION }} </RouterLink> <RouterLink :to="{name:'changelogs.core'}"> API {{ $page.app.version }} </RouterLink>
|
APP {{ APP_VERSION }} API {{ $page.app.version }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="h-full"
|
class="h-full"
|
||||||
:class="{'w-[calc(100vw-17rem)] md:w-0 bg-transparent':leftSidebar.isOpened,'md:w-0':leftSidebar.isClosed}"
|
:class="{'w-[calc(100vw-17rem)] dark:bg-black/40 md:w-0 bg-black/20':leftSidebar.isOpened,'md:w-0':leftSidebar.isClosed}"
|
||||||
@click="leftSidebar.toggle()"
|
@click="leftSidebar.toggle()"
|
||||||
></div>
|
></div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -12,6 +12,9 @@ import TailwindScreen from '@Plugins/TailwindScreen'
|
|||||||
import { pagePlugin } from '@Services/Page';
|
import { pagePlugin } from '@Services/Page';
|
||||||
import { defineApp, reloadApp, view } from '@Services/Page';
|
import { defineApp, reloadApp, view } from '@Services/Page';
|
||||||
import { apiURL } from '@Services/Api';
|
import { apiURL } from '@Services/Api';
|
||||||
|
import VueApexCharts from "vue3-apexcharts";
|
||||||
|
import VCalendar from 'v-calendar'
|
||||||
|
import 'v-calendar/style.css';
|
||||||
|
|
||||||
import App from '@Components/App.vue'
|
import App from '@Components/App.vue'
|
||||||
import Error503 from '@Pages/Errors/503.vue'
|
import Error503 from '@Pages/Errors/503.vue'
|
||||||
@ -63,6 +66,8 @@ async function boot() {
|
|||||||
.use(pagePlugin)
|
.use(pagePlugin)
|
||||||
.use(router)
|
.use(router)
|
||||||
.use(ZiggyVue)
|
.use(ZiggyVue)
|
||||||
|
.use(VCalendar, {})
|
||||||
|
.use(VueApexCharts)
|
||||||
.mount('#app');
|
.mount('#app');
|
||||||
} else {
|
} else {
|
||||||
createApp(Error503)
|
createApp(Error503)
|
||||||
|
|||||||
135
src/layouts/AdminLayout.vue
Normal file
135
src/layouts/AdminLayout.vue
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import useLoader from '@Stores/Loader';
|
||||||
|
import { hasPermission } from '@Plugins/RolePermission';
|
||||||
|
|
||||||
|
import Layout from '@Holos/Layout/App.vue';
|
||||||
|
import Link from '@Holos/Skeleton/Sidebar/Link.vue';
|
||||||
|
import Section from '@Holos/Skeleton/Sidebar/Section.vue';
|
||||||
|
|
||||||
|
/** Definidores */
|
||||||
|
const loader = useLoader()
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
defineProps({
|
||||||
|
title: String,
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
|
onMounted(() => {
|
||||||
|
loader.boot()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Layout
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
|
|
||||||
|
<template #leftSidebar>
|
||||||
|
<Section name="Principal">
|
||||||
|
<Link
|
||||||
|
icon="grid_view"
|
||||||
|
name="Dashboard"
|
||||||
|
to="admin.dashboard.index"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="people"
|
||||||
|
name="Empleados"
|
||||||
|
to="admin.employees.index"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="school"
|
||||||
|
name="Historial Académico"
|
||||||
|
to="admin.academic.index"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="security"
|
||||||
|
name="Seguridad y Salud"
|
||||||
|
to="admin.security.index"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="payments"
|
||||||
|
name="Nómina"
|
||||||
|
to="admin.payroll.index"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="info"
|
||||||
|
name="Información Adicional"
|
||||||
|
to="admin.additional.index"
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
|
<Section name="Capacitaciones">
|
||||||
|
<Link
|
||||||
|
icon="grid_view"
|
||||||
|
name="Solicitud de Cursos"
|
||||||
|
to="admin.courses.request"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="grid_view"
|
||||||
|
name="Cursos"
|
||||||
|
to="admin.courses.index"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="grid_view"
|
||||||
|
name="Asignación de Cursos"
|
||||||
|
to="admin.courses.assignamment"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="grid_view"
|
||||||
|
name="Calendario de Cursos"
|
||||||
|
to="admin.courses.calendar"
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
|
<Section name="Eventos">
|
||||||
|
<Link
|
||||||
|
icon="grid_view"
|
||||||
|
name="Dashboard"
|
||||||
|
to="admin.events.index"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="grid_view"
|
||||||
|
name="Asignación de presupuesto"
|
||||||
|
to="admin.events.assignamment"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="grid_view"
|
||||||
|
name="Justificación de gastos"
|
||||||
|
to="admin.events.justification"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
icon="grid_view"
|
||||||
|
name="Reportes de gastos"
|
||||||
|
to="admin.events.reports"
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
|
<Section
|
||||||
|
v-if="hasPermission('users.index')"
|
||||||
|
:name="$t('admin.title')"
|
||||||
|
>
|
||||||
|
<!-- <Link
|
||||||
|
v-if="hasPermission('users.index')"
|
||||||
|
icon="people"
|
||||||
|
name="users.title"
|
||||||
|
to="admin.users.index"
|
||||||
|
/> -->
|
||||||
|
<Link
|
||||||
|
v-if="hasPermission('roles.index')"
|
||||||
|
icon="license"
|
||||||
|
name="roles.title"
|
||||||
|
to="admin.roles.index"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
v-if="hasPermission('activities.index')"
|
||||||
|
icon="event"
|
||||||
|
name="history.title"
|
||||||
|
to="admin.activities.index"
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
|
</template>
|
||||||
|
<!-- Contenido -->
|
||||||
|
<RouterView />
|
||||||
|
<!-- Fin contenido -->
|
||||||
|
</Layout>
|
||||||
|
</template>
|
||||||
@ -1,7 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import useLoader from '@Stores/Loader';
|
import useLoader from '@Stores/Loader';
|
||||||
import { hasPermission } from '@Plugins/RolePermission';
|
|
||||||
|
|
||||||
import Layout from '@Holos/Layout/App.vue';
|
import Layout from '@Holos/Layout/App.vue';
|
||||||
import Link from '@Holos/Skeleton/Sidebar/Link.vue';
|
import Link from '@Holos/Skeleton/Sidebar/Link.vue';
|
||||||
@ -26,42 +25,22 @@ onMounted(() => {
|
|||||||
<Layout
|
<Layout
|
||||||
:title="title"
|
:title="title"
|
||||||
>
|
>
|
||||||
|
|
||||||
<template #leftSidebar>
|
<template #leftSidebar>
|
||||||
<Section name="Principal">
|
<Section name="Principal">
|
||||||
<Link
|
<Link
|
||||||
icon="monitoring"
|
icon="monitoring"
|
||||||
name="dashboard"
|
name="Dashboard"
|
||||||
to="dashboard.index"
|
to="dashboard.index"
|
||||||
/>
|
/>
|
||||||
<Link
|
<Link
|
||||||
icon="person"
|
icon="person"
|
||||||
name="profile"
|
name="Perfil"
|
||||||
to="profile.show"
|
to="profile.show"
|
||||||
/>
|
/>
|
||||||
</Section>
|
</Section>
|
||||||
<Section
|
<Section
|
||||||
v-if="hasPermission('users.index')"
|
|
||||||
:name="$t('admin.title')"
|
:name="$t('admin.title')"
|
||||||
>
|
>
|
||||||
<Link
|
|
||||||
v-if="hasPermission('users.index')"
|
|
||||||
icon="people"
|
|
||||||
name="users.title"
|
|
||||||
to="admin.users.index"
|
|
||||||
/>
|
|
||||||
<Link
|
|
||||||
v-if="hasPermission('roles.index')"
|
|
||||||
icon="license"
|
|
||||||
name="roles.title"
|
|
||||||
to="admin.roles.index"
|
|
||||||
/>
|
|
||||||
<Link
|
|
||||||
v-if="hasPermission('activities.index')"
|
|
||||||
icon="event"
|
|
||||||
name="history.title"
|
|
||||||
to="admin.activities.index"
|
|
||||||
/>
|
|
||||||
</Section>
|
</Section>
|
||||||
</template>
|
</template>
|
||||||
<!-- Contenido -->
|
<!-- Contenido -->
|
||||||
|
|||||||
45
src/layouts/CoordinatorLayout.vue
Normal file
45
src/layouts/CoordinatorLayout.vue
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import useLoader from '@Stores/Loader';
|
||||||
|
|
||||||
|
import Layout from '@Holos/Layout/App.vue';
|
||||||
|
import Link from '@Holos/Skeleton/Sidebar/Link.vue';
|
||||||
|
import Section from '@Holos/Skeleton/Sidebar/Section.vue';
|
||||||
|
|
||||||
|
/** Definidores */
|
||||||
|
const loader = useLoader()
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
defineProps({
|
||||||
|
title: String,
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
|
onMounted(() => {
|
||||||
|
loader.boot()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Layout
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
|
<template #leftSidebar>
|
||||||
|
<Section name="Principal">
|
||||||
|
<Link
|
||||||
|
icon="monitoring"
|
||||||
|
name="Dashboard"
|
||||||
|
to="coordinator.dashboard.index"
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
|
<Section
|
||||||
|
:name="$t('admin.title')"
|
||||||
|
>
|
||||||
|
</Section>
|
||||||
|
</template>
|
||||||
|
<!-- Contenido -->
|
||||||
|
<RouterView />
|
||||||
|
<!-- Fin contenido -->
|
||||||
|
</Layout>
|
||||||
|
</template>
|
||||||
@ -1,61 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { onMounted } from 'vue';
|
|
||||||
import useLoader from '@Stores/Loader';
|
|
||||||
|
|
||||||
import Layout from '@/components/Holos/Layout/RhApp.vue';
|
|
||||||
import Link from '@Holos/Skeleton/Sidebar/Link.vue';
|
|
||||||
|
|
||||||
/** Definidores */
|
|
||||||
const loader = useLoader()
|
|
||||||
|
|
||||||
/** Propiedades */
|
|
||||||
defineProps({
|
|
||||||
title: String,
|
|
||||||
});
|
|
||||||
|
|
||||||
/** Ciclos */
|
|
||||||
onMounted(() => {
|
|
||||||
loader.boot()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<Layout
|
|
||||||
:title="title"
|
|
||||||
>
|
|
||||||
<template #leftSidebar>
|
|
||||||
<Link
|
|
||||||
icon="grid_view"
|
|
||||||
name="Dashboard"
|
|
||||||
to="dashboard.index"
|
|
||||||
/>
|
|
||||||
<Link
|
|
||||||
icon="people"
|
|
||||||
name="Empleados"
|
|
||||||
to="employees.index"
|
|
||||||
/>
|
|
||||||
<Link
|
|
||||||
icon="school"
|
|
||||||
name="Historial Académico"
|
|
||||||
to="academic.index"
|
|
||||||
/>
|
|
||||||
<Link
|
|
||||||
icon="security"
|
|
||||||
name="Seguridad y Salud"
|
|
||||||
to="security.index"
|
|
||||||
/>
|
|
||||||
<Link
|
|
||||||
icon="payments"
|
|
||||||
name="Nómina"
|
|
||||||
to="payroll.index"
|
|
||||||
/>
|
|
||||||
<Link
|
|
||||||
icon="info"
|
|
||||||
name="Información Adicional"
|
|
||||||
to="additional.index"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<!-- Contenido -->
|
|
||||||
<RouterView />
|
|
||||||
<!-- Fin contenido -->
|
|
||||||
</Layout>
|
|
||||||
</template>
|
|
||||||
281
src/pages/Courses/Assignamment.vue
Normal file
281
src/pages/Courses/Assignamment.vue
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
// Datos de cursos aprobados
|
||||||
|
const approvedCourses = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'React Avanzado y GraphQL',
|
||||||
|
area: 'Desarrollo',
|
||||||
|
cost: 499.00
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'Certified Ethical Hacker (CEH)',
|
||||||
|
area: 'Seguridad',
|
||||||
|
cost: 1199.00
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'Cisco CCNA 200-301',
|
||||||
|
area: 'Redes',
|
||||||
|
cost: 300.00
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Lista de personal
|
||||||
|
const personnel = ref([
|
||||||
|
{ id: 1, name: 'Ana García', selected: false },
|
||||||
|
{ id: 2, name: 'Carlos Mendoza', selected: false },
|
||||||
|
{ id: 3, name: 'Laura Jiménez', selected: false },
|
||||||
|
{ id: 4, name: 'Luis Martínez', selected: false },
|
||||||
|
{ id: 5, name: 'Carla Torres', selected: false },
|
||||||
|
{ id: 6, name: 'Pedro Ramírez', selected: false }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Estado del formulario
|
||||||
|
const selectedCourse = ref(approvedCourses.value[0]);
|
||||||
|
const startDate = ref('');
|
||||||
|
const endDate = ref('');
|
||||||
|
const examDate = ref('');
|
||||||
|
const showDropdown = ref(false);
|
||||||
|
|
||||||
|
// Computed para mostrar el curso seleccionado
|
||||||
|
const selectedCourseDisplay = computed(() => {
|
||||||
|
if (selectedCourse.value) {
|
||||||
|
return `${selectedCourse.value.name} (${selectedCourse.value.area})`;
|
||||||
|
}
|
||||||
|
return 'Seleccionar curso...';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Computed para contar personal seleccionado
|
||||||
|
const selectedPersonnelCount = computed(() => {
|
||||||
|
return personnel.value.filter(p => p.selected).length;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Funciones
|
||||||
|
const togglePersonnel = (person) => {
|
||||||
|
person.selected = !person.selected;
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectAllPersonnel = () => {
|
||||||
|
const allSelected = personnel.value.every(p => p.selected);
|
||||||
|
personnel.value.forEach(p => p.selected = !allSelected);
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectCourse = (course) => {
|
||||||
|
selectedCourse.value = course;
|
||||||
|
showDropdown.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveAssignment = () => {
|
||||||
|
const selectedPersonnelList = personnel.value.filter(p => p.selected);
|
||||||
|
console.log('Guardar asignación:', {
|
||||||
|
course: selectedCourse.value,
|
||||||
|
personnel: selectedPersonnelList,
|
||||||
|
startDate: startDate.value,
|
||||||
|
endDate: endDate.value,
|
||||||
|
examDate: examDate.value
|
||||||
|
});
|
||||||
|
// Aquí implementarías la lógica para guardar
|
||||||
|
};
|
||||||
|
|
||||||
|
const notifyPersonnel = () => {
|
||||||
|
const selectedPersonnelList = personnel.value.filter(p => p.selected);
|
||||||
|
console.log('Notificar personal:', {
|
||||||
|
course: selectedCourse.value,
|
||||||
|
personnel: selectedPersonnelList
|
||||||
|
});
|
||||||
|
// Aquí implementarías la lógica para notificar
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatCurrency = (amount) => {
|
||||||
|
return new Intl.NumberFormat('es-MX', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'USD'
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-6 max-w-auto mx-auto">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Asignación de Cursos a Personal</h1>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Asigna cursos aprobados al personal seleccionado</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card principal -->
|
||||||
|
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||||
|
|
||||||
|
<!-- Selección de Curso -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Seleccionar Curso Aprobado
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<button
|
||||||
|
@click="showDropdown = !showDropdown"
|
||||||
|
class="w-full px-4 py-3 text-left bg-white border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
>
|
||||||
|
<span class="block truncate">{{ selectedCourseDisplay }}</span>
|
||||||
|
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||||
|
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Dropdown -->
|
||||||
|
<div
|
||||||
|
v-if="showDropdown"
|
||||||
|
class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-primary-d dark:border-primary/20"
|
||||||
|
>
|
||||||
|
<div class="max-h-60 overflow-auto">
|
||||||
|
<div
|
||||||
|
v-for="course in approvedCourses"
|
||||||
|
:key="course.id"
|
||||||
|
@click="selectCourse(course)"
|
||||||
|
class="px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 border-b border-gray-100 dark:border-primary/20 last:border-b-0"
|
||||||
|
>
|
||||||
|
<div class="font-medium text-gray-900 dark:text-primary-dt">{{ course.name }}</div>
|
||||||
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">
|
||||||
|
{{ course.area }} • {{ formatCurrency(course.cost) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Asignación de Personal -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
|
||||||
|
Asignar a personal
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
@click="selectAllPersonnel"
|
||||||
|
class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
|
||||||
|
>
|
||||||
|
{{ personnel.every(p => p.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div
|
||||||
|
v-for="person in personnel"
|
||||||
|
:key="person.id"
|
||||||
|
@click="togglePersonnel(person)"
|
||||||
|
class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
|
||||||
|
>
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input
|
||||||
|
:checked="person.selected"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
|
||||||
|
@click.stop
|
||||||
|
@change="togglePersonnel(person)"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
|
||||||
|
{{ person.name }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
|
||||||
|
{{ selectedPersonnelCount }} persona(s) seleccionada(s)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fechas -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||||
|
<!-- Fecha de Inicio -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Fecha de Inicio
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
v-model="startDate"
|
||||||
|
type="date"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
>
|
||||||
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||||
|
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fecha de Fin -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Fecha de Fin
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
v-model="endDate"
|
||||||
|
type="date"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
>
|
||||||
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||||
|
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fecha de Examen -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Fecha de Examen
|
||||||
|
</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
v-model="examDate"
|
||||||
|
type="date"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
>
|
||||||
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||||
|
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botones de Acción -->
|
||||||
|
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 dark:border-primary/20">
|
||||||
|
<button
|
||||||
|
@click="saveAssignment"
|
||||||
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt dark:hover:bg-primary/10"
|
||||||
|
>
|
||||||
|
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="save" />
|
||||||
|
Guardar
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="notifyPersonnel"
|
||||||
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2"
|
||||||
|
>
|
||||||
|
<GoogleIcon class="text-white text-xl" name="notifications" />
|
||||||
|
Notificar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
411
src/pages/Courses/Calendar.vue
Normal file
411
src/pages/Courses/Calendar.vue
Normal file
@ -0,0 +1,411 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p-5 bg-slate-50 min-h-screen">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="mb-5 flex items-center justify-between">
|
||||||
|
<h2 class="text-2xl font-semibold text-slate-800 m-0">Calendario de Cursos Programados</h2>
|
||||||
|
|
||||||
|
<!-- Estadísticas del mes actual -->
|
||||||
|
<div class="flex items-center gap-4 text-sm">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-3 h-3 bg-blue-500 rounded"></div>
|
||||||
|
<span class="text-slate-600">{{ getCurrentMonthInfo.totalCursos }} Cursos</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-3 h-3 bg-red-500 rounded"></div>
|
||||||
|
<span class="text-slate-600">{{ getCurrentMonthInfo.totalExamenes }} Exámenes</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Calendar Container -->
|
||||||
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
||||||
|
<!-- Header personalizado -->
|
||||||
|
<div class="flex items-center justify-between px-5 py-4 bg-white border-b border-slate-200">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-sm text-slate-500 font-medium">Vista Mensual</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<!-- Navegación del mes -->
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button @click="previousMonth" class="p-1 hover:bg-slate-100 rounded">
|
||||||
|
<svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<h3 class="text-lg font-semibold text-slate-800 min-w-[140px] text-center">
|
||||||
|
{{ formatMonth(selectedDate) }}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<button @click="nextMonth" class="p-1 hover:bg-slate-100 rounded">
|
||||||
|
<svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botones de vista -->
|
||||||
|
<div class="flex gap-1 bg-slate-100 p-1 rounded-md">
|
||||||
|
<button class="px-3 py-1 text-xs font-medium rounded bg-slate-800 text-white transition-all">month</button>
|
||||||
|
<button class="px-3 py-1 text-xs font-medium rounded text-slate-500 hover:bg-slate-200 transition-all">week</button>
|
||||||
|
<button class="px-3 py-1 text-xs font-medium rounded text-slate-500 hover:bg-slate-200 transition-all">list</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<VCalendar
|
||||||
|
:key="calendarKey"
|
||||||
|
v-model="selectedDate"
|
||||||
|
:attributes="attributes"
|
||||||
|
:locale="locale"
|
||||||
|
view="monthly"
|
||||||
|
expanded
|
||||||
|
borderless
|
||||||
|
:title-position="'none'"
|
||||||
|
class="custom-calendar"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
|
// Fecha seleccionada
|
||||||
|
const selectedDate = ref(new Date(2025, 8, 1)) // Septiembre 1, 2025
|
||||||
|
|
||||||
|
// Key para forzar re-render del calendario
|
||||||
|
const calendarKey = ref(0)
|
||||||
|
|
||||||
|
// Configuración de idioma
|
||||||
|
const locale = {
|
||||||
|
id: 'es',
|
||||||
|
firstDayOfWeek: 1, // Lunes como primer día
|
||||||
|
masks: {
|
||||||
|
weekdays: 'WWW',
|
||||||
|
months: 'MMMM',
|
||||||
|
title: 'MMMM YYYY'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Datos de los cursos programados por mes
|
||||||
|
const cursosData = {
|
||||||
|
// Septiembre 2025
|
||||||
|
'2025-09': [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: 'Curso React (A. García, C. Mendoza)',
|
||||||
|
instructor: 'A. García, C. Mendoza',
|
||||||
|
dates: [new Date(2025, 8, 5), new Date(2025, 8, 7)], // 5 y 7 de septiembre
|
||||||
|
color: 'blue',
|
||||||
|
tipo: 'curso'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: 'EXAMEN: React',
|
||||||
|
dates: [new Date(2025, 8, 9)], // 9 de septiembre
|
||||||
|
color: 'red',
|
||||||
|
tipo: 'examen'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: 'Curso CEH (P. Ramírez, L. Torres)',
|
||||||
|
instructor: 'P. Ramírez, L. Torres',
|
||||||
|
dates: [new Date(2025, 8, 17), new Date(2025, 8, 21)], // 17 y 21 de septiembre
|
||||||
|
color: 'green',
|
||||||
|
tipo: 'curso'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: 'Curso Python (S. Hernández)',
|
||||||
|
instructor: 'S. Hernández',
|
||||||
|
dates: [new Date(2025, 8, 18)], // 18 de septiembre
|
||||||
|
color: 'orange',
|
||||||
|
tipo: 'curso'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: 'Curso AWS (L. Martínez)',
|
||||||
|
instructor: 'L. Martínez',
|
||||||
|
dates: [new Date(2025, 8, 19), new Date(2025, 8, 21)], // 19 y 21 de septiembre
|
||||||
|
color: 'purple',
|
||||||
|
tipo: 'curso'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: 'EXAMEN: CEH',
|
||||||
|
dates: [new Date(2025, 8, 24)], // 24 de septiembre
|
||||||
|
color: 'red',
|
||||||
|
tipo: 'examen'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
// Octubre 2025 - Cursos de ejemplo
|
||||||
|
'2025-10': [
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
title: 'Curso Vue.js (M. López, R. Silva)',
|
||||||
|
instructor: 'M. López, R. Silva',
|
||||||
|
dates: [new Date(2025, 9, 3), new Date(2025, 9, 5)], // 3 y 5 de octubre
|
||||||
|
color: 'green',
|
||||||
|
tipo: 'curso'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
title: 'EXAMEN: Vue.js',
|
||||||
|
dates: [new Date(2025, 9, 10)], // 10 de octubre
|
||||||
|
color: 'red',
|
||||||
|
tipo: 'examen'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
title: 'Curso Docker (J. Rodríguez)',
|
||||||
|
instructor: 'J. Rodríguez',
|
||||||
|
dates: [new Date(2025, 9, 15), new Date(2025, 9, 17), new Date(2025, 9, 19)], // 15, 17 y 19 de octubre
|
||||||
|
color: 'blue',
|
||||||
|
tipo: 'curso'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
title: 'Curso Kubernetes (A. Morales)',
|
||||||
|
instructor: 'A. Morales',
|
||||||
|
dates: [new Date(2025, 9, 22), new Date(2025, 9, 24)], // 22 y 24 de octubre
|
||||||
|
color: 'purple',
|
||||||
|
tipo: 'curso'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
title: 'EXAMEN: DevOps',
|
||||||
|
dates: [new Date(2025, 9, 29)], // 29 de octubre
|
||||||
|
color: 'red',
|
||||||
|
tipo: 'examen'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
// Agosto 2025 - Cursos de ejemplo
|
||||||
|
'2025-08': [
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
title: 'Curso Angular (P. Fernández)',
|
||||||
|
instructor: 'P. Fernández',
|
||||||
|
dates: [new Date(2025, 7, 5), new Date(2025, 7, 7), new Date(2025, 7, 9)], // 5, 7 y 9 de agosto
|
||||||
|
color: 'red',
|
||||||
|
tipo: 'curso'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
title: 'Curso Node.js (C. García)',
|
||||||
|
instructor: 'C. García',
|
||||||
|
dates: [new Date(2025, 7, 12), new Date(2025, 7, 14)], // 12 y 14 de agosto
|
||||||
|
color: 'green',
|
||||||
|
tipo: 'curso'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
title: 'EXAMEN: Full Stack',
|
||||||
|
dates: [new Date(2025, 7, 20)], // 20 de agosto
|
||||||
|
color: 'red',
|
||||||
|
tipo: 'examen'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
title: 'Curso MongoDB (L. Torres)',
|
||||||
|
instructor: 'L. Torres',
|
||||||
|
dates: [new Date(2025, 7, 26), new Date(2025, 7, 28)], // 26 y 28 de agosto
|
||||||
|
color: 'orange',
|
||||||
|
tipo: 'curso'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convertir datos a atributos de v-calendar
|
||||||
|
const attributes = computed(() => {
|
||||||
|
const currentMonthKey = `${selectedDate.value.getFullYear()}-${String(selectedDate.value.getMonth() + 1).padStart(2, '0')}`
|
||||||
|
const currentMonthCursos = cursosData[currentMonthKey] || []
|
||||||
|
|
||||||
|
const attrs = []
|
||||||
|
|
||||||
|
currentMonthCursos.forEach(curso => {
|
||||||
|
curso.dates.forEach(date => {
|
||||||
|
attrs.push({
|
||||||
|
key: `${curso.id}-${date.getTime()}`,
|
||||||
|
dot: false,
|
||||||
|
bar: {
|
||||||
|
style: {
|
||||||
|
backgroundColor: getColorCode(curso.color),
|
||||||
|
height: '4px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
label: curso.title,
|
||||||
|
visibility: 'hover'
|
||||||
|
},
|
||||||
|
customData: {
|
||||||
|
title: curso.title,
|
||||||
|
instructor: curso.instructor,
|
||||||
|
tipo: curso.tipo,
|
||||||
|
color: curso.color
|
||||||
|
},
|
||||||
|
dates: date
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
return attrs
|
||||||
|
})
|
||||||
|
|
||||||
|
// Función para obtener el mes actual con eventos
|
||||||
|
const getCurrentMonthInfo = computed(() => {
|
||||||
|
const currentMonthKey = `${selectedDate.value.getFullYear()}-${String(selectedDate.value.getMonth() + 1).padStart(2, '0')}`
|
||||||
|
const currentMonthCursos = cursosData[currentMonthKey] || []
|
||||||
|
|
||||||
|
return {
|
||||||
|
key: currentMonthKey,
|
||||||
|
totalCursos: currentMonthCursos.filter(curso => curso.tipo === 'curso').length,
|
||||||
|
totalExamenes: currentMonthCursos.filter(curso => curso.tipo === 'examen').length,
|
||||||
|
eventos: currentMonthCursos
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Función para obtener códigos de color
|
||||||
|
function getColorCode(color) {
|
||||||
|
const colors = {
|
||||||
|
blue: '#3b82f6',
|
||||||
|
red: '#ef4444',
|
||||||
|
green: '#22c55e',
|
||||||
|
orange: '#f97316',
|
||||||
|
purple: '#8b5cf6'
|
||||||
|
}
|
||||||
|
return colors[color] || '#6b7280'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navegación del calendario
|
||||||
|
function previousMonth() {
|
||||||
|
const currentDate = new Date(selectedDate.value)
|
||||||
|
currentDate.setMonth(currentDate.getMonth() - 1)
|
||||||
|
currentDate.setDate(1)
|
||||||
|
selectedDate.value = currentDate
|
||||||
|
|
||||||
|
// Forzar re-render del calendario
|
||||||
|
calendarKey.value++
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextMonth() {
|
||||||
|
const currentDate = new Date(selectedDate.value)
|
||||||
|
currentDate.setMonth(currentDate.getMonth() + 1)
|
||||||
|
currentDate.setDate(1)
|
||||||
|
selectedDate.value = currentDate
|
||||||
|
|
||||||
|
// Forzar re-render del calendario
|
||||||
|
calendarKey.value++
|
||||||
|
}
|
||||||
|
|
||||||
|
// Formatear el mes
|
||||||
|
function formatMonth(date) {
|
||||||
|
return date.toLocaleDateString('es-ES', {
|
||||||
|
month: 'long',
|
||||||
|
year: 'numeric'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Solo estilos esenciales que no se pueden hacer con Tailwind */
|
||||||
|
:deep(.vc-container) {
|
||||||
|
border: none;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ocultar el header original de v-calendar */
|
||||||
|
:deep(.vc-header) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-weekday) {
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #64748b;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
text-transform: lowercase;
|
||||||
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day) {
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
min-height: 100px;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day-content) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day-number) {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #374151;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day.is-today .vc-day-number) {
|
||||||
|
background: #3b82f6;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day.is-not-in-month) {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day.is-not-in-month .vc-day-number) {
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-bars) {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-bar) {
|
||||||
|
margin-bottom: 0.125rem;
|
||||||
|
border-radius: 0.125rem;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mejorar los bordes del calendario */
|
||||||
|
:deep(.vc-weeks) {
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-weekdays) {
|
||||||
|
border-left: 1px solid #e2e8f0;
|
||||||
|
border-right: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsivo */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
:deep(.vc-day) {
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day-content) {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-weekday) {
|
||||||
|
padding: 0.5rem 0.25rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
187
src/pages/Courses/Index.vue
Normal file
187
src/pages/Courses/Index.vue
Normal file
@ -0,0 +1,187 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
// Datos de ejemplo de los cursos
|
||||||
|
const courses = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
area: 'Desarrollo',
|
||||||
|
courseName: 'React Avanzado y GraphQL',
|
||||||
|
unitCost: 499.00,
|
||||||
|
url: 'https://example.com/react-avanzado',
|
||||||
|
status: 'pending'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
area: 'Seguridad',
|
||||||
|
courseName: 'Certified Ethical Hacker (CEH)',
|
||||||
|
unitCost: 1199.00,
|
||||||
|
url: 'https://example.com/ceh',
|
||||||
|
status: 'pending'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
area: 'Redes',
|
||||||
|
courseName: 'Cisco CCNA 200-301',
|
||||||
|
unitCost: 300.00,
|
||||||
|
url: 'https://example.com/ccna',
|
||||||
|
status: 'pending'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Funciones para las acciones
|
||||||
|
const viewCourse = (course) => {
|
||||||
|
console.log('Ver curso:', course.courseName);
|
||||||
|
// Aquí puedes implementar la lógica para ver el curso
|
||||||
|
};
|
||||||
|
|
||||||
|
const approveCourse = (course) => {
|
||||||
|
console.log('Aprobar curso:', course.courseName);
|
||||||
|
course.status = 'approved';
|
||||||
|
// Aquí puedes implementar la lógica para aprobar el curso
|
||||||
|
};
|
||||||
|
|
||||||
|
const rejectCourse = (course) => {
|
||||||
|
console.log('Rechazar curso:', course.courseName);
|
||||||
|
course.status = 'rejected';
|
||||||
|
// Aquí puedes implementar la lógica para rechazar el curso
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatCurrency = (amount) => {
|
||||||
|
return new Intl.NumberFormat('es-MX', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'USD'
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-6 max-w-auto mx-auto">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Gestión de Solicitudes de Capacitación</h1>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Administra y aprueba las solicitudes de cursos de capacitación</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card principal con tabla -->
|
||||||
|
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||||
|
<!-- Tabla de cursos -->
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr class="border-b border-gray-100 dark:border-primary/20">
|
||||||
|
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Área</th>
|
||||||
|
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Nombre del Curso</th>
|
||||||
|
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Costo Unitario</th>
|
||||||
|
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Url</th>
|
||||||
|
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Opciones</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="course in courses"
|
||||||
|
:key="course.id"
|
||||||
|
class="border-b border-gray-50 dark:border-primary/10 hover:bg-gray-50 dark:hover:bg-primary/5"
|
||||||
|
>
|
||||||
|
<!-- Área -->
|
||||||
|
<td class="py-4 px-4">
|
||||||
|
<span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
|
||||||
|
{{ course.area }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Nombre del curso -->
|
||||||
|
<td class="py-4 px-4">
|
||||||
|
<div class="font-medium text-gray-900 dark:text-primary-dt">
|
||||||
|
{{ course.courseName }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Costo unitario -->
|
||||||
|
<td class="py-4 px-4">
|
||||||
|
<div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
|
||||||
|
{{ formatCurrency(course.unitCost) }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- URL -->
|
||||||
|
<td class="py-4 px-4">
|
||||||
|
<a
|
||||||
|
:href="course.url"
|
||||||
|
target="_blank"
|
||||||
|
class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
|
||||||
|
>
|
||||||
|
Ver curso
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Opciones -->
|
||||||
|
<td class="py-4 px-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<!-- Botón Ver -->
|
||||||
|
<button
|
||||||
|
@click="viewCourse(course)"
|
||||||
|
class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-primary-dt dark:hover:bg-primary/10"
|
||||||
|
title="Ver detalles"
|
||||||
|
>
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Botón Aprobar -->
|
||||||
|
<button
|
||||||
|
@click="approveCourse(course)"
|
||||||
|
class="p-2 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-green-400 dark:hover:bg-green-900/20"
|
||||||
|
title="Aprobar curso"
|
||||||
|
>
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Botón Rechazar -->
|
||||||
|
<button
|
||||||
|
@click="rejectCourse(course)"
|
||||||
|
class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-red-400 dark:hover:bg-red-900/20"
|
||||||
|
title="Rechazar curso"
|
||||||
|
>
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer con estadísticas -->
|
||||||
|
<div class="mt-6 border-t border-gray-100 pt-4 flex items-center justify-between dark:border-primary/20">
|
||||||
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">
|
||||||
|
Mostrando {{ courses.length }} solicitudes
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="flex items-center gap-2 text-sm">
|
||||||
|
<span class="w-3 h-3 bg-yellow-400 rounded-full"></span>
|
||||||
|
<span class="text-gray-600 dark:text-primary-dt/70">Pendientes: {{ courses.filter(c => c.status === 'pending').length }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-sm">
|
||||||
|
<span class="w-3 h-3 bg-green-400 rounded-full"></span>
|
||||||
|
<span class="text-gray-600 dark:text-primary-dt/70">Aprobadas: {{ courses.filter(c => c.status === 'approved').length }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-sm">
|
||||||
|
<span class="w-3 h-3 bg-red-400 rounded-full"></span>
|
||||||
|
<span class="text-gray-600 dark:text-primary-dt/70">Rechazadas: {{ courses.filter(c => c.status === 'rejected').length }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
232
src/pages/Courses/Request.vue
Normal file
232
src/pages/Courses/Request.vue
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
// Estado del formulario
|
||||||
|
const formData = ref({
|
||||||
|
courseName: '',
|
||||||
|
cost: '',
|
||||||
|
description: '',
|
||||||
|
certificationName: '',
|
||||||
|
certificationType: '',
|
||||||
|
duration: '',
|
||||||
|
courseUrl: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
// Lista de personal a capacitar
|
||||||
|
const personnelToTrain = ref([
|
||||||
|
{ name: 'Ana García', department: 'Desarrollo' },
|
||||||
|
{ name: 'Luis Martínez', department: 'Redes' },
|
||||||
|
{ name: 'Carla Torres', department: 'Sistemas' },
|
||||||
|
{ name: 'Pedro Ramírez', department: 'Seguridad' },
|
||||||
|
{ name: 'Sofía Hernandez', department: 'Ventas' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Función para enviar la solicitud
|
||||||
|
const submitRequest = () => {
|
||||||
|
console.log('Enviar solicitud:', formData.value);
|
||||||
|
|
||||||
|
// Validación básica
|
||||||
|
if (!formData.value.courseName || !formData.value.cost || !formData.value.description) {
|
||||||
|
alert('Por favor, completa todos los campos obligatorios');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Aquí implementarías la lógica para enviar la solicitud
|
||||||
|
alert('Solicitud enviada correctamente');
|
||||||
|
|
||||||
|
// Limpiar formulario
|
||||||
|
formData.value = {
|
||||||
|
courseName: '',
|
||||||
|
cost: '',
|
||||||
|
description: '',
|
||||||
|
certificationName: '',
|
||||||
|
certificationType: '',
|
||||||
|
duration: '',
|
||||||
|
courseUrl: ''
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para validar URL
|
||||||
|
const isValidUrl = (url) => {
|
||||||
|
if (!url) return true; // Campo opcional
|
||||||
|
try {
|
||||||
|
new URL(url);
|
||||||
|
return true;
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-6 max-w-auto mx-auto">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Solicitud de Nuevo Curso</h1>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Completa la información para solicitar un nuevo curso de capacitación</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card principal -->
|
||||||
|
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||||
|
|
||||||
|
<!-- Formulario -->
|
||||||
|
<form @submit.prevent="submitRequest" class="space-y-6">
|
||||||
|
|
||||||
|
<!-- Campos del formulario en dos columnas -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
|
||||||
|
<!-- Columna izquierda -->
|
||||||
|
<div class="space-y-6">
|
||||||
|
|
||||||
|
<!-- Nombre del Curso -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Nombre del Curso *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="formData.courseName"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="Ingresa el nombre del curso"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Costo (USD) -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Costo (USD) *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="formData.cost"
|
||||||
|
type="number"
|
||||||
|
required
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="0.00"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Breve descripción del curso -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Breve descripción del curso *
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
v-model="formData.description"
|
||||||
|
required
|
||||||
|
rows="4"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="Describe brevemente el contenido y objetivos del curso"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nombre de la certificación a obtener -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Nombre de la certificación a obtener
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="formData.certificationName"
|
||||||
|
type="text"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="Ej: Certificación AWS Solutions Architect"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Columna derecha -->
|
||||||
|
<div class="space-y-6">
|
||||||
|
|
||||||
|
<!-- Tipo de Certificación -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Tipo de Certificación
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="formData.certificationType"
|
||||||
|
type="text"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="Ej: Técnica, Profesional, Oficial"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Duración (días) -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Duración (días)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="formData.duration"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="Número de días"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- URL del curso -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
URL del curso
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="formData.courseUrl"
|
||||||
|
type="url"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="https://ejemplo.com/curso"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sección de Personal a Capacitar -->
|
||||||
|
<div class="mt-8">
|
||||||
|
<h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center gap-2 dark:text-primary-dt">
|
||||||
|
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="people" />
|
||||||
|
Personal a capacitar
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="bg-gray-50 rounded-lg p-4 dark:bg-primary/5">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
|
<div
|
||||||
|
v-for="person in personnelToTrain"
|
||||||
|
:key="person.name"
|
||||||
|
class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200 dark:bg-primary-d dark:border-primary/20"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="font-medium text-gray-900 dark:text-primary-dt">{{ person.name }}</div>
|
||||||
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ person.department }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
|
||||||
|
{{ person.department }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botón de Enviar -->
|
||||||
|
<div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2 transition-colors"
|
||||||
|
>
|
||||||
|
<GoogleIcon class="text-white text-xl" name="send" />
|
||||||
|
Enviar Solicitud
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
274
src/pages/Dashboard/Admin.vue
Normal file
274
src/pages/Dashboard/Admin.vue
Normal file
@ -0,0 +1,274 @@
|
|||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
import VueApexCharts from 'vue3-apexcharts';
|
||||||
|
|
||||||
|
// Props
|
||||||
|
const props = defineProps({
|
||||||
|
adminInfo: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
charts: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Datos procesados para los charts
|
||||||
|
const chartData = computed(() => {
|
||||||
|
// Datos para el gráfico de línea (Solicitudes por Mes)
|
||||||
|
const monthlyData = props.charts.requests_by_month || [];
|
||||||
|
const lineChartCategories = monthlyData.map(item => item.month_name);
|
||||||
|
const lineChartSeries = [{
|
||||||
|
name: 'Solicitudes',
|
||||||
|
data: monthlyData.map(item => item.total_requests)
|
||||||
|
}];
|
||||||
|
|
||||||
|
// Datos para el gráfico de dona (Solicitudes por Departamento)
|
||||||
|
const departmentData = props.charts.requests_by_department || [];
|
||||||
|
const donutChartLabels = departmentData.map(item => item.department_name);
|
||||||
|
const donutChartSeries = departmentData.map(item => item.total_requests);
|
||||||
|
|
||||||
|
return {
|
||||||
|
lineChartCategories,
|
||||||
|
lineChartSeries,
|
||||||
|
donutChartLabels,
|
||||||
|
donutChartSeries
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Datos para el gráfico de línea (Solicitudes por Mes) - Solo para admin
|
||||||
|
const lineChartOptions = computed(() => ({
|
||||||
|
chart: {
|
||||||
|
type: 'line',
|
||||||
|
height: 350,
|
||||||
|
toolbar: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
background: 'transparent'
|
||||||
|
},
|
||||||
|
colors: ['#3b82f6'],
|
||||||
|
stroke: {
|
||||||
|
curve: 'smooth',
|
||||||
|
width: 3
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||||
|
strokeDashArray: 3,
|
||||||
|
xaxis: {
|
||||||
|
lines: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
lines: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: chartData.value.lineChartCategories,
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: '#64748b',
|
||||||
|
fontSize: '12px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisBorder: {
|
||||||
|
color: 'rgba(148, 163, 184, 0.2)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
min: 0,
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: '#64748b',
|
||||||
|
fontSize: '12px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
markers: {
|
||||||
|
size: 6,
|
||||||
|
colors: ['#3b82f6'],
|
||||||
|
strokeColors: '#fff',
|
||||||
|
strokeWidth: 2,
|
||||||
|
hover: {
|
||||||
|
size: 8
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
theme: 'dark'
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
const lineChartSeries = computed(() => chartData.value.lineChartSeries);
|
||||||
|
|
||||||
|
// Datos para el gráfico de dona (Solicitudes por Departamento) - Solo para admin
|
||||||
|
const donutChartOptions = computed(() => ({
|
||||||
|
chart: {
|
||||||
|
type: 'donut',
|
||||||
|
height: 350
|
||||||
|
},
|
||||||
|
colors: ['#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#3b82f6', '#f97316'],
|
||||||
|
labels: chartData.value.donutChartLabels,
|
||||||
|
legend: {
|
||||||
|
position: 'right',
|
||||||
|
fontSize: '14px',
|
||||||
|
labels: {
|
||||||
|
colors: '#64748b'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
pie: {
|
||||||
|
donut: {
|
||||||
|
size: '60%'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
formatter: function(val, opts) {
|
||||||
|
return opts.w.config.series[opts.seriesIndex]
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fontSize: '14px',
|
||||||
|
colors: ['#fff']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
theme: 'dark'
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
const donutChartSeries = computed(() => chartData.value.donutChartSeries);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Banner de bienvenida -->
|
||||||
|
<section
|
||||||
|
class="relative mb-8 overflow-hidden rounded-2xl bg-gradient-to-r from-indigo-600 to-purple-600 text-white"
|
||||||
|
>
|
||||||
|
<div class="relative z-10 p-6 md:p-8">
|
||||||
|
<p class="text-2xl md:text-3xl font-semibold">
|
||||||
|
Bienvenido, {{ $page.user.name }}
|
||||||
|
</p>
|
||||||
|
<p class="mt-2 text-white/90">
|
||||||
|
Administra el sistema de vacaciones y supervisa el rendimiento organizacional.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Tarjetas de KPIs -->
|
||||||
|
<section class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
|
||||||
|
<!-- Total Empleados -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="group" class="text-blue-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">Total Empleados</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ adminInfo.total_users }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Solicitudes Este Mes -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="description" class="text-blue-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">Solicitudes Este Mes</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ adminInfo.monthly_requests }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Solicitudes Aprobadas -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="check_circle" class="text-emerald-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">Solicitudes Aprobadas</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ adminInfo.approved_requests }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Eficiencia Aprobación -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="trending_up" class="text-emerald-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">Eficiencia Aprobación</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ adminInfo.approval_efficiency }}%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Gráficos -->
|
||||||
|
<section v-if="charts.requests_by_month && charts.requests_by_department" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||||
|
<!-- Gráfico de Solicitudes por Mes -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
|
||||||
|
<div class="mb-6 flex items-center gap-3">
|
||||||
|
<GoogleIcon name="trending_up" class="text-blue-500 text-2xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Solicitudes por Mes</h3>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400">Tendencia de solicitudes durante el año</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="h-80">
|
||||||
|
<VueApexCharts
|
||||||
|
type="line"
|
||||||
|
height="100%"
|
||||||
|
:options="lineChartOptions"
|
||||||
|
:series="lineChartSeries"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Gráfico de Solicitudes por Departamento -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
|
||||||
|
<div class="mb-6 flex items-center gap-3">
|
||||||
|
<GoogleIcon name="pie_chart" class="text-purple-500 text-2xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Solicitudes por Departamento</h3>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400">Distribución de solicitudes por área</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="h-80">
|
||||||
|
<VueApexCharts
|
||||||
|
type="donut"
|
||||||
|
height="100%"
|
||||||
|
:options="donutChartOptions"
|
||||||
|
:series="donutChartSeries"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Estado vacío para charts -->
|
||||||
|
<section v-else class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
|
||||||
|
<div class="text-center py-12">
|
||||||
|
<GoogleIcon name="analytics" class="text-slate-400 text-6xl mx-auto mb-4" />
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||||
|
No hay datos de gráficos disponibles
|
||||||
|
</h3>
|
||||||
|
<p class="text-slate-500 dark:text-slate-400">
|
||||||
|
Los gráficos se mostrarán cuando haya datos de solicitudes disponibles.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
341
src/pages/Dashboard/Coordinator.vue
Normal file
341
src/pages/Dashboard/Coordinator.vue
Normal file
@ -0,0 +1,341 @@
|
|||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
// Props
|
||||||
|
const props = defineProps({
|
||||||
|
vacations: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
vacationsRequests: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
coordinatorInfo: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
lastVacationRequests: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
employeeStatusDepartment: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Banner de bienvenida -->
|
||||||
|
<section
|
||||||
|
class="relative mb-8 overflow-hidden rounded-2xl bg-gradient-to-r from-purple-600 to-indigo-600 text-white"
|
||||||
|
>
|
||||||
|
<div class="relative z-10 p-6 md:p-8">
|
||||||
|
<p class="text-2xl md:text-3xl font-semibold">
|
||||||
|
Bienvenido, {{ $page.user.name }}
|
||||||
|
</p>
|
||||||
|
<p class="mt-2 text-white/90">
|
||||||
|
Coordina y gestiona las solicitudes de vacaciones de tu equipo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<h2 class="mb-6 text-xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
Gestión del Equipo
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<!-- Tarjetas de KPIs -->
|
||||||
|
<section class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
|
||||||
|
<!-- Solicitudes Pendientes -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="schedule" class="text-amber-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">Solicitudes Pendientes</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ coordinatorInfo.pending_requests }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Conflictos Detectados -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="warning" class="text-red-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">Conflictos Detectados</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ coordinatorInfo.conflicts }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Miembros del Equipo -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="group" class="text-blue-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">Miembros del Equipo</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ coordinatorInfo.department_employees }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Aprobadas Este Mes -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="check_circle" class="text-emerald-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">Aprobadas Este Mes</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ coordinatorInfo.approved_requests_current_month }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contenido principal -->
|
||||||
|
<section class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||||
|
<!-- Solicitudes Pendientes -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
|
||||||
|
<div class="mb-6 flex items-center gap-3">
|
||||||
|
<GoogleIcon name="schedule" class="text-amber-500 text-2xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Solicitudes Pendientes</h3>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400">Solicitudes que requieren tu aprobación</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="lastVacationRequests.length > 0" class="space-y-4">
|
||||||
|
<div
|
||||||
|
v-for="request in lastVacationRequests"
|
||||||
|
:key="request.user.id"
|
||||||
|
class="rounded-lg border border-slate-200 p-4 dark:border-slate-700"
|
||||||
|
>
|
||||||
|
<div class="mb-3 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-slate-900 dark:text-slate-100">{{ request.user.name }}</p>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{{ request.number_of_days }} día{{ request.number_of_days !== 1 ? 's' : '' }}
|
||||||
|
({{ request.count_periods }} período{{ request.count_periods !== 1 ? 's' : '' }})
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span v-if="request.have_conflict" class="rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-700 dark:bg-red-500/10 dark:text-red-400">
|
||||||
|
Conflicto
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mensaje de conflicto -->
|
||||||
|
<div v-if="request.have_conflict" class="mb-4 rounded-md bg-red-50 p-3 dark:bg-red-500/10">
|
||||||
|
<p class="text-sm text-red-700 dark:text-red-400">Hay conflicto en alguno de los periodos de vacaciones</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botones de acción -->
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button v-if="!request.have_conflict" class="flex items-center gap-1 rounded-md bg-emerald-600 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-700 with-transition">
|
||||||
|
<GoogleIcon name="check" class="text-sm" />
|
||||||
|
Aprobar
|
||||||
|
</button>
|
||||||
|
<button v-if="!request.have_conflict" class="flex items-center gap-1 rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-700 with-transition">
|
||||||
|
<GoogleIcon name="close" class="text-sm" />
|
||||||
|
Rechazar
|
||||||
|
</button>
|
||||||
|
<button v-if="request.have_conflict" class="flex items-center gap-1 rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 with-transition">
|
||||||
|
<GoogleIcon name="visibility" class="text-sm" />
|
||||||
|
Revisar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="text-center py-8">
|
||||||
|
<GoogleIcon name="check_circle" class="text-emerald-400 text-4xl mx-auto mb-2" />
|
||||||
|
<p class="text-slate-500 dark:text-slate-400">No hay solicitudes pendientes</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Ver todas las solicitudes -->
|
||||||
|
<div class="mt-4 text-center">
|
||||||
|
<button class="inline-flex items-center gap-1 text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
|
||||||
|
Ver todas las solicitudes
|
||||||
|
<GoogleIcon name="chevron_right" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Mi Equipo -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
|
||||||
|
<div class="mb-6 flex items-center gap-3">
|
||||||
|
<GoogleIcon name="group" class="text-blue-500 text-2xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Mi Equipo</h3>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400">Estado actual de los miembros de tu equipo</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="employeeStatusDepartment.length > 0" class="space-y-3">
|
||||||
|
<div
|
||||||
|
v-for="employee in employeeStatusDepartment"
|
||||||
|
:key="employee.id"
|
||||||
|
class="flex items-center justify-between rounded-lg border border-slate-200 p-4 dark:border-slate-700"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-slate-900 dark:text-slate-100">{{ employee.name }}</p>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
{{ employee.vacation_days_available }} día{{ employee.vacation_days_available !== 1 ? 's' : '' }} disponibles
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
:class="{
|
||||||
|
'rounded-full px-3 py-1 text-xs font-medium': true,
|
||||||
|
'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400': employee.status_ek == 'Disponible',
|
||||||
|
'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400': employee.status_ek == 'En vacaciones'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ employee.status_ek }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="text-center py-8">
|
||||||
|
<GoogleIcon name="group_off" class="text-slate-400 text-4xl mx-auto mb-2" />
|
||||||
|
<p class="text-slate-500 dark:text-slate-400">No hay miembros en el equipo</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Gestionar equipo -->
|
||||||
|
<div class="mt-4 text-center">
|
||||||
|
<button class="inline-flex items-center gap-1 text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
|
||||||
|
Gestionar equipo
|
||||||
|
<GoogleIcon name="chevron_right" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Mi Información de Vacaciones -->
|
||||||
|
|
||||||
|
<h2 class="mt-8A text-xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
Mis Vacaciones Personales
|
||||||
|
</h2>
|
||||||
|
<section class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
|
||||||
|
<!-- Días disponibles -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="check_circle" class="text-emerald-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Mis Días Disponibles
|
||||||
|
</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{{ vacations.available_days }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">
|
||||||
|
Disponible
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Próxima renovación -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="event" class="text-sky-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Próxima Renovación
|
||||||
|
</h3>
|
||||||
|
<div class="flex items-end gap-2">
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{{ vacations.next_renewal_date ? (() => { const date = new Date(vacations.next_renewal_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Solicitudes activas -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="hourglass_top" class="text-amber-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Mis Solicitudes Activas
|
||||||
|
</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{{ vacations.active_requests }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700 dark:bg-amber-500/10 dark:text-amber-400">
|
||||||
|
Pendientes
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Días usados -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="task_alt" class="text-indigo-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">Mis Días Usados</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.used_days }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Mis Solicitudes Recientes -->
|
||||||
|
<section class="mt-8 rounded-2xl bg-white p-6 shadow dark:bg-slate-800">
|
||||||
|
<h3 class="mb-4 text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||||
|
Mis Solicitudes Recientes
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div v-if="vacationsRequests?.length == 0" class="text-center py-8">
|
||||||
|
<GoogleIcon name="inbox" class="text-slate-400 text-4xl mx-auto mb-2" />
|
||||||
|
<p class="text-slate-500 dark:text-slate-400">No tienes solicitudes recientes</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="vacationsRequests?.length > 0" class="space-y-3">
|
||||||
|
<div
|
||||||
|
v-for="request in vacationsRequests"
|
||||||
|
class="flex items-center justify-between rounded-lg border border-slate-200 p-4 dark:border-slate-700"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">{{ request.first_period_start }} - {{ request.last_period_end }}</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-400">{{ request.total_days }} días</p>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
:class="{
|
||||||
|
'rounded-full px-3 py-1 text-xs font-medium': true,
|
||||||
|
'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400': request.status === 'pendiente',
|
||||||
|
'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400': request.status === 'aprobada',
|
||||||
|
'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400': request.status === 'rechazada'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ request.status }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4">
|
||||||
|
<RouterLink to="/vacations" class="inline-flex items-center gap-1 text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
|
||||||
|
Ver todas mis solicitudes
|
||||||
|
<GoogleIcon name="chevron_right" />
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
247
src/pages/Dashboard/Employee.vue
Normal file
247
src/pages/Dashboard/Employee.vue
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
// Props
|
||||||
|
const props = defineProps({
|
||||||
|
vacations: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
vacationsRequests: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Banner de bienvenida -->
|
||||||
|
<section
|
||||||
|
class="relative mb-8 overflow-hidden rounded-2xl bg-gradient-to-r from-blue-600 to-sky-600 text-white"
|
||||||
|
>
|
||||||
|
<div class="relative z-10 p-6 md:p-8">
|
||||||
|
<p class="text-2xl md:text-3xl font-semibold">
|
||||||
|
Bienvenido, {{ $page.user.name }}
|
||||||
|
</p>
|
||||||
|
<p class="mt-2 text-white/90">
|
||||||
|
Gestiona tus solicitudes de vacaciones y revisa tu información.
|
||||||
|
</p>
|
||||||
|
<div class="mt-6">
|
||||||
|
<RouterLink to="/vacations/create">
|
||||||
|
<PrimaryButton
|
||||||
|
type="button"
|
||||||
|
class="hover:scale-[1.02] with-transition"
|
||||||
|
v-text="'Solicitar Vacaciones'"
|
||||||
|
/>
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Tarjetas de KPIs -->
|
||||||
|
<section class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
|
||||||
|
<!-- Días disponibles -->
|
||||||
|
<article
|
||||||
|
class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="check_circle" class="text-emerald-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Días Disponibles
|
||||||
|
</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{{ vacations.available_days }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400"
|
||||||
|
>
|
||||||
|
Disponible
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Próxima renovación -->
|
||||||
|
<article
|
||||||
|
class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
|
||||||
|
>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="event" class="text-sky-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Próxima Renovación
|
||||||
|
</h3>
|
||||||
|
<div class="flex items-end gap-2">
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{{ vacations.next_renewal_date ? (() => { const date = new Date(vacations.next_renewal_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Solicitudes activas -->
|
||||||
|
<article
|
||||||
|
class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="hourglass_top" class="text-amber-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Solicitudes Activas
|
||||||
|
</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{{ vacations.active_requests }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700 dark:bg-amber-500/10 dark:text-amber-400"
|
||||||
|
>
|
||||||
|
Pendientes
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Días usados -->
|
||||||
|
<article
|
||||||
|
class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<GoogleIcon name="task_alt" class="text-indigo-500 text-5xl" />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm text-slate-500 dark:text-slate-400">Días Usados</h3>
|
||||||
|
<p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.used_days }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Acciones rápidas y solicitudes recientes -->
|
||||||
|
<section class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||||
|
<!-- Acciones rápidas -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
|
||||||
|
<div class="mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||||
|
Acciones Rápidas
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Gestiona tus vacaciones de forma rápida
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<RouterLink
|
||||||
|
to="/vacations/create"
|
||||||
|
class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 with-transition hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-700/40"
|
||||||
|
>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<GoogleIcon name="add" class="text-sky-500 text-2xl" />
|
||||||
|
<span class="font-medium">Nueva Solicitud de Vacaciones</span>
|
||||||
|
</div>
|
||||||
|
<GoogleIcon name="chevron_right" class="text-slate-400" />
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
<RouterLink
|
||||||
|
to="/vacations"
|
||||||
|
class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 with-transition hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-700/40"
|
||||||
|
>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<GoogleIcon name="format_list_bulleted" class="text-indigo-500 text-2xl" />
|
||||||
|
<span class="font-medium">Ver Mis Solicitudes</span>
|
||||||
|
</div>
|
||||||
|
<GoogleIcon name="chevron_right" class="text-slate-400" />
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
<RouterLink
|
||||||
|
to="/profile"
|
||||||
|
class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 with-transition hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-700/40"
|
||||||
|
>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<GoogleIcon name="person" class="text-emerald-500 text-2xl" />
|
||||||
|
<span class="font-medium">Mi Perfil</span>
|
||||||
|
</div>
|
||||||
|
<GoogleIcon name="chevron_right" class="text-slate-400" />
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Solicitudes recientes -->
|
||||||
|
<article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
|
||||||
|
<h3 class="mb-4 text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||||
|
Solicitudes Recientes
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div v-if="vacationsRequests?.length == 0" class="text-center py-8">
|
||||||
|
<GoogleIcon name="inbox" class="text-slate-400 text-4xl mx-auto mb-2" />
|
||||||
|
<p class="text-slate-500 dark:text-slate-400">No tienes solicitudes recientes</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="vacationsRequests?.length > 0" class="space-y-3">
|
||||||
|
<div
|
||||||
|
v-for="request in vacationsRequests"
|
||||||
|
class="flex items-center justify-between rounded-lg border border-slate-200 p-4 dark:border-slate-700"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium">{{ request.first_period_start }} - {{ request.last_period_end }}</p>
|
||||||
|
<p class="text-xs text-slate-500 dark:text-slate-400">{{ request.total_days }} días</p>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
:class="{
|
||||||
|
'rounded-full px-3 py-1 text-xs font-medium': true,
|
||||||
|
'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400': request.status === 'pendiente',
|
||||||
|
'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400': request.status === 'aprobada',
|
||||||
|
'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400': request.status === 'rechazada'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ request.status }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4">
|
||||||
|
<RouterLink to="/vacations" class="inline-flex items-center gap-1 text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
|
||||||
|
Ver todas las solicitudes
|
||||||
|
<GoogleIcon name="chevron_right" />
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Resumen -->
|
||||||
|
<section
|
||||||
|
class="mt-8 rounded-2xl bg-white p-6 shadow dark:bg-slate-800"
|
||||||
|
>
|
||||||
|
<h3 class="mb-4 text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||||
|
Resumen de Vacaciones
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.available_days }}</p>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400">Días Disponibles</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.used_days }}</p>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400">Días Usados</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.total_days_in_period }}</p>
|
||||||
|
<p class="text-sm text-slate-500 dark:text-slate-400">Total del Período</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 text-center text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
<p>Período: {{ vacations.period_start_date ? (() => { const date = new Date(vacations.period_start_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }} - {{ vacations.period_end_date ? (() => { const date = new Date(vacations.period_end_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }}</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
183
src/pages/Events/Assignamment.vue
Normal file
183
src/pages/Events/Assignamment.vue
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
// Estado del presupuesto
|
||||||
|
const budgetItems = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
concept: 'Ej. Catering para evento X',
|
||||||
|
amount: 1500.00
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
let nextId = 5;
|
||||||
|
|
||||||
|
// Computed para calcular el total
|
||||||
|
const totalBudget = computed(() => {
|
||||||
|
return budgetItems.value.reduce((total, item) => {
|
||||||
|
return total + (parseFloat(item.amount) || 0);
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Función para agregar nueva fila
|
||||||
|
const addBudgetItem = () => {
|
||||||
|
budgetItems.value.push({
|
||||||
|
id: nextId++,
|
||||||
|
concept: '',
|
||||||
|
amount: 0
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para eliminar fila
|
||||||
|
const removeBudgetItem = (id) => {
|
||||||
|
if (budgetItems.value.length > 1) {
|
||||||
|
budgetItems.value = budgetItems.value.filter(item => item.id !== id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para guardar presupuesto
|
||||||
|
const saveBudget = () => {
|
||||||
|
// Filtrar elementos vacíos
|
||||||
|
const validItems = budgetItems.value.filter(item =>
|
||||||
|
item.concept.trim() !== '' && item.amount > 0
|
||||||
|
);
|
||||||
|
|
||||||
|
if (validItems.length === 0) {
|
||||||
|
alert('Por favor, agrega al menos un elemento al presupuesto');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Guardar presupuesto:', {
|
||||||
|
items: validItems,
|
||||||
|
total: totalBudget.value
|
||||||
|
});
|
||||||
|
|
||||||
|
// Aquí implementarías la lógica para guardar
|
||||||
|
alert(`Presupuesto guardado correctamente. Total: $${totalBudget.value.toFixed(2)}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para formatear moneda
|
||||||
|
const formatCurrency = (amount) => {
|
||||||
|
return new Intl.NumberFormat('es-MX', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'USD'
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-6 max-w-auto mx-auto">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Asignación de Presupuesto Anual</h1>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestiona y asigna el presupuesto anual para eventos y actividades</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card principal -->
|
||||||
|
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||||
|
|
||||||
|
<!-- Formulario de presupuesto -->
|
||||||
|
<div class="space-y-6">
|
||||||
|
|
||||||
|
<!-- Filas de presupuesto -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in budgetItems"
|
||||||
|
:key="item.id"
|
||||||
|
class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end"
|
||||||
|
>
|
||||||
|
|
||||||
|
<!-- Campo Concepto -->
|
||||||
|
<div class="md:col-span-5">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Concepto
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="item.concept"
|
||||||
|
type="text"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
:placeholder="index === 0 ? 'Ej. Catering para evento X' : 'Ingresa el concepto'"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Campo Monto -->
|
||||||
|
<div class="md:col-span-4">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Monto (USD)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model.number="item.amount"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="0.00"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botón de eliminar -->
|
||||||
|
<div class="md:col-span-3 flex justify-end">
|
||||||
|
<button
|
||||||
|
v-if="budgetItems.length > 1"
|
||||||
|
@click="removeBudgetItem(item.id)"
|
||||||
|
type="button"
|
||||||
|
class="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900/20"
|
||||||
|
title="Eliminar fila"
|
||||||
|
>
|
||||||
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Resumen del presupuesto -->
|
||||||
|
<div class="mt-8 p-4 bg-gray-50 rounded-lg dark:bg-primary/5">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="account_balance_wallet" />
|
||||||
|
<span class="text-lg font-medium text-gray-800 dark:text-primary-dt">Total del Presupuesto:</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-2xl font-bold text-[#2563eb] dark:text-primary-dt">
|
||||||
|
{{ formatCurrency(totalBudget) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botones de acción -->
|
||||||
|
<div class="flex items-center justify-between pt-6 border-t border-gray-100 dark:border-primary/20">
|
||||||
|
|
||||||
|
<!-- Botón Agregar más -->
|
||||||
|
<button
|
||||||
|
@click="addBudgetItem"
|
||||||
|
type="button"
|
||||||
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16M20 12H4"></path>
|
||||||
|
</svg>
|
||||||
|
+ Agregar más
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Botón Guardar Presupuesto -->
|
||||||
|
<button
|
||||||
|
@click="saveBudget"
|
||||||
|
type="button"
|
||||||
|
class="inline-flex items-center gap-2 px-6 py-2 rounded-lg bg-[#2563eb] hover:bg-[#1e40af] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-2 transition-colors"
|
||||||
|
>
|
||||||
|
<GoogleIcon class="text-white text-xl" name="save" />
|
||||||
|
Guardar Presupuesto
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
284
src/pages/Events/Index.vue
Normal file
284
src/pages/Events/Index.vue
Normal file
@ -0,0 +1,284 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed, onMounted } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
import VueApexCharts from 'vue3-apexcharts';
|
||||||
|
|
||||||
|
// Datos del dashboard
|
||||||
|
const dashboardData = ref({
|
||||||
|
annualBudget: 50000,
|
||||||
|
justifiedExpenses: 32500,
|
||||||
|
remainingBalance: 17500,
|
||||||
|
expenseDistribution: [
|
||||||
|
{ name: 'Catering', value: 45, color: '#3B82F6' },
|
||||||
|
{ name: 'Marketing', value: 25, color: '#EF4444' },
|
||||||
|
{ name: 'Viáticos', value: 15, color: '#F97316' },
|
||||||
|
{ name: 'Otros', value: 10, color: '#6B7280' },
|
||||||
|
{ name: 'Renta de Equipo', value: 5, color: '#10B981' }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Configuración del gráfico de pie
|
||||||
|
const chartOptions = ref({
|
||||||
|
chart: {
|
||||||
|
type: 'pie',
|
||||||
|
height: 400,
|
||||||
|
fontFamily: 'Inter, sans-serif'
|
||||||
|
},
|
||||||
|
labels: dashboardData.value.expenseDistribution.map(item => item.name),
|
||||||
|
colors: dashboardData.value.expenseDistribution.map(item => item.color),
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
formatter: function (val) {
|
||||||
|
return val + "%"
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
colors: ['#fff']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: 'bottom',
|
||||||
|
horizontalAlign: 'center',
|
||||||
|
fontSize: '14px',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
markers: {
|
||||||
|
width: 12,
|
||||||
|
height: 12,
|
||||||
|
radius: 2
|
||||||
|
},
|
||||||
|
itemMargin: {
|
||||||
|
horizontal: 10,
|
||||||
|
vertical: 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
pie: {
|
||||||
|
donut: {
|
||||||
|
size: '0%'
|
||||||
|
},
|
||||||
|
expandOnClick: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
y: {
|
||||||
|
formatter: function (val) {
|
||||||
|
return val + "%"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
responsive: [{
|
||||||
|
breakpoint: 768,
|
||||||
|
options: {
|
||||||
|
chart: {
|
||||||
|
height: 300
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: 'bottom'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Datos del gráfico
|
||||||
|
const chartSeries = computed(() => {
|
||||||
|
return dashboardData.value.expenseDistribution.map(item => item.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Función para formatear moneda
|
||||||
|
const formatCurrency = (amount) => {
|
||||||
|
return new Intl.NumberFormat('es-MX', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'USD',
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: 0
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para calcular porcentaje
|
||||||
|
const calculatePercentage = (value, total) => {
|
||||||
|
return ((value / total) * 100).toFixed(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Computed para el porcentaje de gastos
|
||||||
|
const expensesPercentage = computed(() => {
|
||||||
|
return calculatePercentage(dashboardData.value.justifiedExpenses, dashboardData.value.annualBudget);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Computed para el porcentaje de saldo restante
|
||||||
|
const remainingPercentage = computed(() => {
|
||||||
|
return calculatePercentage(dashboardData.value.remainingBalance, dashboardData.value.annualBudget);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// Aquí podrías cargar datos reales desde tu API
|
||||||
|
console.log('Dashboard de eventos cargado');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-6 max-w-auto mx-auto">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Dashboard de Eventos</h1>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Resumen financiero y distribución de gastos por concepto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tarjetas de métricas -->
|
||||||
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
|
||||||
|
<!-- Presupuesto Anual -->
|
||||||
|
<div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-medium text-gray-500 dark:text-primary-dt/70">Presupuesto Anual</h3>
|
||||||
|
<p class="mt-2 text-3xl font-bold text-blue-600 dark:text-blue-400">
|
||||||
|
{{ formatCurrency(dashboardData.annualBudget) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center dark:bg-blue-900/30">
|
||||||
|
<GoogleIcon class="text-blue-600 dark:text-blue-400 text-xl" name="account_balance_wallet" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Gastos Justificados -->
|
||||||
|
<div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-medium text-gray-500 dark:text-primary-dt/70">Gastos Justificados</h3>
|
||||||
|
<p class="mt-2 text-3xl font-bold text-green-600 dark:text-green-400">
|
||||||
|
{{ formatCurrency(dashboardData.justifiedExpenses) }}
|
||||||
|
</p>
|
||||||
|
<p class="mt-1 text-xs text-gray-500 dark:text-primary-dt/50">
|
||||||
|
{{ expensesPercentage }}% del presupuesto
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center dark:bg-green-900/30">
|
||||||
|
<GoogleIcon class="text-green-600 dark:text-green-400 text-xl" name="check_circle" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Saldo Restante -->
|
||||||
|
<div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-medium text-gray-500 dark:text-primary-dt/70">Saldo Restante</h3>
|
||||||
|
<p class="mt-2 text-3xl font-bold text-amber-600 dark:text-amber-400">
|
||||||
|
{{ formatCurrency(dashboardData.remainingBalance) }}
|
||||||
|
</p>
|
||||||
|
<p class="mt-1 text-xs text-gray-500 dark:text-primary-dt/50">
|
||||||
|
{{ remainingPercentage }}% del presupuesto
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center dark:bg-amber-900/30">
|
||||||
|
<GoogleIcon class="text-amber-600 dark:text-amber-400 text-xl" name="savings" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Gráfica de distribución -->
|
||||||
|
<div class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||||
|
|
||||||
|
<!-- Título de la sección -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">
|
||||||
|
Distribución de Gastos por Concepto
|
||||||
|
</h2>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">
|
||||||
|
Porcentaje de gastos por categoría
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Gráfico de pie -->
|
||||||
|
<div class="flex flex-col lg:flex-row gap-6">
|
||||||
|
|
||||||
|
<!-- Gráfico -->
|
||||||
|
<div class="flex-1">
|
||||||
|
<VueApexCharts
|
||||||
|
type="pie"
|
||||||
|
:options="chartOptions"
|
||||||
|
:series="chartSeries"
|
||||||
|
height="400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Leyenda detallada -->
|
||||||
|
<div class="lg:w-80">
|
||||||
|
<div class="space-y-3">
|
||||||
|
<h3 class="text-lg font-medium text-gray-800 dark:text-primary-dt mb-4">
|
||||||
|
Detalle por Categoría
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in dashboardData.expenseDistribution"
|
||||||
|
:key="item.name"
|
||||||
|
class="flex items-center justify-between p-3 rounded-lg border border-gray-100 dark:border-primary/20"
|
||||||
|
>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div
|
||||||
|
class="w-4 h-4 rounded"
|
||||||
|
:style="{ backgroundColor: item.color }"
|
||||||
|
></div>
|
||||||
|
<span class="text-sm font-medium text-gray-700 dark:text-primary-dt">
|
||||||
|
{{ item.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<div class="text-sm font-bold text-gray-900 dark:text-primary-dt">
|
||||||
|
{{ item.value }}%
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-500 dark:text-primary-dt/50">
|
||||||
|
{{ formatCurrency((item.value / 100) * dashboardData.justifiedExpenses) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Resumen estadístico -->
|
||||||
|
<div class="mt-6 pt-6 border-t border-gray-100 dark:border-primary/20">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-gray-900 dark:text-primary-dt">
|
||||||
|
{{ dashboardData.expenseDistribution.length }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">
|
||||||
|
Categorías
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-gray-900 dark:text-primary-dt">
|
||||||
|
{{ Math.max(...dashboardData.expenseDistribution.map(item => item.value)) }}%
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">
|
||||||
|
Mayor gasto
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-gray-900 dark:text-primary-dt">
|
||||||
|
{{ Math.min(...dashboardData.expenseDistribution.map(item => item.value)) }}%
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">
|
||||||
|
Menor gasto
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
360
src/pages/Events/Justification.vue
Normal file
360
src/pages/Events/Justification.vue
Normal file
@ -0,0 +1,360 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
// Estado del formulario
|
||||||
|
const formData = ref({
|
||||||
|
eventName: '',
|
||||||
|
place: '',
|
||||||
|
description: '',
|
||||||
|
company: 'Empresa A',
|
||||||
|
participants: '',
|
||||||
|
provider: '',
|
||||||
|
assignedAmount: 5000,
|
||||||
|
cost: '',
|
||||||
|
spent: '',
|
||||||
|
observations: '',
|
||||||
|
justificationFile: null
|
||||||
|
});
|
||||||
|
|
||||||
|
// Opciones de empresas
|
||||||
|
const companies = ref([
|
||||||
|
'Empresa A',
|
||||||
|
'Empresa B',
|
||||||
|
'Empresa C',
|
||||||
|
'Empresa D'
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Computed para calcular la diferencia
|
||||||
|
const difference = computed(() => {
|
||||||
|
const assigned = parseFloat(formData.value.assignedAmount) || 0;
|
||||||
|
const spent = parseFloat(formData.value.spent) || 0;
|
||||||
|
return assigned - spent;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Función para manejar la subida de archivos
|
||||||
|
const handleFileUpload = (event) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
if (file.type === 'application/pdf') {
|
||||||
|
formData.value.justificationFile = file;
|
||||||
|
} else {
|
||||||
|
alert('Por favor, selecciona un archivo PDF válido');
|
||||||
|
event.target.value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para eliminar archivo
|
||||||
|
const removeFile = () => {
|
||||||
|
formData.value.justificationFile = null;
|
||||||
|
const fileInput = document.getElementById('justification-file');
|
||||||
|
if (fileInput) {
|
||||||
|
fileInput.value = '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para enviar justificación
|
||||||
|
const submitJustification = () => {
|
||||||
|
// Validación básica
|
||||||
|
if (!formData.value.eventName || !formData.value.place || !formData.value.description) {
|
||||||
|
alert('Por favor, completa todos los campos obligatorios');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.justificationFile) {
|
||||||
|
alert('Por favor, sube un archivo de justificación');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Enviar justificación:', formData.value);
|
||||||
|
|
||||||
|
// Aquí implementarías la lógica para enviar
|
||||||
|
alert('Justificación enviada correctamente');
|
||||||
|
|
||||||
|
// Limpiar formulario
|
||||||
|
formData.value = {
|
||||||
|
eventName: '',
|
||||||
|
place: '',
|
||||||
|
description: '',
|
||||||
|
company: 'Empresa A',
|
||||||
|
participants: '',
|
||||||
|
provider: '',
|
||||||
|
assignedAmount: 5000,
|
||||||
|
cost: '',
|
||||||
|
spent: '',
|
||||||
|
observations: '',
|
||||||
|
justificationFile: null
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para formatear moneda
|
||||||
|
const formatCurrency = (amount) => {
|
||||||
|
return new Intl.NumberFormat('es-MX', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'USD'
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-6 max-w-auto mx-auto">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Justificación de Gastos</h1>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Documenta y justifica los gastos realizados en eventos</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card principal -->
|
||||||
|
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||||
|
|
||||||
|
<!-- Formulario -->
|
||||||
|
<form @submit.prevent="submitJustification" class="space-y-6">
|
||||||
|
|
||||||
|
<!-- Detalles del Evento -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
|
||||||
|
<!-- Nombre del Evento -->
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Nombre del Evento *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="formData.eventName"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="Ingresa el nombre del evento"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lugar -->
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Lugar *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="formData.place"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="Ingresa el lugar del evento"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Descripción -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Descripción y Detalles *
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
v-model="formData.description"
|
||||||
|
required
|
||||||
|
rows="4"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="Describe los detalles del evento y los gastos realizados"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Detalles Financieros y Participantes -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
|
||||||
|
<!-- Empresa -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Empresa
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
v-model="formData.company"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
>
|
||||||
|
<option v-for="company in companies" :key="company" :value="company">
|
||||||
|
{{ company }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Número de Participantes -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Número de Participantes
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model.number="formData.participants"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="0"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Proveedor -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Proveedor
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model="formData.provider"
|
||||||
|
type="text"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="Nombre del proveedor"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Monto Asignado -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Monto Asignado (USD)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model.number="formData.assignedAmount"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="0.00"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Costo -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Costo (USD)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model.number="formData.cost"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="0.00"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Gastado -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Gastado (USD)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
v-model.number="formData.spent"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="0.00"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Resumen financiero -->
|
||||||
|
<div v-if="formData.assignedAmount > 0 || formData.spent > 0" class="p-4 bg-gray-50 rounded-lg dark:bg-primary/5">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Monto Asignado</div>
|
||||||
|
<div class="text-lg font-bold text-blue-600 dark:text-blue-400">
|
||||||
|
{{ formatCurrency(formData.assignedAmount) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Gastado</div>
|
||||||
|
<div class="text-lg font-bold text-red-600 dark:text-red-400">
|
||||||
|
{{ formatCurrency(formData.spent) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Diferencia</div>
|
||||||
|
<div class="text-lg font-bold" :class="difference >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
|
||||||
|
{{ formatCurrency(difference) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Observaciones -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Observaciones
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
v-model="formData.observations"
|
||||||
|
rows="3"
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||||
|
placeholder="Agrega observaciones adicionales si es necesario"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Subida de archivo -->
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||||
|
Subir justificante (PDF) *
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-[#7c3aed] transition-colors dark:border-primary/20 dark:hover:border-[#7c3aed]">
|
||||||
|
<div class="space-y-1 text-center">
|
||||||
|
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
|
||||||
|
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
<div class="flex text-sm text-gray-600 dark:text-primary-dt/70">
|
||||||
|
<label for="justification-file" class="relative cursor-pointer bg-white rounded-md font-medium text-[#7c3aed] hover:text-[#6d28d9] focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-[#7c3aed]">
|
||||||
|
<span>Sube un archivo</span>
|
||||||
|
<input
|
||||||
|
id="justification-file"
|
||||||
|
name="justification-file"
|
||||||
|
type="file"
|
||||||
|
accept=".pdf"
|
||||||
|
class="sr-only"
|
||||||
|
@change="handleFileUpload"
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
<p class="pl-1">o arrastra y suelta</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-primary-dt/50">
|
||||||
|
PDF hasta 10MB
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Archivo seleccionado -->
|
||||||
|
<div v-if="formData.justificationFile" class="mt-3 p-3 bg-green-50 border border-green-200 rounded-lg dark:bg-green-900/20 dark:border-green-800">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<GoogleIcon class="text-green-600 dark:text-green-400 text-xl" name="picture_as_pdf" />
|
||||||
|
<span class="text-sm font-medium text-green-800 dark:text-green-300">
|
||||||
|
{{ formData.justificationFile.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
@click="removeFile"
|
||||||
|
type="button"
|
||||||
|
class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botón de envío -->
|
||||||
|
<div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2 transition-colors"
|
||||||
|
>
|
||||||
|
<GoogleIcon class="text-white text-xl" name="send" />
|
||||||
|
Enviar Justificación
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
204
src/pages/Events/Reports.vue
Normal file
204
src/pages/Events/Reports.vue
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
// Datos de ejemplo de gastos
|
||||||
|
const expenses = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
date: '2024-08-15',
|
||||||
|
concept: 'Catering para evento X',
|
||||||
|
reason: 'Servicio de comida para 50 asistentes.',
|
||||||
|
amount: 1500.00,
|
||||||
|
justificationFile: 'catering_evento_x.pdf'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
date: '2024-08-14',
|
||||||
|
concept: 'Renta de equipo de audio',
|
||||||
|
reason: 'Micrófonos y bocinas para el auditorio.',
|
||||||
|
amount: 800.00,
|
||||||
|
justificationFile: 'renta_audio.pdf'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
date: '2024-08-10',
|
||||||
|
concept: 'Viáticos para conferencista',
|
||||||
|
reason: 'Vuelo y hospedaje para Dr. Smith.',
|
||||||
|
amount: 1250.00,
|
||||||
|
justificationFile: 'viaticos_dr_smith.pdf'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Computed para calcular el total
|
||||||
|
const totalExpenses = computed(() => {
|
||||||
|
return expenses.value.reduce((total, expense) => {
|
||||||
|
return total + expense.amount;
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Función para ver PDF
|
||||||
|
const viewPDF = (fileName) => {
|
||||||
|
console.log('Ver PDF:', fileName);
|
||||||
|
// Aquí implementarías la lógica para abrir el PDF
|
||||||
|
// Por ejemplo: window.open(`/pdfs/${fileName}`, '_blank');
|
||||||
|
alert(`Abriendo archivo: ${fileName}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para formatear moneda
|
||||||
|
const formatCurrency = (amount) => {
|
||||||
|
return new Intl.NumberFormat('es-MX', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'USD'
|
||||||
|
}).format(amount);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para formatear fecha
|
||||||
|
const formatDate = (dateString) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString('es-MX', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para exportar reporte
|
||||||
|
const exportReport = () => {
|
||||||
|
console.log('Exportar reporte:', expenses.value);
|
||||||
|
// Aquí implementarías la lógica para exportar el reporte
|
||||||
|
alert('Reporte exportado correctamente');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para filtrar por fecha
|
||||||
|
const filterByDate = () => {
|
||||||
|
// Aquí podrías implementar filtros por fecha
|
||||||
|
console.log('Filtrar por fecha');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="p-6 max-w-auto mx-auto">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Reporte de Gastos de Eventos</h1>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Consulta y gestiona los gastos realizados en eventos</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button
|
||||||
|
@click="filterByDate"
|
||||||
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt dark:hover:bg-primary/10"
|
||||||
|
>
|
||||||
|
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="filter_list" />
|
||||||
|
Filtrar
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="exportReport"
|
||||||
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#2563eb] hover:bg-[#1e40af] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-2"
|
||||||
|
>
|
||||||
|
<GoogleIcon class="text-white text-xl" name="download" />
|
||||||
|
Exportar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card principal -->
|
||||||
|
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||||
|
|
||||||
|
<!-- Tabla de gastos -->
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr class="border-b border-gray-100 dark:border-primary/20">
|
||||||
|
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">FECHA</th>
|
||||||
|
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">CONCEPTO</th>
|
||||||
|
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">RAZÓN</th>
|
||||||
|
<th class="text-right py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">MONTO</th>
|
||||||
|
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">JUSTIFICANTE</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="expense in expenses"
|
||||||
|
:key="expense.id"
|
||||||
|
class="border-b border-gray-50 dark:border-primary/10 hover:bg-gray-50 dark:hover:bg-primary/5"
|
||||||
|
>
|
||||||
|
<!-- Fecha -->
|
||||||
|
<td class="py-4 px-4">
|
||||||
|
<div class="text-sm text-gray-900 dark:text-primary-dt">
|
||||||
|
{{ formatDate(expense.date) }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Concepto -->
|
||||||
|
<td class="py-4 px-4">
|
||||||
|
<div class="font-medium text-gray-900 dark:text-primary-dt">
|
||||||
|
{{ expense.concept }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Razón -->
|
||||||
|
<td class="py-4 px-4">
|
||||||
|
<div class="text-sm text-gray-600 dark:text-primary-dt/70">
|
||||||
|
{{ expense.reason }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Monto -->
|
||||||
|
<td class="py-4 px-4 text-right">
|
||||||
|
<div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
|
||||||
|
{{ formatCurrency(expense.amount) }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Justificante -->
|
||||||
|
<td class="py-4 px-4">
|
||||||
|
<button
|
||||||
|
@click="viewPDF(expense.justificationFile)"
|
||||||
|
class="text-blue-600 hover:text-blue-800 underline text-sm font-medium dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
|
||||||
|
>
|
||||||
|
Ver PDF
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Resumen de gastos -->
|
||||||
|
<div class="mt-6 p-4 bg-gray-50 rounded-lg dark:bg-primary/5">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="account_balance_wallet" />
|
||||||
|
<span class="text-lg font-medium text-gray-800 dark:text-primary-dt">Total de Gastos:</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-2xl font-bold text-[#2563eb] dark:text-primary-dt">
|
||||||
|
{{ formatCurrency(totalExpenses) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer con estadísticas -->
|
||||||
|
<div class="mt-6 border-t border-gray-100 pt-4 flex items-center justify-between dark:border-primary/20">
|
||||||
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">
|
||||||
|
Mostrando {{ expenses.length }} gastos registrados
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="flex items-center gap-2 text-sm">
|
||||||
|
<span class="w-3 h-3 bg-blue-400 rounded-full"></span>
|
||||||
|
<span class="text-gray-600 dark:text-primary-dt/70">Total: {{ expenses.length }} registros</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-sm">
|
||||||
|
<span class="w-3 h-3 bg-green-400 rounded-full"></span>
|
||||||
|
<span class="text-gray-600 dark:text-primary-dt/70">Justificados: {{ expenses.length }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -16,7 +16,7 @@ const router = createRouter({
|
|||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
component: () => import('@Layouts/RhLayout.vue'),
|
component: () => import('@Layouts/AppLayout.vue'),
|
||||||
name: 'root',
|
name: 'root',
|
||||||
meta: {
|
meta: {
|
||||||
title: 'Inicio',
|
title: 'Inicio',
|
||||||
@ -32,56 +32,11 @@ const router = createRouter({
|
|||||||
{
|
{
|
||||||
path: 'dashboard',
|
path: 'dashboard',
|
||||||
name: 'dashboard.index',
|
name: 'dashboard.index',
|
||||||
component: () => import('@Pages/Dashboard/Index.vue'),
|
component: () => import('@Pages/Dashboard/Employee.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: 'Dashboard',
|
title: 'Dashboard',
|
||||||
icon: 'grid_view',
|
icon: 'grid_view',
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'employees',
|
|
||||||
name: 'employees.index',
|
|
||||||
component: () => import('@Pages/Employees/Index.vue'),
|
|
||||||
meta: {
|
|
||||||
title: 'Empleados',
|
|
||||||
icon: 'people',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'academic',
|
|
||||||
name: 'academic.index',
|
|
||||||
component: () => import('@Pages/Academic/Index.vue'),
|
|
||||||
meta: {
|
|
||||||
title: 'Historial Académico',
|
|
||||||
icon: 'school',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'security',
|
|
||||||
name: 'security.index',
|
|
||||||
component: () => import('@Pages/Security/Index.vue'),
|
|
||||||
meta: {
|
|
||||||
title: 'Seguridad y Salud',
|
|
||||||
icon: 'security',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'payroll',
|
|
||||||
name: 'payroll.index',
|
|
||||||
component: () => import('@Pages/Payroll/Index.vue'),
|
|
||||||
meta: {
|
|
||||||
title: 'Nómina',
|
|
||||||
icon: 'payments',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'additional',
|
|
||||||
name: 'additional.index',
|
|
||||||
component: () => import('@Pages/Additional/Index.vue'),
|
|
||||||
meta: {
|
|
||||||
title: 'Información Adicional',
|
|
||||||
icon: 'info',
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'profile',
|
path: 'profile',
|
||||||
@ -104,15 +59,203 @@ const router = createRouter({
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/admin',
|
path: '/coordinator',
|
||||||
name: 'admin',
|
name: 'coordinator',
|
||||||
component: () => import('@Layouts/AppLayout.vue'),
|
component: () => import('@Layouts/CoordinatorLayout.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: 'Inicio',
|
title: 'Inicio',
|
||||||
icon: 'home',
|
icon: 'home',
|
||||||
},
|
},
|
||||||
redirect: '/',
|
redirect: '/coordinator/dashboard',
|
||||||
children: [
|
children: [
|
||||||
|
{
|
||||||
|
path: 'dashboard',
|
||||||
|
name: 'coordinator.dashboard',
|
||||||
|
component: () => import('@Pages/Dashboard/Coordinator.vue'),
|
||||||
|
meta: {
|
||||||
|
title: 'Dashboard',
|
||||||
|
icon: 'grid_view',
|
||||||
|
},
|
||||||
|
redirect: '/coordinator/dashboard',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'coordinator.dashboard.index',
|
||||||
|
component: () => import('@Pages/Dashboard/Coordinator.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/admin',
|
||||||
|
name: 'admin',
|
||||||
|
component: () => import('@Layouts/AdminLayout.vue'),
|
||||||
|
meta: {
|
||||||
|
title: 'Inicio',
|
||||||
|
icon: 'home',
|
||||||
|
},
|
||||||
|
redirect: '/admin/dashboard',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'dashboard',
|
||||||
|
name: 'admin.dashboard',
|
||||||
|
component: () => import('@Pages/Dashboard/Admin.vue'),
|
||||||
|
meta: {
|
||||||
|
title: 'Dashboard',
|
||||||
|
icon: 'grid_view',
|
||||||
|
},
|
||||||
|
redirect: '/admin/dashboard',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.dashboard.index',
|
||||||
|
component: () => import('@Pages/Dashboard/Admin.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'employees',
|
||||||
|
name: 'admin.employees',
|
||||||
|
meta: {
|
||||||
|
title: 'Empleados',
|
||||||
|
icon: 'people',
|
||||||
|
},
|
||||||
|
redirect: '/admin/employees',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.employees.index',
|
||||||
|
component: () => import('@Pages/Employees/Index.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'academic',
|
||||||
|
name: 'admin.academic',
|
||||||
|
meta: {
|
||||||
|
title: 'Historial Académico',
|
||||||
|
icon: 'school',
|
||||||
|
},
|
||||||
|
redirect: '/admin/academic',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.academic.index',
|
||||||
|
component: () => import('@Pages/Academic/Index.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'security',
|
||||||
|
name: 'admin.security',
|
||||||
|
meta: {
|
||||||
|
title: 'Seguridad y Salud',
|
||||||
|
icon: 'security',
|
||||||
|
},
|
||||||
|
redirect: '/admin/security',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.security.index',
|
||||||
|
component: () => import('@Pages/Security/Index.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'payroll',
|
||||||
|
name: 'admin.payroll',
|
||||||
|
meta: {
|
||||||
|
title: 'Nómina',
|
||||||
|
icon: 'payments',
|
||||||
|
},
|
||||||
|
redirect: '/admin/payroll',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.payroll.index',
|
||||||
|
component: () => import('@Pages/Payroll/Index.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'additional',
|
||||||
|
name: 'admin.additional',
|
||||||
|
meta: {
|
||||||
|
title: 'Información Adicional',
|
||||||
|
icon: 'info',
|
||||||
|
},
|
||||||
|
redirect: '/admin/additional',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.additional.index',
|
||||||
|
component: () => import('@Pages/Additional/Index.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'courses',
|
||||||
|
name: 'admin.courses',
|
||||||
|
meta: {
|
||||||
|
title: 'Capacitaciones',
|
||||||
|
icon: 'info',
|
||||||
|
},
|
||||||
|
redirect: '/admin/courses',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.courses.index',
|
||||||
|
component: () => import('@Pages/Courses/Index.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'assignamment',
|
||||||
|
name: 'admin.courses.assignamment',
|
||||||
|
component: () => import('@Pages/Courses/Assignamment.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'request',
|
||||||
|
name: 'admin.courses.request',
|
||||||
|
component: () => import('@Pages/Courses/Request.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'calendar',
|
||||||
|
name: 'admin.courses.calendar',
|
||||||
|
component: () => import('@Pages/Courses/Calendar.vue'),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'events',
|
||||||
|
name: 'admin.events',
|
||||||
|
meta: {
|
||||||
|
title: 'Eventos',
|
||||||
|
icon: 'info',
|
||||||
|
},
|
||||||
|
redirect: '/admin/events',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.events.index',
|
||||||
|
component: () => import('@Pages/Events/Index.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'assignamment',
|
||||||
|
name: 'admin.events.assignamment',
|
||||||
|
component: () => import('@Pages/Events/Assignamment.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'justification',
|
||||||
|
name: 'admin.events.justification',
|
||||||
|
component: () => import('@Pages/Events/Justification.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'reports',
|
||||||
|
name: 'admin.events.reports',
|
||||||
|
component: () => import('@Pages/Events/Reports.vue'),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'users',
|
path: 'users',
|
||||||
name: 'admin.users',
|
name: 'admin.users',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user