166 lines
7.5 KiB
Vue
166 lines
7.5 KiB
Vue
<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> |