CD SaaS

Plataforma de gestión para centros de día de personas mayores. Aplicación web moderna construida con Angular que permite la administración integral de usuarios, actividades, incidencias, transporte, personal y catálogos configurables.

---

Descripción General

CD SaaS es una aplicación multi-tenant diseñada para digitalizar y centralizar la gestión operativa de centros de día y residencias. La plataforma distingue dos perfiles de usuario principales:

• Superadministrador: Gestiona los clientes (tenants), planes de suscripción y administradores del sistema.
• Trabajador del centro: Gestiona el día a día del centro: usuarios atendidos, incidencias, transporte, baños, personal y catálogos configurables.

Backend: Enlace al repositorio del backend

---

Características Principales

Zona Pública

• Landing page informativa del producto.
• Login de trabajadores para acceder al área del centro.
• Registro de centros para nuevos clientes que desean contratar el servicio.
• Login de superadmin para administradores del sistema.

Zona Tenant (Centro de Día)

• Dashboard con resumen de actividades e incidencias.
• Gestión de usuarios: listado completo, perfil detallado, asistencia, pertenencias, medicación, alergias y enfermedades.
• Incidencias: registro de incidencias de usuarios y del centro.
• Baños y turnos: planificación de turnos de aseo.
• Transporte: gestión de rutas, vehículos y turnos.
• Trabajadores: gestión del personal y sus perfiles.
• Catálogos configurables: personas, salud, higiene, organización, calendario, transporte y ubicación.

Zona Admin (Superadmin)

• Dashboard de supervisión.
• Clientes (Tenants): gestión de los centros registrados.
• Planes: administración de tarifas y suscripciones.
• Administradores: gestión de usuarios con rol superadmin.
• Mi Perfil: configuración personal del administrador.

Seguridad

• Autenticación basada en JWT.
• Control de acceso por roles (SUPER_ADMIN / tenant user).
• Protección de rutas mediante guards funcionales.
• Interceptor HTTP que inyecta el token Authorization: Bearer <token> automáticamente.

---

Stack Tecnológico

Categoría	Tecnología
Framework	Angular 21
Paradigma	Standalone Components + Signals
Estilos	Tailwind CSS v4
Iconografía	Material Symbols (Google Fonts CDN)
Lenguaje	TypeScript 5.9
Testing	Vitest
HTTP Client	Angular HttpClient + interceptores funcionales
Reactividad	RxJS + Angular Signals
Autenticación	JWT (almacenado en localStorage)

---

Arquitectura

• Standalone Components: el proyecto está configurado en angular.json para generar componentes standalone por defecto. No se utiliza NgModule; todos los componentes son independientes y declaran sus imports inline en el decorador @Component.
• Estado local con Signals: no hay estado global centralizado (sin NgRx). Se usa signal() y computed() exclusivamente a nivel de componente para el estado de la UI.
• Patrón híbrido Observable + Signals: los servicios HTTP devuelven Observable de RxJS, que los componentes convierten a Signals reactivas mediante toSignal() / toObservable(). No se utiliza el async pipe en los templates.
• Inyección moderna: patrón inject() para inyección de dependencias. constructor() solo se emplea como contexto para ejecutar effect() al inicializar el componente.
• Detección de cambios: ChangeDetectionStrategy.OnPush en todos los componentes.

Layouts

La aplicación dispone de cuatro layouts diferenciados según la zona:

Layout	Uso
LandingLayout	Zona pública (landing page)
AuthLayout	Pantallas de autenticación (login, registro)
TenantShell	Área privada del centro (sidebar + header)
AdminShell	Área privada del superadmin (sidebar + header)

Seguridad de rutas

Cinco guards funcionales protegen el enrutado:

• authGuard — requiere sesión iniciada.
• guestGuard — requiere sesión cerrada.
• landingGuard — redirige a /tenant si ya está autenticado.
• tenantGuard — permite acceso a usuarios de centro; redirige admins a /admin.
• adminGuard — requiere rol SUPER_ADMIN.

Interceptor

• authInterceptor — interceptor funcional que añade automáticamente el header Authorization con el JWT a todas las peticiones HTTP salientes.

---

Requisitos Previos

• Node.js compatible con npm 11.6.2 (especificado en packageManager).
• Angular CLI 21.0.4 (recomendado).

---

Instalación y Ejecución

# Instalar dependencias
npm install

# Servidor de desarrollo
ng serve -o

La aplicación se abrirá automáticamente en http://localhost:4200/.

---

Estructura de Carpetas

src/
├── app/
│   ├── app.ts                    # Componente raíz
│   ├── app.config.ts             # Configuración de providers (router, HttpClient, interceptores)
│   ├── app.routes.ts             # Rutas principales
│   ├── guards/                   # Guards funcionales de seguridad
│   ├── interceptors/             # Interceptor de autenticación JWT
│   ├── layout/                   # Layouts de la aplicación
│   │   ├── landing/
│   │   ├── auth/
│   │   ├── shell/                # Layout del área tenant
│   │   └── admin-shell/          # Layout del área admin
│   ├── models/                   # Interfaces y tipos de dominio
│   ├── pages/                    # Páginas organizadas por zona
│   │   ├── landing/
│   │   ├── login/
│   │   ├── register/
│   │   ├── admin-login/
│   │   ├── tenant/               # Zona de centro de día
│   │   └── admin/                # Zona de superadmin
│   ├── services/                 # Servicios HTTP (CRUD, auth, catálogos)
│   ├── shared/                   # Componentes reutilizables (tablas, modales, tab-bar, etc.)
│   └── utils/                    # Helpers (decodificación JWT, etc.)
├── environments/                 # Configuración por entorno
├── index.html
├── main.ts                       # Bootstrap de la aplicación standalone
└── styles.css                    # Estilos globales (Tailwind)

---

Convenciones de Código

• Componentes standalone: generados por defecto como standalone mediante el schematic de angular.json. Todos declaran sus dependencias en imports inline dentro del decorador @Component.
• Sin estilos por componente: aunque inlineStyle: true está configurado en los schematics, en la práctica ningún componente declara estilos locales (styleUrl ni styles). Todo el diseño se realiza con clases utilitarias de Tailwind directamente en los templates HTML.
• Inyección de dependencias: uso exclusivo de inject() para inyectar servicios y dependencias. No se utiliza constructor() para inyección.
• Signals API: uso extensivo de input(), output(), toSignal(), toObservable() y effect(). No se utilizan los decoradores legacy @Input ni @Output.
• Prettier: configurado en package.json (printWidth: 100, singleQuote: true, parser angular para HTML).
• TypeScript estricto: activado en tsconfig.json (strict, noImplicitReturns, noFallthroughCasesInSwitch, etc.).
• Nomenclatura de modelos: por cada entidad se definen tres interfaces: Entity (lectura), EntityRequest (creación) y EntityUpdate (actualización parcial).

---

Scripts Disponibles

Comando	Descripción
npm start	Inicia el servidor de desarrollo
ng serve -o	Inicia y abre el navegador automáticamente
ng generate component <name>	Genera un nuevo componente standalone
ng test	Ejecuta los tests unitarios con Vitest

---