feature: Simulation Control Center (Dashboard)

vigilcare-dashboard/src/components/ward/PatientRow.vue

@@ -10,6 +10,7 @@ import {
   stalenessClass,
 } from '@/composables/wardFormat'
 import { formatDepartment } from '@/composables/sepsisFormat'
+import { isSimulatedPatient } from '@/api/normalize'
 
 const props = defineProps({
   patient: { type: Object, required: true },
@@ -18,6 +19,8 @@ const props = defineProps({
 
 const emit = defineEmits(['activate'])
 
+const simulated = computed(() => isSimulatedPatient(props.patient))
+
 const riskVariant = computed(() => {
   const score = props.patient.news2Score ?? 0
   if (score >= 7) return 'critical'
@@ -45,7 +48,7 @@ const vitalsStaleness = computed(() =>
 )
 
 const rowLabel = computed(() =>
-  `Patient ${props.patient.firstName} ${props.patient.lastName}, room ${patientRoom(props.patient)}`,
+  `Patient ${props.patient.firstName} ${props.patient.lastName}, room ${patientRoom(props.patient)}${simulated.value ? ', simulated' : ''}`,
 )
 
 function onKeydown(event) {
@@ -68,8 +71,17 @@ function onKeydown(event) {
       {{ patientRoom(patient) }}
     </td>
     <td class="px-4 py-4">
-      <div class="text-sm font-medium text-gray-900 dark:text-white">
-        {{ patient.firstName }} {{ patient.lastName }}
+      <div class="flex flex-wrap items-center gap-2">
+        <div class="text-sm font-medium text-gray-900 dark:text-white">
+          {{ patient.firstName }} {{ patient.lastName }}
+        </div>
+        <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"
+          title="Simulated patient"
+        >
+          SIM
+        </span>
       </div>
       <div class="text-xs text-gray-500 dark:text-gray-400">{{ patient.mrn }}</div>
     </td>