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}