403 lines
14 KiB
Vue
403 lines
14 KiB
Vue
<template>
|
|
<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>
|
|
</div>
|
|
|
|
<div v-if="batch?.rejectionReason" class="bg-red-50 border border-red-200 rounded-md p-4">
|
|
<p class="text-sm font-medium text-red-800">Previous Rejection Reason:</p>
|
|
<p class="text-sm text-red-700">{{ batch.rejectionReason }}</p>
|
|
</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.
|
|
</div>
|
|
|
|
<!-- 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>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div v-for="field in patientFields" :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"
|
|
:class="fieldConfidenceClass(field.path)"
|
|
>
|
|
{{ field.value || '(empty)' }}
|
|
</p>
|
|
</div>
|
|
</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"
|
|
:class="fieldConfidenceClass(field.path)"
|
|
>
|
|
{{ 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"
|
|
:class="fieldConfidenceClass(field.path)"
|
|
>
|
|
{{ 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>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div v-for="field in encounterFields" :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"
|
|
:class="fieldConfidenceClass(field.path)"
|
|
>
|
|
{{ field.value || '(empty)' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Observations review -->
|
|
<fieldset class="border border-gray-200 rounded-md p-4">
|
|
<legend class="text-sm font-medium text-gray-700 px-2">
|
|
Observations ({{ observations.length }})
|
|
</legend>
|
|
<div class="space-y-2">
|
|
<ObservationRow
|
|
v-for="(obs, index) in observations"
|
|
:key="obs.id"
|
|
:observation="obs"
|
|
:readonly="true"
|
|
:show-verified="true"
|
|
:verified="fieldChecks[`observations[${index}].value`] ?? false"
|
|
:value-input-class="observationValueConfidenceClass(obs.observationCode)"
|
|
@verify="(_obsId, passed) => toggleCheck(`observations[${index}].value`, passed)"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Verification progress -->
|
|
<div class="bg-gray-50 rounded-md p-4">
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span>Fields verified:</span>
|
|
<span :class="allChecked ? 'text-clinical-safe font-bold' : 'text-gray-600'">
|
|
{{ checkedCount }} / {{ totalFields }}
|
|
</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mt-2">
|
|
<div
|
|
class="bg-clinical-safe h-2 rounded-full transition-all"
|
|
:style="{ width: `${(checkedCount / Math.max(totalFields, 1)) * 100}%` }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex flex-col sm:flex-row gap-4 pt-4 border-t">
|
|
<button
|
|
@click="approveVerification"
|
|
class="btn-primary"
|
|
:disabled="!allChecked || processing"
|
|
>
|
|
{{ processing ? 'Processing...' : 'Approve - Verified' }}
|
|
</button>
|
|
<button
|
|
@click="showRejectDialog = true"
|
|
class="btn-danger"
|
|
:disabled="processing"
|
|
>
|
|
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"
|
|
>
|
|
<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>
|
|
|
|
<div v-if="errorMessage" class="text-clinical-danger text-sm">
|
|
{{ errorMessage }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useBatchStore } from '../stores/batches'
|
|
import { useToast } from '../composables/useToast'
|
|
import { useOcrFieldConfidence } from '../composables/useOcrFieldConfidence'
|
|
import ObservationRow from '../components/ObservationRow.vue'
|
|
import type { BatchDetailResponse, DraftObservation } from '../types'
|
|
|
|
const props = defineProps<{
|
|
batch: BatchDetailResponse | null
|
|
batchId: string
|
|
}>()
|
|
|
|
const batchStore = useBatchStore()
|
|
const router = useRouter()
|
|
const toast = useToast()
|
|
const processing = ref(false)
|
|
const errorMessage = ref('')
|
|
const showRejectDialog = ref(false)
|
|
const rejectionReason = ref('')
|
|
|
|
const fieldChecks = ref<Record<string, boolean>>({})
|
|
const observations = ref<DraftObservation[]>([])
|
|
|
|
interface FieldInfo {
|
|
path: string
|
|
label: string
|
|
value: string
|
|
}
|
|
|
|
const patientFields = ref<FieldInfo[]>([])
|
|
const allergyFields = ref<FieldInfo[]>([])
|
|
const medicationFields = ref<FieldInfo[]>([])
|
|
const encounterFields = ref<FieldInfo[]>([])
|
|
|
|
const fieldReqs = computed(() => batchStore.currentDraft?.fieldRequirements)
|
|
const ocrConfidence = computed(() => batchStore.currentDraft?.ocrConfidence ?? null)
|
|
const { fieldConfidenceClass } = useOcrFieldConfidence(ocrConfidence)
|
|
|
|
function observationValueConfidenceClass(observationCode: string): string {
|
|
if (!observationCode) return ''
|
|
return fieldConfidenceClass(`observation.${observationCode}.value`)
|
|
}
|
|
|
|
const showAllergies = computed(() => fieldReqs.value?.showAllergies ?? false)
|
|
const showMedications = computed(() => fieldReqs.value?.showMedications ?? false)
|
|
const showEncounterSummary = computed(() => fieldReqs.value?.showEncounterSummaryFields ?? false)
|
|
|
|
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) => {
|
|
if (!draft) return
|
|
|
|
observations.value = draft.observations ?? []
|
|
|
|
// Build patient field list
|
|
if (draft.patient) {
|
|
patientFields.value = [
|
|
{ path: 'patient.fullName', label: 'Full Name', value: draft.patient.fullName ?? '' },
|
|
{ path: 'patient.dateOfBirth', label: 'Date of Birth', value: draft.patient.dateOfBirth ?? '' },
|
|
{ path: 'patient.sex', label: 'Sex', value: draft.patient.sex ?? '' },
|
|
{ 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
|
|
if (draft.encounter) {
|
|
encounterFields.value = [
|
|
{ path: 'encounter.admissionDate', label: 'Admission Date', value: draft.encounter.admissionDate ?? '' },
|
|
{ path: 'encounter.department', label: 'Department', value: draft.encounter.department ?? '' },
|
|
{ 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 })
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
const totalFields = computed(
|
|
() => 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
|
|
)
|
|
const allChecked = computed(() => checkedCount.value === totalFields.value && totalFields.value > 0)
|
|
|
|
function toggleCheck(path: string, value?: boolean) {
|
|
fieldChecks.value[path] = value ?? !fieldChecks.value[path]
|
|
}
|
|
|
|
async function approveVerification() {
|
|
processing.value = true
|
|
errorMessage.value = ''
|
|
try {
|
|
const checks = Object.entries(fieldChecks.value).map(([fieldPath, passed]) => ({
|
|
fieldPath,
|
|
passed,
|
|
}))
|
|
await batchStore.verifyBatch(props.batchId, checks, true)
|
|
toast.success('Batch verified successfully')
|
|
router.push('/verification')
|
|
} catch (e: unknown) {
|
|
const msg = e instanceof Error ? e.message : 'Verification failed'
|
|
errorMessage.value = msg
|
|
toast.error(msg)
|
|
} finally {
|
|
processing.value = false
|
|
}
|
|
}
|
|
|
|
async function rejectVerification() {
|
|
processing.value = true
|
|
errorMessage.value = ''
|
|
try {
|
|
await batchStore.rejectBatch(props.batchId, rejectionReason.value)
|
|
showRejectDialog.value = false
|
|
toast.warning('Batch rejected')
|
|
router.push('/verification')
|
|
} catch (e: unknown) {
|
|
const msg = e instanceof Error ? e.message : 'Rejection failed'
|
|
errorMessage.value = msg
|
|
toast.error(msg)
|
|
} finally {
|
|
processing.value = false
|
|
}
|
|
}
|
|
</script> |