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/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;

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 */
 }

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) => {