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

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 { PiggyBankIcon } 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 { AccountBenefitStatistics } from '../_lib/server/load-team-account-benefit-statistics';
 
 const StatisticsCard = ({ children }: { children: React.ReactNode }) => {
   return <Card className="p-4">{children}</Card>;
@@ -46,10 +37,10 @@ const StatisticsValue = ({ children }: { children: React.ReactNode }) => {
 };
 
 const TeamAccountBenefitStatistics = ({
-  employeeCount,
-  accountSlug,
-  companyParams,
-}: TeamAccountBenefitStatisticsProps) => {
+  accountBenefitStatistics,
+}: {
+  accountBenefitStatistics: AccountBenefitStatistics;
+}) => {
   const {
     i18n: { language },
   } = useTranslation();
@@ -58,114 +49,64 @@ const TeamAccountBenefitStatistics = ({
     <div className="flex h-full w-full flex-col gap-2 sm:flex-row">
       <Card className="relative flex flex-row">
         <div className="p-6">
-          <Button
-            onClick={() =>
-              redirect(createPath(pathsConfig.app.accountBilling, accountSlug))
-            }
-            variant="outline"
-            className="absolute top-1 right-1 p-3"
-          >
-            <Settings />
-          </Button>
           <div className="flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
             <PiggyBankIcon className="h-[32px] w-[32px] stroke-orange-400 stroke-2" />
           </div>
-          <p className="mt-4 text-sm font-medium">
-            <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>
+          <StatisticsCardTitle className="mt-4 text-xl font-bold">
+            <Trans i18nKey="teams:benefitStatistics.budget.volume" />
+          </StatisticsCardTitle>
+          <StatisticsValue>
+            {formatCurrency({
+              value: accountBenefitStatistics.periodTotal,
+              locale: language,
+              currencyCode: 'EUR',
+            })}
+          </StatisticsValue>
         </div>
       </Card>
 
       <div className="grid flex-2 grid-cols-2 gap-2 sm:grid-cols-3 sm:grid-rows-2">
         <StatisticsCard>
           <StatisticsCardTitle className="text-lg font-bold">
-            <Trans i18nKey="teams:benefitStatistics.data.serviceSum" />
+            <Trans i18nKey="teams:benefitStatistics.data.totalSum" />
           </StatisticsCardTitle>
-          <StatisticsValue>1800 €</StatisticsValue>
+          <StatisticsValue>
+            {formatCurrency({
+              value: accountBenefitStatistics.orders.totalSum,
+              locale: language,
+              currencyCode: 'EUR',
+            })}
+          </StatisticsValue>
         </StatisticsCard>
+
         <StatisticsCard>
           <StatisticsCardTitle>
             <Trans i18nKey="teams:benefitStatistics.data.analysis" />
           </StatisticsCardTitle>
-          <StatisticsValue>200 €</StatisticsValue>
+          <StatisticsValue>{accountBenefitStatistics.orders.analysesSum} €</StatisticsValue>
           <StatisticsDescription>
             <Trans
               i18nKey="teams:benefitStatistics.data.reservations"
-              values={{ value: 36 }}
-            />
-          </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,19 @@ import { createPath, pathsConfig } from '@kit/shared/config';
 import { Card } from '@kit/ui/card';
 import { Trans } from '@kit/ui/makerkit/trans';
 import { Button } from '@kit/ui/shadcn/button';
-import { Calendar, DateRange } from '@kit/ui/shadcn/calendar';
-import {
-  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';
 
 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;
 }
 
 export default function TeamAccountStatistics({
@@ -43,11 +34,12 @@ export default function TeamAccountStatistics({
   memberParams,
   bmiThresholds,
   members,
-  companyParams,
+  accountBenefitStatistics,
 }: TeamAccountStatisticsProps) {
+  const currentDate = new Date();
   const [date, setDate] = useState<DateRange | undefined>({
-    from: new Date(),
-    to: new Date(),
+    from: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
+    to: new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0),
   });
   const {
     i18n: { language },
@@ -66,28 +58,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 +75,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} />
 
         <h5 className="mt-4 mb-2">
           <Trans i18nKey="teams:home.healthDetails" />
@@ -148,7 +124,7 @@ export default function TeamAccountStatistics({
                 redirect(
                   createPath(
                     pathsConfig.app.accountBilling,
-                    teamAccount.slug || '',
+                    teamAccount.slug!,
                   ),
                 )
               }