119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
|
|
import { formatCurrency } from '@/packages/shared/src/utils';
|
|
import { PiggyBankIcon } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { Card, CardTitle } from '@kit/ui/card';
|
|
import { cn } from '@kit/ui/lib/utils';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import { AccountBenefitStatistics } from '../_lib/server/load-team-account-benefit-statistics';
|
|
|
|
const StatisticsCard = ({ children }: { children: React.ReactNode }) => {
|
|
return <Card className="p-4">{children}</Card>;
|
|
};
|
|
|
|
const StatisticsCardTitle = ({
|
|
children,
|
|
className,
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}) => {
|
|
return (
|
|
<CardTitle className={cn('text-sm font-medium', className)}>
|
|
{children}
|
|
</CardTitle>
|
|
);
|
|
};
|
|
|
|
const StatisticsDescription = ({ children }: { children: React.ReactNode }) => {
|
|
return <p className="text-success text-xs">{children}</p>;
|
|
};
|
|
|
|
const StatisticsValue = ({ children }: { children: React.ReactNode }) => {
|
|
return <h4 className="">{children}</h4>;
|
|
};
|
|
|
|
const TeamAccountBenefitStatistics = ({
|
|
accountBenefitStatistics,
|
|
}: {
|
|
accountBenefitStatistics: AccountBenefitStatistics;
|
|
}) => {
|
|
const {
|
|
i18n: { language },
|
|
} = useTranslation();
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col gap-2 sm:flex-row">
|
|
<Card className="relative flex flex-row">
|
|
<div className="p-6">
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
|
|
<PiggyBankIcon className="h-[32px] w-[32px] stroke-orange-400 stroke-2" />
|
|
</div>
|
|
<StatisticsCardTitle className="mt-4 text-xl font-bold">
|
|
<Trans i18nKey="teams:benefitStatistics.budget.volume" />
|
|
</StatisticsCardTitle>
|
|
<StatisticsValue>
|
|
{formatCurrency({
|
|
value: accountBenefitStatistics.periodTotal,
|
|
locale: language,
|
|
currencyCode: 'EUR',
|
|
})}
|
|
</StatisticsValue>
|
|
</div>
|
|
</Card>
|
|
|
|
<div className="grid flex-2 grid-cols-2 gap-2 sm:grid-cols-3 sm:grid-rows-2">
|
|
<StatisticsCard>
|
|
<StatisticsCardTitle className="text-lg font-bold">
|
|
<Trans i18nKey="teams:benefitStatistics.data.totalSum" />
|
|
</StatisticsCardTitle>
|
|
<StatisticsValue>
|
|
{formatCurrency({
|
|
value: accountBenefitStatistics.orders.totalSum,
|
|
locale: language,
|
|
currencyCode: 'EUR',
|
|
})}
|
|
</StatisticsValue>
|
|
</StatisticsCard>
|
|
|
|
<StatisticsCard>
|
|
<StatisticsCardTitle>
|
|
<Trans i18nKey="teams:benefitStatistics.data.analysis" />
|
|
</StatisticsCardTitle>
|
|
<StatisticsValue>{accountBenefitStatistics.orders.analysesSum} €</StatisticsValue>
|
|
<StatisticsDescription>
|
|
<Trans
|
|
i18nKey="teams:benefitStatistics.data.reservations"
|
|
values={{ value: accountBenefitStatistics.orders.analysesCount }}
|
|
/>
|
|
</StatisticsDescription>
|
|
</StatisticsCard>
|
|
|
|
<StatisticsCard>
|
|
<StatisticsCardTitle>
|
|
<Trans i18nKey="teams:benefitStatistics.data.analysisPackages" />
|
|
</StatisticsCardTitle>
|
|
<StatisticsValue>
|
|
{formatCurrency({
|
|
value: accountBenefitStatistics.orders.analysisPackagesSum,
|
|
locale: language,
|
|
currencyCode: 'EUR',
|
|
})}
|
|
</StatisticsValue>
|
|
<StatisticsDescription>
|
|
<Trans
|
|
i18nKey="teams:benefitStatistics.data.analysisPackagesCount"
|
|
values={{ value: accountBenefitStatistics.orders.analysisPackagesCount }}
|
|
/>
|
|
</StatisticsDescription>
|
|
</StatisticsCard>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TeamAccountBenefitStatistics;
|