nucleo000/planilla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/chat-color-customization

Browse Source
This commit is contained in:
josedario87
2025-05-31 03:45:26 -06:00
committed by GitHub
parent 5fc581a180 6dc4dcfb14
commit e98f108784
8 changed files with 207 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/views/ChatView.vue
View File

@@ -4,11 +4,36 @@ import CanvasChat from '@/components/chat/CanvasChat.vue'
</script>
<template>
<div class="h-full flex flex-col">
<CanvasChat class="flex-1" />
<div class="chat-view-container flex flex-col h-full">
<header class="page-header">
<h1>Chat</h1>
</header>
<CanvasChat class="flex-1 min-h-0" /> <!-- Added min-h-0 -->
</div>
</template>
<style scoped>
/* nada por ahora */
.chat-view-container {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--background-color-chat, #F0F0F0); /* Fallback to store default */
}
.page-header {
display: flex;
justify-content: space-between; /* Consistent with other headers, even if no button on right */
align-items: center;
margin-bottom: 25px; /* Consistent with PlanillasIndex */
padding: 10px 20px; /* Provides padding for the header itself */
border-bottom: 1px solid #eee; /* Consistent with PlanillasIndex */
}
.page-header h1 {
color: var(--accent-color-chat, #0D9488); /* Fallback to store default */
font-size: 2.2em; /* Consistent with PlanillasIndex */
font-weight: 600; /* Consistent with PlanillasIndex */
}
/* CanvasChat is expected to manage its own internal padding and scrolling */
</style>

19
ui/src/views/empleados/EmpleadoForm.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="p-6 bg-gray-100 min-h-screen">
<div class="p-6 min-h-screen empleado-form-page-container">
<h1 class="text-3xl font-bold mb-8 text-center text-gray-700">
{{ isEditMode ? 'Editar Empleado' : 'Crear Empleado' }}
</h1>
<form
@submit.prevent="handleSubmit"
class="max-w-lg mx-auto p-8 rounded-lg shadow-lg"
:style="{ backgroundColor: uiStore.tableBgColorEmpleados }"
class="max-w-lg mx-auto p-8 rounded-lg shadow-lg empleado-actual-form"
>
<!-- ───────── Nombre ───────── -->
<div class="mb-6">
@@ -242,6 +242,19 @@ input:required:invalid {
/* Removing generic input:focus, button:focus as they are too broad */
/* --- Look & feel extra (opcional, podés ajustar) --- */
.empleado-form-page-container {
background-color: var(--background-color, #f3f4f6); /* Fallback to a light gray */
}
.empleado-actual-form {
background-color: #ffffff; /* Default white for light theme */
}
/* Example for dark theme (assuming a parent class .dark or data attribute) */
.dark .empleado-actual-form {
background-color: #2d3748; /* A dark gray for dark theme */
}
.form-container { background-color: var(--background-color); } /* Use theme background */
.form-card { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),
0 4px 6px -2px rgba(0,0,0,.05); }

120
ui/src/views/empleados/EmpleadosIndex.vue
View File

@@ -1,21 +1,11 @@
<template>
<div class="p-6 bg-gray-50 min-h-screen">
<div class="empleados-index-container">
<!-- … encabezado … -->
<header class="mb-8">
<div class="flex justify-between items-center">
<h1 class="text-4xl font-bold text-gray-800">Gestión de Empleados</h1>
<button
@click="goToCreateEmployee"
class="create-button px-6 py-3 text-white font-semibold rounded-lg shadow-md focus:outline-none transition duration-150 ease-in-out"
>
<!-- ícono ➕ -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
Crear Empleado
</button>
</div>
<p class="mt-2 text-gray-600">Visualiza, crea y gestiona los empleados de la organización.</p>
<header class="page-header">
<h1>Gestión de Empleados</h1>
<button @click="goToCreateEmployee" class="btn-create">
Crear Empleado
</button>
</header>
<!-- selector de vista -->
@@ -40,12 +30,11 @@
<!-- contenido -->
<div>
<div v-if="loading" class="text-center py-10">
<p class="text-gray-500 text-xl">Cargando empleados...</p>
</div>
<div v-if="loading" class="loading-message">Cargando empleados...</div>
<div v-else-if="error" class="text-center py-10">
<p class="text-red-500 text-xl">Error al cargar los empleados: {{ error }}</p>
<div v-else-if="error" class="error-message-full">
<p>Error al cargar los empleados. Por favor, intente de nuevo más tarde.</p>
<p v-if="error">Detalle: {{ error }}</p>
</div>
<div v-else>
@@ -59,19 +48,16 @@
:key="employee.id"
:employee="employee"
/>
<div v-if="employees.length === 0" class="col-span-full text-center py-10">
<p class="text-gray-500 text-xl">No hay empleados para mostrar en la vista de tarjetas.</p>
</div>
</div>
<div v-if="currentView === 'card' && employees.length === 0 && !loading" class="no-data-message">
No hay empleados para mostrar en la vista de tarjetas.
</div>
<!-- vista de tabla -->
<div v-if="currentView === 'table'">
<TablaEmpleados :employees="employees" />
<div
v-if="employees.length === 0"
class="text-center py-10 bg-white shadow-md rounded-lg mt-4"
>
<p class="text-gray-500 text-xl">No hay empleados para mostrar en la vista de tabla.</p>
<div v-if="employees.length === 0 && !loading" class="no-data-message">
No hay empleados para mostrar en la vista de tabla.
</div>
</div>
</div>
@@ -134,22 +120,84 @@ const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
</script>
<style scoped>
.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); } /* Assuming --navbar-height is defined elsewhere or adjust */
.empleados-index-container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
font-family: Arial, sans-serif;
min-height: calc(100vh - var(--navbar-height, 0px)); /* Assuming --navbar-height is defined elsewhere or adjust */
}
.create-button {
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.page-header h1 {
color: var(--accent-color-empleados); /* Accent for title */
font-size: 2.2em;
font-weight: 600;
}
.btn-create {
background-color: var(--accent-color-empleados);
color: white; /* Assuming accent is dark enough */
padding: 12px 18px;
border: none;
border-radius: 5px;
font-size: 1em;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.create-button:hover {
filter: brightness(1.1);
.btn-create:hover {
filter: brightness(0.9);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.create-button:focus {
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
.btn-create:focus {
box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-empleados);
}
.loading-message,
.error-message-full,
.no-data-message {
text-align: center;
padding: 25px;
margin-top: 25px;
border-radius: 8px;
font-size: 1.1em;
}
.loading-message {
color: #7f8c8d; /* Gray */
}
.error-message-full {
background-color: #fdedec; /* Lighter red */
color: #e74c3c; /* Strong red */
border: 1px solid #f5b7b1; /* Light red border */
}
.error-message-full p {
margin: 5px 0;
}
.no-data-message {
background-color: #eafaf1; /* Lighter green/blue */
color: #2ecc71; /* Green */
border: 1px solid #a3e4d7; /* Light green/blue border */
}
.view-toggle-active {
background-color: var(--accent-color-empleados);
/* For focus, assuming white text on accent. Adjust if needed. */
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-empleados);
}
/* Inactive toggle button styling is handled by Tailwind classes directly in btnClass function */