🦷 Clínica Dental - Frontend

Este es el frontend del sistema de gestión de una clínica dental. Desarrollado con Angular 17, se conecta a un backend NestJS para ofrecer funcionalidades como gestión de citas, pacientes, profesionales, disponibilidades y autenticación con JWT.

---

📚 Índice

1. 🚀 Tecnologías principales
2. 🧪 Herramientas de desarrollo
3. ⚙️ Requisitos del sistema
4. ▶️ Instalación y ejecución
5. 📁 Estructura de carpetas
6. 🔐 Autenticación
7. 🌐 Comunicación con Backend
8. 🎨 Estilos
9. 🧩 Componentes clave
10. 📝 Esquema de Roles y Flujo
11. 🖼️ Capturas de Pantalla

---

🚀 Tecnologías principales

• Angular 17 (core, router, animations, forms)
• Angular Material 17
• RxJS 7.8
• TypeScript 5.3
• Day.js para manejo de fechas
• JWT Decode para decodificar tokens y control de roles
• FontAwesome 6 para iconos
• Zone.js para gestión de zonas de ejecución en Angular
• CSS nativo para estilos personalizados
• localStorage para persistencia de sesión

---

🧪 Herramientas de desarrollo

• Angular CLI para scaffolding y build
• TypeScript como lenguaje principal
• Jasmine + Karma para testing

---

⚙️ Requisitos del sistema

• Node.js: v20.11.0
• npm: 10.2.4
• Angular CLI: 17.3.17

---

▶️ Instalación y ejecución

git clone https://github.com/fran-eliot/dental-front.git
cd dental-front
npm install
ng serve -o

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

---

📁 Estructura de carpetas

src/
├── app/
│   ├── appointments/
│   │   ├── historical-appointments/
│   │   └── new-appointments/
│   ├── dentistas/
│   │   ├── consulta-disponibilidades-dentista/
│   │   ├── dentista-dashboard/
│   │   ├── dentista-agenda-diaria/
│   │   ├── dentista-agenda-semanal/
│   │   ├── dentista-layout/
│   │   ├── historial-citas-dentista/
│   │   ├── historial-citas-paciente/
│   │   └── historial-citas-paciente-modal/
│   ├── disponibilidades/
│   │   ├── consulta-disponibilidades/
│   │   ├── consulta-preview/
│   │   ├── disponibilidades-mensuales/
│   │   ├── generador-disponibilidades/
│   │   ├── limpieza-disponibilidades/
│   │   ├── lista-disponibilidades/
│   │   ├── selector-disponibilidades/
│   │   ├── slots-libres/
│   │   └── slots-libres-preview/
│   ├── login/
│   ├── patients/
│   ├── professionals/
│   ├── register-user/
│   ├── treatments/
│   ├── unauthorized/
│   └── users/

---

🔐 Autenticación

• La autenticación se gestiona mediante JWT:

• Al iniciar sesión correctamente, el token se guarda en localStorage.

• El token se incluye automáticamente en los headers de las peticiones HTTP mediante interceptores.

    Authorization: Bearer <jwt_token>

• El sistema protege rutas según roles: admin, dentista (futura mejora: paciente).

---

🌐 Comunicación con Backend

• El frontend se comunica con el backend NestJS a través de servicios Angular personalizados.

• Todos los endpoints utilizan peticiones HTTP estándar (GET, POST, PATCH, DELETE) y consumen las rutas expuestas en el backend.

• El repositorio del backend está disponible aquí: 👉 Clínica Dental - Backend (NestJS)

• Los endpoints están documentados vía Swagger en el backend: 📌 http://localhost:3000/api

---

🎨 Estilos

• Se utiliza CSS nativo (no SCSS, Tailwind ni Bootstrap).

• Existe una hoja de estilo base compartida (custom-theme.scss) para mantener consistencia visual entre componentes:

  • Fondo semitransparente

  • Bordes redondeados y sombras suaves

  • Colores definidos por variables :root

• Estética moderna, limpia y orientada a usabilidad para personal clínico y administrativo.

---

🧩 Componentes clave

📅 Appointments

• historical-appointments

• new-appointments

🧑‍⚕️ Dentistas

• consulta-disponibilidades-dentista

• dentista-dashboard

• dentista-agenda-diaria

• dentista-agenda-semanal

• dentista-layout

• historial-citas-dentista

• historial-citas-paciente

• historial-citas-paciente-modal

📆 Disponibilidades

• consulta-disponibilidades

• consulta-preview

• disponibilidades-mensuales

• generador-disponibilidades

• limpieza-disponibilidades

• lista-disponibilidades

• selector-disponibilidades

• slots-libres

• slots-libres-preview

👤 Usuarios y otros

• login

• patients

• professionals

• register-user

• treatments

• unauthorized

• users

---

📝 Esquema de Roles y Flujo

A continuación se muestra un esquema simplificado con el flujo de navegación y acciones permitidas para los dos roles principales de la aplicación (Secretaria/Admin y Profesional/Dentista):

🖼️ Capturas de Pantalla

🧭 Vistas Comunes

Pantalla	Descripción
	Pantalla principal tras el login
	Pantalla de acceso al sistema
	Listado general de servicios ofrecidos

👩‍💼 Vistas de Secretaria / Administrador

Pantalla	Descripción
	Formulario para registrar un nuevo paciente
	Ficha con información del paciente
	Vista general de todas las citas agendadas
	Creación de una nueva cita
	Administración de disponibilidades semanales
	Generación mensual automática de disponibilidades
	Eliminación de disponibilidades antiguas
	Formulario para crear un tratamiento
	Lista de tratamientos disponibles
	Edición de datos de un profesional

---

🦷 Vistas de Profesional / Dentista

Pantalla	Descripción
	Citas asignadas al dentista para el día actual
	Vista semanal de la agenda del dentista
	Consulta de slots libres desde el panel del dentista
	Historial de pacientes atendidos por el profesional
	Citas anteriores de un paciente

  |

---

📄 Presentación en PDF

Puedes consultar la presentación general de la aplicación (incluye contexto, objetivos, estructura y funcionalidades principales) en el siguiente documento:

📘 Ver presentación en PDF

---

🔮 Mejoras Futuras

• Rol "Paciente" con login propio
• Notificaciones por email
• Filtrado avanzado por tipo de tratamiento
• Internacionalización (i18n)

---

🧑‍💻 Autores

Este proyecto ha sido desarrollado como parte de un sistema completo de gestión de una clínica dental, para el curso "Desarrollo Frontend con Angular" de Fundación Adecco.

Los autores del proyecto son:

• Ainhoa Alonso
• Fran Ramírez
• Asusalin Abou