Add user analysis view bars + nested element logic to doctor view also

app/doctor/_components/analysis-doctor.tsx

@@ -2,7 +2,6 @@
 
 import React, { ReactElement, ReactNode, useMemo, useState } from 'react';
 
-import { UserAnalysisElement } from '@/packages/features/accounts/src/types/accounts';
 import { format } from 'date-fns';
 import { Info } from 'lucide-react';
 
@@ -10,23 +9,24 @@ import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
 import { AnalysisElement } from '~/lib/services/analysis-element.service';
+import { NestedAnalysisElement } from '@/packages/features/doctor/src/lib/server/schema/doctor-analysis-detail-view.schema';
 
 import AnalysisLevelBar, {
   AnalysisLevelBarSkeleton,
   AnalysisResultLevel,
 } from './analysis-level-bar';
 
-export type AnalysisResultForDisplay = Pick<
-  UserAnalysisElement,
-  | 'norm_status'
-  | 'response_value'
-  | 'unit'
-  | 'norm_lower_included'
-  | 'norm_upper_included'
-  | 'norm_lower'
-  | 'norm_upper'
-  | 'response_time'
->;
+export type AnalysisResultForDisplay = {
+  norm_status?: number | null;
+  response_value?: number | null;
+  unit?: string | null;
+  norm_lower_included?: boolean | null;
+  norm_upper_included?: boolean | null;
+  norm_lower?: number | null;
+  norm_upper?: number | null;
+  response_time?: string | null;
+  nestedElements?: NestedAnalysisElement[];
+};
 
 const AnalysisDoctor = ({
   analysisElement,
@@ -72,6 +72,12 @@ const AnalysisDoctor = ({
     return `${normLower ?? '...'} - ${normUpper ?? '...'}`;
   }, [normLower, normUpper]);
 
+  const nestedElements = results?.nestedElements ?? null;
+  const hasNestedElements =
+    Array.isArray(nestedElements) && nestedElements.length > 0;
+
+  const isAnalysisLevelBarHidden = isCancelled || !results || hasNestedElements;
+
   return (
     <div className="border-border rounded-lg border px-5">
       <div className="flex flex-col items-center justify-between gap-2 py-3 sm:h-[65px] sm:flex-row sm:gap-0">
@@ -101,7 +107,7 @@ const AnalysisDoctor = ({
             </div>
           )}
         </div>
-        {results ? (
+        {isAnalysisLevelBarHidden ? null : (
           <>
             <div className="flex items-center gap-3 sm:ml-auto">
               <div className="font-semibold">{value}</div>
@@ -120,17 +126,33 @@ const AnalysisDoctor = ({
             />
             {endIcon || <div className="mx-2 w-4" />}
           </>
-        ) : isCancelled ? null : (
-          <>
-            <div className="flex items-center gap-3 sm:ml-auto">
-              <div className="font-semibold">
-                <Trans i18nKey="analysis-results:waitingForResults" />
-              </div>
-            </div>
-            <div className="mx-8 w-[60px]"></div>
-            <AnalysisLevelBarSkeleton />
-          </>
         )}
+        {(() => {
+          // If parent has nested elements, don't show anything
+          if (hasNestedElements) {
+            return null;
+          }
+          // If we're showing the level bar, don't show waiting
+          if (!isAnalysisLevelBarHidden) {
+            return null;
+          }
+          // If cancelled, don't show waiting
+          if (isCancelled) {
+            return null;
+          }
+          // Otherwise, show waiting for results
+          return (
+            <>
+              <div className="flex items-center gap-3 sm:ml-auto">
+                <div className="font-semibold">
+                  <Trans i18nKey="analysis-results:waitingForResults" />
+                </div>
+              </div>
+              <div className="mx-8 w-[60px]"></div>
+              <AnalysisLevelBarSkeleton />
+            </>
+          );
+        })()}
       </div>
     </div>
   );