feat(MED-122): update analysis packages page, pageheader

2025-07-10 11:34:08 +03:00
parent 0af3823148
commit bbcf0b6d83
23 changed files with 382 additions and 140 deletions
--- a/app/home/(user)/(dashboard)/booking/page.tsx
+++ b/app/home/(user)/(dashboard)/booking/page.tsx
@@ -0,0 +1,34 @@
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+import { HomeLayoutPageHeader } from '../../_components/home-page-header';
+import OrderCards from '../../_components/order-cards';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('booking:title');
+
+  return {
+    title,
+  };
+};
+
+function BookingPage() {
+  return (
+    <>
+      <HomeLayoutPageHeader
+        title={<Trans i18nKey={'booking:title'} />}
+        description={<Trans i18nKey={'booking:description'} />}
+      />
+
+      <PageBody>
+        <OrderCards />
+      </PageBody>
+    </>
+  );
+}
+
+export default withI18n(BookingPage);
--- a/app/home/(user)/(dashboard)/order-analysis-package/page.tsx
+++ b/app/home/(user)/(dashboard)/order-analysis-package/page.tsx
@@ -0,0 +1,67 @@
+import { Scale } from 'lucide-react';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+import { Button } from '@kit/ui/button';
+import SelectAnalysisPackages, { IAnalysisPackage } from '@/components/select-analysis-packages';
+import { PageBody } from '@kit/ui/page';
+
+import ComparePackagesModal from '../../_components/compare-packages-modal';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('order-analysis-package:title');
+
+  return {
+    title,
+  };
+};
+
+const dummyCards = [
+  {
+    titleKey: 'product:standard.label',
+    price: 40,
+    nrOfAnalyses: 4,
+    tagColor: 'bg-cyan',
+    descriptionKey: 'marketing:standard.description',
+  },
+  {
+    titleKey: 'product:standardPlus.label',
+    price: 85,
+    nrOfAnalyses: 10,
+
+    tagColor: 'bg-warning',
+    descriptionKey: 'product:standardPlus.description',
+  },
+  {
+    titleKey: 'product:premium.label',
+    price: 140,
+    nrOfAnalyses: '12+',
+
+    tagColor: 'bg-purple',
+    descriptionKey: 'product:premium.description',
+  },
+] satisfies IAnalysisPackage[];
+
+async function OrderAnalysisPackagePage() {
+  const { t } = await createI18nServerInstance();
+
+  return (
+    <PageBody>
+      <div className="space-y-3 text-center">
+        <h3>{t('marketing:selectPackage')}</h3>
+        <ComparePackagesModal
+          triggerElement={
+            <Button variant="secondary" className="gap-2">
+              {t('marketing:comparePackages')}
+              <Scale className="size-4 stroke-[1.5px]" />
+            </Button>
+          }
+        />
+      </div>
+      <SelectAnalysisPackages analysisPackages={dummyCards} />
+    </PageBody>
+  );
+}
+
+export default withI18n(OrderAnalysisPackagePage);
--- a/app/home/(user)/(dashboard)/page.tsx
+++ b/app/home/(user)/(dashboard)/page.tsx
@@ -1,15 +1,14 @@
-import { use } from 'react';
+import { redirect } from 'next/navigation';

-import { PageBody } from '@kit/ui/page';
-import { Trans } from '@kit/ui/trans';

 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
+import { PageBody, PageHeader } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+import { getSupabaseServerClient } from '@/packages/supabase/src/clients/server-client';
+import { toTitleCase } from '@/lib/utils';

 import Dashboard from '../_components/dashboard';
-// local imports
-import { HomeLayoutPageHeader } from '../_components/home-page-header';
-import { loadUserWorkspace } from '../_lib/server/load-user-workspace';

 export const generateMetadata = async () => {
  const i18n = await createI18nServerInstance();
@@ -20,15 +19,24 @@ export const generateMetadata = async () => {
  };
 };

-function UserHomePage() {
-  const { tempVisibleAccounts } = use(loadUserWorkspace());
+async function UserHomePage() {
+  const account = await getAccount();
+  if (!account) {
+    redirect('/');
+  }
+
  return (
    <>
-      <HomeLayoutPageHeader
-        title={<Trans i18nKey={'common:routes.home'} />}
-        description={<></>}
+      <PageHeader title={
+        <>
+          <Trans i18nKey={'common:welcome'} />
+          {account.name ? `, ${toTitleCase(account.name)}` : ''}
+        </>
+      }
+        description={
+          <Trans i18nKey={'dashboard:recentlyCheckedDescription'} />
+        }
      />
-
      <PageBody>
        <Dashboard />
      </PageBody>
@@ -36,4 +44,21 @@ function UserHomePage() {
  );
 }

+async function getAccount() {
+  const client = getSupabaseServerClient();
+  
+  const {
+    data: { user },
+  } = await client.auth.getUser();
+
+  const accountResponse = await client
+    .schema('medreport')
+    .from('accounts')
+    .select('name')
+    .eq('primary_owner_user_id', user!.id)
+    .single();
+
+  return accountResponse.data;
+}
+
 export default withI18n(UserHomePage);
--- a/app/home/(user)/_components/dashboard.tsx
+++ b/app/home/(user)/_components/dashboard.tsx
@@ -1,7 +1,7 @@
 'use client';

+import Link from 'next/link';
 import { InfoTooltip } from '@/components/ui/info-tooltip';
-import { toTitleCase } from '@/lib/utils';
 import { BlendingModeIcon, RulerHorizontalIcon } from '@radix-ui/react-icons';
 import {
  Activity,
@@ -15,8 +15,6 @@ import {
  User,
 } from 'lucide-react';

-import { usePersonalAccountData } from '@kit/accounts/hooks/use-personal-account-data';
-import { useUserWorkspace } from '@kit/accounts/hooks/use-user-workspace';
 import { Button } from '@kit/ui/button';
 import {
  Card,
@@ -26,7 +24,6 @@ import {
  CardHeader,
  CardProps,
 } from '@kit/ui/card';
-import { PageDescription } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';

@@ -107,6 +104,7 @@ const dummyRecommendations = [
    tooltipContent: 'Selgitus',
    price: '20,00 €',
    buttonText: 'Telli',
+    href: '/home/booking',
  },
  {
    icon: <BlendingModeIcon className="size-4" />,
@@ -115,6 +113,7 @@ const dummyRecommendations = [
    tooltipContent: 'Selgitus',
    description: 'LDL-Kolesterool',
    buttonText: 'Broneeri',
+    href: '/home/booking',
  },
  {
    icon: <Droplets />,
@@ -124,24 +123,13 @@ const dummyRecommendations = [
    description: 'Score-Risk 2',
    price: '20,00 €',
    buttonText: 'Telli',
+    href: '/home/booking',
  },
 ];

 export default function Dashboard() {
-  const userWorkspace = useUserWorkspace();
-  const account = usePersonalAccountData(userWorkspace.user.id);
-
  return (
    <>
-      <div>
-        <h4>
-          <Trans i18nKey={'common:welcome'} />
-          {account?.data?.name ? `, ${toTitleCase(account.data.name)}` : ''}
-        </h4>
-        <PageDescription>
-          <Trans i18nKey={'dashboard:recentlyCheckedDescription'} />:
-        </PageDescription>
-      </div>
      <div className="grid auto-rows-fr grid-cols-5 gap-3">
        {dummyCards.map(
          ({
@@ -196,6 +184,7 @@ export default function Dashboard() {
                tooltipContent,
                price,
                buttonText,
+                href,
              },
              index,
            ) => {
@@ -222,9 +211,17 @@ export default function Dashboard() {
                  </div>
                  <div className="grid w-36 auto-rows-fr grid-cols-2 items-center gap-4">
                    <p className="text-sm font-medium"> {price}</p>
-                    <Button size="sm" variant="secondary">
-                      {buttonText}
-                    </Button>
+                    {href ? (
+                      <Link href={href}>
+                        <Button size="sm" variant="secondary">
+                          {buttonText}
+                        </Button>
+                      </Link>
+                    ) : (
+                      <Button size="sm" variant="secondary">
+                        {buttonText}
+                      </Button>
+                    )}
                  </div>
                </div>
              );
--- a/app/home/(user)/_components/home-page-header.tsx
+++ b/app/home/(user)/_components/home-page-header.tsx
@@ -7,6 +7,6 @@ export function HomeLayoutPageHeader(
  }>,
 ) {
  return (
-    <PageHeader description={props.description}>{props.children}</PageHeader>
+    <PageHeader description={props.description} title={props.title}>{props.children}</PageHeader>
  );
 }
--- a/app/home/(user)/_components/order-cards.tsx
+++ b/app/home/(user)/_components/order-cards.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { ChevronRight, HeartPulse } from 'lucide-react';
+import Link from 'next/link';
+
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardHeader,
+  CardDescription,
+  CardProps,
+  CardFooter,
+} from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@/lib/utils';
+
+const dummyCards = [
+  {
+    title: 'booking:analysisPackages.title',
+    description: 'booking:analysisPackages.description',
+    descriptionColor: 'text-primary',
+    icon: (
+      <Link href={'/home/order-analysis-package'}>
+        <Button size="icon" variant="outline" className="px-2 text-black">
+          <ChevronRight className="size-4 stroke-2" />
+        </Button>
+      </Link>
+    ),
+    cardVariant: 'gradient-success' as CardProps['variant'],
+    iconBg: 'bg-warning',
+  },
+];
+
+export default function OrderCards() {
+  return (
+    <div className="grid grid-cols-3 gap-6 mt-4">
+      {dummyCards.map(({
+        title,
+        description,
+        icon,
+        cardVariant,
+        descriptionColor,
+        iconBg,
+      }) => (
+        <Card
+          key={title}
+          variant={cardVariant}
+          className="flex flex-col justify-between"
+        >
+          <CardHeader className="items-end-safe">
+            <div
+              className={cn(
+                'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
+                iconBg,
+              )}
+            >
+              {icon}
+            </div>
+          </CardHeader>
+          <CardFooter className="flex flex-col items-start gap-2">
+            <div
+              className={'flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-primary\/10 mb-6'}
+            >
+              <HeartPulse className="size-4 fill-green-500" />
+            </div>
+            <h5>
+              <Trans i18nKey={title} />
+            </h5>
+            <CardDescription className={descriptionColor}>
+              <Trans i18nKey={description} />
+            </CardDescription>
+          </CardFooter>
+        </Card>
+      ))}
+    </div>
+  );
+}
--- a/app/select-package/page.tsx
+++ b/app/select-package/page.tsx
@@ -1,24 +1,15 @@
-import Image from 'next/image';
 import Link from 'next/link';

 import { CaretRightIcon } from '@radix-ui/react-icons';
 import { Scale } from 'lucide-react';

 import { Button } from '@kit/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-} from '@kit/ui/card';

 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
+import SelectAnalysisPackages from '@/components/select-analysis-packages';

 import { MedReportLogo } from '../../components/med-report-logo';
-import { PackageHeader } from '../../components/package-header';
-import { ButtonTooltip } from '../../components/ui/button-tooltip';
 import pathsConfig from '../../config/paths.config';
 import ComparePackagesModal from '../home/(user)/_components/compare-packages-modal';

@@ -30,34 +21,8 @@ export const generateMetadata = async () => {
  };
 };

-const dummyCards = [
-  {
-    titleKey: 'product:standard.label',
-    price: 40,
-    nrOfAnalyses: 4,
-    tagColor: 'bg-cyan',
-    descriptionKey: 'marketing:standard.description',
-  },
-  {
-    titleKey: 'product:standardPlus.label',
-    price: 85,
-    nrOfAnalyses: 10,
-
-    tagColor: 'bg-warning',
-    descriptionKey: 'product:standardPlus.description',
-  },
-  {
-    titleKey: 'product:premium.label',
-    price: 140,
-    nrOfAnalyses: '12+',
-
-    tagColor: 'bg-purple',
-    descriptionKey: 'product:premium.description',
-  },
-];
-
 async function SelectPackagePage() {
-  const { t, language } = await createI18nServerInstance();
+  const { t } = await createI18nServerInstance();

  return (
    <div className="container mx-auto my-24 flex flex-col items-center space-y-12">
@@ -73,57 +38,13 @@ async function SelectPackagePage() {
          }
        />
      </div>
-      <div className="grid grid-cols-3 gap-6">
-        {dummyCards.map(
-          (
-            { titleKey, price, nrOfAnalyses, tagColor, descriptionKey },
-            index,
-          ) => {
-            return (
-              <Card key={index}>
-                <CardHeader className="relative">
-                  <ButtonTooltip
-                    content="Content pending"
-                    className="absolute top-5 right-5 z-10"
-                  />
-                  <Image
-                    src="/assets/card-image.png"
-                    alt="background"
-                    width={326}
-                    height={195}
-                    className="max-h-48 w-full opacity-10"
-                  />
-                </CardHeader>
-                <CardContent className="space-y-1 text-center">
-                  <PackageHeader
-                    title={t(titleKey)}
-                    tagColor={tagColor}
-                    analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
-                    language={language}
-                    price={price}
-                  />
-                  <CardDescription>{t(descriptionKey)}</CardDescription>
-                </CardContent>
-                <CardFooter>
-                  <Button className="w-full">
-                    {t('marketing:selectThisPackage')}
-                  </Button>
-                </CardFooter>
-              </Card>
-            );
-          },
-        )}
-        <div className="col-span-3 grid grid-cols-subgrid">
-          <div className="col-start-2 justify-self-center-safe">
-            <Link href={pathsConfig.app.home}>
-              <Button variant="secondary" className="align-center">
-                {t('marketing:notInterestedInAudit')}{' '}
-                <CaretRightIcon className="size-4" />
-              </Button>
-            </Link>
-          </div>
-        </div>
-      </div>
+      <SelectAnalysisPackages />
+      <Link href={pathsConfig.app.home}>
+        <Button variant="secondary" className="align-center">
+          {t('marketing:notInterestedInAudit')}{' '}
+          <CaretRightIcon className="size-4" />
+        </Button>
+      </Link>
    </div>
  );
 }