Refactor: Standardize UI table components and update README

This commit introduces a standardized approach to table components within the UI.

Key changes include:
- Refactored tablaAsistencias.vue, tablaEmpleados.vue, tablaPlanillas.vue, and tablaTareas.vue to use Tailwind CSS for consistent styling.
- Defined and applied common Tailwind utility patterns for table structure (container, header, body, rows, cells), action buttons (with SVG icons), and status indicators (badges).
- Created a shared utility file at `ui/src/utils/formatters.js` for common functions like date formatting, currency formatting, text truncation, and status class generation, reducing code duplication.
- Updated table components to use these shared utility functions.
- Updated `ui/README.md` to document the UI modules, the standardized table structure, styling conventions, and usage of utility functions.

This standardization enhances code maintainability, improves consistency in the user interface, and provides clear guidelines for future table component development.

ui/README.md

@@ -1,5 +1,52 @@
-# Vue 3 + Vite
+# Project UI (Vue 3 + Vite)
+
+This project frontend is built with Vue 3 and Vite. It provides a user interface for managing various aspects of the application.
+
+## Development
 
 This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
 Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+
+## UI Structure
+
+The UI is organized into several modules, each handling a specific domain of the application. Common UI elements, like tables, have been standardized for a consistent look and feel.
+
+## UI Modules
+
+The application currently includes the following primary UI modules:
+
+*   **Asistencias (Attendance):** Manages attendance records.
+*   **Empleados (Employees):** Manages employee information.
+*   **Planillas (Payrolls/Sheets):** Manages payrolls or general data sheets.
+*   **Tareas (Tasks):** Manages tasks and assignments.
+
+Each module typically provides views for listing, creating, and editing items within its domain.
+
+## Standardized Table Components
+
+To ensure consistency across the application, table components used for displaying lists of data (e.g., `tablaAsistencias.vue`, `tablaEmpleados.vue`) have been standardized.
+
+**Key Features & Standards:**
+
+*   **Styling:** Tables are styled using **Tailwind CSS**. This utility-first CSS framework allows for flexible and consistent styling.
+*   **Structure:**
+    *   **Container:** Tables are wrapped in a `div` with classes `p-4 sm:p-6 bg-white shadow-md rounded-lg overflow-x-auto` for padding, background, shadow, rounded corners, and horizontal scrolling on smaller screens.
+    *   **Table:** The `<table>` element uses `min-w-full divide-y divide-gray-200`.
+    *   **Header (`<thead>`):** Styled with `bg-gray-50`. Header cells (`<th>`) use `px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider`.
+    *   **Body (`<tbody>`):** Uses `bg-white divide-y divide-gray-200`. Data rows (`<tr>`) have a hover effect (`hover:bg-gray-100`). Data cells (`<td>`) use `px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700`.
+    *   **No Data Message:** A standardized message "No hay [items] para mostrar." is displayed if the table is empty, styled with `px-6 py-10 text-center text-gray-500 text-lg`.
+*   **Action Buttons:**
+    *   Common actions like "Edit" and "Delete" are standardized.
+    *   Buttons use SVG icons (Heroicons outline style) and consistent Tailwind CSS classes for styling and hover/focus states (e.g., `text-blue-600 hover:text-blue-800` for edit, `text-red-600 hover:text-red-800` for delete).
+    *   Actions are typically grouped in a `div` with `flex items-center space-x-2`.
+*   **Status Indicators:**
+    *   Status fields (e.g., "Estado") are visually represented using badges with consistent styling (`px-2.5 py-0.5 rounded-full text-xs font-semibold` along with color classes like `bg-green-100 text-green-800`).
+*   **Utility Functions:**
+    *   Common data formatting (dates, currency, text truncation) and status styling logic is centralized in `ui/src/utils/formatters.js`. Components import and use these functions to maintain consistency and reduce code duplication.
+*   **Theming:**
+    *   While the overall table structure is standardized, module-specific accent colors (defined as CSS variables like `var(--accent-color-module)`) are used in the parent views (e.g., `AsistenciasIndex.vue`) for elements like page titles and "Create New" buttons. This allows some thematic distinction per module.
+*   **Creating New Tables:**
+    *   When adding new tables to the UI, they should adhere to these established standards to maintain a cohesive user experience. Refer to existing components like `tablaAsistencias.vue` or `tablaPlanillas.vue` as a template.
+
+This standardization aims to improve code maintainability, reduce redundancy, and provide a consistent and predictable user interface.