feat(MED-168): update analysis results display

app/home/(user)/(dashboard)/analysis-results/_components/analysis.tsx

@@ -60,19 +60,14 @@ const Analysis = ({
   const unit = results?.unit || '';
   const normLower = results?.normLower;
   const normUpper = results?.normUpper;
+  const normStatus = results?.normStatus ?? null;
 
   const [showTooltip, setShowTooltip] = useState(false);
   const analysisResultLevel = useMemo(() => {
-    if (!results) {
+    if (normStatus === null) {
       return null;
     }
 
-    if (results.responseValue === null || results.responseValue === undefined) {
-      return null;
-    }
-
-    const normStatus = results.normStatus;
-
     switch (normStatus) {
       case 1:
         return AnalysisResultLevel.WARNING;
@@ -82,12 +77,13 @@ const Analysis = ({
       default:
         return AnalysisResultLevel.NORMAL;
     }
-  }, [results]);
+  }, [normStatus]);
 
   const isCancelled = Number(results?.status) === 5;
   const hasNestedElements = results?.nestedElements.length > 0;
 
   const normRangeText = normLower !== null ? `${normLower} - ${normUpper || ''}` : null;
+  const hasTextualResponse = hasIsNegative || hasIsWithinNorm;
 
   return (
     <div className="border-border rounded-lg border px-5">
@@ -127,10 +123,18 @@ const Analysis = ({
         {isCancelled || !results || hasNestedElements ? null : (
           <>
             <div className="flex items-center gap-3 sm:ml-auto">
-              <div className="font-semibold">{value}</div>
+              <div
+                className={cn('font-semibold', {
+                  'text-yellow-600': hasTextualResponse && analysisResultLevel === AnalysisResultLevel.WARNING,
+                  'text-red-600': hasTextualResponse && analysisResultLevel === AnalysisResultLevel.CRITICAL,
+                  'text-green-600': hasTextualResponse && analysisResultLevel === AnalysisResultLevel.NORMAL,
+                })}
+              >
+                {value}
+              </div>
               <div className="text-muted-foreground text-sm">{unit}</div>
             </div>
-            {!(hasIsNegative || hasIsWithinNorm) && (
+            {!hasTextualResponse && (
               <>
                 <div className="text-muted-foreground mx-8 flex flex-col-reverse gap-2 text-center text-sm sm:block sm:gap-0">
                   {normRangeText}

app/home/(user)/(dashboard)/analysis-results/test/test-responses.ts

@@ -139,7 +139,7 @@ const big1: AnalysisTestResponse = {
         "unit": null,
         "normLower": null,
         "normUpper": 2,
-        "normStatus": 0,
+        "normStatus": 2,
         "responseTime": "2024-02-29T10:13:01+00:00",
         "responseValue": null,
         "responseValueIsNegative": null,
@@ -150,6 +150,26 @@ const big1: AnalysisTestResponse = {
         "analysisElementOriginalId": "59156-0"
       }
     },
+    {
+      "analysisIdOriginal": "59156-0",
+      "isWaitingForResults": false,
+      "analysisName": "Glükoos",
+      "results": {
+        "nestedElements": [],
+        "unit": null,
+        "normLower": null,
+        "normUpper": 2,
+        "normStatus": 0,
+        "responseTime": "2024-02-29T10:13:01+00:00",
+        "responseValue": null,
+        "responseValueIsNegative": null,
+        "responseValueIsWithinNorm": true,
+        "normLowerIncluded": false,
+        "normUpperIncluded": false,
+        "status": "4",
+        "analysisElementOriginalId": "59156-0"
+      }
+    },
     {
       "analysisIdOriginal": "13955-0",
       "isWaitingForResults": false,