Add: No toast notification system or success feedback + No corrections/supersession UI

vigilcare-records-web/src/components/AppHeader.vue

@@ -8,6 +8,7 @@
         <router-link v-if="auth.canVerify" to="/verification" class="nav-link">Verification</router-link>
         <router-link v-if="auth.canApprove" to="/approval" class="nav-link">Approval</router-link>
         <router-link v-if="auth.canLiveCapture" to="/live-capture" class="nav-link">Live Capture</router-link>
+        <router-link to="/patients" class="nav-link">History</router-link>
         <router-link v-if="auth.canSupervise" to="/dashboard" class="nav-link">Dashboard</router-link>
       </nav>
       <slot name="subtitle" />

vigilcare-records-web/src/components/EntryForm.vue

@@ -232,6 +232,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, watch } from 'vue'
 import { useBatchStore } from '../stores/batches'
+import { useToast } from '../composables/useToast'
 import ObservationRow from '../components/ObservationRow.vue'
 import type { BatchDetailResponse, DraftObservation } from '../types'
 
@@ -241,6 +242,7 @@ const props = defineProps<{
 }>()
 
 const batchStore = useBatchStore()
+const toast = useToast()
 const submitting = ref(false)
 const errorMessage = ref('')
 
@@ -363,8 +365,11 @@ async function saveAllergies() {
       ...patient,
       allergiesJson: JSON.stringify(allergies.value.filter(a => a.trim())),
     })
+    toast.success('Allergies saved')
   } catch (e: unknown) {
-    errorMessage.value = e instanceof Error ? e.message : 'Failed to save allergies'
+    const msg = e instanceof Error ? e.message : 'Failed to save allergies'
+    errorMessage.value = msg
+    toast.error(msg)
   }
 }
 
@@ -390,8 +395,11 @@ async function saveMedications() {
       ...patient,
       medicationsJson: JSON.stringify(medications.value.filter(m => m.trim())),
     })
+    toast.success('Medications saved')
   } catch (e: unknown) {
-    errorMessage.value = e instanceof Error ? e.message : 'Failed to save medications'
+    const msg = e instanceof Error ? e.message : 'Failed to save medications'
+    errorMessage.value = msg
+    toast.error(msg)
   }
 }
 
@@ -409,16 +417,22 @@ async function savePatient() {
       allergiesJson: patient.noKnownAllergies ? null : JSON.stringify(allergies.value.filter(a => a.trim())),
       medicationsJson: patient.noActiveMedications ? null : JSON.stringify(medications.value.filter(m => m.trim())),
     })
+    toast.success('Patient demographics saved')
   } catch (e: unknown) {
-    errorMessage.value = e instanceof Error ? e.message : 'Failed to save patient'
+    const msg = e instanceof Error ? e.message : 'Failed to save patient'
+    errorMessage.value = msg
+    toast.error(msg)
   }
 }
 
 async function saveEncounter() {
   try {
     await batchStore.saveDraftEncounter(props.batchId, encounter)
+    toast.success('Encounter context saved')
   } catch (e: unknown) {
-    errorMessage.value = e instanceof Error ? e.message : 'Failed to save encounter'
+    const msg = e instanceof Error ? e.message : 'Failed to save encounter'
+    errorMessage.value = msg
+    toast.error(msg)
   }
 }
 
@@ -450,8 +464,11 @@ async function submitForVerification() {
   errorMessage.value = ''
   try {
     await batchStore.submitForVerification(props.batchId)
+    toast.success('Batch submitted for verification')
   } catch (e: unknown) {
-    errorMessage.value = e instanceof Error ? e.message : 'Submit failed'
+    const msg = e instanceof Error ? e.message : 'Submit failed'
+    errorMessage.value = msg
+    toast.error(msg)
   } finally {
     submitting.value = false
   }

vigilcare-records-web/src/components/ToastContainer.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+    <transition-group name="toast">
+      <div
+        v-for="toast in toasts"
+        :key="toast.id"
+        class="pointer-events-auto rounded-md shadow-lg px-4 py-3 text-sm font-medium flex items-start gap-2"
+        :class="toastClasses[toast.type]"
+      >
+        <span class="flex-1">{{ toast.message }}</span>
+        <button
+          @click="dismiss(toast.id)"
+          class="opacity-60 hover:opacity-100 text-current ml-2 shrink-0"
+        >
+          &times;
+        </button>
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toasts } from '../composables/useToast'
+
+const toastClasses: Record<string, string> = {
+  success: 'bg-green-600 text-white',
+  error: 'bg-red-600 text-white',
+  warning: 'bg-yellow-500 text-white',
+  info: 'bg-blue-600 text-white',
+}
+
+function dismiss(id: number) {
+  toasts.value = toasts.value.filter(t => t.id !== id)
+}
+</script>
+
+<style scoped>
+.toast-enter-active {
+  transition: all 0.3s ease-out;
+}
+.toast-leave-active {
+  transition: all 0.2s ease-in;
+}
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+</style>

vigilcare-records-web/src/components/VerificationForm.vue

@@ -189,6 +189,7 @@
 import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useBatchStore } from '../stores/batches'
+import { useToast } from '../composables/useToast'
 import ObservationRow from '../components/ObservationRow.vue'
 import type { BatchDetailResponse, DraftObservation } from '../types'
 
@@ -199,6 +200,7 @@ const props = defineProps<{
 
 const batchStore = useBatchStore()
 const router = useRouter()
+const toast = useToast()
 const processing = ref(false)
 const errorMessage = ref('')
 const showRejectDialog = ref(false)
@@ -344,9 +346,12 @@ async function approveVerification() {
       passed,
     }))
     await batchStore.verifyBatch(props.batchId, checks, true)
+    toast.success('Batch verified successfully')
     router.push('/verification')
   } catch (e: unknown) {
-    errorMessage.value = e instanceof Error ? e.message : 'Verification failed'
+    const msg = e instanceof Error ? e.message : 'Verification failed'
+    errorMessage.value = msg
+    toast.error(msg)
   } finally {
     processing.value = false
   }
@@ -358,9 +363,12 @@ async function rejectVerification() {
   try {
     await batchStore.rejectBatch(props.batchId, rejectionReason.value)
     showRejectDialog.value = false
+    toast.warning('Batch rejected')
     router.push('/verification')
   } catch (e: unknown) {
-    errorMessage.value = e instanceof Error ? e.message : 'Rejection failed'
+    const msg = e instanceof Error ? e.message : 'Rejection failed'
+    errorMessage.value = msg
+    toast.error(msg)
   } finally {
     processing.value = false
   }