Modulo de vacaciones reestaurado
This commit is contained in:
parent
ea4b709ec9
commit
1c2b980ac0
@ -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 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%'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function(val, opts) {
|
||||
return opts.w.config.series[opts.seriesIndex]
|
||||
},
|
||||
style: {
|
||||
size: '70%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
fontSize: '14px',
|
||||
colors: ['#fff']
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + " solicitudes"
|
||||
}
|
||||
}
|
||||
},
|
||||
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(() => {
|
||||
</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">
|
||||
|
||||
@ -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>
|
||||
|
||||
<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">
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<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';
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user