feat(MED-105): update sending test analysis results

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

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { ArrowDown } from 'lucide-react';
 
 import { cn } from '@kit/ui/utils';
+import { UserAnalysisElement } from '@/packages/features/accounts/src/types/accounts';
 
 export enum AnalysisResultLevel {
   VERY_LOW = 0,
@@ -17,11 +18,13 @@ const Level = ({
   color,
   isFirst = false,
   isLast = false,
+  arrowLocation,
 }: {
   isActive?: boolean;
   color: 'destructive' | 'success' | 'warning' | 'gray-200';
   isFirst?: boolean;
   isLast?: boolean;
+  arrowLocation?: number;
 }) => {
   return (
     <div
@@ -32,7 +35,10 @@ const Level = ({
       })}
     >
       {isActive && (
-        <div className="absolute top-[-14px] left-1/2 -translate-x-1/2 rounded-[10px] bg-white p-[2px]">
+        <div
+          className="absolute top-[-14px] left-1/2 -translate-x-1/2 rounded-[10px] bg-white p-[2px]"
+          style={{ left: `${arrowLocation}%` }}
+        >
           <ArrowDown strokeWidth={2} />
         </div>
       )}
@@ -52,11 +58,33 @@ const AnalysisLevelBar = ({
   normLowerIncluded = true,
   normUpperIncluded = true,
   level,
+  results,
 }: {
   normLowerIncluded?: boolean;
   normUpperIncluded?: boolean;
   level: AnalysisResultLevel;
+  results: UserAnalysisElement;
 }) => {
+
+  const { norm_lower: lower, norm_upper: upper, response_value: value } = results;
+  const arrowLocation = useMemo(() => {
+    if (value < lower!) {
+      return 0;
+    }
+    
+    if (normLowerIncluded || normUpperIncluded) {
+      return 50;
+    }
+
+    const calculated = ((value - lower!) / (upper! - lower!)) * 100;
+    
+    if (calculated > 100) {
+      return 100;
+    }
+    
+    return calculated;
+  }, [value, upper, lower]);
+
   return (
     <div className="mt-4 flex h-3 w-[35%] max-w-[360px] gap-1 sm:mt-0">
       {normLowerIncluded && (
@@ -73,8 +101,9 @@ const AnalysisLevelBar = ({
       <Level
         isFirst={!normLowerIncluded}
         isLast={!normUpperIncluded}
-        isActive={level === AnalysisResultLevel.NORMAL}
-        color="success"
+        color={level === AnalysisResultLevel.NORMAL ? "success" : "warning"}
+        isActive
+        arrowLocation={arrowLocation}
       />
 
       {normUpperIncluded && (

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { UserAnalysisElement } from '@/packages/features/accounts/src/types/accounts';
 import { format } from 'date-fns';
@@ -39,11 +39,12 @@ const Analysis = ({
   const normUpper = results?.norm_upper || 0;
 
   const [showTooltip, setShowTooltip] = useState(false);
-  const isUnderNorm = value < normLower;
-  const getAnalysisResultLevel = () => {
+  const analysisResultLevel = useMemo(() => {
     if (!results) {
       return null;
     }
+
+    const isUnderNorm = value < normLower;
     if (isUnderNorm) {
       switch (status) {
         case AnalysisStatus.MEDIUM:
@@ -60,7 +61,7 @@ const Analysis = ({
       default:
         return AnalysisResultLevel.NORMAL;
     }
-  };
+  }, [results, value, normLower]);
 
   return (
     <div className="border-border flex flex-col items-center justify-between gap-2 rounded-lg border px-5 px-12 py-3 sm:h-[65px] sm:flex-row sm:gap-0">
@@ -99,9 +100,10 @@ const Analysis = ({
             </div>
           </div>
           <AnalysisLevelBar
+            results={results}
             normLowerIncluded={normLowerIncluded}
             normUpperIncluded={normUpperIncluded}
-            level={getAnalysisResultLevel()!}
+            level={analysisResultLevel!}
           />
         </>
       ) : (

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

@@ -82,6 +82,7 @@ async function AnalysisResultsPage() {
       </div>
       <div className="flex flex-col gap-8">
         {analysisOrders.length > 0 && analysisElements.length > 0 ? analysisOrders.map((analysisOrder) => {
+          const analysisResponse = analysisResponses?.find((response) => response.analysis_order_id === analysisOrder.id);
           const analysisElementIds = getAnalysisElementIds([analysisOrder]);
           const analysisElementsForOrder = analysisElements.filter((element) => analysisElementIds.includes(element.id));
           return (
@@ -98,7 +99,8 @@ async function AnalysisResultsPage() {
               </h5>
               <div className="flex flex-col gap-2">
                 {analysisElementsForOrder.length > 0 ? analysisElementsForOrder.map((analysisElement) => {
-                  const results = analysisResponseElements?.find((element) => element.analysis_element_original_id === analysisElement.analysis_id_original);
+                  const results = analysisResponse?.elements.some((element) => element.analysis_element_original_id === analysisElement.analysis_id_original)
+                    && analysisResponseElements?.find((element) => element.analysis_element_original_id === analysisElement.analysis_id_original);
                   if (!results) {
                     return (
                       <Analysis key={`${analysisOrder.id}-${analysisElement.id}`} analysisElement={analysisElement} />