juan.zapata/golscontrol-frontend-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: Creación del frontend RH manager

Browse Source
This commit is contained in:
Juan Felipe Zapata Moreno 2025-09-19 16:24:58 -06:00
parent 7445e2d4ad
commit 6d2cbce90d
14 changed files with 1165 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Holos/Dropdown.vue
View File

@ -9,7 +9,7 @@ const props = defineProps({
contentClasses: {
default: () => [
'pt-1',
'bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt'
'!bg-white dark:!bg-primary-d !text-gray-800 dark:!text-primary-dt'
],
type: Array
},

57
src/components/Holos/Layout/RhApp.vue Normal file
View File

@ -0,0 +1,57 @@
<script setup>
import { onMounted } from 'vue';
import useDarkMode from '@Stores/DarkMode'
import useLeftSidebar from '@Stores/LeftSidebar'
import useNotificationSidebar from '@Stores/NotificationSidebar'
import useNotifier from '@Stores/Notifier'
import Header from '../Skeleton/Header.vue';
import RhSidebar from '../Skeleton/RhSidebar.vue';
import NotificationSidebar from '../Skeleton/Sidebar/Notification.vue';
/** Definidores */
const darkMode = useDarkMode();
const leftSidebar = useLeftSidebar();
const notificationSidebar = useNotificationSidebar();
const notifier = useNotifier();
/** Propiedades */
defineProps({
title: String,
});
/** Ciclos */
onMounted(() => {
leftSidebar.boot();
darkMode.boot();
notifier.boot();
});
</script>
<template>
<div class="flex w-full h-screen bg-page text-page-t dark:bg-page-d dark:text-page-dt">
<RhSidebar
@open="leftSidebar.toggle()"
>
<slot name="leftSidebar"/>
</RhSidebar>
<NotificationSidebar
@open="notificationSidebar.toggle()"
/>
<div
class="flex flex-col w-full transition-all duration-300"
:class="{'md:w-[calc(100vw-rem)] md:ml-64':leftSidebar.isOpened, 'md:w-screen md:ml-0':leftSidebar.isClosed}"
>
<div class="h-2 md:h-14">
<Header
@open="leftSidebar.toggle()"
/>
</div>
<main class="flex h-full justify-center md:p-2">
<div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-xs md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 pb-4 md:rounded-sm overflow-y-auto overflow-x-auto transition-colors duration-300">
<slot />
</div>
</main>
</div>
</div>
</template>

2
src/components/Holos/Searcher.vue
View File

@ -86,7 +86,7 @@ const clear = () => {
<RouterLink :to="$view({name:'index'})">
<IconButton
:title="$t('home')"
class="text-white"
class="text-white !bg-blue-600"
icon="home"
filled
/>

20
src/components/Holos/Skeleton/Header.vue
View File

@ -32,7 +32,7 @@ const loader = useLoader()
class="fixed px-2 w-[calc(100vw)] bg-transparent transition-all duration-300 z-50"
:class="{'md:w-[calc(100vw-16rem)]':leftSidebar.isOpened,'md:w-[calc(100vw)]':!leftSidebar.isClosed}"
>
<div class="my-2 flex px-2 items-center justify-between h-[2.75rem] rounded-sm bg-primary dark:bg-primary-d text-white z-20 ">
<div class="my-2 flex px-2 items-center justify-between h-[2.75rem] rounded-sm bg-white dark:bg-primary-d text-gray-700 z-20 ">
<GoogleIcon
class="text-2xl mt-1 z-50"
name="list"
@ -103,15 +103,15 @@ const loader = useLoader()
<div class="text-center block px-4 py-2 text-sm border-b truncate">
{{ $page.user.name }}
</div>
<DropdownLink to="profile.show">
{{$t('profile')}}
</DropdownLink>
<div class="border-t border-gray-100" />
<form @submit.prevent="logout">
<DropdownLink as="button">
{{$t('auth.logout')}}
</DropdownLink>
</form>
<DropdownLink to="profile.show">
{{$t('profile')}}
</DropdownLink>
<div class="border-t border-gray-100" />
<form @submit.prevent="logout">
<DropdownLink as="button">
{{$t('auth.logout')}}
</DropdownLink>
</form>
</template>
</Dropdown>
</div>

54
src/components/Holos/Skeleton/RhSidebar.vue Normal file
View File

@ -0,0 +1,54 @@
<script setup>
import useLeftSidebar from '@Stores/LeftSidebar'
import GoogleIcon from '@Shared/GoogleIcon.vue';
/** Definidores */
const leftSidebar = useLeftSidebar()
/** Eventos */
const emit = defineEmits(['open']);
/** Propiedades */
const props = defineProps({
sidebar: Boolean
});
</script>
<template>
<div
class="fixed top-[3.1rem] md:top-0 w-fit h-[calc(100vh-3.1rem)] md:h-screen transition-all duration-300 z-50"
:class="{'-translate-x-0':leftSidebar.isOpened, '-translate-x-64':leftSidebar.isClosed}"
>
<nav
class="flex md:w-64 h-full transition-all duration-300 border-none"
:class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
>
<div class="flex flex-col h-full p-2 md:w-64">
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-white dark:bg-primary-d text-page-t dark:text-page-dt border-r border-gray-200 dark:border-primary/20">
<div class="py-4 bg-transparent">
<div class="flex flex-row justify-center items-center w-full px-4 mb-6 gap-2">
<GoogleIcon class="bg-[#2563eb] text-white text-3xl rounded p-1" name="apartment" />
<div class="flex flex-col items-center justify-center gap-1">
<h2 class="text-gray-800 dark:text-primary-dt font-bold text-xl"> HR Manager</h2>
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Sistema de RRHH</span>
</div>
</div>
<ul class="flex h-full flex-col space-y-1 px-2">
<slot />
</ul>
</div>
<div class="mb-4 px-4 py-4 border-t border-gray-200">
<p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
2025 RH Manager &copy; Golsystems
</p>
</div>
</div>
</div>
<div
class="h-full"
:class="{'w-[calc(100vw-17rem)] dark:bg-black/40 md:w-0 bg-black/20':leftSidebar.isOpened,'md:w-0':leftSidebar.isClosed}"
@click="leftSidebar.toggle()"
></div>
</nav>
</div>
</template>

31
src/components/Holos/Skeleton/Sidebar/Link.vue
View File

@ -13,15 +13,26 @@ const vroute = useRoute();
const props = defineProps({
icon: String,
name: String,
to: String
to: String,
active: {
type: Boolean,
default: false
}
});
const classes = computed(() => {
let status = props.to === vroute.name
? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d'
: 'border-transparent';
let isActive = props.active || props.to === vroute.name;
return `flex items-center h-11 focus:outline-hidden hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition`
if (isActive) {
return 'flex items-center px-4 py-3 mx-2 my-1 text-white !bg-blue-600 rounded-lg transition-all duration-200 !border-transparent';
} else {
return 'flex items-center px-4 py-3 mx-2 my-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200';
}
});
const iconClasses = computed(() => {
let isActive = props.active || props.to === vroute.name;
return isActive ? 'text-white' : 'text-gray-500';
});
const closeSidebar = () => {
@ -39,19 +50,21 @@ const closeSidebar = () => {
>
<span
v-if="icon"
class="inline-flex justify-center items-center ml-4 mr-2"
class="inline-flex justify-center items-center mr-3"
>
<GoogleIcon
class="text-xl"
:class="iconClasses"
:name="icon"
outline
/>
</span>
<span
v-if="name"
v-text="$t(name)"
class="text-sm tracking-wide truncate"
/>
class="text-sm font-medium"
>
{{ name }}
</span>
<slot />
</RouterLink>
</li>

61
src/layouts/RhLayout.vue Normal file
View File

@ -0,0 +1,61 @@
<script setup>
import { onMounted } from 'vue';
import useLoader from '@Stores/Loader';
import Layout from '@/components/Holos/Layout/RhApp.vue';
import Link from '@Holos/Skeleton/Sidebar/Link.vue';
/** Definidores */
const loader = useLoader()
/** Propiedades */
defineProps({
title: String,
});
/** Ciclos */
onMounted(() => {
loader.boot()
})
</script>
<template>
<Layout
:title="title"
>
<template #leftSidebar>
<Link
icon="grid_view"
name="Dashboard"
to="dashboard.index"
/>
<Link
icon="people"
name="Empleados"
to="employees.index"
/>
<Link
icon="school"
name="Historial Académico"
to="academic.index"
/>
<Link
icon="security"
name="Seguridad y Salud"
to="security.index"
/>
<Link
icon="payments"
name="Nómina"
to="payroll.index"
/>
<Link
icon="info"
name="Información Adicional"
to="additional.index"
/>
</template>
<!-- Contenido -->
<RouterView />
<!-- Fin contenido -->
</Layout>
</template>

152
src/pages/Academic/Index.vue Normal file
View File

@ -0,0 +1,152 @@
<script setup>
import GoogleIcon from '@Shared/GoogleIcon.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>
<button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
<GoogleIcon
class="text-white text-xl"
name="add"
/>
Agregar Registro
</button>
</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>

151
src/pages/Additional/Index.vue Normal file
View File

@ -0,0 +1,151 @@
<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue';
</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">Información Adicional</h1>
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Deportes, evaluaciones de desempeño y desarrollo profesional</p>
</div>
<div>
<button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
<GoogleIcon class="text-white text-xl" name="add" />
Nueva Evaluación
</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">
<!-- 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">
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="description" />
</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 adicional y evaluación de desempeño</p>
</div>
</header>
<!-- Deportes -->
<div class="mt-6">
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="sports_tennis" />
Deportes que Practica
</h3>
<div class="mt-3 flex flex-wrap gap-2">
<span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Natación</span>
<span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Yoga</span>
<span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Ciclismo</span>
</div>
</div>
<!-- Evaluación de Desempeño -->
<div class="mt-8">
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="star" />
Evaluación de Desempeño
</h3>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
<!-- Puntuación grande -->
<div class="md:col-span-2 bg-gradient-to-r from-[#1e40af] to-[#2563eb] text-white rounded-lg p-6 flex flex-col justify-between shadow-sm">
<div class="flex items-center justify-between">
<div>
<div class="text-sm font-semibold">Puntuación General</div>
</div>
<div>
<span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full">Excelente</span>
</div>
</div>
<div class="mt-4">
<div class="text-4xl font-bold">92/100</div>
<div class="text-sm opacity-80 mt-1">Evaluado el 2024-01-15</div>
</div>
</div>
<!-- Archivo evaluación -->
<div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Archivo de Evaluación</div>
<div class="mt-3 flex items-start gap-3">
<GoogleIcon class="text-gray-400 dark:text-primary-dt text-xl" name="picture_as_pdf" />
<div>
<div class="text-sm text-gray-700 dark:text-primary-dt">evaluacion_maria_2024.pdf</div>
<div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">Evaluador: Juan Pérez</div>
</div>
</div>
</div>
</div>
<!-- Observaciones -->
<div class="mt-4 rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Observaciones</div>
<div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
Excelente desempeño...
</div>
</div>
</div>
<!-- Objetivos y Progreso -->
<div class="mt-8">
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="track_changes" />
Objetivos y Progreso
</h3>
<div class="mt-4 space-y-4">
<!-- Objetivo 1 -->
<div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="flex justify-between items-center">
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Completar certificación en React Advanced</div>
<div class="text-sm text-gray-500 dark:text-primary-dt/70">75%</div>
</div>
<div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/70">Fecha límite: 2024-03-30</div>
<div class="mt-3 h-3 rounded-full bg-gray-100 dark:bg-primary/10 overflow-hidden">
<div class="h-full bg-[#2563eb]" style="width:75%"></div>
</div>
</div>
<!-- Objetivo 2 -->
<div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="flex justify-between items-center">
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Liderar proyecto de refactorización</div>
<div class="text-sm text-gray-500 dark:text_primary-dt/70">45%</div>
</div>
<div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/70">Fecha límite: 2024-04-15</div>
<div class="mt-3 h-3 rounded-full bg-gray-100 dark:bg-primary/10 overflow-hidden">
<div class="h-full bg-[#2563eb]" style="width:45%"></div>
</div>
</div>
</div>
</div>
<!-- Acciones -->
<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-base" name="file_upload" />
Subir Evaluación
</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-base" name="target" />
Actualizar Objetivos
</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-base" name="trophy" />
Actualizar Deportes
</button>
</div>
</section>
</div>
</template>

116
src/pages/Dashboard/Index.vue
View File

@ -1,9 +1,119 @@
<script setup>
import PageHeader from '@Holos/PageHeader.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue'
const kpis = [ /* test de v-for*/
{ title: 'Total Empleados', value: '248', meta: '+12% vs mes anterior', icon: 'people' },
{ title: 'Nuevas Contrataciones', value: '18', meta: '+3 vs mes anterior', icon: 'person_add' },
{ title: 'Certificaciones', value: '156', meta: '+8% vs mes anterior', icon: 'school' },
{ title: 'Documentos pendientes', value: '12', meta: '-5 vs mes anterior', icon: 'inventory' },
];
const employees = [ /* test de v-for*/
{ initials: 'MG', name: 'María González', role: 'Desarrolladora Frontend • Tecnología', date: '2024-01-15', status: 'Activo' },
{ initials: 'CR', name: 'Carlos Rodríguez', role: 'Analista de Marketing • Marketing', date: '2024-01-10', status: 'Activo' },
{ initials: 'AM', name: 'Ana Martínez', role: 'Contadora • Finanzas', date: '2024-01-08', status: 'Activo' },
];
</script>
<template>
<PageHeader title="Dashboard" />
<p><b>{{ $t('welcome') }}</b>, {{ $page.user.name }}.</p>
<div class="p-6 max-w-auto mx-auto">
<!-- Header -->
<div class="flex items-start justify-between gap-4 mb-8">
<div>
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Dashboard</h1>
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Resumen general del sistema de recursos humanos</p>
</div>
</div>
<!-- KPIs -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<template v-for="(kpi, i) in kpis" :key="i">
<div class="bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg border border-gray-100 p-5 shadow-sm">
<div class="flex items-start justify-between">
<div>
<div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ kpi.title }}</div>
<div class="mt-3 text-3xl font-bold text-gray-900 dark:text-primary-dt">{{ kpi.value }}</div>
<div class="mt-1 text-xs text-emerald-600 dark:text-success-dt">{{ kpi.meta }}</div>
</div>
<div class="text-gray-300 dark:text-primary-dt/60">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-gray-50 dark:bg-primary/10 text-lg">
<GoogleIcon :name="kpi.icon" class="text-xl text-gray-500 dark:text-primary-dt" />
</span>
</div>
</div>
</div>
</template>
</div>
<!-- Left: Empleados recientes (span 2) -->
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="md:col-span-2 bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg p-6 shadow-sm">
<div class="flex items-center justify-between mb-4">
<div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-primary-dt flex items-center gap-3">
<GoogleIcon name="groups" class="text-xl text-gray-700 dark:text-primary-dt" />
Empleados Recientes
</h3>
<p class="text-sm text-gray-500 dark:text-primary-dt/70 mt-1">Últimas incorporaciones al equipo</p>
</div>
</div>
<ul class="space-y-4 mt-4">
<li v-for="(e, idx) in employees" :key="idx" class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="flex-none w-12 h-12 rounded-full bg-blue-50 dark:bg-primary/10 flex items-center justify-center text-blue-700 dark:text-primary-dt font-semibold">
{{ e.initials }}
</div>
<div>
<div class="font-semibold text-gray-800 dark:text-primary-dt">{{ e.name }}</div>
<div class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">{{ e.role }}</div>
</div>
</div>
<div class="flex flex-col items-end">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ e.date }}</div>
<span class="mt-2 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">
{{ e.status }}
</span>
</div>
</li>
</ul>
</div>
<!-- Acciones Rápidas -->
<div class="bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg p-6 shadow-sm">
<div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-primary-dt flex items-center gap-3">
<GoogleIcon name="timeline" class="text-xl text-gray-700 dark:text-primary-dt" />
Acciones Rápidas
</h3>
<p class="text-sm text-gray-500 dark:text-primary-dt/70 mt-1">Tareas frecuentes del sistema</p>
</div>
<div class="mt-4 space-y-3">
<div class="w-full flex items-center gap-3 p-3 rounded-md border border-gray-100 dark:border-primary/20 bg-white dark:bg-primary-d/5">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-gray-50 dark:bg-primary/10 text-gray-700 dark:text-primary-dt">
<GoogleIcon name="person_add" class="text-lg" />
</span>
<span class="text-sm text-gray-700 dark:text-primary-dt">Registrar Nuevo Empleado</span>
<span class="ml-auto text-gray-300 dark:text-primary-dt/50">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
</span>
</div>
<div class="w-full flex items-center gap-3 p-3 rounded-md border border-gray-100 dark:border-primary/20 bg-white dark:bg-primary-d/5">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-gray-50 dark:bg-primary/10 text-gray-700 dark:text-primary-dt">
<GoogleIcon name="person_add" class="text-lg" />
</span>
<span class="text-sm text-gray-700 dark:text-primary-dt">Registrar Nuevo Empleado</span>
<span class="ml-auto text-gray-300 dark:text-primary-dt/50">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
</span>
</div>
</div>
</div>
</div>
</div>
</template>

166
src/pages/Employees/Index.vue Normal file
View File

@ -0,0 +1,166 @@
<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue';
import Searcher from '@Holos/Searcher.vue';
</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-3xl font-extrabold text-gray-900 dark:text-primary-dt">Empleados</h1>
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información general de empleados</p>
</div>
<div class="flex items-center">
<button
class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-md"
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg>
Nuevo Empleado
</button>
</div>
</div>
<!-- Search Card -->
<div class="mt-6">
<Searcher
title="Buscar Empleados"
placeholder="Buscar por nombre o departamento..."
@search="() => {}"
>
</Searcher>
</div>
<!-- List Card -->
<div class="mt-8 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-xl font-semibold text-gray-800 dark:text-primary-dt">Lista de Empleados</h3>
<p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">3 empleados encontrados</p>
</div>
</div>
<div class="mt-6 overflow-x-auto">
<table class="w-full min-w-[900px]">
<thead>
<tr class="text-left text-sm text-gray-500 dark:text-primary-dt/70">
<th class="py-3 pb-4">Nombre Completo</th>
<th class="py-3 pb-4">Departamento</th>
<th class="py-3 pb-4">Sede</th>
<th class="py-3 pb-4">Fecha Ingreso</th>
<th class="py-3 pb-4">Estado</th>
<th class="py-3 pb-4 text-right">Acciones</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-primary/20 text-sm text-gray-700 dark:text-primary-dt">
<!-- Row 1 -->
<tr class="bg-white dark:bg-transparent">
<td class="py-6">
<div class="font-semibold text-gray-800 dark:text-primary-dt">María González López</div>
<div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">GOLM900515</div>
</td>
<td class="py-6 dark:text-primary-dt">Tecnología</td>
<td class="py-6 dark:text-primary-dt">Ciudad de México</td>
<td class="py-6 dark:text-primary-dt">2023-01-15</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">Activo</span>
</td>
<td class="py-6 text-right space-x-3">
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
<GoogleIcon
class="text-black dark:text-primary-dt text-xl"
name="visibility"
/>
</button>
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
<GoogleIcon
class="text-black dark:text-primary-dt text-xl"
name="edit"
/>
</button>
<button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
<GoogleIcon
class="text-red-500 dark:text-danger-d text-xl"
name="delete"
/>
</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="bg-white dark:bg-transparent">
<td class="py-6">
<div class="font-semibold text-gray-800 dark:text-primary-dt">Carlos Rodríguez Martín</div>
<div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">ROMC880822</div>
</td>
<td class="py-6 dark:text-primary-dt">Marketing</td>
<td class="py-6 dark:text-primary-dt">Guadalajara</td>
<td class="py-6 dark:text-primary-dt">2022-03-10</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">Activo</span>
</td>
<td class="py-6 text-right space-x-3">
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
<GoogleIcon
class="text-black dark:text-primary-dt text-xl"
name="visibility"
/>
</button>
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
<GoogleIcon
class="text-black dark:text-primary-dt text-xl"
name="edit"
/>
</button>
<button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
<GoogleIcon
class="text-red-500 dark:text-danger-d text-xl"
name="delete"
/>
</button>
</td>
</tr>
<!-- Row 3 -->
<tr class="bg-white dark:bg-transparent">
<td class="py-6">
<div class="font-semibold text-gray-800 dark:text-primary-dt">Ana Martínez Sánchez</div>
<div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">MASA921203</div>
</td>
<td class="py-6 dark:text-primary-dt">Finanzas</td>
<td class="py-6 dark:text-primary-dt">Monterrey</td>
<td class="py-6 dark:text-primary-dt">2023-06-01</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">Activo</span>
</td>
<td class="py-6 text-right space-x-3">
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
<GoogleIcon
class="text-black dark:text-primary-dt text-xl"
name="visibility"
/>
</button>
<button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
<GoogleIcon
class="text-black dark:text-primary-dt text-xl"
name="edit"
/>
</button>
<button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
<GoogleIcon
class="text-red-500 dark:text-danger-d text-xl"
name="delete"
/>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>

145
src/pages/Payroll/Index.vue Normal file
View File

@ -0,0 +1,145 @@
<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue';
</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-3xl font-extrabold text-gray-900 dark:text-primary-dt">Nómina</h1>
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información bancaria y salarios de empleados</p>
</div>
<div>
<button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
<GoogleIcon class="text-white text-xl" name="add" />
Procesar Nómina
</button>
</div>
</div>
<!-- KPI Cards -->
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Nómina Total Mensual</div>
<div class="mt-4 text-3xl font-bold text-gray-900 dark:text-primary-dt">$125,000</div>
<div class="mt-1 text-xs text-gray-400 dark:text-primary-dt/70">3 empleados activos</div>
</div>
<div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm flex flex-col justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Último Procesamiento</div>
<div class="mt-4 text-2xl font-bold text-gray-900 dark:text-primary-dt">31 Enero</div>
<div class="mt-1 text-sm text-emerald-600 dark:text-success-dt">Procesado exitosamente</div>
</div>
<div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm flex flex-col justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Próximo Procesamiento</div>
<div class="mt-4 text-2xl font-bold text-gray-900 dark:text-primary-dt">29 Feb</div>
<div class="mt-1 text-sm text-amber-600 dark:text-warning-dt">En 5 días</div>
</div>
</div>
<!-- Employee Payroll Card -->
<section class="mt-8 bg-white rounded-lg border border-gray-100 shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<header class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="account_balance_wallet" />
</div>
<div>
<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 dark:text-primary-dt/70">Información bancaria y detalles de nómina</p>
</div>
</div>
</header>
<!-- Información Bancaria -->
<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-gray-600 dark:text-primary-dt text-base" name="account_balance" />
Información Bancaria
</h3>
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-3">
<div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Banco</div>
<div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">BBVA Bancomer</div>
</div>
<div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">CLABE</div>
<div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">012180001234567890</div>
</div>
<div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Crédito INFONAVIT</div>
<div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">5020123456789</div>
</div>
</div>
</div>
<!-- Desglose Salarial -->
<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-gray-600 dark:text-primary-dt text-base" name="payments" />
Desglose Salarial
</h3>
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-6">
<div class="md:col-span-1 col-span-2 rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Salario Base</div>
<div class="mt-2 text-xl font-bold text-[#2563eb] dark:text-primary-dt">$35,000</div>
</div>
<div class="md:col-span-2 col-span-4 rounded-lg border border-gray-100 p-4 bg-emerald-50/40 dark:bg-success-d/10 dark:border-primary/20">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Bonos</div>
<div class="mt-2 text-xl font-bold text-emerald-600 dark:text-success-dt">+$8,000</div>
</div>
<div class="md:col-span-2 col-span-4 rounded-lg border border-gray-100 p-4 bg-rose-50/40 dark:bg-danger-d/10 dark:border-primary/20">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Deducciones</div>
<div class="mt-2 text-xl font-bold text-rose-600 dark:text-danger-dt">-$2,000</div>
</div>
<div class="md:col-span-1 col-span-2 rounded-lg p-4 border border-gray-100 bg-rose-50/40 flex items-center justify-between dark:bg-primary/5 dark:border-primary/20">
<div class="text-black dark:text-primary-dt">
<div class="text-sm dark:text-primary-dt">Total Mensual</div>
<div class="mt-2 text-xl font-bold dark:text-primary-dt">$45,000</div>
</div>
</div>
</div>
</div>
<!-- Último Pago -->
<div class="mt-8">
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt">Último Pago</h3>
<div class="mt-3 rounded-lg border border-gray-100 p-4 bg-white flex items-center justify-between dark:bg-primary-d dark:border-primary/20">
<div>
<div class="text-lg font-semibold text-gray-900 dark:text-primary-dt">$43,000</div>
<div class="text-xs text-gray-500 dark:text-primary-dt/70">Fecha: 2024-01-31</div>
</div>
<span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full dark:bg-success-d dark:text-success-dt">Procesado</span>
</div>
</div>
<!-- Acciones -->
<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-lg" name="sync" />
Actualizar Cuenta
</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-lg" name="calculate" />
Recalcular Salario
</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-lg" name="history" />
Historial de Pagos
</button>
</div>
</section>
</div>
</template>

166
src/pages/Security/Index.vue Normal file
View File

@ -0,0 +1,166 @@
<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue';
</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">Seguridad y Salud</h1>
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información médica, tallas y contactos de emergencia</p>
</div>
<div>
<button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 4v16M20 12H4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Actualizar Información
</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">
<!-- 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">
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="shield" />
</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 de seguridad y salud ocupacional</p>
</div>
</header>
<!-- Tallas de Ropa -->
<div class="mt-6">
<h3 class="text-base font-medium text-gray-800 mb-3 dark:text-primary-dt">Tallas de Ropa</h3>
<div class="grid gap-4 grid-cols-1 md:grid-cols-3">
<div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Camisa</span>
<span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">M</span>
</div>
<div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Overol</span>
<span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">M</span>
</div>
<div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Zapatos</span>
<span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">25</span>
</div>
</div>
</div>
<!-- Información Médica -->
<div class="mt-8">
<h3 class="text-base font-medium text-gray-800 mb-3 flex items-center gap-2 dark:text-primary-dt">
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="medical_services" />
Información Médica
</h3>
<div class="grid gap-4 grid-cols-1 md:grid-cols-2">
<!-- Certificado -->
<div class="rounded-lg border border-gray-100 p-4 flex items-center justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="flex items-center gap-3">
<GoogleIcon class="text-gray-400 dark:text-primary-dt text-xl" name="picture_as_pdf" />
<div>
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Certificado Médico</div>
<div class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">certificado_maria_2024.pdf</div>
</div>
</div>
<span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full dark:bg-success-d dark:text-success-dt">Vigente</span>
</div>
<!-- Tipo de sangre -->
<div class="rounded-lg border border-gray-100 p-4 flex items-center justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div>
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Tipo de Sangre</div>
<div class="mt-2 text-xl font-bold text-red-600 dark:text-danger-d">O+</div>
</div>
</div>
<!-- Alergias -->
<div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Alergias</div>
<div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Polen, mariscos</div>
</div>
<!-- Altura / Peso -->
<div class="grid grid-cols-2 gap-4">
<div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Altura</div>
<div class="mt-2 text-lg font-bold text-[#2563eb] dark:text-primary-dt">165 cm</div>
</div>
<div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Peso</div>
<div class="mt-2 text-lg font-bold text-[#2563eb] dark:text-primary-dt">60 kg</div>
</div>
</div>
<!-- Prescripciones -->
<div class="rounded-lg border border-gray-100 p-4 col-span-1 md:col-span-2 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Prescripciones</div>
<div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Antihistamínicos según necesidad</div>
</div>
<!-- Discapacidades -->
<div class="rounded-lg border border-gray-100 p-4 col-span-1 md:col-span-2 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Discapacidades</div>
<div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Ninguna</div>
</div>
</div>
</div>
<!-- Contactos de Emergencia -->
<div class="mt-8">
<h3 class="text-base font-medium text-gray-800 mb-3 flex items-center gap-2 dark:text-primary-dt">
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="call" />
Contactos de Emergencia
</h3>
<div class="grid gap-4 grid-cols-1 md:grid-cols-2">
<div class="rounded-lg border border-gray-100 p-4 flex items-start justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div>
<div class="font-semibold text-gray-800 dark:text-primary-dt">Juan González</div>
<div class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">+52 55 1234 5678</div>
</div>
<span class="inline-block bg-gray-100 text-gray-700 text-xs px-3 py-1 rounded-full dark:bg-primary/10 dark:text-primary-dt">Esposo</span>
</div>
<div class="rounded-lg border border-gray-100 p-4 flex items-start justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
<div>
<div class="font-semibold text-gray-800 dark:text-primary-dt">Carmen López</div>
<div class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">+52 55 8765 4321</div>
</div>
<span class="inline-block bg-gray-100 text-gray-700 text-xs px-3 py-1 rounded-full dark:bg-primary/10 dark:text-primary-dt">Madre</span>
</div>
</div>
</div>
<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="article"
/>
Subir certificado
</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="call"
/>
Agregar contacto
</button>
</div>
</section>
</div>
</template>

93
src/router/Index.js
View File

@ -16,7 +16,7 @@ const router = createRouter({
routes: [
{
path: '/',
component: () => import('@Layouts/AppLayout.vue'),
component: () => import('@Layouts/RhLayout.vue'),
name: 'root',
meta: {
title: 'Inicio',
@ -27,40 +27,79 @@ const router = createRouter({
{
path: '',
name: 'index',
redirect: '/dashboard',
meta: {
title: 'Inicio',
icon: 'home',
},
redirect: '/dashboard'
},
{
path: 'dashboard',
name: 'dashboard.index',
component: () => import('@Pages/Dashboard/Index.vue'),
meta: {
title: 'Dashboard',
icon: 'grid_view',
}
},
{
path: 'profile',
children: [
{
path: '',
name: 'profile.show',
component: () => import('@Pages/Profile/Show.vue'),
meta: {
title: 'Perfil',
icon: 'person',
},
},
{
path: 'notifications',
children: [
path: 'employees',
name: 'employees.index',
component: () => import('@Pages/Employees/Index.vue'),
meta: {
title: 'Empleados',
icon: 'people',
}
},
{
path: 'academic',
name: 'academic.index',
component: () => import('@Pages/Academic/Index.vue'),
meta: {
title: 'Historial Académico',
icon: 'school',
}
},
{
path: 'security',
name: 'security.index',
component: () => import('@Pages/Security/Index.vue'),
meta: {
title: 'Seguridad y Salud',
icon: 'security',
}
},
{
path: 'payroll',
name: 'payroll.index',
component: () => import('@Pages/Payroll/Index.vue'),
meta: {
title: 'Nómina',
icon: 'payments',
}
},
{
path: 'additional',
name: 'additional.index',
component: () => import('@Pages/Additional/Index.vue'),
meta: {
title: 'Información Adicional',
icon: 'info',
}
},
{
path: '',
name: 'profile.notifications.index',
component: () => import('@Pages/Profile/Notifications/Index.vue')
}
]
},
]
path: 'profile',
name: 'profile.show',
component: () => import('@Pages/Profile/Show.vue'),
meta: {
title: 'Perfil',
icon: 'person',
}
},
{
path: 'profile/notifications',
name: 'profile.notifications.index',
component: () => import('@Pages/Profile/Notifications/Index.vue'),
meta: {
title: 'Notificaciones',
icon: 'notifications',
}
},
],
},