feat(MED-97): update benefit stats view in dashboards

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

@@ -3,12 +3,33 @@ import Link from 'next/link';
 import { ChevronRight, HeartPulse } from 'lucide-react';
 
 import { Button } from '@kit/ui/button';
-import { Card, CardDescription, CardFooter, CardHeader } from '@kit/ui/card';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
 import { Trans } from '@kit/ui/trans';
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
+import { cn } from '@kit/ui/lib/utils';
+import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
+import { getAccountBalanceSummary } from '../_lib/server/balance-actions';
+
+export default async function DashboardCards() {
+  const { language } = await createI18nServerInstance();
+  
+  const { account } = await loadCurrentUserAccount();
+  const balanceSummary = account ? await getAccountBalanceSummary(account.id) : null;
 
-export default function DashboardCards() {
   return (
-    <div className="flex gap-4">
+    <div
+      className={cn(
+        'grid grid-cols-1 gap-4',
+        'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+      )}>
       <Card
         variant="gradient-success"
         className="xs:w-1/2 flex w-full flex-col justify-between sm:w-auto"
@@ -38,6 +59,34 @@ export default function DashboardCards() {
           </CardDescription>
         </CardFooter>
       </Card>
+
+      <Card className="flex flex-col justify-center">
+        <CardHeader>
+          <CardTitle size="h5">
+            <Trans i18nKey="dashboard:heroCard.benefits.title" />
+          </CardTitle>
+        </CardHeader>
+
+        <CardContent>
+          <Figure>
+            {formatCurrency({
+              value: balanceSummary?.totalBalance || 0,
+              locale: language,
+              currencyCode: 'EUR',
+            })}
+          </Figure>
+          <CardDescription>
+            <Trans
+              i18nKey="dashboard:heroCard.benefits.validUntil"
+              values={{ date: '31.12.2025' }}
+              />
+          </CardDescription>
+        </CardContent>
+      </Card>
     </div>
   );
 }
+
+function Figure(props: React.PropsWithChildren) {
+  return <div className={'text-3xl font-bold'}>{props.children}</div>;
+}

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

@@ -2,7 +2,6 @@
 
 import Link from 'next/link';
 
-import { Database } from '@/packages/supabase/src/database.types';
 import { BlendingModeIcon, RulerHorizontalIcon } from '@radix-ui/react-icons';
 import { isNil } from 'lodash';
 import {
@@ -15,7 +14,7 @@ import {
   User,
 } from 'lucide-react';
 
-import type { AccountWithParams } from '@kit/accounts/types/accounts';
+import type { AccountWithParams, BmiThresholds } from '@kit/accounts/types/accounts';
 import { pathsConfig } from '@kit/shared/config';
 import { Button } from '@kit/ui/button';
 import {
@@ -138,10 +137,7 @@ export default function Dashboard({
   bmiThresholds,
 }: {
   account: AccountWithParams;
-  bmiThresholds: Omit<
-    Database['medreport']['Tables']['bmi_thresholds']['Row'],
-    'id'
-  >[];
+  bmiThresholds: Omit<BmiThresholds, 'id'>[];
 }) {
   const height = account.accountParams?.height || 0;
   const weight = account.accountParams?.weight || 0;