MED-89: add analysis view with doctor summary (#68)

* add analysis view with doctor summary

* remove console.log, also return null if analysis data missing

* replace orders table eye with button

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

@@ -0,0 +1,107 @@
+import Link from 'next/link';
+
+import { ButtonTooltip } from '@kit/shared/components/ui/button-tooltip';
+import { pathsConfig } from '@kit/shared/config';
+import { Button } from '@kit/ui/button';
+import { PageBody, PageHeader } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { loadCurrentUserAccount } from '~/home/(user)/_lib/server/load-user-account';
+import { loadUserAnalysis } from '~/home/(user)/_lib/server/load-user-analysis';
+import {
+  PageViewAction,
+  createPageViewLog,
+} from '~/lib/services/audit/pageView.service';
+
+import Analysis from '../_components/analysis';
+
+export default async function AnalysisResultsPage({
+  params,
+}: {
+  params: Promise<{
+    id: string;
+  }>;
+}) {
+  const account = await loadCurrentUserAccount();
+
+  const { id: analysisResponseId } = await params;
+
+  const analysisResponse = await loadUserAnalysis(Number(analysisResponseId));
+
+  if (!account?.id || !analysisResponse) {
+    return null;
+  }
+
+  await createPageViewLog({
+    accountId: account.id,
+    action: PageViewAction.VIEW_ANALYSIS_RESULTS,
+  });
+
+  return (
+    <>
+      <PageHeader />
+      <PageBody className="gap-4">
+        <div className="mt-8 flex flex-col justify-between gap-4 sm:flex-row sm:items-center sm:gap-0">
+          <div>
+            <h4>
+              <Trans i18nKey="analysis-results:pageTitle" />
+            </h4>
+            <p className="text-muted-foreground text-sm">
+              {analysisResponse?.elements &&
+              analysisResponse.elements?.length > 0 ? (
+                <Trans i18nKey="analysis-results:description" />
+              ) : (
+                <Trans i18nKey="analysis-results:descriptionEmpty" />
+              )}
+            </p>
+          </div>
+          <Button asChild>
+            <Link href={pathsConfig.app.orderAnalysisPackage}>
+              <Trans i18nKey="analysis-results:orderNewAnalysis" />
+            </Link>
+          </Button>
+        </div>
+        <div className="flex flex-col gap-4">
+          <h4>
+            <Trans
+              i18nKey="analysis-results:orderTitle"
+              values={{ orderNumber: analysisResponse.order.medusa_order_id }}
+            />
+          </h4>
+          <h5>
+            <Trans
+              i18nKey={`orders:status.${analysisResponse.order.status}`}
+            />
+            <ButtonTooltip
+              content={`${analysisResponse.order.created_at ? new Date(analysisResponse?.order?.created_at).toLocaleString() : ''}`}
+              className="ml-6"
+            />
+          </h5>
+        </div>
+        {analysisResponse?.summary?.value && (
+          <div>
+            <strong>
+              <Trans i18nKey="account:doctorAnalysisSummary" />
+            </strong>
+            <p>{analysisResponse.summary.value}</p>
+          </div>
+        )}
+        <div className="flex flex-col gap-2">
+          {analysisResponse.elements ? (
+            analysisResponse.elements.map((element, index) => (
+              <Analysis
+                key={index}
+                analysisElement={{ analysis_name_lab: element.analysis_name }}
+                results={element}
+              />
+            ))
+          ) : (
+            <div className="text-muted-foreground text-sm">
+              <Trans i18nKey="analysis-results:noAnalysisElements" />
+            </div>
+          )}
+        </div>
+      </PageBody>
+    </>
+  );
+}

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

@@ -1,131 +0,0 @@
-import Link from 'next/link';
-import { redirect } from 'next/navigation';
-
-import { loadCurrentUserAccount } from '@/app/home/(user)/_lib/server/load-user-account';
-import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
-import { withI18n } from '@/lib/i18n/with-i18n';
-
-import { Trans } from '@kit/ui/makerkit/trans';
-import { PageBody } from '@kit/ui/page';
-import { Button } from '@kit/ui/shadcn/button';
-
-import { pathsConfig } from '@kit/shared/config';
-
-import { getAnalysisElements } from '~/lib/services/analysis-element.service';
-import {
-  PageViewAction,
-  createPageViewLog,
-} from '~/lib/services/audit/pageView.service';
-import { AnalysisOrder, getAnalysisOrders } from '~/lib/services/order.service';
-import { ButtonTooltip } from '@kit/shared/components/ui/button-tooltip';
-
-import { loadUserAnalysis } from '../../_lib/server/load-user-analysis';
-import Analysis from './_components/analysis';
-
-export const generateMetadata = async () => {
-  const i18n = await createI18nServerInstance();
-  const title = i18n.t('analysis-results:pageTitle');
-
-  return {
-    title,
-  };
-};
-
-async function AnalysisResultsPage() {
-  const account = await loadCurrentUserAccount();
-  if (!account) {
-    throw new Error('Account not found');
-  }
-
-  const analysisResponses = await loadUserAnalysis();
-  const analysisResponseElements = analysisResponses?.flatMap(
-    ({ elements }) => elements,
-  );
-
-  const analysisOrders = await getAnalysisOrders().catch(() => null);
-
-  if (!analysisOrders) {
-    redirect(pathsConfig.auth.signIn);
-  }
-
-  await createPageViewLog({
-    accountId: account.id,
-    action: PageViewAction.VIEW_ANALYSIS_RESULTS,
-  });
-
-  const getAnalysisElementIds = (analysisOrders: AnalysisOrder[]) => [
-    ...new Set(analysisOrders?.flatMap((order) => order.analysis_element_ids).filter(Boolean) as number[]),
-  ];
-
-  const analysisElementIds = getAnalysisElementIds(analysisOrders);
-  const analysisElements = await getAnalysisElements({ ids: analysisElementIds });
-
-  return (
-    <PageBody className="gap-4">
-      <div className="mt-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0">
-        <div>
-          <h4>
-            <Trans i18nKey="analysis-results:pageTitle" />
-          </h4>
-          <p className="text-muted-foreground text-sm">
-            {analysisResponses && analysisResponses.length > 0 ? (
-              <Trans i18nKey="analysis-results:description" />
-            ) : (
-              <Trans i18nKey="analysis-results:descriptionEmpty" />
-            )}
-          </p>
-        </div>
-        <Button asChild>
-          <Link href={pathsConfig.app.orderAnalysisPackage}>
-            <Trans i18nKey="analysis-results:orderNewAnalysis" />
-          </Link>
-        </Button>
-      </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 (
-            <div key={analysisOrder.id} className="flex flex-col gap-4">
-              <h4>
-                <Trans i18nKey="analysis-results:orderTitle" values={{ orderNumber: analysisOrder.medusa_order_id }} />
-              </h4>
-              <h5>
-                <Trans i18nKey={`orders:status.${analysisOrder.status}`} />
-                <ButtonTooltip
-                  content={`${new Date(analysisOrder.created_at).toLocaleString()}`}
-                  className="ml-6"
-                />
-              </h5>
-              <div className="flex flex-col gap-2">
-                {analysisElementsForOrder.length > 0 ? analysisElementsForOrder.map((analysisElement) => {
-                  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} isCancelled={analysisOrder.status === 'CANCELLED'}/>
-                    );
-                  }
-                  return (
-                    <Analysis key={`${analysisOrder.id}-${analysisElement.id}`} analysisElement={analysisElement} results={results} />
-                  );
-                }) : (
-                  <div className="text-muted-foreground text-sm">
-                    <Trans i18nKey="analysis-results:noAnalysisElements" />
-                  </div>
-                )}
-              </div>
-            </div>
-          );
-        }) : (
-          <div className="text-muted-foreground text-sm">
-            <Trans i18nKey="analysis-results:noAnalysisOrders" />
-          </div>
-        )}
-      </div>
-    </PageBody>
-  );
-}
-
-export default withI18n(AnalysisResultsPage);

app/home/(user)/_components/orders/order-items-table.tsx

@@ -1,22 +1,32 @@
 'use client';
 
-import { Trans } from '@kit/ui/trans';
+import { useRouter } from 'next/navigation';
+
+import { StoreOrderLineItem } from '@medusajs/types';
+import { formatDate } from 'date-fns';
+import { Eye } from 'lucide-react';
+
+import { pathsConfig } from '@kit/shared/config';
+import { Button } from '@kit/ui/button';
 import {
   Table,
   TableBody,
-  TableHead,
-  TableRow,
-  TableHeader,
   TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from '@kit/ui/table';
-import { StoreOrderLineItem } from "@medusajs/types";
+import { Trans } from '@kit/ui/trans';
+
 import { AnalysisOrder } from '~/lib/services/order.service';
-import { formatDate } from 'date-fns';
-import { Eye } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+
 import { logAnalysisResultsNavigateAction } from './actions';
 
-export default function OrderItemsTable({ items, title, analysisOrder }: {
+export default function OrderItemsTable({
+  items,
+  title,
+  analysisOrder,
+}: {
   items: StoreOrderLineItem[];
   title: string;
   analysisOrder: AnalysisOrder;
@@ -29,11 +39,11 @@ export default function OrderItemsTable({ items, title, analysisOrder }: {
 
   const openAnalysisResults = async () => {
     await logAnalysisResultsNavigateAction(analysisOrder.medusa_order_id);
-    router.push(`/home/analysis-results`);
-  }
+    router.push(`${pathsConfig.app.analysisResults}/${analysisOrder.id}`);
+  };
 
   return (
-    <Table className="rounded-lg border border-separate">
+    <Table className="border-separate rounded-lg border">
       <TableHeader className="text-ui-fg-subtle txt-medium-plus">
         <TableRow>
           <TableHead className="px-6">
@@ -45,13 +55,14 @@ export default function OrderItemsTable({ items, title, analysisOrder }: {
           <TableHead className="px-6">
             <Trans i18nKey="orders:table.status" />
           </TableHead>
-          <TableHead className="px-6">
-          </TableHead>
+          <TableHead className="px-6"></TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
         {items
-          .sort((a, b) => (a.created_at ?? "") > (b.created_at ?? "") ? -1 : 1)
+          .sort((a, b) =>
+            (a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1,
+          )
           .map((orderItem) => (
             <TableRow className="w-full" key={orderItem.id}>
               <TableCell className="text-left w-[100%] px-6">
@@ -64,23 +75,18 @@ export default function OrderItemsTable({ items, title, analysisOrder }: {
                 {formatDate(orderItem.created_at, 'dd.MM.yyyy HH:mm')}
               </TableCell>
 
-              <TableCell className="px-6 min-w-[180px]">
+              <TableCell className="min-w-[180px] px-6">
                 <Trans i18nKey={`orders:status.${analysisOrder.status}`} />
               </TableCell>
 
-              <TableCell className="text-right px-6">
-                <span className="flex gap-x-1 justify-end w-[30px]">
-                  <button
-                    className="flex gap-x-1 text-ui-fg-subtle hover:text-ui-fg-base cursor-pointer "
-                    onClick={openAnalysisResults}
-                  >
-                    <Eye />
-                  </button>
-                </span>
+              <TableCell className="px-6 text-right">
+                <Button size="sm" onClick={openAnalysisResults}>
+                  <Trans i18nKey="analysis-results:view" />
+                </Button>
               </TableCell>
             </TableRow>
           ))}
       </TableBody>
     </Table>
-  )
+  );
 }

app/home/(user)/_lib/server/load-user-analyses.ts

@@ -0,0 +1,22 @@
+import { cache } from 'react';
+
+import { createAccountsApi } from '@kit/accounts/api';
+import { UserAnalysis } from '@kit/accounts/types/accounts';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+export type UserAnalyses = Awaited<ReturnType<typeof loadUserAnalyses>>;
+
+/**
+ * @name loadUserAnalyses
+ * @description
+ * Load the user's analyses. It's a cached per-request function that fetches the user workspace data.
+ * It can be used across the server components to load the user workspace data.
+ */
+export const loadUserAnalyses = cache(analysesLoader);
+
+async function analysesLoader(): Promise<UserAnalysis | null> {
+  const client = getSupabaseServerClient();
+  const api = createAccountsApi(client);
+
+  return api.getUserAnalyses();
+}

app/home/(user)/_lib/server/load-user-analysis.ts

@@ -1,7 +1,7 @@
 import { cache } from 'react';
 
 import { createAccountsApi } from '@kit/accounts/api';
-import { UserAnalysis } from '@kit/accounts/types/accounts';
+import { AnalysisResultDetails } from '@kit/accounts/types/accounts';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 export type UserAnalyses = Awaited<ReturnType<typeof loadUserAnalysis>>;
@@ -9,14 +9,15 @@ export type UserAnalyses = Awaited<ReturnType<typeof loadUserAnalysis>>;
 /**
  * @name loadUserAnalysis
  * @description
- * Load the user's analyses. It's a cached per-request function that fetches the user workspace data.
- * It can be used across the server components to load the user workspace data.
+ * Load the user's analysis based on id. It's a cached per-request function that fetches the user's analysis data.
  */
 export const loadUserAnalysis = cache(analysisLoader);
 
-async function analysisLoader(): Promise<UserAnalysis | null> {
+async function analysisLoader(
+  analysisOrderId: number,
+): Promise<AnalysisResultDetails | null> {
   const client = getSupabaseServerClient();
   const api = createAccountsApi(client);
 
-  return api.getUserAnalysis();
+  return api.getUserAnalysis(analysisOrderId);
 }