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

@@ -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);
 }

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())

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);
 }

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);
 }