Merge branch 'develop' into MED-102

app/api/job/handler/sync-connected-online.ts

@@ -38,7 +38,9 @@ function getSpokenLanguages(spokenLanguages?: string) {
 }
 
 export default async function syncConnectedOnline() {
-  const isProd = process.env.NODE_ENV === 'production';
+  const isProd = !['test', 'localhost'].some((pathString) =>
+    process.env.NEXT_PUBLIC_SITE_URL?.includes(pathString),
+  );
 
   const baseUrl = process.env.CONNECTED_ONLINE_URL;
 
@@ -84,34 +86,20 @@ export default async function syncConnectedOnline() {
     let serviceProviders;
     let jobTitleTranslations;
     // Filter out "Dentas Demo OÜ" in prod or only sync "Dentas Demo OÜ" in any other environment
-    const isDemoClinic = (clinicId: number) => clinicId === 2;
-    if (isProd) {
-      clinics = responseData.Data.T_Lic.filter(({ ID }) => !isDemoClinic(ID));
-      services = responseData.Data.T_Service.filter(
-        ({ ClinicID }) => !isDemoClinic(ClinicID),
-      );
-      serviceProviders = responseData.Data.T_Doctor.filter(
-        ({ ClinicID }) => !isDemoClinic(ClinicID),
-      );
-      jobTitleTranslations = createTranslationMap(
-        responseData.Data.P_JobTitleTranslations.filter(
-          ({ ClinicID }) => !isDemoClinic(ClinicID),
-        ),
-      );
-    } else {
-      clinics = responseData.Data.T_Lic.filter(({ ID }) => isDemoClinic(ID));
-      services = responseData.Data.T_Service.filter(({ ClinicID }) =>
+    const isDemoClinic = (clinicId: number) =>
+      isProd ? clinicId !== 2 : clinicId === 2;
+    clinics = responseData.Data.T_Lic.filter(({ ID }) => isDemoClinic(ID));
+    services = responseData.Data.T_Service.filter(({ ClinicID }) =>
+      isDemoClinic(ClinicID),
+    );
+    serviceProviders = responseData.Data.T_Doctor.filter(({ ClinicID }) =>
+      isDemoClinic(ClinicID),
+    );
+    jobTitleTranslations = createTranslationMap(
+      responseData.Data.P_JobTitleTranslations.filter(({ ClinicID }) =>
         isDemoClinic(ClinicID),
-      );
-      serviceProviders = responseData.Data.T_Doctor.filter(({ ClinicID }) =>
-        isDemoClinic(ClinicID),
-      );
-      jobTitleTranslations = createTranslationMap(
-        responseData.Data.P_JobTitleTranslations.filter(({ ClinicID }) =>
-          isDemoClinic(ClinicID),
-        ),
-      );
-    }
+      ),
+    );
 
     const mappedClinics = clinics.map((clinic) => {
       return {

app/auth/update-account/_lib/server/update-account.ts

@@ -16,7 +16,6 @@ export const onUpdateAccount = enhanceAction(
 
     try {
       await api.updateAccount(params);
-      console.log('SUCCESS', pathsConfig.auth.updateAccountSuccess);
     } catch (err: unknown) {
       if (err instanceof Error) {
         console.warn('On update account error: ' + err.message);

app/home/(user)/(dashboard)/cart/montonio-callback/actions.ts

@@ -2,107 +2,13 @@
 
 import { MontonioOrderToken } from '@/app/home/(user)/_components/cart/types';
 import { loadCurrentUserAccount } from '@/app/home/(user)/_lib/server/load-user-account';
-import { placeOrder, retrieveCart } from '@lib/data/cart';
-import { listProductTypes } from '@lib/data/products';
-import type { StoreOrder } from '@medusajs/types';
+import { retrieveCart } from '@lib/data/cart';
 import jwt from 'jsonwebtoken';
-import { z } from 'zod';
 
-import { AccountWithParams } from '@kit/accounts/types/accounts';
-import { createNotificationsApi } from '@kit/notifications/api';
-import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
+import { handlePlaceOrder } from '../../../_lib/server/cart-actions';
 
-import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
-import { bookAppointment } from '~/lib/services/connected-online.service';
-import { sendOrderToMedipost } from '~/lib/services/medipost/medipostPrivateMessage.service';
-import { getOrderedAnalysisIds } from '~/lib/services/medusaOrder.service';
-import {
-  createAnalysisOrder,
-  getAnalysisOrder,
-} from '~/lib/services/order.service';
-import { getOrderedTtoServices } from '~/lib/services/reservation.service';
-import { FailureReason } from '~/lib/types/connected-online';
-
-const ANALYSIS_PACKAGES_TYPE_HANDLE = 'analysis-packages';
-const ANALYSIS_TYPE_HANDLE = 'synlab-analysis';
 const MONTONIO_PAID_STATUS = 'PAID';
 
-const env = () =>
-  z
-    .object({
-      emailSender: z
-        .string({
-          error: 'EMAIL_SENDER is required',
-        })
-        .min(1),
-      siteUrl: z
-        .string({
-          error: 'NEXT_PUBLIC_SITE_URL is required',
-        })
-        .min(1),
-      isEnabledDispatchOnMontonioCallback: z.boolean({
-        error: 'MEDIPOST_ENABLE_DISPATCH_ON_MONTONIO_CALLBACK is required',
-      }),
-    })
-    .parse({
-      emailSender: process.env.EMAIL_SENDER,
-      siteUrl: process.env.NEXT_PUBLIC_SITE_URL!,
-      isEnabledDispatchOnMontonioCallback:
-        process.env.MEDIPOST_ENABLE_DISPATCH_ON_MONTONIO_CALLBACK === 'true',
-    });
-
-const sendEmail = async ({
-  account,
-  email,
-  analysisPackageName,
-  partnerLocationName,
-  language,
-}: {
-  account: Pick<AccountWithParams, 'name' | 'id'>;
-  email: string;
-  analysisPackageName: string;
-  partnerLocationName: string;
-  language: string;
-}) => {
-  const client = getSupabaseServerAdminClient();
-  try {
-    const { renderSynlabAnalysisPackageEmail } = await import(
-      '@kit/email-templates'
-    );
-    const { getMailer } = await import('@kit/mailers');
-
-    const mailer = await getMailer();
-
-    const { html, subject } = await renderSynlabAnalysisPackageEmail({
-      analysisPackageName,
-      personName: account.name,
-      partnerLocationName,
-      language,
-    });
-
-    await mailer
-      .sendEmail({
-        from: env().emailSender,
-        to: email,
-        subject,
-        html,
-      })
-      .catch((error) => {
-        throw new Error(`Failed to send email, message=${error}`);
-      });
-    await createNotificationsApi(client).createNotification({
-      account_id: account.id,
-      body: html,
-    });
-    await createNotificationsApi(client).createNotification({
-      account_id: account.id,
-      body: html,
-    });
-  } catch (error) {
-    throw new Error(`Failed to send email, message=${error}`);
-  }
-};
-
 async function decodeOrderToken(orderToken: string) {
   const secretKey = process.env.MONTONIO_SECRET_KEY as string;
 
@@ -129,71 +35,6 @@ async function getCartByOrderToken(decoded: MontonioOrderToken) {
   return cart;
 }
 
-async function getOrderResultParameters(medusaOrder: StoreOrder) {
-  const { productTypes } = await listProductTypes();
-  const analysisPackagesType = productTypes.find(
-    ({ metadata }) => metadata?.handle === ANALYSIS_PACKAGES_TYPE_HANDLE,
-  );
-  const analysisType = productTypes.find(
-    ({ metadata }) => metadata?.handle === ANALYSIS_TYPE_HANDLE,
-  );
-
-  const analysisPackageOrderItem = medusaOrder.items?.find(
-    ({ product_type_id }) => product_type_id === analysisPackagesType?.id,
-  );
-  const analysisItems = medusaOrder.items?.filter(
-    ({ product_type_id }) => product_type_id === analysisType?.id,
-  );
-
-  return {
-    medusaOrderId: medusaOrder.id,
-    email: medusaOrder.email,
-    analysisPackageOrder: analysisPackageOrderItem
-      ? {
-          partnerLocationName:
-            (analysisPackageOrderItem?.metadata
-              ?.partner_location_name as string) ?? '',
-          analysisPackageName: analysisPackageOrderItem?.title ?? '',
-        }
-      : null,
-    analysisItemsOrder:
-      Array.isArray(analysisItems) && analysisItems.length > 0
-        ? analysisItems.map(({ product }) => ({
-            analysisName: product?.title ?? '',
-            analysisId: (product?.metadata?.analysisIdOriginal as string) ?? '',
-          }))
-        : null,
-  };
-}
-
-async function sendAnalysisPackageOrderEmail({
-  account,
-  email,
-  analysisPackageOrder,
-}: {
-  account: AccountWithParams;
-  email: string;
-  analysisPackageOrder: {
-    partnerLocationName: string;
-    analysisPackageName: string;
-  };
-}) {
-  const { language } = await createI18nServerInstance();
-  const { analysisPackageName, partnerLocationName } = analysisPackageOrder;
-  try {
-    await sendEmail({
-      account: { id: account.id, name: account.name },
-      email,
-      analysisPackageName,
-      partnerLocationName,
-      language,
-    });
-    console.info(`Successfully sent analysis package order email to ${email}`);
-  } catch (error) {
-    console.error('Failed to send email', error);
-  }
-}
-
 export async function processMontonioCallback(orderToken: string) {
   const { account } = await loadCurrentUserAccount();
   if (!account) {
@@ -203,99 +44,8 @@ export async function processMontonioCallback(orderToken: string) {
   try {
     const decoded = await decodeOrderToken(orderToken);
     const cart = await getCartByOrderToken(decoded);
-
-    const medusaOrder = await placeOrder(cart.id, {
-      revalidateCacheTags: false,
-    });
-    const orderedAnalysisElements = await getOrderedAnalysisIds({
-      medusaOrder,
-    });
-
-    const orderContainsSynlabItems = !!orderedAnalysisElements?.length;
-
-    try {
-      const existingAnalysisOrder = await getAnalysisOrder({
-        medusaOrderId: medusaOrder.id,
-      });
-      console.info(
-        `Analysis order already exists for medusaOrderId=${medusaOrder.id}, orderId=${existingAnalysisOrder.id}`,
-      );
-      return { success: true, orderId: existingAnalysisOrder.id };
-    } catch {
-      // ignored
-    }
-
-    let orderId;
-    if (orderContainsSynlabItems) {
-      orderId = await createAnalysisOrder({
-        medusaOrder,
-        orderedAnalysisElements,
-      });
-    }
-
-    const orderResult = await getOrderResultParameters(medusaOrder);
-
-    const { medusaOrderId, email, analysisPackageOrder, analysisItemsOrder } =
-      orderResult;
-
-    const orderedTtoServices = await getOrderedTtoServices({ medusaOrder });
-    let bookServiceResults: {
-      success: boolean;
-      reason?: FailureReason;
-      serviceId?: number;
-    }[] = [];
-    if (orderedTtoServices?.length) {
-      const bookingPromises = orderedTtoServices.map((service) =>
-        bookAppointment(
-          service.service_id,
-          service.clinic_id,
-          service.service_user_id,
-          service.sync_user_id,
-          service.start_time,
-        ),
-      );
-      bookServiceResults = await Promise.all(bookingPromises);
-    }
-
-    if (email) {
-      if (analysisPackageOrder) {
-        await sendAnalysisPackageOrderEmail({
-          account,
-          email,
-          analysisPackageOrder,
-        });
-      } else {
-        console.info(`Order has no analysis package, skipping email.`);
-      }
-
-      if (analysisItemsOrder) {
-        // @TODO send email for separate analyses
-        console.warn(
-          `Order has analysis items, but no email template exists yet`,
-        );
-      } else {
-        console.info(`Order has no analysis items, skipping email.`);
-      }
-    } else {
-      console.error('Missing email to send order result email', orderResult);
-    }
-
-    if (env().isEnabledDispatchOnMontonioCallback && orderContainsSynlabItems) {
-      await sendOrderToMedipost({ medusaOrderId, orderedAnalysisElements });
-    }
-
-    if (bookServiceResults.some(({ success }) => success === false)) {
-      const failedServiceBookings = bookServiceResults.filter(
-        ({ success }) => success === false,
-      );
-      return {
-        success: false,
-        failedServiceBookings,
-        orderId,
-      };
-    }
-
-    return { success: true, orderId };
+    const result = await handlePlaceOrder({ cart });
+    return result;
   } catch (error) {
     console.error('Failed to place order', error);
     throw new Error(`Failed to place order, message=${error}`);

app/home/(user)/(dashboard)/cart/page.tsx

@@ -1,10 +1,9 @@
-import { notFound } from 'next/navigation';
-
 import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
 import { PageBody, PageHeader } from '@/packages/ui/src/makerkit/page';
 import { retrieveCart } from '@lib/data/cart';
 import { listProductTypes } from '@lib/data/products';
 
+import { AccountBalanceService } from '@kit/accounts/services/account-balance.service';
 import { Trans } from '@kit/ui/trans';
 
 import { withI18n } from '~/lib/i18n/with-i18n';
@@ -14,6 +13,7 @@ import { findProductTypeIdByHandle } from '~/lib/utils';
 import Cart from '../../_components/cart';
 import CartTimer from '../../_components/cart/cart-timer';
 import { EnrichedCartItem } from '../../_components/cart/types';
+import { loadCurrentUserAccount } from '../../_lib/server/load-user-account';
 
 export async function generateMetadata() {
   const { t } = await createI18nServerInstance();
@@ -24,12 +24,19 @@ export async function generateMetadata() {
 }
 
 async function CartPage() {
-  const cart = await retrieveCart().catch((error) => {
-    console.error('Failed to retrieve cart', error);
-    return notFound();
-  });
+  const [cart, { productTypes }, { account }] = await Promise.all([
+    retrieveCart(),
+    listProductTypes(),
+    loadCurrentUserAccount(),
+  ]);
 
-  const { productTypes } = await listProductTypes();
+  if (!account) {
+    return null;
+  }
+
+  const balanceSummary = await new AccountBalanceService().getBalanceSummary(
+    account.id,
+  );
 
   const synlabAnalysisTypeId = findProductTypeIdByHandle(
     productTypes,
@@ -70,9 +77,11 @@ async function CartPage() {
         {isTimerShown && <CartTimer cartItem={item} />}
       </PageHeader>
       <Cart
+        accountId={account.id}
         cart={cart}
         synlabAnalyses={synlabAnalyses}
         ttoServiceItems={ttoServiceItems}
+        balanceSummary={balanceSummary}
       />
     </PageBody>
   );

app/home/(user)/(dashboard)/order/[orderId]/confirmed/order-confirmed-loading-wrapper.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import CartTotals from '@/app/home/(user)/_components/order/cart-totals';
+import OrderDetails from '@/app/home/(user)/_components/order/order-details';
+import OrderItems from '@/app/home/(user)/_components/order/order-items';
+import { retrieveOrder } from '@lib/data/orders';
+import { StoreOrder } from '@medusajs/types';
+import Divider from '@modules/common/components/divider';
+
+import { GlobalLoader } from '@kit/ui/makerkit/global-loader';
+import { PageBody, PageHeader } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { AnalysisOrder } from '~/lib/types/analysis-order';
+
+function OrderConfirmedLoadingWrapper({
+  medusaOrder: initialMedusaOrder,
+  order,
+}: {
+  medusaOrder: StoreOrder;
+  order: AnalysisOrder;
+}) {
+  const [medusaOrder, setMedusaOrder] =
+    useState<StoreOrder>(initialMedusaOrder);
+  const fetchingRef = useRef(false);
+
+  const paymentStatus = medusaOrder.payment_status;
+  const medusaOrderId = order.medusa_order_id;
+
+  useEffect(() => {
+    if (paymentStatus === 'captured') {
+      return;
+    }
+
+    const interval = setInterval(async () => {
+      if (fetchingRef.current) {
+        return;
+      }
+
+      fetchingRef.current = true;
+      const medusaOrder = await retrieveOrder(medusaOrderId, false);
+      fetchingRef.current = false;
+
+      setMedusaOrder(medusaOrder);
+    }, 2_000);
+
+    return () => clearInterval(interval);
+  }, [paymentStatus, medusaOrderId]);
+
+  const isPaid = paymentStatus === 'captured';
+
+  if (!isPaid) {
+    return (
+      <PageBody>
+        <div className="flex h-full flex-col items-center justify-start pt-[10vh]">
+          <div>
+            <GlobalLoader />
+          </div>
+          <h4 className="text-center">
+            <Trans i18nKey="cart:orderConfirmed.paymentConfirmationLoading" />
+          </h4>
+        </div>
+      </PageBody>
+    );
+  }
+
+  return (
+    <PageBody>
+      <PageHeader title={<Trans i18nKey="cart:orderConfirmed.title" />} />
+      <Divider />
+      <div className="small:grid-cols-[1fr_360px] grid grid-cols-1 gap-x-40 gap-y-6 lg:px-4">
+        <OrderDetails order={order} />
+        <Divider />
+        <OrderItems medusaOrder={medusaOrder} />
+        <CartTotals medusaOrder={medusaOrder} />
+      </div>
+    </PageBody>
+  );
+}
+
+export default OrderConfirmedLoadingWrapper;

app/home/(user)/(dashboard)/order/[orderId]/confirmed/page.tsx

@@ -1,19 +1,15 @@
 import { redirect } from 'next/navigation';
 
-import CartTotals from '@/app/home/(user)/_components/order/cart-totals';
-import OrderDetails from '@/app/home/(user)/_components/order/order-details';
-import OrderItems from '@/app/home/(user)/_components/order/order-items';
 import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
 import { retrieveOrder } from '@lib/data/orders';
-import Divider from '@modules/common/components/divider';
 
 import { pathsConfig } from '@kit/shared/config';
-import { PageBody, PageHeader } from '@kit/ui/page';
-import { Trans } from '@kit/ui/trans';
 
 import { withI18n } from '~/lib/i18n/with-i18n';
 import { getAnalysisOrder } from '~/lib/services/order.service';
 
+import OrderConfirmedLoadingWrapper from './order-confirmed-loading-wrapper';
+
 export async function generateMetadata() {
   const { t } = await createI18nServerInstance();
 
@@ -42,16 +38,7 @@ async function OrderConfirmedPage(props: {
   }
 
   return (
-    <PageBody>
-      <PageHeader title={<Trans i18nKey="cart:orderConfirmed.title" />} />
-      <Divider />
-      <div className="small:grid-cols-[1fr_360px] grid grid-cols-1 gap-x-40 gap-y-6 lg:px-4">
-        <OrderDetails order={order} />
-        <Divider />
-        <OrderItems medusaOrder={medusaOrder} />
-        <CartTotals medusaOrder={medusaOrder} />
-      </div>
-    </PageBody>
+    <OrderConfirmedLoadingWrapper medusaOrder={medusaOrder} order={order} />
   );
 }
 

app/home/(user)/(dashboard)/order/page.tsx

@@ -18,6 +18,8 @@ import { listOrders } from '~/medusa/lib/data/orders';
 import { HomeLayoutPageHeader } from '../../_components/home-page-header';
 import OrderBlock from '../../_components/orders/order-block';
 
+const ORDERS_LIMIT = 50;
+
 export async function generateMetadata() {
   const { t } = await createI18nServerInstance();
 
@@ -27,10 +29,13 @@ export async function generateMetadata() {
 }
 
 async function OrdersPage() {
-  const medusaOrders = await listOrders();
-  const analysisOrders = await getAnalysisOrders();
-  const ttoOrders = await getTtoOrders();
-  const { productTypes } = await listProductTypes();
+  const [medusaOrders, analysisOrders, ttoOrders, { productTypes }] =
+    await Promise.all([
+      listOrders(ORDERS_LIMIT),
+      getAnalysisOrders(),
+      getTtoOrders(),
+      listProductTypes(),
+    ]);
 
   if (!medusaOrders || !productTypes || !ttoOrders) {
     redirect(pathsConfig.auth.signIn);

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

@@ -16,6 +16,7 @@ import Dashboard from '../_components/dashboard';
 import DashboardCards from '../_components/dashboard-cards';
 import Recommendations from '../_components/recommendations';
 import RecommendationsSkeleton from '../_components/recommendations-skeleton';
+import { isValidOpenAiEnv } from '../_lib/server/is-valid-open-ai-env';
 import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
 
 export const generateMetadata = async () => {
@@ -52,17 +53,16 @@ async function UserHomePage() {
       />
       <PageBody>
         <Dashboard account={account} bmiThresholds={bmiThresholds} />
-        {process.env.OPENAI_API_KEY &&
-          process.env.PROMPT_ID_ANALYSIS_RECOMMENDATIONS && (
-            <>
-              <h4>
-                <Trans i18nKey="dashboard:recommendations.title" />
-              </h4>
-              <Suspense fallback={<RecommendationsSkeleton />}>
-                <Recommendations account={account} />
-              </Suspense>
-            </>
-          )}
+        {(await isValidOpenAiEnv()) && (
+          <>
+            <h4>
+              <Trans i18nKey="dashboard:recommendations.title" />
+            </h4>
+            <Suspense fallback={<RecommendationsSkeleton />}>
+              <Recommendations account={account} />
+            </Suspense>
+          </>
+        )}
       </PageBody>
     </>
   );

app/home/(user)/_components/booking/booking-container.tsx

@@ -32,7 +32,16 @@ const BookingContainer = ({
     <BookingProvider category={{ products }} service={cartItem?.product}>
       <div className="xs:flex-row flex max-h-full flex-col gap-6">
         <div className="flex flex-col">
-          <ServiceSelector products={products} />
+          <ServiceSelector
+            products={products.filter((product) => {
+              if (product.metadata?.serviceIds) {
+                return Array.isArray(
+                  JSON.parse(product.metadata.serviceIds as string),
+                );
+              }
+              return false;
+            })}
+          />
           <BookingCalendar />
           <LocationSelector />
         </div>

app/home/(user)/_components/booking/booking-pagination.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { Trans } from '@kit/ui/makerkit/trans';
+import { cn } from '@kit/ui/shadcn';
+import { Button } from '@kit/ui/shadcn/button';
+
+const BookingPagination = ({
+  totalPages,
+  setCurrentPage,
+  currentPage,
+}: {
+  totalPages: number;
+  setCurrentPage: (page: number) => void;
+  currentPage: number;
+}) => {
+  const { t } = useTranslation();
+
+  const generatePageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 5;
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 4; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push(1);
+        pages.push('...');
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push('...');
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  if (totalPages === 0) {
+    return (
+      <div className="wrap text-muted-foreground flex size-full content-center-safe justify-center-safe">
+        <p>{t('booking:noResults')}</p>
+      </div>
+    );
+  }
+
+  return (
+    totalPages > 1 && (
+      <div className="flex items-center justify-between">
+        <div className="text-muted-foreground text-sm">
+          {t('common:pageOfPages', {
+            page: currentPage,
+            total: totalPages,
+          })}
+        </div>
+
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(currentPage - 1)}
+            disabled={currentPage === 1}
+          >
+            <Trans i18nKey="common:previous" defaultValue="Previous" />
+          </Button>
+
+          {generatePageNumbers().map((page, index) => (
+            <Button
+              key={index}
+              variant={page === currentPage ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => typeof page === 'number' && setCurrentPage(page)}
+              disabled={page === '...'}
+              className={cn(
+                'min-w-[2rem]',
+                page === '...' && 'cursor-default hover:bg-transparent',
+              )}
+            >
+              {page}
+            </Button>
+          ))}
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+          >
+            <Trans i18nKey="common:next" defaultValue="Next" />
+          </Button>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default BookingPagination;

app/home/(user)/_components/booking/booking.provider.tsx

@@ -45,7 +45,6 @@ export const BookingProvider: React.FC<{
   const updateTimeSlots = async (serviceIds: number[]) => {
     setIsLoadingTimeSlots(true);
     try {
-      console.log('serviceIds', serviceIds, selectedLocationId);
       const response = await getAvailableTimeSlotsForDisplay(
         serviceIds,
         selectedLocationId,

app/home/(user)/_components/booking/time-slots.tsx

@@ -11,6 +11,7 @@ import { pathsConfig } from '@kit/shared/config';
 import { formatDateAndTime } from '@kit/shared/utils';
 import { Button } from '@kit/ui/shadcn/button';
 import { Card } from '@kit/ui/shadcn/card';
+import { Skeleton } from '@kit/ui/shadcn/skeleton';
 import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
@@ -19,6 +20,7 @@ import { updateReservationTime } from '~/lib/services/reservation.service';
 
 import { createInitialReservationAction } from '../../_lib/server/actions';
 import { EnrichedCartItem } from '../cart/types';
+import BookingPagination from './booking-pagination';
 import { ServiceProvider, TimeSlot } from './booking.context';
 import { useBooking } from './booking.provider';
 
@@ -68,57 +70,16 @@ const TimeSlots = ({
         }) ?? [],
         'StartTime',
         'asc',
-      ),
+      ).filter(({ StartTime }) => isSameDay(StartTime, selectedDate)),
     [booking.timeSlots, selectedDate],
   );
 
-  const totalPages = Math.ceil(filteredBookings.length / PAGE_SIZE);
-
   const paginatedBookings = useMemo(() => {
     const startIndex = (currentPage - 1) * PAGE_SIZE;
     const endIndex = startIndex + PAGE_SIZE;
     return filteredBookings.slice(startIndex, endIndex);
   }, [filteredBookings, currentPage, PAGE_SIZE]);
 
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
-
-  const generatePageNumbers = () => {
-    const pages = [];
-    const maxVisiblePages = 5;
-
-    if (totalPages <= maxVisiblePages) {
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      if (currentPage <= 3) {
-        for (let i = 1; i <= 4; i++) {
-          pages.push(i);
-        }
-        pages.push('...');
-        pages.push(totalPages);
-      } else if (currentPage >= totalPages - 2) {
-        pages.push(1);
-        pages.push('...');
-        for (let i = totalPages - 3; i <= totalPages; i++) {
-          pages.push(i);
-        }
-      } else {
-        pages.push(1);
-        pages.push('...');
-        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-          pages.push(i);
-        }
-        pages.push('...');
-        pages.push(totalPages);
-      }
-    }
-
-    return pages;
-  };
-
   if (!booking?.timeSlots?.length) {
     return null;
   }
@@ -143,12 +104,17 @@ const TimeSlots = ({
       timeSlot.StartTime,
       booking.selectedLocationId ? booking.selectedLocationId : null,
       comments,
-    ).then(() => {
-      if (onComplete) {
-        onComplete();
-      }
-      router.push(pathsConfig.app.cart);
-    });
+    )
+      .then(() => {
+        if (onComplete) {
+          onComplete();
+        }
+        router.push(pathsConfig.app.cart);
+      })
+      .catch((error) => {
+        console.error('Booking error: ', error);
+        throw error;
+      });
 
     toast.promise(() => bookTimePromise, {
       success: <Trans i18nKey={'booking:bookTimeSuccess'} />,
@@ -203,10 +169,13 @@ const TimeSlots = ({
   };
 
   return (
-    <div className="flex w-full flex-col gap-4">
+    <Skeleton
+      isLoading={booking.isLoadingTimeSlots}
+      className="flex w-full flex-col gap-4"
+    >
       <div className="flex h-full w-full flex-col gap-2 overflow-auto">
         {paginatedBookings.map((timeSlot, index) => {
-          const isEHIF = timeSlot.HKServiceID > 0;
+          const isHaigeKassa = timeSlot.HKServiceID > 0;
           const serviceProviderTitle = getServiceProviderTitle(
             currentLocale,
             timeSlot.serviceProvider,
@@ -214,6 +183,7 @@ const TimeSlots = ({
           const price =
             booking.selectedService?.variants?.[0]?.calculated_price
               ?.calculated_amount ?? cartItem?.unit_price;
+
           return (
             <Card
               className="xs:flex xs:justify-between grid w-full justify-center-safe gap-3 p-4"
@@ -224,7 +194,7 @@ const TimeSlots = ({
                 <div className="flex">
                   <h5
                     className={cn(
-                      (serviceProviderTitle || isEHIF) &&
+                      (serviceProviderTitle || isHaigeKassa) &&
                         "after:mx-2 after:content-['·']",
                     )}
                   >
@@ -232,12 +202,14 @@ const TimeSlots = ({
                   </h5>
                   {serviceProviderTitle && (
                     <span
-                      className={cn(isEHIF && "after:mx-2 after:content-['·']")}
+                      className={cn(
+                        isHaigeKassa && "after:mx-2 after:content-['·']",
+                      )}
                     >
                       {serviceProviderTitle}
                     </span>
                   )}
-                  {isEHIF && <span>{t('booking:ehifBooking')}</span>}
+                  {isHaigeKassa && <span>{t('booking:ehifBooking')}</span>}
                 </div>
                 <div className="flex text-xs">{timeSlot.location?.address}</div>
               </div>
@@ -256,63 +228,14 @@ const TimeSlots = ({
             </Card>
           );
         })}
-
-        {!paginatedBookings.length && (
-          <div className="wrap text-muted-foreground flex size-full content-center-safe justify-center-safe">
-            <p>{t('booking:noResults')}</p>
-          </div>
-        )}
       </div>
 
-      {totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <div className="text-muted-foreground text-sm">
-            {t('common:pageOfPages', {
-              page: currentPage,
-              total: totalPages,
-            })}
-          </div>
-
-          <div className="flex items-center gap-1">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handlePageChange(currentPage - 1)}
-              disabled={currentPage === 1}
-            >
-              <Trans i18nKey="common:previous" defaultValue="Previous" />
-            </Button>
-
-            {generatePageNumbers().map((page, index) => (
-              <Button
-                key={index}
-                variant={page === currentPage ? 'default' : 'outline'}
-                size="sm"
-                onClick={() =>
-                  typeof page === 'number' && handlePageChange(page)
-                }
-                disabled={page === '...'}
-                className={cn(
-                  'min-w-[2rem]',
-                  page === '...' && 'cursor-default hover:bg-transparent',
-                )}
-              >
-                {page}
-              </Button>
-            ))}
-
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handlePageChange(currentPage + 1)}
-              disabled={currentPage === totalPages}
-            >
-              <Trans i18nKey="common:next" defaultValue="Next" />
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
+      <BookingPagination
+        totalPages={Math.ceil(filteredBookings.length / PAGE_SIZE)}
+        setCurrentPage={setCurrentPage}
+        currentPage={currentPage}
+      />
+    </Skeleton>
   );
 };
 

app/home/(user)/_components/cart/index.tsx

@@ -2,17 +2,19 @@
 
 import { useState } from 'react';
 
-import { handleNavigateToPayment } from '@/lib/services/medusaCart.service';
+import { useRouter } from 'next/navigation';
+
 import { formatCurrency } from '@/packages/shared/src/utils';
-import { initiatePaymentSession } from '@lib/data/cart';
 import { StoreCart, StoreCartLineItem } from '@medusajs/types';
 import { Loader2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
+import { AccountBalanceSummary } from '@kit/accounts/services/account-balance.service';
 import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader } from '@kit/ui/card';
 import { Trans } from '@kit/ui/trans';
 
+import { initiatePayment } from '../../_lib/server/cart-actions';
 import AnalysisLocation from './analysis-location';
 import CartItems from './cart-items';
 import CartServiceItems from './cart-service-items';
@@ -22,25 +24,31 @@ import { EnrichedCartItem } from './types';
 const IS_DISCOUNT_SHOWN = true as boolean;
 
 export default function Cart({
+  accountId,
   cart,
   synlabAnalyses,
   ttoServiceItems,
+  balanceSummary,
 }: {
+  accountId: string;
   cart: StoreCart | null;
   synlabAnalyses: StoreCartLineItem[];
   ttoServiceItems: EnrichedCartItem[];
+  balanceSummary: AccountBalanceSummary | null;
 }) {
   const {
     i18n: { language },
   } = useTranslation();
 
   const [isInitiatingSession, setIsInitiatingSession] = useState(false);
+  const router = useRouter();
   const [unavailableLineItemIds, setUnavailableLineItemIds] =
     useState<string[]>();
 
   const items = cart?.items ?? [];
+  const hasCartItems = cart && Array.isArray(items) && items.length > 0;
 
-  if (!cart || items.length === 0) {
+  if (!hasCartItems) {
     return (
       <div className="content-container py-5 lg:px-4">
         <div>
@@ -60,32 +68,42 @@ export default function Cart({
     );
   }
 
-  async function initiatePayment() {
+  async function initiateSession() {
     setIsInitiatingSession(true);
-    const response = await initiatePaymentSession(cart!, {
-      provider_id: 'pp_montonio_montonio',
-    });
-    if (response.payment_collection) {
-      const { payment_sessions } = response.payment_collection;
-      const paymentSessionId = payment_sessions![0]!.id;
-      const result = await handleNavigateToPayment({
-        language,
-        paymentSessionId,
-      });
-      if (result.url) {
-        window.location.href = result.url;
+
+    try {
+      const { url, isFullyPaidByBenefits, orderId, unavailableLineItemIds } =
+        await initiatePayment({
+          accountId,
+          balanceSummary: balanceSummary!,
+          cart: cart!,
+          language,
+        });
+      if (unavailableLineItemIds) {
+        setUnavailableLineItemIds(unavailableLineItemIds);
       }
-      if (result.unavailableLineItemIds) {
-        setUnavailableLineItemIds(result.unavailableLineItemIds);
+      if (url) {
+        window.location.href = url;
+      } else if (isFullyPaidByBenefits) {
+        if (typeof orderId !== 'number') {
+          throw new Error('Order ID is missing');
+        }
+        router.push(`/home/order/${orderId}/confirmed`);
       }
-    } else {
+    } catch (error) {
+      console.error('Failed to initiate payment', error);
       setIsInitiatingSession(false);
     }
   }
 
-  const hasCartItems = Array.isArray(cart.items) && cart.items.length > 0;
   const isLocationsShown = synlabAnalyses.length > 0;
 
+  const companyBenefitsTotal = balanceSummary?.totalBalance ?? 0;
+  const montonioTotal =
+    cart && companyBenefitsTotal > 0
+      ? cart.total - companyBenefitsTotal
+      : cart.total;
+
   return (
     <div className="small:grid-cols-[1fr_360px] grid grid-cols-1 gap-x-40 lg:px-4">
       <div className="flex flex-col gap-y-6 bg-white">
@@ -119,7 +137,7 @@ export default function Cart({
               </p>
             </div>
           </div>
-          <div className="flex gap-x-4 px-4 py-2 sm:justify-end sm:px-6 sm:py-4">
+          <div className="flex gap-x-4 px-4 pt-2 sm:justify-end sm:px-6 sm:pt-4">
             <div className="w-full sm:mr-[42px] sm:w-auto">
               <p className="text-muted-foreground ml-0 text-sm font-bold">
                 <Trans i18nKey="cart:order.promotionsTotal" />
@@ -135,6 +153,27 @@ export default function Cart({
               </p>
             </div>
           </div>
+          {companyBenefitsTotal > 0 && (
+            <div className="flex gap-x-4 px-4 py-2 sm:justify-end sm:px-6 sm:py-4">
+              <div className="w-full sm:mr-[42px] sm:w-auto">
+                <p className="text-muted-foreground ml-0 text-sm font-bold">
+                  <Trans i18nKey="cart:order.companyBenefitsTotal" />
+                </p>
+              </div>
+              <div className={`sm:mr-[112px] sm:w-[50px]`}>
+                <p className="text-right text-sm">
+                  {formatCurrency({
+                    value:
+                      companyBenefitsTotal > cart.total
+                        ? cart.total
+                        : companyBenefitsTotal,
+                    currencyCode: cart.currency_code,
+                    locale: language,
+                  })}
+                </p>
+              </div>
+            </div>
+          )}
           <div className="flex gap-x-4 px-4 sm:justify-end sm:px-6">
             <div className="w-full sm:mr-[42px] sm:w-auto">
               <p className="ml-0 text-sm font-bold">
@@ -144,7 +183,7 @@ export default function Cart({
             <div className={`sm:mr-[112px] sm:w-[50px]`}>
               <p className="text-right text-sm">
                 {formatCurrency({
-                  value: cart.total,
+                  value: montonioTotal < 0 ? 0 : montonioTotal,
                   currencyCode: cart.currency_code,
                   locale: language,
                 })}
@@ -180,10 +219,6 @@ export default function Cart({
                 cart={{ ...cart }}
                 synlabAnalyses={synlabAnalyses}
               />
-              <AnalysisLocation
-                cart={{ ...cart }}
-                synlabAnalyses={synlabAnalyses}
-              />
             </CardContent>
           </Card>
         )}
@@ -192,7 +227,7 @@ export default function Cart({
       <div>
         <Button
           className="h-10"
-          onClick={initiatePayment}
+          onClick={initiateSession}
           disabled={isInitiatingSession}
         >
           {isInitiatingSession && (

app/home/(user)/_components/cart/types.ts

@@ -1,5 +1,6 @@
-import { StoreCartLineItem } from "@medusajs/types";
-import { Reservation } from "~/lib/types/reservation";
+import { StoreCartLineItem } from '@medusajs/types';
+
+import { Reservation } from '~/lib/types/reservation';
 
 export interface MontonioOrderToken {
   uuid: string;
@@ -12,7 +13,7 @@ export interface MontonioOrderToken {
     | 'CANCELLED'
     | 'PENDING'
     | 'EXPIRED'
-    | 'REFUNDED';
+    | 'REFUNDED'
     | 'PAID'
     | 'FAILED'
     | 'CANCELLED'

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

@@ -1,14 +1,39 @@
 import Link from 'next/link';
 
+import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
+import { formatCurrency } from '@/packages/shared/src/utils';
 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 { cn } from '@kit/ui/lib/utils';
 import { Trans } from '@kit/ui/trans';
 
-export default function DashboardCards() {
+import { getAccountBalanceSummary } from '../_lib/server/balance-actions';
+import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
+
+export default async function DashboardCards() {
+  const { language } = await createI18nServerInstance();
+
+  const { account } = await loadCurrentUserAccount();
+  const balanceSummary = account
+    ? await getAccountBalanceSummary(account.id)
+    : null;
+
   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 +63,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,10 @@ 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 +140,7 @@ export default function Dashboard({
   bmiThresholds,
 }: {
   account: AccountWithParams;
-  bmiThresholds: Omit<
-    Database['medreport']['Tables']['bmi_thresholds']['Row'],
-    'id'
-  >[];
+  bmiThresholds: Omit<BmiThresholds, 'id'>[];
 }) {
   const height = account.accountParams?.height || 0;
   const weight = account.accountParams?.weight || 0;

app/home/(user)/_components/order/cart-totals.tsx

@@ -8,6 +8,11 @@ import { useTranslation } from 'react-i18next';
 
 import { Trans } from '@kit/ui/trans';
 
+const PaymentProviderIds = {
+  COMPANY_BENEFITS: 'pp_company-benefits_company-benefits',
+  MONTONIO: 'pp_montonio_montonio',
+};
+
 export default function CartTotals({
   medusaOrder,
 }: {
@@ -20,11 +25,18 @@ export default function CartTotals({
     currency_code,
     total,
     subtotal,
-    tax_total,
     discount_total,
     gift_card_total,
+    payment_collections,
   } = medusaOrder;
 
+  const montonioPayment = payment_collections?.[0]?.payments?.find(
+    ({ provider_id }) => provider_id === PaymentProviderIds.MONTONIO,
+  );
+  const companyBenefitsPayment = payment_collections?.[0]?.payments?.find(
+    ({ provider_id }) => provider_id === PaymentProviderIds.COMPANY_BENEFITS,
+  );
+
   return (
     <div>
       <div className="txt-medium text-ui-fg-subtle flex flex-col gap-y-2">
@@ -87,7 +99,9 @@ export default function CartTotals({
           </div>
         )}
       </div>
+
       <div className="my-4 h-px w-full border-b border-gray-200" />
+
       <div className="text-ui-fg-base txt-medium mb-2 flex items-center justify-between">
         <span className="font-bold">
           <Trans i18nKey="cart:order.total" />
@@ -104,7 +118,48 @@ export default function CartTotals({
           })}
         </span>
       </div>
-      <div className="mt-4 h-px w-full border-b border-gray-200" />
+
+      <div className="my-4 h-px w-full border-b border-gray-200" />
+
+      <div className="txt-medium text-ui-fg-subtle flex flex-col gap-y-2">
+        {companyBenefitsPayment && (
+          <div className="flex items-center justify-between">
+            <span className="flex items-center gap-x-1">
+              <Trans i18nKey="cart:order.benefitsTotal" />
+            </span>
+            <span
+              data-testid="cart-subtotal"
+              data-value={companyBenefitsPayment.amount || 0}
+            >
+              -{' '}
+              {formatCurrency({
+                value: companyBenefitsPayment.amount ?? 0,
+                currencyCode: currency_code,
+                locale: language,
+              })}
+            </span>
+          </div>
+        )}
+
+        {montonioPayment && (
+          <div className="flex items-center justify-between">
+            <span className="flex items-center gap-x-1">
+              <Trans i18nKey="cart:order.montonioTotal" />
+            </span>
+            <span
+              data-testid="cart-subtotal"
+              data-value={montonioPayment.amount || 0}
+            >
+              -{' '}
+              {formatCurrency({
+                value: montonioPayment.amount ?? 0,
+                currencyCode: currency_code,
+                locale: language,
+              })}
+            </span>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

app/home/(user)/_components/order/order-details.tsx

@@ -2,8 +2,6 @@ import { formatDate } from 'date-fns';
 
 import { Trans } from '@kit/ui/trans';
 
-import type { AnalysisOrder } from '~/lib/types/order';
-
 export default function OrderDetails({
   order,
 }: {
@@ -15,7 +13,7 @@ export default function OrderDetails({
         <span className="font-bold">
           <Trans i18nKey="cart:orderConfirmed.orderNumber" />:{' '}
         </span>
-        <span>{order.id}</span>
+        <span className="break-all">{order.id}</span>
       </div>
 
       <div>

app/home/(user)/_lib/server/balance-actions.ts

@@ -0,0 +1,18 @@
+'use server';
+
+import {
+  AccountBalanceService,
+  AccountBalanceSummary,
+} from '@kit/accounts/services/account-balance.service';
+
+export async function getAccountBalanceSummary(
+  accountId: string,
+): Promise<AccountBalanceSummary | null> {
+  try {
+    const service = new AccountBalanceService();
+    return await service.getBalanceSummary(accountId);
+  } catch (error) {
+    console.error('Error getting account balance summary:', error);
+    return null;
+  }
+}

app/home/(user)/_lib/server/cart-actions.ts

@@ -0,0 +1,365 @@
+'use server';
+
+import { AccountWithParams } from '@/packages/features/accounts/src/types/accounts';
+import { createNotificationsApi } from '@/packages/features/notifications/src/server/api';
+import { getSupabaseServerAdminClient } from '@/packages/supabase/src/clients/server-admin-client';
+import { listProductTypes } from '@lib/data';
+import { initiateMultiPaymentSession, placeOrder } from '@lib/data/cart';
+import type { StoreCart, StoreOrder } from '@medusajs/types';
+import jwt from 'jsonwebtoken';
+import { z } from 'zod';
+
+import type { AccountBalanceSummary } from '@kit/accounts/services/account-balance.service';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { bookAppointment } from '~/lib/services/connected-online.service';
+import { sendOrderToMedipost } from '~/lib/services/medipost/medipostPrivateMessage.service';
+import { handleNavigateToPayment } from '~/lib/services/medusaCart.service';
+import { getOrderedAnalysisIds } from '~/lib/services/medusaOrder.service';
+import {
+  createAnalysisOrder,
+  getAnalysisOrder,
+} from '~/lib/services/order.service';
+import { getOrderedTtoServices } from '~/lib/services/reservation.service';
+import { FailureReason } from '~/lib/types/connected-online';
+
+import { loadCurrentUserAccount } from './load-user-account';
+
+const ANALYSIS_PACKAGES_TYPE_HANDLE = 'analysis-packages';
+const ANALYSIS_TYPE_HANDLE = 'synlab-analysis';
+
+const env = () =>
+  z
+    .object({
+      emailSender: z
+        .string({
+          error: 'EMAIL_SENDER is required',
+        })
+        .min(1),
+      siteUrl: z
+        .string({
+          error: 'NEXT_PUBLIC_SITE_URL is required',
+        })
+        .min(1),
+      isEnabledDispatchOnMontonioCallback: z.boolean({
+        error: 'MEDIPOST_ENABLE_DISPATCH_ON_MONTONIO_CALLBACK is required',
+      }),
+      medusaBackendPublicUrl: z
+        .string({
+          error: 'MEDUSA_BACKEND_PUBLIC_URL is required',
+        })
+        .min(1),
+      companyBenefitsPaymentSecretKey: z
+        .string({
+          error: 'COMPANY_BENEFITS_PAYMENT_SECRET_KEY is required',
+        })
+        .min(1),
+    })
+    .parse({
+      emailSender: process.env.EMAIL_SENDER,
+      siteUrl: process.env.NEXT_PUBLIC_SITE_URL!,
+      isEnabledDispatchOnMontonioCallback:
+        process.env.MEDIPOST_ENABLE_DISPATCH_ON_MONTONIO_CALLBACK === 'true',
+      medusaBackendPublicUrl: process.env.MEDUSA_BACKEND_PUBLIC_URL!,
+      companyBenefitsPaymentSecretKey:
+        process.env.COMPANY_BENEFITS_PAYMENT_SECRET_KEY!,
+    });
+
+export const initiatePayment = async ({
+  accountId,
+  balanceSummary,
+  cart,
+  language,
+}: {
+  accountId: string;
+  balanceSummary: AccountBalanceSummary;
+  cart: StoreCart;
+  language: string;
+}) => {
+  try {
+    const {
+      montonioPaymentSessionId,
+      companyBenefitsPaymentSessionId,
+      totalByMontonio,
+      totalByBenefits,
+      isFullyPaidByBenefits,
+    } = await initiateMultiPaymentSession(cart, balanceSummary.totalBalance);
+
+    if (!isFullyPaidByBenefits) {
+      if (!montonioPaymentSessionId) {
+        throw new Error('Montonio payment session ID is missing');
+      }
+      const props = await handleNavigateToPayment({
+        language,
+        paymentSessionId: montonioPaymentSessionId,
+        amount: totalByMontonio,
+        currencyCode: cart.currency_code,
+        cartId: cart.id,
+      });
+      return { ...props, isFullyPaidByBenefits };
+    } else {
+      // place order if all paid already
+      const { orderId } = await handlePlaceOrder({ cart });
+
+      const companyBenefitsOrderToken = jwt.sign(
+        {
+          accountId,
+          companyBenefitsPaymentSessionId,
+          orderId,
+          totalByBenefits,
+        },
+        env().companyBenefitsPaymentSecretKey,
+        {
+          algorithm: 'HS256',
+        },
+      );
+      const webhookResponse = await fetch(
+        `${env().medusaBackendPublicUrl}/hooks/payment/company-benefits_company-benefits`,
+        {
+          method: 'POST',
+          body: JSON.stringify({
+            orderToken: companyBenefitsOrderToken,
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        },
+      );
+      if (!webhookResponse.ok) {
+        throw new Error('Failed to send company benefits webhook');
+      }
+      return { isFullyPaidByBenefits, orderId, unavailableLineItemIds: [] };
+    }
+  } catch (error) {
+    console.error('Error initiating payment', error);
+  }
+
+  return {
+    url: null,
+    isFullyPaidByBenefits: false,
+    orderId: null,
+    unavailableLineItemIds: [],
+  };
+};
+
+export async function handlePlaceOrder({ cart }: { cart: StoreCart }) {
+  const { account } = await loadCurrentUserAccount();
+  if (!account) {
+    throw new Error('Account not found in context');
+  }
+
+  try {
+    const medusaOrder = await placeOrder(cart.id, {
+      revalidateCacheTags: false,
+    });
+    const orderedAnalysisElements = await getOrderedAnalysisIds({
+      medusaOrder,
+    });
+
+    const orderContainsSynlabItems = !!orderedAnalysisElements?.length;
+
+    try {
+      const existingAnalysisOrder = await getAnalysisOrder({
+        medusaOrderId: medusaOrder.id,
+      });
+      console.info(
+        `Analysis order already exists for medusaOrderId=${medusaOrder.id}, orderId=${existingAnalysisOrder.id}`,
+      );
+      return { success: true, orderId: existingAnalysisOrder.id };
+    } catch {
+      // ignored
+    }
+
+    let orderId: number | undefined = undefined;
+    if (orderContainsSynlabItems) {
+      orderId = await createAnalysisOrder({
+        medusaOrder,
+        orderedAnalysisElements,
+      });
+    }
+
+    const orderResult = await getOrderResultParameters(medusaOrder);
+
+    const { medusaOrderId, email, analysisPackageOrder, analysisItemsOrder } =
+      orderResult;
+
+    const orderedTtoServices = await getOrderedTtoServices({ medusaOrder });
+    let bookServiceResults: {
+      success: boolean;
+      reason?: FailureReason;
+      serviceId?: number;
+    }[] = [];
+    if (orderedTtoServices?.length) {
+      const bookingPromises = orderedTtoServices.map((service) =>
+        bookAppointment(
+          service.service_id,
+          service.clinic_id,
+          service.service_user_id,
+          service.sync_user_id,
+          service.start_time,
+        ),
+      );
+      bookServiceResults = await Promise.all(bookingPromises);
+    }
+    // TODO: SEND EMAIL
+
+    if (email) {
+      if (analysisPackageOrder) {
+        await sendAnalysisPackageOrderEmail({
+          account,
+          email,
+          analysisPackageOrder,
+        });
+      } else {
+        console.info(`Order has no analysis package, skipping email.`);
+      }
+
+      if (analysisItemsOrder) {
+        // @TODO send email for separate analyses
+        console.warn(
+          `Order has analysis items, but no email template exists yet`,
+        );
+      } else {
+        console.info(`Order has no analysis items, skipping email.`);
+      }
+    } else {
+      console.error('Missing email to send order result email', orderResult);
+    }
+
+    if (env().isEnabledDispatchOnMontonioCallback) {
+      await sendOrderToMedipost({ medusaOrderId, orderedAnalysisElements });
+    }
+
+    if (bookServiceResults.some(({ success }) => success === false)) {
+      const failedServiceBookings = bookServiceResults.filter(
+        ({ success }) => success === false,
+      );
+      return {
+        success: false,
+        failedServiceBookings,
+        orderId,
+      };
+    }
+
+    return { success: true, orderId };
+  } catch (error) {
+    console.error('Failed to place order', error);
+    throw new Error(`Failed to place order, message=${error}`);
+  }
+}
+
+async function sendAnalysisPackageOrderEmail({
+  account,
+  email,
+  analysisPackageOrder,
+}: {
+  account: AccountWithParams;
+  email: string;
+  analysisPackageOrder: {
+    partnerLocationName: string;
+    analysisPackageName: string;
+  };
+}) {
+  const { language } = await createI18nServerInstance();
+  const { analysisPackageName, partnerLocationName } = analysisPackageOrder;
+  try {
+    await sendEmail({
+      account: { id: account.id, name: account.name },
+      email,
+      analysisPackageName,
+      partnerLocationName,
+      language,
+    });
+    console.info(`Successfully sent analysis package order email to ${email}`);
+  } catch (error) {
+    console.error(
+      `Failed to send analysis package order email to ${email}`,
+      error,
+    );
+  }
+}
+
+async function getOrderResultParameters(medusaOrder: StoreOrder) {
+  const { productTypes } = await listProductTypes();
+  const analysisPackagesType = productTypes.find(
+    ({ metadata }) => metadata?.handle === ANALYSIS_PACKAGES_TYPE_HANDLE,
+  );
+  const analysisType = productTypes.find(
+    ({ metadata }) => metadata?.handle === ANALYSIS_TYPE_HANDLE,
+  );
+
+  const analysisPackageOrderItem = medusaOrder.items?.find(
+    ({ product_type_id }) => product_type_id === analysisPackagesType?.id,
+  );
+  const analysisItems = medusaOrder.items?.filter(
+    ({ product_type_id }) => product_type_id === analysisType?.id,
+  );
+
+  return {
+    medusaOrderId: medusaOrder.id,
+    email: medusaOrder.email,
+    analysisPackageOrder: analysisPackageOrderItem
+      ? {
+          partnerLocationName:
+            (analysisPackageOrderItem?.metadata
+              ?.partner_location_name as string) ?? '',
+          analysisPackageName: analysisPackageOrderItem?.title ?? '',
+        }
+      : null,
+    analysisItemsOrder:
+      Array.isArray(analysisItems) && analysisItems.length > 0
+        ? analysisItems.map(({ product }) => ({
+            analysisName: product?.title ?? '',
+            analysisId: (product?.metadata?.analysisIdOriginal as string) ?? '',
+          }))
+        : null,
+  };
+}
+
+const sendEmail = async ({
+  account,
+  email,
+  analysisPackageName,
+  partnerLocationName,
+  language,
+}: {
+  account: Pick<AccountWithParams, 'name' | 'id'>;
+  email: string;
+  analysisPackageName: string;
+  partnerLocationName: string;
+  language: string;
+}) => {
+  const client = getSupabaseServerAdminClient();
+  try {
+    const { renderSynlabAnalysisPackageEmail } = await import(
+      '@kit/email-templates'
+    );
+    const { getMailer } = await import('@kit/mailers');
+
+    const mailer = await getMailer();
+
+    const { html, subject } = await renderSynlabAnalysisPackageEmail({
+      analysisPackageName,
+      personName: account.name,
+      partnerLocationName,
+      language,
+    });
+
+    await mailer
+      .sendEmail({
+        from: env().emailSender,
+        to: email,
+        subject,
+        html,
+      })
+      .catch((error) => {
+        throw new Error(`Failed to send email, message=${error}`);
+      });
+    await createNotificationsApi(client).createNotification({
+      account_id: account.id,
+      body: html,
+    });
+  } catch (error) {
+    throw new Error(`Failed to send email, message=${error}`);
+  }
+};

app/home/(user)/_lib/server/is-valid-open-ai-env.ts

@@ -0,0 +1,12 @@
+import OpenAI from 'openai';
+
+export const isValidOpenAiEnv = async () => {
+  try {
+    const client = new OpenAI();
+    await client.models.list();
+    return true;
+  } catch (e) {
+    console.log('AI not enabled');
+    return false;
+  }
+};

app/home/(user)/settings/_components/account-preferences-form.tsx

@@ -2,8 +2,8 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { Trans } from 'react-i18next';
 
+import { Trans } from '@kit/ui/trans';
 import { useRevalidatePersonalAccountDataQuery } from '@kit/accounts/hooks/use-personal-account-data';
 import type { AccountWithParams } from '@kit/accounts/types/accounts';
 import { Button } from '@kit/ui/button';

app/home/(user)/settings/_components/account-settings-form.tsx

@@ -2,8 +2,8 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { Trans } from 'react-i18next';
 
+import { Trans } from '@kit/ui/trans';
 import { useRevalidatePersonalAccountDataQuery } from '@kit/accounts/hooks/use-personal-account-data';
 import type { AccountWithParams } from '@kit/accounts/types/accounts';
 import { Button } from '@kit/ui/button';

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, 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 {
-  employeeCount: number;
-  accountSlug: string;
-  companyParams: Database['medreport']['Tables']['company_params']['Row'];
-}
+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>;
@@ -46,126 +37,90 @@ const StatisticsValue = ({ children }: { children: React.ReactNode }) => {
 };
 
 const TeamAccountBenefitStatistics = ({
-  employeeCount,
-  accountSlug,
-  companyParams,
-}: TeamAccountBenefitStatisticsProps) => {
+  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">
-      <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">
-            <Trans i18nKey="teams:benefitStatistics.budget.title" />
-          </p>
-          <h3 className="text-2xl">
-            <Trans
-              i18nKey="teams:benefitStatistics.budget.balance"
-              values={{
-                balance: formatCurrency({
-                  value: 11800,
-                  locale: language,
-                  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.budget.membersCount" />
           </StatisticsCardTitle>
-          <StatisticsValue>1800 €</StatisticsValue>
+          <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>200 €</StatisticsValue>
+          <StatisticsValue>
+            {formatCurrency({
+              value: accountBenefitStatistics.orders.analysesSum,
+              locale: language,
+              currencyCode: 'EUR',
+            })}
+          </StatisticsValue>
           <StatisticsDescription>
             <Trans
               i18nKey="teams:benefitStatistics.data.reservations"
-              values={{ value: 36 }}
-            />
-          </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 }}
+              values={{ value: accountBenefitStatistics.orders.analysesCount }}
             />
           </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"
-              values={{ value: 46 }}
+              i18nKey="teams:benefitStatistics.data.analysisPackagesCount"
+              values={{
+                value: accountBenefitStatistics.orders.analysisPackagesCount,
+              }}
             />
           </StatisticsDescription>
         </StatisticsCard>

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

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

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

@@ -4,6 +4,11 @@ import { useState } from 'react';
 
 import { redirect } from 'next/navigation';
 
+import type {
+  Account,
+  AccountParams,
+  BmiThresholds,
+} from '@/packages/features/accounts/src/types/accounts';
 import { Database } from '@/packages/supabase/src/database.types';
 import { format } from 'date-fns';
 import { enGB, et } from 'date-fns/locale';
@@ -14,28 +19,20 @@ 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 {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@kit/ui/shadcn/popover';
+import { DateRange } from '@kit/ui/shadcn/calendar';
 
+import { TeamAccountBenefitExpensesOverview } from '../_lib/server/load-team-account-benefit-expenses-overview';
+import { AccountBenefitStatistics } from '../_lib/server/load-team-account-benefit-statistics';
 import TeamAccountBenefitStatistics from './team-account-benefit-statistics';
 import TeamAccountHealthDetails from './team-account-health-details';
 
 export interface TeamAccountStatisticsProps {
-  teamAccount: Database['medreport']['Tables']['accounts']['Row'];
-  memberParams: Pick<
-    Database['medreport']['Tables']['account_params']['Row'],
-    'weight' | 'height'
-  >[];
-  bmiThresholds: Omit<
-    Database['medreport']['Tables']['bmi_thresholds']['Row'],
-    'id'
-  >[];
+  teamAccount: Account;
+  memberParams: Pick<AccountParams, 'weight' | 'height'>[];
+  bmiThresholds: Omit<BmiThresholds, 'id'>[];
   members: Database['medreport']['Functions']['get_account_members']['Returns'];
-  companyParams: Database['medreport']['Tables']['company_params']['Row'];
+  accountBenefitStatistics: AccountBenefitStatistics;
+  expensesOverview: TeamAccountBenefitExpensesOverview;
 }
 
 export default function TeamAccountStatistics({
@@ -43,11 +40,13 @@ export default function TeamAccountStatistics({
   memberParams,
   bmiThresholds,
   members,
-  companyParams,
+  accountBenefitStatistics,
+  expensesOverview,
 }: TeamAccountStatisticsProps) {
+  const currentDate = new Date();
   const [date, setDate] = useState<DateRange | undefined>({
-    from: new Date(),
-    to: new Date(),
+    from: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
+    to: new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0),
   });
   const {
     i18n: { language },
@@ -58,7 +57,7 @@ export default function TeamAccountStatistics({
 
   return (
     <>
-      <div className="mt-4 flex items-center justify-between">
+      <div className="mt-4 flex flex-col items-center justify-between gap-4 sm:flex-row sm:gap-0">
         <h4 className="font-bold">
           <Trans
             i18nKey={'teams:home.headerTitle'}
@@ -66,28 +65,16 @@ export default function TeamAccountStatistics({
           />
         </h4>
 
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="outline" data-empty={!date}>
-              <CalendarIcon />
-              {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>
-              )}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-auto p-0">
-            <Calendar
-              mode="range"
-              selected={date}
-              onSelect={setDate}
-              locale={language === 'et' ? et : enGB}
-            />
-          </PopoverContent>
-        </Popover>
+        <Button variant="outline" data-empty={!date}>
+          <CalendarIcon />
+          {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>
+          )}
+        </Button>
       </div>
 
       <div
@@ -96,9 +83,8 @@ export default function TeamAccountStatistics({
         }
       >
         <TeamAccountBenefitStatistics
-          employeeCount={members.length}
-          accountSlug={teamAccount.slug || ''}
-          companyParams={companyParams}
+          accountBenefitStatistics={accountBenefitStatistics}
+          expensesOverview={expensesOverview}
         />
 
         <h5 className="mt-4 mb-2">
@@ -146,10 +132,7 @@ export default function TeamAccountStatistics({
               className="border-warning/40 hover:bg-warning/20 relative flex h-full cursor-pointer flex-col justify-center px-6 py-4 transition-colors"
               onClick={() =>
                 redirect(
-                  createPath(
-                    pathsConfig.app.accountBilling,
-                    teamAccount.slug || '',
-                  ),
+                  createPath(pathsConfig.app.accountBilling, teamAccount.slug!),
                 )
               }
             >

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

@@ -0,0 +1,81 @@
+import { getSupabaseServerClient } from '@/packages/supabase/src/clients/server-client';
+
+import { 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.5;
+
+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 - Math.ceil(createdAt.getMonth() / 3)
+          : QUARTERS;
+        return benefitAmount * employeeCount * quartersLeft;
+      }
+      return 0;
+    })(),
+  };
+}

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

@@ -0,0 +1,113 @@
+'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', { count: 'exact' })
+    .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();
+
+  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

@@ -4,6 +4,8 @@ import { Database } from '@/packages/supabase/src/database.types';
 import Isikukood from 'isikukood';
 import { Clock, TrendingUp, User } from 'lucide-react';
 
+import type { BmiThresholds } from '@kit/accounts/types/accounts';
+
 import {
   bmiFromMetric,
   getBmiBackgroundColor,
@@ -25,10 +27,7 @@ interface AccountHealthDetailsField {
 
 export const getAccountHealthDetailsFields = (
   memberParams: TeamAccountStatisticsProps['memberParams'],
-  bmiThresholds: Omit<
-    Database['medreport']['Tables']['bmi_thresholds']['Row'],
-    'id'
-  >[],
+  bmiThresholds: Omit<BmiThresholds, 'id'>[],
   members: Database['medreport']['Functions']['get_account_members']['Returns'],
 ): AccountHealthDetailsField[] => {
   const averageWeight =
@@ -64,13 +63,13 @@ export const getAccountHealthDetailsFields = (
   return [
     {
       title: 'teams:healthDetails.women',
-      value: `${femalePercentage}% (${numberOfFemaleMembers})`,
+      value: `${femalePercentage.toFixed(0)}% (${numberOfFemaleMembers})`,
       Icon: User,
       iconBg: 'bg-success',
     },
     {
       title: 'teams:healthDetails.men',
-      value: `${malePercentage}% (${numberOfMaleMembers})`,
+      value: `${malePercentage.toFixed(0)}% (${numberOfMaleMembers})`,
       Icon: User,
       iconBg: 'bg-success',
     },
@@ -82,7 +81,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,102 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { UpdateHealthBenefitSchema } from '@/packages/billing/core/src/schema';
+import {
+  Account,
+  CompanyParams,
+} from '@/packages/features/accounts/src/types/accounts';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+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';
+
+const HealthBenefitFormClient = ({
+  account,
+  companyParams,
+}: {
+  account: Account;
+  companyParams: CompanyParams;
+}) => {
+  const { t } = useTranslation('account');
+  const router = useRouter();
+
+  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);
+        router.refresh();
+      }
+    };
+
+    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,73 @@
-'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 {
+  Account,
+  CompanyParams,
+} from '@/packages/features/accounts/src/types/accounts';
 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 { updateHealthBenefit } from '../_lib/server/server-actions';
-import HealthBenefitFields from './health-benefit-fields';
+import { TeamAccountBenefitExpensesOverview } from '../../_lib/server/load-team-account-benefit-expenses-overview';
+import HealthBenefitFormClient from './health-benefit-form-client';
 import YearlyExpensesOverview from './yearly-expenses-overview';
 
-const HealthBenefitForm = ({
+const HealthBenefitForm = async ({
   account,
   companyParams,
   employeeCount,
+  expensesOverview,
 }: {
-  account: Database['medreport']['Tables']['accounts']['Row'];
-  companyParams: Database['medreport']['Tables']['company_params']['Row'];
+  account: Account;
+  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}>
-      <form
-        className="flex flex-col gap-6 px-6 text-left"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <div className="mt-8 flex items-center justify-between">
-          <div>
-            <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}
+    <div className="flex flex-col gap-6 px-6 text-left">
+      <div className="mt-8 flex items-center justify-between">
+        <div>
+          <h4>
+            <Trans
+              i18nKey="billing:pageTitle"
+              values={{ companyName: account.name }}
             />
-            <p className="text-muted-foreground mt-2 text-sm">
-              <Trans i18nKey="billing:healthBenefitForm.info" />
+          </h4>
+        </div>
+      </div>
+
+      <div className="flex flex-col-reverse gap-6 sm:flex-row">
+        <div className="border-border w-full rounded-lg border sm:w-1/3">
+          <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,23 @@
-import { useMemo } from 'react';
+'use client';
 
-import { Database } from '@/packages/supabase/src/database.types';
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { useTranslation } from 'react-i18next';
 
 import { Trans } from '@kit/ui/makerkit/trans';
 import { Separator } from '@kit/ui/separator';
 
+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(() => {
-    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]);
+  const {
+    i18n: { language },
+  } = useTranslation();
 
   return (
     <div className="border-border rounded-lg border p-6">
@@ -53,41 +26,54 @@ 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} €
-        </span>
+        <span className="text-primary text-sm font-bold">{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"
-            values={{ employeeCount: employeeCount || 0 }}
+            i18nKey="billing:expensesOverview.managementFeeTotal"
+            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
-            ? companyParams.benefit_amount * employeeCount
-            : 0}{' '}
-          €
+          {formatCurrency({
+            value: expensesOverview.total,
+            locale: language,
+            currencyCode: 'EUR',
+          })}
         </span>
       </div>
     </div>

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

@@ -6,6 +6,7 @@ import { PageBody } from '@kit/ui/page';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import { loadTeamAccountBenefitExpensesOverview } from '../_lib/server/load-team-account-benefit-expenses-overview';
 import HealthBenefitForm from './_components/health-benefit-form';
 
 interface TeamAccountBillingPageProps {
@@ -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/_lib/server/members-page.loader.ts

@@ -2,6 +2,7 @@ import 'server-only';
 
 import { SupabaseClient } from '@supabase/supabase-js';
 
+import { getSupabaseServerAdminClient } from '@/packages/supabase/src/clients/server-admin-client';
 import { Database } from '@/packages/supabase/src/database.types';
 
 import { loadTeamWorkspace } from '~/home/[account]/_lib/server/team-account-workspace.loader';
@@ -15,11 +16,16 @@ export async function loadMembersPageData(
   client: SupabaseClient<Database>,
   slug: string,
 ) {
+  const workspace = await loadTeamWorkspace(slug);
   return Promise.all([
     loadAccountMembers(client, slug),
     loadInvitations(client, slug),
     canAddMember,
-    loadTeamWorkspace(slug),
+    workspace,
+    loadAccountMembersBenefitsUsage(
+      getSupabaseServerAdminClient(),
+      workspace.account.id,
+    ),
   ]);
 }
 
@@ -60,6 +66,29 @@ async function loadAccountMembers(
   return data ?? [];
 }
 
+export async function loadAccountMembersBenefitsUsage(
+  client: SupabaseClient<Database>,
+  accountId: string,
+): Promise<
+  {
+    personal_account_id: string;
+    benefit_amount: number;
+  }[]
+> {
+  const { data, error } = await client
+    .schema('medreport')
+    .rpc('get_benefits_usages_for_company_members', {
+      p_account_id: accountId,
+    });
+
+  if (error) {
+    console.error('Failed to load account members benefits usage', error);
+    return [];
+  }
+
+  return data ?? [];
+}
+
 /**
  * Load account invitations
  * @param client

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

@@ -42,8 +42,13 @@ async function TeamAccountMembersPage({ params }: TeamAccountMembersPageProps) {
   const client = getSupabaseServerClient();
   const slug = (await params).account;
 
-  const [members, invitations, canAddMember, { user, account }] =
-    await loadMembersPageData(client, slug);
+  const [
+    members,
+    invitations,
+    canAddMember,
+    { user, account },
+    membersBenefitsUsage,
+  ] = await loadMembersPageData(client, slug);
 
   const canManageRoles = account.permissions.includes('roles.manage');
   const canManageInvitations = account.permissions.includes('invites.manage');
@@ -54,7 +59,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 }} />
         }
@@ -98,6 +103,7 @@ async function TeamAccountMembersPage({ params }: TeamAccountMembersPageProps) {
                 members={members}
                 isPrimaryOwner={isPrimaryOwner}
                 canManageRoles={canManageRoles}
+                membersBenefitsUsage={membersBenefitsUsage}
               />
             </CardContent>
           </Card>

app/home/[account]/page.tsx

@@ -17,6 +17,8 @@ import {
 } from '~/lib/services/audit/pageView.service';
 
 import { Dashboard } from './_components/dashboard';
+import { loadTeamAccountBenefitExpensesOverview } from './_lib/server/load-team-account-benefit-expenses-overview';
+import { loadAccountBenefitStatistics } from './_lib/server/load-team-account-benefit-statistics';
 
 interface TeamAccountHomePageProps {
   params: Promise<{ account: string }>;
@@ -39,8 +41,14 @@ 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(
-    teamAccountsApi.getTeamAccountParams(teamAccount.id),
+  const accountBenefitStatistics = use(
+    loadAccountBenefitStatistics(teamAccount.id),
+  );
+  const expensesOverview = use(
+    loadTeamAccountBenefitExpensesOverview({
+      companyId: teamAccount.id,
+      employeeCount: members.length,
+    }),
   );
 
   use(
@@ -57,7 +65,8 @@ function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
         memberParams={memberParams}
         bmiThresholds={bmiThresholds}
         members={members}
-        companyParams={companyParams}
+        accountBenefitStatistics={accountBenefitStatistics}
+        expensesOverview={expensesOverview}
       />
     </PageBody>
   );

app/join/page.tsx

@@ -17,6 +17,7 @@ import { Trans } from '@kit/ui/trans';
 
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
+import { toTitleCase } from '~/lib/utils';
 
 interface JoinTeamAccountPageProps {
   searchParams: Promise<{
@@ -110,12 +111,12 @@ async function JoinTeamAccountPage(props: JoinTeamAccountPageProps) {
   // once the user accepts the invitation, we redirect them to the account home page
   const membershipConfirmation = pathsConfig.auth.membershipConfirmation;
 
-  const email = auth.data.email ?? '';
+  const fullName = toTitleCase(auth.data.user_metadata.full_name ?? '');
 
   return (
     <AuthLayoutShell Logo={AppLogo}>
       <AcceptInvitationContainer
-        email={email}
+        fullName={fullName || auth.data.email || ''}
         inviteToken={token}
         invitation={invitation}
         paths={{