feat: centralize vital sign configurations and utilities in vital-signs.ts

src/components/student-groups/investigation-requests/blood-test-request-form.tsx

@@ -18,7 +18,7 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/com
 import { Send } from "lucide-react";
 import { SignOffSection } from "@/components/ui/sign-off-section";
 import type { BloodTestType } from "@/lib/api-client-v2";
-import { BLOOD_TEST_OPTIONS } from "@/lib/constants";
+import { BLOOD_TEST_OPTIONS, getBloodTestLabel } from "@/lib/constants";
 
 interface BloodTestRequestFormProps {
   patientId: string;
@@ -111,7 +111,7 @@ export function BloodTestRequestForm({ patientId }: BloodTestRequestFormProps) {
               <SelectContent>
                 {BLOOD_TEST_OPTIONS.map((test) => (
                   <SelectItem key={test} value={test}>
-                    {test}
+                    {getBloodTestLabel(test)}
                   </SelectItem>
                 ))}
               </SelectContent>

src/components/student-groups/observations/blood-pressure-input.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Activity } from "lucide-react";
-import { BLOOD_PRESSURE_CONFIG } from "./vital-sign-config";
+import { BLOOD_PRESSURE_CONFIG } from "@/lib/vital-signs";
 
 interface BloodPressureInputProps {
   systolic: string;

src/components/student-groups/observations/bulk-vital-signs-form.tsx

@@ -225,7 +225,7 @@ export function BulkVitalSignsForm({ patient }: BulkVitalSignsFormProps) {
 
             {/* Blood Sugar */}
             <div className="space-y-2">
-              <Label htmlFor="bulk-bloodSugar">Blood Sugar (mmol/L)</Label>
+              <Label htmlFor="bulk-bloodSugar">Blood Sugar (mg/dL)</Label>
               <Input
                 id="bulk-bloodSugar"
                 type="number"

src/components/student-groups/observations/individual-vital-signs-form.tsx

@@ -3,7 +3,7 @@ import type { Patient } from "@/lib/api-client-v2";
 import { useAuth } from "@/hooks/use-auth";
 import { VitalSignInput } from "./vital-sign-input";
 import { BloodPressureInput } from "./blood-pressure-input";
-import { VITAL_SIGN_CONFIGS } from "./vital-sign-config";
+import { VITAL_SIGN_CONFIGS } from "@/lib/vital-signs";
 import {
   useVitalSignMutation,
   createBloodPressurePayload,

src/components/student-groups/observations/latest-observations-display.tsx

@@ -1,5 +1,6 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
+import { VITAL_SIGN_CONFIGS, BLOOD_PRESSURE, formatVitalSign } from "@/lib/vital-signs";
 
 interface VitalSigns {
   bloodPressure?: string;
@@ -17,6 +18,7 @@ interface LatestObservationsDisplayProps {
 
 /**
  * Latest observations display component
+ * Displays latest vital signs using centralized configuration
  */
 export function LatestObservationsDisplay({ vitals }: LatestObservationsDisplayProps) {
   return (
@@ -27,32 +29,44 @@ export function LatestObservationsDisplay({ vitals }: LatestObservationsDisplayP
       <CardContent>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
           <div className="space-y-1">
-            <Label className="text-sm text-gray-600">Blood Pressure</Label>
-            <p className="font-medium">{vitals?.bloodPressure || "N/A"}</p>
+            <Label className="text-sm text-gray-600">{BLOOD_PRESSURE.label}</Label>
+            <p className="font-medium">
+              {vitals?.bloodPressure ? `${vitals.bloodPressure} ${BLOOD_PRESSURE.unit}` : "N/A"}
+            </p>
           </div>
           <div className="space-y-1">
-            <Label className="text-sm text-gray-600">Heart Rate</Label>
-            <p className="font-medium">{vitals?.heartRate || "N/A"} bpm</p>
+            <Label className="text-sm text-gray-600">{VITAL_SIGN_CONFIGS.heartRate.label}</Label>
+            <p className="font-medium">{formatVitalSign("heartRate", vitals?.heartRate)}</p>
           </div>
           <div className="space-y-1">
-            <Label className="text-sm text-gray-600">Temperature</Label>
-            <p className="font-medium">{vitals?.temperature || "N/A"}</p>
+            <Label className="text-sm text-gray-600">{VITAL_SIGN_CONFIGS.temperature.label}</Label>
+            <p className="font-medium">{formatVitalSign("temperature", vitals?.temperature)}</p>
           </div>
           <div className="space-y-1">
-            <Label className="text-sm text-gray-600">Respiratory Rate</Label>
-            <p className="font-medium">{vitals?.respiratoryRate || "N/A"} /min</p>
+            <Label className="text-sm text-gray-600">
+              {VITAL_SIGN_CONFIGS.respiratoryRate.label}
+            </Label>
+            <p className="font-medium">
+              {formatVitalSign("respiratoryRate", vitals?.respiratoryRate)}
+            </p>
           </div>
           <div className="space-y-1">
-            <Label className="text-sm text-gray-600">O2 Saturation</Label>
-            <p className="font-medium">{vitals?.oxygenSaturation || "N/A"}%</p>
+            <Label className="text-sm text-gray-600">
+              {VITAL_SIGN_CONFIGS.oxygenSaturation.label}
+            </Label>
+            <p className="font-medium">
+              {formatVitalSign("oxygenSaturation", vitals?.oxygenSaturation)}
+            </p>
           </div>
           <div className="space-y-1">
-            <Label className="text-sm text-gray-600">Blood Sugar</Label>
-            <p className="font-medium">{vitals?.bloodSugar || "N/A"} mg/dL</p>
+            <Label className="text-sm text-gray-600">{VITAL_SIGN_CONFIGS.bloodSugar.label}</Label>
+            <p className="font-medium">{formatVitalSign("bloodSugar", vitals?.bloodSugar)}</p>
           </div>
           <div className="space-y-1">
-            <Label className="text-sm text-gray-600">Pain Score</Label>
-            <p className="font-medium">{vitals?.painScore || "N/A"}</p>
+            <Label className="text-sm text-gray-600">{VITAL_SIGN_CONFIGS.painScore.label}</Label>
+            <p className="font-medium">
+              {vitals?.painScore !== undefined ? vitals.painScore : "N/A"}
+            </p>
           </div>
         </div>
       </CardContent>