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