feat(MED-97): display accounts count, usage total

app/home/[account]/_components/team-account-benefit-statistics.tsx

@@ -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="grid flex-2 grid-cols-2 gap-2 sm:grid-cols-3 sm:grid-rows-2">
-        <div className="p-6">
+        <StatisticsCard>
-          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
+          <StatisticsCardTitle className="text-lg font-bold">
-            <PiggyBankIcon className="h-[32px] w-[32px] stroke-orange-400 stroke-2" />
+            <Trans i18nKey="teams:benefitStatistics.budget.membersCount" />
-          </div>
-          <StatisticsCardTitle className="mt-4 text-xl font-bold">
-            <Trans i18nKey="teams:benefitStatistics.budget.volume" />
           </StatisticsCardTitle>
           <StatisticsValue>
-            {formatCurrency({
+            {accountBenefitStatistics.companyAccountsCount}
-              value: accountBenefitStatistics.periodTotal,
-              locale: language,
-              currencyCode: 'EUR',
-            })}
           </StatisticsValue>
-        </div>
+        </StatisticsCard>
-      </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" />
@@ -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>

app/home/[account]/_components/team-account-statistics.tsx

@@ -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" />

app/home/[account]/_lib/server/load-team-account-benefit-statistics.ts

@@ -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();
 

app/home/[account]/page.tsx

@@ -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>
   );

public/locales/en/teams.json

@@ -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": {

public/locales/et/teams.json

@@ -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": {

public/locales/ru/teams.json

@@ -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": {