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/dashboard.tsx

@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic';
 
 import { LoadingOverlay } from '@kit/ui/loading-overlay';
 
-export const DashboardDemo = dynamic(() => import('./dashboard-demo-charts'), {
+export const Dashboard = dynamic(() => import('./team-account-statistics'), {
   ssr: false,
   loading: () => (
     <LoadingOverlay

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;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Card } from '@kit/ui/card';
+import { cn } from '@kit/ui/utils';
+
+import {
+  NormStatus,
+  getAccountHealthDetailsFields,
+} from '../_lib/server/load-team-account-health-details';
+
+const TeamAccountHealthDetails = () => {
+  const accountHealthDetailsFields = getAccountHealthDetailsFields();
+  return (
+    <div className="grid flex-1 grid-cols-2 gap-4 md:grid-cols-3">
+      {accountHealthDetailsFields.map(({ title, Icon, value, normStatus }) => (
+        <Card className="relative p-4">
+          <div
+            className={cn('absolute top-2 right-2 rounded-2xl p-2', {
+              'bg-success': normStatus === NormStatus.NORMAL,
+              'bg-warning': normStatus === NormStatus.WARNING,
+              'bg-destructive': normStatus === NormStatus.CRITICAL,
+            })}
+          >
+            <Icon color="white" className="stroke-2" />
+          </div>
+          <h5 className="mt-8 leading-none">{title}</h5>
+          <span className="text-muted-foreground text-xs">{value}</span>
+        </Card>
+      ))}
+    </div>
+  );
+};
+
+export default TeamAccountHealthDetails;

app/home/[account]/_components/team-account-layout-page-header.tsx

@@ -2,12 +2,13 @@ import { PageHeader } from '@kit/ui/page';
 
 export function TeamAccountLayoutPageHeader(
   props: React.PropsWithChildren<{
-    title: string | React.ReactNode;
-    description: string | React.ReactNode;
-    account: string;
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
   }>,
 ) {
   return (
-    <PageHeader description={props.description}>{props.children}</PageHeader>
+    <PageHeader description={props.description} title={props.title}>
+      {props.children}
+    </PageHeader>
   );
 }

app/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -50,15 +50,15 @@ function SidebarContainer(props: {
 
   return (
     <Sidebar collapsible={collapsible}>
-      <SidebarHeader className={'h-16 justify-center'}>
-        <div className={'flex items-center justify-between gap-x-3'}>
+      <SidebarHeader className="h-16 justify-center">
+        <div className="flex items-center justify-between gap-x-3">
           <TeamAccountAccountsSelector
             userId={userId}
             selectedAccount={account}
             accounts={accounts}
           />
 
-          <div className={'group-data-[minimized=true]:hidden'}>
+          <div className="group-data-[minimized=true]:hidden">
             <TeamAccountNotifications
               userId={userId}
               accountId={props.accountId}
@@ -73,7 +73,10 @@ function SidebarContainer(props: {
 
       <SidebarFooter>
         <SidebarContent>
-          <ProfileAccountDropdownContainer user={props.user} />
+          <ProfileAccountDropdownContainer
+            user={props.user}
+            accounts={accounts}
+          />
         </SidebarContent>
       </SidebarFooter>
     </Sidebar>

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

@@ -1,8 +1,19 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { use, useMemo, useState } from 'react';
 
-import { ArrowDown, ArrowUp, Menu, TrendingUp } from 'lucide-react';
+import { redirect } from 'next/navigation';
+
+import { Database } from '@/packages/supabase/src/database.types';
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronRight,
+  Euro,
+  Menu,
+  TrendingUp,
+  User,
+} from 'lucide-react';
 import {
   Area,
   AreaChart,
@@ -38,7 +49,20 @@ import {
   TableRow,
 } from '@kit/ui/table';
 
-export default function DashboardDemo() {
+import pathsConfig from '~/config/paths.config';
+import { createPath } from '~/config/team-account-navigation.config';
+
+import { loadCurrentUserAccount } from '../../(user)/_lib/server/load-user-account';
+import TeamAccountBenefitStatistics from './team-account-benefit-statistics';
+import TeamAccountHealthDetails from './team-account-health-details';
+
+interface TeamAccountStatisticsProps {
+  teamAccount: Database['medreport']['Tables']['accounts']['Row'];
+}
+
+export default function TeamAccountStatistics({
+  teamAccount,
+}: TeamAccountStatisticsProps) {
   const mrr = useMemo(() => generateDemoData(), []);
   const netRevenue = useMemo(() => generateDemoData(), []);
   const fees = useMemo(() => generateDemoData(), []);
@@ -50,111 +74,67 @@ export default function DashboardDemo() {
         'animate-in fade-in flex flex-col space-y-4 pb-36 duration-500'
       }
     >
-      <div
-        className={
-          'grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'
-        }
-      >
-        <Card>
-          <CardHeader>
-            <CardTitle className={'flex items-center gap-2.5'}>
-              <span>MRR</span>
-              <Trend trend={'up'}>20%</Trend>
-            </CardTitle>
+      <TeamAccountBenefitStatistics accountSlug={teamAccount.slug || ''} />
 
-            <CardDescription>
-              <span>Monthly recurring revenue</span>
-            </CardDescription>
+      <h5 className="mt-4 mb-2">Ettevõtte terviseandmed</h5>
+      <div className="flex flex-col gap-2 sm:flex-row">
+        <TeamAccountHealthDetails />
 
-            <div>
-              <Figure>{`$${mrr[1]}`}</Figure>
+        <div className="flex flex-col gap-2">
+          <Card
+            variant="gradient-success"
+            className="border-success/50 hover:bg-success/20 relative flex h-full cursor-pointer flex-col justify-center px-6 py-4 transition-colors"
+            onClick={() =>
+              redirect(
+                createPath(
+                  pathsConfig.app.accountMembers,
+                  teamAccount.slug || '',
+                ),
+              )
+            }
+          >
+            <div className="flex flex-col">
+              <div className="border-input absolute top-2 right-2 rounded-md border bg-white p-3">
+                <ChevronRight className="stroke-2" />
+              </div>
+              <div className="bg-primary/10 w-fit rounded-2xl p-2">
+                <User color="green" className="stroke-2" />
+              </div>
+              <span className="mt-4 mb-2 text-lg font-semibold">
+                Halda töötajaid
+              </span>
+              <p className="text-muted-foreground text-sm">
+                Lisa, muuda või eemalda töötajaid.
+              </p>
             </div>
-          </CardHeader>
+          </Card>
 
-          <CardContent className={'space-y-4'}>
-            <Chart data={mrr[0]} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className={'flex items-center gap-2.5'}>
-              <span>Revenue</span>
-              <Trend trend={'up'}>12%</Trend>
-            </CardTitle>
-
-            <CardDescription>
-              <span>Total revenue including fees</span>
-            </CardDescription>
-
-            <div>
-              <Figure>{`$${netRevenue[1]}`}</Figure>
+          <Card
+            variant="gradient-warning"
+            className="border-warning/40 hover:bg-warning/20 relative flex h-full cursor-pointer flex-col justify-center px-6 py-4 transition-colors"
+            onClick={() =>
+              redirect(
+                createPath(
+                  pathsConfig.app.accountBilling,
+                  teamAccount.slug || '',
+                ),
+              )
+            }
+          >
+            <div className="border-input absolute top-2 right-2 rounded-md border bg-white p-3">
+              <ChevronRight className="stroke-2" />
             </div>
-          </CardHeader>
-
-          <CardContent>
-            <Chart data={netRevenue[0]} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className={'flex items-center gap-2.5'}>
-              <span>Fees</span>
-              <Trend trend={'up'}>9%</Trend>
-            </CardTitle>
-
-            <CardDescription>
-              <span>Total fees collected</span>
-            </CardDescription>
-
-            <div>
-              <Figure>{`$${fees[1]}`}</Figure>
+            <div className="bg-warning/10 w-fit rounded-2xl p-2">
+              <Euro color="orange" className="stroke-2" />
             </div>
-          </CardHeader>
-
-          <CardContent>
-            <Chart data={fees[0]} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className={'flex items-center gap-2.5'}>
-              <span>New Customers</span>
-              <Trend trend={'down'}>-25%</Trend>
-            </CardTitle>
-
-            <CardDescription>
-              <span>Customers who signed up this month</span>
-            </CardDescription>
-
-            <div>
-              <Figure>{`${Number(newCustomers[1]).toFixed(0)}`}</Figure>
-            </div>
-          </CardHeader>
-
-          <CardContent>
-            <Chart data={newCustomers[0]} />
-          </CardContent>
-        </Card>
-      </div>
-
-      <VisitorsChart />
-
-      <PageViewsChart />
-
-      <div>
-        <Card>
-          <CardHeader>
-            <CardTitle>Best Customers</CardTitle>
-            <CardDescription>Showing the top customers by MRR</CardDescription>
-          </CardHeader>
-
-          <CardContent>
-            <CustomersTable />
-          </CardContent>
-        </Card>
+            <span className="mt-4 mb-2 text-lg font-semibold">
+              Halda eelarvet
+            </span>
+            <p className="text-muted-foreground text-sm">
+              Vali kuidas soovid eelarvet töötajate vahel jagada.
+            </p>
+          </Card>
+        </div>
       </div>
     </div>
   );

app/home/[account]/_lib/server/load-team-account-health-details.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { Clock, TrendingUp, User } from 'lucide-react';
+
+interface AccountHealthDetailsField {
+  title: string;
+  value: string;
+  Icon: React.ComponentType<{
+    size?: number;
+    color?: string;
+    className?: string;
+  }>;
+  normStatus: NormStatus;
+}
+
+export enum NormStatus {
+  CRITICAL = 'CRITICAL',
+  WARNING = 'WARNING',
+  NORMAL = 'NORMAL',
+}
+
+export const getAccountHealthDetailsFields =
+  (): AccountHealthDetailsField[] => {
+    const test = '';
+    return [
+      {
+        title: 'Naised',
+        value: '50% (16)',
+        Icon: User,
+        normStatus: NormStatus.NORMAL,
+      },
+      {
+        title: 'Mehed',
+        value: '50% (16)',
+        Icon: User,
+        normStatus: NormStatus.NORMAL,
+      },
+      {
+        title: 'Keskmine vanus',
+        value: '56',
+        Icon: Clock,
+        normStatus: NormStatus.NORMAL,
+      },
+      {
+        title: 'KMI',
+        value: '271',
+        Icon: TrendingUp,
+        normStatus: NormStatus.WARNING,
+      },
+      {
+        title: 'Üldkolesterool',
+        value: '6.1',
+        Icon: TrendingUp,
+        normStatus: NormStatus.WARNING,
+      },
+      {
+        title: 'Vitamiin D',
+        value: '76',
+        Icon: TrendingUp,
+        normStatus: NormStatus.NORMAL,
+      },
+      {
+        title: 'Suitsetajad',
+        value: '22%',
+        Icon: TrendingUp,
+        normStatus: NormStatus.CRITICAL,
+      },
+    ];
+  };

app/home/[account]/page.tsx

@@ -1,15 +1,18 @@
+'use server';
+
 import { use } from 'react';
 
 import { CompanyGuard } from '@/packages/features/team-accounts/src/components';
+import { createTeamAccountsApi } from '@/packages/features/team-accounts/src/server/api';
+import { getSupabaseServerClient } from '@/packages/supabase/src/clients/server-client';
 
-import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
 import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-import { DashboardDemo } from './_components/dashboard-demo';
+import { Dashboard } from './_components/dashboard';
 import { TeamAccountLayoutPageHeader } from './_components/team-account-layout-page-header';
 
 interface TeamAccountHomePageProps {
@@ -27,17 +30,23 @@ export const generateMetadata = async () => {
 
 function TeamAccountHomePage({ params }: TeamAccountHomePageProps) {
   const account = use(params).account;
-  console.log('TeamAccountHomePage account', account);
+  const client = getSupabaseServerClient();
+  const api = createTeamAccountsApi(client);
+  const teamAccount = use(api.getTeamAccount(account));
+  console.log('teamAccount', teamAccount);
   return (
     <>
       <TeamAccountLayoutPageHeader
-        account={account}
-        title={<Trans i18nKey={'common:routes.dashboard'} />}
-        description={<AppBreadcrumbs />}
+        title={
+          <Trans
+            i18nKey={'teams:home.headerTitle'}
+            values={{ companyName: account }}
+          />
+        }
       />
 
       <PageBody>
-        <DashboardDemo />
+        <Dashboard teamAccount={teamAccount} />
       </PageBody>
     </>
   );

components/personal-account-dropdown-container.tsx

@@ -13,7 +13,7 @@ const paths = {
   home: pathsConfig.app.home,
   admin: pathsConfig.app.admin,
   doctor: pathsConfig.app.doctor,
-  personalAccountSettings: pathsConfig.app.personalAccountSettings
+  personalAccountSettings: pathsConfig.app.personalAccountSettings,
 };
 
 const features = {
@@ -28,11 +28,13 @@ export function ProfileAccountDropdownContainer(props: {
     id: string | null;
     name: string | null;
     picture_url: string | null;
+    application_role: string;
   };
   accounts: {
     label: string | null;
     value: string | null;
     image?: string | null;
+    application_role: string;
   }[];
 }) {
   const signOut = useSignOut();

config/team-account-navigation.config.tsx

@@ -53,6 +53,6 @@ export function getTeamAccountSidebarConfig(account: string) {
   });
 }
 
-function createPath(path: string, account: string) {
+export function createPath(path: string, account: string) {
   return path.replace('[account]', account);
 }

packages/ui/src/shadcn/card.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { VariantProps, cva } from 'class-variance-authority';
+
 import { cn } from '.';
 
 const cardVariants = cva('text-card-foreground rounded-xl border', {

public/locales/en/account.json

@@ -126,4 +126,4 @@
   "updateRoleSuccess": "Role updated",
   "updateRoleError": "Something went wrong, please try again",
   "updateRoleLoading": "Updating role..."
-}
+}

public/locales/en/teams.json

@@ -1,6 +1,6 @@
 {
   "home": {
-    "pageTitle": "Home"
+    "pageTitle": "Dashboard"
   },
   "settings": {
     "pageTitle": "Settings",

public/locales/et/common.json

@@ -77,7 +77,7 @@
     "account": "Account",
     "members": "Members",
     "billing": "Billing",
-    "dashboard": "Dashboard",
+    "dashboard": "Ülevaade",
     "settings": "Settings",
     "profile": "Profile",
     "application": "Application"
@@ -129,4 +129,4 @@
     "expiredAt": "Kehtiv kuni {{expiredAt}}"
   },
   "doctor": "Arst"
-}
+}

public/locales/et/teams.json

@@ -1,6 +1,7 @@
 {
   "home": {
-    "pageTitle": "Home"
+    "pageTitle": "Ülevaade",
+    "headerTitle": "{{companyName}} tervise ülevaade"
   },
   "settings": {
     "pageTitle": "Settings",
@@ -18,6 +19,13 @@
   "billing": {
     "pageTitle": "Billing"
   },
+  "benefitStatistics": {
+    "budget": {
+      "title": "Ettevõtte Tervisekassa seis",
+      "balance": "Eelarve jääk {{balance}}",
+      "volume": "Eelarve maht {{volume}}"
+    }
+  },
   "yourTeams": "Your Companies ({{teamsCount}})",
   "createTeam": "Create a Company",
   "creatingTeam": "Creating Company...",

supabase/migrations/20250818111200_team_account.sql

@@ -0,0 +1,2 @@
+CREATE TRIGGER log_account_change AFTER DELETE OR UPDATE ON medreport.accounts_memberships FOR EACH ROW EXECUTE FUNCTION audit.log_audit_changes();
+