Merge pull request #18 from josedario87/style/standardize-table-ui

Refactor: Standardize table UI across modules

ui/src/components/asistencias/tablaAsistencias.vue

@@ -1,7 +1,16 @@
 <template>
-  <div class="p-4 sm:p-6 rounded-lg overflow-x-auto" :style="{ backgroundColor: ui.tableBgColorAsistencias }">
+  <div
-    <table class="min-w-full divide-y divide-gray-200">
+    class="p-4 sm:p-6 rounded-lg overflow-x-auto"
-      <thead class="bg-gray-50 dark:bg-slate-700">
+    :style="{ backgroundColor: ui.tableBgColorAsistencias }"
+  >
+    <table
+      class="min-w-full divide-y divide-[var(--accent-color-asistencias)]"
+      :style="{ backgroundColor: ui.tableBgColorAsistencias }"
+    >
+      <thead
+        class="divide-y divide-[var(--accent-color-asistencias)]"
+        :style="{ backgroundColor: ui.tableBgColorAsistencias }"
+      >
         <tr>
           <th class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">ID</th>
           <th class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">Empleado ID</th>
@@ -12,7 +21,11 @@
           <th class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">Acciones</th>
         </tr>
       </thead>
-      <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+
+      <tbody
+        class="divide-y divide-[var(--accent-color-asistencias)]"
+        :style="{ backgroundColor: ui.tableBgColorAsistencias }"
+      >
         <tr v-if="!asistencias || asistencias.length === 0">
           <td colspan="7" class="px-6 py-10 text-center text-gray-500 dark:text-slate-400 text-lg">No hay asistencias para mostrar.</td>
         </tr>

ui/src/components/empleados/tablaEmpleados.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-4 sm:p-6 rounded-lg overflow-x-auto" :style="{ backgroundColor: ui.tableBgColorEmpleados }">
-    <table class="min-w-full divide-y divide-gray-200">
+    <table class="min-w-full divide-y divide-[var(--accent-color-empleados)]" :style="{ backgroundColor: ui.tableBgColorEmpleados }">
-      <thead class="bg-gray-50 dark:bg-slate-700">
+      <thead class="divide-y divide-[var(--accent-color-empleados)]" :style="{ backgroundColor: ui.tableBgColorEmpleados }">
         <tr>
           <th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
             Avatar
@@ -26,7 +26,7 @@
           </th>
         </tr>
       </thead>
-      <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+      <tbody class="divide-y divide-[var(--accent-color-empleados)]" :style="{ backgroundColor: ui.tableBgColorEmpleados }">
         <tr v-if="!employees || employees.length === 0">
           <td colspan="7" class="px-6 py-10 text-center text-gray-500 dark:text-slate-400 text-lg">
             No hay empleados para mostrar.

ui/src/components/planillas/tablaPlanillas.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-4 sm:p-6 rounded-lg overflow-x-auto" :style="{ backgroundColor: ui.tableBgColorPlanillas }">
-    <table class="min-w-full divide-y divide-gray-200">
+    <table class="min-w-full divide-y divide-[var(--accent-color-planillas)]" :style="{ backgroundColor: ui.tableBgColorPlanillas }">
-      <thead class="bg-gray-50 dark:bg-slate-700">
+      <thead class="divide-y divide-[var(--accent-color-planillas)]" :style="{ backgroundColor: ui.tableBgColorPlanillas }">
         <tr>
           <th class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">ID</th>
           <th class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">Título</th>
@@ -13,7 +13,7 @@
           <th class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">Acciones</th>
         </tr>
       </thead>
-      <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
+      <tbody class="divide-y divide-[var(--accent-color-planillas)]" :style="{ backgroundColor: ui.tableBgColorPlanillas }">
         <tr v-if="planillas && planillas.length === 0">
           <td colspan="8" class="px-6 py-10 text-center text-gray-500 dark:text-slate-400 text-lg">No hay planillas para mostrar.</td>
         </tr>

ui/src/components/tareas/tablaTareas.vue

@@ -8,7 +8,7 @@
       :style="{ backgroundColor: ui.tableBgColorTareas }"
     >
       <thead
-        class="divide-y divide-gray-200 dark:divide-slate-700"
+        class="divide-y divide-[var(--accent-color-tareas)]"
         :style="{ backgroundColor: ui.tableBgColorTareas }"
       >
         <tr>
@@ -58,7 +58,7 @@
                 class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600/20 focus:ring-blue-500 dark:focus:ring-blue-400"
                 title="Editar"
               >
-                <!-- ícono editar -->
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>
               </button>
 
               <button
@@ -66,7 +66,7 @@
                 class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 hover:bg-red-100 dark:hover:bg-red-600/20 focus:ring-red-500 dark:focus:ring-red-400"
                 title="Eliminar"
               >
-                <!-- ícono eliminar -->
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12.56 0c1.153 0 2.24.03 3.22.077m3.22-.077L10.879 3.28a2.25 2.25 0 012.244-2.077h.093c.956 0 1.853.543 2.244 2.077L14.74 5.79m-4.858 0l-2.828-2.828A1.875 1.875 0 016.188 2.188l2.828 2.828m6.912 0l2.828-2.828a1.875 1.875 0 00-2.652-2.652L12 5.79M9.26 9h5.48L9.26 9z" /></svg>
               </button>
             </div>
           </td>