Merge branch 'main' of https://github.com/josedario87/planilla

2025-05-31 01:12:48 -06:00
parent ca1e3f2952 8fd1ba672e
commit abae0d373e
13 changed files with 309 additions and 64 deletions
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -21,6 +21,16 @@ watchEffect(() => {
  root.style.setProperty('--accent-color-tareas', ui.accentColorTareas)
  root.style.setProperty('--accent-color-planillas', ui.accentColorPlanillas)
  root.style.setProperty('--accent-color-asistencias', ui.accentColorAsistencias)
+  // Note: Configuracion accent color is missing here, should be added if used for CSS vars.
+  // root.style.setProperty('--accent-color-configuracion', ui.accentColorConfiguracion)
+
+
+  // Per-module table background colors
+  root.style.setProperty('--table-bg-color-empleados', ui.tableBgColorEmpleados)
+  root.style.setProperty('--table-bg-color-tareas', ui.tableBgColorTareas)
+  root.style.setProperty('--table-bg-color-planillas', ui.tableBgColorPlanillas)
+  root.style.setProperty('--table-bg-color-asistencias', ui.tableBgColorAsistencias)
+  root.style.setProperty('--table-bg-color-configuracion', ui.tableBgColorConfiguracion)

  if (ui.theme === 'dark') {
    root.classList.add('theme-dark')
--- a/ui/src/components/asistencias/cardAsistencia.vue
+++ b/ui/src/components/asistencias/cardAsistencia.vue
@@ -1,12 +1,13 @@
 <template>
  <div class="asistencia-card">
    <div class="card-header">
-      <span class="empleado-id">Empleado ID: {{ asistencia.empleado_id }}</span>
+      <h4>Asistencia ID: {{ asistencia.id }}</h4>
      <span :class="`estado-asistencia estado-${asistencia.estado?.toLowerCase().replace(/\s+/g, '-')}`">
        {{ asistencia.estado || 'N/A' }}
      </span>
    </div>
    <div class="card-body">
+      <p><strong>Empleado ID:</strong> {{ asistencia.empleado_id }}</p>
      <p><strong>Entrada:</strong> {{ formatDateTime(asistencia.entrada) }}</p>
      <p><strong>Salida:</strong> {{ asistencia.salida ? formatDateTime(asistencia.salida) : 'No registrada' }}</p>
      <p v-if="asistencia.observacion" class="observacion">
@@ -40,14 +41,14 @@ const asistenciasStore = useAsistenciasStore();
 const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return 'N/A';
  const date = new Date(dateTimeString);
-  return date.toLocaleString('es-ES', { // Spanish locale
-    year: 'numeric',
-    month: '2-digit', // Using 2-digit for month for brevity in card
-    day: '2-digit',   // Using 2-digit for day
-    hour: '2-digit',
-    minute: '2-digit',
+  return date.toLocaleString('es-HN', { timeZone: 'America/Tegucigalpa', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }); // Spanish locale
+    // year: 'numeric', // Already present in the new options
+    // month: '2-digit', // Using 2-digit for month for brevity in card // Already present in the new options
+    // day: '2-digit',   // Using 2-digit for day // Already present in the new options
+    // hour: '2-digit', // Already present in the new options
+    // minute: '2-digit', // Already present in the new options
    // second: '2-digit', // Optional: include seconds
-  });
+  // }); // Removed this line as options are now in a single line
 };

 const editAsistencia = () => {
@@ -96,7 +97,14 @@ const deleteAsistenciaInternal = async () => {
  border-bottom: 1px solid #f0f0f0; /* Even lighter border */
 }

-.empleado-id {
+.card-header h4 { /* Style for the new Asistencia ID header */
+  font-weight: bold;
+  color: var(--accent-color-asistencias); /* Accent color */
+  font-size: 1.15em; /* Slightly larger for main header element */
+  margin: 0; /* Remove default margin */
+}
+
+.empleado-id { /* This class is no longer used in the header, but could be reused elsewhere if needed */
  font-weight: bold;
  color: var(--accent-color-asistencias); /* Accent color */
  font-size: 1.05em;
--- a/ui/src/components/asistencias/tablaAsistencias.vue
+++ b/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;
--- a/ui/src/components/empleados/tablaEmpleados.vue
+++ b/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>
--- a/ui/src/components/planillas/cardPlanilla.vue
+++ b/ui/src/components/planillas/cardPlanilla.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="planilla-card">
-    <h3>{{ planilla.titulo }}</h3>
+    <h4>Planilla ID: {{ planilla.id }}</h4>
+    <p><strong>Título:</strong> {{ planilla.titulo }}</p>
    <p><strong>Empleado ID:</strong> {{ planilla.empleado_id }}</p>
    <p><strong>Desde:</strong> {{ formatDate(planilla.fecha_desde) }}</p>
    <p><strong>Hasta:</strong> {{ formatDate(planilla.fecha_hasta) }}</p>
@@ -31,11 +32,7 @@ const planillasStore = usePlanillasStore();
 const formatDate = (dateString) => {
  if (!dateString) return 'N/A';
  const date = new Date(dateString);
-  return date.toLocaleDateString('es-ES', { // Using Spanish locale for date
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
+  return date.toLocaleDateString('es-HN', { timeZone: 'America/Tegucigalpa', year: 'numeric', month: 'long', day: 'numeric' });
 };

 const formatCurrency = (value) => {
@@ -80,7 +77,13 @@ const deletePlanilla = async () => {
  background-color: #f9f9f9;
 }

-.planilla-card h3 {
+.planilla-card h4 { /* Updated selector from h3 to h4 */
+  margin-top: 0;
+  color: var(--accent-color-planillas); /* Accent color for title */
+  font-size: 1.2em; /* Adjust size as needed, h4 is typically smaller than h3 */
+}
+
+.planilla-card h3 { /* Keep if h3 is used elsewhere, or remove if h4 is the new standard */
  margin-top: 0;
  color: var(--accent-color-planillas); /* Accent color for title */
 }
--- a/ui/src/components/planillas/tablaPlanillas.vue
+++ b/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;
--- a/ui/src/components/tareas/cardTarea.vue
+++ b/ui/src/components/tareas/cardTarea.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="tarea-card">
-    <h4>{{ tarea.titulo }}</h4>
+    <h4>Tarea ID: {{ tarea.id }}</h4>
+    <p><strong>Título:</strong> {{ tarea.titulo }}</p>
    <p><strong>Empleado ID:</strong> {{ tarea.empleado_id }}</p>
    <p><strong>Fecha:</strong> {{ formatDate(tarea.fecha) }}</p>
    <p><strong>Estado:</strong> <span :class="`estado-${tarea.estado?.toLowerCase().replace(/\s+/g, '-')}`">{{ tarea.estado }}</span></p>
@@ -33,11 +34,7 @@ const tareasStore = useTareasStore();
 const formatDate = (dateString) => {
  if (!dateString) return 'N/A';
  const date = new Date(dateString);
-  return date.toLocaleDateString('es-ES', { // Spanish locale
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
+  return date.toLocaleString('es-HN', { timeZone: 'America/Tegucigalpa', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' });
 };

 const formatCurrency = (value) => {
--- a/ui/src/components/tareas/tablaTareas.vue
+++ b/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;
--- a/ui/src/stores/useUi.js
+++ b/ui/src/stores/useUi.js
@@ -17,6 +17,12 @@ const appearanceSettingKeys = [
  'accentColorPlanillas',
  'accentColorAsistencias',
  'accentColorConfiguracion',
+  // Per-module table background colors
+  'tableBgColorEmpleados',
+  'tableBgColorTareas',
+  'tableBgColorPlanillas',
+  'tableBgColorAsistencias',
+  'tableBgColorConfiguracion',
 ]

 const loadSettingsFromLocalStorage = () => {
@@ -78,6 +84,12 @@ export const useUi = defineStore('ui', {
      accentColorPlanillas: '#FF9800',  // Orange
      accentColorAsistencias: '#E91E63', // Pink
      accentColorConfiguracion: '#607D8B', // Blue Grey
+      // Per-module table background colors - default to white
+      tableBgColorEmpleados: '#FFFFFF',
+      tableBgColorTareas: '#FFFFFF',
+      tableBgColorPlanillas: '#FFFFFF',
+      tableBgColorAsistencias: '#FFFFFF',
+      tableBgColorConfiguracion: '#FFFFFF',
    }

    const loadedSettings = loadSettingsFromLocalStorage()
@@ -163,6 +175,28 @@ export const useUi = defineStore('ui', {
    setAccentColorConfiguracion(color) {
      this.accentColorConfiguracion = color
      _saveAppearanceState(this)
+    },
+
+    // Actions for per-module table background colors
+    setTableBgColorEmpleados(color) {
+      this.tableBgColorEmpleados = color
+      _saveAppearanceState(this)
+    },
+    setTableBgColorTareas(color) {
+      this.tableBgColorTareas = color
+      _saveAppearanceState(this)
+    },
+    setTableBgColorPlanillas(color) {
+      this.tableBgColorPlanillas = color
+      _saveAppearanceState(this)
+    },
+    setTableBgColorAsistencias(color) {
+      this.tableBgColorAsistencias = color
+      _saveAppearanceState(this)
+    },
+    setTableBgColorConfiguracion(color) {
+      this.tableBgColorConfiguracion = color
+      _saveAppearanceState(this)
    }
  },
 })
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -52,7 +52,7 @@
    </section>

    <!-- Typography Section -->
-    <section>
+    <section class="mb-10">
      <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Typography</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="setting-item">
@@ -70,38 +70,86 @@
      </div>
    </section>

-    <!-- Module Accent Colors Section -->
-    <section class="mb-10"> <!-- Changed from no margin to mb-10 for consistency -->
-      <h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Module Accent Colors</h2>
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+    <!-- Per-Module Color Settings -->
+    <section class="mb-10 module-settings-group">
+      <h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Empleados Module</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <div class="setting-item">
-          <label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Empleados Accent</label>
+          <label for="accentColorEmpleados" class="block text-sm font-medium mb-1">Accent Color</label>
          <input type="color" id="accentColorEmpleados" v-model="ui.accentColorEmpleados" @input="ui.setAccentColorEmpleados($event.target.value)"
                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
        </div>
        <div class="setting-item">
-          <label for="accentColorTareas" class="block text-sm font-medium mb-1">Tareas Accent</label>
-          <input type="color" id="accentColorTareas" v-model="ui.accentColorTareas" @input="ui.setAccentColorTareas($event.target.value)"
-                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
-        </div>
-        <div class="setting-item">
-          <label for="accentColorPlanillas" class="block text-sm font-medium mb-1">Planillas Accent</label>
-          <input type="color" id="accentColorPlanillas" v-model="ui.accentColorPlanillas" @input="ui.setAccentColorPlanillas($event.target.value)"
-                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
-        </div>
-        <div class="setting-item">
-          <label for="accentColorAsistencias" class="block text-sm font-medium mb-1">Asistencias Accent</label>
-          <input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
-                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
-        </div>
-        <div class="setting-item">
-          <label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Configuracion Accent</label>
-          <input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($event.target.value)"
+          <label for="tableBgColorEmpleados" class="block text-sm font-medium mb-1">Table Background</label>
+          <input type="color" id="tableBgColorEmpleados" v-model="ui.tableBgColorEmpleados" @input="ui.setTableBgColorEmpleados($event.target.value)"
                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
        </div>
      </div>
    </section>

+    <section class="mb-10 module-settings-group">
+      <h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Tareas Module</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div class="setting-item">
+          <label for="accentColorTareas" class="block text-sm font-medium mb-1">Accent Color</label>
+          <input type="color" id="accentColorTareas" v-model="ui.accentColorTareas" @input="ui.setAccentColorTareas($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="tableBgColorTareas" class="block text-sm font-medium mb-1">Table Background</label>
+          <input type="color" id="tableBgColorTareas" v-model="ui.tableBgColorTareas" @input="ui.setTableBgColorTareas($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+      </div>
+    </section>
+
+    <section class="mb-10 module-settings-group">
+      <h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Planillas Module</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div class="setting-item">
+          <label for="accentColorPlanillas" class="block text-sm font-medium mb-1">Accent Color</label>
+          <input type="color" id="accentColorPlanillas" v-model="ui.accentColorPlanillas" @input="ui.setAccentColorPlanillas($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="tableBgColorPlanillas" class="block text-sm font-medium mb-1">Table Background</label>
+          <input type="color" id="tableBgColorPlanillas" v-model="ui.tableBgColorPlanillas" @input="ui.setTableBgColorPlanillas($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+      </div>
+    </section>
+
+    <section class="mb-10 module-settings-group">
+      <h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Asistencias Module</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div class="setting-item">
+          <label for="accentColorAsistencias" class="block text-sm font-medium mb-1">Accent Color</label>
+          <input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="tableBgColorAsistencias" class="block text-sm font-medium mb-1">Table Background</label>
+          <input type="color" id="tableBgColorAsistencias" v-model="ui.tableBgColorAsistencias" @input="ui.setTableBgColorAsistencias($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+      </div>
+    </section>
+
+    <section class="mb-10 module-settings-group">
+      <h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Configuración Module</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div class="setting-item">
+          <label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Accent Color</label>
+          <input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+        <div class="setting-item">
+          <label for="tableBgColorConfiguracion" class="block text-sm font-medium mb-1">Table Background</label>
+          <input type="color" id="tableBgColorConfiguracion" v-model="ui.tableBgColorConfiguracion" @input="ui.setTableBgColorConfiguracion($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+      </div>
+    </section>
  </div>
 </template>

--- a/ui/src/views/asistencias/AsistenciasIndex.vue
+++ b/ui/src/views/asistencias/AsistenciasIndex.vue
@@ -7,6 +7,16 @@
      </button>
    </header>

+    <div class="mb-6 flex justify-end items-center space-x-3">
+      <span class="text-sm font-medium text-gray-700">Cambiar Vista:</span>
+      <button @click="currentView = 'card'" :class="btnClass('card')">
+        Tarjetas
+      </button>
+      <button @click="currentView = 'table'" :class="btnClass('table')">
+        Tabla
+      </button>
+    </div>
+
    <div v-if="isLoading" class="loading-message">
      Cargando asistencias...
    </div>
@@ -17,12 +27,30 @@
    </div>
    
    <div v-else>
-      <tabla-asistencias 
-        :asistencias="asistenciasList"
-        @edit="handleEditAsistencia"
-      />
-      <div v-if="!asistenciasList || asistenciasList.length === 0 && !isLoading" class="no-data-message">
-        No hay asistencias registradas. Puede registrar una nueva haciendo clic en el botón de arriba.
+      <!-- Vista de Tabla -->
+      <div v-if="currentView === 'table'">
+        <tabla-asistencias
+          :asistencias="asistenciasList"
+          @edit="handleEditAsistencia"
+        />
+        <div v-if="asistenciasList.length === 0 && !isLoading" class="no-data-message">
+          No hay asistencias para mostrar en la vista de tabla.
+        </div>
+      </div>
+
+      <!-- Vista de Tarjetas -->
+      <div v-if="currentView === 'card'">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <CardAsistencia
+            v-for="asistencia in asistenciasList"
+            :key="asistencia.id"
+            :asistencia="asistencia"
+            @edit="handleEditAsistencia"
+          />
+        </div>
+        <div v-if="asistenciasList.length === 0 && !isLoading" class="no-data-message">
+          No hay asistencias para mostrar en la vista de tarjetas.
+        </div>
      </div>
    </div>

@@ -34,6 +62,7 @@ import { ref, computed, onMounted } from 'vue';
 import { useAsistenciasStore } from '../../stores/useAsistencias';
 import { useRouter } from 'vue-router';
 import TablaAsistencias from '../../components/asistencias/tablaAsistencias.vue';
+import CardAsistencia from '../../components/asistencias/cardAsistencia.vue';

 const asistenciasStore = useAsistenciasStore();
 const router = useRouter();
@@ -42,6 +71,8 @@ const isLoading = ref(true);
 const errorLoading = ref(false);
 const errorMessage = ref('');

+const currentView = ref('table'); // Default to table view
+
 const asistenciasList = computed(() => asistenciasStore.asistencias);

 onMounted(async () => {
@@ -69,6 +100,14 @@ const handleEditAsistencia = (asistenciaId) => {
  router.push({ name: 'asistencias-edit', params: { id: asistenciaId } });
 };

+const btnClass = (view) => {
+  const baseClasses = 'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2';
+  if (currentView.value === view) {
+    return `${baseClasses} text-white shadow-sm view-toggle-active-asistencias`;
+  }
+  return `${baseClasses} bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400`;
+};
+
 </script>

 <style scoped>
@@ -140,4 +179,12 @@ const handleEditAsistencia = (asistenciaId) => {
  color: #343a40; 
  border: 1px solid #e9ecef; 
 }
+
+/* Added for view toggle buttons */
+.view-toggle-active-asistencias {
+  background-color: var(--accent-color-asistencias);
+  /* Assuming --background-color is defined globally or use a fallback like #fff */
+  /* For Tailwind, theme('colors.white') could be an option if JIT is enabled and configured */
+  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-asistencias);
+}
 </style>
--- a/ui/src/views/planillas/PlanillasIndex.vue
+++ b/ui/src/views/planillas/PlanillasIndex.vue
@@ -7,6 +7,16 @@
      </button>
    </header>

+    <div class="mb-6 flex justify-end items-center space-x-3">
+      <span class="text-sm font-medium text-gray-700">Cambiar Vista:</span>
+      <button @click="currentView = 'card'" :class="btnClass('card')">
+        Tarjetas
+      </button>
+      <button @click="currentView = 'table'" :class="btnClass('table')">
+        Tabla
+      </button>
+    </div>
+
    <div v-if="isLoading" class="loading-message">
      Cargando planillas...
    </div>
@@ -17,12 +27,30 @@
    </div>
    
    <div v-else>
-      <tabla-planillas 
-        :planillas="planillasList"
-        @edit="handleEditPlanilla"
-      />
-      <div v-if="!planillasList || planillasList.length === 0 && !isLoading" class="no-data-message">
-        No hay planillas registradas. Puede crear una nueva haciendo clic en el botón de arriba.
+      <!-- Vista de Tabla -->
+      <div v-if="currentView === 'table'">
+        <tabla-planillas
+          :planillas="planillasList"
+          @edit="handleEditPlanilla"
+        />
+        <div v-if="planillasList.length === 0 && !isLoading" class="no-data-message">
+          No hay planillas para mostrar en la vista de tabla.
+        </div>
+      </div>
+
+      <!-- Vista de Tarjetas -->
+      <div v-if="currentView === 'card'">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <CardPlanilla
+            v-for="planilla in planillasList"
+            :key="planilla.id"
+            :planilla="planilla"
+            @edit="handleEditPlanilla"
+          />
+        </div>
+        <div v-if="planillasList.length === 0 && !isLoading" class="no-data-message">
+          No hay planillas para mostrar en la vista de tarjetas.
+        </div>
      </div>
    </div>

@@ -34,6 +62,7 @@ import { ref, computed, onMounted } from 'vue';
 import { usePlanillasStore } from '../../stores/usePlanillas';
 import { useRouter } from 'vue-router';
 import TablaPlanillas from '../../components/planillas/tablaPlanillas.vue'; // Corrected path
+import CardPlanilla from '../../components/planillas/cardPlanilla.vue';

 const planillasStore = usePlanillasStore();
 const router = useRouter();
@@ -42,6 +71,8 @@ const isLoading = ref(true); // Set to true initially
 const errorLoading = ref(false);
 const errorMessage = ref('');

+const currentView = ref('table'); // Default to table view
+
 // Computed property to get planillas from the store
 const planillasList = computed(() => planillasStore.planillas);

@@ -75,6 +106,14 @@ const handleEditPlanilla = (planillaId) => {
  router.push({ name: 'planillas-edit', params: { id: planillaId } });
 };

+const btnClass = (view) => {
+  const baseClasses = 'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2';
+  if (currentView.value === view) {
+    return `${baseClasses} text-white shadow-sm view-toggle-active-planillas`;
+  }
+  return `${baseClasses} bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400`;
+};
+
 </script>

 <style scoped>
@@ -149,4 +188,10 @@ const handleEditPlanilla = (planillaId) => {

 /* Styling for the imported tablaPlanillas can be managed within its own component,
   but you can add overrides or container styles here if needed. */
+
+/* Added for view toggle buttons */
+.view-toggle-active-planillas {
+  background-color: var(--accent-color-planillas);
+  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-planillas);
+}
 </style>
--- a/ui/src/views/tareas/TareasIndex.vue
+++ b/ui/src/views/tareas/TareasIndex.vue
@@ -7,6 +7,16 @@
      </button>
    </header>

+    <div class="mb-6 flex justify-end items-center space-x-3">
+      <span class="text-sm font-medium text-gray-700">Cambiar Vista:</span>
+      <button @click="currentView = 'card'" :class="btnClass('card')">
+        Tarjetas
+      </button>
+      <button @click="currentView = 'table'" :class="btnClass('table')">
+        Tabla
+      </button>
+    </div>
+
    <div v-if="isLoading" class="loading-message">
      Cargando tareas...
    </div>
@@ -17,12 +27,30 @@
    </div>
    
    <div v-else>
-      <tabla-tareas 
-        :tareas="tareasList"
-        @edit="handleEditTarea"
-      />
-      <div v-if="!tareasList || tareasList.length === 0 && !isLoading" class="no-data-message">
-        No hay tareas registradas. Puede crear una nueva haciendo clic en el botón de arriba.
+      <!-- Vista de Tabla -->
+      <div v-if="currentView === 'table'">
+        <tabla-tareas
+          :tareas="tareasList"
+          @edit="handleEditTarea"
+        />
+        <div v-if="tareasList.length === 0 && !isLoading" class="no-data-message">
+          No hay tareas para mostrar en la vista de tabla.
+        </div>
+      </div>
+
+      <!-- Vista de Tarjetas -->
+      <div v-if="currentView === 'card'">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <CardTarea
+            v-for="tarea in tareasList"
+            :key="tarea.id"
+            :tarea="tarea"
+            @edit="handleEditTarea"
+          />
+        </div>
+        <div v-if="tareasList.length === 0 && !isLoading" class="no-data-message">
+          No hay tareas para mostrar en la vista de tarjetas.
+        </div>
      </div>
    </div>

@@ -34,6 +62,7 @@ import { ref, computed, onMounted } from 'vue';
 import { useTareasStore } from '../../stores/useTareas';
 import { useRouter } from 'vue-router';
 import TablaTareas from '../../components/tareas/tablaTareas.vue';
+import CardTarea from '../../components/tareas/cardTarea.vue';

 const tareasStore = useTareasStore();
 const router = useRouter();
@@ -42,6 +71,8 @@ const isLoading = ref(true);
 const errorLoading = ref(false);
 const errorMessage = ref('');

+const currentView = ref('table'); // Default to table view
+
 const tareasList = computed(() => tareasStore.tareas);

 onMounted(async () => {
@@ -69,6 +100,14 @@ const handleEditTarea = (tareaId) => {
  router.push({ name: 'tareas-edit', params: { id: tareaId } });
 };

+const btnClass = (view) => {
+  const baseClasses = 'px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2';
+  if (currentView.value === view) {
+    return `${baseClasses} text-white shadow-sm view-toggle-active-tareas`;
+  }
+  return `${baseClasses} bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-400`;
+};
+
 </script>

 <style scoped>
@@ -140,4 +179,10 @@ const handleEditTarea = (tareaId) => {
  color: #495057; 
  border: 1px solid #ced4da; 
 }
+
+/* Added for view toggle buttons */
+.view-toggle-active-tareas {
+  background-color: var(--accent-color-tareas);
+  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-tareas);
+}
 </style>