91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import { useMemo } from 'react';
|
|
|
|
import { Database } from '@/packages/supabase/src/database.types';
|
|
|
|
import { Trans } from '@kit/ui/makerkit/trans';
|
|
import { Separator } from '@kit/ui/separator';
|
|
|
|
const YearlyExpensesOverview = ({
|
|
employeeCount = 0,
|
|
companyParams,
|
|
}: {
|
|
employeeCount?: number;
|
|
companyParams: Database['medreport']['Tables']['company_params']['Row'];
|
|
}) => {
|
|
const monthlyExpensePerEmployee = useMemo(() => {
|
|
if (!companyParams.benefit_amount) {
|
|
return '0.00';
|
|
}
|
|
|
|
switch (companyParams.benefit_occurance) {
|
|
case 'yearly':
|
|
return (companyParams.benefit_amount / 12).toFixed(2);
|
|
case 'quarterly':
|
|
return (companyParams.benefit_amount / 4).toFixed(2);
|
|
case 'monthly':
|
|
return companyParams.benefit_amount.toFixed(2);
|
|
default:
|
|
return '0.00';
|
|
}
|
|
}, [companyParams]);
|
|
|
|
const maxYearlyExpensePerEmployee = useMemo(() => {
|
|
if (!companyParams.benefit_amount) {
|
|
return '0.00';
|
|
}
|
|
|
|
switch (companyParams.benefit_occurance) {
|
|
case 'yearly':
|
|
return companyParams.benefit_amount.toFixed(2);
|
|
case 'quarterly':
|
|
return (companyParams.benefit_amount * 4).toFixed(2);
|
|
case 'monthly':
|
|
return (companyParams.benefit_amount * 12).toFixed(2);
|
|
default:
|
|
return '0.00';
|
|
}
|
|
}, [companyParams]);
|
|
|
|
return (
|
|
<div className="border-border rounded-lg border p-6">
|
|
<h5>
|
|
<Trans i18nKey="billing:expensesOverview.title" />
|
|
</h5>
|
|
<div className="mt-5 flex justify-between">
|
|
<p className="text-sm font-medium">
|
|
<Trans i18nKey="billing:expensesOverview.monthly" />
|
|
</p>
|
|
<span className="text-primary text-sm font-bold">
|
|
{monthlyExpensePerEmployee} €
|
|
</span>
|
|
</div>
|
|
<div className="mt-3 flex justify-between">
|
|
<p className="text-sm font-medium">
|
|
<Trans i18nKey="billing:expensesOverview.yearly" />
|
|
</p>
|
|
<span className="text-sm font-medium">
|
|
{maxYearlyExpensePerEmployee} €
|
|
</span>
|
|
</div>
|
|
<div className="mt-5 mb-3 flex justify-between">
|
|
<p className="text-sm font-medium">
|
|
<Trans
|
|
i18nKey="billing:expensesOverview.total"
|
|
values={{ employeeCount: employeeCount || 0 }}
|
|
/>
|
|
</p>
|
|
<span className="text-sm font-medium">
|
|
{(Number(maxYearlyExpensePerEmployee) * employeeCount).toFixed(2)} €
|
|
</span>
|
|
</div>
|
|
<Separator />
|
|
<div className="mt-4 flex justify-between">
|
|
<p className="font-semibold">Kokku</p>
|
|
<span className="font-semibold">13 200,00 €</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default YearlyExpensesOverview;
|