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-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;