# harold474/saludya_frontend architecture

> Architecture diagram of the GitHub repository harold474/saludya_frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/harold474/saludya_frontend
- Repository: https://github.com/harold474/saludya_frontend

## Overview

SaludYa is a React frontend for a medical appointment portal with patient, clinician, and administrator views. The main workflow is patient registration or login, browsing clinicians and availability, booking or rescheduling an appointment, and then reviewing or cancelling it; clinicians manage appointment status, while administrators manage users and the global agenda. The frontend calls a separately hosted API. The README describes only the React/Vite template, so product capabilities here are inferred from the sampled components and route wiring; recovery-password implementation details were not sampled.

Main entry points: [`src/App.jsx`](https://github.com/harold474/saludya_frontend/blob/main/src/App.jsx) (Routes and session), [`src/components/Login.jsx`](https://github.com/harold474/saludya_frontend/blob/main/src/components/Login.jsx) (Sign in), [`src/main.jsx`](https://github.com/harold474/saludya_frontend/blob/main/src/main.jsx) (React bootstrap), [`src/components/Registro.jsx`](https://github.com/harold474/saludya_frontend/blob/main/src/components/Registro.jsx) (Patient registration)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_main["React bootstrap<br/>[main.jsx]"]
  node_app["Routes and session<br/>[App.jsx]"]
  node_home["Home page<br/>[Home.jsx]"]
end

subgraph group_identity["Identity"]
  node_browser_store[("Browser storage")]
  node_login["Sign in<br/>[Login.jsx]"]
  node_register["Patient registration<br/>[Registro.jsx]"]
  node_recovery["Password recovery"]
end

subgraph group_patient["Patient appointments"]
  node_booking["Book or reschedule<br/>[VistaPaciente.jsx]"]
  node_appointments["My appointments<br/>[MisCitas.jsx]"]
end

subgraph group_staff["Staff operations"]
  node_doctor["Clinician agenda<br/>[VistaMedico.jsx]"]
  node_admin["Admin panel<br/>[PanelAdmin.jsx]"]
end

node_visitor(("Portal user"))
node_api{{"SaludYa API"}}

node_visitor -.->|"opens portal"| node_main
node_main -->|"renders"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_register
node_app -->|"routes to"| node_recovery
node_app -->|"guards patient route"| node_appointments
node_app -->|"guards patient route"| node_booking
node_app -->|"guards clinician route"| node_doctor
node_app -->|"guards admin route"| node_admin
node_app -->|"loads and clears session"| node_browser_store
node_login -->|"stores user"| node_browser_store
node_login -->|"posts credentials"| node_api
node_register -->|"posts registration"| node_api
node_booking -->|"loads doctors and slots; submits appointment"| node_api
node_appointments -->|"loads and cancels appointments"| node_api
node_doctor -->|"loads agenda and updates status"| node_api
node_admin -->|"loads and changes staff, agenda, and appointments"| node_api

click node_main "https://github.com/harold474/saludya_frontend/blob/main/src/main.jsx"
click node_app "https://github.com/harold474/saludya_frontend/blob/main/src/App.jsx"
click node_home "https://github.com/harold474/saludya_frontend/blob/main/src/components/Home.jsx"
click node_login "https://github.com/harold474/saludya_frontend/blob/main/src/components/Login.jsx"
click node_register "https://github.com/harold474/saludya_frontend/blob/main/src/components/Registro.jsx"
click node_recovery "https://github.com/harold474/saludya_frontend/blob/main/src/components/RecuperarPassword.jsx"
click node_booking "https://github.com/harold474/saludya_frontend/blob/main/src/components/VistaPaciente.jsx"
click node_appointments "https://github.com/harold474/saludya_frontend/blob/main/src/components/MisCitas.jsx"
click node_doctor "https://github.com/harold474/saludya_frontend/blob/main/src/components/VistaMedico.jsx"
click node_admin "https://github.com/harold474/saludya_frontend/blob/main/src/components/PanelAdmin.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_app,node_home,node_visitor toneBlue
class node_browser_store,node_login,node_register,node_recovery toneAmber
class node_booking,node_appointments,node_api toneMint
class node_doctor,node_admin toneRose
```

## Components

### Application shell

- [React bootstrap](https://github.com/harold474/saludya_frontend/blob/main/src/main.jsx): `src/main.jsx`
- [Routes and session](https://github.com/harold474/saludya_frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Home page](https://github.com/harold474/saludya_frontend/blob/main/src/components/Home.jsx): `src/components/Home.jsx`

### Identity

- **Browser storage**
- [Sign in](https://github.com/harold474/saludya_frontend/blob/main/src/components/Login.jsx): `src/components/Login.jsx`
- [Patient registration](https://github.com/harold474/saludya_frontend/blob/main/src/components/Registro.jsx): `src/components/Registro.jsx`
- [Password recovery](https://github.com/harold474/saludya_frontend/blob/main/src/components/RecuperarPassword.jsx): `src/components/RecuperarPassword.jsx`

### Patient appointments

- [Book or reschedule](https://github.com/harold474/saludya_frontend/blob/main/src/components/VistaPaciente.jsx): `src/components/VistaPaciente.jsx`
- [My appointments](https://github.com/harold474/saludya_frontend/blob/main/src/components/MisCitas.jsx): `src/components/MisCitas.jsx`

### Staff operations

- [Clinician agenda](https://github.com/harold474/saludya_frontend/blob/main/src/components/VistaMedico.jsx): `src/components/VistaMedico.jsx`
- [Admin panel](https://github.com/harold474/saludya_frontend/blob/main/src/components/PanelAdmin.jsx): `src/components/PanelAdmin.jsx`

### Other components

- **Portal user**
- **SaludYa API**

## Connections

- Portal user → React bootstrap: opens portal
- React bootstrap → Routes and session: renders (evidence: `src/main.jsx`)
- Routes and session → Home page: routes to (evidence: `src/App.jsx`)
- Routes and session → Sign in: routes to (evidence: `src/App.jsx`)
- Routes and session → Patient registration: routes to (evidence: `src/App.jsx`)
- Routes and session → Password recovery: routes to (evidence: `src/App.jsx`)
- Routes and session → My appointments: guards patient route (evidence: `src/App.jsx`)
- Routes and session → Book or reschedule: guards patient route (evidence: `src/App.jsx`)
- Routes and session → Clinician agenda: guards clinician route (evidence: `src/App.jsx`)
- Routes and session → Admin panel: guards admin route (evidence: `src/App.jsx`)
- Routes and session → Browser storage: loads and clears session (evidence: `src/App.jsx`)
- Sign in → Browser storage: stores user (evidence: `src/components/Login.jsx`)
- Sign in → SaludYa API: posts credentials (evidence: `src/components/Login.jsx`)
- Patient registration → SaludYa API: posts registration (evidence: `src/components/Registro.jsx`)
- Book or reschedule → SaludYa API: loads doctors and slots; submits appointment (evidence: `src/components/VistaPaciente.jsx`)
- My appointments → SaludYa API: loads and cancels appointments (evidence: `src/components/MisCitas.jsx`)
- Clinician agenda → SaludYa API: loads agenda and updates status (evidence: `src/components/VistaMedico.jsx`)
- Admin panel → SaludYa API: loads and changes staff, agenda, and appointments (evidence: `src/components/PanelAdmin.jsx`)