93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
import { ChevronRight, HeartPulse } from 'lucide-react';
|
|
|
|
import { Button } from '@kit/ui/button';
|
|
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;
|
|
|
|
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>;
|
|
}
|