133 lines
4.2 KiB
TypeScript
133 lines
4.2 KiB
TypeScript
import React from 'react';
|
|
|
|
import { formatCurrency } from '@/packages/shared/src/utils';
|
|
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 { TeamAccountBenefitExpensesOverview } from '../_lib/server/load-team-account-benefit-expenses-overview';
|
|
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,
|
|
expensesOverview,
|
|
}: {
|
|
accountBenefitStatistics: AccountBenefitStatistics;
|
|
expensesOverview: TeamAccountBenefitExpensesOverview;
|
|
}) => {
|
|
const {
|
|
i18n: { language },
|
|
} = useTranslation();
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col gap-2 sm:flex-row">
|
|
<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.budget.membersCount" />
|
|
</StatisticsCardTitle>
|
|
<StatisticsValue>
|
|
{accountBenefitStatistics.companyAccountsCount}
|
|
</StatisticsValue>
|
|
</StatisticsCard>
|
|
|
|
<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 className="text-lg font-bold">
|
|
<Trans i18nKey="teams:benefitStatistics.data.currentMonthUsageTotal" />
|
|
</StatisticsCardTitle>
|
|
<StatisticsValue>
|
|
{formatCurrency({
|
|
value: expensesOverview.currentMonthUsageTotal,
|
|
locale: language,
|
|
currencyCode: 'EUR',
|
|
})}
|
|
</StatisticsValue>
|
|
</StatisticsCard>
|
|
|
|
<StatisticsCard>
|
|
<StatisticsCardTitle>
|
|
<Trans i18nKey="teams:benefitStatistics.data.analysis" />
|
|
</StatisticsCardTitle>
|
|
<StatisticsValue>
|
|
{formatCurrency({
|
|
value: accountBenefitStatistics.orders.analysesSum,
|
|
locale: language,
|
|
currencyCode: 'EUR',
|
|
})}
|
|
</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;
|