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

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

@@ -1,33 +1,36 @@
 import React from 'react';
 
+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 {
-  NormStatus,
-  getAccountHealthDetailsFields,
-} from '../_lib/server/load-team-account-health-details';
+import { getAccountHealthDetailsFields } from '../_lib/server/load-team-account-health-details';
 import { TeamAccountStatisticsProps } from './team-account-statistics';
 
 const TeamAccountHealthDetails = ({
   memberParams,
+  bmiThresholds,
+  members,
 }: {
   memberParams: TeamAccountStatisticsProps['memberParams'];
+  bmiThresholds: Omit<
+    Database['medreport']['Tables']['bmi_thresholds']['Row'],
+    'id'
+  >[];
+  members: Database['medreport']['Functions']['get_account_members']['Returns'];
 }) => {
-  const accountHealthDetailsFields =
-    getAccountHealthDetailsFields(memberParams);
+  const accountHealthDetailsFields = getAccountHealthDetailsFields(
+    memberParams,
+    bmiThresholds,
+    members,
+  );
   return (
     <div className="grid flex-1 grid-cols-2 gap-4 md:grid-cols-3">
-      {accountHealthDetailsFields.map(({ title, Icon, value, normStatus }) => (
+      {accountHealthDetailsFields.map(({ title, Icon, value, iconBg }) => (
         <Card className="relative p-4" key={title}>
-          <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,
-            })}
-          >
+          <div className={cn('absolute top-2 right-2 rounded-2xl p-2', iconBg)}>
             <Icon color="white" className="stroke-2" />
           </div>
           <h5 className="mt-8 leading-none">