Merge pull request #13 from josedario87/feat/per-module-table-backgrounds

Feat/per module table backgrounds

ui/src/components/asistencias/tablaAsistencias.vue

@@ -94,6 +94,8 @@ const deleteAsistenciaInternal = async (id) => {
 }
 
 .tabla-asistencias {
+  /* Apply module-specific background color */
+  background-color: var(--table-bg-color-asistencias);
   width: 100%;
   border-collapse: collapse;
   margin-top: 1em;

ui/src/components/empleados/tablaEmpleados.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="overflow-x-auto bg-white shadow-md rounded-lg p-4">
-    <table class="min-w-full divide-y divide-gray-200">
+    <table class="min-w-full divide-y divide-gray-200 table-empleados">
       <thead class="bg-gray-50">
         <tr>
           <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -172,4 +172,8 @@ button:hover svg {
 .overflow-x-auto {
   border: 1px solid #e5e7eb; /* Tailwind's gray-200 */
 }
+
+table.table-empleados {
+  background-color: var(--table-bg-color-empleados);
+}
 </style>

ui/src/components/planillas/tablaPlanillas.vue

@@ -97,6 +97,7 @@ const deletePlanillaInternal = async (id) => {
 }
 
 .tabla-planillas {
+  background-color: var(--table-bg-color-planillas); /* Added */
   width: 100%;
   border-collapse: collapse;
   margin-top: 1em;

ui/src/components/tareas/tablaTareas.vue

@@ -99,6 +99,7 @@ const deleteTareaInternal = async (id) => {
 }
 
 .tabla-tareas {
+  background-color: var(--table-bg-color-tareas); /* Added */
   width: 100%;
   border-collapse: collapse;
   margin-top: 1em;