feature: Improve dashboard functionality

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

@@ -0,0 +1,50 @@
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useWardStore } from '@/stores/ward'
+import Button from '@/components/ui/Button.vue'
+
+const wardStore = useWardStore()
+const { searchInput, filters, hasActiveFilters } = storeToRefs(wardStore)
+
+const filterOptions = [
+  { key: 'hasAlerts', label: 'Has alerts' },
+  { key: 'sepsisActive', label: 'Sepsis active' },
+  { key: 'critical', label: 'Critical (NEWS2 ≥ 7)' },
+]
+</script>
+
+<template>
+  <div class="mb-4 space-y-4 rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
+    <label class="block">
+      <span class="sr-only">Search patients</span>
+      <input
+        :value="searchInput"
+        type="search"
+        placeholder="Search by name or MRN…"
+        class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+        @input="wardStore.setSearchInput($event.target.value)"
+      >
+    </label>
+
+    <div class="flex flex-wrap items-center gap-2">
+      <Button
+        v-for="option in filterOptions"
+        :key="option.key"
+        size="sm"
+        :variant="filters[option.key] ? 'primary' : 'secondary'"
+        @click="wardStore.toggleFilter(option.key)"
+      >
+        {{ option.label }}
+      </Button>
+
+      <Button
+        v-if="hasActiveFilters"
+        size="sm"
+        variant="ghost"
+        @click="wardStore.clearFilters()"
+      >
+        Clear filters
+      </Button>
+    </div>
+  </div>
+</template>