feat(MED-97): update benefit stats view in dashboards

app/home/(user)/_components/dashboard-cards.tsx

@@ -3,12 +3,33 @@ import Link from 'next/link';
 import { ChevronRight, HeartPulse } from 'lucide-react';
 
 import { Button } from '@kit/ui/button';
-import { Card, CardDescription, CardFooter, CardHeader } from '@kit/ui/card';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
 import { Trans } from '@kit/ui/trans';
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
+import { cn } from '@kit/ui/lib/utils';
+import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
+import { getAccountBalanceSummary } from '../_lib/server/balance-actions';
+
+export default async function DashboardCards() {
+  const { language } = await createI18nServerInstance();
+  
+  const { account } = await loadCurrentUserAccount();
+  const balanceSummary = account ? await getAccountBalanceSummary(account.id) : null;
 
-export default function DashboardCards() {
   return (
-    <div className="flex gap-4">
+    <div
+      className={cn(
+        'grid grid-cols-1 gap-4',
+        'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+      )}>
       <Card
         variant="gradient-success"
         className="xs:w-1/2 flex w-full flex-col justify-between sm:w-auto"
@@ -38,6 +59,34 @@ export default function DashboardCards() {
           </CardDescription>
         </CardFooter>
       </Card>
+
+      <Card className="flex flex-col justify-center">
+        <CardHeader>
+          <CardTitle size="h5">
+            <Trans i18nKey="dashboard:heroCard.benefits.title" />
+          </CardTitle>
+        </CardHeader>
+
+        <CardContent>
+          <Figure>
+            {formatCurrency({
+              value: balanceSummary?.totalBalance || 0,
+              locale: language,
+              currencyCode: 'EUR',
+            })}
+          </Figure>
+          <CardDescription>
+            <Trans
+              i18nKey="dashboard:heroCard.benefits.validUntil"
+              values={{ date: '31.12.2025' }}
+              />
+          </CardDescription>
+        </CardContent>
+      </Card>
     </div>
   );
 }
+
+function Figure(props: React.PropsWithChildren) {
+  return <div className={'text-3xl font-bold'}>{props.children}</div>;
+}

app/home/(user)/_components/dashboard.tsx

@@ -2,7 +2,6 @@
 
 import Link from 'next/link';
 
-import { Database } from '@/packages/supabase/src/database.types';
 import { BlendingModeIcon, RulerHorizontalIcon } from '@radix-ui/react-icons';
 import { isNil } from 'lodash';
 import {
@@ -15,7 +14,7 @@ import {
   User,
 } from 'lucide-react';
 
-import type { AccountWithParams } from '@kit/accounts/types/accounts';
+import type { AccountWithParams, BmiThresholds } from '@kit/accounts/types/accounts';
 import { pathsConfig } from '@kit/shared/config';
 import { Button } from '@kit/ui/button';
 import {
@@ -138,10 +137,7 @@ export default function Dashboard({
   bmiThresholds,
 }: {
   account: AccountWithParams;
-  bmiThresholds: Omit<
+  bmiThresholds: Omit<BmiThresholds, 'id'>[];
-    Database['medreport']['Tables']['bmi_thresholds']['Row'],
-    'id'
-  >[];
 }) {
   const height = account.accountParams?.height || 0;
   const weight = account.accountParams?.weight || 0;

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

@@ -1,23 +1,14 @@
 import React from 'react';
 
-import { redirect } from 'next/navigation';
-
 import { formatCurrency } from '@/packages/shared/src/utils';
-import { Database } from '@/packages/supabase/src/database.types';
+import { PiggyBankIcon } from 'lucide-react';
-import { PiggyBankIcon, Settings } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-import { createPath, pathsConfig } from '@kit/shared/config';
 import { Card, CardTitle } from '@kit/ui/card';
 import { cn } from '@kit/ui/lib/utils';
-import { Button } from '@kit/ui/shadcn/button';
 import { Trans } from '@kit/ui/trans';
 
-interface TeamAccountBenefitStatisticsProps {
+import { AccountBenefitStatistics } from '../_lib/server/load-team-account-benefit-statistics';
-  employeeCount: number;
-  accountSlug: string;
-  companyParams: Database['medreport']['Tables']['company_params']['Row'];
-}
 
 const StatisticsCard = ({ children }: { children: React.ReactNode }) => {
   return <Card className="p-4">{children}</Card>;
@@ -46,10 +37,10 @@ const StatisticsValue = ({ children }: { children: React.ReactNode }) => {
 };
 
 const TeamAccountBenefitStatistics = ({
-  employeeCount,
+  accountBenefitStatistics,
-  accountSlug,
+}: {
-  companyParams,
+  accountBenefitStatistics: AccountBenefitStatistics;
-}: TeamAccountBenefitStatisticsProps) => {
+}) => {
   const {
     i18n: { language },
   } = useTranslation();
@@ -58,114 +49,64 @@ const TeamAccountBenefitStatistics = ({
     <div className="flex h-full w-full flex-col gap-2 sm:flex-row">
       <Card className="relative flex flex-row">
         <div className="p-6">
-          <Button
-            onClick={() =>
-              redirect(createPath(pathsConfig.app.accountBilling, accountSlug))
-            }
-            variant="outline"
-            className="absolute top-1 right-1 p-3"
-          >
-            <Settings />
-          </Button>
           <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>
-          <p className="mt-4 text-sm font-medium">
+          <StatisticsCardTitle className="mt-4 text-xl font-bold">
-            <Trans i18nKey="teams:benefitStatistics.budget.title" />
+            <Trans i18nKey="teams:benefitStatistics.budget.volume" />
-          </p>
+          </StatisticsCardTitle>
-          <h3 className="text-2xl">
+          <StatisticsValue>
-            <Trans
+            {formatCurrency({
-              i18nKey="teams:benefitStatistics.budget.balance"
+              value: accountBenefitStatistics.periodTotal,
-              values={{
+              locale: language,
-                balance: formatCurrency({
+              currencyCode: 'EUR',
-                  value: 11800,
+            })}
-                  locale: language,
+          </StatisticsValue>
-                  currencyCode: 'EUR',
-                }),
-              }}
-            />
-          </h3>
-          <StatisticsDescription>
-            <Trans
-              i18nKey="teams:benefitStatistics.budget.volume"
-              values={{
-                volume: formatCurrency({
-                  value:
-                    (Number(companyParams.benefit_amount) || 0) * employeeCount,
-                  locale: language,
-                  currencyCode: 'EUR',
-                }),
-              }}
-            />
-          </StatisticsDescription>
         </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.serviceSum" />
+            <Trans i18nKey="teams:benefitStatistics.data.totalSum" />
           </StatisticsCardTitle>
-          <StatisticsValue>1800 €</StatisticsValue>
+          <StatisticsValue>
+            {formatCurrency({
+              value: accountBenefitStatistics.orders.totalSum,
+              locale: language,
+              currencyCode: 'EUR',
+            })}
+          </StatisticsValue>
         </StatisticsCard>
+
         <StatisticsCard>
           <StatisticsCardTitle>
             <Trans i18nKey="teams:benefitStatistics.data.analysis" />
           </StatisticsCardTitle>
-          <StatisticsValue>200 €</StatisticsValue>
+          <StatisticsValue>{accountBenefitStatistics.orders.analysesSum} €</StatisticsValue>
           <StatisticsDescription>
             <Trans
               i18nKey="teams:benefitStatistics.data.reservations"
-              values={{ value: 36 }}
+              values={{ value: accountBenefitStatistics.orders.analysesCount }}
-            />
-          </StatisticsDescription>
-        </StatisticsCard>
-        <StatisticsCard>
-          <StatisticsCardTitle>
-            <Trans i18nKey="teams:benefitStatistics.data.doctorsAndSpecialists" />
-          </StatisticsCardTitle>
-          <StatisticsValue>200 €</StatisticsValue>
-          <StatisticsDescription>
-            <Trans
-              i18nKey="teams:benefitStatistics.data.reservations"
-              values={{ value: 44 }}
-            />
-          </StatisticsDescription>
-        </StatisticsCard>
-        <StatisticsCard>
-          <StatisticsCardTitle>
-            <Trans i18nKey="teams:benefitStatistics.data.researches" />
-          </StatisticsCardTitle>
-          <StatisticsValue>200 €</StatisticsValue>
-          <StatisticsDescription>
-            <Trans
-              i18nKey="teams:benefitStatistics.data.reservations"
-              values={{ value: 40 }}
-            />
-          </StatisticsDescription>
-        </StatisticsCard>
-        <StatisticsCard>
-          <StatisticsCardTitle>
-            <Trans i18nKey="teams:benefitStatistics.data.eclinic" />
-          </StatisticsCardTitle>
-          <StatisticsValue>200 €</StatisticsValue>
-          <StatisticsDescription>
-            <Trans
-              i18nKey="teams:benefitStatistics.data.reservations"
-              values={{ value: 34 }}
             />
           </StatisticsDescription>
         </StatisticsCard>
 
         <StatisticsCard>
           <StatisticsCardTitle>
-            <Trans i18nKey="teams:benefitStatistics.data.healthResearchPlans" />
+            <Trans i18nKey="teams:benefitStatistics.data.analysisPackages" />
           </StatisticsCardTitle>
-          <StatisticsValue>200 €</StatisticsValue>
+          <StatisticsValue>
+            {formatCurrency({
+              value: accountBenefitStatistics.orders.analysisPackagesSum,
+              locale: language,
+              currencyCode: 'EUR',
+            })}
+          </StatisticsValue>
           <StatisticsDescription>
             <Trans
-              i18nKey="teams:benefitStatistics.data.serviceUsage"
+              i18nKey="teams:benefitStatistics.data.analysisPackagesCount"
-              values={{ value: 46 }}
+              values={{ value: accountBenefitStatistics.orders.analysisPackagesCount }}
             />
           </StatisticsDescription>
         </StatisticsCard>

app/home/[account]/_components/team-account-health-details.tsx

@@ -5,6 +5,7 @@ import { Database } from '@/packages/supabase/src/database.types';
 import { Card } from '@kit/ui/card';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
+import type { BmiThresholds } from '@kit/accounts/types/accounts';
 
 import { getAccountHealthDetailsFields } from '../_lib/server/load-team-account-health-details';
 import { TeamAccountStatisticsProps } from './team-account-statistics';
@@ -15,10 +16,7 @@ const TeamAccountHealthDetails = ({
   members,
 }: {
   memberParams: TeamAccountStatisticsProps['memberParams'];
-  bmiThresholds: Omit<
+  bmiThresholds: Omit<BmiThresholds, 'id'>[];
-    Database['medreport']['Tables']['bmi_thresholds']['Row'],
-    'id'
-  >[];
   members: Database['medreport']['Functions']['get_account_members']['Returns'];
 }) => {
   const accountHealthDetailsFields = getAccountHealthDetailsFields(

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

@@ -14,28 +14,19 @@ import { createPath, pathsConfig } from '@kit/shared/config';
 import { Card } from '@kit/ui/card';
 import { Trans } from '@kit/ui/makerkit/trans';
 import { Button } from '@kit/ui/shadcn/button';
-import { Calendar, DateRange } from '@kit/ui/shadcn/calendar';
+import { DateRange } from '@kit/ui/shadcn/calendar';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@kit/ui/shadcn/popover';
 
+import { AccountBenefitStatistics } from '../_lib/server/load-team-account-benefit-statistics';
 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';
 
 export interface TeamAccountStatisticsProps {
-  teamAccount: Database['medreport']['Tables']['accounts']['Row'];
+  teamAccount: Account;
-  memberParams: Pick<
+  memberParams: Pick<AccountParams, 'weight' | 'height'>[];
-    Database['medreport']['Tables']['account_params']['Row'],
+  bmiThresholds: Omit<BmiThresholds, 'id'>[];
-    'weight' | 'height'
-  >[];
-  bmiThresholds: Omit<
-    Database['medreport']['Tables']['bmi_thresholds']['Row'],
-    'id'
-  >[];
   members: Database['medreport']['Functions']['get_account_members']['Returns'];
-  companyParams: Database['medreport']['Tables']['company_params']['Row'];
+  accountBenefitStatistics: AccountBenefitStatistics;
 }
 
 export default function TeamAccountStatistics({
@@ -43,11 +34,12 @@ export default function TeamAccountStatistics({
   memberParams,
   bmiThresholds,
   members,
-  companyParams,
+  accountBenefitStatistics,
 }: TeamAccountStatisticsProps) {
+  const currentDate = new Date();
   const [date, setDate] = useState<DateRange | undefined>({
-    from: new Date(),
+    from: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
-    to: new Date(),
+    to: new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0),
   });
   const {
     i18n: { language },
@@ -66,28 +58,16 @@ export default function TeamAccountStatistics({
           />
         </h4>
 
-        <Popover>
+        <Button variant="outline" data-empty={!date}>
-          <PopoverTrigger asChild>
+          <CalendarIcon />
-            <Button variant="outline" data-empty={!date}>
+          {date?.from && date?.to ? (
-              <CalendarIcon />
+            `${format(date.from, 'd MMMM yyyy', dateFormatOptions)} - ${format(date.to, 'd MMMM yyyy', dateFormatOptions)}`
-              {date?.from && date?.to ? (
+          ) : (
-                `${format(date.from, 'd MMMM yyyy', dateFormatOptions)} - ${format(date.to, 'd MMMM yyyy', dateFormatOptions)}`
+            <span>
-              ) : (
+              <Trans i18nKey="common:formField.selectDate" />
-                <span>
+            </span>
-                  <Trans i18nKey="common:formField.selectDate" />
+          )}
-                </span>
+        </Button>
-              )}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-auto p-0">
-            <Calendar
-              mode="range"
-              selected={date}
-              onSelect={setDate}
-              locale={language === 'et' ? et : enGB}
-            />
-          </PopoverContent>
-        </Popover>
       </div>
 
       <div
@@ -95,11 +75,7 @@ export default function TeamAccountStatistics({
           'animate-in fade-in flex flex-col space-y-4 pb-36 duration-500'
         }
       >
-        <TeamAccountBenefitStatistics
+        <TeamAccountBenefitStatistics accountBenefitStatistics={accountBenefitStatistics} />
-          employeeCount={members.length}
-          accountSlug={teamAccount.slug || ''}
-          companyParams={companyParams}
-        />
 
         <h5 className="mt-4 mb-2">
           <Trans i18nKey="teams:home.healthDetails" />
@@ -148,7 +124,7 @@ export default function TeamAccountStatistics({
                 redirect(
                   createPath(
                     pathsConfig.app.accountBilling,
-                    teamAccount.slug || '',
+                    teamAccount.slug!,
                   ),
                 )
               }

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

@@ -0,0 +1,75 @@
+import { getSupabaseServerClient } from "@/packages/supabase/src/clients/server-client";
+import { loadAccountBenefitStatistics, loadCompanyPersonalAccountsBalanceEntries } from "./load-team-account-benefit-statistics";
+
+export interface TeamAccountBenefitExpensesOverview {
+  benefitAmount: number | null;
+  benefitOccurrence: 'yearly' | 'monthly' | 'quarterly' | null;
+  currentMonthUsageTotal: number;
+  managementFee: number;
+  managementFeeTotal: number;
+  total: number;
+}
+
+const MANAGEMENT_FEE = 5.50;
+
+const MONTHS = 12;
+const QUARTERS = 4;
+
+export async function loadTeamAccountBenefitExpensesOverview({
+  companyId,
+  employeeCount,
+}: {
+  companyId: string;
+  employeeCount: number;
+}): Promise<TeamAccountBenefitExpensesOverview> {
+  const supabase = getSupabaseServerClient();
+  const { data, error } = await supabase
+    .schema('medreport')
+    .from('benefit_distribution_schedule')
+    .select('*')
+    .eq('company_id', companyId)
+    .eq('is_active', true)
+    .single();
+
+  let benefitAmount: TeamAccountBenefitExpensesOverview['benefitAmount'] = null;
+  let benefitOccurrence: TeamAccountBenefitExpensesOverview['benefitOccurrence'] = null;
+  if (error) {
+    console.warn('Failed to load team account benefit expenses overview');
+  } else {
+    benefitAmount = data.benefit_amount as TeamAccountBenefitExpensesOverview['benefitAmount'];
+    benefitOccurrence = data.benefit_occurrence as TeamAccountBenefitExpensesOverview['benefitOccurrence'];
+  }
+
+  const { purchaseEntriesTotal } = await loadCompanyPersonalAccountsBalanceEntries({ accountId: companyId });
+
+  return {
+    benefitAmount,
+    benefitOccurrence,
+    currentMonthUsageTotal: purchaseEntriesTotal,
+    managementFee: MANAGEMENT_FEE,
+    managementFeeTotal: MANAGEMENT_FEE * employeeCount,
+    total: (() => {
+      if (typeof benefitAmount !== 'number') {
+        return 0;
+      }
+
+      const currentDate = new Date();
+      const createdAt = new Date(data.created_at);
+      const isCreatedThisYear = createdAt.getFullYear() === currentDate.getFullYear();
+      if (benefitOccurrence === 'yearly') {
+        return benefitAmount * employeeCount;
+      } else if (benefitOccurrence === 'monthly') {
+        const monthsLeft = isCreatedThisYear
+          ? MONTHS - createdAt.getMonth()
+          : MONTHS;
+        return benefitAmount * employeeCount * monthsLeft;
+      } else if (benefitOccurrence === 'quarterly') {
+        const quartersLeft = isCreatedThisYear
+          ? QUARTERS - (createdAt.getMonth() / 3)
+          : QUARTERS;
+        return benefitAmount * employeeCount * quartersLeft;
+      }
+      return 0;
+    })(),
+  }
+}

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

@@ -0,0 +1,96 @@
+'use server';
+
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
+
+export interface AccountBenefitStatistics {
+  benefitDistributionSchedule: {
+    amount: number;
+  };
+  companyAccountsCount: number;
+  periodTotal: number;
+  orders: {
+    totalSum: number;
+
+    analysesCount: number;
+    analysesSum: number;
+
+    analysisPackagesCount: number;
+    analysisPackagesSum: number;
+  }
+}
+
+export const loadCompanyPersonalAccountsBalanceEntries = async ({
+  accountId,
+}: {
+  accountId: string;
+}) => {
+  const supabase = getSupabaseServerAdminClient();
+
+  const { count, data: accountMemberships } = await supabase
+    .schema('medreport')
+    .from('accounts_memberships')
+    .select('user_id')
+    .eq('account_id', accountId)
+    .throwOnError();
+
+  const { data: accountBalanceEntries } = await supabase
+    .schema('medreport')
+    .from('account_balance_entries')
+    .select('*')
+    .eq('is_active', true)
+    .in('account_id', accountMemberships.map(({ user_id }) => user_id))
+    .throwOnError();
+
+  const purchaseEntries = accountBalanceEntries.filter(({ entry_type }) => entry_type === 'purchase');
+  const analysesEntries = purchaseEntries.filter(({ is_analysis_order }) => is_analysis_order);
+  const analysisPackagesEntries = purchaseEntries.filter(({ is_analysis_package_order }) => is_analysis_package_order);
+
+  return {
+    accountBalanceEntries,
+    analysesEntries,
+    analysisPackagesEntries,
+    companyAccountsCount: count || 0,
+    purchaseEntries,
+    purchaseEntriesTotal: purchaseEntries.reduce((acc, { amount }) => acc + Math.abs(amount || 0), 0),
+  };
+}
+
+export const loadAccountBenefitStatistics = async (
+  accountId: string,
+): Promise<AccountBenefitStatistics> => {
+  const supabase = getSupabaseServerAdminClient();
+
+  const {
+    analysesEntries,
+    analysisPackagesEntries,
+    companyAccountsCount,
+    purchaseEntriesTotal,
+  } = await loadCompanyPersonalAccountsBalanceEntries({ accountId });
+
+  const { data: benefitDistributionSchedule } = await supabase
+    .schema('medreport')
+    .from('benefit_distribution_schedule')
+    .select('*')
+    .eq('company_id', accountId)
+    .eq('is_active', true)
+    .single()
+    .throwOnError();
+
+  const scheduleAmount = benefitDistributionSchedule?.benefit_amount || 0;
+  return {
+    companyAccountsCount,
+    benefitDistributionSchedule: {
+      amount: benefitDistributionSchedule?.benefit_amount || 0,
+    },
+    periodTotal: scheduleAmount * companyAccountsCount,
+    orders: {
+      totalSum: purchaseEntriesTotal,
+
+      analysesCount: analysesEntries.length,
+      analysesSum: analysesEntries.reduce((acc, { amount }) => acc + Math.abs(amount || 0), 0),
+
+      analysisPackagesCount: analysisPackagesEntries.length,
+      analysisPackagesSum: analysisPackagesEntries.reduce((acc, { amount }) => acc + Math.abs(amount || 0), 0),
+    },
+  };
+};

app/home/[account]/_lib/server/load-team-account-health-details.ts

@@ -11,6 +11,7 @@ import {
 } from '~/lib/utils';
 
 import { TeamAccountStatisticsProps } from '../../_components/team-account-statistics';
+import type { BmiThresholds } from '@kit/accounts/types/accounts';
 
 interface AccountHealthDetailsField {
   title: string;
@@ -25,10 +26,7 @@ interface AccountHealthDetailsField {
 
 export const getAccountHealthDetailsFields = (
   memberParams: TeamAccountStatisticsProps['memberParams'],
-  bmiThresholds: Omit<
+  bmiThresholds: Omit<BmiThresholds, 'id'>[],
-    Database['medreport']['Tables']['bmi_thresholds']['Row'],
-    'id'
-  >[],
   members: Database['medreport']['Functions']['get_account_members']['Returns'],
 ): AccountHealthDetailsField[] => {
   const averageWeight =
@@ -82,7 +80,7 @@ export const getAccountHealthDetailsFields = (
     },
     {
       title: 'teams:healthDetails.bmi',
-      value: averageBMI,
+      value: averageBMI!,
       Icon: TrendingUp,
       iconBg: getBmiBackgroundColor(bmiStatus),
     },

app/home/[account]/billing/_components/health-benefit-form-client.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+
+import { UpdateHealthBenefitSchema } from '@/packages/billing/core/src/schema';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+
+import { Button } from '@kit/ui/button';
+import { Form } from '@kit/ui/form';
+import { Spinner } from '@kit/ui/makerkit/spinner';
+import { toast } from '@kit/ui/shadcn/sonner';
+import { Trans } from '@kit/ui/trans';
+
+import { cn } from '~/lib/utils';
+
+import { updateHealthBenefit } from '../_lib/server/server-actions';
+import HealthBenefitFields from './health-benefit-fields';
+import { Account, CompanyParams } from '@/packages/features/accounts/src/types/accounts';
+import { useTranslation } from 'react-i18next';
+
+const HealthBenefitFormClient = ({
+  account,
+  companyParams,
+}: {
+  account: Account;
+  companyParams: CompanyParams;
+}) => {
+  const { t } = useTranslation('account');
+
+  const [currentCompanyParams, setCurrentCompanyParams] =
+    useState<CompanyParams>(companyParams);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const form = useForm({
+    resolver: zodResolver(UpdateHealthBenefitSchema),
+    mode: 'onChange',
+    defaultValues: {
+      occurrence: currentCompanyParams.benefit_occurance || 'yearly',
+      amount: currentCompanyParams.benefit_amount || 0,
+    },
+  });
+  
+  const isDirty = form.formState.isDirty;
+
+  const onSubmit = (data: { occurrence: string; amount: number }) => {
+    const promise = async () => {
+      setIsLoading(true);
+      try {
+        await updateHealthBenefit({ ...data, accountId: account.id });
+        setCurrentCompanyParams((prev) => ({
+          ...prev,
+          benefit_amount: data.amount,
+          benefit_occurance: data.occurrence,
+        }));
+      } finally {
+        form.reset(data);
+        setIsLoading(false);
+      }
+    };
+
+    toast.promise(promise, {
+      success: t('account:healthBenefitForm.updateSuccess'),
+      error: 'error',
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className="flex flex-col gap-6"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <HealthBenefitFields />
+        
+        <Button
+          type="submit"
+          className="relative"
+          disabled={!isDirty || isLoading}
+        >
+          {isLoading && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <Spinner />
+            </div>
+          )}
+          <div className={cn({ invisible: isLoading })}>
+            <Trans i18nKey="account:saveChanges" />
+          </div>
+        </Button>
+      </form>
+    </Form>
+  );
+};
+
+export default HealthBenefitFormClient;
+
+

app/home/[account]/billing/_components/health-benefit-form.tsx

@@ -1,138 +1,70 @@
-'use client';
-
-import { useState } from 'react';
-
-import { UpdateHealthBenefitSchema } from '@/packages/billing/core/src/schema';
-import { Database } from '@/packages/supabase/src/database.types';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { PiggyBankIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
 
-import { Button } from '@kit/ui/button';
-import { Form } from '@kit/ui/form';
-import { Spinner } from '@kit/ui/makerkit/spinner';
 import { Separator } from '@kit/ui/shadcn/separator';
-import { toast } from '@kit/ui/shadcn/sonner';
 import { Trans } from '@kit/ui/trans';
 
-import { cn } from '~/lib/utils';
+import HealthBenefitFormClient from './health-benefit-form-client';
-
-import { updateHealthBenefit } from '../_lib/server/server-actions';
-import HealthBenefitFields from './health-benefit-fields';
 import YearlyExpensesOverview from './yearly-expenses-overview';
+import { TeamAccountBenefitExpensesOverview } from '../../_lib/server/load-team-account-benefit-expenses-overview';
+import { Account, CompanyParams } from '@/packages/features/accounts/src/types/accounts';
 
-const HealthBenefitForm = ({
+const HealthBenefitForm = async ({
   account,
   companyParams,
   employeeCount,
+  expensesOverview,
 }: {
-  account: Database['medreport']['Tables']['accounts']['Row'];
+  account: Account;
-  companyParams: Database['medreport']['Tables']['company_params']['Row'];
+  companyParams: CompanyParams;
   employeeCount: number;
+  expensesOverview: TeamAccountBenefitExpensesOverview;
 }) => {
-  const [currentCompanyParams, setCurrentCompanyParams] =
-    useState<Database['medreport']['Tables']['company_params']['Row']>(
-      companyParams,
-    );
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const form = useForm({
-    resolver: zodResolver(UpdateHealthBenefitSchema),
-    mode: 'onChange',
-    defaultValues: {
-      occurrence: currentCompanyParams.benefit_occurance || 'yearly',
-      amount: currentCompanyParams.benefit_amount || 0,
-    },
-  });
-  const isDirty = form.formState.isDirty;
-
-  const onSubmit = (data: { occurrence: string; amount: number }) => {
-    const promise = async () => {
-      setIsLoading(true);
-      try {
-        await updateHealthBenefit({ ...data, accountId: account.id });
-        setCurrentCompanyParams((prev) => ({
-          ...prev,
-          benefit_amount: data.amount,
-          benefit_occurance: data.occurrence,
-        }));
-      } finally {
-        form.reset(data);
-        setIsLoading(false);
-      }
-    };
-
-    toast.promise(promise, {
-      success: 'Andmed uuendatud',
-      error: 'error',
-    });
-  };
-
   return (
-    <Form {...form}>
+    <div className="flex flex-col gap-6 px-6 text-left">
-      <form
+      <div className="mt-8 flex items-center justify-between">
-        className="flex flex-col gap-6 px-6 text-left"
+        <div>
-        onSubmit={form.handleSubmit(onSubmit)}
+          <h4>
-      >
+            <Trans
-        <div className="mt-8 flex items-center justify-between">
+              i18nKey="billing:pageTitle"
-          <div>
+              values={{ companyName: account.name }}
-            <h4>
-              <Trans
-                i18nKey="billing:pageTitle"
-                values={{ companyName: account.name }}
-              />
-            </h4>
-            <p className="text-muted-foreground text-sm">
-              <Trans i18nKey="billing:description" />
-            </p>
-          </div>
-          <Button
-            type="submit"
-            className="relative"
-            disabled={!isDirty || isLoading}
-          >
-            {isLoading && (
-              <div className="absolute inset-0 flex items-center justify-center">
-                <Spinner />
-              </div>
-            )}
-            <div className={cn({ invisible: isLoading })}>
-              <Trans i18nKey="account:saveChanges" />
-            </div>
-          </Button>
-        </div>
-        <div className="flex flex-row gap-6">
-          <div className="border-border w-1/3 rounded-lg border">
-            <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>
-              <p className="mt-4 text-sm font-medium">
-                <Trans i18nKey="billing:healthBenefitForm.description" />
-              </p>
-              <p className="pt-2 text-2xl font-semibold">
-                {currentCompanyParams.benefit_amount || 0} €
-              </p>
-            </div>
-
-            <Separator />
-
-            <div className="p-6">
-              <HealthBenefitFields />
-            </div>
-          </div>
-
-          <div className="flex-1">
-            <YearlyExpensesOverview
-              employeeCount={employeeCount}
-              companyParams={currentCompanyParams}
             />
-            <p className="text-muted-foreground mt-2 text-sm">
+          </h4>
-              <Trans i18nKey="billing:healthBenefitForm.info" />
+        </div>
+      </div>
+      
+      <div className="flex flex-row gap-6">
+        <div className="border-border w-1/3 rounded-lg border">
+          <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>
+            <p className="mt-4 text-sm font-medium">
+              <Trans i18nKey="billing:healthBenefitForm.description" />
             </p>
           </div>
+
+          <Separator />
+
+          <div className="p-6">
+            <HealthBenefitFormClient 
+              account={account}
+              companyParams={companyParams}
+            />
+          </div>
         </div>
-      </form>
+
-    </Form>
+        <div className="flex-1 space-y-6">
+          <YearlyExpensesOverview
+            employeeCount={employeeCount}
+            expensesOverview={expensesOverview}
+          />
+          
+          <p className="text-muted-foreground text-sm">
+            <Trans i18nKey="billing:healthBenefitForm.info" />
+          </p>
+        </div>
+      </div>
+    </div>
   );
 };
 

app/home/[account]/billing/_components/yearly-expenses-overview.tsx

@@ -1,50 +1,19 @@
-import { useMemo } from 'react';
+'use client';
-
-import { Database } from '@/packages/supabase/src/database.types';
 
 import { Trans } from '@kit/ui/makerkit/trans';
 import { Separator } from '@kit/ui/separator';
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { useTranslation } from 'react-i18next';
+import { TeamAccountBenefitExpensesOverview } from '../../_lib/server/load-team-account-benefit-expenses-overview';
 
 const YearlyExpensesOverview = ({
   employeeCount = 0,
-  companyParams,
+  expensesOverview,
 }: {
   employeeCount?: number;
-  companyParams: Database['medreport']['Tables']['company_params']['Row'];
+  expensesOverview: TeamAccountBenefitExpensesOverview;
 }) => {
-  const monthlyExpensePerEmployee = useMemo(() => {
+  const { i18n: { language } } = useTranslation();
-    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 / 3).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 * 3).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">
@@ -53,41 +22,56 @@ const YearlyExpensesOverview = ({
       </h5>
       <div className="mt-5 flex justify-between">
         <p className="text-sm font-medium">
-          <Trans i18nKey="billing:expensesOverview.monthly" />
+          <Trans i18nKey="billing:expensesOverview.employeeCount" />
         </p>
         <span className="text-primary text-sm font-bold">
-          {monthlyExpensePerEmployee} €
+          {employeeCount}
         </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"
+            i18nKey="billing:expensesOverview.managementFeeTotal"
-            values={{ employeeCount: employeeCount || 0 }}
+            values={{
+              managementFee: formatCurrency({
+                value: expensesOverview.managementFee,
+                locale: language,
+                currencyCode: 'EUR',
+              }),
+            }}
           />
         </p>
         <span className="text-sm font-medium">
-          {(Number(maxYearlyExpensePerEmployee) * employeeCount).toFixed(2)} €
+          {formatCurrency({
+            value: expensesOverview.managementFeeTotal,
+            locale: language,
+            currencyCode: 'EUR',
+          })}
+        </span>
+      </div>
+      <div className="mt-3 mb-4 flex justify-between">
+        <p className="text-sm font-medium">
+          <Trans i18nKey="billing:expensesOverview.currentMonthUsageTotal" />
+        </p>
+        <span className="text-sm font-medium">
+          {formatCurrency({
+            value: expensesOverview.currentMonthUsageTotal,
+            locale: language,
+            currencyCode: 'EUR',
+          })}
         </span>
       </div>
       <Separator />
       <div className="mt-4 flex justify-between">
         <p className="font-semibold">
-          <Trans i18nKey="billing:expensesOverview.sum" />
+          <Trans i18nKey="billing:expensesOverview.total" />
         </p>
         <span className="font-semibold">
-          {companyParams.benefit_amount
+          {formatCurrency({
-            ? companyParams.benefit_amount * employeeCount
+            value: expensesOverview.total,
-            : 0}{' '}
+            locale: language,
-          €
+            currencyCode: 'EUR',
+          })}
         </span>
       </div>
     </div>

app/home/[account]/billing/page.tsx

@@ -7,6 +7,7 @@ import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 import HealthBenefitForm from './_components/health-benefit-form';
+import { loadTeamAccountBenefitExpensesOverview } from '../_lib/server/load-team-account-benefit-expenses-overview';
 
 interface TeamAccountBillingPageProps {
   params: Promise<{ account: string }>;
@@ -27,8 +28,14 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
   const api = createTeamAccountsApi(client);
 
   const account = await api.getTeamAccount(accountSlug);
-  const companyParams = await api.getTeamAccountParams(account.id);
   const { members } = await api.getMembers(accountSlug);
+  const [expensesOverview, companyParams] = await Promise.all([
+    loadTeamAccountBenefitExpensesOverview({
+      companyId: account.id,
+      employeeCount: members.length,
+    }),
+    api.getTeamAccountParams(account.id),
+  ]);
 
   return (
     <PageBody>
@@ -36,6 +43,7 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
         account={account}
         companyParams={companyParams}
         employeeCount={members.length}
+        expensesOverview={expensesOverview}
       />
     </PageBody>
   );

app/home/[account]/members/page.tsx

@@ -54,7 +54,7 @@ async function TeamAccountMembersPage({ params }: TeamAccountMembersPageProps) {
   return (
     <>
       <TeamAccountLayoutPageHeader
-        title={<Trans i18nKey={'common:routes.members'} />}
+        title={<Trans i18nKey={'common:routes.companyMembers'} />}
         description={<AppBreadcrumbs values={{ [account.slug]: account.name }}/>}
       />
 

app/home/[account]/page.tsx

@@ -17,6 +17,7 @@ import {
 } from '~/lib/services/audit/pageView.service';
 
 import { Dashboard } from './_components/dashboard';
+import { loadAccountBenefitStatistics } from './_lib/server/load-team-account-benefit-statistics';
 
 interface TeamAccountHomePageProps {
   params: Promise<{ account: string }>;
@@ -39,9 +40,7 @@ function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
   const teamAccount = use(teamAccountsApi.getTeamAccount(account));
   const { memberParams, members } = use(teamAccountsApi.getMembers(account));
   const bmiThresholds = use(userAnalysesApi.fetchBmiThresholds());
-  const companyParams = use(
+  const accountBenefitStatistics = use(loadAccountBenefitStatistics(teamAccount.id));
-    teamAccountsApi.getTeamAccountParams(teamAccount.id),
-  );
 
   use(
     createPageViewLog({
@@ -57,7 +56,7 @@ function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
         memberParams={memberParams}
         bmiThresholds={bmiThresholds}
         members={members}
-        companyParams={companyParams}
+        accountBenefitStatistics={accountBenefitStatistics}
       />
     </PageBody>
   );

lib/types/account-balance-entry.ts

@@ -1,3 +0,0 @@
-import type { Database } from "@/packages/supabase/src/database.types";
-
-export type AccountBalanceEntry = Database['medreport']['Tables']['account_balance_entries']['Row'];

lib/utils.ts

@@ -1,9 +1,9 @@
-import { Database } from '@/packages/supabase/src/database.types';
 import { type ClassValue, clsx } from 'clsx';
 import Isikukood, { Gender } from 'isikukood';
 import { twMerge } from 'tailwind-merge';
 
 import { BmiCategory } from './types/bmi';
+import type { BmiThresholds } from '@kit/accounts/types/accounts';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -45,10 +45,7 @@ export const bmiFromMetric = (kg: number, cm: number) => {
 };
 
 export function getBmiStatus(
-  thresholds: Omit<
+  thresholds: Omit<BmiThresholds, 'id'>[],
-    Database['medreport']['Tables']['bmi_thresholds']['Row'],
-    'id'
-  >[],
   params: { age: number; height: number; weight: number },
 ): BmiCategory | null {
   const age = params.age;

packages/features/accounts/src/types/accounts.ts

@@ -1,23 +1,25 @@
 import { Database } from '@kit/supabase/database';
 
-export type ApplicationRole =
+export type ApplicationRole = Account['application_role'];
-  Database['medreport']['Tables']['accounts']['Row']['application_role'];
 export enum ApplicationRoleEnum {
   User = 'user',
   Doctor = 'doctor',
   SuperAdmin = 'super_admin',
 }
 
-export type AccountWithParams =
+export type AccountParams =
-  Database['medreport']['Tables']['accounts']['Row'] & {
+  Database['medreport']['Tables']['account_params']['Row'];
-    accountParams:
+
-      | (Pick<
+export type Account = Database['medreport']['Tables']['accounts']['Row'];
-          Database['medreport']['Tables']['account_params']['Row'],
+export type AccountWithParams = Account & {
-          'weight' | 'height'
+  accountParams:
-        > & {
+    | (Pick<AccountParams, 'weight' | 'height'> & {
-          isSmoker:
+        isSmoker: AccountParams['is_smoker'] | null;
-            | Database['medreport']['Tables']['account_params']['Row']['is_smoker']
+      })
-            | null;
+    | null;
-        })
+};
-      | null;
+
-  };
+export type CompanyParams =
+  Database['medreport']['Tables']['company_params']['Row'];
+
+export type BmiThresholds = Database['medreport']['Tables']['bmi_thresholds']['Row'];

packages/features/admin/package.json

@@ -9,6 +9,7 @@
   "devDependencies": {
     "@hookform/resolvers": "^5.0.1",
     "@kit/next": "workspace:*",
+    "@kit/accounts": "workspace:*",
     "@kit/shared": "workspace:*",
     "@kit/supabase": "workspace:*",
     "@kit/tsconfig": "workspace:*",

packages/features/admin/src/components/admin-accounts-table.tsx

@@ -11,7 +11,7 @@ import { EllipsisVertical } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { Database } from '@kit/supabase/database';
+import type { Account } from '@kit/accounts/types/accounts';
 import { Button } from '@kit/ui/button';
 import { Checkbox } from '@kit/ui/checkbox';
 import {
@@ -44,8 +44,6 @@ import { AdminDeleteUserDialog } from './admin-delete-user-dialog';
 import { AdminImpersonateUserDialog } from './admin-impersonate-user-dialog';
 import { AdminResetPasswordDialog } from './admin-reset-password-dialog';
 
-type Account = Database['medreport']['Tables']['accounts']['Row'];
-
 const FiltersSchema = z.object({
   type: z.enum(['all', 'team', 'personal']),
   query: z.string().optional(),

packages/features/admin/src/lib/server/schema/admin-actions.schema.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { Database } from '@kit/supabase/database';
+import { ApplicationRole } from '@kit/accounts/types/accounts';
 
 const ConfirmationSchema = z.object({
   confirmation: z.custom<string>((value) => value === 'CONFIRM'),
@@ -19,9 +19,7 @@ export const DeleteAccountSchema = ConfirmationSchema.extend({
   accountId: z.string().uuid(),
 });
 
-type ApplicationRoleType =
-  Database['medreport']['Tables']['accounts']['Row']['application_role'];
 export const UpdateAccountRoleSchema = z.object({
   accountId: z.string().uuid(),
-  role: z.string() as z.ZodType<ApplicationRoleType>,
+  role: z.string() as z.ZodType<ApplicationRole>,
 });

packages/features/admin/src/lib/server/services/admin-accounts.service.ts

@@ -3,6 +3,7 @@ import 'server-only';
 import { SupabaseClient } from '@supabase/supabase-js';
 
 import { Database } from '@kit/supabase/database';
+import type { ApplicationRole } from '@kit/accounts/types/accounts';
 
 export function createAdminAccountsService(client: SupabaseClient<Database>) {
   return new AdminAccountsService(client);
@@ -25,7 +26,7 @@ class AdminAccountsService {
 
   async updateRole(
     accountId: string,
-    role: Database['medreport']['Tables']['accounts']['Row']['application_role'],
+    role: ApplicationRole,
   ) {
     const { error } = await this.adminClient
       .schema('medreport')

packages/features/team-accounts/src/server/services/webhooks/account-webhooks.service.ts

@@ -1,9 +1,7 @@
 import { z } from 'zod';
 
 import { getLogger } from '@kit/shared/logger';
-import { Database } from '@kit/supabase/database';
+import type { Account } from '@kit/accounts/types/accounts';
-
-type Account = Database['medreport']['Tables']['accounts']['Row'];
 
 export function createAccountWebhooksService() {
   return new AccountWebhooksService();

pnpm-lock.yaml

@@ -647,6 +647,9 @@ importers:
       '@hookform/resolvers':
         specifier: ^5.0.1
         version: 5.2.1(react-hook-form@7.62.0(react@19.1.0))
+      '@kit/accounts':
+        specifier: workspace:*
+        version: link:../accounts
       '@kit/next':
         specifier: workspace:*
         version: link:../../next