Feat: Implement card view option in Asistencias, Planillas, and Tareas modules

This commit introduces a selectable card view in the index pages for the Asistencias, Planillas, and Tareas modules, similar to the existing functionality in the Empleados module.

Key changes:
- Added view toggle buttons (Table/Cards) to `AsistenciasIndex.vue`, `PlanillasIndex.vue`, and `TareasIndex.vue`.
- Implemented conditional rendering to display either the existing data table or a new grid of card components.
- Ensured card components (`cardAsistencia.vue`, `cardPlanilla.vue`, `cardTarea.vue`) are correctly populated with data from their respective Pinia stores.
- Styled the active view toggle button using module-specific accent colors.
- Maintained loading and error state displays for both views.
- Updated "no data" messages to be specific to table or card view.

These enhancements provide you with an alternative way to visualize module data, improving the overall user experience.

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>

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>

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>