feature: Shared UX Primitives

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

@@ -23,7 +23,10 @@
         </select>
       </div>
       <div>
-        <label class="block text-xs text-gray-500">Value</label>
+        <label class="flex items-center gap-2 text-xs text-gray-500">
+          Value
+          <OcrConfidenceBadge :label="ocrLabel" :level="ocrLevel" />
+        </label>
         <input
           :value="observation.value"
           @change="update('value', parseFloat(($event.target as HTMLInputElement).value))"
@@ -90,13 +93,17 @@
 
 <script setup lang="ts">
 import type { DraftObservation } from '../types'
+import type { OcrConfidenceLevel } from '../composables/useOcrFieldConfidence'
+import OcrConfidenceBadge from './OcrConfidenceBadge.vue'
 
-const props = defineProps<{
+defineProps<{
   observation: DraftObservation
   readonly?: boolean
   showVerified?: boolean
   verified?: boolean
   valueInputClass?: string
+  ocrLabel?: string | null
+  ocrLevel?: OcrConfidenceLevel | null
 }>()
 
 const emit = defineEmits<{