From 9b50b0f92a3bed572a4a00c9350992497f15f9b7 Mon Sep 17 00:00:00 2001
From: Karli <karli@mountbirch.com>
Date: Mon, 18 Aug 2025 13:58:42 +0300
Subject: [PATCH] feat(MED-123): update dashboard cards for "order analysis"

---
 app/home/(user)/(dashboard)/page.tsx          |  2 +
 .../(user)/_components/dashboard-cards.tsx    | 45 +++++++++++++++++++
 .../_components/order-analyses-cards.tsx      | 33 ++++++++++----
 public/locales/en/dashboard.json              |  8 +++-
 public/locales/et/dashboard.json              |  8 +++-
 5 files changed, 85 insertions(+), 11 deletions(-)
 create mode 100644 app/home/(user)/_components/dashboard-cards.tsx

diff --git a/app/home/(user)/(dashboard)/page.tsx b/app/home/(user)/(dashboard)/page.tsx
index 2f8b287..14d8bff 100644
--- a/app/home/(user)/(dashboard)/page.tsx
+++ b/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'} />
diff --git a/app/home/(user)/_components/dashboard-cards.tsx b/app/home/(user)/_components/dashboard-cards.tsx
new file mode 100644
index 0000000..a24e465
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/home/(user)/_components/order-analyses-cards.tsx b/app/home/(user)/_components/order-analyses-cards.tsx
index 9a9d8d8..ea58399 100644
--- a/app/home/(user)/_components/order-analyses-cards.tsx
+++ b/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">
-            <div className='flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
+          <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'>
               <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>
       ))}
diff --git a/public/locales/en/dashboard.json b/public/locales/en/dashboard.json
index 3893ce4..8563680 100644
--- a/public/locales/en/dashboard.json
+++ b/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"
+      }
+    }
 }
\ No newline at end of file
diff --git a/public/locales/et/dashboard.json b/public/locales/et/dashboard.json
index 69df7e4..810c148 100644
--- a/public/locales/et/dashboard.json
+++ b/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"
+      }
+    }
 }
\ No newline at end of file