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

import Link from 'next/link';

import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
import { formatCurrency } from '@/packages/shared/src/utils';
import { ChevronRight, HeartPulse } from 'lucide-react';

import { Button } from '@kit/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@kit/ui/card';
import { cn } from '@kit/ui/lib/utils';
import { Trans } from '@kit/ui/trans';

import { getAccountBalanceSummary } from '../_lib/server/balance-actions';
import { loadCurrentUserAccount } from '../_lib/server/load-user-account';

export default async function DashboardCards() {
  const { language } = await createI18nServerInstance();

  const { account } = await loadCurrentUserAccount();
  const balanceSummary = account
    ? await getAccountBalanceSummary(account.id)
    : null;

  return (
    <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"
      >
        <CardHeader className="flex-row">
          <div
            className={
              'bg-primary/10 mb-6 flex size-8 items-center-safe justify-center-safe rounded-full text-white'
            }
          >
            <HeartPulse className="size-4 fill-green-500" />
          </div>
          <div className="bg-warning ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white">
            <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>

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