Merge branch 'develop' into MED-49

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,5 +1,3 @@
-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';
@@ -13,6 +11,8 @@ import { findProductTypeIdByHandle } from '~/lib/utils';
 
 import Cart from '../../_components/cart';
 import CartTimer from '../../_components/cart/cart-timer';
+import { loadCurrentUserAccount } from '../../_lib/server/load-user-account';
+import { AccountBalanceService } from '@kit/accounts/services/account-balance.service';
 import { EnrichedCartItem } from '../../_components/cart/types';
 
 export async function generateMetadata() {
@@ -24,12 +24,21 @@ 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 +79,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,81 @@
+'use client';
+
+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 Divider from '@modules/common/components/divider';
+
+import { PageBody, PageHeader } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { StoreOrder } from '@medusajs/types';
+import { AnalysisOrder } from '~/lib/types/analysis-order';
+import { useEffect, useRef, useState } from 'react';
+import { retrieveOrder } from '@lib/data/orders';
+import { GlobalLoader } from '@kit/ui/makerkit/global-loader';
+
+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 flex-col justify-start items-center h-full 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,18 +1,13 @@
 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();
@@ -41,18 +36,7 @@ async function OrderConfirmedPage(props: {
     redirect(pathsConfig.app.myOrders);
   }
 
-  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>
-  );
+  return <OrderConfirmedLoadingWrapper medusaOrder={medusaOrder} order={order} />;
 }
 
 export default withI18n(OrderConfirmedPage);

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

@@ -26,17 +26,7 @@ async function OrderConfirmedPage(props: {
   params: Promise<{ orderId: string }>;
 }) {
   const params = await props.params;
-
-  const order = await getAnalysisOrder({
-    analysisOrderId: Number(params.orderId),
-  }).catch(() => null);
-  if (!order) {
-    redirect(pathsConfig.app.myOrders);
-  }
-
-  const medusaOrder = await retrieveOrder(order.medusa_order_id).catch(
-    () => null,
-  );
+  const medusaOrder = await retrieveOrder(params.orderId).catch(() => null);
   if (!medusaOrder) {
     redirect(pathsConfig.app.myOrders);
   }
@@ -46,7 +36,12 @@ async function OrderConfirmedPage(props: {
       <PageHeader title={<Trans i18nKey="cart:order.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} />
+        <OrderDetails
+          order={{
+            id: medusaOrder.id,
+            created_at: medusaOrder.created_at,
+          }}
+        />
         <Divider />
         <OrderItems medusaOrder={medusaOrder} />
         <CartTotals medusaOrder={medusaOrder} />

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,12 @@ 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);
@@ -56,6 +60,7 @@ async function OrdersPage() {
           const analysisOrder = analysisOrders.find(
             ({ medusa_order_id }) => medusa_order_id === medusaOrder.id,
           );
+
           if (!medusaOrder) {
             return null;
           }
@@ -81,6 +86,7 @@ async function OrdersPage() {
               <OrderBlock
                 medusaOrderId={medusaOrder.id}
                 analysisOrder={analysisOrder}
+                medusaOrderStatus={medusaOrder.status}
                 itemsAnalysisPackage={medusaOrderItemsAnalysisPackages}
                 itemsTtoService={medusaOrderItemsTtoServices}
                 itemsOther={medusaOrderItemsOther}
@@ -88,7 +94,7 @@ async function OrdersPage() {
             </React.Fragment>
           );
         })}
-        {analysisOrders.length === 0 && (
+        {analysisOrders.length === 0 && ttoOrders.length === 0 && (
           <h5 className="mt-6">
             <Trans i18nKey="orders:noOrders" />
           </h5>

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

@@ -133,15 +133,17 @@ const TimeSlots = ({
       return toast.error(t('booking:serviceNotFound'));
     }
 
-    const bookTimePromise = updateReservationTime(
+    const bookTimePromise = updateReservationTime({
       reservationId,
-      timeSlot.StartTime,
-      Number(syncedService.id),
-      timeSlot.UserID,
-      timeSlot.SyncUserID,
-      booking.selectedLocationId ? booking.selectedLocationId : null,
+      newStartTime: timeSlot.StartTime,
+      newServiceId: Number(syncedService.id),
+      newAppointmentUserId: timeSlot.UserID,
+      newSyncUserId: timeSlot.SyncUserID,
+      newLocationId: booking.selectedLocationId
+        ? booking.selectedLocationId
+        : null,
       cartId,
-    );
+    });
 
     toast.promise(() => bookTimePromise, {
       success: <Trans i18nKey={'booking:bookTimeSuccess'} />,

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

@@ -2,9 +2,7 @@
 
 import { useState } from 'react';
 
-import { handleNavigateToPayment } from '@/lib/services/medusaCart.service';
 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';
@@ -17,30 +15,39 @@ import AnalysisLocation from './analysis-location';
 import CartItems from './cart-items';
 import CartServiceItems from './cart-service-items';
 import DiscountCode from './discount-code';
+import { initiatePayment } from '../../_lib/server/cart-actions';
+import { useRouter } from 'next/navigation';
+import { AccountBalanceSummary } from '@kit/accounts/services/account-balance.service';
 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 +67,38 @@ 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({
+
+    try {
+      const { url, isFullyPaidByBenefits, orderId, unavailableLineItemIds } = await initiatePayment({
+        accountId,
+        balanceSummary: balanceSummary!,
+        cart: cart!,
         language,
-        paymentSessionId,
       });
-      if (result.url) {
-        window.location.href = result.url;
+      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 +132,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 +148,24 @@ 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 +175,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 +211,6 @@ export default function Cart({
                 cart={{ ...cart }}
                 synlabAnalyses={synlabAnalyses}
               />
-              <AnalysisLocation
-                cart={{ ...cart }}
-                synlabAnalyses={synlabAnalyses}
-              />
             </CardContent>
           </Card>
         )}
@@ -192,7 +219,7 @@ export default function Cart({
       <div>
         <Button
           className="h-10"
-          onClick={initiatePayment}
+          onClick={initiateSession}
           disabled={isInitiatingSession}
         >
           {isInitiatingSession && (

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

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

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

@@ -2,7 +2,6 @@
 
 import Link from 'next/link';
 
-import { Database } from '@/packages/supabase/src/database.types';
 import { BlendingModeIcon, RulerHorizontalIcon } from '@radix-ui/react-icons';
 import { isNil } from 'lodash';
 import {
@@ -15,7 +14,7 @@ import {
   User,
 } from 'lucide-react';
 
-import type { AccountWithParams } from '@kit/accounts/types/accounts';
+import type { AccountWithParams, BmiThresholds } from '@kit/accounts/types/accounts';
 import { pathsConfig } from '@kit/shared/config';
 import { Button } from '@kit/ui/button';
 import {
@@ -138,10 +137,7 @@ export default function Dashboard({
   bmiThresholds,
 }: {
   account: AccountWithParams;
-  bmiThresholds: Omit<
-    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,16 @@ 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">
@@ -86,8 +96,11 @@ export default function CartTotals({
             </span>
           </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 +117,42 @@ 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,16 +2,18 @@ import { formatDate } from 'date-fns';
 
 import { Trans } from '@kit/ui/trans';
 
-import type { AnalysisOrder } from '~/lib/types/analysis-order';
-
-export default function OrderDetails({ order }: { order: AnalysisOrder }) {
+export default function OrderDetails({
+  order,
+}: {
+  order: { id: string; created_at: string | Date };
+}) {
   return (
     <div className="flex flex-col gap-y-2">
       <div>
         <span className="font-bold">
           <Trans i18nKey="cart:orderConfirmed.orderNumber" />:{' '}
         </span>
-        <span>{order.medusa_order_id}</span>
+        <span className="break-all">{order.id}</span>
       </div>
 
       <div>

app/home/(user)/_components/orders/order-block.tsx

@@ -5,18 +5,20 @@ import { Eye } from 'lucide-react';
 
 import { Trans } from '@kit/ui/makerkit/trans';
 
-import type { AnalysisOrder } from '~/lib/types/analysis-order';
+import type { AnalysisOrder } from '~/lib/types/order';
 
 import OrderItemsTable from './order-items-table';
 
 export default function OrderBlock({
   analysisOrder,
+  medusaOrderStatus,
   itemsAnalysisPackage,
   itemsTtoService,
   itemsOther,
   medusaOrderId,
 }: {
   analysisOrder?: AnalysisOrder;
+  medusaOrderStatus: string;
   itemsAnalysisPackage: StoreOrderLineItem[];
   itemsTtoService: StoreOrderLineItem[];
   itemsOther: StoreOrderLineItem[];
@@ -50,7 +52,11 @@ export default function OrderBlock({
           <OrderItemsTable
             items={itemsAnalysisPackage}
             title="orders:table.analysisPackage"
-            analysisOrder={analysisOrder}
+            order={{
+              medusaOrderId: analysisOrder.medusa_order_id,
+              id: analysisOrder.id,
+              status: analysisOrder.status,
+            }}
           />
         )}
         {itemsTtoService && (
@@ -58,12 +64,18 @@ export default function OrderBlock({
             items={itemsTtoService}
             title="orders:table.ttoService"
             type="ttoService"
+            order={{
+              status: medusaOrderStatus.toUpperCase(),
+              medusaOrderId,
+            }}
           />
         )}
         <OrderItemsTable
           items={itemsOther}
           title="orders:table.otherOrders"
-          analysisOrder={analysisOrder}
+          order={{
+            status: analysisOrder?.status,
+          }}
         />
       </div>
     </div>

app/home/(user)/_components/orders/order-items-table.tsx

@@ -17,7 +17,7 @@ import {
 } from '@kit/ui/table';
 import { Trans } from '@kit/ui/trans';
 
-import type { AnalysisOrder } from '~/lib/types/analysis-order';
+import type { Order } from '~/lib/types/order';
 
 import { logAnalysisResultsNavigateAction } from './actions';
 
@@ -26,12 +26,12 @@ export type OrderItemType = 'analysisOrder' | 'ttoService';
 export default function OrderItemsTable({
   items,
   title,
-  analysisOrder,
+  order,
   type = 'analysisOrder',
 }: {
   items: StoreOrderLineItem[];
   title: string;
-  analysisOrder?: AnalysisOrder;
+  order: Order;
   type?: OrderItemType;
 }) {
   const router = useRouter();
@@ -42,10 +42,12 @@ export default function OrderItemsTable({
 
   const isAnalysisOrder = type === 'analysisOrder';
 
-  const openAnalysisResults = async () => {
-    if (analysisOrder) {
-      await logAnalysisResultsNavigateAction(analysisOrder.medusa_order_id);
-      router.push(`${pathsConfig.app.analysisResults}/${analysisOrder.id}`);
+  const openDetailedView = async () => {
+    if (isAnalysisOrder && order?.medusaOrderId && order?.id) {
+      await logAnalysisResultsNavigateAction(order.medusaOrderId);
+      router.push(`${pathsConfig.app.analysisResults}/${order.id}`);
+    } else {
+      router.push(`${pathsConfig.app.myOrders}/${order.medusaOrderId}`);
     }
   };
 
@@ -84,17 +86,15 @@ export default function OrderItemsTable({
 
               <TableCell className="min-w-[180px] px-6">
                 <Trans
-                  i18nKey={`orders:status.${type}.${analysisOrder?.status ?? 'CONFIRMED'}`}
+                  i18nKey={`orders:status.${type}.${order?.status ?? 'CONFIRMED'}`}
                 />
               </TableCell>
 
-              {isAnalysisOrder && (
-                <TableCell className="px-6 text-right">
-                  <Button size="sm" onClick={openAnalysisResults}>
-                    <Trans i18nKey="analysis-results:view" />
-                  </Button>
-                </TableCell>
-              )}
+              <TableCell className="px-6 text-right">
+                <Button size="sm" onClick={openDetailedView}>
+                  <Trans i18nKey="analysis-results:view" />
+                </Button>
+              </TableCell>
             </TableRow>
           ))}
       </TableBody>

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

@@ -23,16 +23,16 @@ export async function createInitialReservationAction(
   });
 
   if (addedItem) {
-    const reservation = await createInitialReservation(
+    const reservation = await createInitialReservation({
       serviceId,
       clinicId,
       appointmentUserId,
-      syncUserId,
+      syncUserID: syncUserId,
       startTime,
-      addedItem.id,
+      medusaLineItemId: addedItem.id,
       locationId,
       comments,
-    );
+    });
 
     await updateLineItem({
       lineId: addedItem.id,

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

@@ -0,0 +1,13 @@
+'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,347 @@
+'use server';
+
+import { z } from 'zod';
+import jwt from 'jsonwebtoken';
+
+import type { StoreCart, StoreOrder } from "@medusajs/types";
+
+import { initiateMultiPaymentSession, placeOrder } from "@lib/data/cart";
+import type { AccountBalanceSummary } from "@kit/accounts/services/account-balance.service";
+import { handleNavigateToPayment } from "~/lib/services/medusaCart.service";
+import { loadCurrentUserAccount } from "./load-user-account";
+import { getOrderedAnalysisIds } from "~/lib/services/medusaOrder.service";
+import { createAnalysisOrder, getAnalysisOrder } from "~/lib/services/order.service";
+import { listProductTypes } from "@lib/data";
+import { sendOrderToMedipost } from "~/lib/services/medipost/medipostPrivateMessage.service";
+import { AccountWithParams } from "@/packages/features/accounts/src/types/accounts";
+import { createI18nServerInstance } from "~/lib/i18n/i18n.server";
+import { getSupabaseServerAdminClient } from "@/packages/supabase/src/clients/server-admin-client";
+import { createNotificationsApi } from "@/packages/features/notifications/src/server/api";
+import { FailureReason } from '~/lib/types/connected-online';
+import { getOrderedTtoServices } from '~/lib/services/reservation.service';
+import { bookAppointment } from '~/lib/services/connected-online.service';
+
+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);
+    }
+
+    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

@@ -1,9 +1,8 @@
 import OpenAI from 'openai';
 
 export const isValidOpenAiEnv = async () => {
-  const client = new OpenAI();
-
   try {
+    const client = new OpenAI();
     await client.models.list();
     return true;
   } catch (e) {

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

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

@@ -14,28 +14,21 @@ 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 { AccountBenefitStatistics } from '../_lib/server/load-team-account-benefit-statistics';
 import TeamAccountBenefitStatistics from './team-account-benefit-statistics';
 import TeamAccountHealthDetails from './team-account-health-details';
+import type { Account, AccountParams, BmiThresholds } from '@/packages/features/accounts/src/types/accounts';
+import { TeamAccountBenefitExpensesOverview } from '../_lib/server/load-team-account-benefit-expenses-overview';
 
 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 +36,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 +53,7 @@ export default function TeamAccountStatistics({
 
   return (
     <>
-      <div className="mt-4 flex items-center justify-between">
+      <div className="mt-4 flex flex-col gap-4 sm:gap-0 sm:flex-row items-center justify-between">
         <h4 className="font-bold">
           <Trans
             i18nKey={'teams:home.headerTitle'}
@@ -66,28 +61,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
@@ -95,11 +78,7 @@ export default function TeamAccountStatistics({
           'animate-in fade-in flex flex-col space-y-4 pb-36 duration-500'
         }
       >
-        <TeamAccountBenefitStatistics
-          employeeCount={members.length}
-          accountSlug={teamAccount.slug || ''}
-          companyParams={companyParams}
-        />
+        <TeamAccountBenefitStatistics accountBenefitStatistics={accountBenefitStatistics} expensesOverview={expensesOverview} />
 
         <h5 className="mt-4 mb-2">
           <Trans i18nKey="teams:home.healthDetails" />
@@ -148,7 +127,7 @@ export default function TeamAccountStatistics({
                 redirect(
                   createPath(
                     pathsConfig.app.accountBilling,
-                    teamAccount.slug || '',
+                    teamAccount.slug!,
                   ),
                 )
               }

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

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

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

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

@@ -0,0 +1,100 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+import { UpdateHealthBenefitSchema } from '@/packages/billing/core/src/schema';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+
+import { Button } from '@kit/ui/button';
+import { Form } from '@kit/ui/form';
+import { Spinner } from '@kit/ui/makerkit/spinner';
+import { toast } from '@kit/ui/shadcn/sonner';
+import { Trans } from '@kit/ui/trans';
+
+import { cn } from '~/lib/utils';
+
+import { updateHealthBenefit } from '../_lib/server/server-actions';
+import HealthBenefitFields from './health-benefit-fields';
+import { Account, CompanyParams } from '@/packages/features/accounts/src/types/accounts';
+import { useTranslation } from 'react-i18next';
+
+const HealthBenefitFormClient = ({
+  account,
+  companyParams,
+}: {
+  account: Account;
+  companyParams: CompanyParams;
+}) => {
+  const { t } = useTranslation('account');
+  const 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,70 @@
-'use client';
-
-import { useState } from 'react';
-
-import { UpdateHealthBenefitSchema } from '@/packages/billing/core/src/schema';
-import { Database } from '@/packages/supabase/src/database.types';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { PiggyBankIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
 
-import { Button } from '@kit/ui/button';
-import { Form } from '@kit/ui/form';
-import { Spinner } from '@kit/ui/makerkit/spinner';
 import { Separator } from '@kit/ui/shadcn/separator';
-import { toast } from '@kit/ui/shadcn/sonner';
 import { Trans } from '@kit/ui/trans';
 
-import { cn } from '~/lib/utils';
-
-import { updateHealthBenefit } from '../_lib/server/server-actions';
-import HealthBenefitFields from './health-benefit-fields';
+import HealthBenefitFormClient from './health-benefit-form-client';
 import YearlyExpensesOverview from './yearly-expenses-overview';
+import { TeamAccountBenefitExpensesOverview } from '../../_lib/server/load-team-account-benefit-expenses-overview';
+import { Account, CompanyParams } from '@/packages/features/accounts/src/types/accounts';
 
-const HealthBenefitForm = ({
+const HealthBenefitForm = async ({
   account,
   companyParams,
   employeeCount,
+  expensesOverview,
 }: {
-  account: Database['medreport']['Tables']['accounts']['Row'];
-  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 sm:flex-row gap-6">
+        <div className="border-border w-full sm:w-1/3 rounded-lg border">
+          <div className="p-6">
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
+              <PiggyBankIcon className="h-[32px] w-[32px] stroke-orange-400 stroke-2" />
+            </div>
+            <p className="mt-4 text-sm font-medium">
+              <Trans i18nKey="billing:healthBenefitForm.description" />
             </p>
           </div>
+
+          <Separator />
+
+          <div className="p-6">
+            <HealthBenefitFormClient 
+              account={account}
+              companyParams={companyParams}
+            />
+          </div>
         </div>
-      </form>
-    </Form>
+
+        <div className="flex-1 space-y-6">
+          <YearlyExpensesOverview
+            employeeCount={employeeCount}
+            expensesOverview={expensesOverview}
+          />
+          
+          <p className="text-muted-foreground text-sm">
+            <Trans i18nKey="billing:healthBenefitForm.info" />
+          </p>
+        </div>
+      </div>
+    </div>
   );
 };
 

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

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

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

app/home/[account]/members/_lib/server/members-page.loader.ts

@@ -5,6 +5,7 @@ import { SupabaseClient } from '@supabase/supabase-js';
 import { Database } from '@/packages/supabase/src/database.types';
 
 import { loadTeamWorkspace } from '~/home/[account]/_lib/server/team-account-workspace.loader';
+import { getSupabaseServerAdminClient } from '@/packages/supabase/src/clients/server-admin-client';
 
 /**
  * Load data for the members page
@@ -15,11 +16,13 @@ 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 +63,27 @@ 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,7 +42,7 @@ async function TeamAccountMembersPage({ params }: TeamAccountMembersPageProps) {
   const client = getSupabaseServerClient();
   const slug = (await params).account;
 
-  const [members, invitations, canAddMember, { user, account }] =
+  const [members, invitations, canAddMember, { user, account }, membersBenefitsUsage] =
     await loadMembersPageData(client, slug);
 
   const canManageRoles = account.permissions.includes('roles.manage');
@@ -54,7 +54,7 @@ async function TeamAccountMembersPage({ params }: TeamAccountMembersPageProps) {
   return (
     <>
       <TeamAccountLayoutPageHeader
-        title={<Trans i18nKey={'common:routes.members'} />}
+        title={<Trans i18nKey={'common:routes.companyMembers'} />}
         description={
           <AppBreadcrumbs values={{ [account.slug]: account.name }} />
         }
@@ -98,6 +98,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 { loadAccountBenefitStatistics } from './_lib/server/load-team-account-benefit-statistics';
+import { loadTeamAccountBenefitExpensesOverview } from './_lib/server/load-team-account-benefit-expenses-overview';
 
 interface TeamAccountHomePageProps {
   params: Promise<{ account: string }>;
@@ -39,9 +41,11 @@ 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(
     createPageViewLog({
@@ -57,7 +61,8 @@ function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
         memberParams={memberParams}
         bmiThresholds={bmiThresholds}
         members={members}
-        companyParams={companyParams}
+        accountBenefitStatistics={accountBenefitStatistics}
+        expensesOverview={expensesOverview}
       />
     </PageBody>
   );