From 1c2b980ac0ae8a08be10ae0ed3d87af810718698 Mon Sep 17 00:00:00 2001 From: "jose.lopez" Date: Wed, 24 Sep 2025 13:28:47 -0600 Subject: [PATCH] Modulo de vacaciones reestaurado --- src/pages/Dashboard/Admin.vue | 186 +++++++++++----------- src/pages/Vacations/Coordinator/Index.vue | 8 +- src/pages/Vacations/Employee/Form.vue | 6 +- 3 files changed, 95 insertions(+), 105 deletions(-) diff --git a/src/pages/Dashboard/Admin.vue b/src/pages/Dashboard/Admin.vue index 83635bd..fb50a99 100644 --- a/src/pages/Dashboard/Admin.vue +++ b/src/pages/Dashboard/Admin.vue @@ -7,147 +7,141 @@ import GoogleIcon from '@Shared/GoogleIcon.vue'; import VueApexCharts from 'vue3-apexcharts'; // Propiedades -const vacations = ref([]); -const vacationsRequests = ref([]); -const adminInfo = ref({}); -const charts = ref({}); +const adminInfo = ref({}); +const vacationsCharts = ref({}); -// Datos procesados para los charts -const chartData = computed(() => { - // Datos para el gráfico de línea (Solicitudes por Mes) - const monthlyData = 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 = 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 +// Opciones para gráfica de solicitudes por mes (línea) const lineChartOptions = computed(() => ({ chart: { type: 'line', height: 350, toolbar: { - show: false + show: true }, - background: 'transparent' + zoom: { + enabled: true + } }, - colors: ['#3b82f6'], + 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 } }, + xaxis: { + categories: vacationsCharts.value.requests_by_month?.map(item => item.month_name) || [], + title: { + text: 'Mes' + } + }, + yaxis: { + title: { + text: 'Número de Solicitudes' + }, + min: 0 + }, tooltip: { - theme: 'dark' + y: { + formatter: function (val) { + return val + " solicitudes" + } + } + }, + grid: { + borderColor: '#f1f1f1' } })); -const lineChartSeries = computed(() => chartData.value.lineChartSeries); +// Series para gráfica de solicitudes por mes +const lineChartSeries = computed(() => [{ + name: 'Solicitudes', + data: vacationsCharts.value.requests_by_month?.map(item => item.total_requests) || [] +}]); -// Datos para el gráfico de dona (Solicitudes por Departamento) - Solo para admin +// Opciones para gráfica de solicitudes por departamento (donut) const donutChartOptions = computed(() => ({ chart: { type: 'donut', height: 350 }, - colors: ['#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#3b82f6', '#f97316'], - labels: chartData.value.donutChartLabels, + colors: ['#3B82F6', '#8B5CF6', '#06B6D4', '#10B981', '#F59E0B', '#EF4444', '#EC4899', '#84CC16'], + labels: vacationsCharts.value.requests_by_department?.map(item => item.department_name) || [], legend: { - position: 'right', - fontSize: '14px', - labels: { - colors: '#64748b' - } + position: 'bottom', + horizontalAlign: 'center' }, plotOptions: { pie: { donut: { - size: '60%' + size: '70%', + labels: { + show: true, + name: { + show: true, + fontSize: '14px', + fontWeight: 600 + }, + value: { + show: true, + fontSize: '16px', + fontWeight: 700, + formatter: function (val) { + return val + " solicitudes" + } + }, + total: { + show: true, + showAlways: false, + label: 'Total', + fontSize: '16px', + fontWeight: 700, + color: '#373d3f', + formatter: function (w) { + return w.globals.seriesTotals.reduce((a, b) => { + return a + b + }, 0) + " solicitudes" + } + } + } } } }, - dataLabels: { - enabled: true, - formatter: function(val, opts) { - return opts.w.config.series[opts.seriesIndex] - }, - style: { - fontSize: '14px', - colors: ['#fff'] + tooltip: { + y: { + formatter: function (val) { + return val + " solicitudes" + } } }, - tooltip: { - theme: 'dark' - } + responsive: [{ + breakpoint: 480, + options: { + chart: { + width: 200 + }, + legend: { + position: 'bottom' + } + } + }] })); -const donutChartSeries = computed(() => chartData.value.donutChartSeries); +// Series para gráfica de solicitudes por departamento +const donutChartSeries = computed(() => + vacationsCharts.value.requests_by_department?.map(item => item.total_requests) || [] +); /** Ciclos */ onMounted(() => { api.get(apiTo('admin'), { onSuccess: (r) => { - vacations.value = r.vacations; - vacationsRequests.value = r.vacation_requests; adminInfo.value = r.admin_info; - charts.value = r.admin_info?.charts || {}; + vacationsCharts.value = r.admin_info.charts; } }); }); @@ -225,7 +219,7 @@ onMounted(() => { -
+
diff --git a/src/pages/Vacations/Coordinator/Index.vue b/src/pages/Vacations/Coordinator/Index.vue index f0c15ba..cb35224 100644 --- a/src/pages/Vacations/Coordinator/Index.vue +++ b/src/pages/Vacations/Coordinator/Index.vue @@ -90,12 +90,8 @@ onMounted(() => {