feature: Improve dashboard functionality

vigilcare-dashboard/src/components/patient/AlertsList.vue

@@ -1,13 +1,14 @@
 <script setup>
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useAlertStore } from '@/stores/alerts'
 import { usePolling } from '@/composables/usePolling'
 import Card from '@/components/ui/Card.vue'
 import Badge from '@/components/ui/Badge.vue'
 import Button from '@/components/ui/Button.vue'
 import EmptyState from '@/components/ui/EmptyState.vue'
+import AcknowledgeModal from '@/components/alerts/AcknowledgeModal.vue'
 import { alertTypeLabel } from '@/api/normalize'
+import { formatAcknowledgedByDisplay } from '@/composables/alertAcknowledge'
 
 const props = defineProps({
   encounterId: { type: String, required: true },
@@ -18,6 +19,7 @@ const emit = defineEmits(['select'])
 
 const alertStore = useAlertStore()
 const { alerts, loading } = storeToRefs(alertStore)
+const confirmingAlert = ref(null)
 
 function loadEncounterAlerts() {
   return alertStore.loadAlerts(props.encounterId)
@@ -33,8 +35,10 @@ function severityVariant(severity) {
   return severity === 'Critical' ? 'critical' : 'warning'
 }
 
-async function acknowledge(alertId) {
-  await alertStore.acknowledge(alertId)
+async function handleAcknowledge(note) {
+  if (!confirmingAlert.value) return
+  await alertStore.acknowledge(confirmingAlert.value.id, note)
+  confirmingAlert.value = null
   await loadEncounterAlerts()
 }
 
@@ -72,13 +76,19 @@ async function resolve(alertId) {
           <p v-if="alert.details" class="mt-2 truncate text-xs text-gray-500 dark:text-gray-400">
             {{ alert.details }}
           </p>
+          <p
+            v-if="alert.acknowledgedBy"
+            class="mt-2 text-xs text-gray-500 dark:text-gray-400"
+          >
+            Acknowledged by {{ formatAcknowledgedByDisplay(alert.acknowledgedBy) }}
+          </p>
         </div>
         <div class="flex shrink-0 gap-2">
           <Button
             v-if="alert.status === 'Open' || alert.status === 'Escalated'"
             size="sm"
             variant="secondary"
-            @click.stop="acknowledge(alert.id)"
+            @click.stop="confirmingAlert = alert"
           >
             Ack
           </Button>
@@ -93,5 +103,12 @@ async function resolve(alertId) {
         </div>
       </li>
     </ul>
+
+    <AcknowledgeModal
+      :open="!!confirmingAlert"
+      :alert="confirmingAlert"
+      @confirm="handleAcknowledge"
+      @close="confirmingAlert = null"
+    />
   </Card>
 </template>