I've standardized the visual appearance, structure, and functionality of card components across different modules (Asistencias, Empleados, Planillas, Tareas) to ensure a consistent user experience for you.
Key changes include:
- **Consistent HTML Structure:** All cards now follow a common layout with `card-header`, `card-body`, and `card-actions` sections.
- **Tailwind CSS Styling:** I've refactored card styling to use Tailwind CSS utility classes, removing scoped CSS where possible. This promotes maintainability and a unified design language. Tailwind CSS has been configured for the `ui` package.
- **CSS Variables for Theming:** I've introduced global CSS variables in `ui/src/style.css` for module-specific accent colors and common UI elements (e.g., warning colors, shadows), allowing for easier theming and consistent color usage.
- **Standardized Functionality:**
- I've ensured "Edit" and "Delete" buttons have a consistent appearance and behavior.
- Delete confirmation dialogs now use a standard message format.
- I've removed the "View Details" button from `cardEmpleado.vue` for consistency, as other modules integrate detail viewing within their "Edit" forms.
- **README Update:** I've added a comprehensive section to `ui/README.md` documenting the standardized card components, including their structure, styling approach with Tailwind, theming via CSS variables, and basic usage guidelines.
These changes improve the visual consistency and maintainability of the UI's card elements.
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.
