127 lines
4.3 KiB
Vue
127 lines
4.3 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import Badge from '@/components/ui/Badge.vue'
|
|
import {
|
|
formatGcsClassification,
|
|
formatLastObservation,
|
|
formatLengthOfStay,
|
|
observationStaleness,
|
|
patientRoom,
|
|
stalenessClass,
|
|
} from '@/composables/wardFormat'
|
|
import { isSimulatedPatient } from '@/api/normalize'
|
|
|
|
const props = defineProps({ patient: { type: Object, required: true } })
|
|
|
|
const riskVariant = computed(() => {
|
|
const score = props.patient.news2Score ?? 0
|
|
if (score >= 7) return 'critical'
|
|
if (score >= 5) return 'warning'
|
|
return 'success'
|
|
})
|
|
|
|
const vitalsStaleness = computed(() =>
|
|
observationStaleness(props.patient.lastObservationAt, props.patient.status),
|
|
)
|
|
|
|
const simulated = computed(() => isSimulatedPatient(props.patient))
|
|
|
|
const cardLabel = computed(() =>
|
|
`Patient ${props.patient.firstName} ${props.patient.lastName}, room ${patientRoom(props.patient)}${simulated.value ? ', simulated' : ''}`,
|
|
)
|
|
|
|
const emit = defineEmits(['activate'])
|
|
|
|
function onKeydown(event) {
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
event.preventDefault()
|
|
emit('activate')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<article
|
|
role="button"
|
|
tabindex="0"
|
|
:aria-label="cardLabel"
|
|
class="cursor-pointer rounded-md border border-border bg-surface-raised p-3 transition duration-200 hover:border-brand/40 active:bg-surface-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
|
|
@click="emit('activate')"
|
|
@keydown="onKeydown"
|
|
>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-ink-muted">
|
|
Room {{ patientRoom(patient) }}
|
|
</span>
|
|
<Badge v-if="patient.sepsisActive" variant="critical" size="xs">Sepsis</Badge>
|
|
<span
|
|
v-if="simulated"
|
|
class="inline-flex items-center rounded-sm px-1.5 py-0.5 text-[10px] font-bold uppercase bg-amber-100 text-amber-900 dark:bg-amber-900/40 dark:text-amber-200"
|
|
title="Simulated patient"
|
|
>
|
|
SIM
|
|
</span>
|
|
</div>
|
|
<h3 class="mt-2 truncate text-base font-semibold text-ink">
|
|
{{ patient.firstName }} {{ patient.lastName }}
|
|
</h3>
|
|
<p class="text-xs text-ink-muted">{{ patient.mrn }}</p>
|
|
<p v-if="patient.attendingPhysician" class="mt-1 text-xs text-ink-muted">
|
|
{{ patient.attendingPhysician }}
|
|
</p>
|
|
</div>
|
|
<Badge :variant="riskVariant">NEWS2 {{ patient.news2Score ?? '—' }}</Badge>
|
|
</div>
|
|
|
|
<dl class="mt-3 grid grid-cols-2 gap-3 border-t border-border pt-3">
|
|
<div>
|
|
<dt class="text-xs text-ink-muted">SOFA</dt>
|
|
<dd class="mt-1.5 text-sm font-medium text-ink">
|
|
{{ patient.sofaScore ?? '—' }}
|
|
<span v-if="patient.sofaDelta != null && patient.sofaDelta > 0" class="text-xs text-severity-warning">
|
|
Δ+{{ patient.sofaDelta }}
|
|
</span>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-xs text-ink-muted">GCS</dt>
|
|
<dd class="mt-1.5 text-sm font-medium text-ink">
|
|
{{ patient.gcsScore ?? '—' }}
|
|
<span v-if="patient.gcsClassification" class="text-xs text-ink-muted">
|
|
{{ formatGcsClassification(patient.gcsClassification) }}
|
|
</span>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-xs text-ink-muted">qSOFA</dt>
|
|
<dd class="mt-1.5 text-sm font-medium text-ink">
|
|
{{ patient.qsofaScore ?? '—' }}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-xs text-ink-muted">LOS</dt>
|
|
<dd class="mt-1.5 text-sm font-medium text-ink">
|
|
{{ formatLengthOfStay(patient.admittedAt) }}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-xs text-ink-muted">Last vitals</dt>
|
|
<dd class="mt-1.5 text-sm font-medium" :class="stalenessClass(vitalsStaleness)">
|
|
{{ formatLastObservation(patient.lastObservationAt) }}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-xs text-ink-muted">Open alerts</dt>
|
|
<dd class="mt-1.5">
|
|
<Badge v-if="patient.openAlertCount > 0" :variant="patient.openAlertCount > 2 ? 'critical' : 'warning'">
|
|
{{ patient.openAlertCount }}
|
|
</Badge>
|
|
<span v-else class="text-sm text-ink-muted">0</span>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</article>
|
|
</template>
|