MED-151: add profile view and working smoking dashboard card (#71)

* MED-151: add profile view and working smoking dashboard card

* update zod

* move some components to shared

* move some components to shared

* remove console.logs

* remove unused password form components

* only check null for variant

* use pathsconfig

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

@@ -7,6 +7,7 @@ import { Database } from '@/packages/supabase/src/database.types';
 import { BlendingModeIcon, RulerHorizontalIcon } from '@radix-ui/react-icons';
 import {
   Activity,
+  ChevronRight,
   Clock9,
   Droplets,
   Pill,
@@ -16,6 +17,7 @@ import {
 } from 'lucide-react';
 
 import { InfoTooltip } from '@kit/shared/components/ui/info-tooltip';
+import { pathsConfig } from '@kit/shared/config';
 import { getPersonParameters } from '@kit/shared/utils';
 import { Button } from '@kit/ui/button';
 import {
@@ -24,10 +26,12 @@ import {
   CardDescription,
   CardFooter,
   CardHeader,
+  CardProps,
 } from '@kit/ui/card';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
+import { isNil } from 'lodash';
 import { BmiCategory } from '~/lib/types/bmi';
 import {
   bmiFromMetric,
@@ -35,85 +39,101 @@ import {
   getBmiStatus,
 } from '~/lib/utils';
 
+const getCardVariant = (isSuccess: boolean | null): CardProps['variant'] => {
+  if (isSuccess === null) return 'default';
+  if (isSuccess) return 'gradient-success';
+  return 'gradient-destructive';
+};
+
 const cards = ({
   gender,
   age,
   height,
   weight,
   bmiStatus,
+  smoking,
 }: {
   gender?: string;
   age?: number;
   height?: number | null;
   weight?: number | null;
   bmiStatus: BmiCategory | null;
+  smoking?: boolean | null;
 }) => [
-  {
-    title: 'dashboard:gender',
-    description: gender ?? 'dashboard:male',
-    icon: <User />,
-    iconBg: 'bg-success',
-  },
-  {
-    title: 'dashboard:age',
-    description: age ? `${age}` : '-',
-    icon: <Clock9 />,
-    iconBg: 'bg-success',
-  },
-  {
-    title: 'dashboard:height',
-    description: height ? `${height}cm` : '-',
-    icon: <RulerHorizontalIcon className="size-4" />,
-    iconBg: 'bg-success',
-  },
-  {
-    title: 'dashboard:weight',
-    description: weight ? `${weight}kg` : '-',
-    icon: <Scale />,
-    iconBg: 'bg-success',
-  },
-  {
-    title: 'dashboard:bmi',
-    description: bmiFromMetric(weight || 0, height || 0).toString(),
-    icon: <TrendingUp />,
-    iconBg: getBmiBackgroundColor(bmiStatus),
-  },
-  {
-    title: 'dashboard:bloodPressure',
-    description: '-',
-    icon: <Activity />,
-    iconBg: 'bg-warning',
-  },
-  {
-    title: 'dashboard:cholesterol',
-    description: '-',
-    icon: <BlendingModeIcon className="size-4" />,
-    iconBg: 'bg-destructive',
-  },
-  {
-    title: 'dashboard:ldlCholesterol',
-    description: '-',
-    icon: <Pill />,
-    iconBg: 'bg-warning',
-  },
-  // {
-  //   title: 'Score 2',
-  //   description: 'Normis',
-  //   icon: <LineChart />,
-  //   iconBg: 'bg-success',
-  // },
-  // {
-  //   title: 'dashboard:smoking',
-  //   description: 'dashboard:respondToQuestion',
-  //   descriptionColor: 'text-primary',
-  //   icon: (
-  //     <Button size="icon" variant="outline" className="px-2 text-black">
-  //       <ChevronRight className="size-4 stroke-2" />
-  //     </Button>
-  //   ),
-  //   cardVariant: 'gradient-success' as CardProps['variant'],
-  // },
-];
+    {
+      title: 'dashboard:gender',
+      description: gender ?? 'dashboard:male',
+      icon: <User />,
+      iconBg: 'bg-success',
+    },
+    {
+      title: 'dashboard:age',
+      description: age ? `${age}` : '-',
+      icon: <Clock9 />,
+      iconBg: 'bg-success',
+    },
+    {
+      title: 'dashboard:height',
+      description: height ? `${height}cm` : '-',
+      icon: <RulerHorizontalIcon className="size-4" />,
+      iconBg: 'bg-success',
+    },
+    {
+      title: 'dashboard:weight',
+      description: weight ? `${weight}kg` : '-',
+      icon: <Scale />,
+      iconBg: 'bg-success',
+    },
+    {
+      title: 'dashboard:bmi',
+      description: bmiFromMetric(weight || 0, height || 0).toString(),
+      icon: <TrendingUp />,
+      iconBg: getBmiBackgroundColor(bmiStatus),
+    },
+    {
+      title: 'dashboard:bloodPressure',
+      description: '-',
+      icon: <Activity />,
+      iconBg: 'bg-warning',
+    },
+    {
+      title: 'dashboard:cholesterol',
+      description: '-',
+      icon: <BlendingModeIcon className="size-4" />,
+      iconBg: 'bg-destructive',
+    },
+    {
+      title: 'dashboard:ldlCholesterol',
+      description: '-',
+      icon: <Pill />,
+      iconBg: 'bg-warning',
+    },
+    // {
+    //   title: 'Score 2',
+    //   description: 'Normis',
+    //   icon: <LineChart />,
+    //   iconBg: 'bg-success',
+    // },
+    {
+      title: 'dashboard:smoking',
+      description:
+        isNil(smoking)
+          ? 'dashboard:respondToQuestion'
+          : !!smoking
+            ? 'common:yes'
+            : 'common:no',
+      descriptionColor: 'text-primary',
+      icon:
+        isNil(smoking) ? (
+          <Link href={pathsConfig.app.personalAccountSettings}>
+            <Button size="icon" variant="outline" className="px-2 text-black">
+              <ChevronRight className="size-4 stroke-2" />
+            </Button>
+          </Link>
+        ) : null,
+      cardVariant: getCardVariant(isNil(smoking) ? null : !smoking),
+    },
+  ];
 
 const dummyRecommendations = [
   {
@@ -160,8 +180,8 @@ export default function Dashboard({
   const params = getPersonParameters(account.personal_code!);
   const bmiStatus = getBmiStatus(bmiThresholds, {
     age: params?.age || 0,
-    height: account.account_params?.[0]?.height || 0,
-    weight: account.account_params?.[0]?.weight || 0,
+    height: account.accountParams?.height || 0,
+    weight: account.accountParams?.weight || 0,
   });
 
   return (
@@ -170,21 +190,22 @@ export default function Dashboard({
         {cards({
           gender: params?.gender,
           age: params?.age,
-          height: account.account_params?.[0]?.height,
-          weight: account.account_params?.[0]?.weight,
+          height: account.accountParams?.height,
+          weight: account.accountParams?.weight,
           bmiStatus,
+          smoking: account.accountParams?.isSmoker,
         }).map(
           ({
             title,
             description,
             icon,
             iconBg,
-            // cardVariant,
+            cardVariant,
             // descriptionColor,
           }) => (
             <Card
               key={title}
-              // variant={cardVariant}
+              variant={cardVariant}
               className="flex flex-col justify-between"
             >
               <CardHeader className="items-end-safe">
@@ -256,7 +277,7 @@ export default function Dashboard({
                       </p>
                     </div>
                   </div>
-                  <div className="grid w-36 auto-rows-fr grid-cols-2 items-center gap-4 min-w-fit">
+                  <div className="grid w-36 min-w-fit auto-rows-fr grid-cols-2 items-center gap-4">
                     <p className="text-sm font-medium"> {price}</p>
                     {href ? (
                       <Link href={href}>