356 lines
13 KiB
Vue
356 lines
13 KiB
Vue
<template>
|
|
<div class="h-full min-h-0 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"
|
|
: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>
|
|
|
|
<!-- 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">{{ documentError ?? '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>
|
|
<StatusBadge :status="currentBatch?.status ?? 'AWAITING_CLINICAL_APPROVAL'" />
|
|
</div>
|
|
|
|
<!-- Supersession info -->
|
|
<div
|
|
v-if="currentBatch?.supersedesBatchId"
|
|
class="bg-blue-50 border border-blue-200 rounded-md p-4 text-sm"
|
|
>
|
|
<p class="font-medium text-blue-800">Correction Batch</p>
|
|
<p class="text-blue-700 mt-1">
|
|
This batch corrects and will supersede batch
|
|
<span class="font-mono">{{ currentBatch.supersedesBatchId.substring(0, 8) }}...</span>
|
|
</p>
|
|
<button
|
|
v-if="currentBatch.patientId"
|
|
@click="router.push(`/patients/${currentBatch.patientId}/history`)"
|
|
class="text-xs text-blue-600 hover:text-blue-800 mt-2"
|
|
>
|
|
View patient history
|
|
</button>
|
|
</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="showApproveConfirm = true"
|
|
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 class="flex gap-4 mt-3 pt-3 border-t border-green-200">
|
|
<button
|
|
@click="createCorrection"
|
|
class="text-sm text-primary-600 hover:text-primary-800 font-medium"
|
|
>
|
|
Create Correction
|
|
</button>
|
|
<button
|
|
v-if="currentBatch?.patientId"
|
|
@click="router.push(`/patients/${currentBatch!.patientId}/history`)"
|
|
class="text-sm text-gray-600 hover:text-gray-800"
|
|
>
|
|
View Patient History
|
|
</button>
|
|
</div>
|
|
</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>
|
|
|
|
<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"
|
|
>
|
|
<textarea
|
|
v-model="rejectionReason"
|
|
class="form-input"
|
|
rows="4"
|
|
placeholder="Reason for rejection (required)..."
|
|
/>
|
|
</ConfirmDialog>
|
|
|
|
<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 { useToast } from '../composables/useToast'
|
|
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 }>()
|
|
|
|
const batchStore = useBatchStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const toast = useToast()
|
|
|
|
const batchId = computed(() => props.batchId ?? (route.params.batchId as string | undefined))
|
|
const currentBatch = computed(() => batchStore.currentBatch)
|
|
const draft = computed(() => batchStore.currentDraft)
|
|
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)
|
|
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())
|
|
}
|
|
|
|
function closeRejectDialog() {
|
|
showRejectDialog.value = false
|
|
}
|
|
|
|
async function confirmApprove() {
|
|
showApproveConfirm.value = false
|
|
await approve()
|
|
}
|
|
|
|
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
|
|
toast.info('Approved. Promotion will be retried automatically.')
|
|
} else if (response?.data) {
|
|
promotionResult.value = response.data
|
|
toast.success('Batch approved and promoted successfully')
|
|
}
|
|
} catch (e: unknown) {
|
|
const msg = e instanceof Error ? e.message : 'Approval failed'
|
|
if (msg.includes('PROMOTION_DEFERRED')) {
|
|
deferred.value = true
|
|
toast.info('Approved. Promotion will be retried automatically.')
|
|
} else {
|
|
errorMessage.value = msg
|
|
toast.error(msg)
|
|
}
|
|
} finally {
|
|
processing.value = false
|
|
}
|
|
}
|
|
|
|
function createCorrection() {
|
|
if (!batchId.value) return
|
|
router.push({
|
|
path: '/intake',
|
|
query: {
|
|
supersedesBatchId: batchId.value,
|
|
patientId: currentBatch.value?.patientId ?? undefined,
|
|
batchType: currentBatch.value?.batchType ?? undefined,
|
|
},
|
|
})
|
|
}
|
|
|
|
async function reject() {
|
|
if (!batchId.value) return
|
|
processing.value = true
|
|
errorMessage.value = ''
|
|
try {
|
|
await batchStore.rejectBatch(batchId.value, rejectionReason.value)
|
|
showRejectDialog.value = false
|
|
toast.warning('Batch rejected')
|
|
router.push('/approval')
|
|
} catch (e: unknown) {
|
|
const msg = e instanceof Error ? e.message : 'Rejection failed'
|
|
errorMessage.value = msg
|
|
toast.error(msg)
|
|
} 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 loadQueue()
|
|
}
|
|
})
|
|
|
|
async function loadQueue() {
|
|
await batchStore.listBatches({
|
|
status: 'AWAITING_CLINICAL_APPROVAL',
|
|
page: 1,
|
|
pageSize: 50,
|
|
})
|
|
}
|
|
</script>
|