diff --git a/.Net Capstone Project/Dashboard27.js b/.Net Capstone Project/Dashboard27.js
new file mode 100644
index 0000000..9e56a5f
--- /dev/null
+++ b/.Net Capstone Project/Dashboard27.js	
@@ -0,0 +1,832 @@
+let currentPatientId = null;
+let patientsCache = [];
+let patientSearchTerm = '';
+
+function showSpinner(show) {
+  document.getElementById('spinnerOverlay').style.display = show ? 'flex' : 'none';
+}
+
+function showToast(message, variant = 'success') {
+  const container = document.getElementById('toastContainer');
+  const el = document.createElement('div');
+  el.className = `toast align-items-center text-bg-${variant} border-0 show mb-2`;
+  el.innerHTML = `<div class="d-flex">
+      <div class="toast-body">${message}</div>
+      <button type="button" class="btn-close btn-close-white me-2 m-auto" onclick="this.closest('.toast').remove()"></button>
+    </div>`;
+  container.appendChild(el);
+  setTimeout(() => el.remove(), 5000);
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str ?? '';
+  return div.innerHTML;
+}
+
+function fmtDate(dateStr) {
+  if (!dateStr) return '—';
+  const d = new Date(dateStr);
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+// ---------- Dynamic resource forms ----------
+// Field config per FHIR resource type. Drives the generic #addResourceModal
+// so patients, conditions, observations, allergies, medications and
+// encounters can all be added from the UI and hit the CRUD API — nothing
+// here is limited to the three seeded demo patients.
+const RESOURCE_FORMS = {
+  condition: {
+    title: 'Add Condition',
+    fields: [
+      { key: 'code', label: 'Code (ICD-10, e.g. I10)', type: 'text', required: true },
+      { key: 'display', label: 'Display name', type: 'text', required: true },
+      { key: 'clinicalStatus', label: 'Clinical status', type: 'select', options: ['active', 'inactive', 'resolved', 'remission'], default: 'active' },
+      { key: 'onsetDate', label: 'Onset date', type: 'date', required: true }
+    ],
+    add: (patientId, payload) => Api.addCondition(patientId, payload)
+  },
+  observation: {
+    title: 'Add Observation',
+    fields: [
+      { key: 'code', label: 'Code (LOINC, e.g. 8480-6)', type: 'text', required: true },
+      { key: 'display', label: 'Display name', type: 'text', required: true },
+      { key: 'value', label: 'Value', type: 'number', required: true },
+      { key: 'unit', label: 'Unit', type: 'text', required: true },
+      { key: 'effectiveDate', label: 'Effective date/time', type: 'datetime-local', required: true }
+    ],
+    add: (patientId, payload) => Api.addObservation(patientId, payload)
+  },
+  allergy: {
+    title: 'Add Allergy / Intolerance',
+    fields: [
+      { key: 'substance', label: 'Substance', type: 'text', required: true },
+      { key: 'reaction', label: 'Reaction', type: 'text' },
+      { key: 'criticality', label: 'Criticality', type: 'select', options: ['low', 'high', 'unable-to-assess'], default: 'low' }
+    ],
+    add: (patientId, payload) => Api.addAllergy(patientId, payload)
+  },
+  medication: {
+    title: 'Add Medication',
+    fields: [
+      { key: 'medicationName', label: 'Medication name', type: 'text', required: true },
+      { key: 'dosage', label: 'Dosage', type: 'text' },
+      { key: 'status', label: 'Status', type: 'select', options: ['active', 'completed', 'cancelled', 'on-hold', 'stopped'], default: 'active' },
+      { key: 'authoredOn', label: 'Authored on', type: 'date' }
+    ],
+    add: (patientId, payload) => Api.addMedication(patientId, payload)
+  },
+  encounter: {
+    title: 'Add Encounter',
+    fields: [
+      { key: 'encounterType', label: 'Encounter type', type: 'text', required: true, placeholder: 'e.g. Outpatient' },
+      { key: 'reason', label: 'Reason', type: 'text' },
+      { key: 'encounterDate', label: 'Date/time', type: 'datetime-local', required: true },
+      { key: 'status', label: 'Status', type: 'select', options: ['planned', 'in-progress', 'finished', 'cancelled'], default: 'in-progress' }
+    ],
+    add: (patientId, payload) => Api.addEncounter(patientId, payload)
+  }
+};
+
+let activeResourceType = null;
+let newPatientModal, addResourceModal;
+
+function openResourceModal(type) {
+  if (!currentPatientId) {
+    showToast('Select a patient first.', 'danger');
+    return;
+  }
+  activeResourceType = type;
+  const config = RESOURCE_FORMS[type];
+  document.getElementById('addResourceModalTitle').textContent = config.title;
+
+  const body = document.getElementById('addResourceModalBody');
+  body.innerHTML = config.fields.map(f => {
+    const id = `res_${f.key}`;
+    if (f.type === 'select') {
+      return `<div class="col-12">
+        <label class="form-label small">${escapeHtml(f.label)}</label>
+        <select class="form-select" id="${id}">
+          ${f.options.map(o => `<option value="${o}" ${o === f.default ? 'selected' : ''}>${o}</option>`).join('')}
+        </select>
+      </div>`;
+    }
+    return `<div class="col-12">
+      <label class="form-label small">${escapeHtml(f.label)}</label>
+      <input type="${f.type}" ${f.required ? 'required' : ''} class="form-control" id="${id}" placeholder="${escapeHtml(f.placeholder || '')}">
+    </div>`;
+  }).join('');
+
+  addResourceModal.show();
+}
+
+// ---------- Dashboard stats + resource browser ----------
+// Aggregates every patient's chart + care plans into flat arrays (each item
+// tagged with its owning patient) so the top stat cards can show real
+// counts, and clicking one can browse that resource across ALL patients —
+// not just the one currently selected.
+let resourceCache = { conditions: [], observations: [], allergies: [], medications: [], encounters: [], careplans: [] };
+let resourceBrowserModal;
+
+async function loadDashboardStats() {
+  resourceCache = { conditions: [], observations: [], allergies: [], medications: [], encounters: [], careplans: [] };
+
+  try {
+    const [chartResults, carePlanResults] = await Promise.all([
+      Promise.all(patientsCache.map(p => Api.getChart(p.id).catch(() => null))),
+      Promise.all(patientsCache.map(p => Api.getCarePlans(p.id).catch(() => [])))
+    ]);
+
+    patientsCache.forEach((p, idx) => {
+      const chart = chartResults[idx];
+      if (chart) {
+        chart.conditions.forEach(c => resourceCache.conditions.push({ ...c, patientId: p.id, patientName: p.fullName }));
+        chart.observations.forEach(o => resourceCache.observations.push({ ...o, patientId: p.id, patientName: p.fullName }));
+        chart.allergies.forEach(a => resourceCache.allergies.push({ ...a, patientId: p.id, patientName: p.fullName }));
+        chart.medications.forEach(m => resourceCache.medications.push({ ...m, patientId: p.id, patientName: p.fullName }));
+        chart.encounters.forEach(e => resourceCache.encounters.push({ ...e, patientId: p.id, patientName: p.fullName }));
+      }
+      (carePlanResults[idx] || []).forEach(cp => resourceCache.careplans.push({ ...cp, patientId: p.id, patientName: p.fullName }));
+    });
+  } catch {
+    // Stats are a nice-to-have on top of the core dashboard — don't block
+    // the rest of the page if aggregation fails for some reason.
+  }
+
+  updateStatCardsForContext();
+}
+
+// Returns the patients matching the current search box text (or everyone,
+// if the box is empty). Shared by the sidebar list and the stat cards so
+// they always agree on "what's currently in view".
+function getFilteredPatients() {
+  const term = patientSearchTerm.trim().toLowerCase();
+  if (!term) return patientsCache;
+
+  return patientsCache.filter(p => {
+    const fullName = (p.fullName || '').toLowerCase();
+    const nameParts = fullName.split(' ').filter(Boolean);
+
+    // Name matches if the search term is the start of the full name, OR
+    // the start of any individual name part (first name, last name, etc.)
+    // — so typing "N" matches "Nisha Meshram" and "Neha Patil", but not
+    // "Anjali Patil" (the 'n' isn't at the start of either name part).
+    const nameMatch = fullName.startsWith(term) || nameParts.some(part => part.startsWith(term));
+
+    // Strip generic label prefixes ("pt-", "MRN-") before substring
+    // matching — otherwise a search term can accidentally match the label
+    // text itself. E.g. "MRN-100235" lowercased contains "mrn", so
+    // searching "n" would match every patient's MRN regardless of their
+    // actual number, even ones with nothing else in common with "n".
+    const idValue = (p.id || '').toLowerCase().replace(/^pt-/, '');
+    const mrnValue = (p.medicalRecordNumber || '').toLowerCase().replace(/^mrn-/, '');
+    const idMatch = idValue.includes(term);
+    const mrnMatch = mrnValue.includes(term);
+
+    return nameMatch || idMatch || mrnMatch;
+  });
+}
+
+// Drives the top stat cards. Three states:
+//   1. A patient is selected (currentPatientId set)  -> counts for just them.
+//   2. Nothing selected but the search box has text   -> counts for the
+//      patients currently matching the search.
+//   3. Neither                                        -> counts across everyone.
+function updateStatCardsForContext() {
+  const setCount = (id, value) => { const el = document.getElementById(id); if (el) el.textContent = value; };
+  const scopeLabel = document.getElementById('statsScopeLabel');
+
+  let activePatients;
+  let scopeText = null;
+
+  if (currentPatientId) {
+    const selected = patientsCache.find(p => p.id === currentPatientId);
+    activePatients = selected ? [selected] : [];
+    if (selected) scopeText = `Showing data for <strong>${escapeHtml(selected.fullName)}</strong>`;
+  } else {
+    activePatients = getFilteredPatients();
+    if (patientSearchTerm.trim()) {
+      scopeText = `Showing ${activePatients.length} of ${patientsCache.length} patients matching "${escapeHtml(patientSearchTerm.trim())}"`;
+    }
+  }
+
+  const activeIds = getActivePatientIds();
+
+  setCount('stat_patients', activePatients.length);
+  setCount('stat_conditions', resourceCache.conditions.filter(c => activeIds.has(c.patientId)).length);
+  setCount('stat_medications', resourceCache.medications.filter(m => activeIds.has(m.patientId)).length);
+  setCount('stat_allergies', resourceCache.allergies.filter(a => activeIds.has(a.patientId)).length);
+  setCount('stat_observations', resourceCache.observations.filter(o => activeIds.has(o.patientId)).length);
+  setCount('stat_encounters', resourceCache.encounters.filter(e => activeIds.has(e.patientId)).length);
+  setCount('stat_careplans', resourceCache.careplans.filter(cp => activeIds.has(cp.patientId)).length);
+
+  if (scopeLabel) {
+    if (scopeText) {
+      scopeLabel.innerHTML = `${scopeText} · <a href="#" id="clearStatsScopeLink">Show all patients</a>`;
+      scopeLabel.classList.remove('d-none');
+    } else {
+      scopeLabel.innerHTML = '';
+      scopeLabel.classList.add('d-none');
+    }
+  }
+}
+
+function patientChipHtml(patientId, name) {
+  return `<span class="patient-chip" data-jump-patient="${patientId}">👤 ${escapeHtml(name)}</span>`;
+}
+
+// The single source of truth for "what patient(s) is the page currently
+// scoped to" — a selected patient takes priority, otherwise it's whoever
+// matches the search box (or everyone, if the box is empty). Used by both
+// the stat cards and the "browse all" modal so they always agree.
+function getActivePatientIds() {
+  if (currentPatientId) return new Set([currentPatientId]);
+  return new Set(getFilteredPatients().map(p => p.id));
+}
+
+const RESOURCE_BROWSER_CONFIG = {
+  patients: {
+    title: 'Patients',
+    columns: ['Name', 'Age', 'Gender', 'MRN'],
+    rows: (activeIds) => patientsCache.filter(p => activeIds.has(p.id)).map(p => [
+      patientChipHtml(p.id, p.fullName), p.age, escapeHtml(p.gender), escapeHtml(p.medicalRecordNumber)
+    ])
+  },
+  conditions: {
+    title: 'Conditions',
+    columns: ['Patient', 'Display', 'Code', 'Status', 'Onset'],
+    rows: (activeIds) => resourceCache.conditions.filter(c => activeIds.has(c.patientId)).map(c => [
+      patientChipHtml(c.patientId, c.patientName), escapeHtml(c.display), escapeHtml(c.code),
+      escapeHtml(c.clinicalStatus), fmtDate(c.onsetDate)
+    ])
+  },
+  medications: {
+    title: 'Medications',
+    columns: ['Patient', 'Medication', 'Dosage', 'Status', 'Authored'],
+    rows: (activeIds) => resourceCache.medications.filter(m => activeIds.has(m.patientId)).map(m => [
+      patientChipHtml(m.patientId, m.patientName), escapeHtml(m.medicationName), escapeHtml(m.dosage),
+      escapeHtml(m.status), fmtDate(m.authoredOn)
+    ])
+  },
+  allergies: {
+    title: 'Allergies',
+    columns: ['Patient', 'Substance', 'Reaction', 'Criticality'],
+    rows: (activeIds) => resourceCache.allergies.filter(a => activeIds.has(a.patientId)).map(a => [
+      patientChipHtml(a.patientId, a.patientName), escapeHtml(a.substance), escapeHtml(a.reaction), escapeHtml(a.criticality)
+    ])
+  },
+  observations: {
+    title: 'Observations',
+    columns: ['Patient', 'Display', 'Value', 'Date'],
+    rows: (activeIds) => resourceCache.observations.filter(o => activeIds.has(o.patientId)).map(o => [
+      patientChipHtml(o.patientId, o.patientName), escapeHtml(o.display), `${o.value} ${escapeHtml(o.unit)}`, fmtDate(o.effectiveDate)
+    ])
+  },
+  encounters: {
+    title: 'Encounters',
+    columns: ['Patient', 'Type', 'Reason', 'Date', 'Status'],
+    rows: (activeIds) => resourceCache.encounters.filter(e => activeIds.has(e.patientId)).map(e => [
+      patientChipHtml(e.patientId, e.patientName), escapeHtml(e.encounterType), escapeHtml(e.reason),
+      fmtDate(e.encounterDate), escapeHtml(e.status)
+    ])
+  },
+  careplans: {
+    title: 'Care Plans',
+    columns: ['Patient', 'Title', 'Triggered By', 'Status', 'Created'],
+    rows: (activeIds) => resourceCache.careplans.filter(cp => activeIds.has(cp.patientId)).map(cp => [
+      patientChipHtml(cp.patientId, cp.patientName), escapeHtml(cp.title), escapeHtml(cp.triggeredByRule),
+      escapeHtml(cp.status), fmtDate(cp.createdDate)
+    ])
+  }
+};
+
+function openResourceBrowser(resourceType) {
+  const config = RESOURCE_BROWSER_CONFIG[resourceType];
+  if (!config) return;
+
+  const activeIds = getActivePatientIds();
+  const scopeSuffix = currentPatientId
+    ? ` — ${patientsCache.find(p => p.id === currentPatientId)?.fullName || 'selected patient'}`
+    : (patientSearchTerm.trim() ? ` — matching "${patientSearchTerm.trim()}"` : '');
+
+  document.getElementById('resourceBrowserTitle').textContent = config.title + scopeSuffix;
+  document.getElementById('resourceBrowserHead').innerHTML = config.columns.map(c => `<th>${c}</th>`).join('');
+
+  const rows = config.rows(activeIds);
+  const body = document.getElementById('resourceBrowserBody');
+  const emptyState = document.getElementById('resourceBrowserEmpty');
+
+  if (rows.length === 0) {
+    body.innerHTML = '';
+    emptyState.textContent = 'No data found.';
+    emptyState.classList.remove('d-none');
+  } else {
+    emptyState.classList.add('d-none');
+    body.innerHTML = rows.map(cells => `<tr>${cells.map(c => `<td>${c}</td>`).join('')}</tr>`).join('');
+  }
+
+  resourceBrowserModal.show();
+}
+
+async function submitResourceForm(e) {
+  e.preventDefault();
+  const config = RESOURCE_FORMS[activeResourceType];
+  if (!config) return;
+
+  const payload = {};
+  for (const f of config.fields) {
+    const el = document.getElementById(`res_${f.key}`);
+    let val = el.value;
+    if (f.type === 'number') val = val === '' ? null : parseFloat(val);
+    payload[f.key] = val === '' ? null : val;
+  }
+
+  try {
+    showSpinner(true);
+    await config.add(currentPatientId, payload);
+    addResourceModal.hide();
+    showToast(`${config.title.replace('Add ', '')} added.`);
+    await loadChart(currentPatientId);
+    loadDashboardStats();
+  } catch (err) {
+    showToast(err.message, 'danger');
+  } finally {
+    showSpinner(false);
+  }
+}
+
+async function deleteResource(type, id) {
+  if (!currentPatientId || !confirm('Delete this item?')) return;
+  const deleteFns = {
+    condition: Api.deleteCondition,
+    observation: Api.deleteObservation,
+    allergy: Api.deleteAllergy,
+    medication: Api.deleteMedication,
+    encounter: Api.deleteEncounter
+  };
+  try {
+    showSpinner(true);
+    await deleteFns[type](currentPatientId, id);
+    showToast('Deleted.');
+    await loadChart(currentPatientId);
+    loadDashboardStats();
+  } catch (err) {
+    showToast(err.message, 'danger');
+  } finally {
+    showSpinner(false);
+  }
+}
+
+function setupDynamicDataControls() {
+  newPatientModal = new bootstrap.Modal(document.getElementById('newPatientModal'));
+  addResourceModal = new bootstrap.Modal(document.getElementById('addResourceModal'));
+  resourceBrowserModal = new bootstrap.Modal(document.getElementById('resourceBrowserModal'));
+
+  document.getElementById('newPatientBtn').addEventListener('click', () => newPatientModal.show());
+
+  // Live search: filters the cached patient list by name, patient ID, or
+  // MRN as the user types — no server round-trip needed.
+  document.getElementById('patientSearchInput')?.addEventListener('input', (e) => {
+    patientSearchTerm = e.target.value;
+    renderPatientList();
+    updateStatCardsForContext();
+  });
+
+  document.getElementById('newPatientForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const payload = {
+      firstName: document.getElementById('np_firstName').value,
+      lastName: document.getElementById('np_lastName').value,
+      dateOfBirth: document.getElementById('np_dob').value,
+      gender: document.getElementById('np_gender').value,
+      medicalRecordNumber: document.getElementById('np_mrn').value || null
+    };
+    try {
+      showSpinner(true);
+      const created = await Api.createPatient(payload);
+      newPatientModal.hide();
+      document.getElementById('newPatientForm').reset();
+      showToast('Patient created.');
+      await loadPatientList();
+      loadDashboardStats();
+      selectPatient(created.patient.id);
+    } catch (err) {
+      showToast(err.message, 'danger');
+    } finally {
+      showSpinner(false);
+    }
+  });
+
+  document.getElementById('addResourceForm').addEventListener('submit', submitResourceForm);
+
+  // Stat cards -> open the "browse this resource across all patients" modal.
+  document.getElementById('statsRow').addEventListener('click', (e) => {
+    const card = e.target.closest('.stat-card');
+    if (card) openResourceBrowser(card.dataset.resource);
+  });
+
+  // "Show all patients" link inside the stats scope label — clears both
+  // the search box and the selected patient, reverting the stat cards to
+  // totals across everyone.
+  document.addEventListener('click', (e) => {
+    if (e.target.id !== 'clearStatsScopeLink') return;
+    e.preventDefault();
+    patientSearchTerm = '';
+    const input = document.getElementById('patientSearchInput');
+    if (input) input.value = '';
+    currentPatientId = null;
+    sessionStorage.removeItem('cip_patientId');
+    document.getElementById('patientContent')?.classList.add('d-none');
+    document.getElementById('noPatientState')?.classList.remove('d-none');
+    renderPatientList();
+    updateStatCardsForContext();
+  });
+
+  // Inside the resource browser: clicking a patient chip jumps straight to
+  // that patient's Chart tab.
+  document.getElementById('resourceBrowserBody').addEventListener('click', (e) => {
+    const chip = e.target.closest('[data-jump-patient]');
+    if (!chip) return;
+    resourceBrowserModal.hide();
+    selectPatient(chip.dataset.jumpPatient);
+    document.querySelectorAll('#dashboardTabs .nav-link').forEach(b => b.classList.remove('active'));
+    document.querySelector('#dashboardTabs .nav-link[data-tab="chart"]')?.classList.add('active');
+    document.querySelectorAll('.tab-pane').forEach(p => p.classList.add('d-none'));
+    document.getElementById('tab-chart')?.classList.remove('d-none');
+  });
+
+  // Event delegation: "+ Add" buttons in the chart tab, and per-item delete
+  // buttons rendered inside the chart lists (see loadChart()).
+  document.getElementById('tab-chart').addEventListener('click', (e) => {
+    const addBtn = e.target.closest('[data-add]');
+    if (addBtn) { openResourceModal(addBtn.dataset.add); return; }
+
+    const delBtn = e.target.closest('[data-delete-type]');
+    if (delBtn) { deleteResource(delBtn.dataset.deleteType, parseInt(delBtn.dataset.deleteId, 10)); }
+  });
+}
+
+// ---------- Init ----------
+document.addEventListener('DOMContentLoaded', async () => {
+  const token = sessionStorage.getItem('cip_token');
+  if (!token) {
+    window.location.href = 'login.html';
+    return;
+  }
+
+  document.getElementById('clinicianLabel').textContent =
+    `👤 ${sessionStorage.getItem('cip_clinician') || 'Clinician'}`;
+
+  document.getElementById('logoutBtn').addEventListener('click', () => {
+    sessionStorage.clear();
+    window.location.href = 'index.html';
+  });
+
+  setupTabs();
+  setupRiskForm();
+  setupDynamicDataControls();
+  document.getElementById('evaluateCdsBtn').addEventListener('click', evaluateCds);
+  document.getElementById('refreshCarePlansBtn').addEventListener('click', () => loadCarePlans(currentPatientId));
+
+  await loadPatientList();
+  loadDashboardStats();
+
+  const launchPatientId = sessionStorage.getItem('cip_patientId');
+  if (launchPatientId) {
+    selectPatient(launchPatientId);
+  }
+});
+
+function setupTabs() {
+  document.querySelectorAll('#dashboardTabs .nav-link').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('#dashboardTabs .nav-link').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      document.querySelectorAll('.tab-pane').forEach(p => p.classList.add('d-none'));
+      document.getElementById(`tab-${btn.dataset.tab}`).classList.remove('d-none');
+    });
+  });
+}
+
+// ---------- Patients ----------
+async function loadPatientList() {
+  try {
+    showSpinner(true);
+    patientsCache = await Api.getPatients();
+    renderPatientList();
+  } catch (err) {
+    showToast(err.message, 'danger');
+  } finally {
+    showSpinner(false);
+  }
+}
+
+function renderPatientList() {
+  const container = document.getElementById('patientList');
+  const emptyState = document.getElementById('patientSearchEmpty');
+  const emptyTerm = document.getElementById('patientSearchEmptyTerm');
+
+  const term = patientSearchTerm.trim();
+  const filtered = getFilteredPatients();
+
+  if (filtered.length === 0 && term) {
+    container.innerHTML = '';
+    container.classList.add('d-none');
+    if (emptyTerm) emptyTerm.textContent = patientSearchTerm.trim();
+    emptyState?.classList.remove('d-none');
+    return;
+  }
+  container.classList.remove('d-none');
+  emptyState?.classList.add('d-none');
+
+  container.innerHTML = filtered.map(p => `
+    <div class="card-ci patient-tile p-2 mb-2 d-flex justify-content-between align-items-start ${p.id === currentPatientId ? 'active' : ''}" data-id="${p.id}">
+      <div>
+        <div class="fw-semibold">${escapeHtml(p.fullName)}</div>
+        <div class="small text-muted-ci">${p.age} yrs · ${escapeHtml(p.gender)} · ${escapeHtml(p.medicalRecordNumber)}</div>
+        <div class="small text-muted-ci">ID: ${escapeHtml(p.id)}</div>
+      </div>
+      <button class="btn btn-sm btn-outline-danger" data-delete-patient="${p.id}" title="Delete patient">×</button>
+    </div>
+  `).join('');
+
+  container.querySelectorAll('.patient-tile').forEach(tile => {
+    tile.addEventListener('click', (e) => {
+      if (e.target.closest('[data-delete-patient]')) return;
+      selectPatient(tile.dataset.id);
+    });
+  });
+
+  container.querySelectorAll('[data-delete-patient]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const id = btn.dataset.deletePatient;
+      if (!confirm('Delete this patient and all their chart data?')) return;
+      try {
+        showSpinner(true);
+        await Api.deletePatient(id);
+        showToast('Patient deleted.');
+        if (currentPatientId === id) {
+          currentPatientId = null;
+          sessionStorage.removeItem('cip_patientId');
+          document.getElementById('patientContent').classList.add('d-none');
+          document.getElementById('noPatientState').classList.remove('d-none');
+        }
+        await loadPatientList();
+        loadDashboardStats();
+      } catch (err) {
+        showToast(err.message, 'danger');
+      } finally {
+        showSpinner(false);
+      }
+    });
+  });
+}
+
+async function selectPatient(id) {
+  currentPatientId = id;
+  sessionStorage.setItem('cip_patientId', id);
+  renderPatientList();
+  updateStatCardsForContext();
+
+  document.getElementById('noPatientState').classList.add('d-none');
+  document.getElementById('patientContent').classList.remove('d-none');
+
+  resetRiskTab();
+  resetCdsTab();
+
+  await loadChart(id);
+  await loadCarePlans(id);
+}
+
+// ---------- Chart ----------
+async function loadChart(id) {
+  try {
+    showSpinner(true);
+    const chart = await Api.getChart(id);
+
+    document.getElementById('patientName').textContent = chart.fullName;
+    document.getElementById('patientMeta').textContent =
+      `${chart.age} yrs · ${chart.gender} · ${chart.medicalRecordNumber} · Patient ID: ${chart.patientId}`;
+
+    document.getElementById('conditionsList').innerHTML = chart.conditions.length
+      ? chart.conditions.map(c => `
+          <div class="chart-list-item d-flex justify-content-between align-items-start">
+            <div>
+              <div class="fw-semibold">${escapeHtml(c.display)}</div>
+              <div class="small text-muted-ci">${escapeHtml(c.code)} · ${escapeHtml(c.clinicalStatus)} · onset ${fmtDate(c.onsetDate)}</div>
+            </div>
+            <button class="btn btn-sm btn-outline-danger" data-delete-type="condition" data-delete-id="${c.id}">×</button>
+          </div>`).join('')
+      : '<div class="text-muted-ci">No active conditions on file.</div>';
+
+    document.getElementById('allergiesList').innerHTML = chart.allergies.length
+      ? chart.allergies.map(a => `
+          <div class="chart-list-item d-flex justify-content-between align-items-start">
+            <div>
+              <div class="fw-semibold text-danger">${escapeHtml(a.substance)}</div>
+              <div class="small text-muted-ci">Reaction: ${escapeHtml(a.reaction)} · Criticality: ${escapeHtml(a.criticality)}</div>
+            </div>
+            <button class="btn btn-sm btn-outline-danger" data-delete-type="allergy" data-delete-id="${a.id}">×</button>
+          </div>`).join('')
+      : '<div class="text-muted-ci">No known allergies (NKA).</div>';
+
+    document.getElementById('medicationsList').innerHTML = chart.medications.length
+      ? chart.medications.map(m => `
+          <div class="chart-list-item d-flex justify-content-between align-items-start">
+            <div>
+              <div class="fw-semibold">${escapeHtml(m.medicationName)}</div>
+              <div class="small text-muted-ci">${escapeHtml(m.dosage)} · ${escapeHtml(m.status)} · authored ${fmtDate(m.authoredOn)}</div>
+            </div>
+            <button class="btn btn-sm btn-outline-danger" data-delete-type="medication" data-delete-id="${m.id}">×</button>
+          </div>`).join('')
+      : '<div class="text-muted-ci">No active medications.</div>';
+
+    document.getElementById('observationsList').innerHTML = chart.observations.length
+      ? chart.observations.map(o => `
+          <div class="chart-list-item d-flex justify-content-between align-items-start">
+            <div>
+              <div class="fw-semibold">${escapeHtml(o.display)}: ${o.value} ${escapeHtml(o.unit)}</div>
+              <div class="small text-muted-ci">${fmtDate(o.effectiveDate)}</div>
+            </div>
+            <button class="btn btn-sm btn-outline-danger" data-delete-type="observation" data-delete-id="${o.id}">×</button>
+          </div>`).join('')
+      : '<div class="text-muted-ci">No recent observations.</div>';
+
+    document.getElementById('encountersList').innerHTML = chart.encounters.length
+      ? chart.encounters.map(e => `
+          <div class="chart-list-item d-flex justify-content-between align-items-start">
+            <div>
+              <div class="fw-semibold">${escapeHtml(e.encounterType)} — ${escapeHtml(e.reason)}</div>
+              <div class="small text-muted-ci">${fmtDate(e.encounterDate)} · ${escapeHtml(e.status)}</div>
+            </div>
+            <button class="btn btn-sm btn-outline-danger" data-delete-type="encounter" data-delete-id="${e.id}">×</button>
+          </div>`).join('')
+      : '<div class="text-muted-ci">No encounters on file.</div>';
+
+  } catch (err) {
+    showToast(err.message, 'danger');
+  } finally {
+    showSpinner(false);
+  }
+}
+
+// ---------- Risk ----------
+function resetRiskTab() {
+  document.getElementById('riskForm').reset();
+  document.getElementById('q_pain_val').textContent = '0';
+  document.getElementById('riskResultEmpty').classList.remove('d-none');
+  document.getElementById('riskResultBody').classList.add('d-none');
+}
+
+function setupRiskForm() {
+  const painInput = document.getElementById('q_pain');
+  painInput.addEventListener('input', () => {
+    document.getElementById('q_pain_val').textContent = painInput.value;
+  });
+
+  document.getElementById('riskForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (!currentPatientId) return;
+
+    const questionnaire = {
+      smoker: document.getElementById('q_smoker').checked,
+      familyHistoryHeartDisease: document.getElementById('q_family').checked,
+      priorHospitalization: document.getElementById('q_hosp').checked,
+      bmi: document.getElementById('q_bmi').value ? parseFloat(document.getElementById('q_bmi').value) : null,
+      painScore: parseInt(document.getElementById('q_pain').value || '0', 10)
+    };
+
+    try {
+      showSpinner(true);
+      const result = await Api.assessRisk(currentPatientId, questionnaire);
+      renderRiskResult(result);
+      showToast('Risk assessment complete.');
+    } catch (err) {
+      showToast(err.message, 'danger');
+    } finally {
+      showSpinner(false);
+    }
+  });
+}
+
+function renderRiskResult(result) {
+  document.getElementById('riskResultEmpty').classList.add('d-none');
+  document.getElementById('riskResultBody').classList.remove('d-none');
+
+  const gauge = document.getElementById('scoreGauge');
+  gauge.textContent = result.score;
+  gauge.style.background = result.riskLevel === 'High'
+    ? 'radial-gradient(circle, #e74c3c, #c0392b)'
+    : 'radial-gradient(circle, #27ae60, #1e8449)';
+
+  const badge = document.getElementById('riskLevelBadge');
+  badge.textContent = `${result.riskLevel} Risk`;
+  badge.className = `risk-badge ${result.riskLevel}`;
+
+  document.getElementById('riskFactorsList').innerHTML = result.contributingFactors
+    .map(f => `<li>${escapeHtml(f)}</li>`).join('');
+}
+
+// ---------- CDS ----------
+function resetCdsTab() {
+  document.getElementById('cdsAlertsContainer').innerHTML =
+    '<div class="text-muted-ci text-center py-5">Click "Evaluate Encounter" to screen for drug-allergy conflicts and guideline gaps.</div>';
+  document.getElementById('alertCountBadge').classList.add('d-none');
+}
+
+async function evaluateCds() {
+  if (!currentPatientId) return;
+  try {
+    showSpinner(true);
+    const result = await Api.evaluateCds(currentPatientId);
+    renderCdsAlerts(result);
+  } catch (err) {
+    showToast(err.message, 'danger');
+  } finally {
+    showSpinner(false);
+  }
+}
+
+function renderCdsAlerts(result) {
+  const container = document.getElementById('cdsAlertsContainer');
+  const badge = document.getElementById('alertCountBadge');
+
+  if (!result.hasAlerts) {
+    container.innerHTML = '<div class="text-center py-5"><div class="fs-1">✅</div><div class="text-muted-ci">Nothing triggered — no CDS alerts for this encounter.</div></div>';
+    badge.classList.add('d-none');
+    return;
+  }
+
+  badge.textContent = result.alerts.length;
+  badge.classList.remove('d-none');
+
+  container.innerHTML = result.alerts.map(a => `
+    <div class="alert-card ${a.severity}" data-alert-id="${a.id}">
+      <div class="d-flex justify-content-between align-items-start">
+        <span class="severity-tag ${a.severity}">${escapeHtml(a.severity)}</span>
+        <span class="small text-muted-ci">${escapeHtml(a.ruleId)}</span>
+      </div>
+      <div class="fw-semibold mt-2">${escapeHtml(a.summary)}</div>
+      <div class="small text-muted-ci mt-1">${escapeHtml(a.recommendation)}</div>
+      <button class="btn btn-ci-primary btn-sm mt-3 create-careplan-btn" data-alert-id="${a.id}">
+        Create Care Plan &amp; Service Request
+      </button>
+    </div>
+  `).join('');
+
+  container.querySelectorAll('.create-careplan-btn').forEach(btn => {
+    btn.addEventListener('click', () => createCarePlanFromAlert(parseInt(btn.dataset.alertId, 10)));
+  });
+}
+
+async function createCarePlanFromAlert(alertId) {
+  try {
+    showSpinner(true);
+    await Api.createCarePlan({
+      patientId: currentPatientId,
+      alertId,
+      createServiceRequest: true,
+      priority: 'urgent'
+    });
+    showToast('Care Plan and Service Request created and written back to the FHIR store.');
+
+    document.querySelector(`.alert-card[data-alert-id="${alertId}"]`)?.remove();
+    const badge = document.getElementById('alertCountBadge');
+    const remaining = document.querySelectorAll('.alert-card').length;
+    if (remaining === 0) {
+      resetCdsTab();
+      document.getElementById('cdsAlertsContainer').innerHTML =
+        '<div class="text-center py-5"><div class="fs-1">✅</div><div class="text-muted-ci">All alerts for this encounter have been actioned.</div></div>';
+    } else {
+      badge.textContent = remaining;
+    }
+
+    await loadCarePlans(currentPatientId);
+  } catch (err) {
+    showToast(err.message, 'danger');
+  } finally {
+    showSpinner(false);
+  }
+}
+
+// ---------- Care Plans ----------
+async function loadCarePlans(patientId) {
+  if (!patientId) return;
+  try {
+    const carePlans = await Api.getCarePlans(patientId);
+    const tbody = document.getElementById('carePlansTableBody');
+
+    tbody.innerHTML = carePlans.length
+      ? carePlans.map(cp => `
+          <tr>
+            <td>${escapeHtml(cp.title)}</td>
+            <td><span class="small text-muted-ci">${escapeHtml(cp.triggeredByRule)}</span></td>
+            <td><span class="badge bg-success-subtle text-success">${escapeHtml(cp.status)}</span></td>
+            <td class="small text-muted-ci">${fmtDate(cp.createdDate)}</td>
+          </tr>`).join('')
+      : '<tr><td colspan="4" class="text-muted-ci text-center py-4">No care plans yet.</td></tr>';
+  } catch (err) {
+    showToast(err.message, 'danger');
+  }
+}