This commit introduces module-specific accent colors and further integrates
the primary and secondary theme colors throughout the application's UI components.
Key features:
- Four new customizable accent colors, one for each main module:
- Empleados
- Tareas
- Planillas
- Asistencias
- These accent colors are configurable in the Settings view and persist in local storage.
- Broader application of global primary and secondary colors to common UI elements like navigation bars.
- Module-specific components now use their designated accent color for key visual elements (e.g., primary buttons, titles, icons, borders), providing better visual differentiation between modules.
Changes include:
- Extended `ui/src/stores/useUi.js` to manage state for the four new module accent colors, including actions and local storage persistence.
- Added a "Module Accent Colors" section with color pickers to `ui/src/views/SettingsView.vue`.
- Updated `ui/src/App.vue` to expose these module accent colors as CSS variables (e.g., `--accent-color-empleados`).
- Systematically updated styles in general UI components (`ui/src/components/ui/`) and all module-specific components (`ui/src/components/{module}/` and `ui/src/views/{module}/`) to utilize the new global and module-specific theme colors.
- Updated unit tests for `useUi.js` and component tests for `SettingsView.vue` to cover the new accent color functionality. A bug related to color input event handling in `SettingsView.vue` was identified and fixed during this process.
This enhancement provides a more visually distinct and customizable experience across different sections of the application.
This commit refactors the project to use a shared Prisma schema and restricts direct database access to the API service.
Key changes:
- Created a new shared package `core/prisma` containing the Prisma schema, generated client, and types.
- Configured the monorepo to use NPM workspaces, including `core/prisma` and all services.
- Updated all services (`api`, `ui`, `mcp`, `agent`, and the background processing service) to depend on `@empresa/prisma-schema`.
- The API service now imports `PrismaClient` from `@empresa/prisma-schema/client`.
- Other services import only types from `@empresa/prisma-schema`.
- Removed redundant Prisma configurations from `api` and the background processing service.
- Updated the background processing service's `sync-empleados.js` to fetch data via an API call instead of direct database access.
- Updated TypeScript configurations (`tsconfig.base.json` and service-specific ones) to support the new structure and path aliases.
- Updated `README.md` to reflect the new architecture and added convenience scripts for Prisma operations.
This change promotes a single source of truth for data models, reduces code duplication, and improves the overall architecture by centralizing database operations within the API service.
This commit introduces a new configuration module for UI appearance settings.
You can now customize various aspects of the application's look and feel.
Key features:
- Customizable color palette: primary, secondary, warning, and background colors.
- Font customization: font family and font size.
- Theme selection: light and dark themes.
- Animation control: toggle animations on/off.
Changes include:
- Extended `ui/src/stores/useUi.js` to manage appearance state, including actions for updates and integration with local storage for persistence.
- Created `ui/src/views/SettingsView.vue` with UI controls for all customizable settings.
- Implemented dynamic application of settings in `ui/src/App.vue` by updating CSS variables and classes on the root element.
- Enhanced `SettingsView.vue` with modern styling (TailwindCSS) and subtle animations, ensuring it's theme-aware and respects animation preferences.
- Added comprehensive unit tests for the `useUi` store and component tests for `SettingsView.vue` using Vitest and Vue Test Utils.
The settings page allows for real-time previews of changes, and all preferences are saved locally to persist across sessions.
Here's what I did:
- Added `container_name` for `api` and `ui` services in `docker-compose.yml`.
- Created `ui/src/apiClient.js` to configure the API base URL using the API container name (`http://planilla-api:4000/api`).
- Added `axios` as a dependency to the UI project.
- Ensured UI store files correctly import the new `apiClient.js`.
This will allow your UI to reliably connect to the API service using Docker's internal DNS resolution via container names.
This commit introduces the following features:
1. **Empleado UI Components:**
* `EmpleadoForm.vue`: A form for creating and editing employee data.
* `cardEmpleado.vue`: A component to display a summary of employee information in a card format.
* `tablaEmpleados.vue`: A component to display a list of employees in a table format.
* `EmpleadosIndex.vue`: A view that displays both the card and table components, allowing you to switch between views and create new employees.
2. **Chat Interface Integration:**
* Modified `agent/handlers.js` to parse specific chat commands:
* "Quiero crear un nuevo @empleado": Responds with the `EmpleadoForm`.
* "Ver @empleado<CEDULA>": Responds with the `cardEmpleado` for the specified employee.
* "Mostrame los primeros X @empleados": Responds with `tablaEmpleados` displaying the requested number of employees.
* I send formatted messages (e.g., `CHAT_UI_COMPONENT::EmpleadoForm`) that the chat UI can interpret to render the Vue components.
3. **Tests:**
* Added unit tests for the new Vue components (`EmpleadoForm.vue`, `cardEmpleado.vue`, `tablaEmpleados.vue`) using Vitest.
* Added integration tests for the chat command handling in `agent/handlers.js` using Jest.
* (Note: Test execution was inconclusive, but all necessary files and configurations are included).
These changes fulfill the issue requirements by creating the necessary UI for the empleado module and enabling the summoning of these UI elements through the chat interface.
