Compare commits
No commits in common. "courses" and "main" have entirely different histories.
@ -1,83 +0,0 @@
|
||||
<script setup>
|
||||
import { getDate } from '@Controllers/DateController';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Props */
|
||||
const props = defineProps({
|
||||
records: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['destroy', 'edit']);
|
||||
|
||||
/** Métodos */
|
||||
function openDestroy(record) {
|
||||
emit('destroy', record);
|
||||
}
|
||||
|
||||
function openEdit(record) {
|
||||
emit('edit', record);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="book"
|
||||
/>
|
||||
Grados Académicos
|
||||
</h3>
|
||||
|
||||
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<!-- Item grado dinámico -->
|
||||
<article
|
||||
v-for="record in records"
|
||||
:key="record.id"
|
||||
class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">{{ record.title }}</h4>
|
||||
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">{{ record.institution }}</p>
|
||||
<p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Fecha de obtención: {{ record.date_obtained ? getDate(record.date_obtained) : '-' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
|
||||
{{ record.degree_type_ek }}
|
||||
</span>
|
||||
<button
|
||||
@click="openEdit(record)"
|
||||
class="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
title="Editar grado académico"
|
||||
>
|
||||
<GoogleIcon name="edit" class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="openDestroy(record)"
|
||||
class="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
|
||||
title="Eliminar grado académico"
|
||||
>
|
||||
<GoogleIcon name="delete" class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Estado vacío para grados académicos -->
|
||||
<div v-if="!records || records.length === 0" class="col-span-2 py-8 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron grados académicos</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,121 +0,0 @@
|
||||
<script setup>
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import { getDate } from '@Controllers/DateController';
|
||||
|
||||
/** Props */
|
||||
const props = defineProps({
|
||||
certifications: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['destroy', 'edit']);
|
||||
|
||||
/** Métodos */
|
||||
function openDestroy(cert) {
|
||||
emit('destroy', cert);
|
||||
}
|
||||
|
||||
function openEdit(cert) {
|
||||
emit('edit', cert);
|
||||
}
|
||||
|
||||
/** Métodos */
|
||||
function getCertificationStatus(cert) {
|
||||
// Si no tiene fecha de expiración, se considera permanente
|
||||
if (!cert.date_expiration) {
|
||||
return {
|
||||
status: 'permanente',
|
||||
statusText: 'Permanente',
|
||||
isExpired: false
|
||||
};
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
const expirationDate = new Date(cert.date_expiration);
|
||||
|
||||
// Si la fecha actual es mayor a la fecha de expiración, está vencida
|
||||
const isExpired = now > expirationDate;
|
||||
|
||||
return {
|
||||
status: isExpired ? 'vencida' : 'vigente',
|
||||
statusText: isExpired ? 'Vencida' : 'Vigente',
|
||||
isExpired
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="license"
|
||||
/>
|
||||
Certificaciones
|
||||
</h3>
|
||||
|
||||
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<!-- Certificación dinámica -->
|
||||
<article
|
||||
v-for="cert in certifications"
|
||||
:key="cert.id"
|
||||
:class="[
|
||||
'rounded-lg border p-4 relative',
|
||||
getCertificationStatus(cert).status === 'vigente'
|
||||
? 'border-gray-100 bg-green-50/40 dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt'
|
||||
: 'border-gray-100 bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt'
|
||||
]"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">{{ cert.name }}</h4>
|
||||
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">{{ cert.institution }}</p>
|
||||
<p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: {{ cert.date_obtained ? getDate(cert.date_obtained) : '-' }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: {{ cert.date_expiration ? getDate(cert.date_expiration) : 'Permanente' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold',
|
||||
getCertificationStatus(cert).status === 'vigente'
|
||||
? 'bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt'
|
||||
: getCertificationStatus(cert).status === 'permanente'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-info-d dark:text-info-dt'
|
||||
: 'bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt'
|
||||
]"
|
||||
>
|
||||
{{ getCertificationStatus(cert).statusText }}
|
||||
</span>
|
||||
<button
|
||||
@click="openEdit(cert)"
|
||||
class="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
title="Editar certificación"
|
||||
>
|
||||
<GoogleIcon name="edit" class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="openDestroy(cert)"
|
||||
class="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
|
||||
title="Eliminar certificación"
|
||||
>
|
||||
<GoogleIcon name="delete" class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Estado vacío para certificaciones -->
|
||||
<div v-if="!certifications || certifications.length === 0" class="col-span-2 py-8 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="license" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron certificaciones</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,151 +0,0 @@
|
||||
<script setup>
|
||||
import GoogleIcon from '../Shared/GoogleIcon.vue';
|
||||
import Loader from '../Shared/Loader.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'send-pagination'
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
items: Object,
|
||||
processing: Boolean
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
|
||||
<!-- Tabla -->
|
||||
<div class="overflow-x-auto">
|
||||
<table v-if="!processing" class="w-full">
|
||||
<thead>
|
||||
<tr class="text-left text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
<slot name="head" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100 dark:divide-primary/20 text-sm text-gray-700 dark:text-primary-dt">
|
||||
<template v-if="items?.total > 0">
|
||||
<slot
|
||||
name="body"
|
||||
:items="items?.data"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr>
|
||||
<slot name="empty" />
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Estado de carga -->
|
||||
<table v-else class="animate-pulse w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="100%" class="h-8 text-center">
|
||||
<div class="flex items-center justify-center">
|
||||
<Loader />
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="i in 3" :key="i">
|
||||
<td colspan="100%" class="table-cell h-16 text-center">
|
||||
<div class="w-full h-4 bg-secondary/50 rounded-md"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Paginación -->
|
||||
<template v-if="items?.links && items.links.length > 3">
|
||||
<div class="mt-6 flex w-full justify-end">
|
||||
<div class="flex w-full justify-end flex-wrap space-x-1 -mb-1">
|
||||
<template v-for="(link, k) in items.links" :key="k">
|
||||
<!-- Botón anterior deshabilitado -->
|
||||
<div v-if="link.url === null && k == 0"
|
||||
class="px-3 py-2 text-sm leading-4 text-gray-400 border rounded-lg bg-gray-50 dark:bg-primary-d dark:border-primary/20"
|
||||
>
|
||||
<GoogleIcon name="arrow_back" class="w-4 h-4" />
|
||||
</div>
|
||||
|
||||
<!-- Botón anterior activo -->
|
||||
<button v-else-if="k === 0"
|
||||
class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50"
|
||||
:class="{
|
||||
'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
|
||||
'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
|
||||
}"
|
||||
@click="emit('send-pagination', link.url)"
|
||||
>
|
||||
<GoogleIcon name="arrow_back" class="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<!-- Botón siguiente deshabilitado -->
|
||||
<div v-else-if="link.url === null && k == (items.links.length - 1)"
|
||||
class="px-3 py-2 text-sm leading-4 text-gray-400 border rounded-lg bg-gray-50 dark:bg-primary-d dark:border-primary/20"
|
||||
>
|
||||
<GoogleIcon name="arrow_forward" class="w-4 h-4" />
|
||||
</div>
|
||||
|
||||
<!-- Botón siguiente activo -->
|
||||
<button v-else-if="k === (items.links.length - 1)"
|
||||
class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50"
|
||||
:class="{
|
||||
'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
|
||||
'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
|
||||
}"
|
||||
@click="emit('send-pagination', link.url)"
|
||||
>
|
||||
<GoogleIcon name="arrow_forward" class="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<!-- Números de página -->
|
||||
<button v-else
|
||||
class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50"
|
||||
:class="{
|
||||
'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
|
||||
'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
|
||||
}"
|
||||
v-html="link.label"
|
||||
@click="emit('send-pagination', link.url)"
|
||||
></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Estilos adicionales para mejorar la experiencia */
|
||||
tbody tr {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.dark tbody tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Animación suave para los botones de paginación */
|
||||
button {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
@ -86,9 +86,6 @@ export default {
|
||||
light: 'Tema claro'
|
||||
}
|
||||
},
|
||||
approve: 'Aprobar',
|
||||
assigned_budget: 'Presupuesto asignado',
|
||||
available_budget: 'Presupuesto disponible',
|
||||
assistances: {
|
||||
create: {
|
||||
title: 'Generar asistencia',
|
||||
@ -136,19 +133,11 @@ export default {
|
||||
title:'Historial de cambios',
|
||||
description: 'Lista de los cambios realizados al sistema.',
|
||||
},
|
||||
certification_name: 'Nombre de certificación',
|
||||
certification_type: 'Tipo de certificación',
|
||||
clear: 'Limpiar',
|
||||
close:"Cerrar",
|
||||
company: 'Empresa',
|
||||
confirm:'Confirmar',
|
||||
copyright:'Todos los derechos reservados.',
|
||||
contact:'Contacto',
|
||||
cost: 'Costo',
|
||||
courses: {
|
||||
title: 'Cursos',
|
||||
description: 'Gestión de cursos de capacitación'
|
||||
},
|
||||
create: 'Crear',
|
||||
created: 'Registro creado',
|
||||
created_at: 'Fecha creación',
|
||||
@ -159,12 +148,8 @@ export default {
|
||||
show: 'Más detalles',
|
||||
import: 'Importación'
|
||||
},
|
||||
currency: 'Moneda',
|
||||
dashboard: 'Dashboard',
|
||||
date: 'Fecha',
|
||||
date_expiration: 'Fecha de expiración',
|
||||
date_obtained: 'Fecha de obtención',
|
||||
department: 'Departamento',
|
||||
dates: {
|
||||
start: 'Fecha Inicial',
|
||||
end: 'Fecha Final'
|
||||
@ -183,10 +168,8 @@ export default {
|
||||
confirm: 'Al presionar ELIMINAR el registro se eliminará permanentemente y no podrá recuperarse.',
|
||||
title: 'Eliminar',
|
||||
},
|
||||
degreeType: 'Tipo de grado',
|
||||
deleted:'Registro eliminado',
|
||||
description:'Descripción',
|
||||
duration: 'Duración',
|
||||
details:'Detalles',
|
||||
disable:'Deshabilitar',
|
||||
disabled:'Deshabilitado',
|
||||
@ -197,7 +180,6 @@ export default {
|
||||
title:'Correo',
|
||||
verification:'Verificar correo'
|
||||
},
|
||||
exam_date: 'Fecha de examen',
|
||||
employees: {
|
||||
create: {
|
||||
title: 'Crear empleado',
|
||||
@ -211,7 +193,6 @@ export default {
|
||||
enabled:'Habilitado',
|
||||
endDate:'Fecha Fin',
|
||||
event:'Evento',
|
||||
event_name: 'Nombre del evento',
|
||||
files: {
|
||||
excel: 'Archivo excel',
|
||||
select: 'Seleccionar archivo'
|
||||
@ -221,9 +202,6 @@ export default {
|
||||
home: 'Volver a la pagina de inicio.',
|
||||
title:'Ayuda',
|
||||
},
|
||||
headquarter: 'Sede',
|
||||
hire_date: 'Fecha de contratación',
|
||||
institution: 'Institución',
|
||||
history: {
|
||||
title:'Historial de acciones',
|
||||
description:'Historial de acciones realizadas por los usuarios en orden cronológico.'
|
||||
@ -233,13 +211,11 @@ export default {
|
||||
icon:'Icono',
|
||||
import: 'Importar',
|
||||
items: 'Elementos',
|
||||
location: 'Ubicación',
|
||||
maternal:'Apellido materno',
|
||||
message:'Mensaje',
|
||||
menu:'Menú',
|
||||
name:'Nombre',
|
||||
noRecords:'Sin registros',
|
||||
number: 'Número',
|
||||
notification:'Notificación',
|
||||
notifications: {
|
||||
unreadClosed:'Ocultas',
|
||||
@ -251,24 +227,11 @@ export default {
|
||||
seeAll:'Ver todas',
|
||||
},
|
||||
omitted:'Omitida',
|
||||
participants_count: 'Cantidad de participantes',
|
||||
password:'Contraseña',
|
||||
passwordConfirmation:'Confirmar contraseña',
|
||||
passwordCurrent:'Contraseña actual',
|
||||
passwordReset:'Restaurar contraseña',
|
||||
paternal:'Apellido paterno',
|
||||
petty_cash: {
|
||||
title: 'Caja Chica',
|
||||
description: 'Gestión de caja chica para gastos menores'
|
||||
},
|
||||
pettyCashes: {
|
||||
create: {
|
||||
description: 'Crea una nueva caja chica para gestión de gastos menores'
|
||||
},
|
||||
edit: {
|
||||
description: 'Modifica los datos de la caja chica seleccionada'
|
||||
}
|
||||
},
|
||||
phone:'Teléfono',
|
||||
photo: {
|
||||
new: 'Seleccionar una nueva foto',
|
||||
@ -429,31 +392,8 @@ export default {
|
||||
updated_at:'Fecha actualización',
|
||||
updateFail:'Error al actualizar',
|
||||
unreaded:'No leído',
|
||||
url: 'URL',
|
||||
user:'Usuario',
|
||||
users:{
|
||||
academic: {
|
||||
create: {
|
||||
certification: {
|
||||
description: 'Permite agregar nuevas certificaciones profesionales al historial académico del usuario.',
|
||||
title: 'Crear certificación'
|
||||
},
|
||||
record: {
|
||||
description: 'Permite agregar nuevos grados académicos al historial del usuario.',
|
||||
title: 'Crear registro académico'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
certification: {
|
||||
description: 'Permite modificar los datos de la certificación profesional seleccionada.',
|
||||
title: 'Editar certificación'
|
||||
},
|
||||
record: {
|
||||
description: 'Permite modificar los datos del registro académico seleccionado.',
|
||||
title: 'Editar registro académico'
|
||||
}
|
||||
}
|
||||
},
|
||||
activity: {
|
||||
title: 'Actividad del usuario',
|
||||
description: 'Historial de acciones realizadas por el usuario.',
|
||||
@ -465,7 +405,6 @@ export default {
|
||||
onError:'Ocurrió un error al crear el usuario'
|
||||
},
|
||||
deleted:'Usuario eliminado',
|
||||
description: 'Gestión de información general de empleados',
|
||||
remove: 'Remover usuario',
|
||||
edit: {
|
||||
title: 'Editar usuario'
|
||||
|
||||
@ -42,31 +42,36 @@ onMounted(() => {
|
||||
<template #leftSidebar>
|
||||
<Section name="Principal">
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Dashboard"
|
||||
to="admin.dashboard.index"
|
||||
icon="grid_view"
|
||||
name="Dashboard"
|
||||
to="admin.dashboard.index"
|
||||
/>
|
||||
<DropDown
|
||||
icon="people"
|
||||
name="Usuarios"
|
||||
to="admin.users.index"
|
||||
name="Empleados"
|
||||
to="admin.employees.index"
|
||||
:collapsed="true"
|
||||
>
|
||||
<Link
|
||||
icon="school"
|
||||
name="Historial Académico"
|
||||
to="admin.users.academic.index"
|
||||
/>
|
||||
<Link
|
||||
icon="security"
|
||||
name="Seguridad y Salud"
|
||||
to="admin.users.security"
|
||||
/>
|
||||
<Link
|
||||
icon="info"
|
||||
name="Información Adicional"
|
||||
to="admin.users.additional"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</DropDown>
|
||||
</Section>
|
||||
<Section name="Vacaciones">
|
||||
@ -88,6 +93,11 @@ onMounted(() => {
|
||||
name="Solicitud de Cursos"
|
||||
to="admin.courses.request"
|
||||
/>
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Asignación de Cursos"
|
||||
to="admin.courses.assignamment"
|
||||
/>
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Calendario de Cursos"
|
||||
@ -102,15 +112,10 @@ onMounted(() => {
|
||||
to="admin.events.index"
|
||||
:collapsed="true"
|
||||
>
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Cajas Chicas"
|
||||
to="admin.events.pettyCashes"
|
||||
/>
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Asignación de presupuesto"
|
||||
to="admin.events.pettyCashes.assignamment"
|
||||
to="admin.events.assignamment"
|
||||
/>
|
||||
<Link
|
||||
icon="grid_view"
|
||||
@ -128,6 +133,12 @@ onMounted(() => {
|
||||
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"
|
||||
|
||||
@ -48,11 +48,6 @@ onMounted(() => {
|
||||
name="Vacaciones"
|
||||
to="vacations.index"
|
||||
/>
|
||||
<Link
|
||||
icon="info"
|
||||
name="Cursos"
|
||||
to="courses.index"
|
||||
/>
|
||||
<Link
|
||||
icon="person"
|
||||
name="Perfil"
|
||||
|
||||
@ -48,11 +48,6 @@ onMounted(() => {
|
||||
name="Vacaciones"
|
||||
to="vacations.coordinator.index"
|
||||
/>
|
||||
<Link
|
||||
icon="info"
|
||||
name="Solicitud de Cursos"
|
||||
to="courses.coordinator.index"
|
||||
/>
|
||||
</Section>
|
||||
<Section
|
||||
:name="$t('admin.title')"
|
||||
|
||||
147
src/pages/Academic/Index.vue
Normal file
147
src/pages/Academic/Index.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<script setup>
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 max-w-auto mx-auto">
|
||||
<!-- Página: Header principal -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Historial Académico</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de grados académicos y certificaciones profesionales</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Adding text="Agregar Registro" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card principal: perfil + secciones -->
|
||||
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<!-- Perfil -->
|
||||
<header class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
|
||||
<!-- icono usuario -->
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="school"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">María González López</h2>
|
||||
<p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información académica y certificaciones profesionales</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Secciones: Grados Académicos -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="book"
|
||||
/>
|
||||
Grados Académicos
|
||||
</h3>
|
||||
|
||||
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<!-- Item grado -->
|
||||
<article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Licenciatura en Ingeniería en Sistemas</h4>
|
||||
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Universidad Nacional Autónoma de México</p>
|
||||
<p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Año: 2015</p>
|
||||
</div>
|
||||
|
||||
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
|
||||
Licenciatura
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Maestría en Ciencias de la Computación</h4>
|
||||
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Instituto Tecnológico de Monterrey</p>
|
||||
<p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Año: 2018</p>
|
||||
</div>
|
||||
|
||||
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
|
||||
Maestría
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Secciones: Certificaciones -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="license"
|
||||
/>
|
||||
Certificaciones
|
||||
</h3>
|
||||
|
||||
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
<!-- Cert vigente -->
|
||||
<article class="rounded-lg border border-gray-100 bg-green-50/40 p-4 relative dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">AWS Certified Solutions Architect</h4>
|
||||
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Amazon Web Services</p>
|
||||
<p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: 2023-05-15</p>
|
||||
<p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: 2026-05-15</p>
|
||||
</div>
|
||||
|
||||
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt">
|
||||
Vigente
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Cert vencida -->
|
||||
<article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Certified ScrumMaster</h4>
|
||||
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Scrum Alliance</p>
|
||||
<p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: 2022-08-20</p>
|
||||
<p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: 2024-08-20</p>
|
||||
</div>
|
||||
|
||||
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt">
|
||||
Vencida
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Acciones al final de la tarjeta -->
|
||||
<div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="add"
|
||||
/>
|
||||
Agregar Grado
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="add"
|
||||
/>
|
||||
Agregar Certificación
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,51 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, transl, viewTo } from './Module';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Selectable from '@Holos/Form/Selectable.vue';
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import Form from './Form.vue'
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.post(apiTo('store'), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.create.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
:title="transl('create.title')"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
<Form
|
||||
action="create"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</template>
|
||||
@ -1,60 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { viewTo, apiTo , transl } from './Module';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import Selectable from '@Holos/Form/Selectable.vue';
|
||||
import Form from './Form.vue'
|
||||
|
||||
/** Definiciones */
|
||||
const vroute = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
id: null,
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
const departments = ref([]);
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.put(apiTo('update', { user: form.id }), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.edit.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
api.get(apiTo('show', { user: vroute.params.id }), {
|
||||
onSuccess: (r) => {
|
||||
form.fill(r.user)
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader :title="transl('edit.title')">
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
<Form
|
||||
action="update"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</template>
|
||||
@ -1,57 +0,0 @@
|
||||
<script setup>
|
||||
import { transl } from './Module';
|
||||
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'submit'
|
||||
])
|
||||
|
||||
/** Propiedades */
|
||||
defineProps({
|
||||
action: {
|
||||
default: 'create',
|
||||
type: String
|
||||
},
|
||||
form: Object
|
||||
})
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
emit('submit')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<Input
|
||||
v-model="form.name"
|
||||
id="name"
|
||||
:onError="form.errors.name"
|
||||
autofocus
|
||||
required
|
||||
/>
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
id="description"
|
||||
:onError="form.errors.description"
|
||||
rows="4"
|
||||
/>
|
||||
<slot />
|
||||
<div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
|
||||
<PrimaryButton
|
||||
v-text="$t(action)"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,100 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { hasPermission } from '@Plugins/RolePermission';
|
||||
import { getDate } from '@Controllers/DateController';
|
||||
import { can, apiTo, viewTo, transl } from './Module'
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
import SearcherHead from '@Holos/Searcher.vue';
|
||||
import Table from '@Holos/NewTable.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Searcher from '@Holos/Searcher.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const models = ref([]);
|
||||
|
||||
/** Referencias */
|
||||
const showModal = ref(false);
|
||||
const destroyModal = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
onError: () => models.value = []
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('users.title') }}</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('users.description') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<RouterLink :to="viewTo({ name: 'create' })">
|
||||
<Adding text="Nuevo Empleado" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Search Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Searcher @search="(x) => searcher.search(x)">
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- List Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
|
||||
<template #head>
|
||||
<th v-text="$t('name')" />
|
||||
<th class="w-32 text-center" v-text="$t('actions')" />
|
||||
</template>
|
||||
|
||||
<template #body="{ items }">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td>{{ model.name }}</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
|
||||
outline />
|
||||
<RouterLink class="h-fit"
|
||||
:to="viewTo({ name: 'edit', params: { id: model.id } })">
|
||||
<IconButton icon="edit" :title="$t('crud.edit')" outline />
|
||||
</RouterLink>
|
||||
<IconButton icon="delete" :title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)" outline />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<td colspan="6" class="py-12 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron empleados</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<ShowView ref="showModal" />
|
||||
|
||||
<DestroyView ref="destroyModal" subtitle="last_name"
|
||||
:to="(department) => apiTo('destroy', { department })" @update="searcher.search()" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,21 +0,0 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`admin.users.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.users.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`users.${str}`)
|
||||
|
||||
// Determina si un usuario puede hacer algo no en base a los permisos
|
||||
const can = (permission) => hasPermission(`users.${permission}`)
|
||||
|
||||
export {
|
||||
can,
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
@ -1,258 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Selectable from '@Holos/Form/Selectable.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
|
||||
/** Definiciones */
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
event_name: '',
|
||||
location: '',
|
||||
description: '',
|
||||
participants_count: '',
|
||||
cost: '',
|
||||
observations: '',
|
||||
petty_cash_id: '',
|
||||
files: null,
|
||||
});
|
||||
|
||||
const pettyCashes = ref([]);
|
||||
const availableBudget = ref('');
|
||||
|
||||
// Watch para actualizar el presupuesto disponible cuando cambie la caja chica
|
||||
watch(() => form.petty_cash_id, (newValue) => {
|
||||
availableBudget.value = newValue?.available_budget ?? 0;
|
||||
}, { deep: true });
|
||||
|
||||
|
||||
// Función para manejar la subida de archivos
|
||||
const handleFileUpload = (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
if (file.type === 'application/pdf') {
|
||||
form.files = file;
|
||||
} else {
|
||||
Notify.error('Por favor, selecciona un archivo PDF válido');
|
||||
event.target.value = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Función para eliminar archivo
|
||||
const removeFile = () => {
|
||||
form.files = null;
|
||||
const fileInput = document.getElementById('justification-file');
|
||||
if (fileInput) {
|
||||
fileInput.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// Función para enviar justificación
|
||||
function submit() {
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
petty_cash_id: data.petty_cash_id?.id
|
||||
})).post(apiTo('store-expense-justification'), {
|
||||
onSuccess: () => {
|
||||
Notify.success('Justificación enviada correctamente');
|
||||
router.push(viewTo({ name: 'reports' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.catalog({
|
||||
'pettyCash:all': null
|
||||
}, {
|
||||
onSuccess: (r) => pettyCashes.value = r['pettyCash:all'] ?? []
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
title="Justificación de Gastos"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm">Documenta y justifica los gastos realizados en eventos</p>
|
||||
</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="submit" class="space-y-6">
|
||||
|
||||
<!-- Detalles del Evento -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
||||
<Input
|
||||
v-model="form.event_name"
|
||||
id="event_name"
|
||||
title="Nombre del Evento"
|
||||
:onError="form.errors.event_name"
|
||||
required
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="form.location"
|
||||
id="location"
|
||||
title="Lugar"
|
||||
:onError="form.errors.location"
|
||||
required
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
v-model="form.description"
|
||||
id="description"
|
||||
title="Descripción y Detalles"
|
||||
:onError="form.errors.description"
|
||||
required
|
||||
/>
|
||||
|
||||
<!-- Detalles Financieros y Participantes -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
||||
<Input
|
||||
v-model.number="form.participants_count"
|
||||
id="participants_count"
|
||||
title="Número de Participantes"
|
||||
type="number"
|
||||
min="1"
|
||||
:onError="form.errors.participants_count"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model.number="form.cost"
|
||||
id="cost"
|
||||
title="Costo"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
:onError="form.errors.cost"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Caja Chica y Presupuesto Disponible -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
||||
<Selectable
|
||||
v-model="form.petty_cash_id"
|
||||
id="petty_cash_id"
|
||||
title="Caja Chica"
|
||||
:onError="form.errors.petty_cash_id"
|
||||
:options="pettyCashes"
|
||||
required
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="availableBudget"
|
||||
type="number"
|
||||
id="available_budget"
|
||||
title="Presupuesto Disponible"
|
||||
disabled
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Observaciones -->
|
||||
<Textarea
|
||||
v-model="form.observations"
|
||||
id="observations"
|
||||
title="Observaciones"
|
||||
:onError="form.errors.observations"
|
||||
/>
|
||||
|
||||
<!-- 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="form.files" 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">
|
||||
{{ form.files.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">
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
:processing="form.processing"
|
||||
>
|
||||
<GoogleIcon class="text-white text-xl mr-2" name="send" />
|
||||
Enviar Justificación
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@ -1,109 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { getDateTime } from '@Controllers/DateController';
|
||||
|
||||
import Header from '@Holos/Modal/Elements/Header.vue';
|
||||
import ShowModal from '@Holos/Modal/Show.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'close',
|
||||
'reload'
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const model = ref(null);
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
function close() {
|
||||
model.value = null;
|
||||
|
||||
emit('close');
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (data) => {
|
||||
model.value = data;
|
||||
modalRef.value.open();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ShowModal
|
||||
ref="modalRef"
|
||||
@close="close"
|
||||
>
|
||||
<div v-if="model">
|
||||
<Header
|
||||
:title="model.event_name"
|
||||
:subtitle="model.location"
|
||||
>
|
||||
<div class="flex w-full flex-col">
|
||||
<div class="flex w-full justify-center items-center">
|
||||
<GoogleIcon
|
||||
class="text-6xl text-primary"
|
||||
name="event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Header>
|
||||
<div class="flex w-full p-4">
|
||||
<GoogleIcon
|
||||
class="text-xl text-success"
|
||||
name="event"
|
||||
/>
|
||||
<div class="pl-3">
|
||||
<p class="font-bold text-lg leading-none pb-2">
|
||||
{{ $t('details') }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('event_name') }}: </b>
|
||||
{{ model.event_name }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('location') }}: </b>
|
||||
{{ model.location }}
|
||||
</p>
|
||||
<p v-if="model.description">
|
||||
<b>{{ $t('description') }}: </b>
|
||||
{{ model.description }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('participants_count') }}: </b>
|
||||
{{ model.participants_count ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('cost') }}: </b>
|
||||
${{ model.cost ?? '0.00' }}
|
||||
</p>
|
||||
<p v-if="model.observations">
|
||||
<b>{{ $t('observations') }}: </b>
|
||||
{{ model.observations }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('company') }}: </b>
|
||||
{{ model.company?.name ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('petty_cash.title') }}: </b>
|
||||
{{ model.petty_cash?.name ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('created_at') }}: </b>
|
||||
{{ getDateTime(model.created_at) }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('updated_at') }}: </b>
|
||||
{{ getDateTime(model.updated_at) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ShowModal>
|
||||
</template>
|
||||
@ -1,21 +0,0 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`admin.events.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.events.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`events.${str}`)
|
||||
|
||||
// Determina si un usuario puede hacer algo no en base a los permisos
|
||||
const can = (permission) => hasPermission(`events.${permission}`)
|
||||
|
||||
export {
|
||||
can,
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
@ -1,210 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Selectable from '@Holos/Form/Selectable.vue';
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
|
||||
/** Definiciones */
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
petty_cash_id: '',
|
||||
budget_items: [
|
||||
{
|
||||
id: 1,
|
||||
concept: '',
|
||||
amount: ''
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const pettyCashes = ref([]);
|
||||
let nextId = 2;
|
||||
|
||||
// Computed para calcular el total
|
||||
const totalBudget = computed(() => {
|
||||
return form.budget_items.reduce((total, item) => {
|
||||
return total + (parseFloat(item.amount) || 0);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Función para agregar nueva fila
|
||||
const addBudgetItem = () => {
|
||||
form.budget_items.push({
|
||||
id: nextId++,
|
||||
concept: '',
|
||||
amount: 0
|
||||
});
|
||||
};
|
||||
|
||||
// Función para eliminar fila
|
||||
const removeBudgetItem = (id) => {
|
||||
if (form.budget_items.length > 1) {
|
||||
form.budget_items = form.budget_items.filter(item => item.id !== id);
|
||||
}
|
||||
};
|
||||
|
||||
// Función para guardar presupuesto
|
||||
function submit() {
|
||||
// Filtrar elementos vacíos
|
||||
const validItems = form.budget_items.filter(item =>
|
||||
item.concept.trim() !== '' && item.amount > 0
|
||||
);
|
||||
|
||||
if (validItems.length === 0) {
|
||||
Notify.error('Por favor, agrega al menos un elemento al presupuesto');
|
||||
return;
|
||||
}
|
||||
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
petty_cash_id: form.petty_cash_id?.id,
|
||||
budget_items: validItems
|
||||
})).post(apiTo('store-budget', { pettyCash: form.petty_cash_id }), {
|
||||
onSuccess: () => {
|
||||
Notify.success('Presupuesto guardado correctamente');
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.catalog({
|
||||
'pettyCash:all': null
|
||||
}, {
|
||||
onSuccess: (r) => pettyCashes.value = r['pettyCash:all'] ?? []
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
title="Asignación de Presupuesto"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm">Gestiona y asigna el presupuesto para una caja chica</p>
|
||||
</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 -->
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
|
||||
<!-- Campos principales -->
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<Selectable
|
||||
v-model="form.petty_cash_id"
|
||||
id="petty_cash_id"
|
||||
title="Caja Chica"
|
||||
:onError="form.errors.petty_cash_id"
|
||||
:options="pettyCashes"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Filas de presupuesto -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-primary-dt">Elementos del Presupuesto</h3>
|
||||
<div
|
||||
v-for="(item, index) in form.budget_items"
|
||||
:key="item.id"
|
||||
class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end"
|
||||
>
|
||||
|
||||
<!-- Campo Concepto -->
|
||||
<div class="md:col-span-5">
|
||||
<Input
|
||||
v-model="item.concept"
|
||||
:id="`concept_${item.id}`"
|
||||
title="Concepto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Campo Monto -->
|
||||
<div class="md:col-span-4">
|
||||
<Input
|
||||
v-model.number="item.amount"
|
||||
:id="`amount_${item.id}`"
|
||||
title="Monto"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Botón de eliminar -->
|
||||
<div class="md:col-span-3 flex justify-end">
|
||||
<IconButton
|
||||
v-if="form.budget_items.length > 1"
|
||||
@click="removeBudgetItem(item.id)"
|
||||
icon="delete"
|
||||
class="text-red-500 hover:text-red-700"
|
||||
:title="$t('delete')"
|
||||
/>
|
||||
</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">
|
||||
${{ totalBudget.toFixed(2) }}
|
||||
</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 -->
|
||||
<IconButton
|
||||
@click="addBudgetItem"
|
||||
icon="add"
|
||||
class="bg-green-600 hover:bg-green-700 text-white"
|
||||
:title="$t('add')"
|
||||
>
|
||||
+ Agregar más
|
||||
</IconButton>
|
||||
|
||||
<!-- Botón Guardar Presupuesto -->
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
:processing="form.processing"
|
||||
>
|
||||
<GoogleIcon class="text-white text-xl mr-2" name="save" />
|
||||
Guardar Presupuesto
|
||||
</PrimaryButton>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@ -1,49 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo, transl } from './Module';
|
||||
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue';
|
||||
import Form from './Form.vue';
|
||||
|
||||
/** Definiciones */
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.post(apiTo('store'), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.create.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
:title="transl('create.title')"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
<Form
|
||||
action="create"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</template>
|
||||
@ -1,57 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { viewTo, apiTo, transl } from './Module';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import Form from './Form.vue'
|
||||
|
||||
/** Definiciones */
|
||||
const vroute = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
id: null,
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.put(apiTo('update', { petty_cash: form.id }), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.edit.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
api.get(apiTo('show', { petty_cash: vroute.params.id }), {
|
||||
onSuccess: (r) => {
|
||||
form.fill(r.petty_cash)
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader :title="transl('edit.title')">
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
<Form
|
||||
action="edit"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</template>
|
||||
@ -1,63 +0,0 @@
|
||||
<script setup>
|
||||
import { transl } from './Module';
|
||||
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'submit'
|
||||
])
|
||||
|
||||
/** Propiedades */
|
||||
defineProps({
|
||||
action: {
|
||||
default: 'create',
|
||||
type: String
|
||||
},
|
||||
form: Object,
|
||||
companies: Array
|
||||
})
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
emit('submit')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
|
||||
<!-- Campos del formulario -->
|
||||
<Input
|
||||
v-model="form.name"
|
||||
id="name"
|
||||
title="name"
|
||||
:onError="form.errors.name"
|
||||
required
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
v-model="form.description"
|
||||
id="description"
|
||||
title="description"
|
||||
:onError="form.errors.description"
|
||||
/>
|
||||
|
||||
<!-- Botón de Enviar -->
|
||||
<div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
|
||||
<PrimaryButton
|
||||
v-text="$t(action)"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,104 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { hasPermission } from '@Plugins/RolePermission';
|
||||
import { getDate } from '@Controllers/DateController';
|
||||
import { can, apiTo, viewTo, transl } from './Module'
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
import SearcherHead from '@Holos/Searcher.vue';
|
||||
import Table from '@Holos/NewTable.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Searcher from '@Holos/Searcher.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const models = ref([]);
|
||||
|
||||
/** Referencias */
|
||||
const showModal = ref(false);
|
||||
const destroyModal = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
onError: () => models.value = []
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('petty_cash.title') }}</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('petty_cash.description') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<RouterLink :to="viewTo({ name: 'create' })">
|
||||
<Adding text="Nueva Caja Chica" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Search Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Searcher @search="(x) => searcher.search(x)">
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- List Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
|
||||
<template #head>
|
||||
<th v-text="$t('name')" />
|
||||
<th v-text="$t('description')" />
|
||||
<th v-text="$t('available_budget')" />
|
||||
<th class="w-32 text-center" v-text="$t('actions')" />
|
||||
</template>
|
||||
|
||||
<template #body="{ items }">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td>{{ model.name }}</td>
|
||||
<td>{{ model.description ?? '-' }}</td>
|
||||
<td>${{ model.available_budget ?? 0 }}</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
|
||||
outline />
|
||||
<RouterLink class="h-fit"
|
||||
:to="viewTo({ name: 'edit', params: { id: model.id } })">
|
||||
<IconButton icon="edit" :title="$t('crud.edit')" outline />
|
||||
</RouterLink>
|
||||
<IconButton icon="delete" :title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)" outline />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<td colspan="5" class="py-12 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="account_balance_wallet" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron cajas chicas</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<ShowView ref="showModal" />
|
||||
|
||||
<DestroyView ref="destroyModal" subtitle="name"
|
||||
:to="(petty_cash) => apiTo('destroy', { petty_cash })" @update="searcher.search()" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,80 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { getDateTime } from '@Controllers/DateController';
|
||||
|
||||
import Header from '@Holos/Modal/Elements/Header.vue';
|
||||
import ShowModal from '@Holos/Modal/Show.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'close',
|
||||
'reload'
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const model = ref(null);
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
function close() {
|
||||
model.value = null;
|
||||
|
||||
emit('close');
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (data) => {
|
||||
model.value = data;
|
||||
modalRef.value.open();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ShowModal
|
||||
ref="modalRef"
|
||||
@close="close"
|
||||
>
|
||||
<div v-if="model">
|
||||
<Header
|
||||
:title="model.name"
|
||||
:subtitle="model.description"
|
||||
/>
|
||||
<div class="flex w-full p-4">
|
||||
<GoogleIcon
|
||||
class="text-xl text-success"
|
||||
name="account_balance_wallet"
|
||||
/>
|
||||
<div class="pl-3">
|
||||
<p class="font-bold text-lg leading-none pb-2">
|
||||
{{ $t('details') }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('name') }}: </b>
|
||||
{{ model.name }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('description') }}: </b>
|
||||
{{ model.description }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('available_budget') }}: </b>
|
||||
${{ model.available_budget ?? 0 }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('created_at') }}: </b>
|
||||
{{ getDateTime(model.created_at) }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('updated_at') }}: </b>
|
||||
{{ getDateTime(model.updated_at) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ShowModal>
|
||||
</template>
|
||||
@ -1,21 +0,0 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`admin.petty-cashes.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.events.pettyCashes.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`pettyCashes.${str}`)
|
||||
|
||||
// Determina si un usuario puede hacer algo no en base a los permisos
|
||||
const can = (permission) => hasPermission(`pettyCashes.${permission}`)
|
||||
|
||||
export {
|
||||
can,
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
@ -1,102 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { hasPermission } from '@Plugins/RolePermission';
|
||||
import { getDate } from '@Controllers/DateController';
|
||||
import { can, apiTo, viewTo, transl } from './Module'
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
import SearcherHead from '@Holos/Searcher.vue';
|
||||
import Table from '@Holos/NewTable.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Searcher from '@Holos/Searcher.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const models = ref([]);
|
||||
|
||||
/** Referencias */
|
||||
const showModal = ref(false);
|
||||
const destroyModal = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
onError: () => models.value = []
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('reports.title') }}</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('reports.description') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Searcher @search="(x) => searcher.search(x)">
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- List Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
|
||||
<template #head>
|
||||
<th v-text="$t('created_at')" />
|
||||
<th v-text="$t('event_name')" />
|
||||
<th v-text="$t('cost')" />
|
||||
<th v-text="$t('petty_cash.title')" />
|
||||
<th class="w-32 text-center" v-text="$t('actions')" />
|
||||
</template>
|
||||
|
||||
<template #body="{ items }">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td>{{ model.created_at ? getDate(model.created_at) : '-' }}</td>
|
||||
<td>{{ model.event_name }}</td>
|
||||
<td>
|
||||
<div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
|
||||
${{ model.cost }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ model.petty_cash?.name }}</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
|
||||
outline />
|
||||
<IconButton icon="delete" :title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)" outline />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<td colspan="4" class="py-12 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="receipt_long" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron justificaciones</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<ShowView ref="showModal" />
|
||||
|
||||
<DestroyView ref="destroyModal" subtitle="event_name"
|
||||
:to="(expenseJustification) => apiTo('destroy-expense-justification', { expenseJustification })" @update="searcher.search()" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,58 +0,0 @@
|
||||
<script setup>
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useForm } from '@Services/Api';
|
||||
import { apiTo, transl, viewTo } from './Module';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import FormCertification from './FormCertification.vue';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
name: '',
|
||||
description: '',
|
||||
institution: '',
|
||||
date_obtained: '',
|
||||
date_expiration: '',
|
||||
number: '',
|
||||
user_id: route.params.id || '',
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.post(apiTo('store-certificate'), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.create.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
:title="transl('create.certification.title')"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm" v-text="transl('create.certification.description')" />
|
||||
</div>
|
||||
|
||||
<FormCertification
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</template>
|
||||
@ -1,82 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, transl, viewTo } from './Module';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import Selectable from '@Holos/Form/Selectable.vue';
|
||||
import FormRecord from './FormRecord.vue';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
title: '',
|
||||
institution: '',
|
||||
date_obtained: '',
|
||||
degree_type_ek: '',
|
||||
user_id: route.params.id || '',
|
||||
// file_path: null,
|
||||
});
|
||||
|
||||
const degreeTypes = ref([]);
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
degree_type_ek: form.degree_type_ek?.id
|
||||
})).post(apiTo('store-record'), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.create.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.catalog({
|
||||
'degreeType:all': null,
|
||||
},
|
||||
{
|
||||
onSuccess: (r) => {
|
||||
degreeTypes.value = r['degreeType:all'] ?? [];
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
:title="transl('create.record.title')"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm" v-text="transl('create.record.description')" />
|
||||
</div>
|
||||
<FormRecord
|
||||
:degreeTypes="degreeTypes"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
>
|
||||
<Selectable
|
||||
v-model="form.degree_type_ek"
|
||||
title="degreeType"
|
||||
:options="degreeTypes"
|
||||
/>
|
||||
</FormRecord>
|
||||
</template>
|
||||
@ -1,75 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, transl, viewTo } from './Module';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import FormCertification from './FormCertification.vue';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
const vroute = useRoute();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
name: '',
|
||||
description: '',
|
||||
institution: '',
|
||||
date_obtained: '',
|
||||
date_expiration: '',
|
||||
number: '',
|
||||
user_id: vroute.params.id || '',
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.put(apiTo('update-certificate', { certificate: vroute.params.certification }), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.edit.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(apiTo('show-certificate', { certificate: vroute.params.certification }), {
|
||||
onSuccess: (r) => {
|
||||
form.fill(r.certificate)
|
||||
if (r.certificate.date_obtained) {
|
||||
form.date_obtained = new Date(r.certificate.date_obtained).toISOString().split('T')[0]
|
||||
}
|
||||
if (r.certificate.date_expiration) {
|
||||
form.date_expiration = new Date(r.certificate.date_expiration).toISOString().split('T')[0]
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
:title="transl('edit.certification.title')"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm" v-text="transl('edit.certification.description')" />
|
||||
</div>
|
||||
<FormCertification
|
||||
action="update"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</template>
|
||||
@ -1,97 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, transl, viewTo } from './Module';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import Selectable from '@Holos/Form/Selectable.vue';
|
||||
import FormRecord from './FormRecord.vue';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
const vroute = useRoute();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
title: '',
|
||||
institution: '',
|
||||
date_obtained: '',
|
||||
degree_type_ek: '',
|
||||
user_id: vroute.params.id || '',
|
||||
// file_path: null,
|
||||
});
|
||||
|
||||
const degreeTypes = ref([]);
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
degree_type_ek: form.degree_type_ek?.id
|
||||
})).put(apiTo('update-record', { academicRecord: vroute.params.record }), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.edit.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function fillForm() {
|
||||
api.get(apiTo('show-record', { academicRecord: vroute.params.record }), {
|
||||
onSuccess: (r) => {
|
||||
form.fill(r.academic_record)
|
||||
form.degree_type_ek = degreeTypes.value.find(type => type.name == form.degree_type_ek)
|
||||
if (r.academic_record.date_obtained) {
|
||||
form.date_obtained = new Date(r.academic_record.date_obtained).toISOString().split('T')[0]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.catalog({
|
||||
'degreeType:all': null,
|
||||
},
|
||||
{
|
||||
onSuccess: (r) => {
|
||||
degreeTypes.value = r['degreeType:all'] ?? [];
|
||||
// De esta manera se puede rellenar el form con el degree_type_ek del catalogo
|
||||
fillForm();
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
:title="transl('edit.record.title')"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm" v-text="transl('edit.record.description')" />
|
||||
</div>
|
||||
<FormRecord
|
||||
:degreeTypes="degreeTypes"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
>
|
||||
<Selectable
|
||||
action="update"
|
||||
v-model="form.degree_type_ek"
|
||||
title="degreeType"
|
||||
:options="degreeTypes"
|
||||
/>
|
||||
</FormRecord>
|
||||
</template>
|
||||
@ -1,76 +0,0 @@
|
||||
<script setup>
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
|
||||
const emit = defineEmits([
|
||||
'submit'
|
||||
])
|
||||
|
||||
defineProps({
|
||||
action: {
|
||||
default: 'create',
|
||||
type: String
|
||||
},
|
||||
form: Object
|
||||
})
|
||||
|
||||
const submit = () => {
|
||||
emit('submit')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<Input
|
||||
v-model="form.name"
|
||||
id="name"
|
||||
:onError="form.errors.name"
|
||||
autofocus
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.institution"
|
||||
id="institution"
|
||||
:onError="form.errors.institution"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.number"
|
||||
id="number"
|
||||
:onError="form.errors.number"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.date_obtained"
|
||||
id="date_obtained"
|
||||
:onError="form.errors.date_obtained"
|
||||
type="date"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.date_expiration"
|
||||
id="date_expiration"
|
||||
:onError="form.errors.date_expiration"
|
||||
type="date"
|
||||
/>
|
||||
<div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4">
|
||||
<Textarea
|
||||
v-model="form.description"
|
||||
id="description"
|
||||
:onError="form.errors.description"
|
||||
rows="4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
|
||||
<PrimaryButton
|
||||
v-text="$t('create')"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,64 +0,0 @@
|
||||
<script setup>
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import SingleFile from '@Holos/Form/SingleFile.vue';
|
||||
|
||||
const emit = defineEmits([
|
||||
'submit'
|
||||
])
|
||||
|
||||
defineProps({
|
||||
action: {
|
||||
default: 'create',
|
||||
type: String
|
||||
},
|
||||
form: Object
|
||||
})
|
||||
|
||||
const submit = () => {
|
||||
emit('submit')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<Input
|
||||
v-model="form.title"
|
||||
id="title"
|
||||
:onError="form.errors.title"
|
||||
autofocus
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.institution"
|
||||
id="institution"
|
||||
:onError="form.errors.institution"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.date_obtained"
|
||||
id="date_obtained"
|
||||
:onError="form.errors.date_obtained"
|
||||
type="date"
|
||||
required
|
||||
/>
|
||||
<!-- <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4">
|
||||
<SingleFile
|
||||
v-model="form.file_path"
|
||||
title="Archivo"
|
||||
accept="application/pdf,image/png,image/jpeg"
|
||||
/>
|
||||
</div> -->
|
||||
<slot />
|
||||
|
||||
<div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
|
||||
<PrimaryButton
|
||||
v-text="$t('create')"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,151 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { getDate } from '@Controllers/DateController';
|
||||
import { apiTo, viewTo } from './Module'
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Searcher from '@Holos/Searcher.vue';
|
||||
import AcademicRecords from '@Holos/Card/AcademicRecords.vue';
|
||||
import Certifications from '@Holos/Card/Certifications.vue';
|
||||
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const models = ref([]);
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
|
||||
/** Referencias */
|
||||
const destroyRecordModal = ref(false);
|
||||
const destroyCertModal = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
onError: () => models.value = []
|
||||
});
|
||||
|
||||
function openDestroyRecord(record) {
|
||||
destroyRecordModal.value.open(record);
|
||||
}
|
||||
|
||||
function openDestroyCert(cert) {
|
||||
destroyCertModal.value.open(cert);
|
||||
}
|
||||
|
||||
function openEditRecord(record) {
|
||||
router.push(viewTo({ name: 'editRecord', params: { id: record.user_id, record: record.id } }));
|
||||
}
|
||||
|
||||
function openEditCert(cert) {
|
||||
router.push(viewTo({ name: 'editCertification', params: { id: cert.user_id, certification: cert.id } }));
|
||||
}
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Página: Header principal -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Historial Académico</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de grados académicos y certificaciones profesionales</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Searcher @search="(x) => searcher.search(x)">
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- Cards principales: una por usuario -->
|
||||
<section
|
||||
v-for="user in models.data"
|
||||
:key="user.id"
|
||||
class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||
>
|
||||
<!-- Perfil -->
|
||||
<header class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
|
||||
<!-- icono usuario -->
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="school"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">{{ user.full_name }}</h2>
|
||||
<p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información académica y certificaciones profesionales</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Secciones: Grados Académicos -->
|
||||
<AcademicRecords
|
||||
:records="user.academic_records || []"
|
||||
@destroy="openDestroyRecord"
|
||||
@edit="openEditRecord"
|
||||
/>
|
||||
|
||||
<!-- Secciones: Certificaciones -->
|
||||
<Certifications
|
||||
:certifications="user.certificates || []"
|
||||
@destroy="openDestroyCert"
|
||||
@edit="openEditCert"
|
||||
/>
|
||||
|
||||
<!-- Acciones al final de la tarjeta -->
|
||||
<div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
|
||||
<RouterLink :to="viewTo({ name: 'createRecord', params: { id: user.id } })" class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="add"
|
||||
/>
|
||||
Agregar Grado
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink :to="viewTo({ name: 'createCertification', params: { id: user.id } })" class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<GoogleIcon
|
||||
class="text-black dark:text-primary-dt text-xl"
|
||||
name="add"
|
||||
/>
|
||||
Agregar Certificación
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Estado vacío general -->
|
||||
<div v-if="models.length === 0" class="mt-6 py-12 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron usuarios</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales de eliminación -->
|
||||
<DestroyView
|
||||
ref="destroyRecordModal"
|
||||
subtitle="title"
|
||||
:to="(academicRecord) => apiTo('destroy-record', { academicRecord })"
|
||||
@update="searcher.search()"
|
||||
/>
|
||||
|
||||
<DestroyView
|
||||
ref="destroyCertModal"
|
||||
subtitle="name"
|
||||
:to="(certificate) => apiTo('destroy-certificate', { certificate })"
|
||||
@update="searcher.search()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,21 +0,0 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`admin.users.academic.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.users.academic.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`users.academic.${str}`)
|
||||
|
||||
// Determina si un usuario puede hacer algo no en base a los permisos
|
||||
const can = (permission) => hasPermission(`users.academic.${permission}`)
|
||||
|
||||
export {
|
||||
can,
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
@ -20,21 +20,17 @@ const form = useForm({
|
||||
maternal: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
hire_date: '',
|
||||
password: '',
|
||||
roles: [],
|
||||
department_id: '',
|
||||
roles: []
|
||||
});
|
||||
|
||||
const roles = ref([]);
|
||||
const departments = ref([]);
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
roles: data.roles.map(role => role.id),
|
||||
department_id: data.department_id?.id
|
||||
roles: data.roles.map(role => role.id)
|
||||
})).post(apiTo('store'), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.create.onSuccess'))
|
||||
@ -50,15 +46,6 @@ onMounted(() => {
|
||||
roles.value = r.roles;
|
||||
}
|
||||
});
|
||||
|
||||
api.catalog({
|
||||
'department:all': null,
|
||||
},
|
||||
{
|
||||
onSuccess: (r) => {
|
||||
departments.value = r['department:all'] ?? [];
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -95,10 +82,5 @@ onMounted(() => {
|
||||
:options="roles"
|
||||
multiple
|
||||
/>
|
||||
<Selectable
|
||||
v-model="form.department_id"
|
||||
title="Departamento"
|
||||
:options="departments"
|
||||
/>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { viewTo, apiTo , transl } from './Module';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import Selectable from '@Holos/Form/Selectable.vue';
|
||||
import Form from './Form.vue'
|
||||
|
||||
/** Definiciones */
|
||||
@ -20,19 +19,12 @@ const form = useForm({
|
||||
paternal: '',
|
||||
maternal: '',
|
||||
email: '',
|
||||
hire_date: '',
|
||||
phone: '',
|
||||
department_id: '',
|
||||
});
|
||||
|
||||
const departments = ref([]);
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
department_id: data.department_id?.id
|
||||
})).put(apiTo('update', { user: form.id }), {
|
||||
form.put(apiTo('update', { user: form.id }), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.edit.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
@ -42,24 +34,8 @@ function submit() {
|
||||
|
||||
onMounted(() => {
|
||||
api.get(apiTo('show', { user: vroute.params.id }), {
|
||||
onSuccess: (r) => {
|
||||
form.fill(r.user)
|
||||
form.department_id = r.user.department
|
||||
if (r.user.hire_date) {
|
||||
form.hire_date = new Date(r.user.hire_date).toISOString().split('T')[0]
|
||||
}
|
||||
}
|
||||
onSuccess: (r) => form.fill(r.user)
|
||||
});
|
||||
|
||||
api.catalog({
|
||||
'department:all': null,
|
||||
},
|
||||
{
|
||||
onSuccess: (r) => {
|
||||
departments.value = r['department:all'] ?? [];
|
||||
}
|
||||
}
|
||||
);
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -78,11 +54,5 @@ onMounted(() => {
|
||||
action="update"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
>
|
||||
<Selectable
|
||||
v-model="form.department_id"
|
||||
title="Departamento"
|
||||
:options="departments"
|
||||
/>
|
||||
</Form>
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -61,13 +61,6 @@ function submit() {
|
||||
:onError="form.errors.email"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.hire_date"
|
||||
id="hire_date"
|
||||
:onError="form.errors.hire_date"
|
||||
type="date"
|
||||
required
|
||||
/>
|
||||
<slot />
|
||||
<div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
|
||||
<PrimaryButton
|
||||
|
||||
@ -2,24 +2,19 @@
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { hasPermission } from '@Plugins/RolePermission';
|
||||
import { getDate } from '@Controllers/DateController';
|
||||
import { can, apiTo, viewTo, transl } from './Module'
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
import SearcherHead from '@Holos/Searcher.vue';
|
||||
import Table from '@Holos/NewTable.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Searcher from '@Holos/Searcher.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
import Table from '@Holos/Table.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const models = ref([]);
|
||||
|
||||
/** Referencias */
|
||||
const showModal = ref(false);
|
||||
const showModal = ref(false);
|
||||
const destroyModal = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
@ -36,86 +31,146 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('users.title') }}</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('users.description') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<RouterLink :to="viewTo({ name: 'create' })">
|
||||
<Adding text="Nuevo Empleado" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Search Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Searcher @search="(x) => searcher.search(x)">
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- List Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
|
||||
<template #head>
|
||||
<th v-text="$t('name')" />
|
||||
<th v-text="$t('department')" />
|
||||
<th v-text="$t('headquarter')" />
|
||||
<th v-text="$t('hire_date')" />
|
||||
<th v-text="$t('status')" />
|
||||
<th class="w-32 text-center" v-text="$t('actions')" />
|
||||
</template>
|
||||
|
||||
<template #body="{ items }">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td>{{ model.full_name }}</td>
|
||||
<td>{{ model.department?.name }}</td>
|
||||
<td>{{ model.headquarter }}</td>
|
||||
<td>{{ model.hire_date ? getDate(model.hire_date) : '-' }}</td>
|
||||
<td class="py-6">
|
||||
<span
|
||||
class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">
|
||||
{{ model.status_ek }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
|
||||
outline />
|
||||
<RouterLink v-if="can('edit')" class="h-fit"
|
||||
:to="viewTo({ name: 'edit', params: { id: model.id } })">
|
||||
<IconButton icon="edit" :title="$t('crud.edit')" outline />
|
||||
</RouterLink>
|
||||
<IconButton v-if="can('destroy')" icon="delete" :title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)" outline />
|
||||
<RouterLink v-if="can('settings')" class="h-fit"
|
||||
:to="viewTo({ name: 'settings', params: { id: model.id } })">
|
||||
<IconButton icon="settings" :title="$t('setting')" />
|
||||
</RouterLink>
|
||||
<RouterLink v-if="hasPermission('activities.index')" class="h-fit"
|
||||
:to="$view({ name: 'admin.activities.index', query: { user: model.id } })">
|
||||
<IconButton icon="timeline" :title="$t('activity')" />
|
||||
</RouterLink>
|
||||
<div>
|
||||
<SearcherHead
|
||||
:title="transl('title')"
|
||||
@search="(x) => searcher.search(x)"
|
||||
>
|
||||
<RouterLink
|
||||
v-if="can('create')"
|
||||
:to="viewTo({ name: 'create' })"
|
||||
>
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="add"
|
||||
:title="$t('crud.create')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
<IconButton
|
||||
icon="refresh"
|
||||
:title="$t('refresh')"
|
||||
@click="searcher.search()"
|
||||
/>
|
||||
</SearcherHead>
|
||||
<div class="pt-2 w-full">
|
||||
<Table
|
||||
:items="models"
|
||||
:processing="searcher.processing"
|
||||
@send-pagination="(page) => searcher.pagination(page)"
|
||||
>
|
||||
<template #head>
|
||||
<th v-text="$t('user')" />
|
||||
<th v-text="$t('contact')" />
|
||||
<th
|
||||
v-text="$t('actions')"
|
||||
class="w-32 text-center"
|
||||
/>
|
||||
</template>
|
||||
<template #body="{items}">
|
||||
<tr
|
||||
v-for="model in items"
|
||||
class="table-row"
|
||||
>
|
||||
<td class="table-cell">
|
||||
{{ `${model.name} ${model.paternal}` }}
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<p>
|
||||
<a
|
||||
class="hover:underline"
|
||||
target="_blank"
|
||||
:href="`mailto:${model.email}`"
|
||||
>
|
||||
{{ model.email }}
|
||||
</a>
|
||||
</p>
|
||||
<p v-if="model.phone" class="font-semibold text-xs">
|
||||
<b>Teléfono: </b>
|
||||
<span
|
||||
class="hover:underline"
|
||||
target="_blank"
|
||||
:href="`tel:${model.phone}`"
|
||||
>
|
||||
{{ model.phone }}
|
||||
</span>
|
||||
</p>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<div class="table-actions">
|
||||
<IconButton
|
||||
icon="visibility"
|
||||
:title="$t('crud.show')"
|
||||
@click="showModal.open(model)"
|
||||
outline
|
||||
/>
|
||||
<RouterLink
|
||||
v-if="can('edit')"
|
||||
class="h-fit"
|
||||
:to="viewTo({ name: 'edit', params: { id: model.id } })"
|
||||
>
|
||||
<IconButton
|
||||
icon="edit"
|
||||
:title="$t('crud.edit')"
|
||||
outline
|
||||
/>
|
||||
</RouterLink>
|
||||
<IconButton
|
||||
v-if="can('destroy')"
|
||||
icon="delete"
|
||||
:title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)"
|
||||
outline
|
||||
/>
|
||||
<RouterLink
|
||||
v-if="can('settings')"
|
||||
class="h-fit"
|
||||
:to="viewTo({ name: 'settings', params: { id: model.id } })"
|
||||
>
|
||||
<IconButton
|
||||
icon="settings"
|
||||
:title="$t('setting')"
|
||||
/>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
v-if="hasPermission('activities.index')"
|
||||
class="h-fit"
|
||||
:to="$view({ name: 'admin.activities.index', query: { user: model.id } })"
|
||||
>
|
||||
<IconButton
|
||||
icon="timeline"
|
||||
:title="$t('activity')"
|
||||
/>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template #empty>
|
||||
<td class="table-cell">
|
||||
<div class="flex items-center text-sm">
|
||||
<p class="font-semibold">
|
||||
{{ $t('registers.empty') }}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<td class="table-cell">-</td>
|
||||
<td class="table-cell">-</td>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<ShowView
|
||||
ref="showModal"
|
||||
/>
|
||||
|
||||
<template #empty>
|
||||
<td colspan="6" class="py-12 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron empleados</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<ShowView ref="showModal" />
|
||||
|
||||
<DestroyView v-if="can('destroy')" ref="destroyModal" subtitle="last_name"
|
||||
:to="(user) => apiTo('destroy', { user })" @update="searcher.search()" />
|
||||
<DestroyView
|
||||
v-if="can('destroy')"
|
||||
ref="destroyModal"
|
||||
subtitle="last_name"
|
||||
:to="(user) => apiTo('destroy', { user })"
|
||||
@update="searcher.search()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,214 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue';
|
||||
|
||||
/** Definiciones */
|
||||
const router = useRouter();
|
||||
const vroute = useRoute();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
users: [],
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
exam_date: '',
|
||||
});
|
||||
|
||||
const course = ref(null);
|
||||
const users = ref([]);
|
||||
|
||||
// Computed para contar usuarios seleccionados
|
||||
const selectedUsersCount = computed(() => {
|
||||
return users.value.filter(u => u.selected).length;
|
||||
});
|
||||
|
||||
// Funciones
|
||||
const toggleUser = (user) => {
|
||||
user.selected = !user.selected;
|
||||
};
|
||||
|
||||
const selectAllUsers = () => {
|
||||
const allSelected = users.value.every(u => u.selected);
|
||||
users.value.forEach(u => u.selected = !allSelected);
|
||||
};
|
||||
|
||||
// Función para calcular la fecha final del curso
|
||||
const calculateEndDate = () => {
|
||||
if (form.start_date && course.value?.duration) {
|
||||
const startDate = new Date(form.start_date);
|
||||
const duration = parseInt(course.value.duration);
|
||||
|
||||
// Agregar la duración en días a la fecha de inicio
|
||||
const endDate = new Date(startDate);
|
||||
endDate.setDate(startDate.getDate() + duration);
|
||||
|
||||
// Formatear la fecha como YYYY-MM-DD para el input
|
||||
const formattedDate = endDate.toISOString().split('T')[0];
|
||||
form.end_date = formattedDate;
|
||||
}
|
||||
};
|
||||
|
||||
// Watcher para calcular automáticamente la fecha final cuando cambie la fecha de inicio
|
||||
watch(() => form.start_date, () => {
|
||||
calculateEndDate();
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
users: users.value.filter(u => u.selected).map(u => u.id)
|
||||
})).post(apiTo('assign-course', { course: vroute.params.id }), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.assign.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(apiTo('show', { course: vroute.params.id }), {
|
||||
onSuccess: (r) => {
|
||||
course.value = r.course
|
||||
users.value = r.course.users ?? []
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
title="Asignación de Cursos a Personal"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm">Asigna cursos aprobados al personal seleccionado</p>
|
||||
</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">
|
||||
|
||||
<!-- Información del Curso -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Curso Seleccionado
|
||||
</label>
|
||||
|
||||
<div v-if="course" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg dark:bg-primary-d dark:border-primary/20">
|
||||
<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.department?.name }} • {{ course.cost }} {{ course.cost_currency }}
|
||||
</div>
|
||||
<div v-if="course.description" class="text-sm text-gray-600 dark:text-primary-dt/80 mt-1">
|
||||
{{ course.description }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg dark:bg-primary-d dark:border-primary/20">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">Cargando información del curso...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asignación de Usuarios -->
|
||||
<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 usuarios
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
@click="selectAllUsers"
|
||||
class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
|
||||
>
|
||||
{{ users.every(u => u.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="user in users"
|
||||
:key="user.id"
|
||||
@click="toggleUser(user)"
|
||||
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="user.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="toggleUser(user)"
|
||||
>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
|
||||
{{ user.name }} {{ user.paternal }} {{ user.maternal }}
|
||||
</label>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/70">
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
{{ selectedUsersCount }} usuario(s) seleccionado(s)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fechas -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<Input
|
||||
v-model="form.start_date"
|
||||
id="start_date"
|
||||
title="dates.start"
|
||||
type="date"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.end_date"
|
||||
id="end_date"
|
||||
title="dates.end"
|
||||
type="date"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.exam_date"
|
||||
id="exam_date"
|
||||
title="exam_date"
|
||||
type="date"
|
||||
/>
|
||||
</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="submit"
|
||||
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>
|
||||
</template>
|
||||
@ -1,124 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module'
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
import Table from '@Holos/NewTable.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Searcher from '@Holos/Searcher.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const models = ref([]);
|
||||
|
||||
/** Referencias */
|
||||
const showModal = ref(false);
|
||||
const destroyModal = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
onError: () => models.value = []
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('courses.title') }}</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Searcher @search="(x) => searcher.search(x)">
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- List Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
|
||||
<template #head>
|
||||
<th v-text="$t('department')" />
|
||||
<th v-text="$t('name')" />
|
||||
<th v-text="$t('cost')" />
|
||||
<th v-text="$t('url')" />
|
||||
<th v-text="$t('status')" />
|
||||
<th class="w-32 text-center" v-text="$t('actions')" />
|
||||
</template>
|
||||
|
||||
<template #body="{ items }">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td>
|
||||
<span class="inline-block bg-blue-100 text-blue-800 text-sm py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
|
||||
{{ model.department.name }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ model.name }}</td>
|
||||
<td>{{ model.cost }} {{ model.cost_currency }}</td>
|
||||
<td>
|
||||
<a
|
||||
v-if="model.url"
|
||||
:href="model.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>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
<td class="py-6">
|
||||
<span
|
||||
class="inline-block py-1 rounded-full text-xs font-semibold"
|
||||
:class="{
|
||||
'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
|
||||
'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
|
||||
'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
|
||||
}">
|
||||
{{ model.status_ek }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
|
||||
outline />
|
||||
<RouterLink class="h-fit"
|
||||
:to="viewTo({ name: 'assignamment', params: { id: model.id } })">
|
||||
<IconButton icon="task_alt" :title="$t('crud.approve')" outline />
|
||||
</RouterLink>
|
||||
<IconButton icon="delete" :title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)" outline />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<td colspan="6" class="py-12 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron cursos</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<ShowView ref="showModal" />
|
||||
|
||||
<DestroyView ref="destroyModal" subtitle="certification_type"
|
||||
:to="(course) => apiTo('destroy', { course })" @update="searcher.search()" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,114 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { getDateTime } from '@Controllers/DateController';
|
||||
|
||||
import Header from '@Holos/Modal/Elements/Header.vue';
|
||||
import ShowModal from '@Holos/Modal/Show.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'close',
|
||||
'reload'
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const model = ref(null);
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
function close() {
|
||||
model.value = null;
|
||||
|
||||
emit('close');
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (data) => {
|
||||
model.value = data;
|
||||
modalRef.value.open();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ShowModal
|
||||
ref="modalRef"
|
||||
@close="close"
|
||||
>
|
||||
<div v-if="model">
|
||||
<Header
|
||||
:title="model.name"
|
||||
:subtitle="model.certification_type"
|
||||
>
|
||||
</Header>
|
||||
<div class="flex w-full p-4">
|
||||
<GoogleIcon
|
||||
class="text-xl text-success"
|
||||
name="school"
|
||||
/>
|
||||
<div class="pl-3">
|
||||
<p class="font-bold text-lg leading-none pb-2">
|
||||
{{ $t('details') }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('name') }}: </b>
|
||||
{{ model.name }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('certification_type') }}: </b>
|
||||
{{ model.certification_type ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('cost') }}: </b>
|
||||
{{ model.cost }} {{ model.cost_currency }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('duration') }}: </b>
|
||||
{{ model.duration ?? '-' }} días
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('description') }}: </b>
|
||||
{{ model.description ?? '-' }}
|
||||
</p>
|
||||
<p v-if="model.url">
|
||||
<b>{{ $t('url') }}: </b>
|
||||
<a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
|
||||
{{ model.url }}
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('certification_name') }}: </b>
|
||||
{{ model.certification_name ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('status') }}: </b>
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
|
||||
:class="{
|
||||
'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
|
||||
'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
|
||||
'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
|
||||
}">
|
||||
{{ model.status_ek }}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('department') }}: </b>
|
||||
{{ model.department?.name ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('created_at') }}: </b>
|
||||
{{ getDateTime(model.created_at) }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('updated_at') }}: </b>
|
||||
{{ getDateTime(model.updated_at) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ShowModal>
|
||||
</template>
|
||||
@ -1,21 +0,0 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`courses.admin.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.courses.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`courses.${str}`)
|
||||
|
||||
// Determina si un usuario puede hacer algo no en base a los permisos
|
||||
const can = (permission) => hasPermission(`courses.${permission}`)
|
||||
|
||||
export {
|
||||
can,
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
@ -1,268 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
import Selectable from '@Holos/Form/Selectable.vue';
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
|
||||
/** Definiciones */
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
name: '',
|
||||
cost: '',
|
||||
cost_currency: '',
|
||||
description: '',
|
||||
certification_name: '',
|
||||
certification_type: '',
|
||||
duration: '',
|
||||
url: '',
|
||||
department_id: '',
|
||||
users: []
|
||||
});
|
||||
|
||||
// Lista de departamentos y usuarios
|
||||
const departments = ref([]);
|
||||
const users = ref([]);
|
||||
const currencies = ref([]);
|
||||
|
||||
// Computed para contar usuarios seleccionados
|
||||
const selectedUsersCount = computed(() => {
|
||||
return users.value.filter(u => u.selected).length;
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
department_id: form.department_id?.id,
|
||||
cost_currency: form.cost_currency?.id,
|
||||
users: users.value.filter(u => u.selected).map(u => u.id)
|
||||
})).post(apiTo('store'), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.create.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Función para cargar usuarios cuando se seleccione un departamento
|
||||
const loadUsersByDepartment = () => {
|
||||
api.catalog({
|
||||
'user:byDepartment': form.department_id?.id
|
||||
}, {
|
||||
onSuccess: (r) => users.value = r['user:byDepartment'] ?? []
|
||||
});
|
||||
};
|
||||
|
||||
// Funciones para manejar selección de usuarios
|
||||
const toggleUser = (user) => {
|
||||
user.selected = !user.selected;
|
||||
};
|
||||
|
||||
const selectAllUsers = () => {
|
||||
const allSelected = users.value.every(u => u.selected);
|
||||
users.value.forEach(u => u.selected = !allSelected);
|
||||
};
|
||||
|
||||
// Watcher para cargar usuarios automáticamente cuando cambie el departamento
|
||||
watch(() => form.department_id, () => {
|
||||
loadUsersByDepartment();
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.catalog({
|
||||
'department:all': null,
|
||||
'currency:all': null
|
||||
}, {
|
||||
onSuccess: (r) => {
|
||||
departments.value = r['department:all'] ?? []
|
||||
currencies.value = r['currency:all'] ?? []
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
title="Solicitud de Nuevo Curso"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm">Completa la información para solicitar un nuevo curso de capacitación</p>
|
||||
</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="submit" 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">
|
||||
<Input
|
||||
v-model="form.name"
|
||||
id="name"
|
||||
title="name"
|
||||
:onError="form.errors.name"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.cost"
|
||||
id="cost"
|
||||
title="cost"
|
||||
:onError="form.errors.cost"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
required
|
||||
/>
|
||||
<Selectable
|
||||
v-model="form.cost_currency"
|
||||
id="cost_currency"
|
||||
title="currency"
|
||||
:onError="form.errors.cost_currency"
|
||||
:options="currencies"
|
||||
/>
|
||||
<Textarea
|
||||
v-model="form.description"
|
||||
id="description"
|
||||
title="description"
|
||||
:onError="form.errors.description"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.certification_name"
|
||||
id="certification_name"
|
||||
title="certification_name"
|
||||
:onError="form.errors.certification_name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Columna derecha -->
|
||||
<div class="space-y-6">
|
||||
<Selectable
|
||||
v-model="form.department_id"
|
||||
id="department_id"
|
||||
title="department"
|
||||
:onError="form.errors.department_id"
|
||||
:options="departments"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.certification_type"
|
||||
id="certification_type"
|
||||
title="certification_type"
|
||||
:onError="form.errors.certification_type"
|
||||
/>
|
||||
<Input
|
||||
v-model="form.duration"
|
||||
id="duration"
|
||||
title="duration"
|
||||
:onError="form.errors.duration"
|
||||
type="number"
|
||||
min="1"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.url"
|
||||
id="url"
|
||||
title="url"
|
||||
:onError="form.errors.url"
|
||||
type="url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sección de Personal a Capacitar -->
|
||||
<div class="mt-8">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
|
||||
Personal a capacitar
|
||||
</label>
|
||||
<button
|
||||
v-if="users.length > 0"
|
||||
type="button"
|
||||
@click="selectAllUsers"
|
||||
class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
|
||||
>
|
||||
{{ users.every(u => u.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="users.length > 0" 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="user in users"
|
||||
:key="user.id"
|
||||
@click="toggleUser(user)"
|
||||
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="user.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="toggleUser(user)"
|
||||
>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
|
||||
{{ user.name }} {{ user.paternal }} {{ user.maternal }}
|
||||
</label>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/70">
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="border border-gray-300 rounded-lg p-4 dark:bg-primary-d dark:border-primary/20">
|
||||
<div class="text-center text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon class="w-8 h-8 mx-auto mb-2 text-gray-400" name="people" />
|
||||
<p>Selecciona un departamento para ver el personal disponible</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="users.length > 0" class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
{{ selectedUsersCount }} usuario(s) seleccionado(s)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón de Enviar -->
|
||||
<div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
:processing="form.processing"
|
||||
>
|
||||
Enviar Solicitud
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
</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>
|
||||
@ -1,111 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module'
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import Table from '@Holos/NewTable.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Searcher from '@Holos/Searcher.vue';
|
||||
import Adding from '@Holos/Button/ButtonRh.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const models = ref([]);
|
||||
|
||||
/** Referencias */
|
||||
const showModal = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
onError: () => models.value = []
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('courses.title') }}</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
|
||||
</p>
|
||||
</div>
|
||||
<RouterLink :to="viewTo({ name: 'request' })">
|
||||
<Adding text="Nuevo Curso" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Search Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Searcher @search="(x) => searcher.search(x)">
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- List Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
|
||||
<template #head>
|
||||
<th v-text="$t('name')" />
|
||||
<th v-text="$t('cost')" />
|
||||
<th v-text="$t('url')" />
|
||||
<th v-text="$t('status')" />
|
||||
<th class="w-32 text-center" v-text="$t('actions')" />
|
||||
</template>
|
||||
|
||||
<template #body="{ items }">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td>{{ model.name }}</td>
|
||||
<td>{{ model.cost }} {{ model.cost_currency }}</td>
|
||||
<td>
|
||||
<a
|
||||
v-if="model.url"
|
||||
:href="model.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>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
<td class="py-6">
|
||||
<span
|
||||
class="inline-block py-1 rounded-full text-xs font-semibold"
|
||||
:class="{
|
||||
'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
|
||||
'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
|
||||
'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
|
||||
}">
|
||||
{{ model.status_ek }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
|
||||
outline />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<td colspan="6" class="py-12 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron cursos</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<ShowView ref="showModal" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,114 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { getDateTime } from '@Controllers/DateController';
|
||||
|
||||
import Header from '@Holos/Modal/Elements/Header.vue';
|
||||
import ShowModal from '@Holos/Modal/Show.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'close',
|
||||
'reload'
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const model = ref(null);
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
function close() {
|
||||
model.value = null;
|
||||
|
||||
emit('close');
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (data) => {
|
||||
model.value = data;
|
||||
modalRef.value.open();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ShowModal
|
||||
ref="modalRef"
|
||||
@close="close"
|
||||
>
|
||||
<div v-if="model">
|
||||
<Header
|
||||
:title="model.name"
|
||||
:subtitle="model.certification_type"
|
||||
>
|
||||
</Header>
|
||||
<div class="flex w-full p-4">
|
||||
<GoogleIcon
|
||||
class="text-xl text-success"
|
||||
name="school"
|
||||
/>
|
||||
<div class="pl-3">
|
||||
<p class="font-bold text-lg leading-none pb-2">
|
||||
{{ $t('details') }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('name') }}: </b>
|
||||
{{ model.name }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('certification_type') }}: </b>
|
||||
{{ model.certification_type ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('cost') }}: </b>
|
||||
{{ model.cost }} {{ model.cost_currency }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('duration') }}: </b>
|
||||
{{ model.duration ?? '-' }} días
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('description') }}: </b>
|
||||
{{ model.description ?? '-' }}
|
||||
</p>
|
||||
<p v-if="model.url">
|
||||
<b>{{ $t('url') }}: </b>
|
||||
<a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
|
||||
{{ model.url }}
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('certification_name') }}: </b>
|
||||
{{ model.certification_name ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('status') }}: </b>
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
|
||||
:class="{
|
||||
'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
|
||||
'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
|
||||
'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
|
||||
}">
|
||||
{{ model.status_ek }}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('department') }}: </b>
|
||||
{{ model.department?.name ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('created_at') }}: </b>
|
||||
{{ getDateTime(model.created_at) }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('updated_at') }}: </b>
|
||||
{{ getDateTime(model.updated_at) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ShowModal>
|
||||
</template>
|
||||
@ -1,21 +0,0 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`courses.coordinator.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `courses.coordinator.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`courses.${str}`)
|
||||
|
||||
// Determina si un usuario puede hacer algo no en base a los permisos
|
||||
const can = (permission) => hasPermission(`courses.${permission}`)
|
||||
|
||||
export {
|
||||
can,
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
@ -1,268 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
import Selectable from '@Holos/Form/Selectable.vue';
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
|
||||
/** Definiciones */
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
name: '',
|
||||
cost: '',
|
||||
cost_currency: '',
|
||||
description: '',
|
||||
certification_name: '',
|
||||
certification_type: '',
|
||||
duration: '',
|
||||
url: '',
|
||||
department_id: '',
|
||||
users: []
|
||||
});
|
||||
|
||||
// Lista de departamentos y usuarios
|
||||
const departments = ref([]);
|
||||
const users = ref([]);
|
||||
const currencies = ref([]);
|
||||
|
||||
// Computed para contar usuarios seleccionados
|
||||
const selectedUsersCount = computed(() => {
|
||||
return users.value.filter(u => u.selected).length;
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
department_id: form.department_id?.id,
|
||||
cost_currency: form.cost_currency?.id,
|
||||
users: users.value.filter(u => u.selected).map(u => u.id)
|
||||
})).post(apiTo('store'), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.create.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Función para cargar usuarios cuando se seleccione un departamento
|
||||
const loadUsersByDepartment = () => {
|
||||
api.catalog({
|
||||
'user:byDepartment': form.department_id?.id
|
||||
}, {
|
||||
onSuccess: (r) => users.value = r['user:byDepartment'] ?? []
|
||||
});
|
||||
};
|
||||
|
||||
// Funciones para manejar selección de usuarios
|
||||
const toggleUser = (user) => {
|
||||
user.selected = !user.selected;
|
||||
};
|
||||
|
||||
const selectAllUsers = () => {
|
||||
const allSelected = users.value.every(u => u.selected);
|
||||
users.value.forEach(u => u.selected = !allSelected);
|
||||
};
|
||||
|
||||
// Watcher para cargar usuarios automáticamente cuando cambie el departamento
|
||||
watch(() => form.department_id, () => {
|
||||
loadUsersByDepartment();
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.catalog({
|
||||
'department:all': null,
|
||||
'currency:all': null
|
||||
}, {
|
||||
onSuccess: (r) => {
|
||||
departments.value = r['department:all'] ?? []
|
||||
currencies.value = r['currency:all'] ?? []
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
title="Solicitud de Nuevo Curso"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm">Completa la información para solicitar un nuevo curso de capacitación</p>
|
||||
</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="submit" 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">
|
||||
<Input
|
||||
v-model="form.name"
|
||||
id="name"
|
||||
title="name"
|
||||
:onError="form.errors.name"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.cost"
|
||||
id="cost"
|
||||
title="cost"
|
||||
:onError="form.errors.cost"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
required
|
||||
/>
|
||||
<Selectable
|
||||
v-model="form.cost_currency"
|
||||
id="cost_currency"
|
||||
title="currency"
|
||||
:onError="form.errors.cost_currency"
|
||||
:options="currencies"
|
||||
/>
|
||||
<Textarea
|
||||
v-model="form.description"
|
||||
id="description"
|
||||
title="description"
|
||||
:onError="form.errors.description"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.certification_name"
|
||||
id="certification_name"
|
||||
title="certification_name"
|
||||
:onError="form.errors.certification_name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Columna derecha -->
|
||||
<div class="space-y-6">
|
||||
<Selectable
|
||||
v-model="form.department_id"
|
||||
id="department_id"
|
||||
title="department"
|
||||
:onError="form.errors.department_id"
|
||||
:options="departments"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.certification_type"
|
||||
id="certification_type"
|
||||
title="certification_type"
|
||||
:onError="form.errors.certification_type"
|
||||
/>
|
||||
<Input
|
||||
v-model="form.duration"
|
||||
id="duration"
|
||||
title="duration"
|
||||
:onError="form.errors.duration"
|
||||
type="number"
|
||||
min="1"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.url"
|
||||
id="url"
|
||||
title="url"
|
||||
:onError="form.errors.url"
|
||||
type="url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sección de Personal a Capacitar -->
|
||||
<div class="mt-8">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
|
||||
Personal a capacitar
|
||||
</label>
|
||||
<button
|
||||
v-if="users.length > 0"
|
||||
type="button"
|
||||
@click="selectAllUsers"
|
||||
class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
|
||||
>
|
||||
{{ users.every(u => u.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="users.length > 0" 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="user in users"
|
||||
:key="user.id"
|
||||
@click="toggleUser(user)"
|
||||
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="user.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="toggleUser(user)"
|
||||
>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
|
||||
{{ user.name }} {{ user.paternal }} {{ user.maternal }}
|
||||
</label>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/70">
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="border border-gray-300 rounded-lg p-4 dark:bg-primary-d dark:border-primary/20">
|
||||
<div class="text-center text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon class="w-8 h-8 mx-auto mb-2 text-gray-400" name="people" />
|
||||
<p>Selecciona un departamento para ver el personal disponible</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="users.length > 0" class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
{{ selectedUsersCount }} usuario(s) seleccionado(s)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón de Enviar -->
|
||||
<div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
:processing="form.processing"
|
||||
>
|
||||
Enviar Solicitud
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@ -1,93 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { apiTo } from './Module'
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import Table from '@Holos/NewTable.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Searcher from '@Holos/Searcher.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const models = ref([]);
|
||||
|
||||
/** Referencias */
|
||||
const showModal = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
onError: () => models.value = []
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('courses.title') }}</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Searcher @search="(x) => searcher.search(x)">
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- List Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
|
||||
<template #head>
|
||||
<th v-text="$t('name')" />
|
||||
<th v-text="$t('url')" />
|
||||
<th class="w-32 text-center" v-text="$t('actions')" />
|
||||
</template>
|
||||
|
||||
<template #body="{ items }">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td>{{ model.course.name }}</td>
|
||||
<td>
|
||||
<a
|
||||
v-if="model.course.url"
|
||||
:href="model.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>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model.course)"
|
||||
outline />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<td colspan="6" class="py-12 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron cursos</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<ShowView ref="showModal" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,114 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { getDateTime } from '@Controllers/DateController';
|
||||
|
||||
import Header from '@Holos/Modal/Elements/Header.vue';
|
||||
import ShowModal from '@Holos/Modal/Show.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'close',
|
||||
'reload'
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const model = ref(null);
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
function close() {
|
||||
model.value = null;
|
||||
|
||||
emit('close');
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (data) => {
|
||||
model.value = data;
|
||||
modalRef.value.open();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ShowModal
|
||||
ref="modalRef"
|
||||
@close="close"
|
||||
>
|
||||
<div v-if="model">
|
||||
<Header
|
||||
:title="model.name"
|
||||
:subtitle="model.certification_type"
|
||||
>
|
||||
</Header>
|
||||
<div class="flex w-full p-4">
|
||||
<GoogleIcon
|
||||
class="text-xl text-success"
|
||||
name="school"
|
||||
/>
|
||||
<div class="pl-3">
|
||||
<p class="font-bold text-lg leading-none pb-2">
|
||||
{{ $t('details') }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('name') }}: </b>
|
||||
{{ model.name }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('certification_type') }}: </b>
|
||||
{{ model.certification_type ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('cost') }}: </b>
|
||||
{{ model.cost }} {{ model.cost_currency }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('duration') }}: </b>
|
||||
{{ model.duration ?? '-' }} días
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('description') }}: </b>
|
||||
{{ model.description ?? '-' }}
|
||||
</p>
|
||||
<p v-if="model.url">
|
||||
<b>{{ $t('url') }}: </b>
|
||||
<a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
|
||||
{{ model.url }}
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('certification_name') }}: </b>
|
||||
{{ model.certification_name ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('status') }}: </b>
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
|
||||
:class="{
|
||||
'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
|
||||
'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
|
||||
'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
|
||||
}">
|
||||
{{ model.status_ek }}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('department') }}: </b>
|
||||
{{ model.department?.name ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('created_at') }}: </b>
|
||||
{{ getDateTime(model.created_at) }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('updated_at') }}: </b>
|
||||
{{ getDateTime(model.updated_at) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ShowModal>
|
||||
</template>
|
||||
@ -1,21 +0,0 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`courses.employee.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `courses.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`courses.${str}`)
|
||||
|
||||
// Determina si un usuario puede hacer algo no en base a los permisos
|
||||
const can = (permission) => hasPermission(`courses.${permission}`)
|
||||
|
||||
export {
|
||||
can,
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
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>
|
||||
@ -1,150 +1,147 @@
|
||||
<script setup>
|
||||
import { computed, ref, onMounted } from 'vue';
|
||||
import { api } from '@Services/Api';
|
||||
import { apiTo } from './Module';
|
||||
|
||||
import { computed } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import VueApexCharts from 'vue3-apexcharts';
|
||||
|
||||
// Propiedades
|
||||
const adminInfo = ref({});
|
||||
const vacationsCharts = ref({});
|
||||
// Props
|
||||
const props = defineProps({
|
||||
adminInfo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
charts: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
|
||||
// Opciones para gráfica de solicitudes por mes (línea)
|
||||
// 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: true
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: true
|
||||
}
|
||||
background: 'transparent'
|
||||
},
|
||||
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: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + " solicitudes"
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#f1f1f1'
|
||||
theme: 'dark'
|
||||
}
|
||||
}));
|
||||
|
||||
// Series para gráfica de solicitudes por mes
|
||||
const lineChartSeries = computed(() => [{
|
||||
name: 'Solicitudes',
|
||||
data: vacationsCharts.value.requests_by_month?.map(item => item.total_requests) || []
|
||||
}]);
|
||||
const lineChartSeries = computed(() => chartData.value.lineChartSeries);
|
||||
|
||||
// Opciones para gráfica de solicitudes por departamento (donut)
|
||||
// Datos para el gráfico de dona (Solicitudes por Departamento) - Solo para admin
|
||||
const donutChartOptions = computed(() => ({
|
||||
chart: {
|
||||
type: 'donut',
|
||||
height: 350
|
||||
},
|
||||
colors: ['#3B82F6', '#8B5CF6', '#06B6D4', '#10B981', '#F59E0B', '#EF4444', '#EC4899', '#84CC16'],
|
||||
labels: vacationsCharts.value.requests_by_department?.map(item => item.department_name) || [],
|
||||
colors: ['#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#3b82f6', '#f97316'],
|
||||
labels: chartData.value.donutChartLabels,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center'
|
||||
position: 'right',
|
||||
fontSize: '14px',
|
||||
labels: {
|
||||
colors: '#64748b'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
size: '60%'
|
||||
}
|
||||
}
|
||||
},
|
||||
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"
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}]
|
||||
theme: 'dark'
|
||||
}
|
||||
}));
|
||||
|
||||
// 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;
|
||||
}
|
||||
});
|
||||
});
|
||||
const donutChartSeries = computed(() => chartData.value.donutChartSeries);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -219,7 +216,7 @@ onMounted(() => {
|
||||
</section>
|
||||
|
||||
<!-- Gráficos -->
|
||||
<section v-if="vacationsCharts.requests_by_month && vacationsCharts.requests_by_department" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<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">
|
||||
|
||||
@ -1,28 +1,30 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { api } from '@Services/Api';
|
||||
import { apiTo } from './Module';
|
||||
import { computed } from 'vue';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
// 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;
|
||||
}
|
||||
});
|
||||
// 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>
|
||||
|
||||
|
||||
@ -1,24 +1,20 @@
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { api } from '@Services/Api';
|
||||
import { apiTo } from './Module';
|
||||
import { computed } from 'vue';
|
||||
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
// Propiedades
|
||||
const vacations = ref({});
|
||||
const vacationsRequests = ref([]);
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(apiTo('employee'), {
|
||||
onSuccess: (r) => {
|
||||
vacations.value = r.vacations;
|
||||
vacationsRequests.value = r.vacation_requests;
|
||||
}
|
||||
});
|
||||
// Props
|
||||
const props = defineProps({
|
||||
vacations: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
vacationsRequests: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
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>
|
||||
@ -1,16 +1,20 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { api } from '@Services/Api';
|
||||
import { apiTo } from './Module';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import VueApexCharts from 'vue3-apexcharts';
|
||||
|
||||
// Datos del dashboard
|
||||
const dashboardData = ref({
|
||||
totalBudget: 0,
|
||||
justifiedExpenses: 0,
|
||||
remainingBalance: 0,
|
||||
expenseDistribution: []
|
||||
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
|
||||
@ -81,6 +85,15 @@ 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) => {
|
||||
@ -89,20 +102,17 @@ const calculatePercentage = (value, total) => {
|
||||
|
||||
// Computed para el porcentaje de gastos
|
||||
const expensesPercentage = computed(() => {
|
||||
return calculatePercentage(dashboardData.value.justifiedExpenses, dashboardData.value.totalBudget);
|
||||
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.totalBudget);
|
||||
return calculatePercentage(dashboardData.value.remainingBalance, dashboardData.value.annualBudget);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
api.get(apiTo('dashboard'), {
|
||||
onSuccess: (r) => {
|
||||
dashboardData.value = r.dashboard;
|
||||
}
|
||||
});
|
||||
// Aquí podrías cargar datos reales desde tu API
|
||||
console.log('Dashboard de eventos cargado');
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -123,9 +133,9 @@ onMounted(() => {
|
||||
<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">Total</h3>
|
||||
<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">
|
||||
${{ dashboardData.totalBudget }}
|
||||
{{ formatCurrency(dashboardData.annualBudget) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
@ -142,7 +152,7 @@ onMounted(() => {
|
||||
<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">
|
||||
${{ dashboardData.justifiedExpenses }}
|
||||
{{ formatCurrency(dashboardData.justifiedExpenses) }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-primary-dt/50">
|
||||
{{ expensesPercentage }}% del presupuesto
|
||||
@ -162,7 +172,7 @@ onMounted(() => {
|
||||
<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">
|
||||
${{ dashboardData.remainingBalance }}
|
||||
{{ formatCurrency(dashboardData.remainingBalance) }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-primary-dt/50">
|
||||
{{ remainingPercentage }}% del presupuesto
|
||||
@ -184,10 +194,10 @@ onMounted(() => {
|
||||
<!-- Título de la sección -->
|
||||
<div class="mb-6">
|
||||
<h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">
|
||||
Gastos por Caja Chica
|
||||
Distribución de Gastos por Concepto
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
Distribución de gastos por caja chica
|
||||
Porcentaje de gastos por categoría
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -208,7 +218,7 @@ onMounted(() => {
|
||||
<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 Caja Chica
|
||||
Detalle por Categoría
|
||||
</h3>
|
||||
|
||||
<div
|
||||
@ -230,7 +240,7 @@ onMounted(() => {
|
||||
{{ item.value }}%
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/50">
|
||||
${{ ((item.value / 100) * dashboardData.justifiedExpenses).toFixed(2) }}
|
||||
{{ formatCurrency((item.value / 100) * dashboardData.justifiedExpenses) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -247,7 +257,7 @@ onMounted(() => {
|
||||
{{ dashboardData.expenseDistribution.length }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
Cajas Chicas
|
||||
Categorías
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
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>
|
||||
181
src/pages/Vacations/Admin/Create.vue
Normal file
181
src/pages/Vacations/Admin/Create.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module'
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Form from './Form.vue';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
|
||||
const form = useForm({
|
||||
periods: [
|
||||
{
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
number_of_days: 0,
|
||||
}
|
||||
],
|
||||
comments: ''
|
||||
});
|
||||
|
||||
const availableDays = ref(0);
|
||||
const formRef = ref(null);
|
||||
|
||||
// Calcular días restantes
|
||||
const remainingDays = computed(() => {
|
||||
if (!formRef.value) return availableDays.value;
|
||||
return availableDays.value - formRef.value.totalSelectedDays;
|
||||
});
|
||||
|
||||
// Calcular total de días seleccionados
|
||||
const totalSelectedDays = computed(() => {
|
||||
if (!formRef.value) return 0;
|
||||
return formRef.value.totalSelectedDays;
|
||||
});
|
||||
|
||||
// Obtener períodos con datos
|
||||
const periodsWithData = computed(() => {
|
||||
return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.post(apiTo('store'), {
|
||||
onSuccess: (res) => {
|
||||
Notify.success(Lang('created'));
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(route('resources.available-days'), {
|
||||
onSuccess: (res) => {
|
||||
availableDays.value = res.available_days;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
|
||||
<GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
|
||||
</button>
|
||||
</RouterLink>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
|
||||
<p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout de dos columnas -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Formulario - Columna izquierda (2/3) -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
|
||||
|
||||
<Form
|
||||
ref="formRef"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen - Columna derecha (1/3) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
|
||||
|
||||
<!-- Días disponibles -->
|
||||
<div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
|
||||
<div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
|
||||
</div>
|
||||
|
||||
<!-- Detalles de períodos -->
|
||||
<div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
|
||||
<div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100">
|
||||
Período {{ index + 1 }}:
|
||||
</h4>
|
||||
<div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div>Inicio: {{ period.start_date }}</div>
|
||||
<div>Fin: {{ period.end_date }}</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>Días en período {{ index + 1 }}:</span>
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
|
||||
{{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen de días -->
|
||||
<div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
|
||||
{{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
|
||||
<span class="px-2 py-1 rounded-full text-xs font-medium"
|
||||
:class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
|
||||
{{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advertencia si se excede el límite -->
|
||||
<div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
|
||||
<span class="text-sm text-red-600 dark:text-red-400 font-medium">
|
||||
Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recordatorios -->
|
||||
<div class="space-y-3">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
|
||||
<div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Las solicitudes deben hacerse con 15 días de anticipación</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Tu coordinador revisará y aprobará la solicitud</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Recibirás una notificación con la decisión</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Los días se descontarán una vez aprobados</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
236
src/pages/Vacations/Admin/Form.vue
Normal file
236
src/pages/Vacations/Admin/Form.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<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';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'submit'
|
||||
])
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
form: Object
|
||||
})
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
emit('submit')
|
||||
}
|
||||
|
||||
function addPeriod() {
|
||||
props.form.periods.push({
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
number_of_days: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function removePeriod(index) {
|
||||
if (props.form.periods.length > 1) {
|
||||
props.form.periods.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function calculateDays(startDate, endDate) {
|
||||
if (!startDate || !endDate) return 0;
|
||||
|
||||
const start = new Date(startDate);
|
||||
const end = new Date(endDate);
|
||||
|
||||
// Validar que la fecha de inicio no sea posterior a la de fin
|
||||
if (start > end) return 0;
|
||||
|
||||
// Calcular la diferencia en días (incluyendo ambos días)
|
||||
const timeDiff = end.getTime() - start.getTime();
|
||||
const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
|
||||
|
||||
return daysDiff;
|
||||
}
|
||||
|
||||
function updatePeriodDays(index) {
|
||||
const period = props.form.periods[index];
|
||||
if (period.start_date && period.end_date) {
|
||||
period.number_of_days = calculateDays(period.start_date, period.end_date);
|
||||
} else {
|
||||
period.number_of_days = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function getMinDate() {
|
||||
const today = new Date();
|
||||
let daysToAdd = 15;
|
||||
let currentDate = new Date(today);
|
||||
|
||||
while (daysToAdd > 0) {
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
// Si no es domingo (0), contar el día
|
||||
if (currentDate.getDay() !== 0) {
|
||||
daysToAdd--;
|
||||
}
|
||||
}
|
||||
|
||||
return currentDate.toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
// Función para desactivar domingos
|
||||
function isDisabled(date) {
|
||||
return date.getDay() === 0; // 0 = domingo
|
||||
}
|
||||
|
||||
// Función para formatear fecha a Y-m-d
|
||||
function formatDate(date) {
|
||||
if (!date) return '';
|
||||
|
||||
// Si la fecha ya es un string en formato correcto, devolverla
|
||||
if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
|
||||
return date;
|
||||
}
|
||||
|
||||
let d;
|
||||
if (date instanceof Date) {
|
||||
d = date;
|
||||
} else {
|
||||
d = new Date(date);
|
||||
}
|
||||
|
||||
// Verificar que la fecha es válida
|
||||
if (isNaN(d.getTime())) {
|
||||
console.warn('Fecha inválida recibida:', date);
|
||||
return '';
|
||||
}
|
||||
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
// Watcher para detectar cambios en las fechas
|
||||
watch(() => props.form.periods, (newPeriods) => {
|
||||
newPeriods.forEach((period, index) => {
|
||||
if (period.start_date && period.end_date) {
|
||||
updatePeriodDays(index);
|
||||
}
|
||||
});
|
||||
}, { deep: true });
|
||||
|
||||
// Calcular total de días seleccionados
|
||||
const totalSelectedDays = computed(() => {
|
||||
return props.form.periods.reduce((total, period) => {
|
||||
return total + (period.number_of_days || 0);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Exponer el total para el componente padre
|
||||
defineExpose({
|
||||
totalSelectedDays
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<!-- Períodos de vacaciones -->
|
||||
<div class="space-y-4">
|
||||
<div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Período {{ index + 1 }}
|
||||
</h4>
|
||||
<button
|
||||
v-if="form.periods.length > 1"
|
||||
type="button"
|
||||
@click="removePeriod(index)"
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
|
||||
>
|
||||
<GoogleIcon name="delete" class="w-4 h-4" />
|
||||
Eliminar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div class="relative">
|
||||
<VueDatePicker
|
||||
v-model="period.start_date"
|
||||
class="w-full"
|
||||
placeholder="Fecha de inicio"
|
||||
format="dd/MM/yyyy"
|
||||
locale="es"
|
||||
:min-date="getMinDate()"
|
||||
:disabled-dates="isDisabled"
|
||||
:enable-time-picker="false"
|
||||
:auto-apply="true"
|
||||
:close-on-auto-apply="true"
|
||||
@update:model-value="(date) => {
|
||||
console.log('Fecha seleccionada (inicio):', date);
|
||||
period.start_date = formatDate(date);
|
||||
console.log('Fecha formateada (inicio):', period.start_date);
|
||||
updatePeriodDays(index);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<VueDatePicker
|
||||
v-model="period.end_date"
|
||||
class="w-full"
|
||||
placeholder="Fecha de fin"
|
||||
format="dd/MM/yyyy"
|
||||
locale="es"
|
||||
:min-date="getMinDate()"
|
||||
:disabled-dates="isDisabled"
|
||||
:enable-time-picker="false"
|
||||
:auto-apply="true"
|
||||
:close-on-auto-apply="true"
|
||||
@update:model-value="(date) => {
|
||||
console.log('Fecha seleccionada (fin):', date);
|
||||
period.end_date = formatDate(date);
|
||||
console.log('Fecha formateada (fin):', period.end_date);
|
||||
updatePeriodDays(index);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón añadir período -->
|
||||
<button
|
||||
type="button"
|
||||
@click="addPeriod"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
|
||||
>
|
||||
<GoogleIcon name="add" />
|
||||
Añadir período
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Comentarios -->
|
||||
<div>
|
||||
<Textarea
|
||||
v-model="form.comments"
|
||||
id="comments"
|
||||
rows="4"
|
||||
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
|
||||
placeholder="Agrega cualquier información adicional sobre tu solicitud..."
|
||||
:onError="form.errors.comments"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Botón de envío -->
|
||||
<div class="col-span-1 md:col-span-2 flex justify-center">
|
||||
<PrimaryButton
|
||||
v-text="$t('request')"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@ -90,8 +90,12 @@ onMounted(() => {
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<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="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,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 Textarea from '@Holos/Form/Textarea.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
|
||||
@ -58,15 +58,6 @@ const router = createRouter({
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'courses',
|
||||
name: 'courses.index',
|
||||
meta: {
|
||||
title: 'Cursos',
|
||||
icon: 'info',
|
||||
},
|
||||
component: () => import('@Pages/Courses/Employee/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'profile',
|
||||
name: 'profile.show',
|
||||
@ -116,33 +107,19 @@ const router = createRouter({
|
||||
},
|
||||
{
|
||||
path: 'vacations',
|
||||
name: 'vacations.coordinator.index',
|
||||
name: 'vacations.coordinator',
|
||||
meta: {
|
||||
title: 'Vacaciones',
|
||||
icon: 'calendar_month',
|
||||
},
|
||||
component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'courses',
|
||||
name: 'courses.coordinator',
|
||||
meta: {
|
||||
title: 'Capacitaciones',
|
||||
icon: 'info',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'courses.coordinator.index',
|
||||
component: () => import('@Pages/Courses/Coordinator/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'request',
|
||||
name: 'courses.coordinator.request',
|
||||
component: () => import('@Pages/Courses/Coordinator/Request.vue'),
|
||||
name: 'vacations.coordinator.index',
|
||||
component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
|
||||
}
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -153,7 +130,7 @@ const router = createRouter({
|
||||
title: 'Inicio',
|
||||
icon: 'home',
|
||||
},
|
||||
redirect: '/admin/dashboard',
|
||||
redirect: '/admin/employees',
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
@ -164,6 +141,42 @@ const router = createRouter({
|
||||
},
|
||||
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.index',
|
||||
component: () => import('@Pages/Academic/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'security',
|
||||
name: 'admin.security.index',
|
||||
component: () => import('@Pages/Security/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'payroll',
|
||||
name: 'admin.payroll.index',
|
||||
component: () => import('@Pages/Payroll/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'additional',
|
||||
name: 'admin.additional.index',
|
||||
component: () => import('@Pages/Additional/Index.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'vacations',
|
||||
name: 'admin.vacations',
|
||||
@ -192,22 +205,22 @@ const router = createRouter({
|
||||
{
|
||||
path: '',
|
||||
name: 'admin.courses.index',
|
||||
component: () => import('@Pages/Courses/Admin/Index.vue'),
|
||||
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/Admin/Request.vue'),
|
||||
},
|
||||
{
|
||||
path: ':id/assignamment',
|
||||
name: 'admin.courses.assignamment',
|
||||
component: () => import('@Pages/Courses/Admin/Assignamment.vue'),
|
||||
component: () => import('@Pages/Courses/Request.vue'),
|
||||
},
|
||||
{
|
||||
path: 'calendar',
|
||||
name: 'admin.courses.calendar',
|
||||
component: () => import('@Pages/Courses/Admin/Calendar.vue'),
|
||||
component: () => import('@Pages/Courses/Calendar.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
@ -223,56 +236,22 @@ const router = createRouter({
|
||||
{
|
||||
path: '',
|
||||
name: 'admin.events.index',
|
||||
component: () => import('@Pages/Admin/Events/Index.vue'),
|
||||
component: () => import('@Pages/Events/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'pettyCashes',
|
||||
name: 'admin.events.pettyCashes',
|
||||
redirect: '/admin/events/pettyCashes',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'admin.events.pettyCashes.index',
|
||||
component: () => import('@Pages/Admin/Events/PettyCashes/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'admin.events.pettyCashes.create',
|
||||
component: () => import('@Pages/Admin/Events/PettyCashes/Create.vue'),
|
||||
},
|
||||
{
|
||||
path: 'assignamment',
|
||||
name: 'admin.events.pettyCashes.assignamment',
|
||||
component: () => import('@Pages/Admin/Events/PettyCashes/Assignamment.vue'),
|
||||
},
|
||||
{
|
||||
path: ':id/edit',
|
||||
name: 'admin.events.pettyCashes.edit',
|
||||
component: () => import('@Pages/Admin/Events/PettyCashes/Edit.vue'),
|
||||
},
|
||||
]
|
||||
path: 'assignamment',
|
||||
name: 'admin.events.assignamment',
|
||||
component: () => import('@Pages/Events/Assignamment.vue'),
|
||||
},
|
||||
// {
|
||||
// path: 'expense',
|
||||
// name: 'admin.events.expense',
|
||||
// redirect: '/admin/events/expense',
|
||||
// children: [
|
||||
// {
|
||||
// path: '',
|
||||
// name: 'admin.events.expense.index',
|
||||
// component: () => import('@Pages/Admin/Events/ExpenseJustifications/Index.vue'),
|
||||
// },
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
path: 'justification',
|
||||
name: 'admin.events.justification',
|
||||
component: () => import('@Pages/Admin/Events/Justification.vue'),
|
||||
component: () => import('@Pages/Events/Justification.vue'),
|
||||
},
|
||||
{
|
||||
path: 'reports',
|
||||
name: 'admin.events.reports',
|
||||
component: () => import('@Pages/Admin/Events/Reports.vue'),
|
||||
component: () => import('@Pages/Events/Reports.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
@ -288,16 +267,19 @@ const router = createRouter({
|
||||
{
|
||||
path: '',
|
||||
name: 'admin.users.index',
|
||||
beforeEnter: (to, from, next) => can(next, 'users.index'),
|
||||
component: () => import('@Pages/Admin/Users/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'online',
|
||||
name: 'admin.users.online',
|
||||
beforeEnter: (to, from, next) => can(next, 'users.online'),
|
||||
component: () => import('@Pages/Admin/Users/Online.vue')
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'admin.users.create',
|
||||
beforeEnter: (to, from, next) => can(next, 'users.create'),
|
||||
meta: {
|
||||
title: 'Crear',
|
||||
icon: 'add',
|
||||
@ -306,6 +288,7 @@ const router = createRouter({
|
||||
}, {
|
||||
path: ':id/edit',
|
||||
name: 'admin.users.edit',
|
||||
beforeEnter: (to, from, next) => can(next, 'users.edit'),
|
||||
meta: {
|
||||
title: 'Editar',
|
||||
icon: 'edit',
|
||||
@ -314,54 +297,13 @@ const router = createRouter({
|
||||
}, {
|
||||
path: ':id/settings',
|
||||
name: 'admin.users.settings',
|
||||
beforeEnter: (to, from, next) => can(next, 'users.settings'),
|
||||
component: () => import('@Pages/Admin/Users/Settings.vue'),
|
||||
meta: {
|
||||
title: 'Configuración',
|
||||
icon: 'settings',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'academic',
|
||||
name: 'admin.users.academic',
|
||||
redirect: '/admin/users/academic',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'admin.users.academic.index',
|
||||
component: () => import('@Pages/Admin/Users/Academic/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: ':id/create-record',
|
||||
name: 'admin.users.academic.createRecord',
|
||||
component: () => import('@Pages/Admin/Users/Academic/CreateRecord.vue'),
|
||||
},
|
||||
{
|
||||
path: ':id/create-certification',
|
||||
name: 'admin.users.academic.createCertification',
|
||||
component: () => import('@Pages/Admin/Users/Academic/CreateCertification.vue'),
|
||||
},
|
||||
{
|
||||
path: ':id/edit-record/:record',
|
||||
name: 'admin.users.academic.editRecord',
|
||||
component: () => import('@Pages/Admin/Users/Academic/EditRecord.vue'),
|
||||
},
|
||||
{
|
||||
path: ':id/edit-certification/:certification',
|
||||
name: 'admin.users.academic.editCertification',
|
||||
component: () => import('@Pages/Admin/Users/Academic/EditCertification.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'security',
|
||||
name: 'admin.users.security',
|
||||
component: () => import('@Pages/Admin/Users/Security.vue'),
|
||||
},
|
||||
{
|
||||
path: 'additional',
|
||||
name: 'admin.users.additional',
|
||||
component: () => import('@Pages/Admin/Users/Additional.vue'),
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user