feat(MED-123): update dashboard cards for "order analysis"

app/home/(user)/(dashboard)/page.tsx

@@ -8,6 +8,7 @@ import { toTitleCase } from '@/lib/utils';
 
 import Dashboard from '../_components/dashboard';
 import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
+import DashboardCards from '../_components/dashboard-cards';
 
 export const generateMetadata = async () => {
   const i18n = await createI18nServerInstance();
@@ -26,6 +27,7 @@ async function UserHomePage() {
 
   return (
     <>
+      <DashboardCards />
       <PageHeader title={
         <>
           <Trans i18nKey={'common:welcome'} />

app/home/(user)/_components/dashboard-cards.tsx

@@ -0,0 +1,45 @@
+import { Trans } from '@kit/ui/trans';
+import {
+  Card,
+  CardHeader,
+  CardDescription,
+  CardFooter,
+} from '@kit/ui/card';
+
+import Link from 'next/link';
+import { Button } from '@kit/ui/button';
+import { ChevronRight, HeartPulse } from 'lucide-react';
+
+export default function DashboardCards() {
+  return (
+    <div className='flex gap-4 lg:px-4'>
+      <Card
+        variant="gradient-success"
+        className="flex flex-col justify-between"
+      >
+        <CardHeader className="flex-row">
+          <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>
+          <div className='ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
+            <Link href='/home/order-analysis'>
+              <Button size="icon" variant="outline" className="px-2 text-black">
+                <ChevronRight className="size-4 stroke-2" />
+              </Button>
+            </Link>
+          </div>
+        </CardHeader>
+        <CardFooter className="flex flex-col items-start gap-2">
+          <h5>
+            <Trans i18nKey='dashboard:heroCard.orderAnalysis.title' />
+          </h5>
+          <CardDescription className="text-primary">
+            <Trans i18nKey='dashboard:heroCard.orderAnalysis.description' />
+          </CardDescription>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

app/home/(user)/_components/order-analyses-cards.tsx

@@ -7,11 +7,13 @@ import {
   Card,
   CardHeader,
   CardFooter,
+  CardDescription,
 } from '@kit/ui/card';
 import { StoreProduct, StoreProductVariant } from '@medusajs/types';
 import { useState } from 'react';
 import { handleAddToCart } from '~/lib/services/medusaCart.service';
 import { useRouter } from 'next/navigation';
+import { InfoTooltip } from '~/components/ui/info-tooltip';
 
 export default function OrderAnalysesCards({
   analyses,
@@ -21,7 +23,7 @@ export default function OrderAnalysesCards({
   countryCode: string;
 }) {
   const router = useRouter();
-  
+
   const [isAddingToCart, setIsAddingToCart] = useState(false);
   const handleSelect = async (selectedVariant: StoreProductVariant) => {
     if (!selectedVariant?.id || isAddingToCart) return null
@@ -44,15 +46,22 @@ export default function OrderAnalysesCards({
     <div className="grid grid-cols-3 gap-6 mt-4">
       {analyses.map(({
         title,
-        variants
+        variants,
+        description,
+        subtitle,
       }) => (
         <Card
           key={title}
           variant="gradient-success"
           className="flex flex-col justify-between"
         >
-          <CardHeader className="items-end-safe">
+          <CardHeader className="flex-row">
-            <div className='flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
+            <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>
+            <div className='ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
               <Button
                 size="icon"
                 variant="outline"
@@ -64,14 +73,20 @@ export default function OrderAnalysesCards({
             </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>
               {title}
+              {description && (
+                <>
+                  {'  '}
+                  <InfoTooltip content={`${description}`} />
+                </>
+              )}
             </h5>
+            {subtitle && (
+              <CardDescription>
+                {subtitle}
+              </CardDescription>
+            )}
           </CardFooter>
         </Card>
       ))}

public/locales/en/dashboard.json

@@ -12,5 +12,11 @@
     "cholesterol": "Cholesterol",
     "ldlCholesterol": "LDL Cholesterol",
     "smoking": "Smoking",
-    "recommendedForYou": "Recommended for you"
+    "recommendedForYou": "Recommended for you",
+    "heroCard": {
+      "orderAnalysis": {
+        "title": "Order analysis",
+        "description": "Select an analysis to get started"
+      }
+    }
 }

public/locales/et/dashboard.json

@@ -12,5 +12,11 @@
     "cholesterol": "Kolesterool",
     "ldlCholesterol": "LDL kolesterool",
     "smoking": "Suitsetamine",
-    "recommendedForYou": "Soovitused sulle"
+    "recommendedForYou": "Soovitused sulle",
+    "heroCard": {
+      "orderAnalysis": {
+        "title": "Telli analüüs",
+        "description": "Telli endale sobiv analüüs"
+      }
+    }
 }