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

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>
               );

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>
   );
 }

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>
+  );
+}