ADD: Creación del frontend RH manager #1
248
package-lock.json
generated
248
package-lock.json
generated
@ -8,22 +8,28 @@
|
||||
"name": "notsoweb.frontend",
|
||||
"version": "0.9.12",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tailwindcss/postcss": "^4.0.9",
|
||||
"@tailwindcss/vite": "^4.0.9",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vuepic/vue-datepicker": "^11.0.2",
|
||||
"apexcharts": "^5.3.5",
|
||||
"axios": "^1.8.1",
|
||||
"laravel-echo": "^2.0.2",
|
||||
"luxon": "^3.5.0",
|
||||
"pdf-lib": "^1.17.1",
|
||||
"pinia": "^3.0.1",
|
||||
"pusher-js": "^8.4.0",
|
||||
"tailwindcss": "^4.0",
|
||||
"toastr": "^2.1.4",
|
||||
"uuid": "^11.1.0",
|
||||
"v-calendar": "^3.1.2",
|
||||
"vite": "^6.2.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-i18n": "^11.1.1",
|
||||
"vue-multiselect": "^3.2.0",
|
||||
"vue-router": "^4.5.0",
|
||||
"vue3-apexcharts": "^1.8.0",
|
||||
"ziggy-js": "^2.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -89,6 +95,15 @@
|
||||
"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": {
|
||||
"version": "7.28.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
|
||||
@ -658,6 +673,34 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@pdf-lib/standard-fonts": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",
|
||||
"integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"pako": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@pdf-lib/upng": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz",
|
||||
"integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"pako": "^1.0.10"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
|
||||
@ -952,6 +995,62 @@
|
||||
"license": "MIT",
|
||||
"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": {
|
||||
"version": "4.1.11",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
|
||||
@ -1233,12 +1332,24 @@
|
||||
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
||||
"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": {
|
||||
"version": "6.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
|
||||
"integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
|
||||
"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": {
|
||||
"version": "5.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
|
||||
@ -1397,6 +1508,37 @@
|
||||
"integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vuepic/vue-datepicker": {
|
||||
"version": "11.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.2.tgz",
|
||||
"integrity": "sha512-uHh78mVBXCEjam1uVfTzZ/HkyDwut/H6b2djSN9YTF+l/EA+XONfdCnOVSi1g+qVGSy65DcQAwyBNidAssnudQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"date-fns": "^4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">=3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vuepic/vue-datepicker/node_modules/date-fns": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "8.15.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
@ -1426,6 +1568,20 @@
|
||||
"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": {
|
||||
"version": "3.2.6",
|
||||
"resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
|
||||
@ -1783,6 +1939,31 @@
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"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": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||
@ -2761,6 +2942,12 @@
|
||||
"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": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
|
||||
@ -2988,6 +3175,12 @@
|
||||
"url": "https://github.com/fb55/nth-check?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
|
||||
"license": "(MIT AND Zlib)"
|
||||
},
|
||||
"node_modules/param-case": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
|
||||
@ -3017,6 +3210,24 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/pdf-lib": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
|
||||
"integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@pdf-lib/standard-fonts": "^1.0.0",
|
||||
"@pdf-lib/upng": "^1.0.1",
|
||||
"pako": "^1.0.11",
|
||||
"tslib": "^1.11.1"
|
||||
}
|
||||
},
|
||||
"node_modules/pdf-lib/node_modules/tslib": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/perfect-debounce": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
|
||||
@ -3491,6 +3702,24 @@
|
||||
"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": {
|
||||
"version": "6.3.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
|
||||
@ -3667,6 +3896,25 @@
|
||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
|
||||
"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": {
|
||||
"version": "8.17.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
|
||||
|
||||
@ -10,22 +10,28 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tailwindcss/postcss": "^4.0.9",
|
||||
"@tailwindcss/vite": "^4.0.9",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vuepic/vue-datepicker": "^11.0.2",
|
||||
"apexcharts": "^5.3.5",
|
||||
"axios": "^1.8.1",
|
||||
"laravel-echo": "^2.0.2",
|
||||
"luxon": "^3.5.0",
|
||||
"pdf-lib": "^1.17.1",
|
||||
"pinia": "^3.0.1",
|
||||
"pusher-js": "^8.4.0",
|
||||
"tailwindcss": "^4.0",
|
||||
"toastr": "^2.1.4",
|
||||
"uuid": "^11.1.0",
|
||||
"v-calendar": "^3.1.2",
|
||||
"vite": "^6.2.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-i18n": "^11.1.1",
|
||||
"vue-multiselect": "^3.2.0",
|
||||
"vue-router": "^4.5.0",
|
||||
"vue3-apexcharts": "^1.8.0",
|
||||
"ziggy-js": "^2.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
27
src/components/Holos/Button/ButtonRh.vue
Normal file
27
src/components/Holos/Button/ButtonRh.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import GoogleIcon from "@Shared/GoogleIcon.vue";
|
||||
defineProps({
|
||||
type: {
|
||||
default: "button",
|
||||
type: String,
|
||||
},
|
||||
icon: {
|
||||
default: "add",
|
||||
type: String,
|
||||
},
|
||||
text: {
|
||||
default: "",
|
||||
type: String,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
:type="type"
|
||||
class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md"
|
||||
>
|
||||
<GoogleIcon :name="icon" />
|
||||
<span>{{ text }}</span>
|
||||
</button>
|
||||
</template>
|
||||
191
src/components/Holos/Calendar.vue
Normal file
191
src/components/Holos/Calendar.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { Calendar } from 'v-calendar';
|
||||
import 'v-calendar/style.css';
|
||||
|
||||
// Props del componente
|
||||
const props = defineProps({
|
||||
// Días de conflicto a pintar en rojo
|
||||
conflictDays: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// Configuración adicional
|
||||
locale: {
|
||||
type: String,
|
||||
default: 'es'
|
||||
}
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['monthChanged']);
|
||||
|
||||
// Variables reactivas
|
||||
const currentMonth = ref(new Date());
|
||||
const fromPage = ref(null);
|
||||
|
||||
// Atributos para el calendario (eventos, vacaciones, etc.)
|
||||
const attributes = computed(() => {
|
||||
const attrs = [];
|
||||
|
||||
|
||||
// Agregar días de conflicto (pintarlos en rojo)
|
||||
if (props.conflictDays && props.conflictDays.length > 0) {
|
||||
props.conflictDays.forEach((day) => {
|
||||
const currentYear = currentMonth.value.getFullYear();
|
||||
const currentMonthNumber = currentMonth.value.getMonth();
|
||||
const conflictDate = new Date(currentYear, currentMonthNumber, day);
|
||||
|
||||
attrs.push({
|
||||
key: `conflict-${day}`,
|
||||
dates: conflictDate,
|
||||
highlight: {
|
||||
color: 'red',
|
||||
fillMode: 'solid'
|
||||
},
|
||||
popover: {
|
||||
label: `Día con conflictos de vacaciones`,
|
||||
visibility: 'hover'
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return attrs;
|
||||
});
|
||||
|
||||
// Configuración del calendario
|
||||
const calendarConfig = computed(() => ({
|
||||
locale: props.locale,
|
||||
firstDayOfWeek: 2, // Lunes
|
||||
masks: {
|
||||
weekdays: 'WWW',
|
||||
navMonths: 'MMMM',
|
||||
title: 'MMMM YYYY'
|
||||
},
|
||||
theme: {
|
||||
isDark: false
|
||||
}
|
||||
}));
|
||||
|
||||
// Métodos
|
||||
const onPageChanged = (page) => {
|
||||
// Actualizar el mes actual cuando se cambia de página
|
||||
currentMonth.value = new Date(page[0].year, page[0].month - 1, 1);
|
||||
emit('monthChanged', page[0].month);
|
||||
};
|
||||
|
||||
// Watch para re-renderizar cuando cambien los días de conflicto o el mes actual
|
||||
watch([() => props.conflictDays, currentMonth], () => {
|
||||
// Los attributes se recalcularán automáticamente al cambiar estas dependencias
|
||||
}, { deep: true });
|
||||
|
||||
// Exponer métodos para uso externo
|
||||
defineExpose({
|
||||
currentMonth
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="calendar-container bg-white rounded-lg shadow-md p-4">
|
||||
<!-- Header del calendario -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900">Calendario</h3>
|
||||
</div>
|
||||
|
||||
<!-- Calendario principal -->
|
||||
<div class="calendar-wrapper">
|
||||
<Calendar
|
||||
v-model="currentMonth"
|
||||
:attributes="attributes"
|
||||
:locale="calendarConfig.locale"
|
||||
:first-day-of-week="calendarConfig.firstDayOfWeek"
|
||||
:masks="calendarConfig.masks"
|
||||
class="custom-calendar"
|
||||
v-model:from-page="fromPage"
|
||||
@update:from-page="onPageChanged"
|
||||
@did-move="onPageChanged"
|
||||
expanded
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Estilos personalizados para el calendario */
|
||||
.calendar-container {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.custom-calendar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Personalización de v-calendar */
|
||||
:deep(.vc-container) {
|
||||
--vc-border-radius: 0.5rem;
|
||||
--vc-weekday-color: #6B7280;
|
||||
--vc-popover-content-bg: white;
|
||||
--vc-popover-content-border: 1px solid #E5E7EB;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
:deep(.vc-header) {
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
}
|
||||
|
||||
:deep(.vc-title) {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
:deep(.vc-weekday) {
|
||||
color: #6B7280;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
:deep(.vc-day) {
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
:deep(.vc-day-content) {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.375rem;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
:deep(.vc-day-content:hover) {
|
||||
background-color: #EFF6FF;
|
||||
color: #2563EB;
|
||||
}
|
||||
|
||||
:deep(.vc-day-content.vc-day-content-today) {
|
||||
background-color: #DBEAFE;
|
||||
color: #1D4ED8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.vc-highlights .vc-highlight) {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
:deep(.vc-dots) {
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.calendar-container {
|
||||
min-width: auto;
|
||||
margin: 0 -1rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
606
src/components/Holos/Canvas.vue
Normal file
606
src/components/Holos/Canvas.vue
Normal file
@ -0,0 +1,606 @@
|
||||
<script setup>
|
||||
import { ref, computed, nextTick, watch } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['select', 'delete', 'update', 'move']);
|
||||
|
||||
/** Referencias */
|
||||
const isEditing = ref(false);
|
||||
const editValue = ref('');
|
||||
const editInput = ref(null);
|
||||
const editTextarea = ref(null);
|
||||
const elementRef = ref(null);
|
||||
const isDragging = ref(false);
|
||||
const isResizing = ref(false);
|
||||
const resizeDirection = ref(null); // 'corner', 'right', 'bottom'
|
||||
const dragStart = ref({ x: 0, y: 0 });
|
||||
const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
|
||||
const fileInput = ref(null);
|
||||
|
||||
/** Propiedades computadas */
|
||||
const elementStyles = computed(() => ({
|
||||
left: `${props.element.x}px`,
|
||||
top: `${props.element.y}px`,
|
||||
width: `${props.element.width || 200}px`,
|
||||
height: `${props.element.height || 40}px`
|
||||
}));
|
||||
|
||||
/** Watchers */
|
||||
watch(() => props.isSelected, (selected) => {
|
||||
if (selected && isEditing.value) {
|
||||
nextTick(() => {
|
||||
if (props.element.type === 'text' && editInput.value) {
|
||||
editInput.value.focus();
|
||||
editInput.value.select();
|
||||
} else if (props.element.type === 'code' && editTextarea.value) {
|
||||
editTextarea.value.focus();
|
||||
editTextarea.value.select();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const handleSelect = (event) => {
|
||||
event.stopPropagation();
|
||||
emit('select', props.element.id);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('delete', props.element.id);
|
||||
};
|
||||
|
||||
const startEditing = () => {
|
||||
if (props.element.type === 'table' && props.element.content) {
|
||||
// Deep copy para evitar mutaciones directas
|
||||
editValue.value = JSON.parse(JSON.stringify(props.element.content));
|
||||
} else if (props.element.type === 'code') {
|
||||
editValue.value = props.element.content || 'console.log("Hola mundo");';
|
||||
} else {
|
||||
editValue.value = props.element.content || getDefaultEditValue();
|
||||
}
|
||||
isEditing.value = true;
|
||||
|
||||
nextTick(() => {
|
||||
if (editTextarea.value) editTextarea.value.focus();
|
||||
if (editInput.value) editInput.value.focus();
|
||||
});
|
||||
};
|
||||
|
||||
const finishEditing = () => {
|
||||
if (isEditing.value) {
|
||||
isEditing.value = false;
|
||||
|
||||
// Para tablas, emitir el objeto completo
|
||||
if (props.element.type === 'table') {
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
content: editValue.value
|
||||
});
|
||||
} else {
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
content: editValue.value
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeydown = (event) => {
|
||||
if (props.element.type === 'text') {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
finishEditing();
|
||||
} else if (event.key === 'Escape') {
|
||||
isEditing.value = false;
|
||||
editValue.value = props.element.content || 'Nuevo texto';
|
||||
}
|
||||
} else if (props.element.type === 'code') {
|
||||
if (event.key === 'Escape') {
|
||||
isEditing.value = false;
|
||||
editValue.value = props.element.content || 'console.log("Hola mundo");';
|
||||
}
|
||||
// Para código, permitimos Enter normal y usamos Ctrl+Enter para terminar
|
||||
if (event.key === 'Enter' && event.ctrlKey) {
|
||||
event.preventDefault();
|
||||
finishEditing();
|
||||
}
|
||||
} else if (props.element.type === 'table') {
|
||||
if (event.key === 'Escape') {
|
||||
isEditing.value = false;
|
||||
// Restaurar el contenido original de la tabla
|
||||
editValue.value = props.element.content ?
|
||||
JSON.parse(JSON.stringify(props.element.content)) :
|
||||
getDefaultEditValue();
|
||||
}
|
||||
// Para tablas, Enter normal para nueva línea en celda, Ctrl+Enter para terminar
|
||||
if (event.key === 'Enter' && event.ctrlKey) {
|
||||
event.preventDefault();
|
||||
finishEditing();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Manejo de archivo de imagen
|
||||
const handleFileSelect = (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
content: e.target.result,
|
||||
fileName: file.name
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
// Limpiar el input
|
||||
event.target.value = '';
|
||||
};
|
||||
|
||||
// Funcionalidad de arrastre
|
||||
const handleMouseDown = (event) => {
|
||||
if (isEditing.value || isResizing.value) return;
|
||||
|
||||
isDragging.value = true;
|
||||
dragStart.value = {
|
||||
x: event.clientX - props.element.x,
|
||||
y: event.clientY - props.element.y
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
if (isDragging.value && !isResizing.value) {
|
||||
const newX = event.clientX - dragStart.value.x;
|
||||
const newY = event.clientY - dragStart.value.y;
|
||||
|
||||
emit('move', {
|
||||
id: props.element.id,
|
||||
x: Math.max(0, newX),
|
||||
y: Math.max(0, newY)
|
||||
});
|
||||
} else if (isResizing.value && !isDragging.value) {
|
||||
handleResizeMove(event);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
isDragging.value = false;
|
||||
isResizing.value = false;
|
||||
resizeDirection.value = null;
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
// Funcionalidad de redimensionamiento por esquina
|
||||
const startResize = (event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
isResizing.value = true;
|
||||
resizeDirection.value = 'corner';
|
||||
resizeStart.value = {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
width: props.element.width || 200,
|
||||
height: props.element.height || 40
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
// Funcionalidad de redimensionamiento por bordes
|
||||
const startResizeEdge = (event, direction) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
isResizing.value = true;
|
||||
resizeDirection.value = direction;
|
||||
resizeStart.value = {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
width: props.element.width || 200,
|
||||
height: props.element.height || 40
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
const handleResizeMove = (event) => {
|
||||
if (!isResizing.value) return;
|
||||
|
||||
const deltaX = event.clientX - resizeStart.value.x;
|
||||
const deltaY = event.clientY - resizeStart.value.y;
|
||||
|
||||
let newWidth = resizeStart.value.width;
|
||||
let newHeight = resizeStart.value.height;
|
||||
|
||||
// Calcular nuevas dimensiones según la dirección
|
||||
if (resizeDirection.value === 'corner') {
|
||||
newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
|
||||
newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY));
|
||||
} else if (resizeDirection.value === 'right') {
|
||||
newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
|
||||
} else if (resizeDirection.value === 'bottom') {
|
||||
newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY));
|
||||
}
|
||||
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
width: newWidth,
|
||||
height: newHeight
|
||||
});
|
||||
};
|
||||
|
||||
// Obtener tamaños mínimos según el tipo de elemento
|
||||
const getMinWidth = () => {
|
||||
switch (props.element.type) {
|
||||
case 'text':
|
||||
return 100;
|
||||
case 'image':
|
||||
return 100;
|
||||
case 'table':
|
||||
return 200;
|
||||
default:
|
||||
return 100;
|
||||
}
|
||||
};
|
||||
|
||||
const getMinHeight = () => {
|
||||
switch (props.element.type) {
|
||||
case 'text':
|
||||
return 30;
|
||||
case 'image':
|
||||
return 80;
|
||||
case 'table':
|
||||
return 80;
|
||||
default:
|
||||
return 30;
|
||||
}
|
||||
};
|
||||
|
||||
// Obtener tamaños máximos según el tipo de elemento
|
||||
const getMaxWidth = () => {
|
||||
return 800; // Máximo general
|
||||
};
|
||||
|
||||
const getMaxHeight = () => {
|
||||
return 600; // Máximo general
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="elementRef"
|
||||
:style="elementStyles"
|
||||
@click="handleSelect"
|
||||
@dblclick="startEditing"
|
||||
@mousedown="handleMouseDown"
|
||||
class="absolute group select-none"
|
||||
:class="{
|
||||
'ring-2 ring-blue-500 ring-opacity-50': isSelected,
|
||||
'cursor-move': !isEditing && !isResizing,
|
||||
'cursor-text': isEditing && (element.type === 'text' || element.type === 'code'),
|
||||
'cursor-se-resize': isResizing && resizeDirection === 'corner',
|
||||
'cursor-e-resize': isResizing && resizeDirection === 'right',
|
||||
'cursor-s-resize': isResizing && resizeDirection === 'bottom'
|
||||
}"
|
||||
>
|
||||
<!-- Input oculto para selección de archivos -->
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="handleFileSelect"
|
||||
class="hidden"
|
||||
/>
|
||||
|
||||
<!-- Elemento de Texto -->
|
||||
<div
|
||||
v-if="element.type === 'text'"
|
||||
class="w-full h-full flex items-center px-3 py-2 bg-blue-100 rounded border border-blue-300 text-blue-800 text-sm font-medium dark:bg-blue-900/30 dark:border-blue-600 dark:text-blue-300"
|
||||
>
|
||||
<input
|
||||
v-if="isEditing"
|
||||
ref="editInput"
|
||||
v-model="editValue"
|
||||
@blur="finishEditing"
|
||||
@keydown="handleKeydown"
|
||||
class="w-full bg-transparent outline-none cursor-text"
|
||||
@mousedown.stop
|
||||
/>
|
||||
<span v-else class="truncate pointer-events-none">
|
||||
{{ element.content || 'Nuevo texto' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Elemento de Imagen -->
|
||||
<div
|
||||
v-else-if="element.type === 'image'"
|
||||
class="w-full h-full flex items-center justify-center bg-gray-100 rounded border border-gray-300 dark:bg-primary/10 dark:border-primary/20 overflow-hidden"
|
||||
>
|
||||
<!-- Si hay imagen cargada -->
|
||||
<img
|
||||
v-if="element.content && element.content.startsWith('data:image')"
|
||||
:src="element.content"
|
||||
:alt="element.fileName || 'Imagen'"
|
||||
class="w-full h-full object-cover pointer-events-none"
|
||||
/>
|
||||
<!-- Placeholder para imagen -->
|
||||
<div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
|
||||
<GoogleIcon name="image" class="text-2xl mb-1" />
|
||||
<span class="text-xs text-center">Haz doble clic para cargar imagen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elemento de Código -->
|
||||
<div
|
||||
v-else-if="element.type === 'code'"
|
||||
class="w-full h-full bg-gray-900 rounded border overflow-hidden"
|
||||
>
|
||||
<div class="w-full h-6 bg-gray-800 flex items-center px-2 text-xs text-gray-400 border-b border-gray-700">
|
||||
<div class="flex gap-1">
|
||||
<div class="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
</div>
|
||||
<span class="ml-2">{{ element.fileName || 'script.js' }}</span>
|
||||
</div>
|
||||
<div class="p-2 h-[calc(100%-24px)]">
|
||||
<textarea
|
||||
v-if="isEditing"
|
||||
ref="editTextarea"
|
||||
v-model="editValue"
|
||||
@blur="finishEditing"
|
||||
@keydown="handleKeydown"
|
||||
class="w-full h-full bg-transparent text-green-400 text-xs font-mono outline-none resize-none cursor-text"
|
||||
@mousedown.stop
|
||||
/>
|
||||
<pre v-else class="text-green-400 text-xs font-mono overflow-auto h-full pointer-events-none whitespace-pre-wrap">{{ element.content || 'console.log("Hola mundo");' }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elemento de Tabla -->
|
||||
<div
|
||||
v-else-if="element.type === 'table'"
|
||||
class="w-full h-full bg-white rounded border overflow-hidden"
|
||||
>
|
||||
<div v-if="element.content && element.content.data" class="w-full h-full">
|
||||
<table class="w-full h-full text-xs border-collapse">
|
||||
<thead v-if="element.content.data.length > 0">
|
||||
<tr class="bg-blue-50 dark:bg-blue-900/20">
|
||||
<th
|
||||
v-for="(header, colIndex) in element.content.data[0]"
|
||||
:key="colIndex"
|
||||
class="border border-gray-300 dark:border-primary/20 px-1 py-1 text-left font-semibold text-blue-800 dark:text-blue-300"
|
||||
>
|
||||
<input
|
||||
v-if="isEditing"
|
||||
v-model="editValue.data[0][colIndex]"
|
||||
class="w-full bg-transparent outline-none text-xs"
|
||||
@mousedown.stop
|
||||
@click.stop
|
||||
@focus.stop
|
||||
/>
|
||||
<span v-else class="truncate">{{ header }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(row, rowIndex) in element.content.data.slice(1)"
|
||||
:key="rowIndex"
|
||||
class="hover:bg-gray-50 dark:hover:bg-primary/5"
|
||||
>
|
||||
<td
|
||||
v-for="(cell, colIndex) in row"
|
||||
:key="colIndex"
|
||||
class="border border-gray-300 dark:border-primary/20 px-1 py-1"
|
||||
>
|
||||
<input
|
||||
v-if="isEditing"
|
||||
v-model="editValue.data[rowIndex + 1][colIndex]"
|
||||
class="w-full bg-transparent outline-none text-xs"
|
||||
@mousedown.stop
|
||||
@click.stop
|
||||
@focus.stop
|
||||
/>
|
||||
<span v-else class="truncate text-gray-700 dark:text-primary-dt">{{ cell }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Placeholder para tabla vacía -->
|
||||
<div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
|
||||
<GoogleIcon name="table_chart" class="text-2xl mb-1" />
|
||||
<span class="text-xs text-center">Doble clic para editar tabla</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controles del elemento -->
|
||||
<div
|
||||
v-if="isSelected && !isEditing"
|
||||
class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-10"
|
||||
>
|
||||
<!-- Indicador de tamaño -->
|
||||
<div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
|
||||
{{ Math.round(element.width || 200) }} × {{ Math.round(element.height || 40) }}
|
||||
</div>
|
||||
|
||||
<!-- Botón para cargar imagen (solo para elementos de imagen) -->
|
||||
<button
|
||||
v-if="element.type === 'image'"
|
||||
@click.stop="() => fileInput.click()"
|
||||
class="w-6 h-6 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
|
||||
title="Cargar imagen"
|
||||
>
|
||||
<GoogleIcon name="upload" class="text-xs" />
|
||||
</button>
|
||||
|
||||
<!-- Botón eliminar -->
|
||||
<button
|
||||
@click.stop="handleDelete"
|
||||
class="w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
|
||||
title="Eliminar"
|
||||
>
|
||||
<GoogleIcon name="close" class="text-xs" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Controles de redimensionamiento mejorados -->
|
||||
<div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none">
|
||||
<!-- Esquina inferior derecha -->
|
||||
<div
|
||||
@mousedown.stop="startResize"
|
||||
class="absolute -bottom-1 -right-1 w-2 h-2 bg-blue-500 border border-white cursor-se-resize pointer-events-auto rounded-sm resize-handle-corner"
|
||||
title="Redimensionar"
|
||||
></div>
|
||||
|
||||
<!-- Lado derecho -->
|
||||
<div
|
||||
@mousedown.stop="(event) => startResizeEdge(event, 'right')"
|
||||
class="absolute top-1 bottom-1 -right-0.5 w-1 bg-blue-500 opacity-0 cursor-e-resize pointer-events-auto resize-handle-edge"
|
||||
title="Redimensionar ancho"
|
||||
></div>
|
||||
|
||||
<!-- Lado inferior -->
|
||||
<div
|
||||
@mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
|
||||
class="absolute -bottom-0.5 left-1 right-1 h-1 bg-blue-500 opacity-0 cursor-s-resize pointer-events-auto resize-handle-edge"
|
||||
title="Redimensionar alto"
|
||||
></div>
|
||||
|
||||
<!-- Puntos de agarre visuales en los bordes (solo visuales) -->
|
||||
<div class="absolute top-1/2 -right-0.5 w-1 h-6 -translate-y-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
|
||||
<div class="absolute -bottom-0.5 left-1/2 w-6 h-1 -translate-x-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
|
||||
</div>
|
||||
|
||||
<!-- Indicador de arrastre -->
|
||||
<div
|
||||
v-if="isDragging"
|
||||
class="absolute inset-0 bg-blue-500 opacity-20 rounded pointer-events-none"
|
||||
></div>
|
||||
|
||||
<!-- Indicador de redimensionamiento -->
|
||||
<div
|
||||
v-if="isResizing"
|
||||
class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
|
||||
></div>
|
||||
|
||||
<!-- Tooltip con instrucciones -->
|
||||
<div
|
||||
v-if="isSelected && !element.content && element.type !== 'image' && !isResizing"
|
||||
class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
|
||||
>
|
||||
{{ element.type === 'text' ? 'Doble clic para editar texto' : 'Doble clic para editar código' }}
|
||||
{{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
|
||||
</div>
|
||||
|
||||
<!-- Tooltip con instrucciones de redimensionamiento -->
|
||||
<div
|
||||
v-if="isSelected && !isEditing && element.type === 'image' && !element.content && !isResizing"
|
||||
class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
|
||||
>
|
||||
Arrastra las esquinas para redimensionar
|
||||
</div>
|
||||
|
||||
<!-- Botón para terminar edición de tabla -->
|
||||
<div
|
||||
v-if="isEditing && element.type === 'table'"
|
||||
class="absolute -bottom-10 left-0 flex gap-2 z-20"
|
||||
>
|
||||
<button
|
||||
@click="finishEditing"
|
||||
class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded shadow-sm transition-colors"
|
||||
>
|
||||
Guardar (Ctrl+Enter)
|
||||
</button>
|
||||
<button
|
||||
@click="() => { isEditing = false; editValue = JSON.parse(JSON.stringify(element.content)); }"
|
||||
class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded shadow-sm transition-colors"
|
||||
>
|
||||
Cancelar (Esc)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Estilos para los controles de redimensionamiento mejorados */
|
||||
.resize-handle-corner {
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.resize-handle-corner:hover {
|
||||
background-color: #2563eb;
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.resize-handle-edge {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.resize-handle-edge:hover {
|
||||
opacity: 0.7 !important;
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
.resize-handle-visual {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Efecto hover para los indicadores visuales */
|
||||
.group:hover .resize-handle-visual {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
.group:hover .resize-handle-edge {
|
||||
opacity: 0.4 !important;
|
||||
}
|
||||
|
||||
/* Prevenir selección de texto durante el redimensionamiento */
|
||||
.select-none {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
/* Animación suave para los controles */
|
||||
@keyframes pulse-resize {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.group:hover .resize-handle-visual {
|
||||
animation: pulse-resize 2s infinite;
|
||||
}
|
||||
</style>
|
||||
64
src/components/Holos/Draggable.vue
Normal file
64
src/components/Holos/Draggable.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
icon: String,
|
||||
title: String,
|
||||
description: String,
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['dragstart']);
|
||||
|
||||
/** Referencias */
|
||||
const isDragging = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const handleDragStart = (event) => {
|
||||
isDragging.value = true;
|
||||
event.dataTransfer.setData('text/plain', JSON.stringify({
|
||||
type: props.type,
|
||||
title: props.title
|
||||
}));
|
||||
emit('dragstart', props.type);
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
isDragging.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
draggable="true"
|
||||
@dragstart="handleDragStart"
|
||||
@dragend="handleDragEnd"
|
||||
class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 bg-white cursor-grab hover:bg-gray-50 hover:border-blue-300 transition-colors dark:bg-primary-d dark:border-primary/20 dark:hover:bg-primary/10"
|
||||
:class="{
|
||||
'opacity-50 cursor-grabbing': isDragging,
|
||||
'shadow-sm hover:shadow-md': !isDragging
|
||||
}"
|
||||
>
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-md bg-blue-100 flex items-center justify-center dark:bg-blue-900/30">
|
||||
<GoogleIcon
|
||||
:name="icon"
|
||||
class="text-blue-600 dark:text-blue-400 text-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-primary-dt">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/70 truncate">
|
||||
{{ description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -9,7 +9,7 @@ const props = defineProps({
|
||||
contentClasses: {
|
||||
default: () => [
|
||||
'pt-1',
|
||||
'bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt'
|
||||
'!bg-white dark:!bg-primary-d !text-gray-800 dark:!text-primary-dt'
|
||||
],
|
||||
type: Array
|
||||
},
|
||||
|
||||
57
src/components/Holos/Layout/RhApp.vue
Normal file
57
src/components/Holos/Layout/RhApp.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import useDarkMode from '@Stores/DarkMode'
|
||||
import useLeftSidebar from '@Stores/LeftSidebar'
|
||||
import useNotificationSidebar from '@Stores/NotificationSidebar'
|
||||
import useNotifier from '@Stores/Notifier'
|
||||
|
||||
import Header from '../Skeleton/Header.vue';
|
||||
import RhSidebar from '../Skeleton/RhSidebar.vue';
|
||||
import NotificationSidebar from '../Skeleton/Sidebar/Notification.vue';
|
||||
|
||||
/** Definidores */
|
||||
const darkMode = useDarkMode();
|
||||
const leftSidebar = useLeftSidebar();
|
||||
const notificationSidebar = useNotificationSidebar();
|
||||
const notifier = useNotifier();
|
||||
|
||||
/** Propiedades */
|
||||
defineProps({
|
||||
title: String,
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
leftSidebar.boot();
|
||||
darkMode.boot();
|
||||
notifier.boot();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full h-screen bg-page text-page-t dark:bg-page-d dark:text-page-dt">
|
||||
<RhSidebar
|
||||
@open="leftSidebar.toggle()"
|
||||
>
|
||||
<slot name="leftSidebar"/>
|
||||
</RhSidebar>
|
||||
<NotificationSidebar
|
||||
@open="notificationSidebar.toggle()"
|
||||
/>
|
||||
<div
|
||||
class="flex flex-col w-full transition-all duration-300"
|
||||
:class="{'md:w-[calc(100vw-rem)] md:ml-64':leftSidebar.isOpened, 'md:w-screen md:ml-0':leftSidebar.isClosed}"
|
||||
>
|
||||
<div class="h-2 md:h-14">
|
||||
<Header
|
||||
@open="leftSidebar.toggle()"
|
||||
/>
|
||||
</div>
|
||||
<main class="flex h-full justify-center md:p-2">
|
||||
<div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-xs md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 pb-4 md:rounded-sm overflow-y-auto overflow-x-auto transition-colors duration-300">
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
650
src/components/Holos/PDF/Canvas.vue
Normal file
650
src/components/Holos/PDF/Canvas.vue
Normal file
@ -0,0 +1,650 @@
|
||||
<script setup>
|
||||
import { ref, computed, nextTick, watch } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['select', 'delete', 'update', 'move']);
|
||||
|
||||
/** Referencias */
|
||||
const isEditing = ref(false);
|
||||
const editValue = ref('');
|
||||
const editInput = ref(null);
|
||||
const editTextarea = ref(null);
|
||||
const elementRef = ref(null);
|
||||
const isDragging = ref(false);
|
||||
const isResizing = ref(false);
|
||||
const resizeDirection = ref(null); // 'corner', 'right', 'bottom'
|
||||
const dragStart = ref({ x: 0, y: 0 });
|
||||
const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
|
||||
const fileInput = ref(null);
|
||||
|
||||
/** Propiedades computadas */
|
||||
const elementStyles = computed(() => {
|
||||
const baseStyles = {
|
||||
left: `${props.element.x}px`,
|
||||
top: `${props.element.y}px`,
|
||||
width: `${props.element.width || 200}px`,
|
||||
height: `${props.element.height || 40}px`
|
||||
};
|
||||
|
||||
// Aplicar estilos de formato para elementos de texto
|
||||
if (props.element.type === 'text' && props.element.formatting) {
|
||||
const formatting = props.element.formatting;
|
||||
|
||||
if (formatting.fontSize) {
|
||||
baseStyles.fontSize = `${formatting.fontSize}px`;
|
||||
}
|
||||
|
||||
if (formatting.color) {
|
||||
baseStyles.color = formatting.color;
|
||||
}
|
||||
}
|
||||
|
||||
return baseStyles;
|
||||
});
|
||||
|
||||
// Propiedades computadas para clases CSS dinámicas
|
||||
const textContainerClasses = computed(() => {
|
||||
if (props.element.type !== 'text') return {};
|
||||
|
||||
const formatting = props.element.formatting || {};
|
||||
|
||||
return {
|
||||
'font-bold': formatting.bold,
|
||||
'italic': formatting.italic,
|
||||
'underline': formatting.underline,
|
||||
'text-left': !formatting.textAlign || formatting.textAlign === 'left',
|
||||
'text-center': formatting.textAlign === 'center',
|
||||
'text-right': formatting.textAlign === 'right',
|
||||
'justify-start': !formatting.textAlign || formatting.textAlign === 'left',
|
||||
'justify-center': formatting.textAlign === 'center',
|
||||
'justify-end': formatting.textAlign === 'right'
|
||||
};
|
||||
});
|
||||
|
||||
const inputClasses = computed(() => {
|
||||
if (props.element.type !== 'text') return {};
|
||||
|
||||
const formatting = props.element.formatting || {};
|
||||
|
||||
return {
|
||||
'font-bold': formatting.bold,
|
||||
'italic': formatting.italic,
|
||||
'underline': formatting.underline,
|
||||
'text-left': !formatting.textAlign || formatting.textAlign === 'left',
|
||||
'text-center': formatting.textAlign === 'center',
|
||||
'text-right': formatting.textAlign === 'right'
|
||||
};
|
||||
});
|
||||
|
||||
const inputStyles = computed(() => {
|
||||
if (props.element.type !== 'text') return {};
|
||||
|
||||
const formatting = props.element.formatting || {};
|
||||
const styles = {};
|
||||
|
||||
if (formatting.fontSize) {
|
||||
styles.fontSize = `${formatting.fontSize}px`;
|
||||
}
|
||||
|
||||
if (formatting.color) {
|
||||
styles.color = formatting.color;
|
||||
}
|
||||
|
||||
return styles;
|
||||
});
|
||||
|
||||
/** Watchers */
|
||||
watch(() => props.isSelected, (selected) => {
|
||||
if (selected && isEditing.value) {
|
||||
nextTick(() => {
|
||||
if (props.element.type === 'text' && editInput.value) {
|
||||
editInput.value.focus();
|
||||
editInput.value.select();
|
||||
} else if (props.element.type === 'code' && editTextarea.value) {
|
||||
editTextarea.value.focus();
|
||||
editTextarea.value.select();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const handleSelect = (event) => {
|
||||
event.stopPropagation();
|
||||
emit('select', props.element.id);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('delete', props.element.id);
|
||||
};
|
||||
|
||||
const startEditing = () => {
|
||||
if (props.element.type === 'table' && props.element.content) {
|
||||
// Deep copy para evitar mutaciones directas
|
||||
editValue.value = JSON.parse(JSON.stringify(props.element.content));
|
||||
} else if (props.element.type === 'code') {
|
||||
editValue.value = props.element.content || 'console.log("Hola mundo");';
|
||||
} else {
|
||||
editValue.value = props.element.content || getDefaultEditValue();
|
||||
}
|
||||
isEditing.value = true;
|
||||
|
||||
nextTick(() => {
|
||||
if (editTextarea.value) editTextarea.value.focus();
|
||||
if (editInput.value) editInput.value.focus();
|
||||
});
|
||||
};
|
||||
|
||||
const finishEditing = () => {
|
||||
if (isEditing.value) {
|
||||
isEditing.value = false;
|
||||
|
||||
// Para tablas, emitir el objeto completo
|
||||
if (props.element.type === 'table') {
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
content: editValue.value
|
||||
});
|
||||
} else {
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
content: editValue.value
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeydown = (event) => {
|
||||
if (props.element.type === 'text') {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
finishEditing();
|
||||
} else if (event.key === 'Escape') {
|
||||
isEditing.value = false;
|
||||
editValue.value = props.element.content || 'Nuevo texto';
|
||||
}
|
||||
} else if (props.element.type === 'code') {
|
||||
if (event.key === 'Escape') {
|
||||
isEditing.value = false;
|
||||
editValue.value = props.element.content || 'console.log("Hola mundo");';
|
||||
}
|
||||
// Para código, permitimos Enter normal y usamos Ctrl+Enter para terminar
|
||||
if (event.key === 'Enter' && event.ctrlKey) {
|
||||
event.preventDefault();
|
||||
finishEditing();
|
||||
}
|
||||
} else if (props.element.type === 'table') {
|
||||
if (event.key === 'Escape') {
|
||||
isEditing.value = false;
|
||||
// Restaurar el contenido original de la tabla
|
||||
editValue.value = props.element.content ?
|
||||
JSON.parse(JSON.stringify(props.element.content)) :
|
||||
getDefaultEditValue();
|
||||
}
|
||||
// Para tablas, Enter normal para nueva línea en celda, Ctrl+Enter para terminar
|
||||
if (event.key === 'Enter' && event.ctrlKey) {
|
||||
event.preventDefault();
|
||||
finishEditing();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Manejo de archivo de imagen
|
||||
const handleFileSelect = (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
content: e.target.result,
|
||||
fileName: file.name
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
// Limpiar el input
|
||||
event.target.value = '';
|
||||
};
|
||||
|
||||
// Funcionalidad de arrastre
|
||||
const handleMouseDown = (event) => {
|
||||
if (isEditing.value || isResizing.value) return;
|
||||
|
||||
isDragging.value = true;
|
||||
dragStart.value = {
|
||||
x: event.clientX - props.element.x,
|
||||
y: event.clientY - props.element.y
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
if (isDragging.value && !isResizing.value) {
|
||||
const newX = event.clientX - dragStart.value.x;
|
||||
const newY = event.clientY - dragStart.value.y;
|
||||
|
||||
emit('move', {
|
||||
id: props.element.id,
|
||||
x: Math.max(0, newX),
|
||||
y: Math.max(0, newY)
|
||||
});
|
||||
} else if (isResizing.value && !isDragging.value) {
|
||||
handleResizeMove(event);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
isDragging.value = false;
|
||||
isResizing.value = false;
|
||||
resizeDirection.value = null;
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
// Funcionalidad de redimensionamiento por esquina
|
||||
const startResize = (event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
isResizing.value = true;
|
||||
resizeDirection.value = 'corner';
|
||||
resizeStart.value = {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
width: props.element.width || 200,
|
||||
height: props.element.height || 40
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
// Funcionalidad de redimensionamiento por bordes
|
||||
const startResizeEdge = (event, direction) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
isResizing.value = true;
|
||||
resizeDirection.value = direction;
|
||||
resizeStart.value = {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
width: props.element.width || 200,
|
||||
height: props.element.height || 40
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
const handleResizeMove = (event) => {
|
||||
if (!isResizing.value) return;
|
||||
|
||||
const deltaX = event.clientX - resizeStart.value.x;
|
||||
const deltaY = event.clientY - resizeStart.value.y;
|
||||
|
||||
let newWidth = resizeStart.value.width;
|
||||
let newHeight = resizeStart.value.height;
|
||||
|
||||
// Calcular nuevas dimensiones según la dirección
|
||||
if (resizeDirection.value === 'corner') {
|
||||
newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
|
||||
newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY));
|
||||
} else if (resizeDirection.value === 'right') {
|
||||
newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
|
||||
} else if (resizeDirection.value === 'bottom') {
|
||||
newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY));
|
||||
}
|
||||
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
width: newWidth,
|
||||
height: newHeight
|
||||
});
|
||||
};
|
||||
|
||||
// Obtener tamaños mínimos según el tipo de elemento
|
||||
const getMinWidth = () => {
|
||||
switch (props.element.type) {
|
||||
case 'text':
|
||||
return 100;
|
||||
case 'image':
|
||||
return 100;
|
||||
case 'table':
|
||||
return 200;
|
||||
default:
|
||||
return 100;
|
||||
}
|
||||
};
|
||||
|
||||
const getMinHeight = () => {
|
||||
switch (props.element.type) {
|
||||
case 'text':
|
||||
return 30;
|
||||
case 'image':
|
||||
return 80;
|
||||
case 'table':
|
||||
return 80;
|
||||
default:
|
||||
return 30;
|
||||
}
|
||||
};
|
||||
|
||||
// Obtener tamaños máximos según el tipo de elemento
|
||||
const getMaxWidth = () => {
|
||||
return 800; // Máximo general
|
||||
};
|
||||
|
||||
const getMaxHeight = () => {
|
||||
return 600; // Máximo general
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="elementRef"
|
||||
:style="elementStyles"
|
||||
@click="handleSelect"
|
||||
@dblclick="startEditing"
|
||||
@mousedown="handleMouseDown"
|
||||
class="absolute group select-none"
|
||||
:class="{
|
||||
'ring-2 ring-blue-500 ring-opacity-50': isSelected,
|
||||
'cursor-move': !isEditing && !isResizing,
|
||||
'cursor-text': isEditing && (element.type === 'text' || element.type === 'code'),
|
||||
'cursor-se-resize': isResizing && resizeDirection === 'corner',
|
||||
'cursor-e-resize': isResizing && resizeDirection === 'right',
|
||||
'cursor-s-resize': isResizing && resizeDirection === 'bottom',
|
||||
'z-50': isSelected,
|
||||
'z-10': !isSelected
|
||||
}"
|
||||
>
|
||||
<!-- Input oculto para selección de archivos -->
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="handleFileSelect"
|
||||
class="hidden"
|
||||
/>
|
||||
|
||||
<!-- Elemento de Texto con formato aplicado -->
|
||||
<div
|
||||
v-if="element.type === 'text'"
|
||||
class="w-full h-full flex items-center px-3 py-2 bg-white rounded border border-gray-300 shadow-sm dark:bg-white dark:border-gray-400"
|
||||
:class="textContainerClasses"
|
||||
:style="{
|
||||
fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
|
||||
color: element.formatting?.color || '#374151'
|
||||
}"
|
||||
>
|
||||
<input
|
||||
v-if="isEditing"
|
||||
ref="editInput"
|
||||
v-model="editValue"
|
||||
@blur="finishEditing"
|
||||
@keydown="handleKeydown"
|
||||
class="w-full bg-transparent outline-none cursor-text"
|
||||
:class="inputClasses"
|
||||
:style="inputStyles"
|
||||
@mousedown.stop
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="truncate pointer-events-none w-full"
|
||||
:class="textContainerClasses"
|
||||
:style="{
|
||||
fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
|
||||
color: element.formatting?.color || '#374151'
|
||||
}"
|
||||
>
|
||||
{{ element.content || 'Nuevo texto' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Elemento de Imagen (sin cambios) -->
|
||||
<div
|
||||
v-else-if="element.type === 'image'"
|
||||
class="w-full h-full flex items-center justify-center bg-gray-100 rounded border border-gray-300 dark:bg-primary/10 dark:border-primary/20 overflow-hidden"
|
||||
>
|
||||
<!-- Si hay imagen cargada -->
|
||||
<img
|
||||
v-if="element.content && element.content.startsWith('data:image')"
|
||||
:src="element.content"
|
||||
:alt="element.fileName || 'Imagen'"
|
||||
class="w-full h-full object-cover pointer-events-none"
|
||||
/>
|
||||
<!-- Placeholder para imagen -->
|
||||
<div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
|
||||
<GoogleIcon name="image" class="text-2xl mb-1" />
|
||||
<span class="text-xs text-center">Haz doble clic para cargar imagen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elemento de Tabla (sin cambios en esta parte) -->
|
||||
<div
|
||||
v-else-if="element.type === 'table'"
|
||||
class="w-full h-full bg-white rounded border overflow-hidden"
|
||||
>
|
||||
<div v-if="element.content && element.content.data" class="w-full h-full">
|
||||
<table class="w-full h-full text-xs border-collapse">
|
||||
<thead v-if="element.content.data.length > 0">
|
||||
<tr class="bg-blue-50 dark:bg-blue-900/20">
|
||||
<th
|
||||
v-for="(header, colIndex) in element.content.data[0]"
|
||||
:key="colIndex"
|
||||
class="border border-gray-300 dark:border-primary/20 px-1 py-1 text-left font-semibold text-blue-800 dark:text-blue-300"
|
||||
>
|
||||
<input
|
||||
v-if="isEditing"
|
||||
v-model="editValue.data[0][colIndex]"
|
||||
class="w-full bg-transparent outline-none text-xs"
|
||||
@mousedown.stop
|
||||
@click.stop
|
||||
@focus.stop
|
||||
/>
|
||||
<span v-else class="truncate">{{ header }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(row, rowIndex) in element.content.data.slice(1)"
|
||||
:key="rowIndex"
|
||||
class="hover:bg-gray-50 dark:hover:bg-primary/5"
|
||||
>
|
||||
<td
|
||||
v-for="(cell, colIndex) in row"
|
||||
:key="colIndex"
|
||||
class="border border-gray-300 dark:border-primary/20 px-1 py-1"
|
||||
>
|
||||
<input
|
||||
v-if="isEditing"
|
||||
v-model="editValue.data[rowIndex + 1][colIndex]"
|
||||
class="w-full bg-transparent outline-none text-xs"
|
||||
@mousedown.stop
|
||||
@click.stop
|
||||
@focus.stop
|
||||
/>
|
||||
<span v-else class="truncate text-gray-700 dark:text-primary-dt">{{ cell }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Placeholder para tabla vacía -->
|
||||
<div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
|
||||
<GoogleIcon name="table_chart" class="text-2xl mb-1" />
|
||||
<span class="text-xs text-center">Doble clic para editar tabla</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controles del elemento con z-index más alto -->
|
||||
<div
|
||||
v-if="isSelected && !isEditing"
|
||||
class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-[60]"
|
||||
>
|
||||
<!-- Indicador de tamaño -->
|
||||
<div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
|
||||
{{ Math.round(element.width || 200) }} × {{ Math.round(element.height || 40) }}
|
||||
</div>
|
||||
|
||||
<!-- Botón para cargar imagen (solo para elementos de imagen) -->
|
||||
<button
|
||||
v-if="element.type === 'image'"
|
||||
@click.stop="() => fileInput.click()"
|
||||
class="w-6 h-6 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
|
||||
title="Cargar imagen"
|
||||
>
|
||||
<GoogleIcon name="upload" class="text-xs" />
|
||||
</button>
|
||||
|
||||
<!-- Botón eliminar -->
|
||||
<button
|
||||
@click.stop="handleDelete"
|
||||
class="w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
|
||||
title="Eliminar"
|
||||
>
|
||||
<GoogleIcon name="close" class="text-xs" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Controles de redimensionamiento mejorados -->
|
||||
<div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none z-[55]">
|
||||
<!-- Esquina inferior derecha - MÁS GRANDE Y VISIBLE -->
|
||||
<div
|
||||
@mousedown.stop="startResize"
|
||||
class="absolute -bottom-2 -right-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-se-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
|
||||
title="Redimensionar"
|
||||
>
|
||||
<div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
|
||||
</div>
|
||||
|
||||
<!-- Lado derecho - MÁS VISIBLE -->
|
||||
<div
|
||||
@mousedown.stop="(event) => startResizeEdge(event, 'right')"
|
||||
class="absolute top-2 bottom-2 -right-1 w-2 bg-blue-500 cursor-e-resize pointer-events-auto rounded-sm shadow-sm hover:bg-blue-600 transition-all"
|
||||
title="Redimensionar ancho"
|
||||
>
|
||||
<!-- Indicador visual en el centro -->
|
||||
<div class="absolute top-1/2 left-1/2 w-0.5 h-4 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- Lado inferior - MÁS VISIBLE -->
|
||||
<div
|
||||
@mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
|
||||
class="absolute -bottom-1 left-2 right-2 h-2 bg-blue-500 cursor-s-resize pointer-events-auto rounded-sm shadow-sm hover:bg-blue-600 transition-all"
|
||||
title="Redimensionar alto"
|
||||
>
|
||||
<!-- Indicador visual en el centro -->
|
||||
<div class="absolute top-1/2 left-1/2 w-4 h-0.5 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- Esquinas adicionales para mejor UX -->
|
||||
<div
|
||||
@mousedown.stop="startResize"
|
||||
class="absolute -top-2 -left-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-nw-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
|
||||
title="Redimensionar"
|
||||
>
|
||||
<div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@mousedown.stop="startResize"
|
||||
class="absolute -top-2 -right-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-ne-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
|
||||
title="Redimensionar"
|
||||
>
|
||||
<div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@mousedown.stop="startResize"
|
||||
class="absolute -bottom-2 -left-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-sw-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
|
||||
title="Redimensionar"
|
||||
>
|
||||
<div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Indicador de arrastre -->
|
||||
<div
|
||||
v-if="isDragging"
|
||||
class="absolute inset-0 bg-blue-500 opacity-20 rounded pointer-events-none"
|
||||
></div>
|
||||
|
||||
<!-- Indicador de redimensionamiento -->
|
||||
<div
|
||||
v-if="isResizing"
|
||||
class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
|
||||
></div>
|
||||
|
||||
<!-- Botón para terminar edición de tabla -->
|
||||
<div
|
||||
v-if="isEditing && element.type === 'table'"
|
||||
class="absolute -bottom-10 left-0 flex gap-2 z-[60]"
|
||||
>
|
||||
<button
|
||||
@click="finishEditing"
|
||||
class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded shadow-sm transition-colors"
|
||||
>
|
||||
Guardar
|
||||
</button>
|
||||
<button
|
||||
@click="() => { isEditing = false; editValue = JSON.parse(JSON.stringify(element.content)); }"
|
||||
class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded shadow-sm transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Estilos existentes sin cambios... */
|
||||
.resize-handle-corner {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.resize-handle-corner:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.resize-handle-edge {
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.resize-handle-edge:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.group:hover .resize-handle-edge {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.select-none {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
64
src/components/Holos/PDF/Draggable.vue
Normal file
64
src/components/Holos/PDF/Draggable.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
icon: String,
|
||||
title: String,
|
||||
description: String,
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['dragstart']);
|
||||
|
||||
/** Referencias */
|
||||
const isDragging = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const handleDragStart = (event) => {
|
||||
isDragging.value = true;
|
||||
event.dataTransfer.setData('text/plain', JSON.stringify({
|
||||
type: props.type,
|
||||
title: props.title
|
||||
}));
|
||||
emit('dragstart', props.type);
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
isDragging.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
draggable="true"
|
||||
@dragstart="handleDragStart"
|
||||
@dragend="handleDragEnd"
|
||||
class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 bg-white cursor-grab hover:bg-gray-50 hover:border-blue-300 transition-colors dark:bg-primary-d dark:border-primary/20 dark:hover:bg-primary/10"
|
||||
:class="{
|
||||
'opacity-50 cursor-grabbing': isDragging,
|
||||
'shadow-sm hover:shadow-md': !isDragging
|
||||
}"
|
||||
>
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-md bg-blue-100 flex items-center justify-center dark:bg-blue-900/30">
|
||||
<GoogleIcon
|
||||
:name="icon"
|
||||
class="text-blue-600 dark:text-blue-400 text-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-primary-dt">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/70 truncate">
|
||||
{{ description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
353
src/components/Holos/PDF/PDFViewport.vue
Normal file
353
src/components/Holos/PDF/PDFViewport.vue
Normal file
@ -0,0 +1,353 @@
|
||||
<script setup>
|
||||
import { ref, computed, nextTick, watch } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import PageSizeSelector from '@Holos/PDF/PageSizeSelector.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
pages: {
|
||||
type: Array,
|
||||
default: () => [{ id: 1, elements: [] }]
|
||||
},
|
||||
selectedElementId: String,
|
||||
isExporting: Boolean
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change', 'page-size-change']);
|
||||
|
||||
/** Referencias */
|
||||
const viewportRef = ref(null);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref('A4');
|
||||
|
||||
/** Tamaños de página */
|
||||
const pageSizes = {
|
||||
'A4': { width: 794, height: 1123, label: '210 × 297 mm' },
|
||||
'A3': { width: 1123, height: 1587, label: '297 × 420 mm' },
|
||||
'Letter': { width: 816, height: 1056, label: '216 × 279 mm' },
|
||||
'Legal': { width: 816, height: 1344, label: '216 × 356 mm' },
|
||||
'Tabloid': { width: 1056, height: 1632, label: '279 × 432 mm' }
|
||||
};
|
||||
|
||||
/** Constantes de diseño ajustadas */
|
||||
const PAGE_MARGIN = 50;
|
||||
const ZOOM_LEVEL = 0.65;
|
||||
|
||||
/** Propiedades computadas */
|
||||
const currentPageSize = computed(() => pageSizes[pageSize.value]);
|
||||
const PAGE_WIDTH = computed(() => currentPageSize.value.width);
|
||||
const PAGE_HEIGHT = computed(() => currentPageSize.value.height);
|
||||
const scaledPageWidth = computed(() => PAGE_WIDTH.value * ZOOM_LEVEL);
|
||||
const scaledPageHeight = computed(() => PAGE_HEIGHT.value * ZOOM_LEVEL);
|
||||
const totalPages = computed(() => props.pages.length);
|
||||
|
||||
/** Watchers */
|
||||
watch(pageSize, (newSize) => {
|
||||
emit('page-size-change', {
|
||||
size: newSize,
|
||||
dimensions: pageSizes[newSize]
|
||||
});
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const handleDrop = (event, pageIndex) => {
|
||||
event.preventDefault();
|
||||
|
||||
const pageElement = event.currentTarget;
|
||||
const rect = pageElement.getBoundingClientRect();
|
||||
|
||||
const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
|
||||
const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
|
||||
|
||||
emit('drop', {
|
||||
originalEvent: event,
|
||||
pageIndex,
|
||||
x: Math.max(0, Math.min(PAGE_WIDTH.value, relativeX)),
|
||||
y: Math.max(0, Math.min(PAGE_HEIGHT.value, relativeY))
|
||||
});
|
||||
};
|
||||
|
||||
const handleDragOver = (event) => {
|
||||
event.preventDefault();
|
||||
emit('dragover', event);
|
||||
};
|
||||
|
||||
const handleClick = (event, pageIndex) => {
|
||||
if (event.target.classList.contains('pdf-page')) {
|
||||
emit('click', { originalEvent: event, pageIndex });
|
||||
}
|
||||
};
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (currentPage.value >= totalPages.value) {
|
||||
addPage();
|
||||
} else {
|
||||
setCurrentPage(currentPage.value + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const addPage = () => {
|
||||
emit('add-page');
|
||||
// Solo cambiar a la nueva página cuando se agrega una
|
||||
nextTick(() => {
|
||||
const newPageNumber = totalPages.value + 1;
|
||||
setCurrentPage(newPageNumber);
|
||||
});
|
||||
};
|
||||
|
||||
const deletePage = (pageIndex) => {
|
||||
if (totalPages.value > 1) {
|
||||
emit('delete-page', pageIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToPage = (pageNumber) => {
|
||||
if (viewportRef.value) {
|
||||
const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
|
||||
if (pageElement) {
|
||||
pageElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'nearest',
|
||||
inline: 'center'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const setCurrentPage = (pageNumber) => {
|
||||
currentPage.value = pageNumber;
|
||||
emit('page-change', pageNumber);
|
||||
|
||||
// Mantener la página actual centrada
|
||||
nextTick(() => {
|
||||
scrollToPage(pageNumber);
|
||||
});
|
||||
};
|
||||
|
||||
/** Métodos expuestos */
|
||||
defineExpose({
|
||||
scrollToPage,
|
||||
setCurrentPage,
|
||||
PAGE_WIDTH,
|
||||
PAGE_HEIGHT,
|
||||
ZOOM_LEVEL
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
|
||||
<!-- Toolbar de páginas -->
|
||||
<div class="flex items-center justify-between px-4 py-3 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-primary-dt">
|
||||
Página {{ currentPage }} de {{ totalPages }}
|
||||
</span>
|
||||
|
||||
<div class="flex items-center gap-1 border-l border-gray-200 dark:border-primary/20 pl-4">
|
||||
<button
|
||||
@click="setCurrentPage(Math.max(1, currentPage - 1))"
|
||||
:disabled="currentPage <= 1"
|
||||
class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded hover:bg-gray-100 dark:hover:bg-primary/10"
|
||||
title="Página anterior"
|
||||
>
|
||||
<GoogleIcon name="keyboard_arrow_left" class="text-lg" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="handleNextPage"
|
||||
:disabled="isExporting"
|
||||
class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded hover:bg-gray-100 dark:hover:bg-primary/10 relative"
|
||||
:title="currentPage >= totalPages ? 'Crear nueva página' : 'Página siguiente'"
|
||||
>
|
||||
<GoogleIcon name="keyboard_arrow_right" class="text-lg" />
|
||||
<!-- Indicador solo cuando estamos en la última página -->
|
||||
<GoogleIcon
|
||||
v-if="currentPage >= totalPages"
|
||||
name="add"
|
||||
class="absolute -top-1 -right-1 text-xs text-green-500 bg-white rounded-full"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Selector de tamaño de página -->
|
||||
<PageSizeSelector v-model="pageSize" />
|
||||
|
||||
<span class="text-xs text-gray-500 dark:text-primary-dt/70 bg-gray-50 dark:bg-primary/10 px-2 py-1 rounded">
|
||||
{{ Math.round(ZOOM_LEVEL * 100) }}% • {{ currentPageSize.label }}
|
||||
</span>
|
||||
|
||||
<button
|
||||
@click="addPage"
|
||||
:disabled="isExporting"
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors disabled:opacity-50 font-medium"
|
||||
>
|
||||
<GoogleIcon name="add" class="text-sm" />
|
||||
Nueva Página
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Viewport de páginas horizontal -->
|
||||
<div
|
||||
ref="viewportRef"
|
||||
class="flex-1 overflow-auto"
|
||||
style="background-color: #f8fafc; background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size: 24px 24px;"
|
||||
>
|
||||
<!-- Contenedor horizontal centrado -->
|
||||
<div class="flex items-center justify-center min-h-full p-6">
|
||||
<div class="flex items-center gap-8">
|
||||
<!-- Páginas -->
|
||||
<div
|
||||
v-for="(page, pageIndex) in pages"
|
||||
:key="page.id"
|
||||
:data-page="pageIndex + 1"
|
||||
class="relative group flex-shrink-0"
|
||||
>
|
||||
<!-- Header de página -->
|
||||
<div class="flex flex-col items-center mb-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm font-medium text-gray-600 dark:text-primary-dt/80">
|
||||
Página {{ pageIndex + 1 }}
|
||||
</span>
|
||||
<button
|
||||
v-if="totalPages > 1"
|
||||
@click="deletePage(pageIndex)"
|
||||
:disabled="isExporting"
|
||||
class="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 disabled:opacity-50 p-1 rounded hover:bg-red-50 transition-all"
|
||||
title="Eliminar página"
|
||||
>
|
||||
<GoogleIcon name="delete" class="text-sm" />
|
||||
</button>
|
||||
</div>
|
||||
<span class="text-xs text-gray-400 dark:text-primary-dt/50">
|
||||
{{ currentPageSize.label }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Contenedor de página con sombra -->
|
||||
<div class="relative">
|
||||
<!-- Sombra de página -->
|
||||
<div class="absolute top-2 left-2 w-full h-full bg-gray-400/30 rounded-lg"></div>
|
||||
|
||||
<!-- Página PDF -->
|
||||
<div
|
||||
class="pdf-page relative bg-white rounded-lg border border-gray-300 dark:border-primary/20 overflow-hidden"
|
||||
:class="{
|
||||
'ring-2 ring-blue-500 ring-opacity-50 shadow-lg': currentPage === pageIndex + 1,
|
||||
'shadow-md hover:shadow-lg': currentPage !== pageIndex + 1,
|
||||
'opacity-50': isExporting
|
||||
}"
|
||||
:style="{
|
||||
width: `${scaledPageWidth}px`,
|
||||
height: `${scaledPageHeight}px`
|
||||
}"
|
||||
@drop="(e) => handleDrop(e, pageIndex)"
|
||||
@dragover="handleDragOver"
|
||||
@click="(e) => handleClick(e, pageIndex)"
|
||||
>
|
||||
<!-- Área de contenido con márgenes visuales -->
|
||||
<div class="relative w-full h-full">
|
||||
<!-- Guías de margen -->
|
||||
<div
|
||||
class="absolute border border-dashed border-blue-300/40 pointer-events-none"
|
||||
:style="{
|
||||
top: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
|
||||
left: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
|
||||
width: `${(PAGE_WIDTH - (PAGE_MARGIN * 2)) * ZOOM_LEVEL}px`,
|
||||
height: `${(PAGE_HEIGHT - (PAGE_MARGIN * 2)) * ZOOM_LEVEL}px`
|
||||
}"
|
||||
></div>
|
||||
|
||||
<!-- Elementos de la página con transformación -->
|
||||
<div
|
||||
class="absolute inset-0"
|
||||
:style="{
|
||||
transform: `scale(${ZOOM_LEVEL})`,
|
||||
transformOrigin: 'top left',
|
||||
width: `${PAGE_WIDTH}px`,
|
||||
height: `${PAGE_HEIGHT}px`
|
||||
}"
|
||||
>
|
||||
<slot
|
||||
name="elements"
|
||||
:page="page"
|
||||
:pageIndex="pageIndex"
|
||||
:pageWidth="PAGE_WIDTH"
|
||||
:pageHeight="PAGE_HEIGHT"
|
||||
:zoomLevel="ZOOM_LEVEL"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Indicador de página vacía -->
|
||||
<div
|
||||
v-if="page.elements.length === 0"
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none z-10"
|
||||
:style="{ transform: `scale(${1/ZOOM_LEVEL})` }"
|
||||
>
|
||||
<div class="text-center text-gray-400 dark:text-primary-dt/50">
|
||||
<GoogleIcon name="description" class="text-4xl mb-2" />
|
||||
<p class="text-sm font-medium">Página {{ pageIndex + 1 }}</p>
|
||||
<p class="text-xs">Arrastra elementos aquí</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overlay durante exportación -->
|
||||
<div
|
||||
v-if="isExporting"
|
||||
class="absolute inset-0 bg-white/90 dark:bg-primary-d/90 flex items-center justify-center z-50 backdrop-blur-sm"
|
||||
>
|
||||
<div class="text-center bg-white dark:bg-primary-d rounded-lg p-6 shadow-lg border border-gray-200 dark:border-primary/20">
|
||||
<GoogleIcon name="picture_as_pdf" class="text-5xl text-red-600 dark:text-red-400 animate-pulse mb-3" />
|
||||
<p class="text-lg font-semibold text-gray-900 dark:text-primary-dt mb-1">Generando PDF...</p>
|
||||
<p class="text-sm text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pdf-page {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pdf-page:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.pdf-page.ring-2 {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.overflow-auto {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.overflow-auto::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.overflow-auto::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.overflow-auto::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
.overflow-auto::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
141
src/components/Holos/PDF/PageSizeSelector.vue
Normal file
141
src/components/Holos/PDF/PageSizeSelector.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: 'A4'
|
||||
}
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
/** Referencias */
|
||||
const isOpen = ref(false);
|
||||
|
||||
/** Tamaños de página disponibles */
|
||||
const pageSizes = [
|
||||
{
|
||||
name: 'A4',
|
||||
label: 'A4 (210 x 297 mm)',
|
||||
width: 794,
|
||||
height: 1123,
|
||||
description: 'Estándar internacional'
|
||||
},
|
||||
{
|
||||
name: 'A3',
|
||||
label: 'A3 (297 x 420 mm)',
|
||||
width: 1123,
|
||||
height: 1587,
|
||||
description: 'Doble de A4'
|
||||
},
|
||||
{
|
||||
name: 'Letter',
|
||||
label: 'Carta (216 x 279 mm)',
|
||||
width: 816,
|
||||
height: 1056,
|
||||
description: 'Estándar US'
|
||||
},
|
||||
{
|
||||
name: 'Legal',
|
||||
label: 'Oficio (216 x 356 mm)',
|
||||
width: 816,
|
||||
height: 1344,
|
||||
description: 'Legal US'
|
||||
},
|
||||
{
|
||||
name: 'Tabloid',
|
||||
label: 'Tabloide (279 x 432 mm)',
|
||||
width: 1056,
|
||||
height: 1632,
|
||||
description: 'Doble carta'
|
||||
}
|
||||
];
|
||||
|
||||
/** Propiedades computadas */
|
||||
const selectedSize = computed(() => {
|
||||
return pageSizes.find(size => size.name === props.modelValue) || pageSizes[0];
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const selectSize = (size) => {
|
||||
emit('update:modelValue', size.name);
|
||||
isOpen.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<!-- Selector principal -->
|
||||
<button
|
||||
@click="isOpen = !isOpen"
|
||||
class="flex items-center gap-2 px-3 py-2 text-sm bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-md hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
|
||||
>
|
||||
<GoogleIcon name="aspect_ratio" class="text-gray-500 dark:text-primary-dt/70" />
|
||||
<span class="text-gray-700 dark:text-primary-dt">{{ selectedSize.name }}</span>
|
||||
<GoogleIcon
|
||||
name="expand_more"
|
||||
class="text-gray-400 dark:text-primary-dt/50 transition-transform"
|
||||
:class="{ 'rotate-180': isOpen }"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown -->
|
||||
<div
|
||||
v-if="isOpen"
|
||||
@click.away="isOpen = false"
|
||||
class="absolute top-full left-0 mt-1 w-72 bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-lg shadow-lg z-50 py-2"
|
||||
>
|
||||
<div class="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider border-b border-gray-100 dark:border-primary/20">
|
||||
Tamaños de página
|
||||
</div>
|
||||
|
||||
<div class="max-h-64 overflow-y-auto">
|
||||
<button
|
||||
v-for="size in pageSizes"
|
||||
:key="size.name"
|
||||
@click="selectSize(size)"
|
||||
class="w-full flex items-center gap-3 px-3 py-3 hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors text-left"
|
||||
:class="{
|
||||
'bg-blue-50 dark:bg-blue-900/20': selectedSize.name === size.name
|
||||
}"
|
||||
>
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-8 h-10 border border-gray-300 dark:border-primary/30 rounded-sm bg-white dark:bg-primary-d flex items-center justify-center"
|
||||
:class="{
|
||||
'border-blue-500 dark:border-blue-400': selectedSize.name === size.name
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="bg-gray-200 dark:bg-primary/20 rounded-sm"
|
||||
:style="{
|
||||
width: `${Math.min(20, (size.width / size.height) * 32)}px`,
|
||||
height: `${Math.min(32, (size.height / size.width) * 20)}px`
|
||||
}"
|
||||
:class="{
|
||||
'bg-blue-200 dark:bg-blue-800': selectedSize.name === size.name
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-gray-900 dark:text-primary-dt">{{ size.label }}</div>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/70">{{ size.description }}</div>
|
||||
<div class="text-xs text-gray-400 dark:text-primary-dt/50 mt-1">
|
||||
{{ size.width }} x {{ size.height }} px
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedSize.name === size.name" class="flex-shrink-0">
|
||||
<GoogleIcon name="check" class="text-blue-500 dark:text-blue-400" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
233
src/components/Holos/PDF/TextFormatter.vue
Normal file
233
src/components/Holos/PDF/TextFormatter.vue
Normal file
@ -0,0 +1,233 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['update']);
|
||||
|
||||
/** Propiedades computadas */
|
||||
const formatting = computed(() => props.element?.formatting || {});
|
||||
const hasTextElement = computed(() => props.element?.type === 'text');
|
||||
|
||||
/** Métodos */
|
||||
const toggleBold = () => {
|
||||
if (!hasTextElement.value) return;
|
||||
updateFormatting('bold', !formatting.value.bold);
|
||||
};
|
||||
|
||||
const toggleItalic = () => {
|
||||
if (!hasTextElement.value) return;
|
||||
updateFormatting('italic', !formatting.value.italic);
|
||||
};
|
||||
|
||||
const toggleUnderline = () => {
|
||||
if (!hasTextElement.value) return;
|
||||
updateFormatting('underline', !formatting.value.underline);
|
||||
};
|
||||
|
||||
const updateFontSize = (size) => {
|
||||
if (!hasTextElement.value) return;
|
||||
updateFormatting('fontSize', size);
|
||||
};
|
||||
|
||||
const updateTextAlign = (align) => {
|
||||
if (!hasTextElement.value) return;
|
||||
updateFormatting('textAlign', align);
|
||||
};
|
||||
|
||||
const updateColor = (color) => {
|
||||
if (!hasTextElement.value) return;
|
||||
updateFormatting('color', color);
|
||||
};
|
||||
|
||||
const updateFormatting = (key, value) => {
|
||||
const newFormatting = { ...formatting.value, [key]: value };
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
formatting: newFormatting
|
||||
});
|
||||
};
|
||||
|
||||
/** Colores predefinidos */
|
||||
const predefinedColors = [
|
||||
'#000000', '#333333', '#666666', '#999999',
|
||||
'#FF0000', '#00FF00', '#0000FF', '#FFFF00',
|
||||
'#FF00FF', '#00FFFF', '#FFA500', '#800080'
|
||||
];
|
||||
|
||||
/** Tamaños de fuente */
|
||||
const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="visible && hasTextElement"
|
||||
class="flex items-center gap-6 px-4 py-2 bg-gray-50 dark:bg-primary-d/50 border-b border-gray-200 dark:border-primary/20"
|
||||
>
|
||||
<!-- Estilo de texto -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Estilo:</span>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
@click="toggleBold"
|
||||
:class="[
|
||||
'w-8 h-8 rounded flex items-center justify-center text-sm font-bold transition-colors',
|
||||
formatting.bold
|
||||
? 'bg-blue-500 text-white shadow-sm'
|
||||
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
||||
]"
|
||||
title="Negrita (Ctrl+B)"
|
||||
>
|
||||
B
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="toggleItalic"
|
||||
:class="[
|
||||
'w-8 h-8 rounded flex items-center justify-center text-sm italic transition-colors',
|
||||
formatting.italic
|
||||
? 'bg-blue-500 text-white shadow-sm'
|
||||
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
||||
]"
|
||||
title="Cursiva (Ctrl+I)"
|
||||
>
|
||||
I
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="toggleUnderline"
|
||||
:class="[
|
||||
'w-8 h-8 rounded flex items-center justify-center text-sm underline transition-colors',
|
||||
formatting.underline
|
||||
? 'bg-blue-500 text-white shadow-sm'
|
||||
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
||||
]"
|
||||
title="Subrayado (Ctrl+U)"
|
||||
>
|
||||
U
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
|
||||
|
||||
<!-- Tamaño de fuente -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Tamaño:</span>
|
||||
<select
|
||||
:value="formatting.fontSize || 12"
|
||||
@change="updateFontSize(parseInt($event.target.value))"
|
||||
class="px-2 py-1 text-sm border border-gray-200 rounded bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option v-for="size in fontSizes" :key="size" :value="size">
|
||||
{{ size }}px
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
|
||||
|
||||
<!-- Alineación -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Alinear:</span>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
@click="updateTextAlign('left')"
|
||||
:class="[
|
||||
'w-8 h-8 rounded flex items-center justify-center transition-colors',
|
||||
(formatting.textAlign || 'left') === 'left'
|
||||
? 'bg-blue-500 text-white shadow-sm'
|
||||
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
||||
]"
|
||||
title="Alinear izquierda"
|
||||
>
|
||||
<GoogleIcon name="format_align_left" class="text-sm" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="updateTextAlign('center')"
|
||||
:class="[
|
||||
'w-8 h-8 rounded flex items-center justify-center transition-colors',
|
||||
formatting.textAlign === 'center'
|
||||
? 'bg-blue-500 text-white shadow-sm'
|
||||
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
||||
]"
|
||||
title="Centrar"
|
||||
>
|
||||
<GoogleIcon name="format_align_center" class="text-sm" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="updateTextAlign('right')"
|
||||
:class="[
|
||||
'w-8 h-8 rounded flex items-center justify-center transition-colors',
|
||||
formatting.textAlign === 'right'
|
||||
? 'bg-blue-500 text-white shadow-sm'
|
||||
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
|
||||
]"
|
||||
title="Alinear derecha"
|
||||
>
|
||||
<GoogleIcon name="format_align_right" class="text-sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
|
||||
|
||||
<!-- Color de texto -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Color:</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Color actual -->
|
||||
<div
|
||||
class="w-8 h-8 rounded border-2 border-gray-300 cursor-pointer relative overflow-hidden"
|
||||
:style="{ backgroundColor: formatting.color || '#000000' }"
|
||||
title="Color actual"
|
||||
>
|
||||
<input
|
||||
type="color"
|
||||
:value="formatting.color || '#000000'"
|
||||
@input="updateColor($event.target.value)"
|
||||
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Colores rápidos -->
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
v-for="color in predefinedColors.slice(0, 6)"
|
||||
:key="color"
|
||||
@click="updateColor(color)"
|
||||
class="w-6 h-6 rounded border border-gray-300 hover:scale-110 transition-transform"
|
||||
:class="{
|
||||
'ring-2 ring-blue-500': (formatting.color || '#000000') === color
|
||||
}"
|
||||
:style="{ backgroundColor: color }"
|
||||
:title="color"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Información del elemento -->
|
||||
<div class="ml-auto flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="text_fields" class="text-sm" />
|
||||
<span>Elemento de texto seleccionado</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
261
src/components/Holos/PDFViewport.vue
Normal file
261
src/components/Holos/PDFViewport.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<script setup>
|
||||
import { ref, computed, nextTick } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
pages: {
|
||||
type: Array,
|
||||
default: () => [{ id: 1, elements: [] }]
|
||||
},
|
||||
selectedElementId: String,
|
||||
isExporting: Boolean
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change']);
|
||||
|
||||
/** Referencias */
|
||||
const viewportRef = ref(null);
|
||||
const currentPage = ref(1);
|
||||
|
||||
/** Constantes de diseño */
|
||||
const PAGE_WIDTH = 794; // A4 width in pixels (210mm @ 96dpi * 3.78)
|
||||
const PAGE_HEIGHT = 1123; // A4 height in pixels (297mm @ 96dpi * 3.78)
|
||||
const PAGE_MARGIN = 40;
|
||||
const ZOOM_LEVEL = 0.8; // Factor de escala para visualización
|
||||
|
||||
/** Propiedades computadas */
|
||||
const scaledPageWidth = computed(() => PAGE_WIDTH * ZOOM_LEVEL);
|
||||
const scaledPageHeight = computed(() => PAGE_HEIGHT * ZOOM_LEVEL);
|
||||
const totalPages = computed(() => props.pages.length);
|
||||
|
||||
/** Métodos */
|
||||
const handleDrop = (event, pageIndex) => {
|
||||
event.preventDefault();
|
||||
|
||||
const pageElement = event.currentTarget;
|
||||
const rect = pageElement.getBoundingClientRect();
|
||||
|
||||
// Calcular posición relativa a la página específica
|
||||
const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
|
||||
const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
|
||||
|
||||
emit('drop', {
|
||||
originalEvent: event,
|
||||
pageIndex,
|
||||
x: Math.max(PAGE_MARGIN, Math.min(PAGE_WIDTH - PAGE_MARGIN, relativeX)),
|
||||
y: Math.max(PAGE_MARGIN, Math.min(PAGE_HEIGHT - PAGE_MARGIN, relativeY))
|
||||
});
|
||||
};
|
||||
|
||||
const handleDragOver = (event) => {
|
||||
event.preventDefault();
|
||||
emit('dragover', event);
|
||||
};
|
||||
|
||||
const handleClick = (event, pageIndex) => {
|
||||
if (event.target.classList.contains('pdf-page')) {
|
||||
emit('click', { originalEvent: event, pageIndex });
|
||||
}
|
||||
};
|
||||
|
||||
const addPage = () => {
|
||||
emit('add-page');
|
||||
nextTick(() => {
|
||||
scrollToPage(totalPages.value);
|
||||
});
|
||||
};
|
||||
|
||||
const deletePage = (pageIndex) => {
|
||||
if (totalPages.value > 1) {
|
||||
emit('delete-page', pageIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToPage = (pageNumber) => {
|
||||
if (viewportRef.value) {
|
||||
const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
|
||||
if (pageElement) {
|
||||
pageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const setCurrentPage = (pageNumber) => {
|
||||
currentPage.value = pageNumber;
|
||||
emit('page-change', pageNumber);
|
||||
};
|
||||
|
||||
/** Métodos expuestos */
|
||||
defineExpose({
|
||||
scrollToPage,
|
||||
setCurrentPage,
|
||||
PAGE_WIDTH,
|
||||
PAGE_HEIGHT,
|
||||
ZOOM_LEVEL
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
|
||||
<!-- Toolbar de páginas -->
|
||||
<div class="flex items-center justify-between px-4 py-2 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm text-gray-600 dark:text-primary-dt">
|
||||
Página {{ currentPage }} de {{ totalPages }}
|
||||
</span>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
@click="setCurrentPage(Math.max(1, currentPage - 1))"
|
||||
:disabled="currentPage <= 1"
|
||||
class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
|
||||
>
|
||||
<GoogleIcon name="keyboard_arrow_left" class="text-lg" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="setCurrentPage(Math.min(totalPages, currentPage + 1))"
|
||||
:disabled="currentPage >= totalPages"
|
||||
class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
|
||||
>
|
||||
<GoogleIcon name="keyboard_arrow_right" class="text-lg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
<button
|
||||
@click="addPage"
|
||||
:disabled="isExporting"
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50"
|
||||
>
|
||||
<GoogleIcon name="add" class="text-sm" />
|
||||
Nueva Página
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Viewport de páginas -->
|
||||
<div
|
||||
ref="viewportRef"
|
||||
class="flex-1 overflow-auto p-8"
|
||||
style="background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-8">
|
||||
<!-- Páginas -->
|
||||
<div
|
||||
v-for="(page, pageIndex) in pages"
|
||||
:key="page.id"
|
||||
:data-page="pageIndex + 1"
|
||||
class="relative"
|
||||
@mouseenter="setCurrentPage(pageIndex + 1)"
|
||||
>
|
||||
<!-- Número de página -->
|
||||
<div class="absolute -top-6 left-0 flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
|
||||
<span>Página {{ pageIndex + 1 }}</span>
|
||||
|
||||
<button
|
||||
v-if="totalPages > 1"
|
||||
@click="deletePage(pageIndex)"
|
||||
:disabled="isExporting"
|
||||
class="text-red-500 hover:text-red-700 disabled:opacity-50"
|
||||
title="Eliminar página"
|
||||
>
|
||||
<GoogleIcon name="delete" class="text-sm" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Página PDF -->
|
||||
<div
|
||||
class="pdf-page relative bg-white rounded-lg shadow-lg border border-gray-300 dark:border-primary/20"
|
||||
:class="{
|
||||
'ring-2 ring-blue-500': currentPage === pageIndex + 1,
|
||||
'opacity-50': isExporting
|
||||
}"
|
||||
:style="{
|
||||
width: `${scaledPageWidth}px`,
|
||||
height: `${scaledPageHeight}px`,
|
||||
transform: `scale(${ZOOM_LEVEL})`,
|
||||
transformOrigin: 'top left'
|
||||
}"
|
||||
@drop="(e) => handleDrop(e, pageIndex)"
|
||||
@dragover="handleDragOver"
|
||||
@click="(e) => handleClick(e, pageIndex)"
|
||||
>
|
||||
<!-- Márgenes visuales -->
|
||||
<div
|
||||
class="absolute border border-dashed border-gray-300 dark:border-primary/30 pointer-events-none"
|
||||
:style="{
|
||||
top: `${PAGE_MARGIN}px`,
|
||||
left: `${PAGE_MARGIN}px`,
|
||||
width: `${PAGE_WIDTH - (PAGE_MARGIN * 2)}px`,
|
||||
height: `${PAGE_HEIGHT - (PAGE_MARGIN * 2)}px`
|
||||
}"
|
||||
></div>
|
||||
|
||||
<!-- Elementos de la página -->
|
||||
<slot
|
||||
name="elements"
|
||||
:page="page"
|
||||
:pageIndex="pageIndex"
|
||||
:pageWidth="PAGE_WIDTH"
|
||||
:pageHeight="PAGE_HEIGHT"
|
||||
/>
|
||||
|
||||
<!-- Indicador de página vacía -->
|
||||
<div
|
||||
v-if="page.elements.length === 0"
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none"
|
||||
>
|
||||
<div class="text-center text-gray-400 dark:text-primary-dt/50">
|
||||
<GoogleIcon name="description" class="text-4xl mb-2" />
|
||||
<p class="text-sm">Página {{ pageIndex + 1 }}</p>
|
||||
<p class="text-xs">Arrastra elementos aquí</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Regla inferior (tamaño de referencia) -->
|
||||
<div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/50 text-center">
|
||||
210 × 297 mm (A4)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón para agregar página al final -->
|
||||
<button
|
||||
@click="addPage"
|
||||
:disabled="isExporting"
|
||||
class="flex flex-col items-center justify-center w-40 h-20 border-2 border-dashed border-gray-300 dark:border-primary/30 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<GoogleIcon name="add" class="text-2xl text-gray-400 dark:text-primary-dt/50" />
|
||||
<span class="text-xs text-gray-500 dark:text-primary-dt/70 mt-1">Nueva Página</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overlay durante exportación -->
|
||||
<div
|
||||
v-if="isExporting"
|
||||
class="absolute inset-0 bg-white/80 dark:bg-primary-d/80 flex items-center justify-center z-50"
|
||||
>
|
||||
<div class="text-center">
|
||||
<GoogleIcon name="picture_as_pdf" class="text-4xl text-red-600 dark:text-red-400 animate-pulse mb-2" />
|
||||
<p class="text-sm font-medium text-gray-900 dark:text-primary-dt">Generando PDF...</p>
|
||||
<p class="text-xs text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pdf-page {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pdf-page:hover {
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
@ -86,7 +86,7 @@ const clear = () => {
|
||||
<RouterLink :to="$view({name:'index'})">
|
||||
<IconButton
|
||||
:title="$t('home')"
|
||||
class="text-white"
|
||||
class="text-white !bg-blue-600"
|
||||
icon="home"
|
||||
filled
|
||||
/>
|
||||
|
||||
@ -32,7 +32,7 @@ const loader = useLoader()
|
||||
class="fixed px-2 w-[calc(100vw)] bg-transparent transition-all duration-300 z-50"
|
||||
:class="{'md:w-[calc(100vw-16rem)]':leftSidebar.isOpened,'md:w-[calc(100vw)]':!leftSidebar.isClosed}"
|
||||
>
|
||||
<div class="my-2 flex px-2 items-center justify-between h-[2.75rem] rounded-sm bg-primary dark:bg-primary-d text-white z-20 ">
|
||||
<div class="my-2 flex px-2 items-center justify-between h-[2.75rem] rounded-sm bg-white dark:bg-primary-d text-gray-700 z-20 ">
|
||||
<GoogleIcon
|
||||
class="text-2xl mt-1 z-50"
|
||||
name="list"
|
||||
|
||||
54
src/components/Holos/Skeleton/RhSidebar.vue
Normal file
54
src/components/Holos/Skeleton/RhSidebar.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import useLeftSidebar from '@Stores/LeftSidebar'
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Definidores */
|
||||
const leftSidebar = useLeftSidebar()
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['open']);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
sidebar: Boolean
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="fixed top-[3.1rem] md:top-0 w-fit h-[calc(100vh-3.1rem)] md:h-screen transition-all duration-300 z-50"
|
||||
:class="{'-translate-x-0':leftSidebar.isOpened, '-translate-x-64':leftSidebar.isClosed}"
|
||||
>
|
||||
<nav
|
||||
class="flex md:w-64 h-full transition-all duration-300 border-none"
|
||||
:class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
|
||||
>
|
||||
<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-white dark:bg-primary-d text-page-t dark:text-page-dt border-r border-gray-200 dark:border-primary/20">
|
||||
<div class="py-4 bg-transparent">
|
||||
<div class="flex flex-row justify-center items-center w-full px-4 mb-6 gap-2">
|
||||
<GoogleIcon class="bg-[#2563eb] text-white text-3xl rounded p-1" name="apartment" />
|
||||
<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 space-y-1 px-2">
|
||||
<slot />
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-4 px-4 py-4 border-t border-gray-200">
|
||||
<p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
|
||||
2025 RH Manager © Golsystems
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="h-full"
|
||||
: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()"
|
||||
></div>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
78
src/components/Holos/Skeleton/Sidebar/Drop.vue
Normal file
78
src/components/Holos/Skeleton/Sidebar/Drop.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { RouterLink, useRoute } from "vue-router";
|
||||
|
||||
import useLeftSidebar from "@Stores/LeftSidebar";
|
||||
import GoogleIcon from "@Shared/GoogleIcon.vue";
|
||||
|
||||
/** Definidores */
|
||||
const leftSidebar = useLeftSidebar();
|
||||
const vroute = useRoute();
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
name: String,
|
||||
icon: String,
|
||||
to: String,
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const isCollapsed = ref(props.collapsed);
|
||||
|
||||
const closeSidebar = () => {
|
||||
if (TwScreen.isDevice("phone") || TwScreen.isDevice("tablet")) {
|
||||
leftSidebar.close();
|
||||
}
|
||||
};
|
||||
|
||||
const isActive = computed(() => props.active || props.to === vroute.name);
|
||||
|
||||
const classes = computed(() => {
|
||||
return isActive.value
|
||||
? "flex items-center px-4 py-2 mx-2 my-1 text-white !bg-blue-600 rounded-lg transition-all duration-200 !border-transparent"
|
||||
: "flex items-center px-4 py-2 mx-2 my-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200";
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul>
|
||||
<li class="hidden md:block">
|
||||
<div class="flex items-center px-2 py-2 rounded">
|
||||
<button
|
||||
class="dropdown-toggle w-full"
|
||||
@click.stop="isCollapsed = !isCollapsed"
|
||||
>
|
||||
<RouterLink
|
||||
:to="$view({ name: props.to })"
|
||||
:class="classes"
|
||||
class="flex items-center justify-between flex-1"
|
||||
@click="closeSidebar"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<GoogleIcon v-if="icon" :name="icon" class="text-xl mr-2" />
|
||||
<span class="text-sm font-medium">{{ name }}</span>
|
||||
</div>
|
||||
|
||||
<GoogleIcon
|
||||
:name="isCollapsed ? 'expand_more' : 'expand_less'"
|
||||
class="text-gray-400 text-lg"
|
||||
/>
|
||||
</RouterLink>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<div
|
||||
class="transition-all duration-300 ease-in-out overflow-hidden"
|
||||
:class="{ 'max-h-0': isCollapsed, 'max-h-96': !isCollapsed }"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</ul>
|
||||
</template>
|
||||
@ -1,8 +1,7 @@
|
||||
<script setup>
|
||||
import { APP_VERSION, APP_COPYRIGHT } from '@/config.js'
|
||||
import useLeftSidebar from '@Stores/LeftSidebar'
|
||||
|
||||
import Logo from '@Holos/Logo.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Definidores */
|
||||
const leftSidebar = useLeftSidebar()
|
||||
@ -16,7 +15,6 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const year = (new Date).getFullYear();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -29,30 +27,32 @@ const year = (new Date).getFullYear();
|
||||
:class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
|
||||
>
|
||||
<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>
|
||||
<div class="flex w-full px-2 mt-2">
|
||||
<Logo
|
||||
class="text-lg inline-flex"
|
||||
/>
|
||||
<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 class="py-4 bg-transparent">
|
||||
<div class="flex flex-row justify-center items-center w-full px-4 mb-6 gap-2">
|
||||
<GoogleIcon class="bg-[#2563eb] text-white text-3xl rounded p-1" name="apartment" />
|
||||
<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>
|
||||
<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 />
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-4 px-5 space-y-1">
|
||||
<p class="block text-center text-xs">
|
||||
<div class="mb-4 px-4 py-4 border-t border-gray-200">
|
||||
<p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
|
||||
© {{ year }} {{ APP_COPYRIGHT }}
|
||||
</p>
|
||||
<p class="text-center text-xs text-yellow-500 cursor-pointer">
|
||||
<RouterLink :to="{name:'changelogs.app'}"> APP {{ APP_VERSION }} </RouterLink> <RouterLink :to="{name:'changelogs.core'}"> API {{ $page.app.version }} </RouterLink>
|
||||
<p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
|
||||
APP {{ APP_VERSION }} API {{ $page.app.version }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
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()"
|
||||
></div>
|
||||
</nav>
|
||||
|
||||
@ -13,15 +13,26 @@ const vroute = useRoute();
|
||||
const props = defineProps({
|
||||
icon: String,
|
||||
name: String,
|
||||
to: String
|
||||
to: String,
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const classes = computed(() => {
|
||||
let status = props.to === vroute.name
|
||||
? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d'
|
||||
: 'border-transparent';
|
||||
let isActive = props.active || props.to === vroute.name;
|
||||
|
||||
return `flex items-center h-11 focus:outline-hidden hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition`
|
||||
if (isActive) {
|
||||
return 'flex items-center px-4 py-3 mx-2 my-1 text-white !bg-blue-600 rounded-lg transition-all duration-200 !border-transparent';
|
||||
} else {
|
||||
return 'flex items-center px-4 py-3 mx-2 my-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200';
|
||||
}
|
||||
});
|
||||
|
||||
const iconClasses = computed(() => {
|
||||
let isActive = props.active || props.to === vroute.name;
|
||||
return isActive ? 'text-white' : 'text-gray-500';
|
||||
});
|
||||
|
||||
const closeSidebar = () => {
|
||||
@ -39,19 +50,21 @@ const closeSidebar = () => {
|
||||
>
|
||||
<span
|
||||
v-if="icon"
|
||||
class="inline-flex justify-center items-center ml-4 mr-2"
|
||||
class="inline-flex justify-center items-center mr-3"
|
||||
>
|
||||
<GoogleIcon
|
||||
class="text-xl"
|
||||
:class="iconClasses"
|
||||
:name="icon"
|
||||
outline
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="name"
|
||||
v-text="$t(name)"
|
||||
class="text-sm tracking-wide truncate"
|
||||
/>
|
||||
class="text-sm font-medium"
|
||||
>
|
||||
{{ name }}
|
||||
</span>
|
||||
<slot />
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<script setup>
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
name: String
|
||||
name: String,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul v-if="$slots['default']">
|
||||
<li class="px-5 hidden md:block">
|
||||
<div class="flex flex-row items-center h-8">
|
||||
<div class="flex flex-row items-center h-8 cursor-pointer">
|
||||
<div class="text-sm font-light tracking-wide text-gray-400 uppercase">
|
||||
{{ name }}
|
||||
</div>
|
||||
|
||||
@ -12,6 +12,9 @@ import TailwindScreen from '@Plugins/TailwindScreen'
|
||||
import { pagePlugin } from '@Services/Page';
|
||||
import { defineApp, reloadApp, view } from '@Services/Page';
|
||||
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 Error503 from '@Pages/Errors/503.vue'
|
||||
@ -63,6 +66,8 @@ async function boot() {
|
||||
.use(pagePlugin)
|
||||
.use(router)
|
||||
.use(ZiggyVue)
|
||||
.use(VCalendar, {})
|
||||
.use(VueApexCharts)
|
||||
.mount('#app');
|
||||
} else {
|
||||
createApp(Error503)
|
||||
|
||||
170
src/layouts/AdminLayout.vue
Normal file
170
src/layouts/AdminLayout.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { hasPermission } from '@Plugins/RolePermission';
|
||||
import { hasToken } from '@Services/Api';
|
||||
import { reloadApp } from '@Services/Page';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
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';
|
||||
import DropDown from '@Holos/Skeleton/Sidebar/Drop.vue'
|
||||
|
||||
/** Definidores */
|
||||
const loader = useLoader()
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
defineProps({
|
||||
title: String,
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
loader.boot()
|
||||
|
||||
if(!hasToken()) {
|
||||
return router.push({ name: 'auth.index' })
|
||||
} else {
|
||||
reloadApp();
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout
|
||||
:title="title"
|
||||
>
|
||||
|
||||
<template #leftSidebar>
|
||||
<Section name="Principal">
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Dashboard"
|
||||
to="admin.dashboard.index"
|
||||
/>
|
||||
<DropDown
|
||||
icon="people"
|
||||
name="Empleados"
|
||||
to="admin.employees.index"
|
||||
:collapsed="true"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</DropDown>
|
||||
</Section>
|
||||
<Section name="Vacaciones">
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Vacaciones"
|
||||
to="admin.vacations.index"
|
||||
/>
|
||||
</Section>
|
||||
<Section name="Capacitaciones">
|
||||
<DropDown
|
||||
icon="grid_view"
|
||||
name="Cursos"
|
||||
to="admin.courses.index"
|
||||
:collapsed="true"
|
||||
>
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Solicitud de Cursos"
|
||||
to="admin.courses.request"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</DropDown>
|
||||
</Section>
|
||||
<Section name="Eventos">
|
||||
<DropDown
|
||||
icon="grid_view"
|
||||
name="Eventos"
|
||||
to="admin.events.index"
|
||||
:collapsed="true"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</DropDown>
|
||||
</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"
|
||||
to="admin.roles.index"
|
||||
/>
|
||||
<Link
|
||||
v-if="hasPermission('activities.index')"
|
||||
icon="event"
|
||||
name="Historial de Acciones"
|
||||
to="admin.activities.index"
|
||||
/>
|
||||
</Section>
|
||||
<Section
|
||||
name="Documentos"
|
||||
>
|
||||
<Link
|
||||
v-if="hasPermission('activities.index')"
|
||||
icon="event"
|
||||
name="Maquetador de Documentos"
|
||||
to="admin.maquetador.index"
|
||||
/>
|
||||
</Section>
|
||||
</template>
|
||||
<!-- Contenido -->
|
||||
<RouterView />
|
||||
<!-- Fin contenido -->
|
||||
</Layout>
|
||||
</template>
|
||||
@ -1,7 +1,10 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { hasToken } from '@Services/Api';
|
||||
import { reloadApp } from '@Services/Page';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
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';
|
||||
@ -9,6 +12,7 @@ import Section from '@Holos/Skeleton/Sidebar/Section.vue';
|
||||
|
||||
/** Definidores */
|
||||
const loader = useLoader()
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
defineProps({
|
||||
@ -18,6 +22,12 @@ defineProps({
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
loader.boot()
|
||||
|
||||
if(!hasToken()) {
|
||||
return router.push({ name: 'auth.index' })
|
||||
} else {
|
||||
reloadApp();
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -26,42 +36,27 @@ onMounted(() => {
|
||||
<Layout
|
||||
:title="title"
|
||||
>
|
||||
|
||||
<template #leftSidebar>
|
||||
<Section name="Principal">
|
||||
<Link
|
||||
icon="monitoring"
|
||||
name="dashboard"
|
||||
name="Dashboard"
|
||||
to="dashboard.index"
|
||||
/>
|
||||
<Link
|
||||
icon="calendar_month"
|
||||
name="Vacaciones"
|
||||
to="vacations.index"
|
||||
/>
|
||||
<Link
|
||||
icon="person"
|
||||
name="profile"
|
||||
name="Perfil"
|
||||
to="profile.show"
|
||||
/>
|
||||
</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 -->
|
||||
|
||||
61
src/layouts/CoordinatorLayout.vue
Normal file
61
src/layouts/CoordinatorLayout.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { hasToken } from '@Services/Api';
|
||||
import { reloadApp } from '@Services/Page';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
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()
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
defineProps({
|
||||
title: String,
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
loader.boot()
|
||||
|
||||
if(!hasToken()) {
|
||||
return router.push({ name: 'auth.index' })
|
||||
} else {
|
||||
reloadApp();
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout
|
||||
:title="title"
|
||||
>
|
||||
<template #leftSidebar>
|
||||
<Section name="Principal">
|
||||
<Link
|
||||
icon="monitoring"
|
||||
name="Dashboard"
|
||||
to="coordinator.dashboard.index"
|
||||
/>
|
||||
<Link
|
||||
icon="calendar_month"
|
||||
name="Vacaciones"
|
||||
to="vacations.coordinator.index"
|
||||
/>
|
||||
</Section>
|
||||
<Section
|
||||
:name="$t('admin.title')"
|
||||
>
|
||||
</Section>
|
||||
</template>
|
||||
<!-- Contenido -->
|
||||
<RouterView />
|
||||
<!-- Fin contenido -->
|
||||
</Layout>
|
||||
</template>
|
||||
147
src/pages/Academic/Index.vue
Normal file
147
src/pages/Academic/Index.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<script setup>
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 max-w-auto mx-auto">
|
||||
<!-- Página: Header principal -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Historial Académico</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de grados académicos y certificaciones profesionales</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Adding text="Agregar Registro" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card principal: perfil + secciones -->
|
||||
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<!-- Perfil -->
|
||||
<header class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
|
||||
<!-- icono usuario -->
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="school"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">María González López</h2>
|
||||
<p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información académica y certificaciones profesionales</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Secciones: Grados Académicos -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="book"
|
||||
/>
|
||||
Grados Académicos
|
||||
</h3>
|
||||
|
||||
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<!-- Item grado -->
|
||||
<article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Licenciatura en Ingeniería en Sistemas</h4>
|
||||
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Universidad Nacional Autónoma de México</p>
|
||||
<p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Año: 2015</p>
|
||||
</div>
|
||||
|
||||
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
|
||||
Licenciatura
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Maestría en Ciencias de la Computación</h4>
|
||||
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Instituto Tecnológico de Monterrey</p>
|
||||
<p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Año: 2018</p>
|
||||
</div>
|
||||
|
||||
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
|
||||
Maestría
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Secciones: Certificaciones -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="license"
|
||||
/>
|
||||
Certificaciones
|
||||
</h3>
|
||||
|
||||
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<!-- Cert vigente -->
|
||||
<article class="rounded-lg border border-gray-100 bg-green-50/40 p-4 relative dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">AWS Certified Solutions Architect</h4>
|
||||
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Amazon Web Services</p>
|
||||
<p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: 2023-05-15</p>
|
||||
<p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: 2026-05-15</p>
|
||||
</div>
|
||||
|
||||
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt">
|
||||
Vigente
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Cert vencida -->
|
||||
<article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Certified ScrumMaster</h4>
|
||||
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Scrum Alliance</p>
|
||||
<p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: 2022-08-20</p>
|
||||
<p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: 2024-08-20</p>
|
||||
</div>
|
||||
|
||||
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt">
|
||||
Vencida
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Acciones al final de la tarjeta -->
|
||||
<div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="add"
|
||||
/>
|
||||
Agregar Grado
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="add"
|
||||
/>
|
||||
Agregar Certificación
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
149
src/pages/Additional/Index.vue
Normal file
149
src/pages/Additional/Index.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<script setup>
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
</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">Información Adicional</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Deportes, evaluaciones de desempeño y desarrollo profesional</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Adding text="Nueva Evaluación" />
|
||||
</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">
|
||||
<!-- Perfil -->
|
||||
<header class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="description" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">María González López</h2>
|
||||
<p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información adicional y evaluación de desempeño</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Deportes -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
|
||||
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="sports_tennis" />
|
||||
Deportes que Practica
|
||||
</h3>
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
<span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Natación</span>
|
||||
<span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Yoga</span>
|
||||
<span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Ciclismo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Evaluación de Desempeño -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
|
||||
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="star" />
|
||||
Evaluación de Desempeño
|
||||
</h3>
|
||||
|
||||
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
|
||||
<!-- Puntuación grande -->
|
||||
<div class="md:col-span-2 bg-gradient-to-r from-[#1e40af] to-[#2563eb] text-white rounded-lg p-6 flex flex-col justify-between shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-sm font-semibold">Puntuación General</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full">Excelente</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="text-4xl font-bold">92/100</div>
|
||||
<div class="text-sm opacity-80 mt-1">Evaluado el 2024-01-15</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Archivo evaluación -->
|
||||
<div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Archivo de Evaluación</div>
|
||||
<div class="mt-3 flex items-start gap-3">
|
||||
<GoogleIcon class="text-gray-400 dark:text-primary-dt text-xl" name="picture_as_pdf" />
|
||||
<div>
|
||||
<div class="text-sm text-gray-700 dark:text-primary-dt">evaluacion_maria_2024.pdf</div>
|
||||
<div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">Evaluador: Juan Pérez</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Observaciones -->
|
||||
<div class="mt-4 rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Observaciones</div>
|
||||
<div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
Excelente desempeño...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Objetivos y Progreso -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
|
||||
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="track_changes" />
|
||||
Objetivos y Progreso
|
||||
</h3>
|
||||
|
||||
<div class="mt-4 space-y-4">
|
||||
<!-- Objetivo 1 -->
|
||||
<div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Completar certificación en React Advanced</div>
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">75%</div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/70">Fecha límite: 2024-03-30</div>
|
||||
<div class="mt-3 h-3 rounded-full bg-gray-100 dark:bg-primary/10 overflow-hidden">
|
||||
<div class="h-full bg-[#2563eb]" style="width:75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Objetivo 2 -->
|
||||
<div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Liderar proyecto de refactorización</div>
|
||||
<div class="text-sm text-gray-500 dark:text_primary-dt/70">45%</div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/70">Fecha límite: 2024-04-15</div>
|
||||
<div class="mt-3 h-3 rounded-full bg-gray-100 dark:bg-primary/10 overflow-hidden">
|
||||
<div class="h-full bg-[#2563eb]" style="width:45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Acciones -->
|
||||
<div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-base" name="file_upload" />
|
||||
Subir Evaluación
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-base" name="target" />
|
||||
Actualizar Objetivos
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-base" name="trophy" />
|
||||
Actualizar Deportes
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@ -30,11 +30,39 @@ const login = () => {
|
||||
defineUser(res.user)
|
||||
defineCsrfToken(res.csrf)
|
||||
|
||||
location.replace('/')
|
||||
// Redirección basada en roles
|
||||
redirectBasedOnRole(res.userRoles)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const redirectBasedOnRole = (userRoles) => {
|
||||
// Si no tiene roles o el array está vacío, redirigir a "/"
|
||||
if (!userRoles || userRoles.length === 0) {
|
||||
router.push('/')
|
||||
return
|
||||
}
|
||||
|
||||
// Verificar si tiene el rol coordinador
|
||||
const hasCoordinatorRole = userRoles.some(role => role.name === 'coordinator')
|
||||
if (hasCoordinatorRole) {
|
||||
router.push('/coordinator')
|
||||
return
|
||||
}
|
||||
|
||||
// Verificar si tiene rol admin o developer
|
||||
const hasAdminOrDeveloperRole = userRoles.some(role =>
|
||||
role.name === 'admin' || role.name === 'developer'
|
||||
)
|
||||
if (hasAdminOrDeveloperRole) {
|
||||
router.push('/admin')
|
||||
return
|
||||
}
|
||||
|
||||
// Si no cumple ninguna condición, redirigir a "/"
|
||||
router.push('/')
|
||||
};
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
if (hasToken()) {
|
||||
|
||||
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>
|
||||
@ -1,9 +1,119 @@
|
||||
<script setup>
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue'
|
||||
|
||||
const kpis = [ /* test de v-for*/
|
||||
{ title: 'Total Empleados', value: '248', meta: '+12% vs mes anterior', icon: 'people' },
|
||||
{ title: 'Nuevas Contrataciones', value: '18', meta: '+3 vs mes anterior', icon: 'person_add' },
|
||||
{ title: 'Certificaciones', value: '156', meta: '+8% vs mes anterior', icon: 'school' },
|
||||
{ title: 'Documentos pendientes', value: '12', meta: '-5 vs mes anterior', icon: 'inventory' },
|
||||
];
|
||||
|
||||
const employees = [ /* test de v-for*/
|
||||
{ initials: 'MG', name: 'María González', role: 'Desarrolladora Frontend • Tecnología', date: '2024-01-15', status: 'Activo' },
|
||||
{ initials: 'CR', name: 'Carlos Rodríguez', role: 'Analista de Marketing • Marketing', date: '2024-01-10', status: 'Activo' },
|
||||
{ initials: 'AM', name: 'Ana Martínez', role: 'Contadora • Finanzas', date: '2024-01-08', status: 'Activo' },
|
||||
];
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader title="Dashboard" />
|
||||
<p><b>{{ $t('welcome') }}</b>, {{ $page.user.name }}.</p>
|
||||
<div class="p-6 max-w-auto mx-auto">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Dashboard</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Resumen general del sistema de recursos humanos</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPIs -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<template v-for="(kpi, i) in kpis" :key="i">
|
||||
<div class="bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg border border-gray-100 p-5 shadow-sm">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ kpi.title }}</div>
|
||||
<div class="mt-3 text-3xl font-bold text-gray-900 dark:text-primary-dt">{{ kpi.value }}</div>
|
||||
<div class="mt-1 text-xs text-emerald-600 dark:text-success-dt">{{ kpi.meta }}</div>
|
||||
</div>
|
||||
<div class="text-gray-300 dark:text-primary-dt/60">
|
||||
<span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-gray-50 dark:bg-primary/10 text-lg">
|
||||
<GoogleIcon :name="kpi.icon" class="text-xl text-gray-500 dark:text-primary-dt" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Left: Empleados recientes (span 2) -->
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="md:col-span-2 bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg p-6 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-gray-800 dark:text-primary-dt flex items-center gap-3">
|
||||
<GoogleIcon name="groups" class="text-xl text-gray-700 dark:text-primary-dt" />
|
||||
Empleados Recientes
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-primary-dt/70 mt-1">Últimas incorporaciones al equipo</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-4 mt-4">
|
||||
<li v-for="(e, idx) in employees" :key="idx" class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex-none w-12 h-12 rounded-full bg-blue-50 dark:bg-primary/10 flex items-center justify-center text-blue-700 dark:text-primary-dt font-semibold">
|
||||
{{ e.initials }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-800 dark:text-primary-dt">{{ e.name }}</div>
|
||||
<div class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">{{ e.role }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ e.date }}</div>
|
||||
<span class="mt-2 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt">
|
||||
{{ e.status }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Acciones Rápidas -->
|
||||
<div class="bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg p-6 shadow-sm">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-gray-800 dark:text-primary-dt flex items-center gap-3">
|
||||
<GoogleIcon name="timeline" class="text-xl text-gray-700 dark:text-primary-dt" />
|
||||
Acciones Rápidas
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-primary-dt/70 mt-1">Tareas frecuentes del sistema</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-3">
|
||||
<div class="w-full flex items-center gap-3 p-3 rounded-md border border-gray-100 dark:border-primary/20 bg-white dark:bg-primary-d/5">
|
||||
<span class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-gray-50 dark:bg-primary/10 text-gray-700 dark:text-primary-dt">
|
||||
<GoogleIcon name="person_add" class="text-lg" />
|
||||
</span>
|
||||
<span class="text-sm text-gray-700 dark:text-primary-dt">Registrar Nuevo Empleado</span>
|
||||
<span class="ml-auto text-gray-300 dark:text-primary-dt/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-full flex items-center gap-3 p-3 rounded-md border border-gray-100 dark:border-primary/20 bg-white dark:bg-primary-d/5">
|
||||
<span class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-gray-50 dark:bg-primary/10 text-gray-700 dark:text-primary-dt">
|
||||
<GoogleIcon name="person_add" class="text-lg" />
|
||||
</span>
|
||||
<span class="text-sm text-gray-700 dark:text-primary-dt">Registrar Nuevo Empleado</span>
|
||||
<span class="ml-auto text-gray-300 dark:text-primary-dt/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
16
src/pages/Dashboard/Module.js
Normal file
16
src/pages/Dashboard/Module.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`dashboard.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `dashboard.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`dashboard.${str}`)
|
||||
|
||||
export {
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
160
src/pages/Employees/Index.vue
Normal file
160
src/pages/Employees/Index.vue
Normal file
@ -0,0 +1,160 @@
|
||||
<script setup>
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Searcher from '@Holos/Searcher.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
</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-3xl font-extrabold text-gray-900 dark:text-primary-dt">Empleados</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información general de empleados</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Adding text="Nuevo Empleado" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Card -->
|
||||
<div class="mt-6">
|
||||
<Searcher
|
||||
title="Buscar Empleados"
|
||||
placeholder="Buscar por nombre o departamento..."
|
||||
@search="() => {}"
|
||||
>
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- List Card -->
|
||||
<div class="mt-8 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-xl font-semibold text-gray-800 dark:text-primary-dt">Lista de Empleados</h3>
|
||||
<p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">3 empleados encontrados</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 overflow-x-auto">
|
||||
<table class="w-full min-w-[900px]">
|
||||
<thead>
|
||||
<tr class="text-left text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
<th class="py-3 pb-4">Nombre Completo</th>
|
||||
<th class="py-3 pb-4">Departamento</th>
|
||||
<th class="py-3 pb-4">Sede</th>
|
||||
<th class="py-3 pb-4">Fecha Ingreso</th>
|
||||
<th class="py-3 pb-4">Estado</th>
|
||||
<th class="py-3 pb-4 text-right">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="divide-y divide-gray-100 dark:divide-primary/20 text-sm text-gray-700 dark:text-primary-dt">
|
||||
<!-- Row 1 -->
|
||||
<tr class="bg-white dark:bg-transparent">
|
||||
<td class="py-6">
|
||||
<div class="font-semibold text-gray-800 dark:text-primary-dt">María González López</div>
|
||||
<div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">GOLM900515</div>
|
||||
</td>
|
||||
<td class="py-6 dark:text-primary-dt">Tecnología</td>
|
||||
<td class="py-6 dark:text-primary-dt">Ciudad de México</td>
|
||||
<td class="py-6 dark:text-primary-dt">2023-01-15</td>
|
||||
<td class="py-6">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">Activo</span>
|
||||
</td>
|
||||
<td class="py-6 text-right space-x-3">
|
||||
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="visibility"
|
||||
/>
|
||||
</button>
|
||||
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="edit"
|
||||
/>
|
||||
</button>
|
||||
<button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
|
||||
<GoogleIcon
|
||||
class="text-red-500 dark:text-danger-d text-xl"
|
||||
name="delete"
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 2 -->
|
||||
<tr class="bg-white dark:bg-transparent">
|
||||
<td class="py-6">
|
||||
<div class="font-semibold text-gray-800 dark:text-primary-dt">Carlos Rodríguez Martín</div>
|
||||
<div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">ROMC880822</div>
|
||||
</td>
|
||||
<td class="py-6 dark:text-primary-dt">Marketing</td>
|
||||
<td class="py-6 dark:text-primary-dt">Guadalajara</td>
|
||||
<td class="py-6 dark:text-primary-dt">2022-03-10</td>
|
||||
<td class="py-6">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">Activo</span>
|
||||
</td>
|
||||
<td class="py-6 text-right space-x-3">
|
||||
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="visibility"
|
||||
/>
|
||||
</button>
|
||||
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="edit"
|
||||
/>
|
||||
</button>
|
||||
<button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
|
||||
<GoogleIcon
|
||||
class="text-red-500 dark:text-danger-d text-xl"
|
||||
name="delete"
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Row 3 -->
|
||||
<tr class="bg-white dark:bg-transparent">
|
||||
<td class="py-6">
|
||||
<div class="font-semibold text-gray-800 dark:text-primary-dt">Ana Martínez Sánchez</div>
|
||||
<div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">MASA921203</div>
|
||||
</td>
|
||||
<td class="py-6 dark:text-primary-dt">Finanzas</td>
|
||||
<td class="py-6 dark:text-primary-dt">Monterrey</td>
|
||||
<td class="py-6 dark:text-primary-dt">2023-06-01</td>
|
||||
<td class="py-6">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">Activo</span>
|
||||
</td>
|
||||
<td class="py-6 text-right space-x-3">
|
||||
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="visibility"
|
||||
/>
|
||||
</button>
|
||||
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="edit"
|
||||
/>
|
||||
</button>
|
||||
<button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
|
||||
<GoogleIcon
|
||||
class="text-red-500 dark:text-danger-d text-xl"
|
||||
name="delete"
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
662
src/pages/Maquetador/Index.vue
Normal file
662
src/pages/Maquetador/Index.vue
Normal file
@ -0,0 +1,662 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Draggable from '@Holos/PDF/Draggable.vue';
|
||||
import CanvasElement from '@Holos/PDF/Canvas.vue';
|
||||
import PDFViewport from '@Holos/PDF/PDFViewport.vue';
|
||||
import TextFormatter from '@Holos/PDF/TextFormatter.vue';
|
||||
|
||||
/** Estado reactivo */
|
||||
const pages = ref([{ id: 1, elements: [] }]);
|
||||
const selectedElementId = ref(null);
|
||||
const elementCounter = ref(0);
|
||||
const documentTitle = ref('Documento sin título');
|
||||
const isExporting = ref(false);
|
||||
const currentPage = ref(1);
|
||||
const pageIdCounter = ref(1); // <-- Agregar contador separado para páginas
|
||||
|
||||
/** Estado para tamaño de página */
|
||||
const currentPageSize = ref({
|
||||
width: 794, // A4 por defecto
|
||||
height: 1123
|
||||
});
|
||||
|
||||
/** Manejar cambio de tamaño de página */
|
||||
const handlePageSizeChange = (sizeData) => {
|
||||
currentPageSize.value = sizeData.dimensions;
|
||||
// Aquí podrías ajustar elementos existentes si es necesario
|
||||
window.Notify.info(`Tamaño de página cambiado a ${sizeData.size}`);
|
||||
};
|
||||
|
||||
// Actualizar el método moveElement para usar el tamaño dinámico
|
||||
const moveElement = (moveData) => {
|
||||
const element = allElements.value.find(el => el.id === moveData.id);
|
||||
if (element) {
|
||||
element.x = Math.max(0, Math.min(currentPageSize.value.width - (element.width || 200), moveData.x));
|
||||
element.y = Math.max(0, Math.min(currentPageSize.value.height - (element.height || 40), moveData.y));
|
||||
}
|
||||
};
|
||||
|
||||
/** Referencias */
|
||||
const viewportRef = ref(null);
|
||||
|
||||
/** Referencias adicionales */
|
||||
const textFormatterElement = ref(null);
|
||||
const showTextFormatter = ref(false);
|
||||
|
||||
const selectElement = (elementId) => {
|
||||
selectedElementId.value = elementId;
|
||||
const selectedEl = allElements.value.find(el => el.id === elementId);
|
||||
showTextFormatter.value = selectedEl?.type === 'text';
|
||||
textFormatterElement.value = selectedEl;
|
||||
};
|
||||
|
||||
const updateElement = (update) => {
|
||||
const element = allElements.value.find(el => el.id === update.id);
|
||||
if (element) {
|
||||
Object.assign(element, update);
|
||||
// Si se actualiza el formato, actualizar la referencia
|
||||
if (update.formatting && textFormatterElement.value?.id === update.id) {
|
||||
textFormatterElement.value = { ...element };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCanvasClick = (clickData) => {
|
||||
selectedElementId.value = null;
|
||||
showTextFormatter.value = false;
|
||||
textFormatterElement.value = null;
|
||||
};
|
||||
|
||||
/** Tipos de elementos disponibles */
|
||||
const availableElements = [
|
||||
{
|
||||
type: 'text',
|
||||
icon: 'text_fields',
|
||||
title: 'Texto',
|
||||
description: 'Texto enriquecido con formato'
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
icon: 'image',
|
||||
title: 'Imagen',
|
||||
description: 'Subir y editar imágenes'
|
||||
},
|
||||
{
|
||||
type: 'table',
|
||||
icon: 'table_chart',
|
||||
title: 'Tabla',
|
||||
description: 'Tabla con filas y columnas'
|
||||
}
|
||||
];
|
||||
|
||||
/** Propiedades computadas */
|
||||
const allElements = computed(() => {
|
||||
return pages.value.flatMap(page => page.elements);
|
||||
});
|
||||
|
||||
const totalElements = computed(() => {
|
||||
return allElements.value.length;
|
||||
});
|
||||
|
||||
/** Métodos del canvas */
|
||||
const handleDrop = (dropData) => {
|
||||
try {
|
||||
const data = JSON.parse(dropData.originalEvent.dataTransfer.getData('text/plain'));
|
||||
|
||||
const newElement = {
|
||||
id: `element-${++elementCounter.value}`,
|
||||
type: data.type,
|
||||
pageIndex: dropData.pageIndex,
|
||||
x: dropData.x,
|
||||
y: dropData.y,
|
||||
width: data.type === 'table' ? 300 : data.type === 'image' ? 200 : 200,
|
||||
height: data.type === 'table' ? 120 : data.type === 'image' ? 150 : 40,
|
||||
content: getDefaultContent(data.type),
|
||||
fileName: getDefaultFileName(data.type),
|
||||
created_at: new Date().toISOString()
|
||||
};
|
||||
|
||||
pages.value[dropData.pageIndex].elements.push(newElement);
|
||||
selectedElementId.value = newElement.id;
|
||||
} catch (error) {
|
||||
console.error('Error al procesar elemento arrastrado:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const getDefaultContent = (type) => {
|
||||
switch(type) {
|
||||
case 'text':
|
||||
return 'Nuevo texto';
|
||||
case 'table':
|
||||
return {
|
||||
rows: 3,
|
||||
cols: 3,
|
||||
data: [
|
||||
['Encabezado 1', 'Encabezado 2', 'Encabezado 3'],
|
||||
['Fila 1, Col 1', 'Fila 1, Col 2', 'Fila 1, Col 3'],
|
||||
['Fila 2, Col 1', 'Fila 2, Col 2', 'Fila 2, Col 3']
|
||||
]
|
||||
};
|
||||
case 'image':
|
||||
return null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getDefaultFileName = (type) => {
|
||||
switch(type) {
|
||||
case 'table':
|
||||
return 'tabla.csv';
|
||||
case 'image':
|
||||
return null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
const deleteElement = (elementId) => {
|
||||
const index = allElements.value.findIndex(el => el.id === elementId);
|
||||
if (index !== -1) {
|
||||
const pageIndex = Math.floor(index / 3); // Suponiendo 3 elementos por página
|
||||
pages.value[pageIndex].elements.splice(index % 3, 1);
|
||||
if (selectedElementId.value === elementId) {
|
||||
selectedElementId.value = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** Paginación */
|
||||
const addPage = () => {
|
||||
pageIdCounter.value++; // <-- Incrementar contador independiente
|
||||
pages.value.push({
|
||||
id: pageIdCounter.value,
|
||||
elements: []
|
||||
});
|
||||
};
|
||||
|
||||
const deletePage = (pageIndex) => {
|
||||
if (pages.value.length > 1) {
|
||||
// Mover elementos de la página eliminada a la página anterior
|
||||
const elementsToMove = pages.value[pageIndex].elements;
|
||||
if (pageIndex > 0 && elementsToMove.length > 0) {
|
||||
elementsToMove.forEach(element => {
|
||||
element.pageIndex = pageIndex - 1;
|
||||
pages.value[pageIndex - 1].elements.push(element);
|
||||
});
|
||||
}
|
||||
|
||||
pages.value.splice(pageIndex, 1);
|
||||
|
||||
// Actualizar índices de página de elementos restantes
|
||||
pages.value.forEach((page, index) => {
|
||||
page.elements.forEach(element => {
|
||||
element.pageIndex = index;
|
||||
});
|
||||
});
|
||||
|
||||
// Ajustar página actual si es necesario
|
||||
if (currentPage.value > pages.value.length) {
|
||||
currentPage.value = pages.value.length;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** Métodos de acciones rápidas */
|
||||
const addQuickElement = (type) => {
|
||||
const targetPageIndex = currentPage.value - 1;
|
||||
const existingElements = pages.value[targetPageIndex].elements.length;
|
||||
|
||||
const newElement = {
|
||||
id: `element-${++elementCounter.value}`,
|
||||
type: type,
|
||||
pageIndex: targetPageIndex,
|
||||
x: 80 + (existingElements * 20),
|
||||
y: 80 + (existingElements * 20),
|
||||
width: type === 'table' ? 300 : type === 'image' ? 200 : 200,
|
||||
height: type === 'table' ? 120 : type === 'image' ? 150 : 40,
|
||||
content: getDefaultContent(type),
|
||||
fileName: getDefaultFileName(type),
|
||||
created_at: new Date().toISOString()
|
||||
};
|
||||
|
||||
pages.value[targetPageIndex].elements.push(newElement);
|
||||
selectedElementId.value = newElement.id;
|
||||
};
|
||||
|
||||
const exportPDF = async () => {
|
||||
if (totalElements.value === 0) {
|
||||
window.Notify.warning('No hay elementos para exportar');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
isExporting.value = true;
|
||||
window.Notify.info('Generando PDF...');
|
||||
|
||||
// Crear un nuevo documento PDF con el tamaño de página seleccionado
|
||||
const pdfDoc = await PDFDocument.create();
|
||||
|
||||
// Convertir dimensiones de pixels a puntos (1 px = 0.75 puntos)
|
||||
const pageWidthPoints = currentPageSize.value.width * 0.75;
|
||||
const pageHeightPoints = currentPageSize.value.height * 0.75;
|
||||
|
||||
let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
|
||||
let currentPageHeight = pageHeightPoints;
|
||||
let yOffset = 50; // Margen superior
|
||||
|
||||
// Obtener fuentes
|
||||
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
|
||||
const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
|
||||
|
||||
// Procesar páginas del maquetador
|
||||
for (let pageIndex = 0; pageIndex < pages.value.length; pageIndex++) {
|
||||
const page = pages.value[pageIndex];
|
||||
|
||||
// Crear nueva página PDF si no es la primera
|
||||
if (pageIndex > 0) {
|
||||
currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
|
||||
currentPageHeight = pageHeightPoints;
|
||||
yOffset = 50;
|
||||
}
|
||||
|
||||
// Ordenar elementos de esta página por posición
|
||||
const sortedElements = [...page.elements].sort((a, b) => {
|
||||
if (Math.abs(a.y - b.y) < 20) {
|
||||
return a.x - b.x; // Si están en la misma línea, ordenar por X
|
||||
}
|
||||
return a.y - b.y; // Ordenar por Y
|
||||
});
|
||||
|
||||
// Procesar elementos de la página
|
||||
for (const element of sortedElements) {
|
||||
// Calcular posición en el PDF manteniendo proporciones
|
||||
const scaleX = pageWidthPoints / currentPageSize.value.width;
|
||||
const scaleY = pageHeightPoints / currentPageSize.value.height;
|
||||
|
||||
const x = Math.max(50, element.x * scaleX);
|
||||
const y = currentPageHeight - (element.y * scaleY) - 50; // Margen superior
|
||||
|
||||
switch (element.type) {
|
||||
case 'text':
|
||||
if (element.content) {
|
||||
// Dividir texto largo en líneas
|
||||
const words = element.content.split(' ');
|
||||
const lines = [];
|
||||
let currentLine = '';
|
||||
const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
|
||||
|
||||
for (const word of words) {
|
||||
const testLine = currentLine + (currentLine ? ' ' : '') + word;
|
||||
const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
|
||||
|
||||
if (testWidth <= maxWidth) {
|
||||
currentLine = testLine;
|
||||
} else {
|
||||
if (currentLine) lines.push(currentLine);
|
||||
currentLine = word;
|
||||
}
|
||||
}
|
||||
if (currentLine) lines.push(currentLine);
|
||||
|
||||
// Dibujar cada línea
|
||||
lines.forEach((line, index) => {
|
||||
currentPDFPage.drawText(line, {
|
||||
x: x,
|
||||
y: y - (index * 15),
|
||||
size: 12,
|
||||
font: helveticaFont,
|
||||
color: rgb(0, 0, 0),
|
||||
});
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
case 'image':
|
||||
if (element.content && element.content.startsWith('data:image')) {
|
||||
try {
|
||||
// Convertir base64 a bytes
|
||||
const base64Data = element.content.split(',')[1];
|
||||
const imageBytes = Uint8Array.from(
|
||||
atob(base64Data),
|
||||
c => c.charCodeAt(0)
|
||||
);
|
||||
|
||||
let image;
|
||||
if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
|
||||
image = await pdfDoc.embedJpg(imageBytes);
|
||||
} else if (element.content.includes('image/png')) {
|
||||
image = await pdfDoc.embedPng(imageBytes);
|
||||
}
|
||||
|
||||
if (image) {
|
||||
// Calcular dimensiones manteniendo proporción y escala
|
||||
const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
|
||||
const maxHeight = Math.min(300, (element.height || 150) * scaleY);
|
||||
|
||||
const imageAspectRatio = image.width / image.height;
|
||||
let displayWidth = maxWidth;
|
||||
let displayHeight = maxWidth / imageAspectRatio;
|
||||
|
||||
if (displayHeight > maxHeight) {
|
||||
displayHeight = maxHeight;
|
||||
displayWidth = maxHeight * imageAspectRatio;
|
||||
}
|
||||
|
||||
currentPDFPage.drawImage(image, {
|
||||
x: x,
|
||||
y: y - displayHeight,
|
||||
width: displayWidth,
|
||||
height: displayHeight,
|
||||
});
|
||||
}
|
||||
} catch (imageError) {
|
||||
console.warn('Error al procesar imagen:', imageError);
|
||||
// Dibujar placeholder para imagen
|
||||
currentPDFPage.drawRectangle({
|
||||
x: x,
|
||||
y: y - 60,
|
||||
width: 100 * scaleX,
|
||||
height: 60 * scaleY,
|
||||
borderColor: rgb(0.7, 0.7, 0.7),
|
||||
borderWidth: 1,
|
||||
});
|
||||
|
||||
currentPDFPage.drawText('[Imagen no disponible]', {
|
||||
x: x + 5,
|
||||
y: y - 35,
|
||||
size: 10,
|
||||
font: helveticaFont,
|
||||
color: rgb(0.7, 0.7, 0.7),
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Placeholder para imagen vacía
|
||||
currentPDFPage.drawRectangle({
|
||||
x: x,
|
||||
y: y - 60,
|
||||
width: 100 * scaleX,
|
||||
height: 60 * scaleY,
|
||||
borderColor: rgb(0.7, 0.7, 0.7),
|
||||
borderWidth: 1,
|
||||
borderDashArray: [3, 3],
|
||||
});
|
||||
|
||||
currentPDFPage.drawText('[Imagen]', {
|
||||
x: x + 25,
|
||||
y: y - 35,
|
||||
size: 10,
|
||||
font: helveticaFont,
|
||||
color: rgb(0.7, 0.7, 0.7),
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
case 'table':
|
||||
if (element.content && element.content.data) {
|
||||
const tableData = element.content.data;
|
||||
const cellWidth = 80 * scaleX;
|
||||
const cellHeight = 20 * scaleY;
|
||||
const tableWidth = tableData[0].length * cellWidth;
|
||||
const tableHeight = tableData.length * cellHeight;
|
||||
|
||||
// Dibujar bordes de la tabla
|
||||
currentPDFPage.drawRectangle({
|
||||
x: x,
|
||||
y: y - tableHeight,
|
||||
width: tableWidth,
|
||||
height: tableHeight,
|
||||
borderColor: rgb(0.3, 0.3, 0.3),
|
||||
borderWidth: 1,
|
||||
});
|
||||
|
||||
// Dibujar contenido de las celdas
|
||||
tableData.forEach((row, rowIndex) => {
|
||||
row.forEach((cell, colIndex) => {
|
||||
const cellX = x + (colIndex * cellWidth);
|
||||
const cellY = y - (rowIndex * cellHeight) - 15;
|
||||
|
||||
// Dibujar borde de celda
|
||||
currentPDFPage.drawRectangle({
|
||||
x: cellX,
|
||||
y: y - ((rowIndex + 1) * cellHeight),
|
||||
width: cellWidth,
|
||||
height: cellHeight,
|
||||
borderColor: rgb(0.7, 0.7, 0.7),
|
||||
borderWidth: 0.5,
|
||||
});
|
||||
|
||||
// Dibujar texto de la celda (truncar si es muy largo)
|
||||
const maxChars = Math.floor(cellWidth / 8);
|
||||
const displayText = cell.length > maxChars ?
|
||||
cell.substring(0, maxChars - 3) + '...' : cell;
|
||||
|
||||
currentPDFPage.drawText(displayText, {
|
||||
x: cellX + 5,
|
||||
y: cellY,
|
||||
size: 8,
|
||||
font: helveticaFont,
|
||||
color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0),
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generar PDF
|
||||
const pdfBytes = await pdfDoc.save();
|
||||
|
||||
// Descargar
|
||||
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `${documentTitle.value.replace(/\s+/g, '_')}.pdf`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
window.Notify.success('PDF generado correctamente');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error al generar PDF:', error);
|
||||
window.Notify.error('Error al generar el PDF');
|
||||
} finally {
|
||||
isExporting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Función auxiliar para calcular la altura aproximada de un elemento
|
||||
const getElementHeight = (element) => {
|
||||
switch (element.type) {
|
||||
case 'text':
|
||||
if (!element.content) return 20;
|
||||
const lines = Math.ceil(element.content.length / 50);
|
||||
return lines * 15 + 10;
|
||||
case 'table':
|
||||
if (!element.content || !element.content.data) return 60;
|
||||
const tableRows = element.content.data.length;
|
||||
return (tableRows * 20) + 20;
|
||||
case 'image':
|
||||
return Math.min(300, (element.height || 150) * 0.75) + 30;
|
||||
default:
|
||||
return 40;
|
||||
}
|
||||
};
|
||||
|
||||
const clearCanvas = () => {
|
||||
if (confirm('¿Estás seguro de que quieres limpiar el canvas? Se perderán todos los elementos.')) {
|
||||
pages.value = [{ id: 1, elements: [] }];
|
||||
selectedElementId.value = null;
|
||||
elementCounter.value = 0;
|
||||
pageIdCounter.value = 1; // <-- Resetear también el contador de páginas
|
||||
currentPage.value = 1;
|
||||
}
|
||||
};
|
||||
|
||||
/** Atajos de teclado */
|
||||
const handleKeydown = (event) => {
|
||||
if (event.key === 'Delete' && selectedElementId.value) {
|
||||
deleteElement(selectedElementId.value);
|
||||
}
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
selectedElementId.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
/** Ciclo de vida */
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
|
||||
<!-- Panel Izquierdo - Elementos (sin cambios) -->
|
||||
<div class="w-64 bg-white dark:bg-primary-d border-r border-gray-200 dark:border-primary/20 flex flex-col">
|
||||
<!-- Header del panel -->
|
||||
<div class="p-4 border-b border-gray-200 dark:border-primary/20">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<GoogleIcon name="text_snippet" class="text-blue-600 dark:text-blue-400 text-xl" />
|
||||
<h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
|
||||
Diseñador de Documentos
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Título del documento -->
|
||||
<input
|
||||
v-model="documentTitle"
|
||||
class="w-full px-2 py-1 text-xs border border-gray-200 rounded mb-3 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||
placeholder="Título del documento"
|
||||
/>
|
||||
|
||||
<!-- Botón de exportación PDF -->
|
||||
<button
|
||||
@click="exportPDF"
|
||||
:disabled="isExporting"
|
||||
:class="[
|
||||
'w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors',
|
||||
isExporting
|
||||
? 'bg-gray-400 text-white cursor-not-allowed'
|
||||
: 'bg-red-600 hover:bg-red-700 text-white'
|
||||
]"
|
||||
>
|
||||
<GoogleIcon :name="isExporting ? 'hourglass_empty' : 'picture_as_pdf'" class="text-sm" />
|
||||
{{ isExporting ? 'Generando PDF...' : 'Exportar PDF' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Sección Elementos -->
|
||||
<div class="p-4 flex-1 overflow-y-auto">
|
||||
<h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mb-3">
|
||||
Elementos
|
||||
</h3>
|
||||
<p class="text-xs text-gray-400 dark:text-primary-dt/70 mb-4">
|
||||
Arrastra elementos al canvas para crear tu documento
|
||||
</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
<Draggable
|
||||
v-for="element in availableElements"
|
||||
:key="element.type"
|
||||
:type="element.type"
|
||||
:icon="element.icon"
|
||||
:title="element.title"
|
||||
:description="element.description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Agregar rápido -->
|
||||
<h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mt-6 mb-3">
|
||||
Agregar rápido
|
||||
</h3>
|
||||
|
||||
<div class="space-y-2">
|
||||
<button
|
||||
v-for="element in availableElements"
|
||||
:key="`quick-${element.type}`"
|
||||
@click="addQuickElement(element.type)"
|
||||
:disabled="isExporting"
|
||||
class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-primary-dt hover:bg-gray-100 dark:hover:bg-primary/10 rounded transition-colors disabled:opacity-50"
|
||||
>
|
||||
<GoogleIcon name="add" class="text-gray-400 dark:text-primary-dt/70 text-sm" />
|
||||
{{ element.title }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Área Principal con Viewport -->
|
||||
<div class="flex-1 flex flex-col">
|
||||
<!-- Toolbar superior básico -->
|
||||
<div class="h-14 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20 flex items-center justify-between px-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
|
||||
{{ documentTitle }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-xs text-gray-500 dark:text-primary-dt/70">
|
||||
{{ totalElements }} elemento{{ totalElements !== 1 ? 's' : '' }} • {{ pages.length }} página{{ pages.length !== 1 ? 's' : '' }}
|
||||
</span>
|
||||
|
||||
<button
|
||||
v-if="totalElements > 0"
|
||||
@click="clearCanvas"
|
||||
:disabled="isExporting"
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20 rounded transition-colors disabled:opacity-50"
|
||||
>
|
||||
<GoogleIcon name="delete" class="text-sm" />
|
||||
Limpiar Todo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TextFormatter como toolbar estático -->
|
||||
<TextFormatter
|
||||
:element="textFormatterElement"
|
||||
:visible="showTextFormatter"
|
||||
@update="updateElement"
|
||||
/>
|
||||
|
||||
<!-- PDFViewport -->
|
||||
<PDFViewport
|
||||
ref="viewportRef"
|
||||
:pages="pages"
|
||||
:selected-element-id="selectedElementId"
|
||||
:is-exporting="isExporting"
|
||||
@drop="handleDrop"
|
||||
@click="handleCanvasClick"
|
||||
@add-page="addPage"
|
||||
@delete-page="deletePage"
|
||||
@page-change="(page) => currentPage = page"
|
||||
@page-size-change="handlePageSizeChange"
|
||||
>
|
||||
<template #elements="{ page, pageIndex }">
|
||||
<CanvasElement
|
||||
v-for="element in page.elements"
|
||||
:key="element.id"
|
||||
:element="element"
|
||||
:is-selected="selectedElementId === element.id && !isExporting"
|
||||
@select="selectElement"
|
||||
@delete="deleteElement"
|
||||
@update="updateElement"
|
||||
@move="moveElement"
|
||||
/>
|
||||
</template>
|
||||
</PDFViewport>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
143
src/pages/Payroll/Index.vue
Normal file
143
src/pages/Payroll/Index.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<script setup>
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
</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-3xl font-extrabold text-gray-900 dark:text-primary-dt">Nómina</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información bancaria y salarios de empleados</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Adding text="Procesar Nómina" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Nómina Total Mensual</div>
|
||||
<div class="mt-4 text-3xl font-bold text-gray-900 dark:text-primary-dt">$125,000</div>
|
||||
<div class="mt-1 text-xs text-gray-400 dark:text-primary-dt/70">3 empleados activos</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm flex flex-col justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Último Procesamiento</div>
|
||||
<div class="mt-4 text-2xl font-bold text-gray-900 dark:text-primary-dt">31 Enero</div>
|
||||
<div class="mt-1 text-sm text-emerald-600 dark:text-success-dt">Procesado exitosamente</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm flex flex-col justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Próximo Procesamiento</div>
|
||||
<div class="mt-4 text-2xl font-bold text-gray-900 dark:text-primary-dt">29 Feb</div>
|
||||
<div class="mt-1 text-sm text-amber-600 dark:text-warning-dt">En 5 días</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Employee Payroll Card -->
|
||||
<section class="mt-8 bg-white rounded-lg border border-gray-100 shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<header class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="account_balance_wallet" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">$ María González López</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-primary-dt/70">Información bancaria y detalles de nómina</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Información Bancaria -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="account_balance" />
|
||||
Información Bancaria
|
||||
</h3>
|
||||
|
||||
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-3">
|
||||
<div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Banco</div>
|
||||
<div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">BBVA Bancomer</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">CLABE</div>
|
||||
<div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">012180001234567890</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Crédito INFONAVIT</div>
|
||||
<div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">5020123456789</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desglose Salarial -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="payments" />
|
||||
Desglose Salarial
|
||||
</h3>
|
||||
|
||||
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-6">
|
||||
<div class="md:col-span-1 col-span-2 rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Salario Base</div>
|
||||
<div class="mt-2 text-xl font-bold text-[#2563eb] dark:text-primary-dt">$35,000</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-2 col-span-4 rounded-lg border border-gray-100 p-4 bg-emerald-50/40 dark:bg-success-d/10 dark:border-primary/20">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Bonos</div>
|
||||
<div class="mt-2 text-xl font-bold text-emerald-600 dark:text-success-dt">+$8,000</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-2 col-span-4 rounded-lg border border-gray-100 p-4 bg-rose-50/40 dark:bg-danger-d/10 dark:border-primary/20">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Deducciones</div>
|
||||
<div class="mt-2 text-xl font-bold text-rose-600 dark:text-danger-dt">-$2,000</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-1 col-span-2 rounded-lg p-4 border border-gray-100 bg-rose-50/40 flex items-center justify-between dark:bg-primary/5 dark:border-primary/20">
|
||||
<div class="text-black dark:text-primary-dt">
|
||||
<div class="text-sm dark:text-primary-dt">Total Mensual</div>
|
||||
<div class="mt-2 text-xl font-bold dark:text-primary-dt">$45,000</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Último Pago -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt">Último Pago</h3>
|
||||
<div class="mt-3 rounded-lg border border-gray-100 p-4 bg-white flex items-center justify-between dark:bg-primary-d dark:border-primary/20">
|
||||
<div>
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-primary-dt">$43,000</div>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/70">Fecha: 2024-01-31</div>
|
||||
</div>
|
||||
<span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full dark:bg-success-d dark:text-success-dt">Procesado</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Acciones -->
|
||||
<div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-lg" name="sync" />
|
||||
Actualizar Cuenta
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-lg" name="calculate" />
|
||||
Recalcular Salario
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-lg" name="history" />
|
||||
Historial de Pagos
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
164
src/pages/Security/Index.vue
Normal file
164
src/pages/Security/Index.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<script setup>
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
</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">Seguridad y Salud</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información médica, tallas y contactos de emergencia</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Adding text="Agregar Información" />
|
||||
</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">
|
||||
<!-- Perfil -->
|
||||
<header class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="shield" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">María González López</h2>
|
||||
<p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información de seguridad y salud ocupacional</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Tallas de Ropa -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-base font-medium text-gray-800 mb-3 dark:text-primary-dt">Tallas de Ropa</h3>
|
||||
|
||||
<div class="grid gap-4 grid-cols-1 md:grid-cols-3">
|
||||
<div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Camisa</span>
|
||||
<span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">M</span>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Overol</span>
|
||||
<span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">M</span>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Zapatos</span>
|
||||
<span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">25</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Información Médica -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-base font-medium text-gray-800 mb-3 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="medical_services" />
|
||||
Información Médica
|
||||
</h3>
|
||||
|
||||
<div class="grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<!-- Certificado -->
|
||||
<div class="rounded-lg border border-gray-100 p-4 flex items-center justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex items-center gap-3">
|
||||
<GoogleIcon class="text-gray-400 dark:text-primary-dt text-xl" name="picture_as_pdf" />
|
||||
<div>
|
||||
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Certificado Médico</div>
|
||||
<div class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">certificado_maria_2024.pdf</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full dark:bg-success-d dark:text-success-dt">Vigente</span>
|
||||
</div>
|
||||
|
||||
<!-- Tipo de sangre -->
|
||||
<div class="rounded-lg border border-gray-100 p-4 flex items-center justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div>
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Tipo de Sangre</div>
|
||||
<div class="mt-2 text-xl font-bold text-red-600 dark:text-danger-d">O+</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alergias -->
|
||||
<div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Alergias</div>
|
||||
<div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Polen, mariscos</div>
|
||||
</div>
|
||||
|
||||
<!-- Altura / Peso -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Altura</div>
|
||||
<div class="mt-2 text-lg font-bold text-[#2563eb] dark:text-primary-dt">165 cm</div>
|
||||
</div>
|
||||
<div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Peso</div>
|
||||
<div class="mt-2 text-lg font-bold text-[#2563eb] dark:text-primary-dt">60 kg</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prescripciones -->
|
||||
<div class="rounded-lg border border-gray-100 p-4 col-span-1 md:col-span-2 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Prescripciones</div>
|
||||
<div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Antihistamínicos según necesidad</div>
|
||||
</div>
|
||||
|
||||
<!-- Discapacidades -->
|
||||
<div class="rounded-lg border border-gray-100 p-4 col-span-1 md:col-span-2 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Discapacidades</div>
|
||||
<div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Ninguna</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contactos de Emergencia -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-base font-medium text-gray-800 mb-3 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="call" />
|
||||
Contactos de Emergencia
|
||||
</h3>
|
||||
|
||||
<div class="grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<div class="rounded-lg border border-gray-100 p-4 flex items-start justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div>
|
||||
<div class="font-semibold text-gray-800 dark:text-primary-dt">Juan González</div>
|
||||
<div class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">+52 55 1234 5678</div>
|
||||
</div>
|
||||
<span class="inline-block bg-gray-100 text-gray-700 text-xs px-3 py-1 rounded-full dark:bg-primary/10 dark:text-primary-dt">Esposo</span>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-100 p-4 flex items-start justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div>
|
||||
<div class="font-semibold text-gray-800 dark:text-primary-dt">Carmen López</div>
|
||||
<div class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">+52 55 8765 4321</div>
|
||||
</div>
|
||||
<span class="inline-block bg-gray-100 text-gray-700 text-xs px-3 py-1 rounded-full dark:bg-primary/10 dark:text-primary-dt">Madre</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="article"
|
||||
/>
|
||||
Subir certificado
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="call"
|
||||
/>
|
||||
Agregar contacto
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
181
src/pages/Vacations/Admin/Create.vue
Normal file
181
src/pages/Vacations/Admin/Create.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module'
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Form from './Form.vue';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
|
||||
const form = useForm({
|
||||
periods: [
|
||||
{
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
number_of_days: 0,
|
||||
}
|
||||
],
|
||||
comments: ''
|
||||
});
|
||||
|
||||
const availableDays = ref(0);
|
||||
const formRef = ref(null);
|
||||
|
||||
// Calcular días restantes
|
||||
const remainingDays = computed(() => {
|
||||
if (!formRef.value) return availableDays.value;
|
||||
return availableDays.value - formRef.value.totalSelectedDays;
|
||||
});
|
||||
|
||||
// Calcular total de días seleccionados
|
||||
const totalSelectedDays = computed(() => {
|
||||
if (!formRef.value) return 0;
|
||||
return formRef.value.totalSelectedDays;
|
||||
});
|
||||
|
||||
// Obtener períodos con datos
|
||||
const periodsWithData = computed(() => {
|
||||
return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.post(apiTo('store'), {
|
||||
onSuccess: (res) => {
|
||||
Notify.success(Lang('created'));
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(route('resources.available-days'), {
|
||||
onSuccess: (res) => {
|
||||
availableDays.value = res.available_days;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
|
||||
<GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
|
||||
</button>
|
||||
</RouterLink>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
|
||||
<p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout de dos columnas -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Formulario - Columna izquierda (2/3) -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
|
||||
|
||||
<Form
|
||||
ref="formRef"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen - Columna derecha (1/3) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
|
||||
|
||||
<!-- Días disponibles -->
|
||||
<div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
|
||||
<div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
|
||||
</div>
|
||||
|
||||
<!-- Detalles de períodos -->
|
||||
<div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
|
||||
<div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100">
|
||||
Período {{ index + 1 }}:
|
||||
</h4>
|
||||
<div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div>Inicio: {{ period.start_date }}</div>
|
||||
<div>Fin: {{ period.end_date }}</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>Días en período {{ index + 1 }}:</span>
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
|
||||
{{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen de días -->
|
||||
<div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
|
||||
{{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
|
||||
<span class="px-2 py-1 rounded-full text-xs font-medium"
|
||||
:class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
|
||||
{{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advertencia si se excede el límite -->
|
||||
<div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
|
||||
<span class="text-sm text-red-600 dark:text-red-400 font-medium">
|
||||
Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recordatorios -->
|
||||
<div class="space-y-3">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
|
||||
<div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Las solicitudes deben hacerse con 15 días de anticipación</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Tu coordinador revisará y aprobará la solicitud</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Recibirás una notificación con la decisión</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Los días se descontarán una vez aprobados</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
236
src/pages/Vacations/Admin/Form.vue
Normal file
236
src/pages/Vacations/Admin/Form.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css';
|
||||
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'submit'
|
||||
])
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
form: Object
|
||||
})
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
emit('submit')
|
||||
}
|
||||
|
||||
function addPeriod() {
|
||||
props.form.periods.push({
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
number_of_days: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function removePeriod(index) {
|
||||
if (props.form.periods.length > 1) {
|
||||
props.form.periods.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function calculateDays(startDate, endDate) {
|
||||
if (!startDate || !endDate) return 0;
|
||||
|
||||
const start = new Date(startDate);
|
||||
const end = new Date(endDate);
|
||||
|
||||
// Validar que la fecha de inicio no sea posterior a la de fin
|
||||
if (start > end) return 0;
|
||||
|
||||
// Calcular la diferencia en días (incluyendo ambos días)
|
||||
const timeDiff = end.getTime() - start.getTime();
|
||||
const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
|
||||
|
||||
return daysDiff;
|
||||
}
|
||||
|
||||
function updatePeriodDays(index) {
|
||||
const period = props.form.periods[index];
|
||||
if (period.start_date && period.end_date) {
|
||||
period.number_of_days = calculateDays(period.start_date, period.end_date);
|
||||
} else {
|
||||
period.number_of_days = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function getMinDate() {
|
||||
const today = new Date();
|
||||
let daysToAdd = 15;
|
||||
let currentDate = new Date(today);
|
||||
|
||||
while (daysToAdd > 0) {
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
// Si no es domingo (0), contar el día
|
||||
if (currentDate.getDay() !== 0) {
|
||||
daysToAdd--;
|
||||
}
|
||||
}
|
||||
|
||||
return currentDate.toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
// Función para desactivar domingos
|
||||
function isDisabled(date) {
|
||||
return date.getDay() === 0; // 0 = domingo
|
||||
}
|
||||
|
||||
// Función para formatear fecha a Y-m-d
|
||||
function formatDate(date) {
|
||||
if (!date) return '';
|
||||
|
||||
// Si la fecha ya es un string en formato correcto, devolverla
|
||||
if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
|
||||
return date;
|
||||
}
|
||||
|
||||
let d;
|
||||
if (date instanceof Date) {
|
||||
d = date;
|
||||
} else {
|
||||
d = new Date(date);
|
||||
}
|
||||
|
||||
// Verificar que la fecha es válida
|
||||
if (isNaN(d.getTime())) {
|
||||
console.warn('Fecha inválida recibida:', date);
|
||||
return '';
|
||||
}
|
||||
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
// Watcher para detectar cambios en las fechas
|
||||
watch(() => props.form.periods, (newPeriods) => {
|
||||
newPeriods.forEach((period, index) => {
|
||||
if (period.start_date && period.end_date) {
|
||||
updatePeriodDays(index);
|
||||
}
|
||||
});
|
||||
}, { deep: true });
|
||||
|
||||
// Calcular total de días seleccionados
|
||||
const totalSelectedDays = computed(() => {
|
||||
return props.form.periods.reduce((total, period) => {
|
||||
return total + (period.number_of_days || 0);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Exponer el total para el componente padre
|
||||
defineExpose({
|
||||
totalSelectedDays
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<!-- Períodos de vacaciones -->
|
||||
<div class="space-y-4">
|
||||
<div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Período {{ index + 1 }}
|
||||
</h4>
|
||||
<button
|
||||
v-if="form.periods.length > 1"
|
||||
type="button"
|
||||
@click="removePeriod(index)"
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
|
||||
>
|
||||
<GoogleIcon name="delete" class="w-4 h-4" />
|
||||
Eliminar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div class="relative">
|
||||
<VueDatePicker
|
||||
v-model="period.start_date"
|
||||
class="w-full"
|
||||
placeholder="Fecha de inicio"
|
||||
format="dd/MM/yyyy"
|
||||
locale="es"
|
||||
:min-date="getMinDate()"
|
||||
:disabled-dates="isDisabled"
|
||||
:enable-time-picker="false"
|
||||
:auto-apply="true"
|
||||
:close-on-auto-apply="true"
|
||||
@update:model-value="(date) => {
|
||||
console.log('Fecha seleccionada (inicio):', date);
|
||||
period.start_date = formatDate(date);
|
||||
console.log('Fecha formateada (inicio):', period.start_date);
|
||||
updatePeriodDays(index);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<VueDatePicker
|
||||
v-model="period.end_date"
|
||||
class="w-full"
|
||||
placeholder="Fecha de fin"
|
||||
format="dd/MM/yyyy"
|
||||
locale="es"
|
||||
:min-date="getMinDate()"
|
||||
:disabled-dates="isDisabled"
|
||||
:enable-time-picker="false"
|
||||
:auto-apply="true"
|
||||
:close-on-auto-apply="true"
|
||||
@update:model-value="(date) => {
|
||||
console.log('Fecha seleccionada (fin):', date);
|
||||
period.end_date = formatDate(date);
|
||||
console.log('Fecha formateada (fin):', period.end_date);
|
||||
updatePeriodDays(index);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón añadir período -->
|
||||
<button
|
||||
type="button"
|
||||
@click="addPeriod"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
|
||||
>
|
||||
<GoogleIcon name="add" />
|
||||
Añadir período
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Comentarios -->
|
||||
<div>
|
||||
<Textarea
|
||||
v-model="form.comments"
|
||||
id="comments"
|
||||
rows="4"
|
||||
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
|
||||
placeholder="Agrega cualquier información adicional sobre tu solicitud..."
|
||||
:onError="form.errors.comments"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Botón de envío -->
|
||||
<div class="col-span-1 md:col-span-2 flex justify-center">
|
||||
<PrimaryButton
|
||||
v-text="$t('request')"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
129
src/pages/Vacations/Admin/Index.vue
Normal file
129
src/pages/Vacations/Admin/Index.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { api } from '@Services/Api';
|
||||
import { getDate } from '@Controllers/DateController';
|
||||
import { apiTo } from './Module'
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const vacationRequests = ref([]);
|
||||
|
||||
/** Metodos */
|
||||
const generateConstance = (vacationId) => {
|
||||
api.get(route('vacation-requests-public.generate-route', { vacation: vacationId }), {
|
||||
onSuccess: (res) => {
|
||||
Notify.success('Constancia generada correctamente');
|
||||
openNewTab(res.route);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusClasses = (status) => {
|
||||
const statusMap = {
|
||||
'Pendiente': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
|
||||
'Aprobado': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
|
||||
'Rechazado': 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
|
||||
'Agendado': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
|
||||
'Cancelado': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
|
||||
'Concluido': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300'
|
||||
};
|
||||
|
||||
return statusMap[status] || 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300';
|
||||
};
|
||||
|
||||
const getStatusIcon = (status) => {
|
||||
const iconMap = {
|
||||
'Pendiente': { name: 'schedule', classes: 'text-amber-600 dark:text-amber-400' },
|
||||
'Aprobado': { name: 'check_circle', classes: 'text-blue-600 dark:text-blue-400' },
|
||||
'Rechazado': { name: 'cancel', classes: 'text-orange-600 dark:text-orange-400' },
|
||||
'Agendado': { name: 'event', classes: 'text-green-600 dark:text-green-400' },
|
||||
'Cancelado': { name: 'block', classes: 'text-red-600 dark:text-red-400' },
|
||||
'Concluido': { name: 'task_alt', classes: 'text-cyan-600 dark:text-cyan-400' }
|
||||
};
|
||||
|
||||
return iconMap[status] || { name: 'help', classes: 'text-gray-600 dark:text-gray-400' };
|
||||
};
|
||||
|
||||
const getStatusIconContainer = (status) => {
|
||||
const containerMap = {
|
||||
'Pendiente': 'bg-amber-100 dark:bg-amber-900/30',
|
||||
'Aprobado': 'bg-blue-100 dark:bg-blue-900/30',
|
||||
'Rechazado': 'bg-orange-100 dark:bg-orange-900/30',
|
||||
'Agendado': 'bg-green-100 dark:bg-green-900/30',
|
||||
'Cancelado': 'bg-red-100 dark:bg-red-900/30',
|
||||
'Concluido': 'bg-cyan-100 dark:bg-cyan-900/30'
|
||||
};
|
||||
|
||||
return containerMap[status] || 'bg-gray-100 dark:bg-gray-900/30';
|
||||
};
|
||||
|
||||
const openNewTab = (url) => {
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(apiTo('index'), {
|
||||
onSuccess: (r) => {
|
||||
vacationRequests.value = r.vacation_requests.data;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Solicitudes
|
||||
</h1>
|
||||
<p class="text-slate-600 dark:text-slate-400">Gestión completa de todas las solicitudes de vacaciones del sistema.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lista de solicitudes -->
|
||||
<div class="space-y-4">
|
||||
<div v-for="vacation in vacationRequests" class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm dark:bg-slate-800 dark:border-slate-700">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div :class="`flex items-center justify-center w-10 h-10 rounded-lg ${getStatusIconContainer(vacation.status)}`">
|
||||
<GoogleIcon :name="getStatusIcon(vacation.status).name" :class="getStatusIcon(vacation.status).classes" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 v-if="vacation.vacation_periods.length > 1" class="font-semibold text-slate-900 dark:text-slate-100">{{ vacation.vacation_periods.length }} periodos</h3>
|
||||
<h3 v-else class="font-semibold text-slate-900 dark:text-slate-100">{{ getDate(vacation.vacation_periods[0].start_date) }} - {{ getDate(vacation.vacation_periods[0].end_date) }}</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">{{ vacation.total_days }} días</p>
|
||||
</div>
|
||||
</div>
|
||||
<span :class="`px-3 py-1 rounded-full text-sm font-medium ${getStatusClasses(vacation.status)}`">
|
||||
{{ vacation.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-for="(period, index) in vacation.vacation_periods" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-slate-700 dark:text-slate-300">Período {{ index + 1 }}:</p>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">{{ getDate(period.start_date) }} - {{ getDate(period.end_date) }} ({{ period.number_of_days }} días)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<button @click="generateConstance(vacation.id)" type="button" class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg with-transition dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-700">
|
||||
<GoogleIcon name="clinical_notes" />
|
||||
Generar Constancia de disfrute de vacaciones
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Estado vacío cuando no hay solicitudes -->
|
||||
<div v-if="vacationRequests.length == 0" class="text-center py-12">
|
||||
<GoogleIcon name="event_busy" class="text-slate-300 text-6xl mb-4 dark:text-slate-600" />
|
||||
<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-2">No hay solicitudes</h3>
|
||||
<p class="text-slate-600 dark:text-slate-400 mb-6">No se han encontrado solicitudes de vacaciones en el sistema.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
16
src/pages/Vacations/Admin/Module.js
Normal file
16
src/pages/Vacations/Admin/Module.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`vacation-requests.admin.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.admin.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`vacations.${str}`)
|
||||
|
||||
export {
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
181
src/pages/Vacations/Coordinator/Create.vue
Normal file
181
src/pages/Vacations/Coordinator/Create.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module'
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Form from './Form.vue';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
|
||||
const form = useForm({
|
||||
periods: [
|
||||
{
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
number_of_days: 0,
|
||||
}
|
||||
],
|
||||
comments: ''
|
||||
});
|
||||
|
||||
const availableDays = ref(0);
|
||||
const formRef = ref(null);
|
||||
|
||||
// Calcular días restantes
|
||||
const remainingDays = computed(() => {
|
||||
if (!formRef.value) return availableDays.value;
|
||||
return availableDays.value - formRef.value.totalSelectedDays;
|
||||
});
|
||||
|
||||
// Calcular total de días seleccionados
|
||||
const totalSelectedDays = computed(() => {
|
||||
if (!formRef.value) return 0;
|
||||
return formRef.value.totalSelectedDays;
|
||||
});
|
||||
|
||||
// Obtener períodos con datos
|
||||
const periodsWithData = computed(() => {
|
||||
return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.post(apiTo('store'), {
|
||||
onSuccess: (res) => {
|
||||
Notify.success(Lang('created'));
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(route('resources.available-days'), {
|
||||
onSuccess: (res) => {
|
||||
availableDays.value = res.available_days;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
|
||||
<GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
|
||||
</button>
|
||||
</RouterLink>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
|
||||
<p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout de dos columnas -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Formulario - Columna izquierda (2/3) -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
|
||||
|
||||
<Form
|
||||
ref="formRef"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen - Columna derecha (1/3) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
|
||||
|
||||
<!-- Días disponibles -->
|
||||
<div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
|
||||
<div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
|
||||
</div>
|
||||
|
||||
<!-- Detalles de períodos -->
|
||||
<div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
|
||||
<div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100">
|
||||
Período {{ index + 1 }}:
|
||||
</h4>
|
||||
<div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div>Inicio: {{ period.start_date }}</div>
|
||||
<div>Fin: {{ period.end_date }}</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>Días en período {{ index + 1 }}:</span>
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
|
||||
{{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen de días -->
|
||||
<div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
|
||||
{{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
|
||||
<span class="px-2 py-1 rounded-full text-xs font-medium"
|
||||
:class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
|
||||
{{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advertencia si se excede el límite -->
|
||||
<div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
|
||||
<span class="text-sm text-red-600 dark:text-red-400 font-medium">
|
||||
Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recordatorios -->
|
||||
<div class="space-y-3">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
|
||||
<div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Las solicitudes deben hacerse con 15 días de anticipación</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Tu coordinador revisará y aprobará la solicitud</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Recibirás una notificación con la decisión</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Los días se descontarán una vez aprobados</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
236
src/pages/Vacations/Coordinator/Form.vue
Normal file
236
src/pages/Vacations/Coordinator/Form.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css';
|
||||
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'submit'
|
||||
])
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
form: Object
|
||||
})
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
emit('submit')
|
||||
}
|
||||
|
||||
function addPeriod() {
|
||||
props.form.periods.push({
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
number_of_days: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function removePeriod(index) {
|
||||
if (props.form.periods.length > 1) {
|
||||
props.form.periods.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function calculateDays(startDate, endDate) {
|
||||
if (!startDate || !endDate) return 0;
|
||||
|
||||
const start = new Date(startDate);
|
||||
const end = new Date(endDate);
|
||||
|
||||
// Validar que la fecha de inicio no sea posterior a la de fin
|
||||
if (start > end) return 0;
|
||||
|
||||
// Calcular la diferencia en días (incluyendo ambos días)
|
||||
const timeDiff = end.getTime() - start.getTime();
|
||||
const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
|
||||
|
||||
return daysDiff;
|
||||
}
|
||||
|
||||
function updatePeriodDays(index) {
|
||||
const period = props.form.periods[index];
|
||||
if (period.start_date && period.end_date) {
|
||||
period.number_of_days = calculateDays(period.start_date, period.end_date);
|
||||
} else {
|
||||
period.number_of_days = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function getMinDate() {
|
||||
const today = new Date();
|
||||
let daysToAdd = 15;
|
||||
let currentDate = new Date(today);
|
||||
|
||||
while (daysToAdd > 0) {
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
// Si no es domingo (0), contar el día
|
||||
if (currentDate.getDay() !== 0) {
|
||||
daysToAdd--;
|
||||
}
|
||||
}
|
||||
|
||||
return currentDate.toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
// Función para desactivar domingos
|
||||
function isDisabled(date) {
|
||||
return date.getDay() === 0; // 0 = domingo
|
||||
}
|
||||
|
||||
// Función para formatear fecha a Y-m-d
|
||||
function formatDate(date) {
|
||||
if (!date) return '';
|
||||
|
||||
// Si la fecha ya es un string en formato correcto, devolverla
|
||||
if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
|
||||
return date;
|
||||
}
|
||||
|
||||
let d;
|
||||
if (date instanceof Date) {
|
||||
d = date;
|
||||
} else {
|
||||
d = new Date(date);
|
||||
}
|
||||
|
||||
// Verificar que la fecha es válida
|
||||
if (isNaN(d.getTime())) {
|
||||
console.warn('Fecha inválida recibida:', date);
|
||||
return '';
|
||||
}
|
||||
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
// Watcher para detectar cambios en las fechas
|
||||
watch(() => props.form.periods, (newPeriods) => {
|
||||
newPeriods.forEach((period, index) => {
|
||||
if (period.start_date && period.end_date) {
|
||||
updatePeriodDays(index);
|
||||
}
|
||||
});
|
||||
}, { deep: true });
|
||||
|
||||
// Calcular total de días seleccionados
|
||||
const totalSelectedDays = computed(() => {
|
||||
return props.form.periods.reduce((total, period) => {
|
||||
return total + (period.number_of_days || 0);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Exponer el total para el componente padre
|
||||
defineExpose({
|
||||
totalSelectedDays
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<!-- Períodos de vacaciones -->
|
||||
<div class="space-y-4">
|
||||
<div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Período {{ index + 1 }}
|
||||
</h4>
|
||||
<button
|
||||
v-if="form.periods.length > 1"
|
||||
type="button"
|
||||
@click="removePeriod(index)"
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
|
||||
>
|
||||
<GoogleIcon name="delete" class="w-4 h-4" />
|
||||
Eliminar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div class="relative">
|
||||
<VueDatePicker
|
||||
v-model="period.start_date"
|
||||
class="w-full"
|
||||
placeholder="Fecha de inicio"
|
||||
format="dd/MM/yyyy"
|
||||
locale="es"
|
||||
:min-date="getMinDate()"
|
||||
:disabled-dates="isDisabled"
|
||||
:enable-time-picker="false"
|
||||
:auto-apply="true"
|
||||
:close-on-auto-apply="true"
|
||||
@update:model-value="(date) => {
|
||||
console.log('Fecha seleccionada (inicio):', date);
|
||||
period.start_date = formatDate(date);
|
||||
console.log('Fecha formateada (inicio):', period.start_date);
|
||||
updatePeriodDays(index);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<VueDatePicker
|
||||
v-model="period.end_date"
|
||||
class="w-full"
|
||||
placeholder="Fecha de fin"
|
||||
format="dd/MM/yyyy"
|
||||
locale="es"
|
||||
:min-date="getMinDate()"
|
||||
:disabled-dates="isDisabled"
|
||||
:enable-time-picker="false"
|
||||
:auto-apply="true"
|
||||
:close-on-auto-apply="true"
|
||||
@update:model-value="(date) => {
|
||||
console.log('Fecha seleccionada (fin):', date);
|
||||
period.end_date = formatDate(date);
|
||||
console.log('Fecha formateada (fin):', period.end_date);
|
||||
updatePeriodDays(index);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón añadir período -->
|
||||
<button
|
||||
type="button"
|
||||
@click="addPeriod"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
|
||||
>
|
||||
<GoogleIcon name="add" />
|
||||
Añadir período
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Comentarios -->
|
||||
<div>
|
||||
<Textarea
|
||||
v-model="form.comments"
|
||||
id="comments"
|
||||
rows="4"
|
||||
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
|
||||
placeholder="Agrega cualquier información adicional sobre tu solicitud..."
|
||||
:onError="form.errors.comments"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Botón de envío -->
|
||||
<div class="col-span-1 md:col-span-2 flex justify-center">
|
||||
<PrimaryButton
|
||||
v-text="$t('request')"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
295
src/pages/Vacations/Coordinator/Index.vue
Normal file
295
src/pages/Vacations/Coordinator/Index.vue
Normal file
@ -0,0 +1,295 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { api } from '@Services/Api';
|
||||
import { apiTo } from './Module';
|
||||
|
||||
import Calendar from '@Components/Holos/Calendar.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const applicationsForCoordinator = ref([]);
|
||||
const conflictDays = ref([]);
|
||||
const calendarRef = ref(null);
|
||||
|
||||
/** Metodos */
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('es-ES', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
// Función para calcular el total de días
|
||||
const calculateTotalDays = (vacationPeriods) => {
|
||||
return vacationPeriods.reduce((total, period) => total + period.number_of_days, 0);
|
||||
};
|
||||
|
||||
// Función para obtener el color del estado
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case 'Pendiente':
|
||||
return 'bg-yellow-100 text-yellow-800';
|
||||
case 'Aprobada':
|
||||
return 'bg-green-100 text-green-800';
|
||||
case 'Rechazada':
|
||||
return 'bg-red-100 text-red-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
// Método para obtener los días de conflicto del mes
|
||||
const fetchConflictDays = (month) => {
|
||||
// Limpiar inmediatamente los días de conflicto para evitar el parpadeo visual
|
||||
conflictDays.value = [];
|
||||
|
||||
api.get(apiTo('calendar-month', { month: month }), {
|
||||
onSuccess: (r) => {
|
||||
// El backend puede retornar un array vacío o un array con los días de conflicto
|
||||
conflictDays.value = r.conflict_days || [];
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const approvePeriod = (periodId) => {
|
||||
api.put(apiTo('approve-period', { period: periodId }), {
|
||||
onSuccess: (r) => {
|
||||
Notify.success('Periodo aprobado correctamente');
|
||||
// recargar la página
|
||||
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const approveAll = (applicationId) => {
|
||||
api.put(apiTo('approve-request', { vacationRequest: applicationId }), {
|
||||
onSuccess: (r) => {
|
||||
Notify.success('Solicitud aprobada correctamente');
|
||||
// recargar la página
|
||||
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
// Cargar los días de conflicto del mes actual al montar el componente
|
||||
const initialMonth = new Date().getMonth() + 1;
|
||||
fetchConflictDays(initialMonth);
|
||||
|
||||
// Cargar las solicitudes para coordinador
|
||||
api.get(apiTo('index'), {
|
||||
onSuccess: (r) => {
|
||||
applicationsForCoordinator.value = r.applications_for_coordinator;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between my-4 sm:my-8 gap-3 sm:gap-0">
|
||||
<div>
|
||||
<h1 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100">Gestión de Solicitudes</h1>
|
||||
<p class="text-sm sm:text-base text-slate-600 dark:text-slate-400">Revisa y gestiona las solicitudes de vacaciones de tu equipo</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6">
|
||||
<div class="order-2 lg:order-1 lg:col-span-8">
|
||||
<!-- Lista de solicitudes -->
|
||||
<div v-for="application in applicationsForCoordinator" :key="application.id" class="bg-white rounded-lg shadow-md p-4 sm:p-6 mb-4 sm:mb-6">
|
||||
<!-- Información del empleado -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center mb-4 sm:mb-6 gap-3 sm:gap-0">
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-200 rounded-full flex items-center justify-center mr-3 sm:mr-4 overflow-hidden flex-shrink-0">
|
||||
<img v-if="application.user.profile_photo_url"
|
||||
:src="application.user.profile_photo_url"
|
||||
:alt="application.user.full_name"
|
||||
class="w-full h-full object-cover">
|
||||
<svg v-else class="w-5 h-5 sm:w-6 sm:h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-1">
|
||||
<h2 class="text-base sm:text-lg font-semibold text-gray-900 truncate">{{ application.user.full_name }}</h2>
|
||||
<span :class="`px-2 py-1 text-xs rounded-full font-medium ${getStatusColor(application.status)} flex-shrink-0`">
|
||||
{{ application.status }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-500 text-sm">{{ application.user.department.name }}</p>
|
||||
<p class="text-gray-400 text-xs">Días disponibles: {{ application.user.vacation_days_available }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left sm:text-right text-sm text-gray-500 flex-shrink-0">
|
||||
<p>Solicitado: {{ formatDate(application.created_at) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conflicto -->
|
||||
<div v-if="application.have_conflict && application.status == 'Pendiente'" class="mb-4 sm:mb-6">
|
||||
<div class="bg-red-50 border border-red-200 rounded-lg p-3 sm:p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2 sm:ml-3 flex-1">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
Conflicto detectado
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<p class="mb-3">Las siguientes fechas presentan conflictos con otras solicitudes:</p>
|
||||
<div class="space-y-2 sm:space-y-3">
|
||||
<div v-for="conflict in application.have_conflict" :key="conflict.request_id"
|
||||
class="bg-white border border-red-200 rounded-md p-2 sm:p-3">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2 gap-1 sm:gap-0">
|
||||
<span class="font-medium text-red-800">{{ conflict.user.name }}</span>
|
||||
</div>
|
||||
<div class="text-xs text-red-600 space-y-2">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-2">
|
||||
<span class="font-medium">Período aprobado:</span>
|
||||
<span class="break-all sm:break-normal">{{ formatDate(conflict.conflicting_period.start_date) }} - {{ formatDate(conflict.conflicting_period.end_date) }} ({{ conflict.conflicting_period.number_of_days }} días)</span>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-2">
|
||||
<span class="font-medium">Período solicitado:</span>
|
||||
<span class="break-all sm:break-normal">{{ formatDate(conflict.target_period.start_date) }} - {{ formatDate(conflict.target_period.end_date) }} ({{ conflict.target_period.number_of_days }} días)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Períodos solicitados -->
|
||||
<div class="mb-4 sm:mb-6">
|
||||
<h3 class="text-sm font-medium text-gray-700 mb-3">Períodos solicitados:</h3>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div v-for="period in application.vacation_periods" :key="period.id"
|
||||
class="flex flex-col sm:flex-row sm:items-center p-3 bg-gray-50 rounded-lg gap-3 sm:gap-0">
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="w-6 h-6 sm:w-8 sm:h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2 sm:mr-3 flex-shrink-0">
|
||||
<svg class="w-3 h-3 sm:w-4 sm:h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:flex-1 gap-2">
|
||||
<span class="text-gray-700 text-sm">
|
||||
{{ formatDate(period.start_date) }} - {{ formatDate(period.end_date) }}
|
||||
</span>
|
||||
<span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full font-medium self-start sm:self-auto">
|
||||
{{ period.number_of_days }} {{ period.number_of_days === 1 ? 'día' : 'días' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones de acción para períodos individuales -->
|
||||
<div v-if="application.status === 'Pendiente'" class="flex gap-2 justify-start sm:justify-end">
|
||||
<button
|
||||
class="flex items-center justify-center gap-1 bg-green-500 hover:bg-green-600 text-white font-medium py-1.5 px-3 rounded text-xs transition-colors"
|
||||
@click="application.vacation_periods.length > 1 ? approvePeriod(period.id) : approveAll(application.id)"
|
||||
>
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
Aprobar
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex items-center justify-center gap-1 bg-red-500 hover:bg-red-600 text-white font-medium py-1.5 px-3 rounded text-xs transition-colors">
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
Rechazar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total -->
|
||||
<div class="mt-3 text-right">
|
||||
<span class="text-sm font-medium text-gray-700">
|
||||
Total: {{ calculateTotalDays(application.vacation_periods) }} días
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comentarios -->
|
||||
<div v-if="application.comments" class="mb-4 sm:mb-6">
|
||||
<h3 class="text-sm font-medium text-gray-700 mb-2">Comentarios:</h3>
|
||||
<div class="p-3 bg-gray-50 rounded-lg">
|
||||
<span class="text-gray-700 text-sm">{{ application.comments }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Motivo de rechazo -->
|
||||
<div v-if="application.rejection_reason" class="mb-4 sm:mb-6">
|
||||
<h3 class="text-sm font-medium text-red-700 mb-2">Motivo de rechazo:</h3>
|
||||
<div class="p-3 bg-red-50 rounded-lg border border-red-200">
|
||||
<span class="text-red-700 text-sm">{{ application.rejection_reason }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones de acción -->
|
||||
<div v-if="application.status === 'Pendiente' && application.vacation_periods.length > 1" class="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
||||
<button
|
||||
class="flex items-center justify-center gap-2 bg-green-500 hover:bg-green-600 text-white font-medium py-2.5 sm:py-2 px-4 rounded-lg transition-colors"
|
||||
@click="approveAll(application.id)"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
Aprobar todo
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white font-medium py-2.5 sm:py-2 px-4 rounded-lg transition-colors">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
Rechazar todo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensaje cuando no hay solicitudes -->
|
||||
<div v-if="!applicationsForCoordinator || applicationsForCoordinator.length === 0"
|
||||
class="text-center py-8 sm:py-12 px-4">
|
||||
<div class="w-12 h-12 sm:w-16 sm:h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 sm:w-8 sm:h-8 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-base sm:text-lg font-medium text-gray-900 mb-2">No hay solicitudes pendientes</h3>
|
||||
<p class="text-sm sm:text-base text-gray-500">Tu equipo no tiene solicitudes de vacaciones que requieran revisión.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2 lg:col-span-4">
|
||||
<Calendar
|
||||
ref="calendarRef"
|
||||
:conflictDays="conflictDays"
|
||||
@monthChanged="fetchConflictDays"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
16
src/pages/Vacations/Coordinator/Module.js
Normal file
16
src/pages/Vacations/Coordinator/Module.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`vacation-requests.coordinator.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.coordinator.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`vacations.${str}`)
|
||||
|
||||
export {
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
181
src/pages/Vacations/Employee/Create.vue
Normal file
181
src/pages/Vacations/Employee/Create.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module'
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Form from './Form.vue';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
|
||||
const form = useForm({
|
||||
periods: [
|
||||
{
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
number_of_days: 0,
|
||||
}
|
||||
],
|
||||
comments: ''
|
||||
});
|
||||
|
||||
const availableDays = ref(0);
|
||||
const formRef = ref(null);
|
||||
|
||||
// Calcular días restantes
|
||||
const remainingDays = computed(() => {
|
||||
if (!formRef.value) return availableDays.value;
|
||||
return availableDays.value - formRef.value.totalSelectedDays;
|
||||
});
|
||||
|
||||
// Calcular total de días seleccionados
|
||||
const totalSelectedDays = computed(() => {
|
||||
if (!formRef.value) return 0;
|
||||
return formRef.value.totalSelectedDays;
|
||||
});
|
||||
|
||||
// Obtener períodos con datos
|
||||
const periodsWithData = computed(() => {
|
||||
return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.post(apiTo('store'), {
|
||||
onSuccess: (res) => {
|
||||
Notify.success(Lang('created'));
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(route('resources.available-days'), {
|
||||
onSuccess: (res) => {
|
||||
availableDays.value = res.available_days;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
|
||||
<GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
|
||||
</button>
|
||||
</RouterLink>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
|
||||
<p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout de dos columnas -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Formulario - Columna izquierda (2/3) -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
|
||||
|
||||
<Form
|
||||
ref="formRef"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen - Columna derecha (1/3) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
|
||||
|
||||
<!-- Días disponibles -->
|
||||
<div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
|
||||
<div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
|
||||
</div>
|
||||
|
||||
<!-- Detalles de períodos -->
|
||||
<div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
|
||||
<div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100">
|
||||
Período {{ index + 1 }}:
|
||||
</h4>
|
||||
<div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div>Inicio: {{ period.start_date }}</div>
|
||||
<div>Fin: {{ period.end_date }}</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>Días en período {{ index + 1 }}:</span>
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
|
||||
{{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen de días -->
|
||||
<div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
|
||||
{{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
|
||||
<span class="px-2 py-1 rounded-full text-xs font-medium"
|
||||
:class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
|
||||
{{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advertencia si se excede el límite -->
|
||||
<div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
|
||||
<span class="text-sm text-red-600 dark:text-red-400 font-medium">
|
||||
Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recordatorios -->
|
||||
<div class="space-y-3">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
|
||||
<div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Las solicitudes deben hacerse con 15 días de anticipación</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Tu coordinador revisará y aprobará la solicitud</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Recibirás una notificación con la decisión</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Los días se descontarán una vez aprobados</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
236
src/pages/Vacations/Employee/Form.vue
Normal file
236
src/pages/Vacations/Employee/Form.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css';
|
||||
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'submit'
|
||||
])
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
form: Object
|
||||
})
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
emit('submit')
|
||||
}
|
||||
|
||||
function addPeriod() {
|
||||
props.form.periods.push({
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
number_of_days: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function removePeriod(index) {
|
||||
if (props.form.periods.length > 1) {
|
||||
props.form.periods.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function calculateDays(startDate, endDate) {
|
||||
if (!startDate || !endDate) return 0;
|
||||
|
||||
const start = new Date(startDate);
|
||||
const end = new Date(endDate);
|
||||
|
||||
// Validar que la fecha de inicio no sea posterior a la de fin
|
||||
if (start > end) return 0;
|
||||
|
||||
// Calcular la diferencia en días (incluyendo ambos días)
|
||||
const timeDiff = end.getTime() - start.getTime();
|
||||
const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
|
||||
|
||||
return daysDiff;
|
||||
}
|
||||
|
||||
function updatePeriodDays(index) {
|
||||
const period = props.form.periods[index];
|
||||
if (period.start_date && period.end_date) {
|
||||
period.number_of_days = calculateDays(period.start_date, period.end_date);
|
||||
} else {
|
||||
period.number_of_days = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function getMinDate() {
|
||||
const today = new Date();
|
||||
let daysToAdd = 15;
|
||||
let currentDate = new Date(today);
|
||||
|
||||
while (daysToAdd > 0) {
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
// Si no es domingo (0), contar el día
|
||||
if (currentDate.getDay() !== 0) {
|
||||
daysToAdd--;
|
||||
}
|
||||
}
|
||||
|
||||
return currentDate.toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
// Función para desactivar domingos
|
||||
function isDisabled(date) {
|
||||
return date.getDay() === 0; // 0 = domingo
|
||||
}
|
||||
|
||||
// Función para formatear fecha a Y-m-d
|
||||
function formatDate(date) {
|
||||
if (!date) return '';
|
||||
|
||||
// Si la fecha ya es un string en formato correcto, devolverla
|
||||
if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
|
||||
return date;
|
||||
}
|
||||
|
||||
let d;
|
||||
if (date instanceof Date) {
|
||||
d = date;
|
||||
} else {
|
||||
d = new Date(date);
|
||||
}
|
||||
|
||||
// Verificar que la fecha es válida
|
||||
if (isNaN(d.getTime())) {
|
||||
console.warn('Fecha inválida recibida:', date);
|
||||
return '';
|
||||
}
|
||||
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
// Watcher para detectar cambios en las fechas
|
||||
watch(() => props.form.periods, (newPeriods) => {
|
||||
newPeriods.forEach((period, index) => {
|
||||
if (period.start_date && period.end_date) {
|
||||
updatePeriodDays(index);
|
||||
}
|
||||
});
|
||||
}, { deep: true });
|
||||
|
||||
// Calcular total de días seleccionados
|
||||
const totalSelectedDays = computed(() => {
|
||||
return props.form.periods.reduce((total, period) => {
|
||||
return total + (period.number_of_days || 0);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Exponer el total para el componente padre
|
||||
defineExpose({
|
||||
totalSelectedDays
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<!-- Períodos de vacaciones -->
|
||||
<div class="space-y-4">
|
||||
<div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Período {{ index + 1 }}
|
||||
</h4>
|
||||
<button
|
||||
v-if="form.periods.length > 1"
|
||||
type="button"
|
||||
@click="removePeriod(index)"
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
|
||||
>
|
||||
<GoogleIcon name="delete" class="w-4 h-4" />
|
||||
Eliminar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div class="relative">
|
||||
<VueDatePicker
|
||||
v-model="period.start_date"
|
||||
class="w-full"
|
||||
placeholder="Fecha de inicio"
|
||||
format="dd/MM/yyyy"
|
||||
locale="es"
|
||||
:min-date="getMinDate()"
|
||||
:disabled-dates="isDisabled"
|
||||
:enable-time-picker="false"
|
||||
:auto-apply="true"
|
||||
:close-on-auto-apply="true"
|
||||
@update:model-value="(date) => {
|
||||
console.log('Fecha seleccionada (inicio):', date);
|
||||
period.start_date = formatDate(date);
|
||||
console.log('Fecha formateada (inicio):', period.start_date);
|
||||
updatePeriodDays(index);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<VueDatePicker
|
||||
v-model="period.end_date"
|
||||
class="w-full"
|
||||
placeholder="Fecha de fin"
|
||||
format="dd/MM/yyyy"
|
||||
locale="es"
|
||||
:min-date="getMinDate()"
|
||||
:disabled-dates="isDisabled"
|
||||
:enable-time-picker="false"
|
||||
:auto-apply="true"
|
||||
:close-on-auto-apply="true"
|
||||
@update:model-value="(date) => {
|
||||
console.log('Fecha seleccionada (fin):', date);
|
||||
period.end_date = formatDate(date);
|
||||
console.log('Fecha formateada (fin):', period.end_date);
|
||||
updatePeriodDays(index);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón añadir período -->
|
||||
<button
|
||||
type="button"
|
||||
@click="addPeriod"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
|
||||
>
|
||||
<GoogleIcon name="add" />
|
||||
Añadir período
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Comentarios -->
|
||||
<div>
|
||||
<Textarea
|
||||
v-model="form.comments"
|
||||
id="comments"
|
||||
rows="4"
|
||||
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
|
||||
placeholder="Agrega cualquier información adicional sobre tu solicitud..."
|
||||
:onError="form.errors.comments"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Botón de envío -->
|
||||
<div class="col-span-1 md:col-span-2 flex justify-center">
|
||||
<PrimaryButton
|
||||
v-text="$t('request')"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
136
src/pages/Vacations/Employee/Index.vue
Normal file
136
src/pages/Vacations/Employee/Index.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { api } from '@Services/Api';
|
||||
import { getDate } from '@Controllers/DateController';
|
||||
import { apiTo, viewTo } from './Module'
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const vacationRequests = ref([]);
|
||||
|
||||
/** Metodos */
|
||||
const getStatusClasses = (status) => {
|
||||
const statusMap = {
|
||||
'Pendiente': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
|
||||
'Aprobado': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
|
||||
'Rechazado': 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
|
||||
'Agendado': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
|
||||
'Cancelado': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
|
||||
'Concluido': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300'
|
||||
};
|
||||
|
||||
return statusMap[status] || 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300';
|
||||
};
|
||||
|
||||
const getStatusIcon = (status) => {
|
||||
const iconMap = {
|
||||
'Pendiente': { name: 'schedule', classes: 'text-amber-600 dark:text-amber-400' },
|
||||
'Aprobado': { name: 'check_circle', classes: 'text-blue-600 dark:text-blue-400' },
|
||||
'Rechazado': { name: 'cancel', classes: 'text-orange-600 dark:text-orange-400' },
|
||||
'Agendado': { name: 'event', classes: 'text-green-600 dark:text-green-400' },
|
||||
'Cancelado': { name: 'block', classes: 'text-red-600 dark:text-red-400' },
|
||||
'Concluido': { name: 'task_alt', classes: 'text-cyan-600 dark:text-cyan-400' }
|
||||
};
|
||||
|
||||
return iconMap[status] || { name: 'help', classes: 'text-gray-600 dark:text-gray-400' };
|
||||
};
|
||||
|
||||
const getStatusIconContainer = (status) => {
|
||||
const containerMap = {
|
||||
'Pendiente': 'bg-amber-100 dark:bg-amber-900/30',
|
||||
'Aprobado': 'bg-blue-100 dark:bg-blue-900/30',
|
||||
'Rechazado': 'bg-orange-100 dark:bg-orange-900/30',
|
||||
'Agendado': 'bg-green-100 dark:bg-green-900/30',
|
||||
'Cancelado': 'bg-red-100 dark:bg-red-900/30',
|
||||
'Concluido': 'bg-cyan-100 dark:bg-cyan-900/30'
|
||||
};
|
||||
|
||||
return containerMap[status] || 'bg-gray-100 dark:bg-gray-900/30';
|
||||
};
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(apiTo('index'), {
|
||||
onSuccess: (r) => {
|
||||
vacationRequests.value = r.vacation_requests.data;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Mis Solicitudes
|
||||
</h1>
|
||||
<p class="text-slate-600 dark:text-slate-400">Historial completo de todas tus solicitudes de vacaciones.</p>
|
||||
</div>
|
||||
<RouterLink :to="viewTo({ name: 'create' })">
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<GoogleIcon name="calendar_month" />
|
||||
Nueva Solicitud
|
||||
</PrimaryButton>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Lista de solicitudes -->
|
||||
<div class="space-y-4">
|
||||
<div v-for="vacation in vacationRequests" class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm dark:bg-slate-800 dark:border-slate-700">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div :class="`flex items-center justify-center w-10 h-10 rounded-lg ${getStatusIconContainer(vacation.status)}`">
|
||||
<GoogleIcon :name="getStatusIcon(vacation.status).name" :class="getStatusIcon(vacation.status).classes" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 v-if="vacation.vacation_periods.length > 1" class="font-semibold text-slate-900 dark:text-slate-100">{{ vacation.vacation_periods.length }} periodos</h3>
|
||||
<h3 v-else class="font-semibold text-slate-900 dark:text-slate-100">{{ getDate(vacation.vacation_periods[0].start_date) }} - {{ getDate(vacation.vacation_periods[0].end_date) }}</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">{{ vacation.total_days }} días</p>
|
||||
</div>
|
||||
</div>
|
||||
<span :class="`px-3 py-1 rounded-full text-sm font-medium ${getStatusClasses(vacation.status)}`">
|
||||
{{ vacation.status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-for="(period, index) in vacation.vacation_periods" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-slate-700 dark:text-slate-300">Período {{ index + 1 }}:</p>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">{{ getDate(period.start_date) }} - {{ getDate(period.end_date) }} ({{ period.number_of_days }} días)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<button class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg with-transition dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-700">
|
||||
<GoogleIcon name="visibility" />
|
||||
Ver detalles
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg with-transition dark:text-red-400 dark:hover:bg-red-900/20">
|
||||
<GoogleIcon name="cancel" />
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Estado vacío cuando no hay solicitudes -->
|
||||
<div v-if="vacationRequests.length == 0" class="text-center py-12">
|
||||
<GoogleIcon name="event_busy" class="text-slate-300 text-6xl mb-4 dark:text-slate-600" />
|
||||
<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-2">No tienes más solicitudes</h3>
|
||||
<p class="text-slate-600 dark:text-slate-400 mb-6">Cuando realices nuevas solicitudes de vacaciones aparecerán aquí.</p>
|
||||
<RouterLink :to="viewTo({ name: 'create' })">
|
||||
<PrimaryButton>
|
||||
<GoogleIcon name="add" class="mr-2" />
|
||||
Nueva Solicitud
|
||||
</PrimaryButton>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
16
src/pages/Vacations/Employee/Module.js
Normal file
16
src/pages/Vacations/Employee/Module.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`vacation-requests.employee.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`vacations.${str}`)
|
||||
|
||||
export {
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
@ -27,53 +27,234 @@ const router = createRouter({
|
||||
{
|
||||
path: '',
|
||||
name: 'index',
|
||||
redirect: '/dashboard',
|
||||
meta: {
|
||||
title: 'Inicio',
|
||||
icon: 'home',
|
||||
},
|
||||
redirect: '/dashboard'
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
name: 'dashboard.index',
|
||||
component: () => import('@Pages/Dashboard/Index.vue'),
|
||||
component: () => import('@Pages/Dashboard/Employee.vue'),
|
||||
meta: {
|
||||
title: 'Dashboard',
|
||||
icon: 'grid_view',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'profile',
|
||||
path: 'vacations',
|
||||
name: 'vacations',
|
||||
meta: {
|
||||
title: 'Vacaciones',
|
||||
icon: 'calendar_month',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'vacations.index',
|
||||
component: () => import('@Pages/Vacations/Employee/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'vacations.create',
|
||||
component: () => import('@Pages/Vacations/Employee/Create.vue'),
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'profile',
|
||||
name: 'profile.show',
|
||||
component: () => import('@Pages/Profile/Show.vue'),
|
||||
meta: {
|
||||
title: 'Perfil',
|
||||
icon: 'person',
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'notifications',
|
||||
path: 'profile/notifications',
|
||||
name: 'profile.notifications.index',
|
||||
component: () => import('@Pages/Profile/Notifications/Index.vue'),
|
||||
meta: {
|
||||
title: 'Notificaciones',
|
||||
icon: 'notifications',
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/coordinator',
|
||||
name: 'coordinator',
|
||||
component: () => import('@Layouts/CoordinatorLayout.vue'),
|
||||
meta: {
|
||||
title: 'Inicio',
|
||||
icon: 'home',
|
||||
},
|
||||
redirect: '/coordinator/dashboard',
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
name: 'coordinator.dashboard',
|
||||
component: () => import('@Pages/Dashboard/Coordinator.vue'),
|
||||
meta: {
|
||||
title: 'Dashboard',
|
||||
icon: 'grid_view',
|
||||
},
|
||||
redirect: '/coordinator/dashboard',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'profile.notifications.index',
|
||||
component: () => import('@Pages/Profile/Notifications/Index.vue')
|
||||
name: 'coordinator.dashboard.index',
|
||||
component: () => import('@Pages/Dashboard/Coordinator.vue'),
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'vacations',
|
||||
name: 'vacations.coordinator',
|
||||
meta: {
|
||||
title: 'Vacaciones',
|
||||
icon: 'calendar_month',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'vacations.coordinator.index',
|
||||
component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'admin',
|
||||
component: () => import('@Layouts/AppLayout.vue'),
|
||||
component: () => import('@Layouts/AdminLayout.vue'),
|
||||
meta: {
|
||||
title: 'Inicio',
|
||||
icon: 'home',
|
||||
},
|
||||
redirect: '/',
|
||||
redirect: '/admin/employees',
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
name: 'admin.dashboard.index',
|
||||
meta: {
|
||||
title: 'Dashboard',
|
||||
icon: 'grid_view',
|
||||
},
|
||||
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.index',
|
||||
component: () => import('@Pages/Academic/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'security',
|
||||
name: 'admin.security.index',
|
||||
component: () => import('@Pages/Security/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'payroll',
|
||||
name: 'admin.payroll.index',
|
||||
component: () => import('@Pages/Payroll/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'additional',
|
||||
name: 'admin.additional.index',
|
||||
component: () => import('@Pages/Additional/Index.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'vacations',
|
||||
name: 'admin.vacations',
|
||||
meta: {
|
||||
title: 'Vacaciones',
|
||||
icon: 'calendar_month',
|
||||
},
|
||||
redirect: '/admin/vacations',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'admin.vacations.index',
|
||||
component: () => import('@Pages/Vacations/Admin/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',
|
||||
name: 'admin.users',
|
||||
@ -174,7 +355,23 @@ const router = createRouter({
|
||||
component: () => import('@Pages/Admin/Activities/Index.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'documentation',
|
||||
name: 'admin.documentation',
|
||||
meta: {
|
||||
title: 'Maquetador de Documentos',
|
||||
icon: 'documents',
|
||||
},
|
||||
redirect: '/admin/documentation',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'admin.maquetador.index',
|
||||
component: () => import('@Pages/Maquetador/Index.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user