feature: Shared UX Primitives

vigilcare-records-web/src/__tests__/components/EmptyLoadingError.test.ts

@@ -0,0 +1,115 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EmptyState from '@/components/EmptyState.vue'
+import SkeletonBlock from '@/components/SkeletonBlock.vue'
+import InlineError from '@/components/InlineError.vue'
+import BatchList from '@/components/BatchList.vue'
+import type { BatchDetailResponse } from '@/types'
+
+function makeBatch(overrides: Partial<BatchDetailResponse> = {}): BatchDetailResponse {
+  return {
+    id: 'batch-aaaaaaaa',
+    status: 'UPLOADED',
+    batchType: 'VITALS',
+    track: 'TRACK_A',
+    createdAt: '2026-01-15T10:00:00Z',
+    ...overrides,
+  } as BatchDetailResponse
+}
+
+describe('EmptyState', () => {
+  it('renders operational title and description', () => {
+    const wrapper = mount(EmptyState, {
+      props: {
+        title: 'No batches are waiting for verification.',
+        description: 'New batches appear here after data entry is submitted.',
+      },
+    })
+    expect(wrapper.text()).toContain('No batches are waiting for verification.')
+    expect(wrapper.text()).toContain('New batches appear here after data entry is submitted.')
+  })
+
+  it('renders action slot', () => {
+    const wrapper = mount(EmptyState, {
+      props: { title: 'Empty' },
+      slots: { action: '<button>Return to Dashboard</button>' },
+    })
+    expect(wrapper.find('button').text()).toBe('Return to Dashboard')
+  })
+})
+
+describe('SkeletonBlock', () => {
+  it('exposes loading status for table variant', () => {
+    const wrapper = mount(SkeletonBlock, { props: { variant: 'table', rows: 3 } })
+    expect(wrapper.attributes('role')).toBe('status')
+    expect(wrapper.attributes('aria-busy')).toBe('true')
+  })
+})
+
+describe('InlineError', () => {
+  it('shows what happened, what was preserved, and retry', async () => {
+    const wrapper = mount(InlineError, {
+      props: {
+        title: 'Could not load batches',
+        message: 'Network error',
+        preserved: 'Your filters were preserved.',
+        retryLabel: 'Retry',
+      },
+    })
+    expect(wrapper.text()).toContain('Could not load batches')
+    expect(wrapper.text()).toContain('Network error')
+    expect(wrapper.text()).toContain('Your filters were preserved.')
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('retry')).toHaveLength(1)
+  })
+})
+
+describe('BatchList patterns', () => {
+  it('shows skeleton while loading', () => {
+    const wrapper = mount(BatchList, {
+      props: { batches: [], loading: true },
+    })
+    expect(wrapper.find('[role="status"]').exists()).toBe(true)
+    expect(wrapper.text()).not.toContain('No batches')
+  })
+
+  it('shows empty state when idle with no batches', () => {
+    const wrapper = mount(BatchList, {
+      props: {
+        batches: [],
+        loading: false,
+        emptyTitle: 'No batches are waiting for verification.',
+        emptyDescription: 'New batches appear here after data entry is submitted.',
+      },
+    })
+    expect(wrapper.text()).toContain('No batches are waiting for verification.')
+  })
+
+  it('shows inline error with retry over empty/loading', async () => {
+    const wrapper = mount(BatchList, {
+      props: {
+        batches: [],
+        loading: false,
+        error: 'Timed out',
+      },
+    })
+    expect(wrapper.text()).toContain('Could not load batches')
+    expect(wrapper.text()).toContain('Timed out')
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('retry')).toHaveLength(1)
+  })
+
+  it('renders StatusBadge for each batch status', () => {
+    const wrapper = mount(BatchList, {
+      props: {
+        batches: [
+          makeBatch({ id: 'b1', status: 'PENDING_VERIFICATION' }),
+          makeBatch({ id: 'b2', status: 'PROMOTED' }),
+        ],
+        loading: false,
+      },
+    })
+    expect(wrapper.text()).toContain('Pending Verification')
+    expect(wrapper.text()).toContain('Promoted')
+  })
+})

vigilcare-records-web/src/__tests__/components/EntryForm.test.ts

@@ -116,7 +116,7 @@ describe('EntryForm', () => {
     const wrapper = mount(EntryForm, {
       props: { batch: makeBatch({ status: 'IN_ENTRY' }), batchId: 'b1' },
     })
-    expect(wrapper.text()).toContain('IN ENTRY')
+    expect(wrapper.text()).toContain('In Entry')
   })
 
   describe('conditional sections by batch type', () => {

vigilcare-records-web/src/__tests__/components/SeparationOfDutiesBanner.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SeparationOfDutiesBanner from '@/components/SeparationOfDutiesBanner.vue'
+import ConfirmDialog from '@/components/ConfirmDialog.vue'
+
+describe('SeparationOfDutiesBanner', () => {
+  it('shows enforced info when entered-by and verifier differ', () => {
+    const wrapper = mount(SeparationOfDutiesBanner, {
+      props: {
+        enteredByUserId: 'entry-user-1',
+        enteredByUserName: 'Arjun Menon',
+        currentUserId: 'verify-user-2',
+        currentUserName: 'Priya Nair',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Separation of Duties Enforced')
+    expect(wrapper.text()).toContain('Arjun Menon')
+    expect(wrapper.text()).toContain('Priya Nair')
+    expect(wrapper.text()).not.toContain('You cannot verify')
+    expect(wrapper.emitted('update:blocked')?.at(-1)).toEqual([false])
+  })
+
+  it('blocks when the same user entered the batch', () => {
+    const wrapper = mount(SeparationOfDutiesBanner, {
+      props: {
+        enteredByUserId: 'same-user',
+        currentUserId: 'same-user',
+        currentUserName: 'Alex Clerk',
+      },
+    })
+
+    expect(wrapper.text()).toContain('You cannot verify a batch you entered.')
+    expect(wrapper.emitted('update:blocked')?.at(-1)).toEqual([true])
+  })
+
+  it('falls back to truncated ids when names are omitted', () => {
+    const wrapper = mount(SeparationOfDutiesBanner, {
+      props: {
+        enteredByUserId: 'abcdefghijkl',
+        currentUserId: 'mnopqrstuvwx',
+      },
+    })
+
+    expect(wrapper.text()).toContain('abcdefgh…')
+    expect(wrapper.text()).toContain('mnopqrst…')
+  })
+
+  it('hides when either id is missing', () => {
+    const wrapper = mount(SeparationOfDutiesBanner, {
+      props: {
+        enteredByUserId: 'entry-1',
+        currentUserId: '',
+      },
+    })
+    expect(wrapper.find('[data-testid="sod-banner"]').exists()).toBe(false)
+  })
+})
+
+describe('ConfirmDialog', () => {
+  const teleportStub = {
+    global: {
+      stubs: {
+        Teleport: { template: '<div><slot /></div>' },
+      },
+    },
+  }
+
+  it('renders title, body, and confirm label when open', () => {
+    const wrapper = mount(ConfirmDialog, {
+      props: {
+        open: true,
+        title: 'Approve & Promote',
+        body: 'Approval will promote the verified records into live clinical tables.',
+        confirmLabel: 'Approve & Promote',
+        variant: 'primary',
+      },
+      ...teleportStub,
+    })
+
+    expect(wrapper.text()).toContain('Approve & Promote')
+    expect(wrapper.text()).toContain(
+      'Approval will promote the verified records into live clinical tables.'
+    )
+  })
+
+  it('emits confirm and cancel', async () => {
+    const wrapper = mount(ConfirmDialog, {
+      props: {
+        open: true,
+        title: 'Reject Batch',
+        confirmLabel: 'Confirm Rejection',
+        variant: 'danger',
+      },
+      ...teleportStub,
+    })
+
+    const buttons = wrapper.findAll('button')
+    const confirmBtn = buttons.find((b) => b.text() === 'Confirm Rejection')
+    const cancelBtn = buttons.find((b) => b.text() === 'Cancel')
+    await confirmBtn!.trigger('click')
+    await cancelBtn!.trigger('click')
+    expect(wrapper.emitted('confirm')).toHaveLength(1)
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+  })
+
+  it('disables confirm when confirmDisabled is true', () => {
+    const wrapper = mount(ConfirmDialog, {
+      props: {
+        open: true,
+        title: 'Reject Batch',
+        confirmLabel: 'Confirm Rejection',
+        variant: 'danger',
+        confirmDisabled: true,
+      },
+      ...teleportStub,
+    })
+
+    const confirmBtn = wrapper
+      .findAll('button')
+      .find((b) => b.text() === 'Confirm Rejection')
+    expect(confirmBtn!.attributes('disabled')).toBeDefined()
+  })
+})

vigilcare-records-web/src/__tests__/components/StatusBadge.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import StatusBadge from '@/components/StatusBadge.vue'
+import { BATCH_STATUS_META, getBatchStatusMeta } from '@/utils/batchStatus'
+
+describe('StatusBadge', () => {
+  it.each(Object.keys(BATCH_STATUS_META))('renders label and icon for %s', (status) => {
+    const wrapper = mount(StatusBadge, { props: { status } })
+    expect(wrapper.text()).toContain(BATCH_STATUS_META[status].label)
+    expect(wrapper.find('svg').exists()).toBe(true)
+  })
+
+  it('humanizes unknown statuses without relying on color alone', () => {
+    const wrapper = mount(StatusBadge, { props: { status: 'CUSTOM_STATE' } })
+    expect(wrapper.text()).toContain('Custom State')
+    expect(wrapper.find('svg').exists()).toBe(true)
+  })
+
+  it('handles null status', () => {
+    const wrapper = mount(StatusBadge, { props: { status: null } })
+    expect(wrapper.text()).toContain('Unknown')
+  })
+})
+
+describe('getBatchStatusMeta', () => {
+  it('maps REJECTED to Verification Rejected', () => {
+    expect(getBatchStatusMeta('REJECTED').label).toBe('Verification Rejected')
+  })
+
+  it('maps AWAITING_CLINICAL_APPROVAL to Pending Approval', () => {
+    expect(getBatchStatusMeta('AWAITING_CLINICAL_APPROVAL').label).toBe('Pending Approval')
+  })
+})

vigilcare-records-web/src/__tests__/components/VerificationForm.test.ts

@@ -3,6 +3,7 @@ import { mount, flushPromises } from '@vue/test-utils'
 import { setActivePinia, createPinia } from 'pinia'
 import VerificationForm from '@/components/VerificationForm.vue'
 import { useBatchStore } from '@/stores/batches'
+import { useAuthStore } from '@/stores/auth'
 import type { BatchDetailResponse } from '@/types'
 import {
   emptyDraft,
@@ -31,8 +32,44 @@ vi.mock('vue-router', () => ({
   useRouter: () => ({
     push: vi.fn(),
   }),
+  useRoute: () => ({
+    params: {},
+    query: {},
+  }),
+  createRouter: () => ({
+    beforeEach: vi.fn(),
+    afterEach: vi.fn(),
+    push: vi.fn(),
+    replace: vi.fn(),
+  }),
+  createWebHistory: () => ({}),
 }))
 
+vi.mock('@/router', () => ({
+  default: {
+    push: vi.fn(),
+    replace: vi.fn(),
+    beforeEach: vi.fn(),
+  },
+}))
+
+const mountOptions = {
+  global: {
+    stubs: {
+      // Render dialog content in-tree (ConfirmDialog uses Teleport)
+      Teleport: { template: '<div><slot /></div>' },
+    },
+  },
+}
+
+function mountForm(
+  props: { batch: BatchDetailResponse | null; batchId: string } = {
+    batch: makeBatch(),
+    batchId: 'b1',
+  },
+) {
+  return mount(VerificationForm, { props, ...mountOptions })
+}
 function makeBatch(overrides: Partial<BatchDetailResponse> = {}): BatchDetailResponse {
   const batchType = overrides.batchType ?? 'VITALS'
   return {
@@ -63,9 +100,7 @@ function makeBatch(overrides: Partial<BatchDetailResponse> = {}): BatchDetailRes
 
 function mountWithDraft(batchOverrides: Partial<BatchDetailResponse> = {}) {
   const batch = makeBatch(batchOverrides)
-  const wrapper = mount(VerificationForm, {
-    props: { batch, batchId: 'b1' },
-  })
+  const wrapper = mountForm({ batch, batchId: 'b1' })
 
   const store = useBatchStore()
   store.currentDraft = emptyDraft(batch.batchType, {
@@ -123,9 +158,7 @@ beforeEach(() => {
 
 describe('VerificationForm', () => {
   it('renders verification header', () => {
-    const wrapper = mount(VerificationForm, {
-      props: { batch: makeBatch(), batchId: 'b1' },
-    })
+    const wrapper = mountForm()
     expect(wrapper.text()).toContain('Verification Review')
     expect(wrapper.text()).toContain('Pending Verification')
   })
@@ -153,20 +186,13 @@ describe('VerificationForm', () => {
   })
 
   it('shows rejection reason banner when present', () => {
-    const wrapper = mount(VerificationForm, {
-      props: {
-        batch: makeBatch({ rejectionReason: 'Temperature seems incorrect' }),
-        batchId: 'b1',
-      },
-    })
+    const wrapper = mountForm({ batch: makeBatch({ rejectionReason: 'Temperature seems incorrect' }), batchId: 'b1' })
     expect(wrapper.text()).toContain('Previous Rejection Reason')
     expect(wrapper.text()).toContain('Temperature seems incorrect')
   })
 
   it('does not show rejection banner when no reason', () => {
-    const wrapper = mount(VerificationForm, {
-      props: { batch: makeBatch({ rejectionReason: null }), batchId: 'b1' },
-    })
+    const wrapper = mountForm({ batch: makeBatch({ rejectionReason: null }), batchId: 'b1' })
     expect(wrapper.text()).not.toContain('Previous Rejection Reason')
   })
 
@@ -242,9 +268,7 @@ describe('VerificationForm', () => {
 
   describe('reject flow', () => {
     it('shows reject dialog when reject button is clicked', async () => {
-      const wrapper = mount(VerificationForm, {
-        props: { batch: makeBatch(), batchId: 'b1' },
-      })
+      const wrapper = mountForm()
 
       const rejectBtn = wrapper.findAll('button').find((b) => b.text() === 'Reject')
       await rejectBtn!.trigger('click')
@@ -255,9 +279,7 @@ describe('VerificationForm', () => {
     })
 
     it('disables confirm button when reason is empty', async () => {
-      const wrapper = mount(VerificationForm, {
-        props: { batch: makeBatch(), batchId: 'b1' },
-      })
+      const wrapper = mountForm()
 
       const rejectBtn = wrapper.findAll('button').find((b) => b.text() === 'Reject')
       await rejectBtn!.trigger('click')
@@ -268,9 +290,7 @@ describe('VerificationForm', () => {
     })
 
     it('enables confirm button when reason is entered', async () => {
-      const wrapper = mount(VerificationForm, {
-        props: { batch: makeBatch(), batchId: 'b1' },
-      })
+      const wrapper = mountForm()
 
       const rejectBtn = wrapper.findAll('button').find((b) => b.text() === 'Reject')
       await rejectBtn!.trigger('click')
@@ -285,9 +305,7 @@ describe('VerificationForm', () => {
     })
 
     it('calls rejectBatch on confirm', async () => {
-      const wrapper = mount(VerificationForm, {
-        props: { batch: makeBatch(), batchId: 'b1' },
-      })
+      const wrapper = mountForm()
 
       const store = useBatchStore()
       store.rejectBatch = vi.fn().mockResolvedValue(undefined)
@@ -308,9 +326,7 @@ describe('VerificationForm', () => {
     })
 
     it('closes reject dialog on cancel', async () => {
-      const wrapper = mount(VerificationForm, {
-        props: { batch: makeBatch(), batchId: 'b1' },
-      })
+      const wrapper = mountForm()
 
       const rejectBtn = wrapper.findAll('button').find((b) => b.text() === 'Reject')
       await rejectBtn!.trigger('click')
@@ -326,6 +342,64 @@ describe('VerificationForm', () => {
     })
   })
 
+  describe('separation of duties', () => {
+    it('shows SoD enforced banner and keeps Pass enabled for a different verifier', async () => {
+      const auth = useAuthStore()
+      auth.user = {
+        id: 'verifier-2',
+        username: 'verifier',
+        fullName: 'Priya Nair',
+        role: 'VERIFIER',
+      }
+
+      const { wrapper } = mountWithDraft({ enteredByUserId: 'entry-1' })
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('Separation of Duties Enforced')
+      expect(wrapper.text()).toContain('Priya Nair')
+
+      const checkboxes = wrapper.findAll('input[type="checkbox"]')
+      for (const cb of checkboxes) {
+        await cb.setValue(true)
+      }
+      await wrapper.vm.$nextTick()
+
+      const approveBtn = wrapper
+        .findAll('button')
+        .find((b) => b.text().includes('Approve - Verified'))
+      expect(approveBtn!.element.disabled).toBe(false)
+    })
+
+    it('blocks Pass when the current user entered the batch', async () => {
+      const auth = useAuthStore()
+      auth.user = {
+        id: 'entry-1',
+        username: 'clerk',
+        fullName: 'Alex Clerk',
+        role: 'VERIFIER',
+      }
+
+      const { wrapper } = mountWithDraft({ enteredByUserId: 'entry-1' })
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('You cannot verify a batch you entered.')
+
+      const checkboxes = wrapper.findAll('input[type="checkbox"]')
+      for (const cb of checkboxes) {
+        await cb.setValue(true)
+      }
+      await wrapper.vm.$nextTick()
+
+      const approveBtn = wrapper
+        .findAll('button')
+        .find((b) => b.text().includes('Approve - Verified'))
+      expect(approveBtn!.element.disabled).toBe(true)
+
+      const rejectBtn = wrapper.findAll('button').find((b) => b.text() === 'Reject')
+      expect(rejectBtn!.element.disabled).toBe(true)
+    })
+  })
+
   describe('observations display', () => {
     it('shows observation count in legend', async () => {
       const { wrapper } = mountWithDraft()
@@ -353,8 +427,9 @@ describe('VerificationForm', () => {
     })
 
     it('shows NKA for noKnownAllergies', async () => {
-      const wrapper = mount(VerificationForm, {
-        props: { batch: makeBatch({ batchType: 'ALLERGY_UPDATE' }), batchId: 'b1' },
+      const wrapper = mountForm({
+        batch: makeBatch({ batchType: 'ALLERGY_UPDATE' }),
+        batchId: 'b1',
       })
 
       const store = useBatchStore()

vigilcare-records-web/src/__tests__/components/WorkstationActionBar.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { computed, ref } from 'vue'
+import WorkstationActionBar from '@/components/WorkstationActionBar.vue'
+import OcrConfidenceBadge from '@/components/OcrConfidenceBadge.vue'
+import {
+  confidenceToLevel,
+  formatOcrBadgeLabel,
+  useOcrFieldConfidence,
+  OCR_HIGH_THRESHOLD,
+  OCR_MEDIUM_THRESHOLD,
+} from '@/composables/useOcrFieldConfidence'
+import type { OcrConfidenceMap } from '@/types'
+
+describe('WorkstationActionBar', () => {
+  it('renders sticky bar with left, center, primary, and right slots', () => {
+    const wrapper = mount(WorkstationActionBar, {
+      slots: {
+        left: '<button class="btn-danger">Reject</button>',
+        center: '<button class="btn-secondary">Save Draft</button>',
+        primary: '<button class="btn-primary">Submit for Verification</button>',
+        right: '<button class="btn-secondary">Next</button>',
+      },
+    })
+
+    const bar = wrapper.find('[data-testid="workstation-action-bar"]')
+    expect(bar.exists()).toBe(true)
+    expect(bar.classes()).toContain('sticky')
+    expect(bar.classes()).toContain('bottom-0')
+    expect(wrapper.text()).toContain('Reject')
+    expect(wrapper.text()).toContain('Save Draft')
+    expect(wrapper.text()).toContain('Submit for Verification')
+    expect(wrapper.text()).toContain('Next')
+  })
+})
+
+describe('OCR confidence thresholds (design-doc §14)', () => {
+  it('maps 95%+ to high, 80–94% to medium, below 80% to low', () => {
+    expect(confidenceToLevel(0.95)).toBe('high')
+    expect(confidenceToLevel(1)).toBe('high')
+    expect(confidenceToLevel(0.94)).toBe('medium')
+    expect(confidenceToLevel(OCR_MEDIUM_THRESHOLD)).toBe('medium')
+    expect(confidenceToLevel(0.79)).toBe('low')
+    expect(OCR_HIGH_THRESHOLD).toBe(0.95)
+    expect(OCR_MEDIUM_THRESHOLD).toBe(0.8)
+  })
+
+  it('formats badge labels as OCR N%', () => {
+    expect(formatOcrBadgeLabel(0.98)).toBe('OCR 98%')
+    expect(formatOcrBadgeLabel(0.8)).toBe('OCR 80%')
+  })
+
+  it('exposes confidence, label, level, and border class from composable', () => {
+    const map = ref<OcrConfidenceMap | null>({
+      provider: 'test',
+      fieldConfidences: {
+        'patient.fullName': 0.98,
+        'patient.sex': 0.85,
+        'encounter.roomBed': 0.5,
+      },
+    })
+    const {
+      getFieldConfidence,
+      fieldConfidenceLabel,
+      fieldConfidenceLevel,
+      fieldConfidenceClass,
+    } = useOcrFieldConfidence(computed(() => map.value))
+
+    expect(getFieldConfidence('patient.fullName')).toBe(0.98)
+    expect(fieldConfidenceLabel('patient.fullName')).toBe('OCR 98%')
+    expect(fieldConfidenceLevel('patient.fullName')).toBe('high')
+    expect(fieldConfidenceClass('patient.fullName')).toBe('ocr-high')
+
+    expect(fieldConfidenceLevel('patient.sex')).toBe('medium')
+    expect(fieldConfidenceClass('patient.sex')).toBe('ocr-medium')
+
+    expect(fieldConfidenceLevel('encounter.roomBed')).toBe('low')
+    expect(fieldConfidenceClass('encounter.roomBed')).toBe('ocr-low')
+
+    expect(fieldConfidenceLabel('missing.path')).toBeNull()
+    expect(fieldConfidenceClass('missing.path')).toBe('')
+  })
+})
+
+describe('OcrConfidenceBadge', () => {
+  it('renders OCR percentage badge from confidence', () => {
+    const wrapper = mount(OcrConfidenceBadge, { props: { confidence: 0.98 } })
+    expect(wrapper.text()).toBe('OCR 98%')
+    expect(wrapper.classes()).toContain('ocr-badge-high')
+  })
+
+  it('hides when confidence is missing', () => {
+    const wrapper = mount(OcrConfidenceBadge, { props: { confidence: null } })
+    expect(wrapper.find('span').exists()).toBe(false)
+  })
+
+  it('uses provided label and level', () => {
+    const wrapper = mount(OcrConfidenceBadge, {
+      props: { label: 'OCR 72%', level: 'low' },
+    })
+    expect(wrapper.text()).toBe('OCR 72%')
+    expect(wrapper.classes()).toContain('ocr-badge-low')
+  })
+})

vigilcare-records-web/src/assets/main.css

@@ -100,4 +100,16 @@
   .ocr-low {
     @apply border-l-[3px] border-l-clinical-danger;
   }
+  .ocr-confidence-badge {
+    @apply inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold tracking-wide uppercase leading-none;
+  }
+  .ocr-badge-high {
+    @apply bg-clinical-safe-bg text-clinical-safe;
+  }
+  .ocr-badge-medium {
+    @apply bg-clinical-warning-bg text-clinical-warning;
+  }
+  .ocr-badge-low {
+    @apply bg-clinical-danger-bg text-clinical-danger;
+  }
 }

vigilcare-records-web/src/components/BatchList.vue

@@ -1,12 +1,26 @@
 <template>
   <div class="overflow-x-auto">
-    <div v-if="loading" class="text-gray-500 text-center py-4">Loading...</div>
-    <div v-else-if="batches.length === 0" class="text-gray-500 text-center py-4">
-      No batches found.
-    </div>
+    <InlineError
+      v-if="error"
+      title="Could not load batches"
+      :message="error"
+      preserved="Your filters and previous selections were preserved."
+      retry-label="Retry"
+      @retry="$emit('retry')"
+    />
+    <SkeletonBlock v-else-if="loading" variant="table" :rows="5" />
+    <EmptyState
+      v-else-if="batches.length === 0"
+      :title="emptyTitle"
+      :description="emptyDescription"
+    >
+      <template v-if="$slots.emptyAction" #action>
+        <slot name="emptyAction" />
+      </template>
+    </EmptyState>
     <table v-else class="w-full min-w-[640px] text-sm">
       <thead>
-        <tr class="border-b text-left text-gray-600">
+        <tr class="border-b text-left text-ink-secondary">
           <th class="py-2 px-4">ID</th>
           <th class="py-2 px-4">Type</th>
           <th class="py-2 px-4">Track</th>
@@ -19,7 +33,7 @@
         <tr
           v-for="batch in batches"
           :key="batch.id"
-          class="border-b hover:bg-gray-50 cursor-pointer"
+          class="border-b hover:bg-primary-50 cursor-pointer"
           @click="$emit('select', batch.id)"
         >
           <td class="py-2 px-4 font-mono text-xs">{{ batch.id.substring(0, 8) }}...</td>
@@ -27,27 +41,23 @@
           <td class="py-2 px-4">
             <span
               :class="batch.track === 'BACKFILL'
-                ? 'bg-blue-100 text-blue-800'
-                : 'bg-green-100 text-green-800'"
+                ? 'bg-primary-50 text-primary-800 border border-primary-100'
+                : 'bg-clinical-safe-bg text-clinical-safe border border-[#ABEFC6]'"
               class="status-badge"
             >
               {{ batch.track === 'BACKFILL' ? 'Backfill' : 'Live' }}
             </span>
           </td>
           <td class="py-2 px-4">
-            <span
-              :class="statusColor(batch.status)"
-              class="status-badge"
-            >
-              {{ formatStatus(batch.status) }}
-            </span>
+            <StatusBadge :status="batch.status" />
           </td>
-          <td class="py-2 px-4 text-gray-500">
+          <td class="py-2 px-4 text-ink-secondary">
             {{ new Date(batch.createdAt).toLocaleString() }}
           </td>
           <td v-if="showAssign" class="py-2 px-4">
             <button
               v-if="batch.status === 'UPLOADED'"
+              type="button"
               @click.stop="$emit('assign', batch.id)"
               class="text-primary-600 hover:text-primary-800 text-xs font-medium"
             >
@@ -62,37 +72,33 @@
 
 <script setup lang="ts">
 import type { BatchDetailResponse } from '../types'
+import StatusBadge from './StatusBadge.vue'
+import EmptyState from './EmptyState.vue'
+import SkeletonBlock from './SkeletonBlock.vue'
+import InlineError from './InlineError.vue'
 
-defineProps<{
+withDefaults(
+  defineProps<{
     batches: BatchDetailResponse[]
     loading: boolean
     showAssign?: boolean
-}>()
+    error?: string | null
+    emptyTitle?: string
+    emptyDescription?: string
+  }>(),
+  {
+    emptyTitle: 'No batches found.',
+    emptyDescription: undefined,
+  }
+)
 
 defineEmits<{
   (e: 'select', batchId: string): void
   (e: 'assign', batchId: string): void
+  (e: 'retry'): void
 }>()
 
 function formatBatchType(type: string): string {
-  return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
-}
-
-function formatStatus(status: string): string {
-  return status.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
-}
-
-function statusColor(status: string): string {
-  const colors: Record<string, string> = {
-    UPLOADED: 'bg-gray-100 text-gray-800',
-    IN_ENTRY: 'bg-yellow-100 text-yellow-800',
-    PENDING_VERIFICATION: 'bg-orange-100 text-orange-800',
-    REJECTED: 'bg-red-100 text-red-800',
-    VERIFIED: 'bg-blue-100 text-blue-800',
-    AWAITING_CLINICAL_APPROVAL: 'bg-purple-100 text-purple-800',
-    APPROVED: 'bg-green-100 text-green-800',
-    PROMOTED: 'bg-emerald-100 text-emerald-800',
-  }
-  return colors[status] ?? 'bg-gray-100 text-gray-800'
+  return type.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
 }
 </script>

vigilcare-records-web/src/components/ConfirmDialog.vue

@@ -0,0 +1,72 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      role="dialog"
+      aria-modal="true"
+      :aria-labelledby="titleId"
+      data-testid="confirm-dialog"
+      @keydown.esc.prevent="$emit('cancel')"
+    >
+      <div
+        class="w-full max-w-md rounded-card border border-line bg-surface p-6 shadow-dialog"
+        @click.stop
+      >
+        <h3 :id="titleId" class="text-lg font-semibold text-ink-strong">
+          {{ title }}
+        </h3>
+        <p v-if="body" class="mt-2 text-sm text-ink">{{ body }}</p>
+        <div v-if="$slots.default" class="mt-4">
+          <slot />
+        </div>
+        <div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+          <button
+            type="button"
+            class="px-4 py-2 text-sm text-ink-secondary hover:text-ink-strong"
+            @click="$emit('cancel')"
+          >
+            {{ cancelLabel }}
+          </button>
+          <button
+            type="button"
+            :class="variant === 'danger' ? 'btn-danger' : 'btn-primary'"
+            :disabled="confirmDisabled"
+            @click="$emit('confirm')"
+          >
+            {{ confirmLabel }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+
+withDefaults(
+  defineProps<{
+    open: boolean
+    title: string
+    body?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    variant?: 'primary' | 'danger'
+    confirmDisabled?: boolean
+  }>(),
+  {
+    confirmLabel: 'Confirm',
+    cancelLabel: 'Cancel',
+    variant: 'primary',
+    confirmDisabled: false,
+  }
+)
+
+defineEmits<{
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}>()
+
+const titleId = useId()
+</script>

vigilcare-records-web/src/components/EmptyState.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex flex-col items-center justify-center text-center py-10 px-4">
+    <h3 class="text-base font-semibold text-ink-strong">{{ title }}</h3>
+    <p v-if="description" class="mt-2 text-sm text-ink-secondary max-w-md">
+      {{ description }}
+    </p>
+    <div v-if="$slots.action" class="mt-4">
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>

vigilcare-records-web/src/components/EntryForm.vue

@@ -2,17 +2,12 @@
   <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">Data Entry</h2>
-      <span
-        :class="statusColor"
-        class="status-badge"
-      >
-        {{ batch?.status?.replace(/_/g, ' ') }}
-      </span>
+      <StatusBadge :status="batch?.status" />
     </div>
 
     <div v-if="ocrConfidence" class="ocr-banner">
-      Pre-filled by OCR ({{ ocrConfidence.provider }}).
-      Review all values against the scan before submitting.
+      Pre-filled by OCR ({{ ocrConfidence.provider }}) — review against the scan.
+      OCR is assistive, not authoritative.
     </div>
 
     <!-- Patient section -->
@@ -20,7 +15,10 @@
       <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-4">
         <div>
-          <label class="block text-xs text-gray-500">Full Name</label>
+          <label class="flex items-center gap-2 text-xs text-gray-500">
+            Full Name
+            <OcrConfidenceBadge :label="fieldConfidenceLabel('patient.fullName')" :level="fieldConfidenceLevel('patient.fullName')" />
+          </label>
           <input
             v-model="patient.fullName"
             @blur="savePatient"
@@ -29,7 +27,10 @@
           />
         </div>
         <div>
-          <label class="block text-xs text-gray-500">Date of Birth</label>
+          <label class="flex items-center gap-2 text-xs text-gray-500">
+            Date of Birth
+            <OcrConfidenceBadge :label="fieldConfidenceLabel('patient.dateOfBirth')" :level="fieldConfidenceLevel('patient.dateOfBirth')" />
+          </label>
           <input
             v-model="patient.dateOfBirth"
             @blur="savePatient"
@@ -38,7 +39,10 @@
           />
         </div>
         <div>
-          <label class="block text-xs text-gray-500">Sex</label>
+          <label class="flex items-center gap-2 text-xs text-gray-500">
+            Sex
+            <OcrConfidenceBadge :label="fieldConfidenceLabel('patient.sex')" :level="fieldConfidenceLevel('patient.sex')" />
+          </label>
           <select
             v-model="patient.sex"
             @change="savePatient"
@@ -150,7 +154,10 @@
       <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-4">
         <div>
-          <label class="block text-xs text-gray-500">Admission Date</label>
+          <label class="flex items-center gap-2 text-xs text-gray-500">
+            Admission Date
+            <OcrConfidenceBadge :label="fieldConfidenceLabel('encounter.admissionDate')" :level="fieldConfidenceLevel('encounter.admissionDate')" />
+          </label>
           <input
             v-model="encounter.admissionDate"
             @blur="saveEncounter"
@@ -159,7 +166,10 @@
           />
         </div>
         <div>
-          <label class="block text-xs text-gray-500">Department</label>
+          <label class="flex items-center gap-2 text-xs text-gray-500">
+            Department
+            <OcrConfidenceBadge :label="fieldConfidenceLabel('encounter.department')" :level="fieldConfidenceLevel('encounter.department')" />
+          </label>
           <select
             v-model="encounter.department"
             @change="saveEncounter"
@@ -170,7 +180,10 @@
           </select>
         </div>
         <div>
-          <label class="block text-xs text-gray-500">Room / Bed</label>
+          <label class="flex items-center gap-2 text-xs text-gray-500">
+            Room / Bed
+            <OcrConfidenceBadge :label="fieldConfidenceLabel('encounter.roomBed')" :level="fieldConfidenceLevel('encounter.roomBed')" />
+          </label>
           <input
             v-model="encounter.roomBed"
             @blur="saveEncounter"
@@ -179,7 +192,10 @@
           />
         </div>
         <div>
-          <label class="block text-xs text-gray-500">Admission Reason</label>
+          <label class="flex items-center gap-2 text-xs text-gray-500">
+            Admission Reason
+            <OcrConfidenceBadge :label="fieldConfidenceLabel('encounter.admissionReason')" :level="fieldConfidenceLevel('encounter.admissionReason')" />
+          </label>
           <input
             v-model="encounter.admissionReason"
             @blur="saveEncounter"
@@ -217,6 +233,8 @@
           :key="obs.id"
           :observation="obs"
           :value-input-class="observationValueConfidenceClass(obs.observationCode)"
+          :ocr-label="fieldConfidenceLabel(`observation.${obs.observationCode}.value`)"
+          :ocr-level="fieldConfidenceLevel(`observation.${obs.observationCode}.value`)"
           @update="(field, value) => handleObsUpdate(obs.id, field, value)"
           @delete="handleObsDelete"
         />
@@ -249,6 +267,8 @@ import { useBatchStore } from '../stores/batches'
 import { useToast } from '../composables/useToast'
 import { useOcrFieldConfidence } from '../composables/useOcrFieldConfidence'
 import ObservationRow from '../components/ObservationRow.vue'
+import StatusBadge from '../components/StatusBadge.vue'
+import OcrConfidenceBadge from '../components/OcrConfidenceBadge.vue'
 import type { BatchDetailResponse, DraftObservation } from '../types'
 
 const props = defineProps<{
@@ -287,7 +307,11 @@ const departments = [
 
 const fieldReqs = computed(() => batchStore.currentDraft?.fieldRequirements)
 const ocrConfidence = computed(() => batchStore.currentDraft?.ocrConfidence ?? null)
-const { fieldConfidenceClass } = useOcrFieldConfidence(ocrConfidence)
+const {
+  fieldConfidenceClass,
+  fieldConfidenceLabel,
+  fieldConfidenceLevel,
+} = useOcrFieldConfidence(ocrConfidence)
 
 function observationValueConfidenceClass(observationCode: string): string {
   if (!observationCode) return ''
@@ -322,8 +346,6 @@ const encounter = reactive({
 
 const observations = ref<DraftObservation[]>([])
 
-const statusColor = ref('bg-gray-100 text-gray-800')
-
 // Load draft data when batch changes
 watch(
   () => batchStore.currentDraft,

vigilcare-records-web/src/components/InlineError.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="rounded-input border border-[#FECDCA] bg-clinical-danger-bg p-4"
+    role="alert"
+  >
+    <p class="text-sm font-semibold text-clinical-danger">{{ title }}</p>
+    <p v-if="message" class="mt-1 text-sm text-ink">{{ message }}</p>
+    <p v-if="preserved" class="mt-2 text-sm text-ink-secondary">{{ preserved }}</p>
+    <div class="mt-3 flex flex-wrap items-center gap-3">
+      <button
+        v-if="retryLabel"
+        type="button"
+        class="btn-secondary text-sm py-1.5"
+        @click="$emit('retry')"
+      >
+        {{ retryLabel }}
+      </button>
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    title: string
+    message?: string
+    /** What was preserved / not lost */
+    preserved?: string
+    retryLabel?: string
+  }>(),
+  {
+    retryLabel: 'Retry',
+  }
+)
+
+defineEmits<{
+  (e: 'retry'): void
+}>()
+</script>

vigilcare-records-web/src/components/ObservationRow.vue

@@ -23,7 +23,10 @@
         </select>
       </div>
       <div>
-        <label class="block text-xs text-gray-500">Value</label>
+        <label class="flex items-center gap-2 text-xs text-gray-500">
+          Value
+          <OcrConfidenceBadge :label="ocrLabel" :level="ocrLevel" />
+        </label>
         <input
           :value="observation.value"
           @change="update('value', parseFloat(($event.target as HTMLInputElement).value))"
@@ -90,13 +93,17 @@
 
 <script setup lang="ts">
 import type { DraftObservation } from '../types'
+import type { OcrConfidenceLevel } from '../composables/useOcrFieldConfidence'
+import OcrConfidenceBadge from './OcrConfidenceBadge.vue'
 
-const props = defineProps<{
+defineProps<{
   observation: DraftObservation
   readonly?: boolean
   showVerified?: boolean
   verified?: boolean
   valueInputClass?: string
+  ocrLabel?: string | null
+  ocrLevel?: OcrConfidenceLevel | null
 }>()
 
 const emit = defineEmits<{

vigilcare-records-web/src/components/OcrConfidenceBadge.vue

@@ -0,0 +1,49 @@
+<template>
+  <span
+    v-if="label"
+    class="ocr-confidence-badge"
+    :class="badgeClass"
+    :title="title"
+  >
+    {{ label }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  confidenceToLevel,
+  formatOcrBadgeLabel,
+  type OcrConfidenceLevel,
+} from '../composables/useOcrFieldConfidence'
+
+const props = defineProps<{
+  /** 0–1 confidence; omit or undefined hides the badge */
+  confidence?: number | null
+  label?: string | null
+  level?: OcrConfidenceLevel | null
+}>()
+
+const resolvedLevel = computed<OcrConfidenceLevel | null>(() => {
+  if (props.level) return props.level
+  if (props.confidence === undefined || props.confidence === null) return null
+  return confidenceToLevel(props.confidence)
+})
+
+const label = computed(() => {
+  if (props.label) return props.label
+  if (props.confidence === undefined || props.confidence === null) return null
+  return formatOcrBadgeLabel(props.confidence)
+})
+
+const badgeClass = computed(() => {
+  const level = resolvedLevel.value
+  if (!level) return ''
+  return `ocr-badge-${level}`
+})
+
+const title = computed(() => {
+  if (!label.value) return undefined
+  return 'OCR extraction confidence — assistive only; verify against the scan'
+})
+</script>

vigilcare-records-web/src/components/SeparationOfDutiesBanner.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    v-if="show"
+    class="rounded-input border p-4 text-sm"
+    :class="blocked
+      ? 'border-[#FECDCA] bg-clinical-danger-bg'
+      : 'border-primary-100 bg-primary-50'"
+    role="status"
+    data-testid="sod-banner"
+  >
+    <template v-if="blocked">
+      <p class="font-semibold text-clinical-danger">
+        You cannot verify a batch you entered.
+      </p>
+      <p class="mt-1 text-ink-secondary">
+        Separation of Duties requires a different verifier. Select another batch or ask a colleague to continue.
+      </p>
+    </template>
+    <template v-else>
+      <p class="font-semibold text-primary-800">Separation of Duties Enforced</p>
+      <dl class="mt-2 grid gap-1 text-ink sm:grid-cols-2">
+        <div>
+          <dt class="text-xs text-ink-secondary">Entered by</dt>
+          <dd class="font-medium">{{ enteredDisplay }}</dd>
+        </div>
+        <div>
+          <dt class="text-xs text-ink-secondary">Current verifier</dt>
+          <dd class="font-medium">{{ currentDisplay }}</dd>
+        </div>
+      </dl>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+
+const props = defineProps<{
+  enteredByUserId?: string | null
+  enteredByUserName?: string | null
+  currentUserId?: string | null
+  currentUserName?: string | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:blocked', value: boolean): void
+}>()
+
+const show = computed(
+  () => !!(props.enteredByUserId && props.currentUserId)
+)
+
+const blocked = computed(
+  () =>
+    show.value &&
+    props.enteredByUserId === props.currentUserId
+)
+
+watch(
+  blocked,
+  (value) => emit('update:blocked', value),
+  { immediate: true }
+)
+
+function displayUser(id: string | null | undefined, name?: string | null): string {
+  if (name?.trim()) return name.trim()
+  if (!id) return 'Unknown'
+  return id.length > 8 ? `${id.substring(0, 8)}…` : id
+}
+
+const enteredDisplay = computed(() =>
+  displayUser(props.enteredByUserId, props.enteredByUserName)
+)
+const currentDisplay = computed(() =>
+  displayUser(props.currentUserId, props.currentUserName)
+)
+</script>

vigilcare-records-web/src/components/SkeletonBlock.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="animate-pulse"
+    :class="variant === 'inline' ? 'inline-block' : 'w-full'"
+    role="status"
+    aria-busy="true"
+    aria-label="Loading"
+  >
+    <template v-if="variant === 'table'">
+      <div class="space-y-3 py-2">
+        <div
+          v-for="i in rows"
+          :key="i"
+          class="grid grid-cols-5 gap-3 items-center"
+        >
+          <div class="h-3 rounded bg-line" />
+          <div class="h-3 rounded bg-line" />
+          <div class="h-3 rounded bg-line w-3/4" />
+          <div class="h-5 rounded-control bg-line w-24" />
+          <div class="h-3 rounded bg-line w-2/3" />
+        </div>
+      </div>
+    </template>
+    <template v-else-if="variant === 'row'">
+      <div class="space-y-2">
+        <div
+          v-for="i in rows"
+          :key="i"
+          class="h-4 rounded bg-line"
+          :style="{ width: rowWidth(i) }"
+        />
+      </div>
+    </template>
+    <div
+      v-else
+      class="rounded bg-line"
+      :style="{ height: height ?? '1rem', width: width ?? '100%' }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** `block` = single rectangle; `row` = stacked lines; `table` = list-row placeholders */
+    variant?: 'block' | 'row' | 'table' | 'inline'
+    rows?: number
+    height?: string
+    width?: string
+  }>(),
+  {
+    variant: 'block',
+    rows: 5,
+  }
+)
+
+function rowWidth(index: number): string {
+  const widths = ['100%', '92%', '85%', '96%', '78%']
+  return widths[(index - 1) % widths.length]
+}
+</script>

vigilcare-records-web/src/components/StatusBadge.vue

@@ -0,0 +1,66 @@
+<template>
+  <span
+    class="status-badge inline-flex items-center gap-1.5 border"
+    :class="toneClass"
+    :title="meta.label"
+  >
+    <span class="inline-flex shrink-0" aria-hidden="true">
+      <!-- upload -->
+      <svg v-if="meta.icon === 'upload'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
+        <path d="M8 11V3M8 3L5 6M8 3l3 3M3 13h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      <!-- edit -->
+      <svg v-else-if="meta.icon === 'edit'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
+        <path d="M11.5 2.5l2 2L5 13H3v-2L11.5 2.5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+      </svg>
+      <!-- clock -->
+      <svg v-else-if="meta.icon === 'clock'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M8 5v3.5l2 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      <!-- reject -->
+      <svg v-else-if="meta.icon === 'reject'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+      <!-- check -->
+      <svg v-else-if="meta.icon === 'check'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
+        <path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      <!-- shield -->
+      <svg v-else-if="meta.icon === 'shield'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
+        <path d="M8 2.5l5 2v3.5c0 3-2.2 5.2-5 6-2.8-.8-5-3-5-6V4.5l5-2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+      </svg>
+      <!-- approve -->
+      <svg v-else-if="meta.icon === 'approve'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M5.5 8l2 2 3.5-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      <!-- done -->
+      <svg v-else-if="meta.icon === 'done'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
+        <path d="M2.5 8.5l2 2M6 9l3.5-4M9.5 8.5l2 2 3-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      <!-- cancel / unknown -->
+      <svg v-else class="w-3 h-3" viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
+        <path d="M5.5 8h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    </span>
+    <span>{{ meta.label }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  BATCH_STATUS_TONE_CLASSES,
+  getBatchStatusMeta,
+} from '../utils/batchStatus'
+
+const props = defineProps<{
+  status: string | null | undefined
+}>()
+
+const meta = computed(() => getBatchStatusMeta(props.status))
+const toneClass = computed(() => BATCH_STATUS_TONE_CLASSES[meta.value.tone])
+</script>

vigilcare-records-web/src/components/VerificationForm.vue

@@ -2,9 +2,7 @@
   <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">Verification Review</h2>
-      <span class="bg-orange-100 text-orange-800 status-badge">
-        Pending Verification
-      </span>
+      <StatusBadge :status="batch?.status ?? 'PENDING_VERIFICATION'" />
     </div>
 
     <div v-if="batch?.rejectionReason" class="bg-red-50 border border-red-200 rounded-md p-4">
@@ -13,10 +11,17 @@
     </div>
 
     <div v-if="ocrConfidence" class="ocr-banner">
-      Values pre-filled by OCR ({{ ocrConfidence.provider }}).
-      Colored borders indicate extraction confidence — verify each value against the scan.
+      Pre-filled by OCR ({{ ocrConfidence.provider }}) — review against the scan.
+      OCR is assistive, not authoritative. Colored borders and badges indicate extraction confidence only.
     </div>
 
+    <SeparationOfDutiesBanner
+      v-model:blocked="sodBlocked"
+      :entered-by-user-id="batch?.enteredByUserId"
+      :current-user-id="auth.userId"
+      :current-user-name="auth.userFullName"
+    />
+
     <!-- Patient review -->
     <fieldset class="border border-gray-200 rounded-md p-4">
       <legend class="text-sm font-medium text-gray-700 px-2">Patient Demographics</legend>
@@ -30,6 +35,10 @@
               class="w-4 h-4 text-clinical-safe rounded"
             />
             <label class="text-xs text-gray-500">{{ field.label }}</label>
+            <OcrConfidenceBadge
+              :label="fieldConfidenceLabel(field.path)"
+              :level="fieldConfidenceLevel(field.path)"
+            />
           </div>
           <p
             class="text-sm mt-2 pl-8 font-medium"
@@ -54,6 +63,10 @@
               class="w-4 h-4 text-clinical-safe rounded"
             />
             <label class="text-xs text-gray-500">{{ field.label }}</label>
+            <OcrConfidenceBadge
+              :label="fieldConfidenceLabel(field.path)"
+              :level="fieldConfidenceLevel(field.path)"
+            />
           </div>
           <p
             class="text-sm mt-2 pl-8 font-medium"
@@ -78,6 +91,10 @@
               class="w-4 h-4 text-clinical-safe rounded"
             />
             <label class="text-xs text-gray-500">{{ field.label }}</label>
+            <OcrConfidenceBadge
+              :label="fieldConfidenceLabel(field.path)"
+              :level="fieldConfidenceLevel(field.path)"
+            />
           </div>
           <p
             class="text-sm mt-2 pl-8 font-medium"
@@ -102,6 +119,10 @@
               class="w-4 h-4 text-clinical-safe rounded"
             />
             <label class="text-xs text-gray-500">{{ field.label }}</label>
+            <OcrConfidenceBadge
+              :label="fieldConfidenceLabel(field.path)"
+              :level="fieldConfidenceLevel(field.path)"
+            />
           </div>
           <p
             class="text-sm mt-2 pl-8 font-medium"
@@ -127,6 +148,8 @@
           :show-verified="true"
           :verified="fieldChecks[`observations[${index}].value`] ?? false"
           :value-input-class="observationValueConfidenceClass(obs.observationCode)"
+          :ocr-label="fieldConfidenceLabel(`observation.${obs.observationCode}.value`)"
+          :ocr-level="fieldConfidenceLevel(`observation.${obs.observationCode}.value`)"
           @verify="(_obsId, passed) => toggleCheck(`observations[${index}].value`, passed)"
         />
       </div>
@@ -153,49 +176,36 @@
       <button
         @click="approveVerification"
         class="btn-primary"
-        :disabled="!allChecked || processing"
+        :disabled="!allChecked || processing || sodBlocked"
       >
         {{ processing ? 'Processing...' : 'Approve - Verified' }}
       </button>
       <button
         @click="showRejectDialog = true"
         class="btn-danger"
-        :disabled="processing"
+        :disabled="processing || sodBlocked"
       >
         Reject
       </button>
     </div>
 
-    <!-- Reject dialog -->
-    <div
-      v-if="showRejectDialog"
-      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+    <ConfirmDialog
+      :open="showRejectDialog"
+      title="Reject Batch"
+      body="This returns the batch for rework. A reason is required."
+      confirm-label="Confirm Rejection"
+      variant="danger"
+      :confirm-disabled="!rejectionReason.trim() || processing"
+      @confirm="rejectVerification"
+      @cancel="showRejectDialog = false"
     >
-      <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="rejectVerification"
-            class="btn-danger"
-            :disabled="!rejectionReason.trim()"
-          >
-            Confirm Rejection
-          </button>
-        </div>
-      </div>
-    </div>
+    </ConfirmDialog>
 
     <div v-if="errorMessage" class="text-clinical-danger text-sm">
       {{ errorMessage }}
@@ -206,10 +216,15 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
 import { useBatchStore } from '../stores/batches'
 import { useToast } from '../composables/useToast'
 import { useOcrFieldConfidence } from '../composables/useOcrFieldConfidence'
 import ObservationRow from '../components/ObservationRow.vue'
+import StatusBadge from '../components/StatusBadge.vue'
+import OcrConfidenceBadge from '../components/OcrConfidenceBadge.vue'
+import SeparationOfDutiesBanner from '../components/SeparationOfDutiesBanner.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
 import type { BatchDetailResponse, DraftObservation } from '../types'
 
 const props = defineProps<{
@@ -217,6 +232,7 @@ const props = defineProps<{
   batchId: string
 }>()
 
+const auth = useAuthStore()
 const batchStore = useBatchStore()
 const router = useRouter()
 const toast = useToast()
@@ -224,6 +240,7 @@ const processing = ref(false)
 const errorMessage = ref('')
 const showRejectDialog = ref(false)
 const rejectionReason = ref('')
+const sodBlocked = ref(false)
 
 const fieldChecks = ref<Record<string, boolean>>({})
 const observations = ref<DraftObservation[]>([])
@@ -241,7 +258,11 @@ const encounterFields = ref<FieldInfo[]>([])
 
 const fieldReqs = computed(() => batchStore.currentDraft?.fieldRequirements)
 const ocrConfidence = computed(() => batchStore.currentDraft?.ocrConfidence ?? null)
-const { fieldConfidenceClass } = useOcrFieldConfidence(ocrConfidence)
+const {
+  fieldConfidenceClass,
+  fieldConfidenceLabel,
+  fieldConfidenceLevel,
+} = useOcrFieldConfidence(ocrConfidence)
 
 function observationValueConfidenceClass(observationCode: string): string {
   if (!observationCode) return ''
@@ -355,6 +376,7 @@ function toggleCheck(path: string, value?: boolean) {
 }
 
 async function approveVerification() {
+  if (sodBlocked.value) return
   processing.value = true
   errorMessage.value = ''
   try {

vigilcare-records-web/src/components/WorkstationActionBar.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="sticky bottom-0 z-10 -mx-4 mt-auto border-t border-line bg-surface/95 px-4 py-3 backdrop-blur-sm sm:-mx-0 sm:rounded-b-card"
+    data-testid="workstation-action-bar"
+  >
+    <div
+      class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+    >
+      <div class="flex flex-wrap items-center gap-2">
+        <slot name="left" />
+      </div>
+      <div class="flex flex-wrap items-center justify-center gap-2">
+        <slot name="center" />
+      </div>
+      <div class="flex flex-wrap items-center justify-end gap-2">
+        <slot name="primary" />
+        <slot name="right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Sticky bottom action bar for Entry / Verification / Approval workstations.
+ * Wire into forms in Phase 16. Slots: left (Reject), center (Save Draft),
+ * primary (Submit…), right (Next). Prefer btn-primary / btn-danger / btn-secondary.
+ */
+</script>

vigilcare-records-web/src/composables/useOcrFieldConfidence.ts

@@ -1,17 +1,55 @@
 import { type ComputedRef } from 'vue'
 import type { OcrConfidenceMap } from '../types'
 
+/** Design-doc §14: 95–100% high, 80–94% medium, <80% low */
+export type OcrConfidenceLevel = 'high' | 'medium' | 'low'
+
+export const OCR_HIGH_THRESHOLD = 0.95
+export const OCR_MEDIUM_THRESHOLD = 0.8
+
+export function confidenceToLevel(confidence: number): OcrConfidenceLevel {
+  if (confidence >= OCR_HIGH_THRESHOLD) return 'high'
+  if (confidence >= OCR_MEDIUM_THRESHOLD) return 'medium'
+  return 'low'
+}
+
+export function formatOcrBadgeLabel(confidence: number): string {
+  const pct = Math.round(confidence * 100)
+  return `OCR ${pct}%`
+}
+
 export function useOcrFieldConfidence(
   ocrConfidence: ComputedRef<OcrConfidenceMap | null | undefined>,
 ) {
+  function getFieldConfidence(fieldPath: string): number | undefined {
+    if (!ocrConfidence.value) return undefined
+    return ocrConfidence.value.fieldConfidences[fieldPath]
+  }
+
+  function fieldConfidenceLevel(fieldPath: string): OcrConfidenceLevel | null {
+    const confidence = getFieldConfidence(fieldPath)
+    if (confidence === undefined) return null
+    return confidenceToLevel(confidence)
+  }
+
+  function fieldConfidenceLabel(fieldPath: string): string | null {
+    const confidence = getFieldConfidence(fieldPath)
+    if (confidence === undefined) return null
+    return formatOcrBadgeLabel(confidence)
+  }
+
   function fieldConfidenceClass(fieldPath: string): string {
-    if (!ocrConfidence.value) return ''
-    const confidence = ocrConfidence.value.fieldConfidences[fieldPath]
-    if (confidence === undefined) return ''
-    if (confidence >= 0.85) return 'ocr-high'
-    if (confidence >= 0.7) return 'ocr-medium'
+    const level = fieldConfidenceLevel(fieldPath)
+    if (!level) return ''
+    if (level === 'high') return 'ocr-high'
+    if (level === 'medium') return 'ocr-medium'
     return 'ocr-low'
   }
 
-  return { fieldConfidenceClass }
+  return {
+    getFieldConfidence,
+    fieldConfidenceLevel,
+    fieldConfidenceLabel,
+    fieldConfidenceClass,
+  }
 }

vigilcare-records-web/src/utils/batchStatus.ts

@@ -0,0 +1,66 @@
+export type BatchStatusTone =
+  | 'neutral'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'success'
+  | 'accent'
+  | 'muted'
+
+export type BatchStatusIcon =
+  | 'upload'
+  | 'edit'
+  | 'clock'
+  | 'reject'
+  | 'check'
+  | 'shield'
+  | 'approve'
+  | 'done'
+  | 'cancel'
+  | 'unknown'
+
+export interface BatchStatusMeta {
+  label: string
+  tone: BatchStatusTone
+  icon: BatchStatusIcon
+}
+
+/** Canonical labels aligned with design-doc § Status labels. */
+export const BATCH_STATUS_META: Record<string, BatchStatusMeta> = {
+  UPLOADED: { label: 'Uploaded', tone: 'neutral', icon: 'upload' },
+  IN_ENTRY: { label: 'In Entry', tone: 'warning', icon: 'edit' },
+  PENDING_VERIFICATION: { label: 'Pending Verification', tone: 'warning', icon: 'clock' },
+  REJECTED: { label: 'Verification Rejected', tone: 'danger', icon: 'reject' },
+  VERIFIED: { label: 'Verified', tone: 'info', icon: 'check' },
+  AWAITING_CLINICAL_APPROVAL: { label: 'Pending Approval', tone: 'accent', icon: 'shield' },
+  APPROVED: { label: 'Approved', tone: 'success', icon: 'approve' },
+  PROMOTED: { label: 'Promoted', tone: 'success', icon: 'done' },
+  CANCELLED: { label: 'Cancelled', tone: 'muted', icon: 'cancel' },
+}
+
+export const BATCH_STATUS_TONE_CLASSES: Record<BatchStatusTone, string> = {
+  neutral: 'bg-canvas text-ink-strong border border-line',
+  info: 'bg-primary-50 text-primary-800 border border-primary-100',
+  warning: 'bg-clinical-warning-bg text-clinical-warning border border-[#FEDF89]',
+  danger: 'bg-clinical-danger-bg text-clinical-danger border border-[#FECDCA]',
+  success: 'bg-clinical-safe-bg text-clinical-safe border border-[#ABEFC6]',
+  accent: 'bg-primary-50 text-primary-700 border border-primary-100',
+  muted: 'bg-canvas text-ink-disabled border border-line',
+}
+
+export function getBatchStatusMeta(status: string | null | undefined): BatchStatusMeta {
+  if (!status) {
+    return { label: 'Unknown', tone: 'neutral', icon: 'unknown' }
+  }
+  const key = status.toUpperCase()
+  return (
+    BATCH_STATUS_META[key] ?? {
+      label: key
+        .replace(/_/g, ' ')
+        .toLowerCase()
+        .replace(/\b\w/g, (c) => c.toUpperCase()),
+      tone: 'neutral',
+      icon: 'unknown',
+    }
+  )
+}

vigilcare-records-web/src/views/ApprovalView.vue

@@ -18,7 +18,11 @@
       <BatchList
         :batches="batchStore.batches"
         :loading="batchStore.loading"
+        :error="batchStore.error"
+        empty-title="No batches are waiting for clinical approval."
+        empty-description="Verified batches appear here after verification is complete."
         @select="openBatch"
+        @retry="loadQueue"
       />
     </div>
 
@@ -36,9 +40,7 @@
       <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>
+          <StatusBadge :status="currentBatch?.status ?? 'AWAITING_CLINICAL_APPROVAL'" />
         </div>
 
         <!-- Supersession info -->
@@ -125,7 +127,7 @@
         <!-- Actions -->
         <div class="flex flex-col sm:flex-row gap-4 pt-4 border-t">
           <button
-            @click="approve"
+            @click="showApproveConfirm = true"
             class="btn-primary"
             :disabled="processing"
           >
@@ -178,36 +180,34 @@
           </p>
         </div>
 
-        <!-- Reject dialog -->
-        <div
-          v-if="showRejectDialog"
-          class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+        <ConfirmDialog
+          :open="showApproveConfirm"
+          title="Approve & Promote"
+          body="Approval will promote the verified records into live clinical tables."
+          confirm-label="Approve & Promote"
+          variant="primary"
+          :confirm-disabled="processing"
+          @confirm="confirmApprove"
+          @cancel="showApproveConfirm = false"
+        />
+
+        <ConfirmDialog
+          :open="showRejectDialog"
+          title="Reject Batch"
+          body="This returns the batch for rework. A reason is required."
+          confirm-label="Confirm Rejection"
+          variant="danger"
+          :confirm-disabled="!rejectionReason.trim() || processing"
+          @confirm="reject"
+          @cancel="closeRejectDialog"
         >
-          <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>
+        </ConfirmDialog>
 
         <div v-if="errorMessage" class="text-clinical-danger text-sm">
           {{ errorMessage }}
@@ -227,6 +227,8 @@ import AppHeader from '../components/AppHeader.vue'
 import ScanViewer from '../components/ScanViewer.vue'
 import BatchList from '../components/BatchList.vue'
 import ObservationRow from '../components/ObservationRow.vue'
+import StatusBadge from '../components/StatusBadge.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
 
 const props = defineProps<{ batchId?: string }>()
 
@@ -243,6 +245,7 @@ const { documentUrl, documentError } = usePresignedUrl(batchId)
 const processing = ref(false)
 const errorMessage = ref('')
 const enableRetroactiveAlerts = ref(false)
+const showApproveConfirm = ref(false)
 const showRejectDialog = ref(false)
 const rejectionReason = ref('')
 const promotionResult = ref<{ mrn: string; encounterId: string; observationIds: string[] } | null>(null)
@@ -256,6 +259,15 @@ function formatBatchType(type: string): string {
   return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
 }
 
+function closeRejectDialog() {
+  showRejectDialog.value = false
+}
+
+async function confirmApprove() {
+  showApproveConfirm.value = false
+  await approve()
+}
+
 async function approve() {
   if (!batchId.value) return
   processing.value = true
@@ -329,11 +341,15 @@ watch(
 
 onMounted(async () => {
   if (!batchId.value) {
+    await loadQueue()
+  }
+})
+
+async function loadQueue() {
   await batchStore.listBatches({
     status: 'AWAITING_CLINICAL_APPROVAL',
     page: 1,
     pageSize: 50,
   })
-  }
-})
+}
 </script>

vigilcare-records-web/src/views/EntryView.vue

@@ -15,7 +15,11 @@
       <BatchList
         :batches="batchStore.batches"
         :loading="batchStore.loading"
+        :error="batchStore.error"
+        empty-title="No batches are assigned for data entry."
+        empty-description="Assigned batches appear here after intake assigns them to you."
         @select="openBatch"
+        @retry="loadQueue"
       />
     </div>
 
@@ -63,6 +67,14 @@ async function openBatch(id: string) {
   router.push(`/entry/${id}`)
 }
 
+async function loadQueue() {
+  await batchStore.listBatches({
+    assignedTo: auth.userId,
+    page: 1,
+    pageSize: 50,
+  })
+}
+
 watch(
   batchId,
   async (id) => {
@@ -75,11 +87,7 @@ watch(
 
 onMounted(async () => {
   if (!batchId.value) {
-    await batchStore.listBatches({
-      assignedTo: auth.userId,
-      page: 1,
-      pageSize: 50,
-    })
+    await loadQueue()
   }
 })
 </script>

vigilcare-records-web/src/views/IntakeView.vue

@@ -181,8 +181,12 @@
         <BatchList
           :batches="batchStore.batches"
           :loading="batchStore.loading"
+          :error="batchStore.error"
+          empty-title="No uploaded batches waiting for assignment."
+          empty-description="New uploads appear here after a scan is submitted."
           show-assign
           @assign="openAssignDialog"
+          @retry="loadRecent"
         />
       </div>
     </div>

vigilcare-records-web/src/views/QueueDashboardView.vue

@@ -101,6 +101,10 @@
         <BatchList
           :batches="batchStore.batches"
           :loading="batchStore.loading"
+          :error="batchStore.error"
+          empty-title="No batches in the queue."
+          empty-description="Batches appear here as they move through digitization."
+          @retry="refreshData"
         />
       </div>
     </div>

vigilcare-records-web/src/views/VerificationView.vue

@@ -18,7 +18,11 @@
       <BatchList
         :batches="batchStore.batches"
         :loading="batchStore.loading"
+        :error="batchStore.error"
+        empty-title="No batches are waiting for verification."
+        empty-description="New batches appear here after data entry is submitted."
         @select="openBatch"
+        @retry="loadQueue"
       />
     </div>
 
@@ -64,6 +68,14 @@ function openBatch(id: string) {
   router.push(`/verification/${id}`)
 }
 
+async function loadQueue() {
+  await batchStore.listBatches({
+    status: 'PENDING_VERIFICATION',
+    page: 1,
+    pageSize: 50,
+  })
+}
+
 watch(
   batchId,
   async (id) => {
@@ -76,11 +88,7 @@ watch(
 
 onMounted(async () => {
   if (!batchId.value) {
-    await batchStore.listBatches({
-      status: 'PENDING_VERIFICATION',
-      page: 1,
-      pageSize: 50,
-    })
+    await loadQueue()
   }
 })
 </script>