From 365bbbb89e38ab67f3a7cdf95d1d68fbf2c34a8d 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:29:59 +0000
Subject: [PATCH] feat(ui): Synchronize card backgrounds with table background
 settings

This commit updates the card components in all modules (Asistencias, Empleados, Planillas, Tareas) to use the same background color as you specified in the module's "Table Background" setting.

Previously, card backgrounds were hardcoded (typically white). Now, they dynamically reflect your color choice for the corresponding module's table, ensuring visual consistency.

Changes made:
- Modified `cardAsistencia.vue`, `cardEmpleado.vue`, `cardPlanilla.vue`, and `cardTarea.vue`.
- Each card component now imports the `useUi` store.
- The main container of each card component has its `backgroundColor` style dynamically bound to the respective `tableBgColor<ModuleName>` property from the `useUi` store (e.g., `ui.tableBgColorAsistencias` for `cardAsistencia.vue`).
- Removed the static `bg-white` class from these card components.

This change directly addresses the issue where cards did not respect the color customization you selected in settings for table backgrounds.
---
 ui/src/components/asistencias/cardAsistencia.vue | 5 ++++-
 ui/src/components/empleados/cardEmpleado.vue     | 5 ++++-
 ui/src/components/planillas/cardPlanilla.vue     | 5 ++++-
 ui/src/components/tareas/cardTarea.vue           | 5 ++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/asistencias/cardAsistencia.vue b/ui/src/components/asistencias/cardAsistencia.vue
index 5a2c389..f5a14b7 100644
--- a/ui/src/components/asistencias/cardAsistencia.vue
+++ b/ui/src/components/asistencias/cardAsistencia.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
+  <div :style="{ backgroundColor: ui.tableBgColorAsistencias }" class="shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
     <div class="flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
       <h4 class="text-lg md:text-xl font-semibold" :style="{ color: 'var(--accent-color-asistencias)' }">Asistencia ID: {{ asistencia.id }}</h4>
       <span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(asistencia.estado)]">
@@ -34,8 +34,11 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 import { useAsistenciasStore } from '../../stores/useAsistencias';
+import { useUi } from '../../stores/useUi.js';
 import { computed } from 'vue';
 
+const ui = useUi();
+
 const props = defineProps({
   asistencia: {
     type: Object,
diff --git a/ui/src/components/empleados/cardEmpleado.vue b/ui/src/components/empleados/cardEmpleado.vue
index 1abb0cf..d9cd0aa 100644
--- a/ui/src/components/empleados/cardEmpleado.vue
+++ b/ui/src/components/empleados/cardEmpleado.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
+  <div :style="{ backgroundColor: ui.tableBgColorEmpleados }" class="shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
     <div class="flex items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
       <img
         :src="employee.avatar_url || 'https://via.placeholder.com/150'"
@@ -47,6 +47,9 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { useRouter } from 'vue-router'
+import { useUi } from '../../stores/useUi.js';
+
+const ui = useUi();
 
 interface Employee {
   id: string | number
diff --git a/ui/src/components/planillas/cardPlanilla.vue b/ui/src/components/planillas/cardPlanilla.vue
index 92f7fe0..7d610b2 100644
--- a/ui/src/components/planillas/cardPlanilla.vue
+++ b/ui/src/components/planillas/cardPlanilla.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
+  <div :style="{ backgroundColor: ui.tableBgColorPlanillas }" class="shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
     <div class="flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
       <h4 class="text-lg md:text-xl font-semibold" :style="{ color: 'var(--accent-color-planillas)' }">Planilla ID: {{ planilla.id }}</h4>
       <span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(planilla.estado)]">
@@ -33,6 +33,9 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 import { usePlanillasStore } from '../../stores/usePlanillas';
+import { useUi } from '../../stores/useUi.js';
+
+const ui = useUi();
 
 const props = defineProps({
   planilla: {
diff --git a/ui/src/components/tareas/cardTarea.vue b/ui/src/components/tareas/cardTarea.vue
index 3e15c10..71cfe39 100644
--- a/ui/src/components/tareas/cardTarea.vue
+++ b/ui/src/components/tareas/cardTarea.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
+  <div :style="{ backgroundColor: ui.tableBgColorTareas }" class="shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
     <div class="flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
       <h4 class="text-lg md:text-xl font-semibold" :style="{ color: 'var(--accent-color-tareas)' }">Tarea ID: {{ tarea.id }}</h4>
       <span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(tarea.estado)]">
@@ -36,6 +36,9 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 import { useTareasStore } from '../../stores/useTareas'; 
+import { useUi } from '../../stores/useUi.js';
+
+const ui = useUi();
 
 const props = defineProps({
   tarea: {