feat: Reinstate local view toggles in module indexes

This commit updates the module index pages to re-introduce local view toggle buttons, allowing you to temporarily switch between table and card visualizations for the current session. This change is based on your feedback to retain this flexibility alongside the new global default view settings.

Key changes:

- **Module Index Views (e.g., `EmpleadosIndex.vue`):**
    - Re-added icon-based toggle buttons for 'Table' and 'Card' views.
    - Styled these buttons using Tailwind CSS for a subtle and modern appearance. The active view's button is highlighted using the module's accent color.
    - Clicking these buttons updates a local `currentView` ref, which determines the displayed component (table or card).
    - This local selection overrides the global default view for the current session only and does not modify the saved default setting in the `useUi` store.

- **Testing:**
    - Updated component tests for each module's index view (`AsistenciasIndex.spec.js`, `EmpleadosIndex.spec.js`, etc.).
    - Tests now verify:
        - Correct rendering and initial styling of the new toggle buttons based on the global default.
        - Local view switching functionality upon button clicks.
        - Correct update of button styling to reflect the active local view.
        - Confirmation that local view changes do not affect the global default view settings in the `useUi` store.

This enhancement ensures that you can set a global default view for each module via settings, while still having the option to quickly toggle the view for your immediate needs without changing your saved preferences.

ui/src/views/asistencias/AsistenciasIndex.vue

@@ -7,7 +7,25 @@
       </button>
     </header>
 
-    <!-- Removed manual view toggle buttons -->
+    <!-- View Toggle Buttons -->
+    <div class="mb-4 flex justify-end space-x-2">
+      <button
+        @click="currentView = 'table'"
+        :class="btnViewClass('table')"
+        aria-label="Table View"
+        title="Table View"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
+      </button>
+      <button
+        @click="currentView = 'card'"
+        :class="btnViewClass('card')"
+        aria-label="Card View"
+        title="Card View"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
+      </button>
+    </div>
 
     <div v-if="isLoading" class="loading-message">
       Cargando asistencias...
@@ -95,7 +113,13 @@ const handleEditAsistencia = (asistenciaId) => {
   router.push({ name: 'asistencias-edit', params: { id: asistenciaId } });
 };
 
-// Removed btnClass as manual toggle buttons are removed
+const btnViewClass = (viewType) => {
+  const base = 'p-2 rounded-md transition-colors duration-150 ease-in-out';
+  if (currentView.value === viewType) {
+    return `${base} bg-[var(--accent-color-asistencias)] text-white shadow-lg`;
+  }
+  return `${base} bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600`;
+};
 
 </script>