From efd3974d1fb2ebc975c691fe0438e7f6375002d4 Mon Sep 17 00:00:00 2001
From: voltsrage <electric5388@hotmail.com>
Date: Sat, 27 Jun 2026 16:27:58 +0800
Subject: [PATCH] fix: Add No clinical approval view + No live capture view for
 bedside data entry +  EntryForm missing allergy, medication, and discharge
 fields

---
 .../Controllers/PatientsController.cs         |   2 +-
 docs/vigilcare-records-gap-analysis.md        |   6 +-
 vigilcare-records-web/src/assets/main.css     |   6 +
 .../src/components/AppHeader.vue              |   8 +
 .../src/components/EntryForm.vue              | 190 ++++++++-
 .../src/components/VerificationForm.vue       | 114 ++++-
 vigilcare-records-web/src/router/index.ts     |  25 ++
 vigilcare-records-web/src/stores/auth.ts      |  13 +-
 vigilcare-records-web/src/stores/batches.ts   |  14 +-
 .../src/stores/liveCapture.ts                 | 110 +++++
 vigilcare-records-web/src/types/index.ts      |  36 ++
 .../src/views/ApprovalView.vue                | 284 +++++++++++++
 .../src/views/LiveCaptureView.vue             | 388 ++++++++++++++++++
 13 files changed, 1184 insertions(+), 12 deletions(-)
 create mode 100644 vigilcare-records-web/src/stores/liveCapture.ts
 create mode 100644 vigilcare-records-web/src/views/ApprovalView.vue
 create mode 100644 vigilcare-records-web/src/views/LiveCaptureView.vue

diff --git a/VigilCareRecordsAPI/Controllers/PatientsController.cs b/VigilCareRecordsAPI/Controllers/PatientsController.cs
index 1533a9f..c3b920a 100644
--- a/VigilCareRecordsAPI/Controllers/PatientsController.cs
+++ b/VigilCareRecordsAPI/Controllers/PatientsController.cs
@@ -25,7 +25,7 @@ public class PatientsController : ControllerBase
     /// Searches live patients by MRN or full name (minimum 2 characters).
     /// </summary>
     [HttpGet("search")]
-    [Authorize(Roles = "INTAKE_CLERK,ADMINISTRATOR")]
+    [Authorize(Roles = "INTAKE_CLERK,CLINICIAN,ADMINISTRATOR")]
     [ProducesResponseType(typeof(ApiResponse<IReadOnlyList<PatientSearchResult>>), StatusCodes.Status200OK)]
     public async Task<IActionResult> Search([FromQuery] string q)
     {
diff --git a/docs/vigilcare-records-gap-analysis.md b/docs/vigilcare-records-gap-analysis.md
index f7b9664..be0f587 100644
--- a/docs/vigilcare-records-gap-analysis.md
+++ b/docs/vigilcare-records-gap-analysis.md
@@ -536,7 +536,7 @@ Clinical approvers (typically physicians) have a different workflow from verifie
 
 ---
 
-## P2 — No live capture view for bedside data entry
+## ~~P2 — No live capture view for bedside data entry~~ DONE
 
 ### Problem
 
@@ -570,7 +570,7 @@ Live capture is the path from paper-to-digital for current patient care. Without
 
 ---
 
-## P4 — EntryForm missing allergy, medication, and discharge fields
+## ~~P4 — EntryForm missing allergy, medication, and discharge fields~~ DONE
 
 ### Problem
 
@@ -811,7 +811,7 @@ A batch stuck in `APPROVED` with exhausted retries is invisible in Prometheus da
 | 14 | No user management endpoints | P4 | D | Done |
 | 15 | No batch cancel/void | P4 | D | Done |
 | 16 | No sort parameters on lists | P4 | D | Done |
-| 17 | No clinical approval view | P2 | E | Open |
+| 17 | No clinical approval view | P2 | E | Done |
 | 18 | No live capture view | P2 | E | Open |
 | 19 | EntryForm missing allergy/med fields | P4 | E | Open |
 | 20 | No corrections/supersession UI | P4 | E | Open |
diff --git a/vigilcare-records-web/src/assets/main.css b/vigilcare-records-web/src/assets/main.css
index 2e49b0b..512ee48 100644
--- a/vigilcare-records-web/src/assets/main.css
+++ b/vigilcare-records-web/src/assets/main.css
@@ -38,6 +38,12 @@
     @apply grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8
            h-auto lg:h-[calc(100vh-4rem)] min-h-0;
   }
+  .nav-link {
+    @apply text-sm text-gray-500 hover:text-gray-800 transition-colors;
+  }
+  .nav-link.router-link-active {
+    @apply text-gray-900 font-medium;
+  }
   .status-badge {
     @apply px-2 py-1 rounded-full text-xs font-medium;
   }
diff --git a/vigilcare-records-web/src/components/AppHeader.vue b/vigilcare-records-web/src/components/AppHeader.vue
index 180de55..39516fd 100644
--- a/vigilcare-records-web/src/components/AppHeader.vue
+++ b/vigilcare-records-web/src/components/AppHeader.vue
@@ -2,6 +2,14 @@
   <div class="app-header">
     <div class="app-header-title">
       <h1 class="text-lg font-semibold">{{ title }}</h1>
+      <nav class="flex gap-3 ml-4">
+        <router-link v-if="auth.canIntake" to="/intake" class="nav-link">Intake</router-link>
+        <router-link v-if="auth.canEntry" to="/entry" class="nav-link">Entry</router-link>
+        <router-link v-if="auth.canVerify" to="/verification" class="nav-link">Verification</router-link>
+        <router-link v-if="auth.canApprove" to="/approval" class="nav-link">Approval</router-link>
+        <router-link v-if="auth.canLiveCapture" to="/live-capture" class="nav-link">Live Capture</router-link>
+        <router-link v-if="auth.canSupervise" to="/dashboard" class="nav-link">Dashboard</router-link>
+      </nav>
       <slot name="subtitle" />
     </div>
     <div class="app-header-actions">
diff --git a/vigilcare-records-web/src/components/EntryForm.vue b/vigilcare-records-web/src/components/EntryForm.vue
index 7939114..324fa8e 100644
--- a/vigilcare-records-web/src/components/EntryForm.vue
+++ b/vigilcare-records-web/src/components/EntryForm.vue
@@ -60,6 +60,82 @@
       </div>
     </fieldset>
 
+    <!-- Allergies section (ALLERGY_UPDATE or MIXED) -->
+    <fieldset v-if="showAllergies" class="border border-gray-200 rounded-md p-4">
+      <legend class="text-sm font-medium text-gray-700 px-2">Allergies</legend>
+      <label class="flex items-center gap-2 mb-3 cursor-pointer">
+        <input
+          v-model="patient.noKnownAllergies"
+          @change="onNoKnownAllergiesChange"
+          type="checkbox"
+          class="w-4 h-4 text-clinical-safe rounded"
+        />
+        <span class="text-sm">No known allergies (NKA)</span>
+      </label>
+      <div v-if="!patient.noKnownAllergies" class="space-y-2">
+        <div
+          v-for="(allergy, idx) in allergies"
+          :key="idx"
+          class="flex items-center gap-2"
+        >
+          <input
+            v-model="allergies[idx]"
+            @blur="saveAllergies"
+            type="text"
+            class="form-input text-sm flex-1"
+            placeholder="Allergy (e.g. Penicillin)"
+          />
+          <button
+            @click="removeAllergy(idx)"
+            class="text-clinical-danger hover:text-red-800 text-sm"
+          >
+            Remove
+          </button>
+        </div>
+        <button @click="addAllergy" class="text-sm text-primary-600 hover:text-primary-800">
+          + Add Allergy
+        </button>
+      </div>
+    </fieldset>
+
+    <!-- Medications section (MEDICATION_LIST or MIXED) -->
+    <fieldset v-if="showMedications" class="border border-gray-200 rounded-md p-4">
+      <legend class="text-sm font-medium text-gray-700 px-2">Medications</legend>
+      <label class="flex items-center gap-2 mb-3 cursor-pointer">
+        <input
+          v-model="patient.noActiveMedications"
+          @change="onNoActiveMedicationsChange"
+          type="checkbox"
+          class="w-4 h-4 text-clinical-safe rounded"
+        />
+        <span class="text-sm">No active medications</span>
+      </label>
+      <div v-if="!patient.noActiveMedications" class="space-y-2">
+        <div
+          v-for="(med, idx) in medications"
+          :key="idx"
+          class="flex items-center gap-2"
+        >
+          <input
+            v-model="medications[idx]"
+            @blur="saveMedications"
+            type="text"
+            class="form-input text-sm flex-1"
+            placeholder="Medication (e.g. Metoprolol 50mg BID)"
+          />
+          <button
+            @click="removeMedication(idx)"
+            class="text-clinical-danger hover:text-red-800 text-sm"
+          >
+            Remove
+          </button>
+        </div>
+        <button @click="addMedication" class="text-sm text-primary-600 hover:text-primary-800">
+          + Add Medication
+        </button>
+      </div>
+    </fieldset>
+
     <!-- Encounter section -->
     <fieldset class="border border-gray-200 rounded-md p-4">
       <legend class="text-sm font-medium text-gray-700 px-2">Encounter Context</legend>
@@ -98,6 +174,24 @@
             class="form-input text-sm"
           />
         </div>
+        <div v-if="showEncounterSummary">
+          <label class="block text-xs text-gray-500">Encounter Status</label>
+          <select v-model="encounter.status" @change="saveEncounter" class="form-input text-sm">
+            <option value="">—</option>
+            <option value="active">Active</option>
+            <option value="discharged">Discharged</option>
+          </select>
+        </div>
+        <div v-if="showEncounterSummary" class="col-span-2">
+          <label class="block text-xs text-gray-500">Discharge Diagnosis</label>
+          <textarea
+            v-model="encounter.dischargeDiagnosis"
+            @blur="saveEncounter"
+            class="form-input text-sm"
+            rows="2"
+            placeholder="Discharge diagnosis..."
+          />
+        </div>
       </div>
     </fieldset>
 
@@ -136,7 +230,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, computed, watch } from 'vue'
 import { useBatchStore } from '../stores/batches'
 import ObservationRow from '../components/ObservationRow.vue'
 import type { BatchDetailResponse, DraftObservation } from '../types'
@@ -174,25 +268,53 @@ const departments = [
   'Anesthesiology',
 ]
 
+const batchType = computed(() => props.batch?.batchType ?? '')
+const showAllergies = computed(() =>
+  ['ALLERGY_UPDATE', 'MIXED'].includes(batchType.value)
+)
+const showMedications = computed(() =>
+  ['MEDICATION_LIST', 'MIXED'].includes(batchType.value)
+)
+const showEncounterSummary = computed(() =>
+  ['ENCOUNTER_SUMMARY', 'MIXED'].includes(batchType.value)
+)
+
 const patient = reactive({
   fullName: '',
   dateOfBirth: '',
   sex: '',
   bloodType: '',
   emergencyContact: '',
+  noKnownAllergies: false,
+  noActiveMedications: false,
 })
 
+const allergies = ref<string[]>([])
+const medications = ref<string[]>([])
+
 const encounter = reactive({
   admissionDate: '',
   department: '',
   roomBed: '',
   admissionReason: '',
+  dischargeDiagnosis: '',
+  status: '',
 })
 
 const observations = ref<DraftObservation[]>([])
 
 const statusColor = ref('bg-gray-100 text-gray-800')
 
+function parseJsonList(json: string | null): string[] {
+  if (!json) return []
+  try {
+    const parsed = JSON.parse(json)
+    return Array.isArray(parsed) ? parsed : []
+  } catch {
+    return []
+  }
+}
+
 // Load draft data when batch changes
 watch(
   () => batchStore.currentDraft,
@@ -205,7 +327,11 @@ watch(
         sex: draft.patient.sex ?? '',
         bloodType: draft.patient.bloodType ?? '',
         emergencyContact: draft.patient.emergencyContact ?? '',
+        noKnownAllergies: draft.patient.noKnownAllergies ?? false,
+        noActiveMedications: draft.patient.noActiveMedications ?? false,
       })
+      allergies.value = parseJsonList(draft.patient.allergiesJson)
+      medications.value = parseJsonList(draft.patient.medicationsJson)
     }
     if (draft.encounter) {
       Object.assign(encounter, {
@@ -213,6 +339,8 @@ watch(
         department: draft.encounter.department ?? '',
         roomBed: draft.encounter.roomBed ?? '',
         admissionReason: draft.encounter.admissionReason ?? '',
+        dischargeDiagnosis: draft.encounter.dischargeDiagnosis ?? '',
+        status: draft.encounter.status ?? '',
       })
     }
     observations.value = draft.observations ?? []
@@ -220,9 +348,67 @@ watch(
   { immediate: true }
 )
 
+function addAllergy() {
+  allergies.value.push('')
+}
+
+function removeAllergy(idx: number) {
+  allergies.value.splice(idx, 1)
+  saveAllergies()
+}
+
+async function saveAllergies() {
+  try {
+    await batchStore.saveDraftPatient(props.batchId, {
+      ...patient,
+      allergiesJson: JSON.stringify(allergies.value.filter(a => a.trim())),
+    })
+  } catch (e: unknown) {
+    errorMessage.value = e instanceof Error ? e.message : 'Failed to save allergies'
+  }
+}
+
+function onNoKnownAllergiesChange() {
+  if (patient.noKnownAllergies) {
+    allergies.value = []
+  }
+  savePatient()
+}
+
+function addMedication() {
+  medications.value.push('')
+}
+
+function removeMedication(idx: number) {
+  medications.value.splice(idx, 1)
+  saveMedications()
+}
+
+async function saveMedications() {
+  try {
+    await batchStore.saveDraftPatient(props.batchId, {
+      ...patient,
+      medicationsJson: JSON.stringify(medications.value.filter(m => m.trim())),
+    })
+  } catch (e: unknown) {
+    errorMessage.value = e instanceof Error ? e.message : 'Failed to save medications'
+  }
+}
+
+function onNoActiveMedicationsChange() {
+  if (patient.noActiveMedications) {
+    medications.value = []
+  }
+  savePatient()
+}
+
 async function savePatient() {
   try {
-    await batchStore.saveDraftPatient(props.batchId, patient)
+    await batchStore.saveDraftPatient(props.batchId, {
+      ...patient,
+      allergiesJson: patient.noKnownAllergies ? null : JSON.stringify(allergies.value.filter(a => a.trim())),
+      medicationsJson: patient.noActiveMedications ? null : JSON.stringify(medications.value.filter(m => m.trim())),
+    })
   } catch (e: unknown) {
     errorMessage.value = e instanceof Error ? e.message : 'Failed to save patient'
   }
diff --git a/vigilcare-records-web/src/components/VerificationForm.vue b/vigilcare-records-web/src/components/VerificationForm.vue
index 4e71044..f67ad46 100644
--- a/vigilcare-records-web/src/components/VerificationForm.vue
+++ b/vigilcare-records-web/src/components/VerificationForm.vue
@@ -33,6 +33,48 @@
       </div>
     </fieldset>
 
+    <!-- Allergies review (ALLERGY_UPDATE or MIXED) -->
+    <fieldset v-if="allergyFields.length > 0" class="border border-gray-200 rounded-md p-4">
+      <legend class="text-sm font-medium text-gray-700 px-2">Allergies</legend>
+      <div class="space-y-3">
+        <div v-for="field in allergyFields" :key="field.path">
+          <div class="flex items-center gap-2">
+            <input
+              type="checkbox"
+              :checked="fieldChecks[field.path]"
+              @change="toggleCheck(field.path)"
+              class="w-4 h-4 text-clinical-safe rounded"
+            />
+            <label class="text-xs text-gray-500">{{ field.label }}</label>
+          </div>
+          <p class="text-sm mt-2 pl-8 font-medium">
+            {{ field.value || '(empty)' }}
+          </p>
+        </div>
+      </div>
+    </fieldset>
+
+    <!-- Medications review (MEDICATION_LIST or MIXED) -->
+    <fieldset v-if="medicationFields.length > 0" class="border border-gray-200 rounded-md p-4">
+      <legend class="text-sm font-medium text-gray-700 px-2">Medications</legend>
+      <div class="space-y-3">
+        <div v-for="field in medicationFields" :key="field.path">
+          <div class="flex items-center gap-2">
+            <input
+              type="checkbox"
+              :checked="fieldChecks[field.path]"
+              @change="toggleCheck(field.path)"
+              class="w-4 h-4 text-clinical-safe rounded"
+            />
+            <label class="text-xs text-gray-500">{{ field.label }}</label>
+          </div>
+          <p class="text-sm mt-2 pl-8 font-medium">
+            {{ field.value || '(empty)' }}
+          </p>
+        </div>
+      </div>
+    </fieldset>
+
     <!-- Encounter review -->
     <fieldset class="border border-gray-200 rounded-md p-4">
       <legend class="text-sm font-medium text-gray-700 px-2">Encounter Context</legend>
@@ -172,8 +214,25 @@ interface FieldInfo {
 }
 
 const patientFields = ref<FieldInfo[]>([])
+const allergyFields = ref<FieldInfo[]>([])
+const medicationFields = ref<FieldInfo[]>([])
 const encounterFields = ref<FieldInfo[]>([])
 
+const batchType = computed(() => props.batch?.batchType ?? '')
+const showAllergies = computed(() => ['ALLERGY_UPDATE', 'MIXED'].includes(batchType.value))
+const showMedications = computed(() => ['MEDICATION_LIST', 'MIXED'].includes(batchType.value))
+const showEncounterSummary = computed(() => ['ENCOUNTER_SUMMARY', 'MIXED'].includes(batchType.value))
+
+function parseJsonList(json: string | null): string[] {
+  if (!json) return []
+  try {
+    const parsed = JSON.parse(json)
+    return Array.isArray(parsed) ? parsed : []
+  } catch {
+    return []
+  }
+}
+
 watch(
   () => batchStore.currentDraft,
   (draft) => {
@@ -190,6 +249,50 @@ watch(
         { path: 'patient.bloodType', label: 'Blood Type', value: draft.patient.bloodType ?? '' },
         { path: 'patient.emergencyContact', label: 'Emergency Contact', value: draft.patient.emergencyContact ?? '' },
       ]
+
+      // Build allergy fields
+      allergyFields.value = []
+      if (showAllergies.value) {
+        if (draft.patient.noKnownAllergies) {
+          allergyFields.value = [
+            { path: 'patient.noKnownAllergies', label: 'No Known Allergies', value: 'Yes (NKA)' },
+          ]
+        } else {
+          const items = parseJsonList(draft.patient.allergiesJson)
+          allergyFields.value = items.map((item, i) => ({
+            path: `patient.allergies[${i}]`,
+            label: `Allergy ${i + 1}`,
+            value: item,
+          }))
+          if (items.length === 0) {
+            allergyFields.value = [
+              { path: 'patient.allergiesJson', label: 'Allergies', value: '(none entered)' },
+            ]
+          }
+        }
+      }
+
+      // Build medication fields
+      medicationFields.value = []
+      if (showMedications.value) {
+        if (draft.patient.noActiveMedications) {
+          medicationFields.value = [
+            { path: 'patient.noActiveMedications', label: 'No Active Medications', value: 'Yes' },
+          ]
+        } else {
+          const items = parseJsonList(draft.patient.medicationsJson)
+          medicationFields.value = items.map((item, i) => ({
+            path: `patient.medications[${i}]`,
+            label: `Medication ${i + 1}`,
+            value: item,
+          }))
+          if (items.length === 0) {
+            medicationFields.value = [
+              { path: 'patient.medicationsJson', label: 'Medications', value: '(none entered)' },
+            ]
+          }
+        }
+      }
     }
 
     // Build encounter field list
@@ -200,11 +303,19 @@ watch(
         { path: 'encounter.roomBed', label: 'Room / Bed', value: draft.encounter.roomBed ?? '' },
         { path: 'encounter.admissionReason', label: 'Admission Reason', value: draft.encounter.admissionReason ?? '' },
       ]
+      if (showEncounterSummary.value) {
+        encounterFields.value.push(
+          { path: 'encounter.status', label: 'Encounter Status', value: draft.encounter.status ?? '' },
+          { path: 'encounter.dischargeDiagnosis', label: 'Discharge Diagnosis', value: draft.encounter.dischargeDiagnosis ?? '' },
+        )
+      }
     }
 
     // Initialize all checks to false
     fieldChecks.value = {}
     patientFields.value.forEach((f) => { fieldChecks.value[f.path] = false })
+    allergyFields.value.forEach((f) => { fieldChecks.value[f.path] = false })
+    medicationFields.value.forEach((f) => { fieldChecks.value[f.path] = false })
     encounterFields.value.forEach((f) => { fieldChecks.value[f.path] = false })
     observations.value.forEach((_, i) => { fieldChecks.value[`observations[${i}].value`] = false })
   },
@@ -212,7 +323,8 @@ watch(
 )
 
 const totalFields = computed(
-  () => patientFields.value.length + encounterFields.value.length + observations.value.length
+  () => patientFields.value.length + allergyFields.value.length + medicationFields.value.length
+       + encounterFields.value.length + observations.value.length
 )
 const checkedCount = computed(
   () => Object.values(fieldChecks.value).filter(Boolean).length
diff --git a/vigilcare-records-web/src/router/index.ts b/vigilcare-records-web/src/router/index.ts
index f2a8fb8..34ede20 100644
--- a/vigilcare-records-web/src/router/index.ts
+++ b/vigilcare-records-web/src/router/index.ts
@@ -46,6 +46,31 @@ const routes: RouteRecordRaw[] = [
     },
     props: true,
   },
+  {
+    path: '/approval',
+    name: 'ApprovalQueue',
+    component: () => import('../views/ApprovalView.vue'),
+    meta: {
+      requiresAuth: true,
+      roles: ['CLINICAL_APPROVER', 'ADMINISTRATOR'],
+    },
+  },
+  {
+    path: '/approval/:batchId',
+    name: 'ApprovalBatch',
+    component: () => import('../views/ApprovalView.vue'),
+    meta: {
+      requiresAuth: true,
+      roles: ['CLINICAL_APPROVER', 'ADMINISTRATOR'],
+    },
+    props: true,
+  },
+  {
+    path: '/live-capture',
+    name: 'LiveCapture',
+    component: () => import('../views/LiveCaptureView.vue'),
+    meta: { requiresAuth: true, roles: ['CLINICIAN', 'ADMINISTRATOR'] },
+  },
   {
     path: '/dashboard',
     name: 'Dashboard',
diff --git a/vigilcare-records-web/src/stores/auth.ts b/vigilcare-records-web/src/stores/auth.ts
index 1a28a9e..a24b03d 100644
--- a/vigilcare-records-web/src/stores/auth.ts
+++ b/vigilcare-records-web/src/stores/auth.ts
@@ -11,8 +11,11 @@ export function getDefaultRouteForRole(role: string): string {
     case 'DATA_ENTRY_CLERK':
       return '/entry'
     case 'VERIFIER':
-    case 'CLINICAL_APPROVER':
       return '/verification'
+    case 'CLINICAL_APPROVER':
+      return '/approval'
+    case 'CLINICIAN':
+      return '/live-capture'
     case 'ADMINISTRATOR':
       return '/dashboard'
     default:
@@ -42,6 +45,12 @@ export const useAuthStore = defineStore('auth', () => {
   const canVerify = computed(() =>
     ['VERIFIER', 'CLINICAL_APPROVER', 'ADMINISTRATOR'].includes(userRole.value)
   )
+  const canApprove = computed(() =>
+    ['CLINICAL_APPROVER', 'ADMINISTRATOR'].includes(userRole.value)
+  )
+  const canLiveCapture = computed(() =>
+    ['CLINICIAN', 'ADMINISTRATOR'].includes(userRole.value)
+  )
   const canSupervise = computed(() =>
     ['ADMINISTRATOR'].includes(userRole.value)
   )
@@ -113,6 +122,8 @@ export const useAuthStore = defineStore('auth', () => {
     canIntake,
     canEntry,
     canVerify,
+    canApprove,
+    canLiveCapture,
     canSupervise,
     login,
     fetchCurrentUser,
diff --git a/vigilcare-records-web/src/stores/batches.ts b/vigilcare-records-web/src/stores/batches.ts
index bb7ba2b..0c9edb1 100644
--- a/vigilcare-records-web/src/stores/batches.ts
+++ b/vigilcare-records-web/src/stores/batches.ts
@@ -182,10 +182,16 @@ async function assignBatch(batchId: string, entryClerkUserId: string): Promise<v
     await post<void>(`digitization-batches/${batchId}/reject`, { reason })
   }
 
-  async function approveBatch(batchId: string): Promise<void> {
-    await post<void>(`digitization-batches/${batchId}/approve`, null, {
-      'Idempotency-Key': crypto.randomUUID(),
-    })
+  async function approveBatch(
+    batchId: string,
+    enableRetroactiveAlerts: boolean = false
+  ): Promise<{ status?: number; data?: { mrn: string; encounterId: string; observationIds: string[] } }> {
+    const response = await post<{ mrn: string; encounterId: string; observationIds: string[] }>(
+      `digitization-batches/${batchId}/approve`,
+      { enableRetroactiveAlerts },
+      { 'Idempotency-Key': crypto.randomUUID() }
+    )
+    return { data: response.data ?? undefined }
   }
 
   return {
diff --git a/vigilcare-records-web/src/stores/liveCapture.ts b/vigilcare-records-web/src/stores/liveCapture.ts
new file mode 100644
index 0000000..4aa1963
--- /dev/null
+++ b/vigilcare-records-web/src/stores/liveCapture.ts
@@ -0,0 +1,110 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { post } from '../api/client'
+import type {
+  LiveCaptureObservationInput,
+  LiveCaptureResponse,
+} from '../types'
+
+export const useLiveCaptureStore = defineStore('liveCapture', () => {
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const lastResult = ref<LiveCaptureResponse | null>(null)
+
+  async function recordObservations(
+    encounterId: string,
+    observations: LiveCaptureObservationInput[],
+    clinicianAttestation: boolean,
+    passwordConfirm: string,
+  ): Promise<LiveCaptureResponse> {
+    loading.value = true
+    error.value = null
+    lastResult.value = null
+    try {
+      const response = await post<LiveCaptureResponse>(
+        `live-capture/encounters/${encounterId}/observations`,
+        {
+          observations: observations.map(o => ({
+            observationCode: o.observationCode,
+            value: o.value,
+            unit: o.unit,
+            recordedAt: o.recordedAt,
+            note: o.note || null,
+          })),
+          clinicianAttestation,
+          passwordConfirm,
+        },
+      )
+      if (!response.success || !response.data) {
+        throw new Error(response.error?.message ?? 'Failed to record observations')
+      }
+      lastResult.value = response.data
+      return response.data
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : 'Failed to record observations'
+      error.value = msg
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function openEncounterWithVitals(
+    patientId: string,
+    department: string,
+    roomBed: string,
+    admissionReason: string,
+    observations: LiveCaptureObservationInput[],
+    clinicianAttestation: boolean,
+    passwordConfirm: string,
+  ): Promise<LiveCaptureResponse> {
+    loading.value = true
+    error.value = null
+    lastResult.value = null
+    try {
+      const response = await post<LiveCaptureResponse>(
+        'live-capture/encounters',
+        {
+          patientId,
+          department,
+          roomBed: roomBed || null,
+          admissionReason,
+          observations: observations.map(o => ({
+            observationCode: o.observationCode,
+            value: o.value,
+            unit: o.unit,
+            recordedAt: o.recordedAt,
+            note: o.note || null,
+          })),
+          clinicianAttestation,
+          passwordConfirm,
+        },
+      )
+      if (!response.success || !response.data) {
+        throw new Error(response.error?.message ?? 'Failed to open encounter')
+      }
+      lastResult.value = response.data
+      return response.data
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : 'Failed to open encounter'
+      error.value = msg
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function reset() {
+    lastResult.value = null
+    error.value = null
+  }
+
+  return {
+    loading,
+    error,
+    lastResult,
+    recordObservations,
+    openEncounterWithVitals,
+    reset,
+  }
+})
diff --git a/vigilcare-records-web/src/types/index.ts b/vigilcare-records-web/src/types/index.ts
index 9c8af84..7af4f41 100644
--- a/vigilcare-records-web/src/types/index.ts
+++ b/vigilcare-records-web/src/types/index.ts
@@ -82,6 +82,8 @@ export interface DraftPatient {
   emergencyContact: string | null
   allergiesJson: string | null
   noKnownAllergies: boolean
+  medicationsJson: string | null
+  noActiveMedications: boolean
 }
 
 export interface DraftEncounter {
@@ -142,4 +144,38 @@ export interface UserSummary {
   username: string
   fullName: string
   role: string
+}
+
+export interface LiveCaptureObservationInput {
+  observationCode: string
+  value: number | null
+  unit: string
+  recordedAt: string
+  note: string
+}
+
+export interface LiveCaptureCriticalAlert {
+  alertId: string
+  severity: string
+  message: string
+  thresholdValue: number
+  thresholdBound: string
+}
+
+export interface LiveCaptureObservationResponse {
+  draftObservationId: string
+  liveObservationId: string
+  observationCode: string
+  value: number
+  unit: string
+  recordedAt: string
+  criticalAlert: LiveCaptureCriticalAlert | null
+}
+
+export interface LiveCaptureResponse {
+  batchId: string
+  encounterId: string
+  observations: LiveCaptureObservationResponse[]
+  criticalAlertCount: number
+  promotedAt: string
 }
\ No newline at end of file
diff --git a/vigilcare-records-web/src/views/ApprovalView.vue b/vigilcare-records-web/src/views/ApprovalView.vue
new file mode 100644
index 0000000..ecef02a
--- /dev/null
+++ b/vigilcare-records-web/src/views/ApprovalView.vue
@@ -0,0 +1,284 @@
+<template>
+  <div class="min-h-screen lg:h-screen flex flex-col">
+    <AppHeader title="Clinical Approval">
+      <template #subtitle>
+        <span v-if="currentBatch" class="text-sm text-gray-500">
+          Batch: {{ currentBatch.id.substring(0, 8) }}...
+          | Type: {{ formatBatchType(currentBatch.batchType) }}
+        </span>
+      </template>
+    </AppHeader>
+
+    <!-- Queue view (no batch selected) -->
+    <div v-if="!batchId" class="flex-1 p-4 sm:p-6">
+      <h2 class="text-xl font-semibold mb-4">Clinical Approval Queue</h2>
+      <p class="text-sm text-gray-500 mb-4">
+        Verified batches awaiting clinical sign-off before promotion to live tables.
+      </p>
+      <BatchList
+        :batches="batchStore.batches"
+        :loading="batchStore.loading"
+        @select="openBatch"
+      />
+    </div>
+
+    <!-- Split pane (batch selected) -->
+    <div v-else class="flex-1 split-pane">
+      <ScanViewer
+        v-if="documentUrl"
+        :url="documentUrl"
+      />
+      <div v-else class="flex items-center justify-center bg-gray-100 rounded-lg">
+        <p class="text-gray-500">Loading document...</p>
+      </div>
+
+      <!-- Approval panel -->
+      <div class="h-full overflow-y-auto p-4 space-y-6">
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-semibold">Clinical Review</h2>
+          <span class="bg-purple-100 text-purple-800 status-badge">
+            Awaiting Clinical Approval
+          </span>
+        </div>
+
+        <!-- Patient summary (read-only) -->
+        <fieldset v-if="draft?.patient" class="border border-gray-200 rounded-md p-4">
+          <legend class="text-sm font-medium text-gray-700 px-2">Patient Demographics</legend>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+            <div><span class="text-gray-500">Full Name:</span> <span class="font-medium ml-1">{{ draft.patient.fullName }}</span></div>
+            <div><span class="text-gray-500">DOB:</span> <span class="font-medium ml-1">{{ draft.patient.dateOfBirth ?? 'N/A' }}</span></div>
+            <div><span class="text-gray-500">Sex:</span> <span class="font-medium ml-1">{{ draft.patient.sex ?? 'N/A' }}</span></div>
+            <div><span class="text-gray-500">Blood Type:</span> <span class="font-medium ml-1">{{ draft.patient.bloodType ?? 'N/A' }}</span></div>
+          </div>
+        </fieldset>
+
+        <!-- Encounter context (read-only) -->
+        <fieldset v-if="draft?.encounter" class="border border-gray-200 rounded-md p-4">
+          <legend class="text-sm font-medium text-gray-700 px-2">Encounter Context</legend>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+            <div><span class="text-gray-500">Admission:</span> <span class="font-medium ml-1">{{ draft.encounter.admissionDate ?? 'N/A' }}</span></div>
+            <div><span class="text-gray-500">Department:</span> <span class="font-medium ml-1">{{ draft.encounter.department ?? 'N/A' }}</span></div>
+            <div><span class="text-gray-500">Room/Bed:</span> <span class="font-medium ml-1">{{ draft.encounter.roomBed ?? 'N/A' }}</span></div>
+            <div><span class="text-gray-500">Reason:</span> <span class="font-medium ml-1">{{ draft.encounter.admissionReason ?? 'N/A' }}</span></div>
+          </div>
+        </fieldset>
+
+        <!-- Observations (read-only) -->
+        <fieldset class="border border-gray-200 rounded-md p-4">
+          <legend class="text-sm font-medium text-gray-700 px-2">
+            Observations ({{ draft?.observations?.length ?? 0 }})
+          </legend>
+          <div class="space-y-2">
+            <ObservationRow
+              v-for="obs in (draft?.observations ?? [])"
+              :key="obs.id"
+              :observation="obs"
+              :readonly="true"
+            />
+            <p v-if="!draft?.observations?.length" class="text-sm text-gray-500">
+              No observations recorded.
+            </p>
+          </div>
+        </fieldset>
+
+        <!-- Verification info -->
+        <div v-if="currentBatch?.verifiedByUserId" class="bg-blue-50 border border-blue-200 rounded-md p-4 text-sm">
+          <p class="font-medium text-blue-800">Verified by: {{ currentBatch.verifiedByUserId.substring(0, 8) }}...</p>
+        </div>
+
+        <!-- Enable retroactive alerts toggle -->
+        <div class="bg-gray-50 rounded-md p-4">
+          <label class="flex items-center gap-3 cursor-pointer">
+            <input
+              v-model="enableRetroactiveAlerts"
+              type="checkbox"
+              class="w-4 h-4 text-clinical-safe rounded"
+            />
+            <div>
+              <span class="text-sm font-medium">Enable retroactive alerts</span>
+              <p class="text-xs text-gray-500 mt-0.5">
+                If checked, backfill observations will be evaluated by the alert engine.
+              </p>
+            </div>
+          </label>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex flex-col sm:flex-row gap-4 pt-4 border-t">
+          <button
+            @click="approve"
+            class="btn-primary"
+            :disabled="processing"
+          >
+            {{ processing ? 'Promoting...' : 'Approve & Promote' }}
+          </button>
+          <button
+            @click="showRejectDialog = true"
+            class="btn-danger"
+            :disabled="processing"
+          >
+            Reject
+          </button>
+          <button
+            @click="router.push('/approval')"
+            class="px-4 py-2 text-gray-600 hover:text-gray-800"
+            :disabled="processing"
+          >
+            Back to Queue
+          </button>
+        </div>
+
+        <!-- Promotion result banner -->
+        <div v-if="promotionResult" class="bg-green-50 border border-green-200 rounded-md p-4 text-sm">
+          <p class="font-medium text-green-800">Promotion successful</p>
+          <p class="text-green-700 mt-1">Patient MRN: {{ promotionResult.mrn }}</p>
+          <p class="text-green-700">Encounter: {{ promotionResult.encounterId?.substring(0, 8) }}...</p>
+          <p class="text-green-700">Observations promoted: {{ promotionResult.observationIds?.length }}</p>
+        </div>
+
+        <!-- Deferred banner -->
+        <div v-if="deferred" class="bg-yellow-50 border border-yellow-200 rounded-md p-4 text-sm">
+          <p class="font-medium text-yellow-800">Approved - Promotion Deferred</p>
+          <p class="text-yellow-700 mt-1">
+            Promotion will be retried automatically due to a temporary infrastructure issue.
+          </p>
+        </div>
+
+        <!-- Reject dialog -->
+        <div
+          v-if="showRejectDialog"
+          class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+        >
+          <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 class="text-lg font-semibold mb-4">Reject Batch</h3>
+            <textarea
+              v-model="rejectionReason"
+              class="form-input"
+              rows="4"
+              placeholder="Reason for rejection (required)..."
+            />
+            <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-4 mt-4">
+              <button
+                @click="showRejectDialog = false"
+                class="px-4 py-2 text-gray-600 hover:text-gray-800"
+              >
+                Cancel
+              </button>
+              <button
+                @click="reject"
+                class="btn-danger"
+                :disabled="!rejectionReason.trim()"
+              >
+                Confirm Rejection
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="errorMessage" class="text-clinical-danger text-sm">
+          {{ errorMessage }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useBatchStore } from '../stores/batches'
+import { usePresignedUrl } from '../composables/usePresignedUrl'
+import AppHeader from '../components/AppHeader.vue'
+import ScanViewer from '../components/ScanViewer.vue'
+import BatchList from '../components/BatchList.vue'
+import ObservationRow from '../components/ObservationRow.vue'
+
+const props = defineProps<{ batchId?: string }>()
+
+const batchStore = useBatchStore()
+const route = useRoute()
+const router = useRouter()
+
+const batchId = computed(() => props.batchId ?? (route.params.batchId as string | undefined))
+const currentBatch = computed(() => batchStore.currentBatch)
+const draft = computed(() => batchStore.currentDraft)
+const { documentUrl } = usePresignedUrl(batchId)
+
+const processing = ref(false)
+const errorMessage = ref('')
+const enableRetroactiveAlerts = ref(false)
+const showRejectDialog = ref(false)
+const rejectionReason = ref('')
+const promotionResult = ref<{ mrn: string; encounterId: string; observationIds: string[] } | null>(null)
+const deferred = ref(false)
+
+function openBatch(id: string) {
+  router.push(`/approval/${id}`)
+}
+
+function formatBatchType(type: string): string {
+  return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
+}
+
+async function approve() {
+  if (!batchId.value) return
+  processing.value = true
+  errorMessage.value = ''
+  promotionResult.value = null
+  deferred.value = false
+
+  try {
+    const response = await batchStore.approveBatch(batchId.value, enableRetroactiveAlerts.value)
+    if (response?.status === 202) {
+      deferred.value = true
+    } else if (response?.data) {
+      promotionResult.value = response.data
+    }
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : 'Approval failed'
+    if (msg.includes('PROMOTION_DEFERRED')) {
+      deferred.value = true
+    } else {
+      errorMessage.value = msg
+    }
+  } finally {
+    processing.value = false
+  }
+}
+
+async function reject() {
+  if (!batchId.value) return
+  processing.value = true
+  errorMessage.value = ''
+  try {
+    await batchStore.rejectBatch(batchId.value, rejectionReason.value)
+    showRejectDialog.value = false
+    router.push('/approval')
+  } catch (e: unknown) {
+    errorMessage.value = e instanceof Error ? e.message : 'Rejection failed'
+  } finally {
+    processing.value = false
+  }
+}
+
+watch(
+  batchId,
+  async (id) => {
+    if (id) {
+      await batchStore.getBatch(id)
+      await batchStore.getDraft(id)
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(async () => {
+  if (!batchId.value) {
+    await batchStore.listBatches({
+      status: 'AWAITING_CLINICAL_APPROVAL',
+      page: 1,
+      pageSize: 50,
+    })
+  }
+})
+</script>
diff --git a/vigilcare-records-web/src/views/LiveCaptureView.vue b/vigilcare-records-web/src/views/LiveCaptureView.vue
new file mode 100644
index 0000000..378705a
--- /dev/null
+++ b/vigilcare-records-web/src/views/LiveCaptureView.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="min-h-screen flex flex-col">
+    <AppHeader title="Live Capture" />
+
+    <div class="flex-1 p-4 sm:p-6 lg:p-8 max-w-5xl mx-auto w-full">
+      <!-- Mode selector tabs -->
+      <div class="flex border-b mb-6">
+        <button
+          @click="mode = 'new'"
+          class="px-6 py-3 text-sm font-medium border-b-2 transition-colors"
+          :class="mode === 'new'
+            ? 'border-primary-600 text-primary-600'
+            : 'border-transparent text-gray-500 hover:text-gray-700'"
+        >
+          New Encounter
+        </button>
+        <button
+          @click="mode = 'existing'"
+          class="px-6 py-3 text-sm font-medium border-b-2 transition-colors"
+          :class="mode === 'existing'
+            ? 'border-primary-600 text-primary-600'
+            : 'border-transparent text-gray-500 hover:text-gray-700'"
+        >
+          Existing Encounter
+        </button>
+      </div>
+
+      <!-- New encounter mode -->
+      <div v-if="mode === 'new'" class="space-y-6">
+        <fieldset class="card">
+          <legend class="text-sm font-medium text-gray-700 px-2">Patient</legend>
+          <PatientSearch v-model="patientId" />
+        </fieldset>
+
+        <fieldset class="card">
+          <legend class="text-sm font-medium text-gray-700 px-2">Encounter Details</legend>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <label class="block text-xs text-gray-500 mb-1">Department</label>
+              <select v-model="department" class="form-input">
+                <option value="">Select department...</option>
+                <option v-for="dept in departments" :key="dept.value" :value="dept.value">
+                  {{ dept.label }}
+                </option>
+              </select>
+            </div>
+            <div>
+              <label class="block text-xs text-gray-500 mb-1">Room / Bed</label>
+              <input v-model="roomBed" type="text" class="form-input" placeholder="e.g. 4B-12" />
+            </div>
+            <div class="sm:col-span-2">
+              <label class="block text-xs text-gray-500 mb-1">Admission Reason</label>
+              <input v-model="admissionReason" type="text" class="form-input" placeholder="Chief complaint or reason" />
+            </div>
+          </div>
+        </fieldset>
+      </div>
+
+      <!-- Existing encounter mode -->
+      <div v-if="mode === 'existing'" class="space-y-6">
+        <fieldset class="card">
+          <legend class="text-sm font-medium text-gray-700 px-2">Encounter</legend>
+          <div>
+            <label class="block text-xs text-gray-500 mb-1">Encounter ID</label>
+            <input
+              v-model="encounterId"
+              type="text"
+              class="form-input"
+              placeholder="Enter existing encounter UUID"
+            />
+          </div>
+        </fieldset>
+      </div>
+
+      <!-- Vitals entry -->
+      <fieldset class="card mt-6">
+        <legend class="text-sm font-medium text-gray-700 px-2">
+          Vitals ({{ observations.length }})
+        </legend>
+
+        <div class="space-y-3">
+          <div
+            v-for="(obs, idx) in observations"
+            :key="idx"
+            class="p-4 bg-gray-50 rounded-md"
+          >
+            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
+              <div class="col-span-2 sm:col-span-1">
+                <label class="block text-xs text-gray-500 mb-1">Code</label>
+                <select v-model="obs.observationCode" class="form-input text-sm" @change="autoFillUnit(obs)">
+                  <option value="">Select...</option>
+                  <option v-for="code in vitalCodes" :key="code.value" :value="code.value">
+                    {{ code.label }}
+                  </option>
+                </select>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-500 mb-1">Value</label>
+                <input
+                  v-model.number="obs.value"
+                  type="number"
+                  step="0.01"
+                  class="form-input text-sm"
+                  inputmode="decimal"
+                />
+              </div>
+              <div>
+                <label class="block text-xs text-gray-500 mb-1">Unit</label>
+                <input v-model="obs.unit" type="text" class="form-input text-sm" />
+              </div>
+              <div>
+                <label class="block text-xs text-gray-500 mb-1">Recorded At</label>
+                <input
+                  v-model="obs.recordedAt"
+                  type="datetime-local"
+                  class="form-input text-sm"
+                />
+              </div>
+              <div class="flex items-end gap-2">
+                <div class="flex-1">
+                  <label class="block text-xs text-gray-500 mb-1">Note</label>
+                  <input v-model="obs.note" type="text" class="form-input text-sm" placeholder="Optional" />
+                </div>
+                <button
+                  @click="removeObservation(idx)"
+                  class="mb-0.5 text-clinical-danger hover:text-red-800 text-sm px-2 py-2"
+                  :disabled="observations.length <= 1"
+                >
+                  Remove
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button
+          @click="addObservation"
+          class="mt-4 text-sm text-primary-600 hover:text-primary-800"
+          :disabled="observations.length >= 10"
+        >
+          + Add Observation
+        </button>
+        <p v-if="observations.length >= 10" class="text-xs text-gray-400 mt-1">
+          Maximum 10 observations per submission.
+        </p>
+      </fieldset>
+
+      <!-- Attestation & password -->
+      <fieldset class="card mt-6">
+        <legend class="text-sm font-medium text-gray-700 px-2">Clinician Attestation</legend>
+        <div class="space-y-4">
+          <label class="flex items-start gap-3 cursor-pointer">
+            <input
+              v-model="clinicianAttestation"
+              type="checkbox"
+              class="w-5 h-5 mt-0.5 text-clinical-safe rounded"
+            />
+            <span class="text-sm">
+              I attest that I have directly observed or performed these measurements and they are accurate to the best of my clinical judgment.
+            </span>
+          </label>
+          <div>
+            <label class="block text-xs text-gray-500 mb-1">Password Confirmation</label>
+            <input
+              v-model="passwordConfirm"
+              type="password"
+              class="form-input max-w-sm"
+              placeholder="Re-enter your password to confirm"
+              autocomplete="current-password"
+            />
+          </div>
+        </div>
+      </fieldset>
+
+      <!-- Submit -->
+      <div class="mt-6 flex flex-col sm:flex-row gap-4">
+        <button
+          @click="submit"
+          class="btn-primary text-base px-8 py-3"
+          :disabled="!canSubmit || store.loading"
+        >
+          {{ store.loading ? 'Submitting...' : 'Record Vitals' }}
+        </button>
+        <button
+          v-if="lastResult"
+          @click="resetForm"
+          class="px-4 py-3 text-gray-600 hover:text-gray-800 text-sm"
+        >
+          Record More Vitals
+        </button>
+      </div>
+
+      <!-- Error -->
+      <div v-if="errorMessage" class="mt-4 bg-red-50 border border-red-200 rounded-md p-4 text-sm text-clinical-danger">
+        {{ errorMessage }}
+      </div>
+
+      <!-- Success result -->
+      <div v-if="lastResult" class="mt-6 space-y-4">
+        <div class="bg-green-50 border border-green-200 rounded-md p-4">
+          <p class="font-medium text-green-800">Vitals recorded and promoted successfully</p>
+          <div class="text-sm text-green-700 mt-2 space-y-1">
+            <p>Batch: {{ lastResult.batchId.substring(0, 8) }}...</p>
+            <p>Encounter: {{ lastResult.encounterId.substring(0, 8) }}...</p>
+            <p>Observations promoted: {{ lastResult.observations.length }}</p>
+            <p>Promoted at: {{ new Date(lastResult.promotedAt).toLocaleString() }}</p>
+          </div>
+        </div>
+
+        <!-- Critical alerts -->
+        <div
+          v-if="lastResult.criticalAlertCount > 0"
+          class="bg-red-50 border-2 border-red-400 rounded-md p-4"
+        >
+          <div class="flex items-center gap-2 mb-3">
+            <span class="text-red-700 font-bold text-lg">CRITICAL ALERTS ({{ lastResult.criticalAlertCount }})</span>
+          </div>
+          <div
+            v-for="obs in lastResult.observations.filter(o => o.criticalAlert)"
+            :key="obs.liveObservationId"
+            class="bg-white border border-red-300 rounded p-3 mb-2 last:mb-0"
+          >
+            <p class="font-medium text-red-800">
+              {{ formatCode(obs.observationCode) }}: {{ obs.value }} {{ obs.unit }}
+            </p>
+            <p class="text-sm text-red-700 mt-1">{{ obs.criticalAlert!.message }}</p>
+            <div class="text-xs text-red-600 mt-1">
+              <span>Severity: {{ obs.criticalAlert!.severity }}</span>
+              <span class="ml-4">
+                Threshold ({{ obs.criticalAlert!.thresholdBound.replace('_', ' ') }}):
+                {{ obs.criticalAlert!.thresholdValue }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useLiveCaptureStore } from '../stores/liveCapture'
+import AppHeader from '../components/AppHeader.vue'
+import PatientSearch from '../components/PatientSearch.vue'
+import type { LiveCaptureObservationInput } from '../types'
+
+const store = useLiveCaptureStore()
+
+const mode = ref<'new' | 'existing'>('new')
+const patientId = ref<string | undefined>()
+const department = ref('')
+const roomBed = ref('')
+const admissionReason = ref('')
+const encounterId = ref('')
+const clinicianAttestation = ref(false)
+const passwordConfirm = ref('')
+const errorMessage = ref('')
+
+const lastResult = computed(() => store.lastResult)
+
+const departments = [
+  { value: 'Emergency Department', label: 'Emergency Department' },
+  { value: 'Internal Medicine', label: 'Internal Medicine' },
+  { value: 'General Medicine', label: 'General Medicine' },
+  { value: 'Surgery', label: 'Surgery' },
+  { value: 'ICU', label: 'ICU' },
+  { value: 'NICU', label: 'NICU' },
+  { value: 'Medical-Surgical', label: 'Medical-Surgical' },
+  { value: 'Outpatient Clinic', label: 'Outpatient Clinic' },
+  { value: 'Pediatrics', label: 'Pediatrics' },
+  { value: 'Obstetrics & Gynecology', label: 'Obstetrics & Gynecology' },
+  { value: 'Labor & Delivery', label: 'Labor & Delivery' },
+  { value: 'Cardiology', label: 'Cardiology' },
+  { value: 'Orthopedics', label: 'Orthopedics' },
+  { value: 'Neurology', label: 'Neurology' },
+  { value: 'Oncology', label: 'Oncology' },
+  { value: 'Radiology', label: 'Radiology' },
+  { value: 'Laboratory', label: 'Laboratory' },
+  { value: 'Psychiatry', label: 'Psychiatry' },
+  { value: 'Physical Therapy', label: 'Physical Therapy' },
+  { value: 'Anesthesiology', label: 'Anesthesiology' },
+]
+
+const vitalCodes = [
+  { value: 'HEART_RATE', label: 'Heart Rate', unit: 'bpm' },
+  { value: 'TEMP_C', label: 'Temperature', unit: '°C' },
+  { value: 'BP_SYSTOLIC', label: 'BP Systolic', unit: 'mmHg' },
+  { value: 'BP_DIASTOLIC', label: 'BP Diastolic', unit: 'mmHg' },
+  { value: 'RESP_RATE', label: 'Respiratory Rate', unit: 'breaths/min' },
+  { value: 'SPO2', label: 'SpO2', unit: '%' },
+  { value: 'POTASSIUM_MEQ_L', label: 'Potassium', unit: 'mEq/L' },
+  { value: 'GLUCOSE_MG_DL', label: 'Glucose', unit: 'mg/dL' },
+  { value: 'WBC_K_UL', label: 'WBC', unit: '×10³/µL' },
+  { value: 'LACTATE_MMOL_L', label: 'Lactate', unit: 'mmol/L' },
+]
+
+function nowLocal(): string {
+  const d = new Date()
+  d.setMinutes(d.getMinutes() - d.getTimezoneOffset())
+  return d.toISOString().slice(0, 16)
+}
+
+function makeObservation(): LiveCaptureObservationInput {
+  return { observationCode: '', value: null, unit: '', recordedAt: nowLocal(), note: '' }
+}
+
+const observations = ref<LiveCaptureObservationInput[]>([makeObservation()])
+
+function addObservation() {
+  if (observations.value.length < 10) {
+    observations.value.push(makeObservation())
+  }
+}
+
+function removeObservation(idx: number) {
+  if (observations.value.length > 1) {
+    observations.value.splice(idx, 1)
+  }
+}
+
+function autoFillUnit(obs: LiveCaptureObservationInput) {
+  const match = vitalCodes.find(c => c.value === obs.observationCode)
+  if (match) obs.unit = match.unit
+}
+
+function formatCode(code: string): string {
+  const match = vitalCodes.find(c => c.value === code)
+  return match?.label ?? code
+}
+
+const canSubmit = computed(() => {
+  const hasValidObs = observations.value.every(
+    o => o.observationCode && o.value !== null && o.unit && o.recordedAt,
+  )
+  if (!hasValidObs || !clinicianAttestation.value || !passwordConfirm.value) return false
+
+  if (mode.value === 'new') {
+    return !!patientId.value && !!department.value && !!admissionReason.value
+  }
+  return !!encounterId.value.trim()
+})
+
+async function submit() {
+  errorMessage.value = ''
+  store.reset()
+
+  const obs = observations.value.map(o => ({
+    ...o,
+    recordedAt: new Date(o.recordedAt).toISOString(),
+  }))
+
+  try {
+    if (mode.value === 'new') {
+      await store.openEncounterWithVitals(
+        patientId.value!,
+        department.value,
+        roomBed.value,
+        admissionReason.value,
+        obs,
+        clinicianAttestation.value,
+        passwordConfirm.value,
+      )
+    } else {
+      await store.recordObservations(
+        encounterId.value.trim(),
+        obs,
+        clinicianAttestation.value,
+        passwordConfirm.value,
+      )
+    }
+    passwordConfirm.value = ''
+  } catch (e: unknown) {
+    errorMessage.value = e instanceof Error ? e.message : 'Submission failed'
+  }
+}
+
+function resetForm() {
+  store.reset()
+  errorMessage.value = ''
+  observations.value = [makeObservation()]
+  clinicianAttestation.value = false
+  passwordConfirm.value = ''
+  if (mode.value === 'existing') {
+    encounterId.value = ''
+  }
+}
+</script>