planilla/ui/README.md

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 to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

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.