feat(team-accounts): enhance team account statistics and health details components with new data and improved calculations

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

@@ -3,10 +3,12 @@ import React, { use } 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 { 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';
 
@@ -14,15 +16,27 @@ import pathsConfig from '~/config/paths.config';
 import { createPath } from '~/config/team-account-navigation.config';
 
 interface TeamAccountBenefitStatisticsProps {
+  employeeCount: number;
   accountSlug: string;
+  companyParams: Database['medreport']['Tables']['company_params']['Row'];
 }
 
 const StatisticsCard = ({ children }: { children: React.ReactNode }) => {
   return <Card className="p-4">{children}</Card>;
 };
 
-const StatisticsCardTitle = ({ children }: { children: React.ReactNode }) => {
-  return <CardTitle className="text-sm font-medium">{children}</CardTitle>;
+const StatisticsCardTitle = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <CardTitle className={cn('text-sm font-medium', className)}>
+      {children}
+    </CardTitle>
+  );
 };
 
 const StatisticsDescription = ({ children }: { children: React.ReactNode }) => {
@@ -34,7 +48,9 @@ const StatisticsValue = ({ children }: { children: React.ReactNode }) => {
 };
 
 const TeamAccountBenefitStatistics = ({
+  employeeCount,
   accountSlug,
+  companyParams,
 }: TeamAccountBenefitStatisticsProps) => {
   const {
     i18n: { language },
@@ -76,7 +92,8 @@ const TeamAccountBenefitStatistics = ({
               i18nKey="teams:benefitStatistics.budget.volume"
               values={{
                 volume: formatCurrency({
-                  value: 15000,
+                  value:
+                    (Number(companyParams.benefit_amount) || 0) * employeeCount,
                   locale: language,
                   currencyCode: 'EUR',
                 }),
@@ -87,11 +104,17 @@ const TeamAccountBenefitStatistics = ({
       </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" />
+          </StatisticsCardTitle>
+          <StatisticsValue>1800 €</StatisticsValue>
+        </StatisticsCard>
         <StatisticsCard>
           <StatisticsCardTitle>
             <Trans i18nKey="teams:benefitStatistics.data.analysis" />
           </StatisticsCardTitle>
-          <StatisticsValue>18 %</StatisticsValue>
+          <StatisticsValue>200 €</StatisticsValue>
           <StatisticsDescription>
             <Trans
               i18nKey="teams:benefitStatistics.data.reservations"
@@ -103,7 +126,7 @@ const TeamAccountBenefitStatistics = ({
           <StatisticsCardTitle>
             <Trans i18nKey="teams:benefitStatistics.data.doctorsAndSpecialists" />
           </StatisticsCardTitle>
-          <StatisticsValue>22 %</StatisticsValue>
+          <StatisticsValue>200 €</StatisticsValue>
           <StatisticsDescription>
             <Trans
               i18nKey="teams:benefitStatistics.data.reservations"
@@ -115,7 +138,7 @@ const TeamAccountBenefitStatistics = ({
           <StatisticsCardTitle>
             <Trans i18nKey="teams:benefitStatistics.data.researches" />
           </StatisticsCardTitle>
-          <StatisticsValue>20 %</StatisticsValue>
+          <StatisticsValue>200 €</StatisticsValue>
           <StatisticsDescription>
             <Trans
               i18nKey="teams:benefitStatistics.data.reservations"
@@ -124,8 +147,10 @@ const TeamAccountBenefitStatistics = ({
           </StatisticsDescription>
         </StatisticsCard>
         <StatisticsCard>
-          <StatisticsCardTitle>E-konsultatsioon</StatisticsCardTitle>
-          <StatisticsValue>17 %</StatisticsValue>
+          <StatisticsCardTitle>
+            <Trans i18nKey="teams:benefitStatistics.data.eclinic" />
+          </StatisticsCardTitle>
+          <StatisticsValue>200 €</StatisticsValue>
           <StatisticsDescription>
             <Trans
               i18nKey="teams:benefitStatistics.data.reservations"
@@ -133,28 +158,19 @@ const TeamAccountBenefitStatistics = ({
             />
           </StatisticsDescription>
         </StatisticsCard>
-        <Card className="col-span-2 p-4">
+
+        <StatisticsCard>
           <StatisticsCardTitle>
             <Trans i18nKey="teams:benefitStatistics.data.healthResearchPlans" />
           </StatisticsCardTitle>
-          <div className="grid grid-cols-2 gap-2">
-            <div className="border-r">
-              <StatisticsValue>23 %</StatisticsValue>
-              <StatisticsDescription>
-                <Trans
-                  i18nKey="teams:benefitStatistics.data.serviceUsage"
-                  values={{ value: 46 }}
-                />
-              </StatisticsDescription>
-            </div>
-            <div className="ml-4">
-              <StatisticsValue>1800 €</StatisticsValue>
-              <StatisticsDescription>
-                <Trans i18nKey="teams:benefitStatistics.data.serviceSum" />
-              </StatisticsDescription>
-            </div>
-          </div>
-        </Card>
+          <StatisticsValue>200 €</StatisticsValue>
+          <StatisticsDescription>
+            <Trans
+              i18nKey="teams:benefitStatistics.data.serviceUsage"
+              values={{ value: 46 }}
+            />
+          </StatisticsDescription>
+        </StatisticsCard>
       </div>
     </div>
   );