avance en el dashboard

src/pages/Dashboard/Admin.vue

@@ -1,24 +1,21 @@
 <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 vacations         = ref([]);
+const vacationsRequests = ref([]);
+const adminInfo         = ref({});
+const charts            = 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 monthlyData = charts.requests_by_month || [];
     const lineChartCategories = monthlyData.map(item => item.month_name);
     const lineChartSeries = [{
         name: 'Solicitudes',
@@ -26,7 +23,7 @@ const chartData = computed(() => {
     }];
 
     // Datos para el gráfico de dona (Solicitudes por Departamento)
-    const departmentData = props.charts.requests_by_department || [];
+    const departmentData = charts.requests_by_department || [];
     const donutChartLabels = departmentData.map(item => item.department_name);
     const donutChartSeries = departmentData.map(item => item.total_requests);
 
@@ -142,6 +139,18 @@ const donutChartOptions = computed(() => ({
 }));
 
 const donutChartSeries = computed(() => chartData.value.donutChartSeries);
+
+/** 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 || {};
+        }
+    });
+});
 </script>
 
 <template>

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>
 

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>