feat(MED-105): update analysis results page

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

@@ -19,7 +19,7 @@ const Level = ({
   isLast = false,
 }: {
   isActive?: boolean;
-  color: 'destructive' | 'success' | 'warning';
+  color: 'destructive' | 'success' | 'warning' | 'gray-200';
   isFirst?: boolean;
   isLast?: boolean;
 }) => {
@@ -40,6 +40,14 @@ const Level = ({
   );
 };
 
+export const AnalysisLevelBarSkeleton = () => {
+  return (
+    <div className="mt-4 flex h-3 max-w-[360px] w-[35%] gap-1 sm:mt-0">
+      <Level color="gray-200" />
+    </div>
+  );
+};
+
 const AnalysisLevelBar = ({
   normLowerIncluded = true,
   normUpperIncluded = true,
@@ -50,7 +58,7 @@ const AnalysisLevelBar = ({
   level: AnalysisResultLevel;
 }) => {
   return (
-    <div className="mt-4 flex h-3 w-full max-w-[360px] gap-1 sm:mt-0">
+    <div className="mt-4 flex h-3 max-w-[360px] w-[35%] gap-1 sm:mt-0">
       {normLowerIncluded && (
         <>
           <Level

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

@@ -6,7 +6,10 @@ import { Info } from 'lucide-react';
 
 import { cn } from '@kit/ui/utils';
 
-import AnalysisLevelBar, { AnalysisResultLevel } from './analysis-level-bar';
+import AnalysisLevelBar, { AnalysisLevelBarSkeleton, AnalysisResultLevel } from './analysis-level-bar';
+import { UserAnalysisElement } from '@/packages/features/accounts/src/types/accounts';
+import { AnalysisElement } from '~/lib/services/analysis-element.service';
+import { Trans } from '@kit/ui/trans';
 
 export enum AnalysisStatus {
   NORMAL = 0,
@@ -15,31 +18,27 @@ export enum AnalysisStatus {
 }
 
 const Analysis = ({
-  analysis: {
-    name,
-    status,
-    unit,
-    value,
-    normLowerIncluded,
-    normUpperIncluded,
-    normLower,
-    normUpper,
-  },
+  analysisElement,
+  results,
 }: {
-  analysis: {
-    name: string;
-    status: AnalysisStatus;
-    unit: string;
-    value: number;
-    normLowerIncluded: boolean;
-    normUpperIncluded: boolean;
-    normLower: number;
-    normUpper: number;
-  };
+  analysisElement: AnalysisElement;
+  results?: UserAnalysisElement;
 }) => {
+  const name = analysisElement.analysis_name_lab || '';
+  const status = results?.norm_status || AnalysisStatus.NORMAL;
+  const value = results?.response_value || 0;
+  const unit = results?.unit || '';
+  const normLowerIncluded = results?.norm_lower_included || false;
+  const normUpperIncluded = results?.norm_upper_included || false;
+  const normLower = results?.norm_lower || 0;
+  const normUpper = results?.norm_upper || 0;
+
   const [showTooltip, setShowTooltip] = useState(false);
   const isUnderNorm = value < normLower;
   const getAnalysisResultLevel = () => {
+    if (!results) {
+      return null;
+    }
     if (isUnderNorm) {
       switch (status) {
         case AnalysisStatus.MEDIUM:
@@ -59,7 +58,7 @@ const Analysis = ({
   };
 
   return (
-    <div className="border-border grid grid-cols-2 items-center justify-between rounded-lg border px-5 py-3 sm:flex">
+    <div className="border-border items-center justify-between rounded-lg border px-5 py-3 sm:h-[65px] flex flex-col sm:flex-row px-12 gap-2 sm:gap-0">
       <div className="flex items-center gap-2 font-semibold">
         {name}
         <div
@@ -78,19 +77,35 @@ const Analysis = ({
           </div>
         </div>
       </div>
-      <div className="flex items-center gap-3">
-        <div className="font-semibold">{value}</div>
-        <div className="text-muted-foreground text-sm">{unit}</div>
-      </div>
-      <div className="text-muted-foreground mt-4 flex gap-2 text-center text-sm sm:mt-0 sm:block sm:gap-0">
-        {normLower} - {normUpper}
-        <div>Normaalne vahemik</div>
-      </div>
-      <AnalysisLevelBar
-        normLowerIncluded={normLowerIncluded}
-        normUpperIncluded={normUpperIncluded}
-        level={getAnalysisResultLevel()}
-      />
+      {results ? (
+        <>
+          <div className="flex items-center gap-3 sm:ml-auto">
+            <div className="font-semibold">{value}</div>
+            <div className="text-muted-foreground text-sm">{unit}</div>
+          </div>
+          <div className="text-muted-foreground flex flex-col-reverse gap-2 text-center text-sm sm:block sm:gap-0 mx-8">
+            {normLower} - {normUpper}
+            <div>
+              <Trans i18nKey="analysis-results:results.range.normal" />
+            </div>
+          </div>
+          <AnalysisLevelBar
+            normLowerIncluded={normLowerIncluded}
+            normUpperIncluded={normUpperIncluded}
+            level={getAnalysisResultLevel()!}
+          />
+        </>
+      ) : (
+        <>
+          <div className="flex items-center gap-3 sm:ml-auto">
+            <div className="font-semibold">
+              <Trans i18nKey="analysis-results:waitingForResults" />
+            </div>
+          </div>
+          <div className="w-[60px] mx-8"></div>
+          <AnalysisLevelBarSkeleton />
+        </>
+      )}
     </div>
   );
 };