203 lines
7.4 KiB
Vue
203 lines
7.4 KiB
Vue
<template>
|
|
<div class="h-full min-h-0 flex flex-col">
|
|
<AppHeader
|
|
title="Queue Dashboard"
|
|
description="Supervisor view of digitization backlog, aging work, and reject rate."
|
|
tour-anchor="dashboard-header"
|
|
>
|
|
<template #actions>
|
|
<TourHelpButton />
|
|
<button
|
|
type="button"
|
|
class="text-sm font-medium text-primary-700 hover:text-primary-800"
|
|
:disabled="refreshing"
|
|
@click="refreshData"
|
|
>
|
|
{{ refreshing ? 'Refreshing…' : 'Refresh' }}
|
|
</button>
|
|
</template>
|
|
</AppHeader>
|
|
|
|
<div class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
|
|
<div class="max-w-7xl mx-auto space-y-6 lg:space-y-8">
|
|
<InlineError
|
|
v-if="overviewError"
|
|
title="Could not load queue overview"
|
|
:message="overviewError"
|
|
preserved="Previously loaded metrics are shown when available."
|
|
retry-label="Retry"
|
|
@retry="refreshData"
|
|
/>
|
|
|
|
<!-- Priority work metrics -->
|
|
<div
|
|
class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 sm:gap-4"
|
|
data-tour="dashboard-metrics"
|
|
>
|
|
<div class="card-elevated">
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
|
|
Pending Entry
|
|
</p>
|
|
<p class="mt-2 text-3xl font-bold tabular-nums text-clinical-warning">
|
|
{{ overview?.statusCounts?.UPLOADED ?? 0 }}
|
|
</p>
|
|
</div>
|
|
<div class="card-elevated">
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
|
|
In Entry
|
|
</p>
|
|
<p class="mt-2 text-3xl font-bold tabular-nums text-primary-700">
|
|
{{ overview?.statusCounts?.IN_ENTRY ?? 0 }}
|
|
</p>
|
|
</div>
|
|
<div class="card-elevated">
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
|
|
Pending Verification
|
|
</p>
|
|
<p class="mt-2 text-3xl font-bold tabular-nums text-clinical-warning">
|
|
{{ overview?.statusCounts?.PENDING_VERIFICATION ?? 0 }}
|
|
</p>
|
|
</div>
|
|
<div class="card-elevated">
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
|
|
Oldest Pending Verification
|
|
</p>
|
|
<p
|
|
class="mt-2 text-3xl font-bold tabular-nums"
|
|
:class="(overview?.oldestPendingVerificationMinutes ?? 0) > 1440
|
|
? 'text-clinical-danger'
|
|
: 'text-ink-strong'"
|
|
>
|
|
{{ formatMinutes(overview?.oldestPendingVerificationMinutes ?? 0) }}
|
|
</p>
|
|
</div>
|
|
<div class="card-elevated">
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
|
|
Reject Rate
|
|
</p>
|
|
<p
|
|
class="mt-2 text-3xl font-bold tabular-nums"
|
|
:class="(overview?.rejectRate ?? 0) > 0.15
|
|
? 'text-clinical-danger'
|
|
: 'text-clinical-safe'"
|
|
>
|
|
{{ ((overview?.rejectRate ?? 0) * 100).toFixed(1) }}%
|
|
</p>
|
|
</div>
|
|
<div class="card-elevated">
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
|
|
Average Time in Queue
|
|
</p>
|
|
<p class="mt-2 text-3xl font-bold tabular-nums text-ink-strong">
|
|
{{ formatMinutes(overview?.averageTimeInQueueMinutes ?? 0) }}
|
|
</p>
|
|
<p class="text-xs text-ink-secondary mt-2">Target: under 24 hours</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status breakdown from overview.statusCounts -->
|
|
<section class="card">
|
|
<h2 class="text-base font-semibold text-ink-strong mb-4">Batches by Status</h2>
|
|
<div v-if="!overview && refreshing" class="py-2">
|
|
<SkeletonBlock variant="row" :rows="5" />
|
|
</div>
|
|
<EmptyState
|
|
v-else-if="statusEntries.length === 0"
|
|
title="No status counts yet."
|
|
description="Refresh to load work-queue overview metrics."
|
|
/>
|
|
<div v-else class="space-y-3">
|
|
<div
|
|
v-for="{ status, count } in statusEntries"
|
|
:key="status"
|
|
class="flex items-center gap-2 sm:gap-4 min-w-0"
|
|
>
|
|
<div class="w-[7.5rem] sm:w-44 shrink-0 min-w-0">
|
|
<StatusBadge :status="status" />
|
|
</div>
|
|
<div class="flex-1 min-w-0 h-2.5 rounded-full bg-canvas border border-line overflow-hidden">
|
|
<div
|
|
class="h-full rounded-full bg-primary-500"
|
|
:style="{ width: `${(count / maxCount) * 100}%` }"
|
|
/>
|
|
</div>
|
|
<span class="text-sm font-semibold tabular-nums text-ink-strong w-6 sm:w-8 text-right shrink-0">
|
|
{{ count }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Existing batch list via batch list API -->
|
|
<section class="card" data-tour="dashboard-batches">
|
|
<h2 class="text-base font-semibold text-ink-strong mb-4">All Batches</h2>
|
|
<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"
|
|
/>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useBatchStore } from '../stores/batches'
|
|
import { get } from '../api/client'
|
|
import AppHeader from '../components/AppHeader.vue'
|
|
import TourHelpButton from '../components/TourHelpButton.vue'
|
|
import BatchList from '../components/BatchList.vue'
|
|
import StatusBadge from '../components/StatusBadge.vue'
|
|
import EmptyState from '../components/EmptyState.vue'
|
|
import SkeletonBlock from '../components/SkeletonBlock.vue'
|
|
import InlineError from '../components/InlineError.vue'
|
|
import type { WorkQueueOverview } from '../types'
|
|
|
|
const batchStore = useBatchStore()
|
|
const overview = ref<WorkQueueOverview | null>(null)
|
|
const overviewError = ref('')
|
|
const refreshing = ref(false)
|
|
|
|
const statusEntries = computed(() => {
|
|
const counts = overview.value?.statusCounts ?? {}
|
|
return Object.entries(counts)
|
|
.map(([status, count]) => ({ status, count: Number(count) }))
|
|
.sort((a, b) => b.count - a.count)
|
|
})
|
|
|
|
const maxCount = computed(() =>
|
|
Math.max(...statusEntries.value.map(e => e.count), 1),
|
|
)
|
|
|
|
function formatMinutes(minutes: number): string {
|
|
if (minutes < 60) return `${Math.round(minutes)}m`
|
|
if (minutes < 1440) return `${(minutes / 60).toFixed(1)}h`
|
|
return `${(minutes / 1440).toFixed(1)}d`
|
|
}
|
|
|
|
async function refreshData() {
|
|
refreshing.value = true
|
|
overviewError.value = ''
|
|
try {
|
|
const response = await get<WorkQueueOverview>('work-queue/overview')
|
|
if (response.success && response.data) {
|
|
overview.value = response.data
|
|
} else {
|
|
overviewError.value = response.error?.message ?? 'Failed to load work-queue overview'
|
|
}
|
|
} catch (e: unknown) {
|
|
overviewError.value = e instanceof Error ? e.message : 'Failed to load work-queue overview'
|
|
}
|
|
|
|
await batchStore.listBatches({ page: 1, pageSize: 50 })
|
|
refreshing.value = false
|
|
}
|
|
|
|
onMounted(refreshData)
|
|
</script>
|