I've created a new reusable table component `NucleoTable.vue` to standardize table implementations across the UI.
Key changes:
- `NucleoTable.vue` (`ui/src/components/ui/NucleoTable.vue`) created with props for columns, items, accent color, and background color name. It supports custom cell rendering and action slots.
- I've implemented basic styling using Tailwind CSS, respecting dynamic accent and background colors from the UI store.
- It declares `editItem` and `deleteItem` events for parent components to handle.
- I've refactored existing table components to use `NucleoTable.vue`:
- `tablaAsistencias.vue`
- `tablaEmpleados.vue`
- `tablaPlanillas.vue`
- `tablaTareas.vue`
- Each refactored table now passes its specific data, column definitions, and styling props to `NucleoTable`. Custom cell rendering and action button logic are maintained using slots, preserving original functionality and styling.
This change reduces code duplication and makes future updates to table structures and styles more manageable. You've confirmed that all tables function and appear as expected after refactoring.
a5aaad5201