From e8e762e7ee9a2d9f2ee42cfe8353d1ef5e280103 Mon Sep 17 00:00:00 2001
From: k4rli <projects@supa.ee>
Date: Mon, 25 Aug 2025 11:50:32 +0300
Subject: [PATCH] feat(MED-100): update analysis level bars

---
 .../_components/analysis-level-bar.tsx        | 20 +++++++++++++------
 .../analysis-results/_components/analysis.tsx | 14 ++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/home/(user)/(dashboard)/analysis-results/_components/analysis-level-bar.tsx b/app/home/(user)/(dashboard)/analysis-results/_components/analysis-level-bar.tsx
index b808403..71a7036 100644
--- a/app/home/(user)/(dashboard)/analysis-results/_components/analysis-level-bar.tsx
+++ b/app/home/(user)/(dashboard)/analysis-results/_components/analysis-level-bar.tsx
@@ -85,35 +85,43 @@ const AnalysisLevelBar = ({
     return calculated;
   }, [value, upper, lower]);
 
+  const [isVeryLow, isLow, isHigh, isVeryHigh] = useMemo(() => [
+    level === AnalysisResultLevel.VERY_LOW,
+    level === AnalysisResultLevel.LOW,
+    level === AnalysisResultLevel.HIGH,
+    level === AnalysisResultLevel.VERY_HIGH,
+  ], [level, value, upper, lower]);
+
+  const hasAbnormalLevel = isVeryLow || isLow || isHigh || isVeryHigh;
+
   return (
     <div className="mt-4 flex h-3 w-[35%] max-w-[360px] gap-1 sm:mt-0">
       {normLowerIncluded && (
         <>
           <Level
-            isActive={level === AnalysisResultLevel.VERY_LOW}
+            isActive={isVeryLow}
             color="destructive"
             isFirst
           />
-          <Level isActive={level === AnalysisResultLevel.LOW} color="warning" />
+          <Level isActive={isLow} color="warning" />
         </>
       )}
 
       <Level
         isFirst={!normLowerIncluded}
         isLast={!normUpperIncluded}
-        color={level === AnalysisResultLevel.NORMAL ? "success" : "warning"}
-        isActive
+        {...(hasAbnormalLevel ? { color: "warning", isActive: false } : { color: "success", isActive: true })}
         arrowLocation={arrowLocation}
       />
 
       {normUpperIncluded && (
         <>
           <Level
-            isActive={level === AnalysisResultLevel.HIGH}
+            isActive={isHigh}
             color="warning"
           />
           <Level
-            isActive={level === AnalysisResultLevel.VERY_HIGH}
+            isActive={isVeryHigh}
             color="destructive"
             isLast
           />
diff --git a/app/home/(user)/(dashboard)/analysis-results/_components/analysis.tsx b/app/home/(user)/(dashboard)/analysis-results/_components/analysis.tsx
index 67579b4..5ad0f8e 100644
--- a/app/home/(user)/(dashboard)/analysis-results/_components/analysis.tsx
+++ b/app/home/(user)/(dashboard)/analysis-results/_components/analysis.tsx
@@ -108,7 +108,7 @@ const Analysis = ({
             <div className="text-muted-foreground text-sm">{unit}</div>
           </div>
           <div className="text-muted-foreground mx-8 flex flex-col-reverse gap-2 text-center text-sm sm:block sm:gap-0">
-            {normLower} - {normUpper}
+            {normLower} - {normUpper} %
             <div>
               <Trans i18nKey="analysis-results:results.range.normal" />
             </div>
@@ -120,19 +120,17 @@ const Analysis = ({
             level={analysisResultLevel!}
           />
         </>
-      ) : (
+      ) : (isCancelled ? null : (
         <>
           <div className="flex items-center gap-3 sm:ml-auto">
-            {!isCancelled && (
-              <div className="font-semibold">
-                <Trans i18nKey="analysis-results:waitingForResults" />
-              </div>
-            )}
+            <div className="font-semibold">
+              <Trans i18nKey="analysis-results:waitingForResults" />
+            </div>
           </div>
           <div className="mx-8 w-[60px]"></div>
           <AnalysisLevelBarSkeleton />
         </>
-      )}
+      ))}
     </div>
   );
 };