feat(MED-97): display accounts count, usage total
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
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 { 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 }) => {
|
||||
@@ -38,8 +38,10 @@ const StatisticsValue = ({ children }: { children: React.ReactNode }) => {
|
||||
|
||||
const TeamAccountBenefitStatistics = ({
|
||||
accountBenefitStatistics,
|
||||
expensesOverview,
|
||||
}: {
|
||||
accountBenefitStatistics: AccountBenefitStatistics;
|
||||
expensesOverview: TeamAccountBenefitExpensesOverview;
|
||||
}) => {
|
||||
const {
|
||||
i18n: { language },
|
||||
@@ -47,25 +49,16 @@ const TeamAccountBenefitStatistics = ({
|
||||
|
||||
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" />
|
||||
<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>
|
||||
{formatCurrency({
|
||||
value: accountBenefitStatistics.periodTotal,
|
||||
locale: language,
|
||||
currencyCode: 'EUR',
|
||||
})}
|
||||
{accountBenefitStatistics.companyAccountsCount}
|
||||
</StatisticsValue>
|
||||
</div>
|
||||
</Card>
|
||||
</StatisticsCard>
|
||||
|
||||
<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" />
|
||||
@@ -79,11 +72,30 @@ const TeamAccountBenefitStatistics = ({
|
||||
</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>{accountBenefitStatistics.orders.analysesSum} €</StatisticsValue>
|
||||
<StatisticsValue>
|
||||
{formatCurrency({
|
||||
value: accountBenefitStatistics.orders.analysesSum,
|
||||
locale: language,
|
||||
currencyCode: 'EUR',
|
||||
})}
|
||||
</StatisticsValue>
|
||||
<StatisticsDescription>
|
||||
<Trans
|
||||
i18nKey="teams:benefitStatistics.data.reservations"
|
||||
@@ -106,7 +118,9 @@ const TeamAccountBenefitStatistics = ({
|
||||
<StatisticsDescription>
|
||||
<Trans
|
||||
i18nKey="teams:benefitStatistics.data.analysisPackagesCount"
|
||||
values={{ value: accountBenefitStatistics.orders.analysisPackagesCount }}
|
||||
values={{
|
||||
value: accountBenefitStatistics.orders.analysisPackagesCount,
|
||||
}}
|
||||
/>
|
||||
</StatisticsDescription>
|
||||
</StatisticsCard>
|
||||
|
||||
@@ -20,6 +20,7 @@ import { AccountBenefitStatistics } from '../_lib/server/load-team-account-benef
|
||||
import TeamAccountBenefitStatistics from './team-account-benefit-statistics';
|
||||
import TeamAccountHealthDetails from './team-account-health-details';
|
||||
import type { Account, AccountParams, BmiThresholds } from '@/packages/features/accounts/src/types/accounts';
|
||||
import { TeamAccountBenefitExpensesOverview } from '../_lib/server/load-team-account-benefit-expenses-overview';
|
||||
|
||||
export interface TeamAccountStatisticsProps {
|
||||
teamAccount: Account;
|
||||
@@ -27,6 +28,7 @@ export interface TeamAccountStatisticsProps {
|
||||
bmiThresholds: Omit<BmiThresholds, 'id'>[];
|
||||
members: Database['medreport']['Functions']['get_account_members']['Returns'];
|
||||
accountBenefitStatistics: AccountBenefitStatistics;
|
||||
expensesOverview: TeamAccountBenefitExpensesOverview;
|
||||
}
|
||||
|
||||
export default function TeamAccountStatistics({
|
||||
@@ -35,6 +37,7 @@ export default function TeamAccountStatistics({
|
||||
bmiThresholds,
|
||||
members,
|
||||
accountBenefitStatistics,
|
||||
expensesOverview,
|
||||
}: TeamAccountStatisticsProps) {
|
||||
const currentDate = new Date();
|
||||
const [date, setDate] = useState<DateRange | undefined>({
|
||||
@@ -50,7 +53,7 @@ export default function TeamAccountStatistics({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<div className="mt-4 flex flex-col gap-4 sm:gap-0 sm:flex-row items-center justify-between">
|
||||
<h4 className="font-bold">
|
||||
<Trans
|
||||
i18nKey={'teams:home.headerTitle'}
|
||||
@@ -75,7 +78,7 @@ export default function TeamAccountStatistics({
|
||||
'animate-in fade-in flex flex-col space-y-4 pb-36 duration-500'
|
||||
}
|
||||
>
|
||||
<TeamAccountBenefitStatistics accountBenefitStatistics={accountBenefitStatistics} />
|
||||
<TeamAccountBenefitStatistics accountBenefitStatistics={accountBenefitStatistics} expensesOverview={expensesOverview} />
|
||||
|
||||
<h5 className="mt-4 mb-2">
|
||||
<Trans i18nKey="teams:home.healthDetails" />
|
||||
|
||||
@@ -29,7 +29,7 @@ export const loadCompanyPersonalAccountsBalanceEntries = async ({
|
||||
const { count, data: accountMemberships } = await supabase
|
||||
.schema('medreport')
|
||||
.from('accounts_memberships')
|
||||
.select('user_id')
|
||||
.select('user_id', { count: 'exact' })
|
||||
.eq('account_id', accountId)
|
||||
.throwOnError();
|
||||
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
|
||||
import { Dashboard } from './_components/dashboard';
|
||||
import { loadAccountBenefitStatistics } from './_lib/server/load-team-account-benefit-statistics';
|
||||
import { loadTeamAccountBenefitExpensesOverview } from './_lib/server/load-team-account-benefit-expenses-overview';
|
||||
|
||||
interface TeamAccountHomePageProps {
|
||||
params: Promise<{ account: string }>;
|
||||
@@ -41,6 +42,10 @@ function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
|
||||
const { memberParams, members } = use(teamAccountsApi.getMembers(account));
|
||||
const bmiThresholds = use(userAnalysesApi.fetchBmiThresholds());
|
||||
const accountBenefitStatistics = use(loadAccountBenefitStatistics(teamAccount.id));
|
||||
const expensesOverview = use(loadTeamAccountBenefitExpensesOverview({
|
||||
companyId: teamAccount.id,
|
||||
employeeCount: members.length,
|
||||
}));
|
||||
|
||||
use(
|
||||
createPageViewLog({
|
||||
@@ -57,6 +62,7 @@ function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
|
||||
bmiThresholds={bmiThresholds}
|
||||
members={members}
|
||||
accountBenefitStatistics={accountBenefitStatistics}
|
||||
expensesOverview={expensesOverview}
|
||||
/>
|
||||
</PageBody>
|
||||
);
|
||||
|
||||
@@ -28,7 +28,8 @@
|
||||
"budget": {
|
||||
"title": "Company Health Account Balance",
|
||||
"balance": "Budget Balance {{balance}}",
|
||||
"volume": "Budget Volume"
|
||||
"volume": "Budget Volume",
|
||||
"membersCount": "Members Count"
|
||||
},
|
||||
"data": {
|
||||
"reservations": "{{value}} services",
|
||||
@@ -38,7 +39,8 @@
|
||||
"analysisPackages": "Health Analysis Packages",
|
||||
"analysisPackagesCount": "{{value}} service usage",
|
||||
"totalSum": "Total Sum",
|
||||
"eclinic": "E-Clinic"
|
||||
"eclinic": "E-Clinic",
|
||||
"currentMonthUsageTotal": "Current Month Usage"
|
||||
}
|
||||
},
|
||||
"healthDetails": {
|
||||
|
||||
@@ -28,17 +28,19 @@
|
||||
"budget": {
|
||||
"title": "Ettevõtte Tervisekassa seis",
|
||||
"balance": "Eelarve jääk {{balance}}",
|
||||
"volume": "Eelarve maht"
|
||||
"volume": "Eelarve maht",
|
||||
"membersCount": "Töötajate arv"
|
||||
},
|
||||
"data": {
|
||||
"reservations": "{{value}} teenust",
|
||||
"reservations": "{{value}} tellimus(t)",
|
||||
"analysis": "Analüüsid",
|
||||
"doctorsAndSpecialists": "Eriarstid ja spetsialistid",
|
||||
"researches": "Uuringud",
|
||||
"analysisPackages": "Terviseuuringute paketid",
|
||||
"analysisPackagesCount": "{{value}} teenuse kasutust",
|
||||
"analysisPackagesCount": "{{value}} tellimus(t)",
|
||||
"totalSum": "Tellitud teenuste summa",
|
||||
"eclinic": "Digikliinik"
|
||||
"eclinic": "Digikliinik",
|
||||
"currentMonthUsageTotal": "Kasutatud eelarve"
|
||||
}
|
||||
},
|
||||
"healthDetails": {
|
||||
|
||||
@@ -28,7 +28,8 @@
|
||||
"budget": {
|
||||
"title": "Баланс Tervisekassa компании",
|
||||
"balance": "Остаток бюджета {{balance}}",
|
||||
"volume": "Объем бюджета"
|
||||
"volume": "Объем бюджета",
|
||||
"membersCount": "Количество сотрудников"
|
||||
},
|
||||
"data": {
|
||||
"reservations": "{{value}} услуги",
|
||||
@@ -38,7 +39,8 @@
|
||||
"analysisPackages": "Пакеты медицинских исследований",
|
||||
"analysisPackagesCount": "{{value}} использование услуг",
|
||||
"totalSum": "Сумма услуг",
|
||||
"eclinic": "Дигиклиника"
|
||||
"eclinic": "Дигиклиника",
|
||||
"currentMonthUsageTotal": "Текущее использование бюджета"
|
||||
}
|
||||
},
|
||||
"healthDetails": {
|
||||
|
||||
Reference in New Issue
Block a user