fix styling to be more responsive and clean

2026-06-20 07:58:15 +08:00
parent 2f74e2dd8b
commit 2ca0078223
24 changed files with 398 additions and 367 deletions
@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from 'vue'
+import Badge from '@/components/ui/Badge.vue'
+
+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'
+})
+</script>
+
+<template>
+  <article
+    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 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600 dark:active:bg-gray-800"
+  >
+    <div class="flex items-start justify-between gap-4">
+      <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">
+            Room {{ patient.room ?? '—' }}
+          </span>
+          <Badge v-if="patient.sepsisActive" variant="critical" size="xs">Sepsis</Badge>
+        </div>
+        <h3 class="mt-2 truncate text-base font-semibold text-gray-900 dark:text-white">
+          {{ patient.firstName }} {{ patient.lastName }}
+        </h3>
+        <p class="text-xs text-gray-500 dark:text-gray-400">{{ patient.mrn }}</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">
+      <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">
+          {{ patient.qsofaScore ?? '—' }}
+        </dd>
+      </div>
+      <div>
+        <dt class="text-xs text-gray-500 dark:text-gray-400">Open alerts</dt>
+        <dd class="mt-2">
+          <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>
+        </dd>
+      </div>
+    </dl>
+  </article>
+</template>