# 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.