Trent/vigilcare-clinical
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refractor. Update styling
CI / backend (push) Successful in 10m14s
Details
CI / frontend (push) Successful in 1m55s
Details

Browse Source
This commit is contained in:
Trent
2026-08-11 06:48:07 +08:00
parent e3f3a3ced8
commit 87e551c0d7
57 changed files with 450 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vigilcare-dashboard/src/components/ward/PatientCard.vue
+23 -23
View File
@@ -45,80 +45,80 @@ function onKeydown(event) {
role="button"
tabindex="0"
:aria-label="cardLabel"
class="cursor-pointer rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition duration-200 hover:border-gray-300 hover:shadow-md active:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600 dark:active:bg-gray-800"
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-4">
<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 uppercase tracking-wide text-gray-500 dark:text-gray-400">
<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 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide bg-amber-100 text-amber-900 dark:bg-amber-900/40 dark:text-amber-200"
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-gray-900 dark:text-white">
<h3 class="mt-2 truncate text-base font-semibold text-ink">
{{ patient.firstName }} {{ patient.lastName }}
</h3>
<p class="text-xs text-gray-500 dark:text-gray-400">{{ patient.mrn }}</p>
<p v-if="patient.attendingPhysician" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
<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-4 grid grid-cols-2 gap-4 border-t border-gray-100 pt-4 dark:border-gray-800">
<dl class="mt-3 grid grid-cols-2 gap-3 border-t border-border pt-3">
<div>
<dt class="text-xs text-gray-500 dark:text-gray-400">SOFA</dt>
<dd class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
<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-amber-600 dark:text-amber-400">
<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-gray-500 dark:text-gray-400">GCS</dt>
<dd class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
<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-gray-500 dark:text-gray-400">
<span v-if="patient.gcsClassification" class="text-xs text-ink-muted">
{{ formatGcsClassification(patient.gcsClassification) }}
</span>
</dd>
</div>
<div>
<dt class="text-xs text-gray-500 dark:text-gray-400">qSOFA</dt>
<dd class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
<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-gray-500 dark:text-gray-400">LOS</dt>
<dd class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
<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-gray-500 dark:text-gray-400">Last vitals</dt>
<dd class="mt-2 text-sm font-medium" :class="stalenessClass(vitalsStaleness)">
<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-gray-500 dark:text-gray-400">Open alerts</dt>
<dd class="mt-2">
<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-gray-400">0</span>
<span v-else class="text-sm text-ink-muted">0</span>
</dd>
</div>
</dl>