From 644fda7d94f40f6901cb2c7998eb7e90a5ca3f01 Mon Sep 17 00:00:00 2001
From: Ilkin Ismayilov <ismayilovilkin2006@gmail.com>
Date: Thu, 14 May 2026 16:44:26 +0400
Subject: [PATCH] feat(MED41): Added basic Web client

---
 .../usecase/doctor/ListDoctorsUseCase.java    |  26 +
 .../usecase/patient/ListPatientsUseCase.java  |  26 +
 .../adapter/input/DoctorRestAdapter.java      |   8 +
 .../adapter/input/PatientRestAdapter.java     |   8 +
 .../infra/adapter/mapper/DoctorMapper.java    |   1 +
 .../infra/adapter/mapper/MappingFacade.java   |   8 +
 .../infra/adapter/mapper/PatientMapper.java   |   1 +
 src/main/resources/static/css/style.css       | 372 +++++++++++++
 src/main/resources/static/index.html          | 412 +++++++++++++++
 src/main/resources/static/js/app.js           | 495 ++++++++++++++++++
 10 files changed, 1357 insertions(+)
 create mode 100644 src/main/java/com/ironhack/application/usecase/doctor/ListDoctorsUseCase.java
 create mode 100644 src/main/java/com/ironhack/application/usecase/patient/ListPatientsUseCase.java
 create mode 100644 src/main/resources/static/css/style.css
 create mode 100644 src/main/resources/static/index.html
 create mode 100644 src/main/resources/static/js/app.js

diff --git a/src/main/java/com/ironhack/application/usecase/doctor/ListDoctorsUseCase.java b/src/main/java/com/ironhack/application/usecase/doctor/ListDoctorsUseCase.java
new file mode 100644
index 0000000..e86d629
--- /dev/null
+++ b/src/main/java/com/ironhack/application/usecase/doctor/ListDoctorsUseCase.java
@@ -0,0 +1,26 @@
+package com.ironhack.application.usecase.doctor;
+
+import java.util.List;
+
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import com.ironhack.application.dto.DoctorDTO;
+import com.ironhack.application.dto.response.ApiResponse;
+import com.ironhack.infra.adapter.mapper.MappingFacade;
+import com.ironhack.infra.adapter.output.DoctorRepository;
+import lombok.RequiredArgsConstructor;
+
+@Service
+@RequiredArgsConstructor
+public class ListDoctorsUseCase {
+    private final DoctorRepository doctorRepository;
+    private final MappingFacade mappingFacade;
+
+    @Transactional(readOnly = true)
+    public ApiResponse<List<DoctorDTO>> invoke() {
+        var entities = doctorRepository.findAll();
+        var dtos = mappingFacade.toDoctorDTOList(entities);
+        return ApiResponse.success(dtos, "Doctors retrieved successfully.");
+    }
+}
diff --git a/src/main/java/com/ironhack/application/usecase/patient/ListPatientsUseCase.java b/src/main/java/com/ironhack/application/usecase/patient/ListPatientsUseCase.java
new file mode 100644
index 0000000..2d212d8
--- /dev/null
+++ b/src/main/java/com/ironhack/application/usecase/patient/ListPatientsUseCase.java
@@ -0,0 +1,26 @@
+package com.ironhack.application.usecase.patient;
+
+import java.util.List;
+
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import com.ironhack.application.dto.PatientDTO;
+import com.ironhack.application.dto.response.ApiResponse;
+import com.ironhack.infra.adapter.mapper.MappingFacade;
+import com.ironhack.infra.adapter.output.PatientRepository;
+import lombok.RequiredArgsConstructor;
+
+@Service
+@RequiredArgsConstructor
+public class ListPatientsUseCase {
+    private final PatientRepository patientRepository;
+    private final MappingFacade mappingFacade;
+
+    @Transactional(readOnly = true)
+    public ApiResponse<List<PatientDTO>> invoke() {
+        var entities = patientRepository.findAll();
+        var dtos = mappingFacade.toPatientDTOList(entities);
+        return ApiResponse.success(dtos, "Patients retrieved successfully.");
+    }
+}
diff --git a/src/main/java/com/ironhack/infra/adapter/input/DoctorRestAdapter.java b/src/main/java/com/ironhack/infra/adapter/input/DoctorRestAdapter.java
index 8eb0e33..3aecbc0 100644
--- a/src/main/java/com/ironhack/infra/adapter/input/DoctorRestAdapter.java
+++ b/src/main/java/com/ironhack/infra/adapter/input/DoctorRestAdapter.java
@@ -18,6 +18,7 @@
 import com.ironhack.application.usecase.appointment.ListDoctorAppointmentsUseCase;
 import com.ironhack.application.usecase.doctor.AssignSpecialtyToDoctorUseCase;
 import com.ironhack.application.usecase.doctor.CreateDoctorUseCase;
+import com.ironhack.application.usecase.doctor.ListDoctorsUseCase;
 import com.ironhack.domain.AppointmentStatus;
 import jakarta.validation.Valid;
 import lombok.RequiredArgsConstructor;
@@ -29,6 +30,13 @@ public class DoctorRestAdapter {
     private final CreateDoctorUseCase createDoctorUseCase;
     private final AssignSpecialtyToDoctorUseCase assignSpecialtyToDoctorUseCase;
     private final ListDoctorAppointmentsUseCase listDoctorAppointmentsUseCase;
+    private final ListDoctorsUseCase listDoctorsUseCase;
+
+    @GetMapping
+    public ResponseEntity<ApiResponse<List<DoctorDTO>>> listDoctors() {
+        ApiResponse<List<DoctorDTO>> body = listDoctorsUseCase.invoke();
+        return ResponseEntity.ok(body);
+    }
 
     @PostMapping
     public ResponseEntity<ApiResponse<DoctorDTO>> createDoctor(@Valid @RequestBody CreateDoctorRequest request) {
diff --git a/src/main/java/com/ironhack/infra/adapter/input/PatientRestAdapter.java b/src/main/java/com/ironhack/infra/adapter/input/PatientRestAdapter.java
index c38155f..eb35fa5 100644
--- a/src/main/java/com/ironhack/infra/adapter/input/PatientRestAdapter.java
+++ b/src/main/java/com/ironhack/infra/adapter/input/PatientRestAdapter.java
@@ -22,6 +22,7 @@
 import com.ironhack.application.dto.response.ApiResponse;
 import com.ironhack.application.usecase.appointment.ListPatientAppointmentsUseCase;
 import com.ironhack.application.usecase.patient.CreatePatientUseCase;
+import com.ironhack.application.usecase.patient.ListPatientsUseCase;
 import com.ironhack.domain.AppointmentStatus;
 import jakarta.validation.Valid;
 import lombok.RequiredArgsConstructor;
@@ -32,6 +33,13 @@
 public class PatientRestAdapter {
     private final CreatePatientUseCase createPatientUseCase;
     private final ListPatientAppointmentsUseCase listPatientAppointmentsUseCase;
+    private final ListPatientsUseCase listPatientsUseCase;
+
+    @GetMapping
+    public ResponseEntity<ApiResponse<List<PatientDTO>>> listPatients() {
+        ApiResponse<List<PatientDTO>> body = listPatientsUseCase.invoke();
+        return ResponseEntity.ok(body);
+    }
 
     @PostMapping
     public ResponseEntity<ApiResponse<PatientDTO>> createPatient(@Valid @RequestBody CreatePatientRequest request) {
diff --git a/src/main/java/com/ironhack/infra/adapter/mapper/DoctorMapper.java b/src/main/java/com/ironhack/infra/adapter/mapper/DoctorMapper.java
index 9139323..72a5005 100644
--- a/src/main/java/com/ironhack/infra/adapter/mapper/DoctorMapper.java
+++ b/src/main/java/com/ironhack/infra/adapter/mapper/DoctorMapper.java
@@ -10,6 +10,7 @@
 @Mapper(config = MapStructConfig.class)
 public interface DoctorMapper {
     DoctorDTO toDoctorDTO(DoctorEntity doctorEntity);
+    java.util.List<DoctorDTO> toDoctorDTOList(java.util.List<DoctorEntity> doctorEntities);
 
     @Mapping(target = "id", ignore = true)
     DoctorEntity toDoctorEntity(CreateDoctorRequest createDoctorRequest);
diff --git a/src/main/java/com/ironhack/infra/adapter/mapper/MappingFacade.java b/src/main/java/com/ironhack/infra/adapter/mapper/MappingFacade.java
index 24252a8..0f7c7fe 100644
--- a/src/main/java/com/ironhack/infra/adapter/mapper/MappingFacade.java
+++ b/src/main/java/com/ironhack/infra/adapter/mapper/MappingFacade.java
@@ -43,6 +43,14 @@ public AppointmentDTO toAppointmentDTO(AppointmentEntity entity) {
         return appointmentMapper.toAppointmentDTO(entity);
     }
 
+    public List<DoctorDTO> toDoctorDTOList(List<DoctorEntity> entities) {
+        return doctorMapper.toDoctorDTOList(entities);
+    }
+
+    public List<PatientDTO> toPatientDTOList(List<PatientEntity> entities) {
+        return patientMapper.toPatientDTOList(entities);
+    }
+
     public List<AppointmentDTO> toAppointmentDTOList(List<AppointmentEntity> entities) {
         return appointmentMapper.toAppointmentDTOList(entities);
     }
diff --git a/src/main/java/com/ironhack/infra/adapter/mapper/PatientMapper.java b/src/main/java/com/ironhack/infra/adapter/mapper/PatientMapper.java
index ca3e6ce..3cd6b2f 100644
--- a/src/main/java/com/ironhack/infra/adapter/mapper/PatientMapper.java
+++ b/src/main/java/com/ironhack/infra/adapter/mapper/PatientMapper.java
@@ -10,6 +10,7 @@
 @Mapper(config = MapStructConfig.class)
 public interface PatientMapper {
     PatientDTO toPatientDTO(PatientEntity patientEntity);
+    java.util.List<PatientDTO> toPatientDTOList(java.util.List<PatientEntity> patientEntities);
 
     @Mapping(target = "id", ignore = true)
     PatientEntity toPatientEntity(CreatePatientRequest createPatientRequest);
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
new file mode 100644
index 0000000..587b2c3
--- /dev/null
+++ b/src/main/resources/static/css/style.css
@@ -0,0 +1,372 @@
+/* ── TOKENS ── */
+:root {
+  --bg-base: #070b14;
+  --bg-surface: #0d1526;
+  --bg-card: #111827;
+  --bg-hover: #1a2540;
+  --border: rgba(99,102,241,.15);
+  --border-light: rgba(255,255,255,.05);
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-muted: #475569;
+  --accent-blue: #6366f1;
+  --accent-purple: #8b5cf6;
+  --accent-cyan: #06b6d4;
+  --accent-green: #10b981;
+  --accent-red: #ef4444;
+  --accent-orange: #f59e0b;
+  --sidebar-w: 250px;
+  --radius: 14px;
+  --radius-sm: 8px;
+  --shadow: 0 8px 32px rgba(0,0,0,.4);
+  --transition: .2s cubic-bezier(.4,0,.2,1);
+}
+
+/* ── RESET ── */
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+html{font-size:15px;-webkit-font-smoothing:antialiased}
+body{font-family:'Inter',sans-serif;background:var(--bg-base);color:var(--text-primary);min-height:100vh;display:flex;overflow-x:hidden}
+a{text-decoration:none;color:inherit}
+button{font-family:inherit;cursor:pointer;border:none;background:none}
+input,select,textarea{font-family:inherit;font-size:.9rem}
+ul{list-style:none}
+
+/* ── SCROLLBAR ── */
+::-webkit-scrollbar{width:5px;height:5px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:rgba(99,102,241,.3);border-radius:99px}
+
+/* ══════════ SIDEBAR ══════════ */
+.sidebar{
+  width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;
+  background:var(--bg-surface);
+  border-right:1px solid var(--border);
+  display:flex;flex-direction:column;
+  position:sticky;top:0;
+  transition:transform var(--transition);
+  z-index:100;
+}
+.sidebar-logo{
+  display:flex;align-items:center;gap:10px;
+  padding:22px 20px 18px;
+  border-bottom:1px solid var(--border-light);
+}
+.logo-icon{display:flex;flex-shrink:0}
+.logo-text{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;color:var(--text-primary);letter-spacing:-.5px}
+.logo-text strong{color:var(--accent-blue)}
+
+.sidebar-nav{flex:1;overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;gap:2px}
+.nav-section-label{font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:12px 8px 6px}
+.nav-item{
+  display:flex;align-items:center;gap:10px;
+  padding:9px 12px;border-radius:var(--radius-sm);
+  color:var(--text-secondary);font-size:.875rem;font-weight:500;
+  transition:all var(--transition);position:relative;
+}
+.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
+.nav-item.active{background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(6,182,212,.1));color:#fff;box-shadow:inset 0 0 0 1px rgba(99,102,241,.3)}
+.nav-item.active .nav-icon{color:var(--accent-blue)}
+.nav-icon{width:18px;height:18px;flex-shrink:0}
+.nav-badge{
+  margin-left:auto;background:var(--accent-blue);color:#fff;
+  font-size:.65rem;font-weight:700;padding:1px 7px;border-radius:99px;min-width:22px;text-align:center;
+}
+.sidebar-footer{padding:16px;border-top:1px solid var(--border-light)}
+.api-status{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--text-muted)}
+.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);transition:background .4s}
+.status-dot.online{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}
+.status-dot.offline{background:var(--accent-red)}
+
+/* ══════════ MAIN ══════════ */
+.main-content{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
+
+/* TOPBAR */
+.topbar{
+  position:sticky;top:0;z-index:50;
+  background:rgba(7,11,20,.85);backdrop-filter:blur(16px);
+  border-bottom:1px solid var(--border-light);
+  padding:0 28px;height:65px;
+  display:flex;align-items:center;justify-content:space-between;gap:16px;
+}
+.topbar-left{display:flex;align-items:center;gap:14px}
+.page-title{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;line-height:1.1}
+.page-subtitle{font-size:.75rem;color:var(--text-muted);display:block;margin-top:1px}
+.page-title-wrap{display:flex;flex-direction:column}
+.hamburger{display:none;padding:6px;border-radius:var(--radius-sm);color:var(--text-secondary);transition:background var(--transition)}
+.hamburger:hover{background:var(--bg-hover);color:var(--text-primary)}
+.hamburger svg{width:20px;height:20px}
+
+.topbar-right{display:flex;align-items:center;gap:12px}
+.search-wrap{
+  display:flex;align-items:center;gap:8px;
+  background:var(--bg-card);border:1px solid var(--border);
+  border-radius:var(--radius-sm);padding:7px 12px;min-width:200px;
+  transition:border var(--transition);
+}
+.search-wrap:focus-within{border-color:var(--accent-blue)}
+.search-wrap svg{width:15px;height:15px;color:var(--text-muted);flex-shrink:0}
+.search-wrap input{background:none;border:none;outline:none;color:var(--text-primary);font-size:.85rem;width:100%}
+.search-wrap input::placeholder{color:var(--text-muted)}
+.refresh-btn{
+  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
+  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
+  color:var(--text-secondary);transition:all var(--transition);
+}
+.refresh-btn:hover{background:var(--bg-hover);color:var(--accent-blue);border-color:var(--accent-blue)}
+.refresh-btn svg{width:16px;height:16px}
+.refresh-btn.spinning svg{animation:spin .7s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* ══════════ PAGES ══════════ */
+.page-content{flex:1;padding:28px;overflow-y:auto}
+.page{display:none}
+.page.active{display:block;animation:fadeIn .25s ease}
+@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+
+/* ══════════ STATS GRID ══════════ */
+.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
+.stat-card{
+  background:var(--bg-card);border:1px solid var(--border-light);
+  border-radius:var(--radius);padding:22px 20px;
+  display:flex;align-items:center;gap:16px;
+  position:relative;overflow:hidden;
+  transition:transform var(--transition),box-shadow var(--transition);
+}
+.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
+.stat-icon{
+  width:48px;height:48px;border-radius:12px;
+  display:flex;align-items:center;justify-content:center;flex-shrink:0;
+}
+.stat-icon svg{width:22px;height:22px}
+.stat-blue .stat-icon{background:rgba(99,102,241,.15);color:var(--accent-blue)}
+.stat-purple .stat-icon{background:rgba(139,92,246,.15);color:var(--accent-purple)}
+.stat-cyan .stat-icon{background:rgba(6,182,212,.15);color:var(--accent-cyan)}
+.stat-green .stat-icon{background:rgba(16,185,129,.15);color:var(--accent-green)}
+.stat-info{display:flex;flex-direction:column;gap:3px}
+.stat-label{font-size:.75rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
+.stat-value{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:700;color:var(--text-primary);line-height:1}
+.stat-glow{
+  position:absolute;right:-20px;top:-20px;
+  width:100px;height:100px;border-radius:50%;opacity:.04;
+}
+.stat-blue .stat-glow{background:var(--accent-blue)}
+.stat-purple .stat-glow{background:var(--accent-purple)}
+.stat-cyan .stat-glow{background:var(--accent-cyan)}
+.stat-green .stat-glow{background:var(--accent-green)}
+
+/* ══════════ DASHBOARD GRID ══════════ */
+.dashboard-grid{display:grid;grid-template-columns:1fr 340px;gap:20px}
+.dash-card{
+  background:var(--bg-card);border:1px solid var(--border-light);
+  border-radius:var(--radius);padding:22px;
+}
+.dash-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
+.dash-card-header h3{font-size:.95rem;font-weight:600}
+.view-all-link{font-size:.8rem;color:var(--accent-blue);transition:opacity var(--transition)}
+.view-all-link:hover{opacity:.7}
+
+/* Specialty Chart */
+.specialty-chart{display:flex;flex-direction:column;gap:14px}
+.specialty-bar-item{display:flex;flex-direction:column;gap:6px}
+.specialty-bar-label{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-secondary)}
+.specialty-bar-track{height:8px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden}
+.specialty-bar-fill{height:100%;border-radius:99px;transition:width 1s cubic-bezier(.4,0,.2,1)}
+.bar-cardiology{background:linear-gradient(90deg,#ef4444,#f97316)}
+.bar-dentist{background:linear-gradient(90deg,#6366f1,#8b5cf6)}
+.bar-therapist{background:linear-gradient(90deg,#06b6d4,#10b981)}
+
+/* ══════════ PAGE ACTIONS ══════════ */
+.page-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
+.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.filter-input{
+  background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);
+  padding:8px 14px;border-radius:var(--radius-sm);font-size:.85rem;min-width:220px;outline:none;
+  transition:border var(--transition);
+}
+.filter-input:focus{border-color:var(--accent-blue)}
+.filter-input::placeholder{color:var(--text-muted)}
+.filter-select{
+  background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);
+  padding:8px 14px;border-radius:var(--radius-sm);font-size:.85rem;outline:none;
+  transition:border var(--transition);cursor:pointer;
+}
+.filter-select:focus{border-color:var(--accent-blue)}
+.date-input{color-scheme:dark}
+
+/* ══════════ BUTTONS ══════════ */
+.btn{
+  display:inline-flex;align-items:center;gap:7px;
+  padding:9px 18px;border-radius:var(--radius-sm);
+  font-size:.85rem;font-weight:600;transition:all var(--transition);cursor:pointer;border:none;
+}
+.btn svg{width:16px;height:16px;flex-shrink:0}
+.btn-primary{background:linear-gradient(135deg,var(--accent-blue),var(--accent-cyan));color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.35)}
+.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
+.btn-secondary{background:var(--bg-hover);color:var(--text-primary);border:1px solid var(--border)}
+.btn-secondary:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
+.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
+.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
+.btn-danger{background:linear-gradient(135deg,var(--accent-red),#dc2626);color:#fff}
+.btn-danger:hover{opacity:.9}
+.btn-large{padding:13px 28px;font-size:.95rem;border-radius:var(--radius)}
+.btn-sm{padding:5px 12px;font-size:.78rem}
+.btn-icon{padding:6px;border-radius:var(--radius-sm)}
+.btn:disabled{opacity:.45;pointer-events:none}
+
+/* ══════════ DOCTOR CARDS ══════════ */
+.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
+.doctor-card{
+  background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);
+  padding:22px;display:flex;flex-direction:column;gap:14px;
+  transition:all var(--transition);position:relative;overflow:hidden;
+}
+.doctor-card::before{
+  content:'';position:absolute;top:0;left:0;right:0;height:3px;
+  background:linear-gradient(90deg,var(--accent-blue),var(--accent-cyan));
+  opacity:0;transition:opacity var(--transition);
+}
+.doctor-card:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.35);border-color:var(--border)}
+.doctor-card:hover::before{opacity:1}
+.doctor-card-top{display:flex;align-items:center;gap:14px}
+.doctor-avatar{
+  width:48px;height:48px;border-radius:50%;
+  background:linear-gradient(135deg,var(--accent-blue),var(--accent-cyan));
+  display:flex;align-items:center;justify-content:center;
+  font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:#fff;flex-shrink:0;
+}
+.doctor-info{flex:1;min-width:0}
+.doctor-name{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.doctor-specialty{font-size:.78rem;color:var(--text-muted);margin-top:2px}
+.specialty-badge{
+  display:inline-flex;align-items:center;gap:5px;
+  padding:3px 10px;border-radius:99px;font-size:.73rem;font-weight:600;
+}
+.badge-CARDIOLOGY{background:rgba(239,68,68,.15);color:#fca5a5}
+.badge-DENTIST{background:rgba(99,102,241,.15);color:#a5b4fc}
+.badge-THERAPIST{background:rgba(6,182,212,.15);color:#67e8f9}
+.badge-none{background:rgba(100,116,139,.15);color:var(--text-muted)}
+.doctor-id{font-size:.68rem;color:var(--text-muted);font-family:monospace;letter-spacing:.03em}
+.doctor-actions{display:flex;gap:8px;flex-wrap:wrap}
+
+/* ══════════ DATA TABLE ══════════ */
+.table-wrap{width:100%;overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border-light)}
+.data-table{width:100%;border-collapse:collapse;font-size:.855rem}
+.data-table thead tr{background:rgba(255,255,255,.03)}
+.data-table th{padding:12px 16px;text-align:left;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border-light);white-space:nowrap}
+.data-table td{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:middle}
+.data-table tbody tr{transition:background var(--transition)}
+.data-table tbody tr:hover{background:rgba(255,255,255,.02)}
+.data-table tbody tr:last-child td{border-bottom:none}
+.cell-name{font-weight:500;color:var(--text-primary)}
+.cell-sub{font-size:.75rem;color:var(--text-muted);margin-top:2px}
+.cell-id{font-size:.72rem;color:var(--text-muted);font-family:monospace}
+.cell-actions{display:flex;gap:6px;align-items:center}
+
+/* Status badges */
+.status-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.73rem;font-weight:600}
+.status-badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
+.status-SCHEDULED{background:rgba(6,182,212,.12);color:#67e8f9}
+.status-SCHEDULED::before{background:var(--accent-cyan);box-shadow:0 0 5px var(--accent-cyan)}
+.status-COMPLETED{background:rgba(16,185,129,.12);color:#6ee7b7}
+.status-COMPLETED::before{background:var(--accent-green)}
+.status-CANCELLED{background:rgba(239,68,68,.12);color:#fca5a5}
+.status-CANCELLED::before{background:var(--accent-red)}
+
+/* ══════════ BOOK FORM ══════════ */
+.book-container{max-width:680px;margin:0 auto}
+.book-hero{display:flex;align-items:center;gap:20px;margin-bottom:32px;padding:28px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light)}
+.book-hero-icon svg{width:56px;height:56px}
+.book-hero h2{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:700}
+.book-hero p{font-size:.875rem;color:var(--text-muted);margin-top:4px}
+.book-form{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:20px}
+.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.form-group{display:flex;flex-direction:column;gap:7px}
+.form-group label{font-size:.8rem;font-weight:600;color:var(--text-secondary)}
+.form-group input,.form-group select{
+  background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);
+  padding:10px 14px;border-radius:var(--radius-sm);font-size:.875rem;outline:none;
+  transition:border var(--transition);
+}
+.form-group input:focus,.form-group select:focus{border-color:var(--accent-blue);background:rgba(99,102,241,.04)}
+.form-group input::placeholder{color:var(--text-muted)}
+.select-wrap{position:relative}
+.select-wrap select{width:100%;appearance:none;cursor:pointer;padding-right:36px;color-scheme:dark}
+.select-wrap::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;font-size:.8rem}
+.field-error{font-size:.75rem;color:var(--accent-red);min-height:16px}
+.readonly-field{background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:.875rem;color:var(--text-secondary)}
+
+/* ══════════ MODAL ══════════ */
+.modal-overlay{
+  position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
+  z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;
+  opacity:0;pointer-events:none;transition:opacity .2s;
+}
+.modal-overlay.open{opacity:1;pointer-events:all}
+.modal-overlay.open .modal{transform:none;opacity:1}
+.modal{
+  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
+  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
+  box-shadow:0 24px 64px rgba(0,0,0,.6);
+  transform:translateY(12px) scale(.98);opacity:0;transition:all .25s cubic-bezier(.4,0,.2,1);
+}
+.modal-lg{max-width:800px}
+.modal-sm{max-width:380px}
+.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;margin-bottom:20px}
+.modal-header h3{font-size:1rem;font-weight:700}
+.modal-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-muted);font-size:.85rem;transition:all var(--transition)}
+.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}
+.modal form{padding:0 24px}
+.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px 24px;border-top:1px solid var(--border-light);margin-top:20px}
+.modal-body-text{padding:0 24px;color:var(--text-secondary);font-size:.875rem;line-height:1.6}
+
+/* ══════════ SKELETON ══════════ */
+.skeleton-loader{display:flex;flex-direction:column;gap:10px;padding:4px}
+.sk-row{height:42px;background:linear-gradient(90deg,var(--bg-hover) 25%,var(--bg-card) 50%,var(--bg-hover) 75%);background-size:200% 100%;border-radius:var(--radius-sm);animation:shimmer 1.4s infinite}
+.sk-card{height:160px;background:linear-gradient(90deg,var(--bg-hover) 25%,var(--bg-card) 50%,var(--bg-hover) 75%);background-size:200% 100%;border-radius:var(--radius);animation:shimmer 1.4s infinite}
+@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+
+/* ══════════ TOAST ══════════ */
+.toast-container{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:10px;min-width:300px}
+.toast{
+  background:var(--bg-card);border:1px solid var(--border-light);
+  border-radius:var(--radius-sm);padding:14px 18px;
+  display:flex;align-items:flex-start;gap:12px;
+  box-shadow:0 8px 32px rgba(0,0,0,.4);
+  animation:toastIn .3s cubic-bezier(.4,0,.2,1);
+}
+.toast.exit{animation:toastOut .3s cubic-bezier(.4,0,.2,1) forwards}
+.toast-success{border-left:3px solid var(--accent-green)}
+.toast-error{border-left:3px solid var(--accent-red)}
+.toast-info{border-left:3px solid var(--accent-blue)}
+.toast-icon{font-size:1rem;flex-shrink:0;margin-top:1px}
+.toast-content{display:flex;flex-direction:column;gap:2px}
+.toast-title{font-size:.85rem;font-weight:600}
+.toast-msg{font-size:.78rem;color:var(--text-secondary)}
+@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
+@keyframes toastOut{to{opacity:0;transform:translateX(20px)}}
+
+/* ══════════ EMPTY STATE ══════════ */
+.empty-state{text-align:center;padding:48px 20px;color:var(--text-muted)}
+.empty-state svg{width:52px;height:52px;opacity:.25;margin-bottom:14px}
+.empty-state p{font-size:.875rem}
+
+/* ══════════ RESPONSIVE ══════════ */
+@media(max-width:1100px){
+  .stats-grid{grid-template-columns:repeat(2,1fr)}
+  .dashboard-grid{grid-template-columns:1fr}
+}
+@media(max-width:768px){
+  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%)}
+  .sidebar.open{transform:none;box-shadow:8px 0 40px rgba(0,0,0,.5)}
+  .hamburger{display:flex}
+  .stats-grid{grid-template-columns:1fr 1fr}
+  .page-content{padding:16px}
+  .topbar{padding:0 16px}
+  .form-row{grid-template-columns:1fr}
+  .book-hero{flex-direction:column;text-align:center}
+}
+@media(max-width:480px){
+  .stats-grid{grid-template-columns:1fr}
+  .filter-row{flex-direction:column;width:100%}
+  .filter-input,.filter-select{min-width:100%;width:100%}
+}
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
new file mode 100644
index 0000000..1f211bf
--- /dev/null
+++ b/src/main/resources/static/index.html
@@ -0,0 +1,412 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MediCare — Clinic Management System</title>
+  <meta name="description" content="MediCare is a modern clinic appointment management system for doctors, patients and appointments." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+
+<!-- ───────────── SIDEBAR ───────────── -->
+<aside class="sidebar" id="sidebar">
+  <div class="sidebar-logo">
+    <div class="logo-icon">
+      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+        <rect width="28" height="28" rx="8" fill="url(#lg1)"/>
+        <path d="M14 7v14M7 14h14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
+        <defs><linearGradient id="lg1" x1="0" y1="0" x2="28" y2="28" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#6366f1"/><stop offset="1" stop-color="#06b6d4"/>
+        </linearGradient></defs>
+      </svg>
+    </div>
+    <span class="logo-text">Medi<strong>Care</strong></span>
+  </div>
+
+  <nav class="sidebar-nav">
+    <div class="nav-section-label">Overview</div>
+    <a href="#" class="nav-item active" data-page="dashboard" id="nav-dashboard">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+      Dashboard
+    </a>
+
+    <div class="nav-section-label">Management</div>
+    <a href="#" class="nav-item" data-page="doctors" id="nav-doctors">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+      Doctors
+      <span class="nav-badge" id="badge-doctors">0</span>
+    </a>
+    <a href="#" class="nav-item" data-page="patients" id="nav-patients">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+      Patients
+      <span class="nav-badge" id="badge-patients">0</span>
+    </a>
+    <a href="#" class="nav-item" data-page="appointments" id="nav-appointments">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+      Appointments
+      <span class="nav-badge" id="badge-appointments">0</span>
+    </a>
+
+    <div class="nav-section-label">Actions</div>
+    <a href="#" class="nav-item" data-page="book" id="nav-book">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+      Book Appointment
+    </a>
+  </nav>
+
+  <div class="sidebar-footer">
+    <div class="api-status" id="api-status">
+      <span class="status-dot" id="status-dot"></span>
+      <span id="status-text">Connecting...</span>
+    </div>
+  </div>
+</aside>
+
+<!-- ───────────── MAIN ───────────── -->
+<main class="main-content">
+
+  <!-- TOP BAR -->
+  <header class="topbar">
+    <div class="topbar-left">
+      <button class="hamburger" id="hamburger" aria-label="Toggle menu">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+      </button>
+      <div class="page-title-wrap">
+        <h1 class="page-title" id="page-title">Dashboard</h1>
+        <span class="page-subtitle" id="page-subtitle">Welcome to MediCare Clinic Management</span>
+      </div>
+    </div>
+    <div class="topbar-right">
+      <div class="search-wrap">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input type="text" id="global-search" placeholder="Search..." />
+      </div>
+      <button class="refresh-btn" id="refresh-btn" title="Refresh data">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+      </button>
+    </div>
+  </header>
+
+  <!-- PAGES -->
+  <div class="page-content">
+
+    <!-- ===== DASHBOARD PAGE ===== -->
+    <section class="page active" id="page-dashboard">
+      <div class="stats-grid">
+        <div class="stat-card stat-blue">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+          </div>
+          <div class="stat-info">
+            <span class="stat-label">Total Doctors</span>
+            <span class="stat-value" id="stat-doctors">—</span>
+          </div>
+          <div class="stat-glow"></div>
+        </div>
+        <div class="stat-card stat-purple">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></svg>
+          </div>
+          <div class="stat-info">
+            <span class="stat-label">Total Patients</span>
+            <span class="stat-value" id="stat-patients">—</span>
+          </div>
+          <div class="stat-glow"></div>
+        </div>
+        <div class="stat-card stat-cyan">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+          </div>
+          <div class="stat-info">
+            <span class="stat-label">Scheduled</span>
+            <span class="stat-value" id="stat-scheduled">—</span>
+          </div>
+          <div class="stat-glow"></div>
+        </div>
+        <div class="stat-card stat-green">
+          <div class="stat-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+          </div>
+          <div class="stat-info">
+            <span class="stat-label">Completed</span>
+            <span class="stat-value" id="stat-completed">—</span>
+          </div>
+          <div class="stat-glow"></div>
+        </div>
+      </div>
+
+      <div class="dashboard-grid">
+        <div class="dash-card">
+          <div class="dash-card-header">
+            <h3>Recent Appointments</h3>
+            <a href="#" class="view-all-link" data-page="appointments">View all →</a>
+          </div>
+          <div class="table-wrap" id="dash-appointments-list">
+            <div class="skeleton-loader"><div class="sk-row"></div><div class="sk-row"></div><div class="sk-row"></div></div>
+          </div>
+        </div>
+        <div class="dash-card">
+          <div class="dash-card-header"><h3>Specialty Distribution</h3></div>
+          <div class="specialty-chart" id="specialty-chart">
+            <div class="skeleton-loader"><div class="sk-row"></div><div class="sk-row"></div><div class="sk-row"></div></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== DOCTORS PAGE ===== -->
+    <section class="page" id="page-doctors">
+      <div class="page-actions">
+        <div class="filter-row">
+          <input type="text" class="filter-input" id="doctor-search" placeholder="Search by name or specialty..." />
+        </div>
+        <button class="btn btn-primary" id="open-create-doctor">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+          New Doctor
+        </button>
+      </div>
+      <div class="cards-grid" id="doctors-grid">
+        <div class="skeleton-loader"><div class="sk-card"></div><div class="sk-card"></div><div class="sk-card"></div></div>
+      </div>
+    </section>
+
+    <!-- ===== PATIENTS PAGE ===== -->
+    <section class="page" id="page-patients">
+      <div class="page-actions">
+        <div class="filter-row">
+          <input type="text" class="filter-input" id="patient-search" placeholder="Search by name or phone..." />
+        </div>
+        <button class="btn btn-primary" id="open-create-patient">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+          New Patient
+        </button>
+      </div>
+      <div class="table-wrap">
+        <table class="data-table" id="patients-table">
+          <thead>
+            <tr><th>Patient</th><th>Phone</th><th>ID</th><th>Actions</th></tr>
+          </thead>
+          <tbody id="patients-tbody"></tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- ===== APPOINTMENTS PAGE ===== -->
+    <section class="page" id="page-appointments">
+      <div class="page-actions">
+        <div class="filter-row">
+          <select class="filter-select" id="apt-status-filter">
+            <option value="">All Status</option>
+            <option value="SCHEDULED">Scheduled</option>
+            <option value="CANCELLED">Cancelled</option>
+            <option value="COMPLETED">Completed</option>
+          </select>
+          <input type="date" class="filter-input date-input" id="apt-date-filter" />
+          <button class="btn btn-secondary" id="apt-filter-btn">Filter</button>
+          <button class="btn btn-ghost" id="apt-clear-filter">Clear</button>
+        </div>
+        <button class="btn btn-primary" id="open-book-apt">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+          Book Appointment
+        </button>
+      </div>
+      <div class="table-wrap">
+        <table class="data-table" id="appointments-table">
+          <thead>
+            <tr><th>Patient</th><th>Doctor</th><th>Specialty</th><th>Date & Time</th><th>Status</th><th>Actions</th></tr>
+          </thead>
+          <tbody id="appointments-tbody"></tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- ===== BOOK PAGE ===== -->
+    <section class="page" id="page-book">
+      <div class="book-container">
+        <div class="book-hero">
+          <div class="book-hero-icon">
+            <svg viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="url(#bhg)"/><path d="M24 14v20M14 24h20" stroke="#fff" stroke-width="3" stroke-linecap="round"/><defs><linearGradient id="bhg" x1="0" y1="0" x2="48" y2="48"><stop stop-color="#6366f1"/><stop offset="1" stop-color="#06b6d4"/></linearGradient></defs></svg>
+          </div>
+          <div>
+            <h2>Book an Appointment</h2>
+            <p>Schedule a visit between a patient and a doctor.</p>
+          </div>
+        </div>
+        <form class="book-form" id="book-form" novalidate>
+          <div class="form-row">
+            <div class="form-group">
+              <label for="book-patient">Patient</label>
+              <div class="select-wrap">
+                <select id="book-patient" required>
+                  <option value="">Select a patient...</option>
+                </select>
+              </div>
+              <span class="field-error" id="book-patient-err"></span>
+            </div>
+            <div class="form-group">
+              <label for="book-doctor">Doctor</label>
+              <div class="select-wrap">
+                <select id="book-doctor" required>
+                  <option value="">Select a doctor...</option>
+                </select>
+              </div>
+              <span class="field-error" id="book-doctor-err"></span>
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="book-time">Appointment Date & Time</label>
+            <input type="datetime-local" id="book-time" required />
+            <span class="field-error" id="book-time-err"></span>
+          </div>
+          <button type="submit" class="btn btn-primary btn-large" id="book-submit">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+            Confirm Booking
+          </button>
+        </form>
+      </div>
+    </section>
+
+  </div><!-- /page-content -->
+</main>
+
+<!-- ═══════════ MODALS ═══════════ -->
+
+<!-- Create Doctor -->
+<div class="modal-overlay" id="modal-create-doctor">
+  <div class="modal">
+    <div class="modal-header">
+      <h3>Register New Doctor</h3>
+      <button class="modal-close" data-modal="modal-create-doctor">✕</button>
+    </div>
+    <form id="form-create-doctor" novalidate>
+      <div class="form-group">
+        <label for="dr-name">Full Name</label>
+        <input type="text" id="dr-name" placeholder="Dr. Jane Smith" minlength="3" required />
+        <span class="field-error" id="dr-name-err"></span>
+      </div>
+      <div class="form-group">
+        <label for="dr-specialty">Specialty</label>
+        <div class="select-wrap">
+          <select id="dr-specialty" required>
+            <option value="">Select specialty...</option>
+            <option value="CARDIOLOGY">❤️ Cardiology</option>
+            <option value="DENTIST">🦷 Dentist</option>
+            <option value="THERAPIST">🧠 Therapist</option>
+          </select>
+        </div>
+        <span class="field-error" id="dr-specialty-err"></span>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-ghost" data-modal="modal-create-doctor">Cancel</button>
+        <button type="submit" class="btn btn-primary">Create Doctor</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- Assign Specialty -->
+<div class="modal-overlay" id="modal-assign-specialty">
+  <div class="modal">
+    <div class="modal-header">
+      <h3>Assign Specialty</h3>
+      <button class="modal-close" data-modal="modal-assign-specialty">✕</button>
+    </div>
+    <form id="form-assign-specialty" novalidate>
+      <input type="hidden" id="assign-doctor-id" />
+      <div class="form-group">
+        <label>Doctor</label>
+        <div class="readonly-field" id="assign-doctor-name">—</div>
+      </div>
+      <div class="form-group">
+        <label for="assign-specialty">New Specialty</label>
+        <div class="select-wrap">
+          <select id="assign-specialty" required>
+            <option value="">Select specialty...</option>
+            <option value="CARDIOLOGY">❤️ Cardiology</option>
+            <option value="DENTIST">🦷 Dentist</option>
+            <option value="THERAPIST">🧠 Therapist</option>
+          </select>
+        </div>
+        <span class="field-error" id="assign-specialty-err"></span>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-ghost" data-modal="modal-assign-specialty">Cancel</button>
+        <button type="submit" class="btn btn-primary">Assign</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- Doctor Appointments Modal -->
+<div class="modal-overlay" id="modal-doctor-apts">
+  <div class="modal modal-lg">
+    <div class="modal-header">
+      <h3>Appointments for <span id="modal-doctor-apts-name">—</span></h3>
+      <button class="modal-close" data-modal="modal-doctor-apts">✕</button>
+    </div>
+    <div class="table-wrap" id="modal-doctor-apts-body"></div>
+  </div>
+</div>
+
+<!-- Patient Appointments Modal -->
+<div class="modal-overlay" id="modal-patient-apts">
+  <div class="modal modal-lg">
+    <div class="modal-header">
+      <h3>Appointments for <span id="modal-patient-apts-name">—</span></h3>
+      <button class="modal-close" data-modal="modal-patient-apts">✕</button>
+    </div>
+    <div class="table-wrap" id="modal-patient-apts-body"></div>
+  </div>
+</div>
+
+<!-- Create Patient -->
+<div class="modal-overlay" id="modal-create-patient">
+  <div class="modal">
+    <div class="modal-header">
+      <h3>Register New Patient</h3>
+      <button class="modal-close" data-modal="modal-create-patient">✕</button>
+    </div>
+    <form id="form-create-patient" novalidate>
+      <div class="form-group">
+        <label for="pt-name">Full Name</label>
+        <input type="text" id="pt-name" placeholder="John Doe" required />
+        <span class="field-error" id="pt-name-err"></span>
+      </div>
+      <div class="form-group">
+        <label for="pt-phone">Phone Number</label>
+        <input type="text" id="pt-phone" placeholder="+994501234567" required />
+        <span class="field-error" id="pt-phone-err"></span>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-ghost" data-modal="modal-create-patient">Cancel</button>
+        <button type="submit" class="btn btn-primary">Create Patient</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<!-- Cancel Confirm -->
+<div class="modal-overlay" id="modal-cancel-confirm">
+  <div class="modal modal-sm">
+    <div class="modal-header">
+      <h3>Cancel Appointment?</h3>
+      <button class="modal-close" data-modal="modal-cancel-confirm">✕</button>
+    </div>
+    <p class="modal-body-text">This action will cancel the appointment. Once cancelled, it cannot be restored.</p>
+    <input type="hidden" id="cancel-appointment-id" />
+    <div class="modal-footer">
+      <button type="button" class="btn btn-ghost" data-modal="modal-cancel-confirm">Keep it</button>
+      <button type="button" class="btn btn-danger" id="confirm-cancel-btn">Yes, Cancel</button>
+    </div>
+  </div>
+</div>
+
+<!-- ═══════════ TOAST ═══════════ -->
+<div class="toast-container" id="toast-container"></div>
+
+<script src="js/app.js"></script>
+</body>
+</html>
diff --git a/src/main/resources/static/js/app.js b/src/main/resources/static/js/app.js
new file mode 100644
index 0000000..7c6b5d2
--- /dev/null
+++ b/src/main/resources/static/js/app.js
@@ -0,0 +1,495 @@
+/* ═══════════ MediCare Frontend ═══════════ */
+const API = '';  // same-origin; Spring Boot serves on /v1/...
+
+/* ── State ── */
+let doctors = [], patients = [], appointments = [];
+
+/* ═══ API helpers ═══ */
+async function api(method, path, body) {
+  try {
+    const res = await fetch(path, {
+      method,
+      headers: body ? { 'Content-Type': 'application/json' } : {},
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    const json = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(json.message || `HTTP ${res.status}`);
+    return json.data ?? json;
+  } catch (e) { throw e; }
+}
+
+const GET  = (p)      => api('GET',   p);
+const POST = (p, b)   => api('POST',  p, b);
+const PATCH= (p, b)   => api('PATCH', p, b);
+
+/* ═══ Toast ═══ */
+function toast(type, title, msg) {
+  const c = document.getElementById('toast-container');
+  const icons = { success:'✅', error:'❌', info:'ℹ️' };
+  const el = document.createElement('div');
+  el.className = `toast toast-${type}`;
+  el.innerHTML = `<span class="toast-icon">${icons[type]||'•'}</span>
+    <div class="toast-content"><div class="toast-title">${title}</div>${msg?`<div class="toast-msg">${msg}</div>`:''}
+    </div>`;
+  c.appendChild(el);
+  setTimeout(() => { el.classList.add('exit'); setTimeout(() => el.remove(), 300); }, 3500);
+}
+
+/* ═══ Modal ═══ */
+function openModal(id)  { document.getElementById(id).classList.add('open'); }
+function closeModal(id) { document.getElementById(id).classList.remove('open'); }
+
+document.querySelectorAll('.modal-close,[data-modal]').forEach(btn => {
+  btn.addEventListener('click', () => closeModal(btn.dataset.modal));
+});
+document.querySelectorAll('.modal-overlay').forEach(ov => {
+  ov.addEventListener('click', e => { if (e.target === ov) closeModal(ov.id); });
+});
+
+/* ═══ Navigation ═══ */
+const pages = { dashboard:'Dashboard', doctors:'Doctors', patients:'Patients', appointments:'Appointments', book:'Book Appointment' };
+const subtitles = {
+  dashboard:'Clinic overview and key metrics',
+  doctors:'Manage clinic doctors and their specialties',
+  patients:'Manage registered patients',
+  appointments:'View and manage all appointments',
+  book:'Schedule a new appointment',
+};
+
+function navigateTo(name) {
+  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+  const page = document.getElementById(`page-${name}`);
+  const nav  = document.getElementById(`nav-${name}`);
+  if (page) page.classList.add('active');
+  if (nav)  nav.classList.add('active');
+  document.getElementById('page-title').textContent    = pages[name] || name;
+  document.getElementById('page-subtitle').textContent = subtitles[name] || '';
+  if (name === 'doctors')      renderDoctors();
+  if (name === 'patients')     renderPatients();
+  if (name === 'appointments') renderAppointments();
+  if (name === 'book')         populateBookSelects();
+}
+
+document.querySelectorAll('.nav-item').forEach(item => {
+  item.addEventListener('click', e => {
+    e.preventDefault();
+    const pg = item.dataset.page;
+    if (pg) navigateTo(pg);
+    if (window.innerWidth < 768) document.getElementById('sidebar').classList.remove('open');
+  });
+});
+
+document.querySelectorAll('.view-all-link').forEach(a => {
+  a.addEventListener('click', e => { e.preventDefault(); navigateTo(a.dataset.page); });
+});
+
+document.getElementById('hamburger').addEventListener('click', () => {
+  document.getElementById('sidebar').classList.toggle('open');
+});
+
+/* ═══ API Status Check ═══ */
+async function checkStatus() {
+  const dot  = document.getElementById('status-dot');
+  const txt  = document.getElementById('status-text');
+  try {
+    await fetch('/v1/appointments?status=SCHEDULED');
+    dot.className = 'status-dot online';
+    txt.textContent = 'API Online';
+  } catch {
+    dot.className = 'status-dot offline';
+    txt.textContent = 'API Offline';
+  }
+}
+
+/* ═══ Load Data ═══ */
+async function loadAllAppointments(params = '') {
+  try { appointments = await GET(`/v1/appointments${params}`); }
+  catch { appointments = []; }
+}
+
+/* Dashboard loads from appointments only (no list-all for doctors/patients) */
+async function loadDashboard() {
+  await loadAllAppointments();
+  // stats
+  const scheduled = appointments.filter(a => a.status === 'SCHEDULED').length;
+  const completed  = appointments.filter(a => a.status === 'COMPLETED').length;
+  document.getElementById('stat-scheduled').textContent = scheduled;
+  document.getElementById('stat-completed').textContent = completed;
+
+  document.getElementById('stat-doctors').textContent  = doctors.length || '—';
+  document.getElementById('stat-patients').textContent = patients.length || '—';
+  document.getElementById('badge-appointments').textContent = appointments.length;
+
+  renderDashboardAppointments();
+  renderSpecialtyChart();
+}
+
+function renderDashboardAppointments() {
+  const el = document.getElementById('dash-appointments-list');
+  const recent = [...appointments].sort((a,b) => new Date(b.appointmentTime) - new Date(a.appointmentTime)).slice(0,6);
+  if (!recent.length) { el.innerHTML = emptyState('No appointments yet'); return; }
+  el.innerHTML = `<table class="data-table"><thead><tr><th>Patient</th><th>Doctor</th><th>Time</th><th>Status</th></tr></thead>
+    <tbody>${recent.map(a => `<tr>
+      <td class="cell-name">${a.patient?.fullName||'—'}</td>
+      <td>${a.doctor?.fullName||'—'}</td>
+      <td style="font-size:.78rem;color:var(--text-muted)">${fmtDt(a.appointmentTime)}</td>
+      <td><span class="status-badge status-${a.status}">${a.status}</span></td>
+    </tr>`).join('')}</tbody></table>`;
+}
+
+function renderSpecialtyChart() {
+  const el = document.getElementById('specialty-chart');
+  const specs = { CARDIOLOGY: 0, DENTIST: 0, THERAPIST: 0 };
+  appointments.forEach(a => { if (a.doctor?.specialty && specs[a.doctor.specialty] !== undefined) specs[a.doctor.specialty]++; });
+  const total = Object.values(specs).reduce((s,v) => s+v, 0) || 1;
+  const labels = { CARDIOLOGY:'❤️ Cardiology', DENTIST:'🦷 Dentist', THERAPIST:'🧠 Therapist' };
+  el.innerHTML = Object.entries(specs).map(([k,v]) => `
+    <div class="specialty-bar-item">
+      <div class="specialty-bar-label"><span>${labels[k]}</span><span>${v}</span></div>
+      <div class="specialty-bar-track"><div class="specialty-bar-fill bar-${k}" style="width:${Math.round(v/total*100)}%"></div></div>
+    </div>`).join('');
+}
+
+/* ═══ Doctors ═══ */
+async function loadDoctors() {
+  try { doctors = await GET('/v1/doctors'); }
+  catch { doctors = []; }
+}
+
+function renderDoctors(filter='') {
+  const grid = document.getElementById('doctors-grid');
+  const fl = filter.toLowerCase();
+  const list = doctors.filter(d =>
+    !fl || d.fullName?.toLowerCase().includes(fl) || (d.specialty||'').toLowerCase().includes(fl)
+  );
+  document.getElementById('badge-doctors').textContent = doctors.length;
+
+  if (!list.length) { grid.innerHTML = `<div style="grid-column:1/-1">${emptyState('No doctors found')}</div>`; return; }
+
+  grid.innerHTML = list.map(d => {
+    const initials = (d.fullName||'?').split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase();
+    const sp = d.specialty || null;
+    return `<div class="doctor-card">
+      <div class="doctor-card-top">
+        <div class="doctor-avatar">${initials}</div>
+        <div class="doctor-info">
+          <div class="doctor-name">${d.fullName}</div>
+          <div class="doctor-specialty">${sp ? `<span class="specialty-badge badge-${sp}">${specialtyLabel(sp)}</span>` : '<span class="specialty-badge badge-none">No specialty</span>'}</div>
+        </div>
+      </div>
+      <div class="doctor-id">ID: ${d.id}</div>
+      <div class="doctor-actions">
+        <button class="btn btn-secondary btn-sm" onclick="showDoctorApts('${d.id}','${d.fullName}')">📅 Schedule</button>
+        <button class="btn btn-ghost btn-sm" onclick="openAssignSpecialty('${d.id}','${d.fullName}','${sp||''}')">✏️ Specialty</button>
+      </div>
+    </div>`;
+  }).join('');
+}
+
+document.getElementById('doctor-search').addEventListener('input', e => renderDoctors(e.target.value));
+
+/* ═══ Create Doctor ═══ */
+document.getElementById('open-create-doctor').addEventListener('click', () => openModal('modal-create-doctor'));
+
+document.getElementById('form-create-doctor').addEventListener('submit', async e => {
+  e.preventDefault();
+  clearErrors(['dr-name-err','dr-specialty-err']);
+  const fullName  = document.getElementById('dr-name').value.trim();
+  const specialty = document.getElementById('dr-specialty').value;
+  let ok = true;
+  if (!fullName || fullName.length < 3) { setErr('dr-name-err','Full name must be at least 3 characters'); ok=false; }
+  if (!specialty) { setErr('dr-specialty-err','Please select a specialty'); ok=false; }
+  if (!ok) return;
+  try {
+    await POST('/v1/doctors', { fullName, specialty });
+    toast('success','Doctor Created',`${fullName} registered successfully`);
+    closeModal('modal-create-doctor');
+    e.target.reset();
+    await loadAllAppointments();
+    await loadDoctors();
+    renderDoctors();
+    updateBadges();
+  } catch(err) { toast('error','Failed', err.message); }
+});
+
+/* ═══ Assign Specialty ═══ */
+function openAssignSpecialty(id, name, current) {
+  document.getElementById('assign-doctor-id').value = id;
+  document.getElementById('assign-doctor-name').textContent = name;
+  document.getElementById('assign-specialty').value = current || '';
+  openModal('modal-assign-specialty');
+}
+
+document.getElementById('form-assign-specialty').addEventListener('submit', async e => {
+  e.preventDefault();
+  clearErrors(['assign-specialty-err']);
+  const id       = document.getElementById('assign-doctor-id').value;
+  const specialty= document.getElementById('assign-specialty').value;
+  if (!specialty) { setErr('assign-specialty-err','Please select a specialty'); return; }
+  try {
+    await PATCH(`/v1/doctors/${id}/specialty`, { specialty });
+    toast('success','Specialty Updated','Doctor specialty assigned successfully');
+    closeModal('modal-assign-specialty');
+    await loadAllAppointments();
+    await loadDoctors();
+    renderDoctors();
+  } catch(err) { toast('error','Failed', err.message); }
+});
+
+/* ═══ Doctor Appointments Modal ═══ */
+async function showDoctorApts(id, name) {
+  document.getElementById('modal-doctor-apts-name').textContent = name;
+  const body = document.getElementById('modal-doctor-apts-body');
+  body.innerHTML = `<div class="skeleton-loader"><div class="sk-row"></div><div class="sk-row"></div></div>`;
+  openModal('modal-doctor-apts');
+  try {
+    const list = await GET(`/v1/doctors/${id}/appointments`);
+    if (!list.length) { body.innerHTML = emptyState('No appointments'); return; }
+    body.innerHTML = aptTable(list, ['patient','time','status','cancel']);
+  } catch(err) { body.innerHTML = `<p style="padding:20px;color:var(--accent-red)">${err.message}</p>`; }
+}
+
+/* ═══ Patients ═══ */
+async function loadPatients() {
+  try { patients = await GET('/v1/patients'); }
+  catch { patients = []; }
+}
+
+function renderPatients(filter='') {
+  const tbody = document.getElementById('patients-tbody');
+  const fl = filter.toLowerCase();
+  const list = patients.filter(p =>
+    !fl || p.fullName?.toLowerCase().includes(fl) || (p.phoneNumber||'').includes(fl)
+  );
+  document.getElementById('badge-patients').textContent = patients.length;
+  if (!list.length) {
+    tbody.innerHTML = `<tr><td colspan="4" style="text-align:center;padding:32px;color:var(--text-muted)">No patients found</td></tr>`;
+    return;
+  }
+  tbody.innerHTML = list.map(p => `<tr>
+    <td><div class="cell-name">${p.fullName}</div></td>
+    <td><span style="font-family:monospace;font-size:.82rem">${p.phoneNumber||'—'}</span></td>
+    <td class="cell-id">${p.id}</td>
+    <td class="cell-actions">
+      <button class="btn btn-secondary btn-sm" onclick="showPatientApts('${p.id}','${p.fullName}')">📅 History</button>
+    </td>
+  </tr>`).join('');
+}
+
+document.getElementById('patient-search').addEventListener('input', e => renderPatients(e.target.value));
+
+/* ═══ Create Patient ═══ */
+document.getElementById('open-create-patient').addEventListener('click', () => openModal('modal-create-patient'));
+
+document.getElementById('form-create-patient').addEventListener('submit', async e => {
+  e.preventDefault();
+  clearErrors(['pt-name-err','pt-phone-err']);
+  const fullName    = document.getElementById('pt-name').value.trim();
+  const phoneNumber = document.getElementById('pt-phone').value.trim();
+  let ok = true;
+  if (!fullName) { setErr('pt-name-err','Full name is required'); ok=false; }
+  if (!phoneNumber || !/^[+]?[0-9]{10,}$/.test(phoneNumber)) { setErr('pt-phone-err','Enter a valid phone number (min 10 digits)'); ok=false; }
+  if (!ok) return;
+  try {
+    await POST('/v1/patients', { fullName, phoneNumber });
+    toast('success','Patient Registered',`${fullName} added successfully`);
+    closeModal('modal-create-patient');
+    e.target.reset();
+    await loadAllAppointments();
+    await loadPatients();
+    renderPatients();
+    updateBadges();
+  } catch(err) { toast('error','Failed', err.message); }
+});
+
+/* ═══ Patient Appointments ═══ */
+async function showPatientApts(id, name) {
+  document.getElementById('modal-patient-apts-name').textContent = name;
+  const body = document.getElementById('modal-patient-apts-body');
+  body.innerHTML = `<div class="skeleton-loader"><div class="sk-row"></div><div class="sk-row"></div></div>`;
+  openModal('modal-patient-apts');
+  try {
+    const list = await GET(`/v1/patients/${id}/appointments`);
+    if (!list.length) { body.innerHTML = emptyState('No appointments'); return; }
+    body.innerHTML = aptTable(list, ['doctor','time','status','cancel']);
+  } catch(err) { body.innerHTML = `<p style="padding:20px;color:var(--accent-red)">${err.message}</p>`; }
+}
+
+/* ═══ Appointments Page ═══ */
+function renderAppointments() {
+  const tbody = document.getElementById('appointments-tbody');
+  document.getElementById('badge-appointments').textContent = appointments.length;
+  if (!appointments.length) {
+    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center;padding:32px;color:var(--text-muted)">No appointments found</td></tr>`;
+    return;
+  }
+  tbody.innerHTML = appointments.map(a => `<tr>
+    <td><div class="cell-name">${a.patient?.fullName||'—'}</div></td>
+    <td>${a.doctor?.fullName||'—'}</td>
+    <td>${a.doctor?.specialty ? `<span class="specialty-badge badge-${a.doctor.specialty}">${specialtyLabel(a.doctor.specialty)}</span>` : '—'}</td>
+    <td><div style="font-size:.82rem">${fmtDt(a.appointmentTime)}</div></td>
+    <td><span class="status-badge status-${a.status}">${a.status}</span></td>
+    <td class="cell-actions">
+      ${a.status==='SCHEDULED' ? `<button class="btn btn-danger btn-sm" onclick="promptCancel('${a.id}')">✕ Cancel</button>` : ''}
+    </td>
+  </tr>`).join('');
+}
+
+/* Filters */
+document.getElementById('apt-filter-btn').addEventListener('click', async () => {
+  const status = document.getElementById('apt-status-filter').value;
+  const date   = document.getElementById('apt-date-filter').value;
+  let q = [];
+  if (status) q.push(`status=${status}`);
+  if (date)   q.push(`date=${date}`);
+  await loadAllAppointments(q.length ? '?'+q.join('&') : '');
+  renderAppointments();
+});
+
+document.getElementById('apt-clear-filter').addEventListener('click', async () => {
+  document.getElementById('apt-status-filter').value = '';
+  document.getElementById('apt-date-filter').value   = '';
+  await loadAllAppointments();
+  renderAppointments();
+});
+
+/* ═══ Book Appointment ═══ */
+document.getElementById('open-book-apt').addEventListener('click', () => navigateTo('book'));
+document.getElementById('nav-book').addEventListener('click', e => { e.preventDefault(); navigateTo('book'); });
+
+function populateBookSelects() {
+  const ps = document.getElementById('book-patient');
+  const ds = document.getElementById('book-doctor');
+  const cur_p = ps.value, cur_d = ds.value;
+  ps.innerHTML = '<option value="">Select a patient...</option>' +
+    patients.map(p => `<option value="${p.id}">${p.fullName} — ${p.phoneNumber||''}</option>`).join('');
+  ds.innerHTML = '<option value="">Select a doctor...</option>' +
+    doctors.map(d => `<option value="${d.id}">${d.fullName} (${specialtyLabel(d.specialty||'')})</option>`).join('');
+  if (cur_p) ps.value = cur_p;
+  if (cur_d) ds.value = cur_d;
+  // default datetime = now+1h
+  const min = new Date(); min.setHours(min.getHours()+1);
+  const dtInput = document.getElementById('book-time');
+  if (!dtInput.value) dtInput.value = min.toISOString().slice(0,16);
+}
+
+document.getElementById('book-form').addEventListener('submit', async e => {
+  e.preventDefault();
+  clearErrors(['book-patient-err','book-doctor-err','book-time-err']);
+  const patientId       = document.getElementById('book-patient').value;
+  const doctorId        = document.getElementById('book-doctor').value;
+  const appointmentTime = document.getElementById('book-time').value;
+  let ok = true;
+  if (!patientId) { setErr('book-patient-err','Please select a patient'); ok=false; }
+  if (!doctorId)  { setErr('book-doctor-err','Please select a doctor'); ok=false; }
+  if (!appointmentTime) { setErr('book-time-err','Please select a date and time'); ok=false; }
+  else if (new Date(appointmentTime) <= new Date()) { setErr('book-time-err','Appointment must be in the future'); ok=false; }
+  if (!ok) return;
+
+  const btn = document.getElementById('book-submit');
+  btn.disabled = true; btn.textContent = 'Booking…';
+  try {
+    await POST('/v1/appointments', { patientId, doctorId, appointmentTime });
+    toast('success','Appointment Booked','Visit scheduled successfully');
+    document.getElementById('book-form').reset();
+    await loadAllAppointments();
+    renderDashboardAppointments();
+    renderSpecialtyChart();
+    renderAppointments();
+    navigateTo('appointments');
+  } catch(err) { toast('error','Booking Failed', err.message); }
+  finally { btn.disabled=false; btn.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> Confirm Booking'; }
+});
+
+/* ═══ Cancel Appointment ═══ */
+function promptCancel(id) {
+  document.getElementById('cancel-appointment-id').value = id;
+  openModal('modal-cancel-confirm');
+}
+
+document.getElementById('confirm-cancel-btn').addEventListener('click', async () => {
+  const id = document.getElementById('cancel-appointment-id').value;
+  try {
+    await POST(`/v1/appointments/${id}/cancel`);
+    toast('success','Cancelled','Appointment cancelled');
+    closeModal('modal-cancel-confirm');
+    await loadAllAppointments();
+    renderAppointments();
+    renderDashboardAppointments();
+    renderSpecialtyChart();
+    loadDashboard();
+  } catch(err) { toast('error','Failed', err.message); }
+});
+
+/* ═══ Global Search ═══ */
+document.getElementById('global-search').addEventListener('input', e => {
+  const v = e.target.value.trim();
+  if (!v) return;
+  // search doctors
+  const matchDr = doctors.filter(d => d.fullName?.toLowerCase().includes(v.toLowerCase()));
+  const matchPt = patients.filter(p => p.fullName?.toLowerCase().includes(v.toLowerCase()));
+  if (matchDr.length) { navigateTo('doctors'); renderDoctors(v); }
+  else if (matchPt.length) { navigateTo('patients'); renderPatients(v); }
+});
+
+/* ═══ Refresh ═══ */
+document.getElementById('refresh-btn').addEventListener('click', async () => {
+  const btn = document.getElementById('refresh-btn');
+  btn.classList.add('spinning');
+  await initData();
+  btn.classList.remove('spinning');
+  toast('info','Refreshed','Data reloaded');
+});
+
+/* ═══ Helpers ═══ */
+function fmtDt(dt) {
+  if (!dt) return '—';
+  return new Date(dt).toLocaleString('en-GB', { day:'2-digit', month:'short', year:'numeric', hour:'2-digit', minute:'2-digit' });
+}
+
+function specialtyLabel(s) {
+  return { CARDIOLOGY:'❤️ Cardiology', DENTIST:'🦷 Dentist', THERAPIST:'🧠 Therapist' }[s] || s || '—';
+}
+
+function emptyState(msg) {
+  return `<div class="empty-state">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+    <p>${msg}</p></div>`;
+}
+
+function aptTable(list, cols) {
+  const headers = { patient:'Patient', doctor:'Doctor', time:'Date & Time', status:'Status', cancel:'Action' };
+  return `<table class="data-table"><thead><tr>${cols.map(c=>`<th>${headers[c]||c}</th>`).join('')}</tr></thead>
+    <tbody>${list.map(a=>`<tr>
+      ${cols.includes('patient') ? `<td class="cell-name">${a.patient?.fullName||a.patientId||'—'}</td>` : ''}
+      ${cols.includes('doctor')  ? `<td class="cell-name">${a.doctor?.fullName||a.doctorId||'—'}</td>` : ''}
+      ${cols.includes('time')    ? `<td style="font-size:.78rem;color:var(--text-muted)">${fmtDt(a.appointmentTime)}</td>` : ''}
+      ${cols.includes('status')  ? `<td><span class="status-badge status-${a.status}">${a.status}</span></td>` : ''}
+      ${cols.includes('cancel')  ? `<td>${a.status==='SCHEDULED'?`<button class="btn btn-danger btn-sm" onclick="promptCancel('${a.id}')">✕</button>`:'—'}</td>` : ''}
+    </tr>`).join('')}</tbody></table>`;
+}
+
+function setErr(id, msg) { const el=document.getElementById(id); if(el) el.textContent=msg; }
+function clearErrors(ids) { ids.forEach(id => setErr(id,'')); }
+
+function updateBadges() {
+  document.getElementById('badge-doctors').textContent     = doctors.length;
+  document.getElementById('badge-patients').textContent    = patients.length;
+  document.getElementById('badge-appointments').textContent= appointments.length;
+}
+
+/* ═══ Init ═══ */
+async function initData() {
+  await loadAllAppointments();
+  await loadDoctors();
+  await loadPatients();
+  updateBadges();
+  await loadDashboard();
+}
+
+(async () => {
+  await checkStatus();
+  await initData();
+  navigateTo('dashboard');
+})();