From 68cde3dcea362c4a9b6b31706d49bb13c460ac45 Mon Sep 17 00:00:00 2001
From: "jose.lopez" <jose.lopez@golsystems.com.mx>
Date: Wed, 24 Sep 2025 21:37:30 +0000
Subject: [PATCH] vacations (#5)

Reviewed-on: https://gitea.golsystems.mx/juan.zapata/golscontrol-frontend-v1/pulls/5
---
 src/pages/Dashboard/Admin.vue             | 205 +++++++++++-----------
 src/pages/Dashboard/Coordinator.vue       |  44 +++--
 src/pages/Dashboard/Employee.vue          |  26 +--
 src/pages/Vacations/Coordinator/Index.vue |   8 +-
 src/pages/Vacations/Employee/Form.vue     |   6 +-
 5 files changed, 145 insertions(+), 144 deletions(-)

diff --git a/src/pages/Dashboard/Admin.vue b/src/pages/Dashboard/Admin.vue
index 8985870..fb50a99 100644
--- a/src/pages/Dashboard/Admin.vue
+++ b/src/pages/Dashboard/Admin.vue
@@ -1,147 +1,150 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref, onMounted } from 'vue';
+import { api } from '@Services/Api';
+import { apiTo } from './Module';
+
 import GoogleIcon from '@Shared/GoogleIcon.vue';
 import VueApexCharts from 'vue3-apexcharts';
 
-// Props
-const props = defineProps({
-    adminInfo: {
-        type: Object,
-        default: () => ({})
-    },
-    charts: {
-        type: Object,
-        default: () => ({})
-    }
-});
+// Propiedades
+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 = 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
+// 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) => {
+            adminInfo.value = r.admin_info;
+            vacationsCharts.value = r.admin_info.charts;
+        }
+    });
+});
 </script>
 
 <template>
@@ -216,7 +219,7 @@ const donutChartSeries = computed(() => chartData.value.donutChartSeries);
         </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">
+        <section v-if="vacationsCharts.requests_by_month && vacationsCharts.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">
diff --git a/src/pages/Dashboard/Coordinator.vue b/src/pages/Dashboard/Coordinator.vue
index d13379b..a96682e 100644
--- a/src/pages/Dashboard/Coordinator.vue
+++ b/src/pages/Dashboard/Coordinator.vue
@@ -1,30 +1,28 @@
 <script setup>
-import { computed } from 'vue';
+import { onMounted, ref } from 'vue';
+import { api } from '@Services/Api';
+import { apiTo } from './Module';
 
 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: () => []
-    }
+// Propiedades
+const vacations = ref({});
+const vacationsRequests = ref([]);
+const coordinatorInfo = ref({});
+const lastVacationRequests = ref([]);
+const employeeStatusDepartment = ref([]);
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('coordinator'), {
+        onSuccess: (r) => {
+            vacations.value = r.vacations;
+            vacationsRequests.value = r.vacation_requests;
+            coordinatorInfo.value = r.coordinator_info;
+            lastVacationRequests.value = r.coordinator_info?.last_vacation_requests;
+            employeeStatusDepartment.value = r.coordinator_info?.employee_status_department;
+        }
+    });
 });
 </script>
 
diff --git a/src/pages/Dashboard/Employee.vue b/src/pages/Dashboard/Employee.vue
index f001a50..b4e1e4c 100644
--- a/src/pages/Dashboard/Employee.vue
+++ b/src/pages/Dashboard/Employee.vue
@@ -1,20 +1,24 @@
 
 <script setup>
-import { computed } from 'vue';
+import { onMounted, ref } from 'vue';
+import { api } from '@Services/Api';
+import { apiTo } from './Module';
 
 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: () => []
-    }
+// Propiedades
+const vacations = ref({});
+const vacationsRequests = ref([]);
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('employee'), {
+        onSuccess: (r) => {
+            vacations.value = r.vacations;
+            vacationsRequests.value = r.vacation_requests;
+        }
+    });
 });
 </script>
 
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(() => {
 <template>
     <div>
         <!-- Header -->
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between my-4 sm:my-8 gap-3 sm:gap-0">
-            <div>
-                <h1 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100">Gestión de Solicitudes</h1>
-                <p class="text-sm sm:text-base text-slate-600 dark:text-slate-400">Revisa y gestiona las solicitudes de vacaciones de tu equipo</p>
-            </div>
-        </div>
+        <h1 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100">Gestión de Solicitudes</h1>
+        <p class="text-sm sm:text-base text-slate-600 dark:text-slate-400">Revisa y gestiona las solicitudes de vacaciones de tu equipo</p>
 
         <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6">
             <div class="order-2 lg:order-1 lg:col-span-8">
diff --git a/src/pages/Vacations/Employee/Form.vue b/src/pages/Vacations/Employee/Form.vue
index 4ac48cb..4cc976e 100644
--- a/src/pages/Vacations/Employee/Form.vue
+++ b/src/pages/Vacations/Employee/Form.vue
@@ -1,12 +1,12 @@
 <script setup>
 import { ref, watch, computed } from 'vue';
+
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
 import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-import Textarea         from '@Holos/Form/Textarea.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Textarea      from '@Holos/Form/Textarea.vue';
+import GoogleIcon    from '@Shared/GoogleIcon.vue';
 
 /** Eventos */
 const emit = defineEmits([