David 18324f92bd feat: add person and department management features

- Implemented Person entity with validation and update methods.
- Created CalendarDate value object for date validation.
- Developed migration script to transition company_contacts to person and department structures.
- Established Sequelize models for departments and assignments.
- Introduced request DTOs for person and department management.
- Added shared DTO schemas for validation.
- Built assignment and department forms with validation and submission handling.
- Created people section to manage and display company personnel.
- Implemented person form for adding and editing personnel details.

2026-10-03 13:13:15 +02:00

3.1 KiB

Raw Blame History

Componentes de interfaz

Metis Desk usa shadcn/ui, con Base UI y el estilo base-vega, siguiendo la organización de factuges-erp. Los componentes viven en packages/shadcn-ui y se consumen mediante el paquete @repo/shadcn-ui. El código se genera desde el registro oficial y queda versionado en este repositorio, sin depender del ERP.

Componentes actuales

Button: volver a comprobar la conexión.
Card: bloques de información y estado.
Select: cambio entre castellano e inglés, con navegación por teclado.
Input y Label: credenciales y datos de usuario.
Checkbox: estado activo de usuarios, compañías, personas y departamentos.
Table: listados de usuarios, compañías, personas y departamentos.
Textarea: dirección opcional de las sedes, con varias líneas.
Dialog: formularios sencillos de alta y edición, con foco y cierre por teclado. FormDialog comparte el título y la cancelación traducidos.

Convención de navegación

Los listados presentan datos, búsqueda y acciones. El botón de alta se coloca en la cabecera, a la derecha. Los formularios sencillos se abren en un modal; los complejos o con muchos campos se presentan en una página propia. No mostrar formularios junto al listado. Las ediciones se abren mediante una acción explícita. Compañías, personas, departamentos, asignaciones, sedes y usuarios siguen este criterio. Las personas se crean y editan en una página propia; los departamentos y las asignaciones usan modales. El historial se consulta en un diálogo.

TanStack Table filtra el listado de compañías por nombre; React Hook Form gestiona los formularios con los contratos Zod compartidos.

El paquete exporta componentes individuales. Importar solo el componente necesario:

import { Button } from "@repo/shadcn-ui/components/button";

El tema se define una sola vez en packages/shadcn-ui/src/styles/globals.css. La aplicación importa ese CSS y declara las fuentes de Tailwind de los módulos y del paquete compartido. Usar tokens semánticos como bg-background, text-foreground y border-border en vez de repetir colores por pantalla.

Añadir componentes

Desde la raíz del proyecto, dentro de WSL:

pnpm --filter @repo/shadcn-ui ui:add input

El CLI está fijado en package.json. Revisar los archivos y dependencias añadidos antes de validar. No usar --overwrite sin revisar las adaptaciones locales. apps/web/components.json también permite al CLI localizar el paquete compartido desde la aplicación.

Después de generar código, separar los imports de tipos con import type y ejecutar las comprobaciones del proyecto. No añadir todo el catálogo ni crear envoltorios sin una necesidad concreta.

Dependencias

Base UI proporciona interacción accesible y gestión del foco. class-variance-authority define variantes del botón; cn combina clases de Tailwind. lucide-react aporta los iconos del selector y tw-animate-css sus transiciones. shadcn es una herramienta de desarrollo; su hoja de estilos común se incorpora al compilar.

Guías oficiales: monorepos e instalación manual.

3.1 KiB Raw Blame History