feat(dashboard): add dynamic loading for dashboard component

feat(team-account-benefit-statistics): implement benefit statistics card with budget and booking details

feat(team-account-health-details): create health details component displaying account health metrics

feat(team-account-statistics): develop team account statistics page with charts and customer table

feat(load-team-account-health-details): add server-side function to retrieve account health details

chore(migrations): create trigger for logging changes in account memberships

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

@@ -0,0 +1,128 @@
+import React, { use } from 'react';
+
+import { redirect } from 'next/navigation';
+
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { PiggyBankIcon, Settings } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { Card, CardTitle } from '@kit/ui/card';
+import { Button } from '@kit/ui/shadcn/button';
+import { Trans } from '@kit/ui/trans';
+
+import pathsConfig from '~/config/paths.config';
+import { createPath } from '~/config/team-account-navigation.config';
+
+interface TeamAccountBenefitStatisticsProps {
+  accountSlug: string;
+}
+
+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 StatisticsDescription = ({ children }: { children: React.ReactNode }) => {
+  return <p className="text-success text-xs">{children}</p>;
+};
+
+const StatisticsValue = ({ children }: { children: React.ReactNode }) => {
+  return <h4 className="">{children}</h4>;
+};
+
+const TeamAccountBenefitStatistics = ({
+  accountSlug,
+}: TeamAccountBenefitStatisticsProps) => {
+  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: 15000,
+                  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>Analüüsid</StatisticsCardTitle>
+          <StatisticsValue>18 %</StatisticsValue>
+          <StatisticsDescription>36 broneeringut</StatisticsDescription>
+        </StatisticsCard>
+        <StatisticsCard>
+          <StatisticsCardTitle>Eriarstid ja spetsialistid</StatisticsCardTitle>
+          <StatisticsValue>22 %</StatisticsValue>
+          <StatisticsDescription>44 broneeringut</StatisticsDescription>
+        </StatisticsCard>
+        <StatisticsCard>
+          <StatisticsCardTitle>Uuringud</StatisticsCardTitle>
+          <StatisticsValue>20 %</StatisticsValue>
+          <StatisticsDescription>40 broneeringut</StatisticsDescription>
+        </StatisticsCard>
+        <StatisticsCard>
+          <StatisticsCardTitle>E-konsultatsioon</StatisticsCardTitle>
+          <StatisticsValue>17 %</StatisticsValue>
+          <StatisticsDescription>34 broneeringut</StatisticsDescription>
+        </StatisticsCard>
+        <Card className="col-span-2 p-4">
+          <StatisticsCardTitle>Terviseuuringute paketid</StatisticsCardTitle>
+          <div className="grid grid-cols-2 gap-2">
+            <div className="border-r">
+              <StatisticsValue>23 %</StatisticsValue>
+              <StatisticsDescription>46 teenuse kasutust</StatisticsDescription>
+            </div>
+            <div className="ml-4">
+              <StatisticsValue>1800 €</StatisticsValue>
+              <StatisticsDescription>Teenuste summa</StatisticsDescription>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default TeamAccountBenefitStatistics;