From 40497940f31ba6c9db43c47f2aa72986eebbd640 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 08:26:53 +0000
Subject: [PATCH 1/2] feat: Use dynamic background colors for forms

This commit updates the form components to use the dynamic background colors specified in your UI settings.

The following forms were modified:
- AsistenciaForm.vue
- EmpleadoForm.vue
- PlanillaForm.vue
- TareaForm.vue

Each form now imports the `useUi` store and binds the style of its main container to the corresponding `tableBgColor[Module]` property. This ensures that the form background color matches the table background color you selected in the settings.
---
 ui/src/views/asistencias/AsistenciaForm.vue | 6 ++++--
 ui/src/views/empleados/EmpleadoForm.vue     | 5 ++++-
 ui/src/views/planillas/PlanillaForm.vue     | 6 ++++--
 ui/src/views/tareas/TareaForm.vue           | 6 ++++--
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ui/src/views/asistencias/AsistenciaForm.vue b/ui/src/views/asistencias/AsistenciaForm.vue
index 29c5f49..757b92f 100644
--- a/ui/src/views/asistencias/AsistenciaForm.vue
+++ b/ui/src/views/asistencias/AsistenciaForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="asistencia-form-container">
+  <div class="asistencia-form-container" :style="{ backgroundColor: uiStore.tableBgColorAsistencias }">
     <h2>{{ formTitle }}</h2>
     <form @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -48,6 +48,7 @@
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
 import { useAsistenciasStore } from '../../stores/useAsistencias';
+import { useUiStore } from '../../stores/useUiStore'; // Import UI store
 import { useRouter, useRoute } from 'vue-router';
 
 const props = defineProps({
@@ -57,6 +58,7 @@ const props = defineProps({
 const router = useRouter();
 const route = useRoute(); 
 const asistenciasStore = useAsistenciasStore();
+const uiStore = useUiStore(); // Instantiate UI store
 
 const formatDateTimeForInput = (dateString) => {
   const date = dateString ? new Date(dateString) : new Date();
@@ -207,7 +209,7 @@ const handleCancel = () => {
   max-width: 600px;
   margin: 20px auto;
   padding: 25px;
-  background-color: #f9f9f9;
+  /* background-color: #f9f9f9; */ /* Removed to use dynamic background */
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
diff --git a/ui/src/views/empleados/EmpleadoForm.vue b/ui/src/views/empleados/EmpleadoForm.vue
index f52006d..8deb25a 100644
--- a/ui/src/views/empleados/EmpleadoForm.vue
+++ b/ui/src/views/empleados/EmpleadoForm.vue
@@ -6,7 +6,8 @@
 
     <form
       @submit.prevent="handleSubmit"
-      class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-lg"
+      class="max-w-lg mx-auto p-8 rounded-lg shadow-lg"
+      :style="{ backgroundColor: uiStore.tableBgColorEmpleados }"
     >
       <!-- ───────── Nombre ───────── -->
       <div class="mb-6">
@@ -149,6 +150,7 @@ import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useEmpleadosStore } from '@/stores/useEmpleados.js'
+import { useUiStore } from '@/stores/useUiStore'; // Import UI store
 
 /* ───── Tipos ───── */
 interface EmpleadoForm {
@@ -179,6 +181,7 @@ const router = useRouter()
 /* ───── Store ───── */
 const empleadosStore         = useEmpleadosStore()
 const { currentEmpleado }    = storeToRefs(empleadosStore)
+const uiStore = useUiStore(); // Instantiate UI store
 
 /* ───── State ───── */
 const form         = ref<EmpleadoForm>(defaultForm())
diff --git a/ui/src/views/planillas/PlanillaForm.vue b/ui/src/views/planillas/PlanillaForm.vue
index 9d1b76d..784ba59 100644
--- a/ui/src/views/planillas/PlanillaForm.vue
+++ b/ui/src/views/planillas/PlanillaForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="planilla-form-container">
+  <div class="planilla-form-container" :style="{ backgroundColor: uiStore.tableBgColorPlanillas }">
     <h2>{{ formTitle }}</h2>
     <form @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -53,6 +53,7 @@
 <script setup>
 import { ref, reactive, onMounted, computed, watch } from 'vue';
 import { usePlanillasStore } from '../../stores/usePlanillas';
+import { useUiStore } from '../../stores/useUiStore'; // Import UI store
 import { useRouter, useRoute } from 'vue-router';
 
 const props = defineProps({
@@ -63,6 +64,7 @@ const router = useRouter();
 const route = useRoute(); // Can also get id from route.params.id
 
 const planillasStore = usePlanillasStore();
+const uiStore = useUiStore(); // Instantiate UI store
 
 const formData = reactive({
   titulo: '',
@@ -215,7 +217,7 @@ const handleCancel = () => {
   max-width: 600px;
   margin: 20px auto;
   padding: 20px;
-  background-color: #f9f9f9;
+  /* background-color: #f9f9f9; */ /* Removed to use dynamic background */
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
diff --git a/ui/src/views/tareas/TareaForm.vue b/ui/src/views/tareas/TareaForm.vue
index 7200f2b..d3a2879 100644
--- a/ui/src/views/tareas/TareaForm.vue
+++ b/ui/src/views/tareas/TareaForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tarea-form-container">
+  <div class="tarea-form-container" :style="{ backgroundColor: uiStore.tableBgColorTareas }">
     <h2>{{ formTitle }}</h2>
     <form @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -65,6 +65,7 @@
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
 import { useTareasStore } from '../../stores/useTareas';
+import { useUiStore } from '../../stores/useUiStore'; // Import UI store
 import { useRouter, useRoute } from 'vue-router';
 
 const props = defineProps({
@@ -74,6 +75,7 @@ const props = defineProps({
 const router = useRouter();
 const route = useRoute(); 
 const tareasStore = useTareasStore();
+const uiStore = useUiStore(); // Instantiate UI store
 
 const formatDateForInput = (dateString) => {
   const date = dateString ? new Date(dateString) : new Date();
@@ -227,7 +229,7 @@ const handleCancel = () => {
   max-width: 650px;
   margin: 20px auto;
   padding: 25px;
-  background-color: #f9f9f9;
+  /* background-color: #f9f9f9; */ /* Removed to use dynamic background */
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }

From 22be76fb091ba2939156658ec0f36fccea2d4de2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 08:34:11 +0000
Subject: [PATCH 2/2] fix: Correct UI store instantiation in form components

This commit corrects the UI store instantiation in the following form components:
- AsistenciaForm.vue
- EmpleadoForm.vue
- PlanillaForm.vue
- TareaForm.vue

The components now correctly import `useUi` from `~/stores/useUi` and instantiate the store using `const uiStore = useUi()`. This adheres to the correct Pinia conventions.
---
 ui/src/views/asistencias/AsistenciaForm.vue | 4 ++--
 ui/src/views/empleados/EmpleadoForm.vue     | 4 ++--
 ui/src/views/planillas/PlanillaForm.vue     | 4 ++--
 ui/src/views/tareas/TareaForm.vue           | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/src/views/asistencias/AsistenciaForm.vue b/ui/src/views/asistencias/AsistenciaForm.vue
index 757b92f..a61656c 100644
--- a/ui/src/views/asistencias/AsistenciaForm.vue
+++ b/ui/src/views/asistencias/AsistenciaForm.vue
@@ -48,7 +48,7 @@
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
 import { useAsistenciasStore } from '../../stores/useAsistencias';
-import { useUiStore } from '../../stores/useUiStore'; // Import UI store
+import { useUi } from '@/stores/useUi'; // Corrected UI store import
 import { useRouter, useRoute } from 'vue-router';
 
 const props = defineProps({
@@ -58,7 +58,7 @@ const props = defineProps({
 const router = useRouter();
 const route = useRoute(); 
 const asistenciasStore = useAsistenciasStore();
-const uiStore = useUiStore(); // Instantiate UI store
+const uiStore = useUi(); // Corrected UI store instantiation
 
 const formatDateTimeForInput = (dateString) => {
   const date = dateString ? new Date(dateString) : new Date();
diff --git a/ui/src/views/empleados/EmpleadoForm.vue b/ui/src/views/empleados/EmpleadoForm.vue
index 8deb25a..8429a51 100644
--- a/ui/src/views/empleados/EmpleadoForm.vue
+++ b/ui/src/views/empleados/EmpleadoForm.vue
@@ -150,7 +150,7 @@ import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useEmpleadosStore } from '@/stores/useEmpleados.js'
-import { useUiStore } from '@/stores/useUiStore'; // Import UI store
+import { useUi } from '@/stores/useUi'; // Corrected UI store import
 
 /* ───── Tipos ───── */
 interface EmpleadoForm {
@@ -181,7 +181,7 @@ const router = useRouter()
 /* ───── Store ───── */
 const empleadosStore         = useEmpleadosStore()
 const { currentEmpleado }    = storeToRefs(empleadosStore)
-const uiStore = useUiStore(); // Instantiate UI store
+const uiStore = useUi(); // Corrected UI store instantiation
 
 /* ───── State ───── */
 const form         = ref<EmpleadoForm>(defaultForm())
diff --git a/ui/src/views/planillas/PlanillaForm.vue b/ui/src/views/planillas/PlanillaForm.vue
index 784ba59..238ea5d 100644
--- a/ui/src/views/planillas/PlanillaForm.vue
+++ b/ui/src/views/planillas/PlanillaForm.vue
@@ -53,7 +53,7 @@
 <script setup>
 import { ref, reactive, onMounted, computed, watch } from 'vue';
 import { usePlanillasStore } from '../../stores/usePlanillas';
-import { useUiStore } from '../../stores/useUiStore'; // Import UI store
+import { useUi } from '@/stores/useUi'; // Corrected UI store import
 import { useRouter, useRoute } from 'vue-router';
 
 const props = defineProps({
@@ -64,7 +64,7 @@ const router = useRouter();
 const route = useRoute(); // Can also get id from route.params.id
 
 const planillasStore = usePlanillasStore();
-const uiStore = useUiStore(); // Instantiate UI store
+const uiStore = useUi(); // Corrected UI store instantiation
 
 const formData = reactive({
   titulo: '',
diff --git a/ui/src/views/tareas/TareaForm.vue b/ui/src/views/tareas/TareaForm.vue
index d3a2879..ab9ed00 100644
--- a/ui/src/views/tareas/TareaForm.vue
+++ b/ui/src/views/tareas/TareaForm.vue
@@ -65,7 +65,7 @@
 <script setup>
 import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
 import { useTareasStore } from '../../stores/useTareas';
-import { useUiStore } from '../../stores/useUiStore'; // Import UI store
+import { useUi } from '@/stores/useUi'; // Corrected UI store import
 import { useRouter, useRoute } from 'vue-router';
 
 const props = defineProps({
@@ -75,7 +75,7 @@ const props = defineProps({
 const router = useRouter();
 const route = useRoute(); 
 const tareasStore = useTareasStore();
-const uiStore = useUiStore(); // Instantiate UI store
+const uiStore = useUi(); // Corrected UI store instantiation
 
 const formatDateForInput = (dateString) => {
   const date = dateString ? new Date(dateString) : new Date();