diff --git a/frontend/src/components/MobileBottomNav.tsx b/frontend/src/components/MobileBottomNav.tsx
new file mode 100644
index 0000000..a1a8311
--- /dev/null
+++ b/frontend/src/components/MobileBottomNav.tsx
@@ -0,0 +1,186 @@
+import {
+  mdiAccountCircleOutline,
+  mdiChartTimelineVariant,
+  mdiHeartPulse,
+  mdiLeafCircle,
+  mdiMenu,
+  mdiTargetVariant,
+  mdiViewDashboardOutline,
+  mdiWaterOutline,
+} from '@mdi/js'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
+import { hasCompletedApexOnboarding } from '../helpers/apexOnboarding'
+import { hasPermission } from '../helpers/userPermissions'
+import { useAppSelector } from '../stores/hooks'
+import BaseIcon from './BaseIcon'
+
+type Props = {
+  onMenuClick: () => void
+  isMenuOpen: boolean
+}
+
+type MobileNavItem = {
+  key: string
+  href?: string
+  label: string
+  icon: string
+  matchers: string[]
+  onClick?: () => void
+}
+
+function isRouteActive(pathname: string, matchers: string[]) {
+  return matchers.some(
+    (matcher) => pathname === matcher || pathname.startsWith(`${matcher}/`),
+  )
+}
+
+function getItemClass(active: boolean, isPulse: boolean) {
+  if (isPulse) {
+    return active
+      ? 'bg-[#4A6741] text-white shadow-md dark:bg-emerald-700 dark:text-white'
+      : 'bg-[#EDF4EA] text-[#4A6741] dark:bg-dark-800 dark:text-emerald-300'
+  }
+
+  return active
+    ? 'bg-[#EDF4EA] text-[#4A6741] dark:bg-dark-800 dark:text-emerald-300'
+    : 'text-[#7E725E] dark:text-slate-400'
+}
+
+export default function MobileBottomNav({ onMenuClick, isMenuOpen }: Props) {
+  const router = useRouter()
+  const { currentUser } = useAppSelector((state) => state.auth)
+  const [onboardingComplete, setOnboardingComplete] = useState(false)
+
+  useEffect(() => {
+    setOnboardingComplete(hasCompletedApexOnboarding(currentUser?.id))
+  }, [currentUser?.id])
+
+  const focusItem: MobileNavItem =
+    onboardingComplete && hasPermission(currentUser, 'READ_GOALS')
+      ? {
+          key: 'goals',
+          href: '/goals/goals-list',
+          label: 'Goals',
+          icon: mdiTargetVariant,
+          matchers: ['/goals'],
+        }
+      : {
+          key: 'setup',
+          href: '/onboarding',
+          label: 'Setup',
+          icon: mdiAccountCircleOutline,
+          matchers: ['/onboarding'],
+        }
+
+  let trackingItem: MobileNavItem = {
+    key: 'today',
+    href: '/daily-pulse',
+    label: 'Today',
+    icon: mdiChartTimelineVariant,
+    matchers: ['/daily-pulse'],
+  }
+
+  if (hasPermission(currentUser, 'READ_HEALTH_METRICS')) {
+    trackingItem = {
+      key: 'vitals',
+      href: '/health_metrics/health_metrics-list',
+      label: 'Vitals',
+      icon: mdiChartTimelineVariant,
+      matchers: ['/health_metrics'],
+    }
+  } else if (hasPermission(currentUser, 'READ_CONDITIONS')) {
+    trackingItem = {
+      key: 'care',
+      href: '/conditions/conditions-list',
+      label: 'Care',
+      icon: mdiLeafCircle,
+      matchers: ['/conditions'],
+    }
+  } else if (hasPermission(currentUser, 'READ_HYDRATION_LOGS')) {
+    trackingItem = {
+      key: 'hydrate',
+      href: '/hydration_logs/hydration_logs-list',
+      label: 'Hydrate',
+      icon: mdiWaterOutline,
+      matchers: ['/hydration_logs'],
+    }
+  }
+
+  const navItems: MobileNavItem[] = [
+    {
+      key: 'home',
+      href: '/dashboard',
+      label: 'Home',
+      icon: mdiViewDashboardOutline,
+      matchers: ['/dashboard'],
+    },
+    {
+      key: 'pulse',
+      href: '/daily-pulse',
+      label: 'Pulse',
+      icon: mdiHeartPulse,
+      matchers: ['/daily-pulse'],
+    },
+    focusItem,
+    trackingItem,
+    {
+      key: 'menu',
+      label: 'Menu',
+      icon: mdiMenu,
+      matchers: [],
+      onClick: onMenuClick,
+    },
+  ]
+
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-30 px-3 pb-3 pt-2 lg:hidden">
+      <div className="mx-auto flex max-w-md items-center gap-1 rounded-3xl border border-stone-200 bg-[#FFF9F0]/95 p-2 shadow-lg backdrop-blur-md dark:border-dark-700 dark:bg-dark-900/95">
+        {navItems.map((item) => {
+          const isActive =
+            item.key === 'menu'
+              ? isMenuOpen
+              : isRouteActive(router.pathname, item.matchers)
+          const isPulse = item.key === 'pulse'
+          const sharedClassName = [
+            'flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-2xl px-1 py-2 text-[11px] font-semibold transition-all duration-150',
+            getItemClass(isActive, isPulse),
+          ].join(' ')
+          const content = (
+            <>
+              <BaseIcon path={item.icon} size={isPulse ? 22 : 20} />
+              <span className="truncate text-center leading-none">{item.label}</span>
+            </>
+          )
+
+          if (item.href) {
+            return (
+              <Link
+                key={item.key}
+                href={item.href}
+                aria-current={isActive ? 'page' : undefined}
+                className={sharedClassName}
+              >
+                {content}
+              </Link>
+            )
+          }
+
+          return (
+            <button
+              key={item.key}
+              type="button"
+              aria-pressed={isActive}
+              aria-label={item.label}
+              className={sharedClassName}
+              onClick={item.onClick}
+            >
+              {content}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/NavBarItem.tsx b/frontend/src/components/NavBarItem.tsx
index 55559d2..dd9c442 100644
--- a/frontend/src/components/NavBarItem.tsx
+++ b/frontend/src/components/NavBarItem.tsx
@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
diff --git a/frontend/src/helpers/apexOnboarding.ts b/frontend/src/helpers/apexOnboarding.ts
new file mode 100644
index 0000000..85da7f8
--- /dev/null
+++ b/frontend/src/helpers/apexOnboarding.ts
@@ -0,0 +1,88 @@
+export type ApexOnboardingRecordIds = {
+  physicalId?: string;
+  lifestyleId?: string;
+  goalId?: string;
+  conditionId?: string;
+};
+
+export type ApexOnboardingDraft<T = Record<string, unknown>> = {
+  version: number;
+  lastSavedAt?: string;
+  completedAt?: string;
+  form?: Partial<T>;
+  recordIds?: ApexOnboardingRecordIds;
+};
+
+const APEX_ONBOARDING_VERSION = 1;
+
+export function getApexOnboardingStorageKey(userId?: string | null) {
+  return userId
+    ? `apex-brain:onboarding:v${APEX_ONBOARDING_VERSION}:${userId}`
+    : '';
+}
+
+export function readApexOnboardingDraft<
+  T = Record<string, unknown>,
+>(userId?: string | null): ApexOnboardingDraft<T> | null {
+  if (typeof window === 'undefined' || !userId) {
+    return null;
+  }
+
+  const storageKey = getApexOnboardingStorageKey(userId);
+
+  try {
+    const rawValue = window.localStorage.getItem(storageKey);
+
+    if (!rawValue) {
+      return null;
+    }
+
+    const parsedValue = JSON.parse(rawValue);
+
+    if (!parsedValue || typeof parsedValue !== 'object') {
+      return null;
+    }
+
+    return parsedValue as ApexOnboardingDraft<T>;
+  } catch (error) {
+    console.error('Failed to read APEX BRAIN onboarding draft:', error);
+    return null;
+  }
+}
+
+export function saveApexOnboardingDraft<T>(
+  userId: string | null | undefined,
+  draft: Omit<ApexOnboardingDraft<T>, 'version'>,
+) {
+  if (typeof window === 'undefined' || !userId) {
+    return;
+  }
+
+  const storageKey = getApexOnboardingStorageKey(userId);
+  const nextDraft: ApexOnboardingDraft<T> = {
+    version: APEX_ONBOARDING_VERSION,
+    ...draft,
+    lastSavedAt: draft.lastSavedAt ?? new Date().toISOString(),
+  };
+
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(nextDraft));
+  } catch (error) {
+    console.error('Failed to save APEX BRAIN onboarding draft:', error);
+  }
+}
+
+export function markApexOnboardingCompleted<T>(
+  userId: string | null | undefined,
+  draft: Omit<ApexOnboardingDraft<T>, 'version'>,
+) {
+  saveApexOnboardingDraft<T>(userId, {
+    ...draft,
+    completedAt: draft.completedAt ?? new Date().toISOString(),
+  });
+}
+
+export function hasCompletedApexOnboarding(userId?: string | null) {
+  const draft = readApexOnboardingDraft(userId);
+  return Boolean(draft?.completedAt);
+}
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index 1b9907d..0cc495b 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -1,6 +1,6 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
-import jwt from 'jsonwebtoken';
+import type { ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+import jwt from 'jsonwebtoken'
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
 import menuNavBar from '../menuNavBar'
@@ -9,66 +9,88 @@ import NavBar from '../components/NavBar'
 import NavBarItemPlain from '../components/NavBarItemPlain'
 import AsideMenu from '../components/AsideMenu'
 import FooterBar from '../components/FooterBar'
+import MobileBottomNav from '../components/MobileBottomNav'
 import { useAppDispatch, useAppSelector } from '../stores/hooks'
-import Search from '../components/Search';
+import Search from '../components/Search'
 import { useRouter } from 'next/router'
-import {findMe, logoutUser} from "../stores/authSlice";
-
-import {hasPermission} from "../helpers/userPermissions";
-
+import { findMe, logoutUser } from '../stores/authSlice'
+import { humanize } from '../helpers/humanize'
+import { hasPermission } from '../helpers/userPermissions'
 
 type Props = {
   children: ReactNode
-  
   permission?: string
-  
 }
 
-export default function LayoutAuthenticated({
-  children,
-  
-  permission
-  
-}: Props) {
+function getMobilePageTitle(pathname: string) {
+  const knownRoutes = [
+    { prefix: '/dashboard', title: 'Home' },
+    { prefix: '/daily-pulse', title: 'Daily Pulse' },
+    { prefix: '/onboarding', title: 'Onboarding' },
+    { prefix: '/goals', title: 'Goals' },
+    { prefix: '/health_metrics', title: 'Vitals' },
+    { prefix: '/conditions', title: 'Care' },
+    { prefix: '/hydration_logs', title: 'Hydration' },
+    { prefix: '/mood_logs', title: 'Mood' },
+    { prefix: '/sleep_logs', title: 'Sleep' },
+    { prefix: '/profile', title: 'Profile' },
+  ]
+
+  const matchedRoute = knownRoutes.find((route) => pathname.startsWith(route.prefix))
+
+  if (matchedRoute) {
+    return matchedRoute.title
+  }
+
+  const [firstSegment] = pathname.split('/').filter(Boolean)
+
+  if (!firstSegment) {
+    return 'Home'
+  }
+
+  return humanize(firstSegment.replace(/-/g, ' ').replace(/_/g, ' '))
+}
+
+export default function LayoutAuthenticated({ children, permission }: Props) {
   const dispatch = useAppDispatch()
   const router = useRouter()
   const { token, currentUser } = useAppSelector((state) => state.auth)
-  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const bgColor = useAppSelector((state) => state.style.bgLayoutColor)
+  const darkMode = useAppSelector((state) => state.style.darkMode)
+  const [isAsideMobileExpanded, setIsAsideMobileExpanded] = useState(false)
+  const [isAsideLgActive, setIsAsideLgActive] = useState(false)
+
   let localToken
   if (typeof window !== 'undefined') {
-    // Perform localStorage action
     localToken = localStorage.getItem('token')
   }
 
   const isTokenValid = () => {
-    const token = localStorage.getItem('token');
-    if (!token) return;
-    const date = new Date().getTime() / 1000;
-    const data = jwt.decode(token);
-    if (!data) return;
-    return date < data.exp;
-  };
+    const tokenValue = localStorage.getItem('token')
+
+    if (!tokenValue) return
+
+    const date = new Date().getTime() / 1000
+    const data = jwt.decode(tokenValue)
+
+    if (!data) return
+
+    return date < data.exp
+  }
 
   useEffect(() => {
-    dispatch(findMe());
+    dispatch(findMe())
     if (!isTokenValid()) {
-      dispatch(logoutUser());
-      router.push('/login');
+      dispatch(logoutUser())
+      router.push('/login')
     }
-  }, [token, localToken]);
+  }, [token, localToken])
 
-  
   useEffect(() => {
-    if (!permission || !currentUser) return;
+    if (!permission || !currentUser) return
 
-    if (!hasPermission(currentUser, permission)) router.push('/error');
-  }, [currentUser, permission]);
-  
-
-  const darkMode = useAppSelector((state) => state.style.darkMode)
-
-  const [isAsideMobileExpanded, setIsAsideMobileExpanded] = useState(false)
-  const [isAsideLgActive, setIsAsideLgActive] = useState(false)
+    if (!hasPermission(currentUser, permission)) router.push('/error')
+  }, [currentUser, permission])
 
   useEffect(() => {
     const handleRouteChangeStart = () => {
@@ -78,22 +100,20 @@ export default function LayoutAuthenticated({
 
     router.events.on('routeChangeStart', handleRouteChangeStart)
 
-    // If the component is unmounted, unsubscribe
-    // from the event with the `off` method:
     return () => {
       router.events.off('routeChangeStart', handleRouteChangeStart)
     }
   }, [router.events, dispatch])
 
-
   const layoutAsidePadding = 'xl:pl-60'
+  const mobilePageTitle = getMobilePageTitle(router.pathname)
 
   return (
     <div className={`${darkMode ? 'dark' : ''} overflow-hidden lg:overflow-visible`}>
       <div
         className={`${layoutAsidePadding} ${
           isAsideMobileExpanded ? 'ml-60 lg:ml-0' : ''
-        } pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor}  dark:bg-dark-800 dark:text-slate-100`}
+        } pt-14 pb-24 min-h-screen w-screen transition-position lg:w-auto lg:pb-0 ${bgColor} dark:bg-dark-800 dark:text-slate-100`}
       >
         <NavBar
           menu={menuNavBar}
@@ -105,13 +125,23 @@ export default function LayoutAuthenticated({
           >
             <BaseIcon path={isAsideMobileExpanded ? mdiBackburger : mdiForwardburger} size="24" />
           </NavBarItemPlain>
+          <div className="flex min-w-0 flex-1 items-center px-1 lg:hidden">
+            <div className="min-w-0">
+              <div className="truncate text-[10px] font-semibold uppercase tracking-[0.28em] text-[#8A7C66] dark:text-slate-400">
+                APEX BRAIN
+              </div>
+              <div className="truncate text-sm font-semibold text-[#1C1C1C] dark:text-white">
+                {mobilePageTitle}
+              </div>
+            </div>
+          </div>
           <NavBarItemPlain
             display="hidden lg:flex xl:hidden"
             onClick={() => setIsAsideLgActive(true)}
           >
             <BaseIcon path={mdiMenu} size="24" />
           </NavBarItemPlain>
-          <NavBarItemPlain useMargin>
+          <NavBarItemPlain display="hidden lg:flex" useMargin>
             <Search />
           </NavBarItemPlain>
         </NavBar>
@@ -122,7 +152,13 @@ export default function LayoutAuthenticated({
           onAsideLgClose={() => setIsAsideLgActive(false)}
         />
         {children}
-        <FooterBar>Hand-crafted & Made with ❤️</FooterBar>
+        <div className="hidden lg:block">
+          <FooterBar>Hand-crafted & Made with ❤️</FooterBar>
+        </div>
+        <MobileBottomNav
+          isMenuOpen={isAsideMobileExpanded}
+          onMenuClick={() => setIsAsideMobileExpanded((currentValue) => !currentValue)}
+        />
       </div>
     </div>
   )
diff --git a/frontend/src/menuAside.ts b/frontend/src/menuAside.ts
index ea74456..b561930 100644
--- a/frontend/src/menuAside.ts
+++ b/frontend/src/menuAside.ts
@@ -5,7 +5,17 @@ const menuAside: MenuAsideItem[] = [
   {
     href: '/dashboard',
     icon: icon.mdiViewDashboardOutline,
-    label: 'Dashboard',
+    label: 'Home',
+  },
+  {
+    href: '/daily-pulse',
+    label: 'Daily Pulse',
+    icon: 'mdiHeartPulse' in icon ? icon['mdiHeartPulse' as keyof typeof icon] : icon.mdiChartTimelineVariant,
+  },
+  {
+    href: '/onboarding',
+    label: 'Onboarding',
+    icon: icon.mdiAccount,
   },
   
   {
diff --git a/frontend/src/pages/daily-pulse.tsx b/frontend/src/pages/daily-pulse.tsx
new file mode 100644
index 0000000..75964de
--- /dev/null
+++ b/frontend/src/pages/daily-pulse.tsx
@@ -0,0 +1,1399 @@
+import {
+  mdiArrowTopRight,
+  mdiCalendarHeart,
+  mdiCheckCircleOutline,
+  mdiEmoticonHappyOutline,
+  mdiHeartPulse,
+  mdiScaleBathroom,
+  mdiTargetVariant,
+  mdiTrophyOutline,
+  mdiWaterOutline,
+  mdiWeatherNight,
+} from '@mdi/js';
+import axios from 'axios';
+import Head from 'next/head';
+import Link from 'next/link';
+import type { FormEvent, ReactElement } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import BaseIcon from '../components/BaseIcon';
+import FormField from '../components/FormField';
+import NotificationBar from '../components/NotificationBar';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+import { humanize } from '../helpers/humanize';
+import { hasPermission } from '../helpers/userPermissions';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import { useAppSelector } from '../stores/hooks';
+
+type FeedbackState = {
+  color: 'success' | 'danger';
+  message: string;
+} | null;
+
+type MoodRow = {
+  mood_score: number | null;
+  energy_level: number | null;
+  anxiety_level: number | null;
+  emotion_tags_csv: string | null;
+  logged_at: string | null;
+};
+
+type SleepRow = {
+  bedtime: string | null;
+  final_wake_time: string | null;
+  total_sleep_minutes: number | null;
+  sleep_quality: number | null;
+  morning_energy: number | null;
+};
+
+type WeightRow = {
+  measured_at: string | null;
+  value_primary: number | string | null;
+  unit: string | null;
+  notes: string | null;
+};
+
+type GoalRow = {
+  id: string;
+  goal_type: string;
+  follow_up_answer: string | null;
+  target_date: string | null;
+};
+
+type ActivityEntry = {
+  id: string;
+  kind: 'hydration' | 'mood' | 'sleep' | 'weight';
+  title: string;
+  detail: string | null;
+  happened_at: string | null;
+};
+
+type SummaryState = {
+  hydrationTotalMl: number;
+  hydrationLogsToday: number;
+  moodToday: MoodRow | null;
+  sleepLatest: SleepRow | null;
+  weightLatest: WeightRow | null;
+};
+
+type PulseFormState = {
+  hydrationLoggedAt: string;
+  volumeMl: string;
+  beverageType: string;
+  containerLabel: string;
+  countsTowardHydration: boolean;
+  moodLoggedAt: string;
+  moodScore: string;
+  moodTags: string;
+  energyLevel: string;
+  anxietyLevel: string;
+  journalEntry: string;
+  sleepBedtime: string;
+  sleepWakeTime: string;
+  sleepQuality: string;
+  morningEnergy: string;
+  sleepDisturbances: string;
+  weightMeasuredAt: string;
+  weightValue: string;
+  weightUnit: 'kg' | 'lb';
+  weightNotes: string;
+};
+
+const WATER_GOAL_ML = 2000;
+const DAILY_PULSE_DEVICE = 'APEX BRAIN Daily Pulse';
+
+const activityRouteByKind: Record<ActivityEntry['kind'], string> = {
+  hydration: '/hydration_logs/hydration_logs-view',
+  mood: '/mood_logs/mood_logs-view',
+  sleep: '/sleep_logs/sleep_logs-view',
+  weight: '/health_metrics/health_metrics-view',
+};
+
+const quickLinks = [
+  {
+    href: '/hydration_logs/hydration_logs-list',
+    title: 'Hydration history',
+    description: 'Review every bottle, cup, and hydration pattern.',
+    icon: mdiWaterOutline,
+  },
+  {
+    href: '/mood_logs/mood_logs-list',
+    title: 'Mood journal',
+    description: 'See emotional trends and coaching notes over time.',
+    icon: mdiEmoticonHappyOutline,
+  },
+  {
+    href: '/sleep_logs/sleep_logs-list',
+    title: 'Sleep trends',
+    description: 'Open your bedtime, wake time, and recovery history.',
+    icon: mdiWeatherNight,
+  },
+  {
+    href: '/goals/goals-list',
+    title: 'Goal vault',
+    description: 'Keep active goals aligned with the habits that matter.',
+    icon: mdiTargetVariant,
+  },
+];
+
+function pad(value: number) {
+  return String(value).padStart(2, '0');
+}
+
+function toLocalDateTimeValue(date: Date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function initialPulseForm(): PulseFormState {
+  const now = new Date();
+
+  return {
+    hydrationLoggedAt: toLocalDateTimeValue(now),
+    volumeMl: '',
+    beverageType: 'water',
+    containerLabel: '',
+    countsTowardHydration: true,
+    moodLoggedAt: toLocalDateTimeValue(now),
+    moodScore: '',
+    moodTags: '',
+    energyLevel: '',
+    anxietyLevel: '',
+    journalEntry: '',
+    sleepBedtime: '',
+    sleepWakeTime: '',
+    sleepQuality: '',
+    morningEnergy: '',
+    sleepDisturbances: '',
+    weightMeasuredAt: toLocalDateTimeValue(now),
+    weightValue: '',
+    weightUnit: 'kg',
+    weightNotes: '',
+  };
+}
+
+function escapeSqlLiteral(value: string) {
+  return value.replace(/'/g, "''");
+}
+
+async function runSql<T>(sql: string): Promise<T[]> {
+  const response = await axios.post('/sql', { sql });
+  return Array.isArray(response.data?.rows) ? response.data.rows : [];
+}
+
+function formatDateTime(value?: string | null) {
+  if (!value) {
+    return 'Not recorded yet';
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  }).format(new Date(value));
+}
+
+function formatDate(value?: string | null) {
+  if (!value) {
+    return 'No target date';
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(new Date(value));
+}
+
+function formatMinutes(total?: number | null) {
+  if (!total || total <= 0) {
+    return 'Not logged yet';
+  }
+
+  const hours = Math.floor(total / 60);
+  const minutes = total % 60;
+
+  if (!hours) {
+    return `${minutes} min`;
+  }
+
+  return `${hours}h ${minutes}m`;
+}
+
+function isToday(value?: string | null) {
+  if (!value) {
+    return false;
+  }
+
+  const today = new Date();
+  const candidate = new Date(value);
+
+  return today.toDateString() === candidate.toDateString();
+}
+
+function hasRecentSleep(value?: string | null) {
+  if (!value) {
+    return false;
+  }
+
+  const happenedAt = new Date(value).getTime();
+  const now = Date.now();
+  const hoursDiff = Math.abs(now - happenedAt) / (1000 * 60 * 60);
+
+  return hoursDiff <= 36;
+}
+
+function toIsoString(value: string) {
+  return new Date(value).toISOString();
+}
+
+function DailyPulsePage() {
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const [form, setForm] = useState<PulseFormState>(initialPulseForm);
+  const [feedback, setFeedback] = useState<FeedbackState>(null);
+  const [summary, setSummary] = useState<SummaryState>({
+    hydrationTotalMl: 0,
+    hydrationLogsToday: 0,
+    moodToday: null,
+    sleepLatest: null,
+    weightLatest: null,
+  });
+  const [goals, setGoals] = useState<GoalRow[]>([]);
+  const [recentActivity, setRecentActivity] = useState<ActivityEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const permissions = useMemo(
+    () => ({
+      hydrationRead: hasPermission(currentUser, 'READ_HYDRATION_LOGS'),
+      hydrationCreate: hasPermission(currentUser, 'CREATE_HYDRATION_LOGS'),
+      moodRead: hasPermission(currentUser, 'READ_MOOD_LOGS'),
+      moodCreate: hasPermission(currentUser, 'CREATE_MOOD_LOGS'),
+      sleepRead: hasPermission(currentUser, 'READ_SLEEP_LOGS'),
+      sleepCreate: hasPermission(currentUser, 'CREATE_SLEEP_LOGS'),
+      weightRead: hasPermission(currentUser, 'READ_HEALTH_METRICS'),
+      weightCreate: hasPermission(currentUser, 'CREATE_HEALTH_METRICS'),
+      goalsRead: hasPermission(currentUser, 'READ_GOALS'),
+    }),
+    [currentUser],
+  );
+
+  const loadPulse = useCallback(async (userId: string) => {
+    const safeUserId = escapeSqlLiteral(userId);
+    const activityQueries: string[] = [];
+
+    if (permissions.hydrationRead) {
+      activityQueries.push(`
+        SELECT
+          id,
+          'hydration'::text AS kind,
+          COALESCE(NULLIF(container_label, ''), INITCAP(REPLACE(beverage_type, '_', ' ')), 'Hydration') AS title,
+          CONCAT(COALESCE(volume_ml::text, '0'), ' ml') AS detail,
+          logged_at AS happened_at
+        FROM hydration_logs
+        WHERE "userId" = '${safeUserId}'
+          AND "deletedAt" IS NULL
+      `);
+    }
+
+    if (permissions.moodRead) {
+      activityQueries.push(`
+        SELECT
+          id,
+          'mood'::text AS kind,
+          COALESCE(NULLIF(emotion_tags_csv, ''), 'Mood check-in') AS title,
+          CONCAT('Mood ', COALESCE(mood_score::text, '-'), '/10') AS detail,
+          logged_at AS happened_at
+        FROM mood_logs
+        WHERE "userId" = '${safeUserId}'
+          AND "deletedAt" IS NULL
+      `);
+    }
+
+    if (permissions.sleepRead) {
+      activityQueries.push(`
+        SELECT
+          id,
+          'sleep'::text AS kind,
+          'Sleep log'::text AS title,
+          CONCAT(COALESCE(total_sleep_minutes::text, '0'), ' min sleep') AS detail,
+          COALESCE(final_wake_time, bedtime) AS happened_at
+        FROM sleep_logs
+        WHERE "userId" = '${safeUserId}'
+          AND "deletedAt" IS NULL
+      `);
+    }
+
+    if (permissions.weightRead) {
+      activityQueries.push(`
+        SELECT
+          id,
+          'weight'::text AS kind,
+          'Weight check'::text AS title,
+          CONCAT(COALESCE(value_primary::text, '0'), ' ', COALESCE(unit, '')) AS detail,
+          measured_at AS happened_at
+        FROM health_metrics
+        WHERE "userId" = '${safeUserId}'
+          AND "deletedAt" IS NULL
+          AND metric_type = 'body_composition'
+          AND device_used = '${escapeSqlLiteral(DAILY_PULSE_DEVICE)}'
+      `);
+    }
+
+    setLoading(true);
+
+    try {
+      const [hydrationRows, moodRows, sleepRows, weightRows, goalRows, activityRows] = await Promise.all([
+        permissions.hydrationRead
+          ? runSql<{ hydration_total_ml: number; hydration_logs_today: number }>(`
+              SELECT
+                COALESCE(SUM(CASE WHEN counts_toward_hydration THEN volume_ml ELSE 0 END), 0)::int AS hydration_total_ml,
+                COUNT(*)::int AS hydration_logs_today
+              FROM hydration_logs
+              WHERE "userId" = '${safeUserId}'
+                AND "deletedAt" IS NULL
+                AND logged_at::date = CURRENT_DATE
+            `)
+          : Promise.resolve([]),
+        permissions.moodRead
+          ? runSql<MoodRow>(`
+              SELECT mood_score, energy_level, anxiety_level, emotion_tags_csv, logged_at
+              FROM mood_logs
+              WHERE "userId" = '${safeUserId}'
+                AND "deletedAt" IS NULL
+                AND logged_at::date = CURRENT_DATE
+              ORDER BY logged_at DESC
+              LIMIT 1
+            `)
+          : Promise.resolve([]),
+        permissions.sleepRead
+          ? runSql<SleepRow>(`
+              SELECT bedtime, final_wake_time, total_sleep_minutes, sleep_quality, morning_energy
+              FROM sleep_logs
+              WHERE "userId" = '${safeUserId}'
+                AND "deletedAt" IS NULL
+              ORDER BY COALESCE(final_wake_time, bedtime) DESC NULLS LAST, "createdAt" DESC
+              LIMIT 1
+            `)
+          : Promise.resolve([]),
+        permissions.weightRead
+          ? runSql<WeightRow>(`
+              SELECT measured_at, value_primary, unit, notes
+              FROM health_metrics
+              WHERE "userId" = '${safeUserId}'
+                AND "deletedAt" IS NULL
+                AND metric_type = 'body_composition'
+                AND device_used = '${escapeSqlLiteral(DAILY_PULSE_DEVICE)}'
+              ORDER BY measured_at DESC NULLS LAST, "createdAt" DESC
+              LIMIT 1
+            `)
+          : Promise.resolve([]),
+        permissions.goalsRead
+          ? runSql<GoalRow>(`
+              SELECT id, goal_type, follow_up_answer, target_date
+              FROM goals
+              WHERE "userId" = '${safeUserId}'
+                AND "deletedAt" IS NULL
+                AND is_active = true
+              ORDER BY "createdAt" DESC
+              LIMIT 3
+            `)
+          : Promise.resolve([]),
+        activityQueries.length
+          ? runSql<ActivityEntry>(`
+              SELECT *
+              FROM (
+                ${activityQueries.join('\n                UNION ALL\n')}
+              ) AS activity
+              WHERE happened_at IS NOT NULL
+              ORDER BY happened_at DESC
+              LIMIT 8
+            `)
+          : Promise.resolve([]),
+      ]);
+
+      const hydrationTotals = hydrationRows[0];
+
+      setSummary({
+        hydrationTotalMl: Number(hydrationTotals?.hydration_total_ml ?? 0),
+        hydrationLogsToday: Number(hydrationTotals?.hydration_logs_today ?? 0),
+        moodToday: moodRows[0] ?? null,
+        sleepLatest: sleepRows[0] ?? null,
+        weightLatest: weightRows[0] ?? null,
+      });
+      setGoals(goalRows);
+      setRecentActivity(activityRows);
+    } catch (error) {
+      console.error('Failed to load APEX BRAIN Daily Pulse:', error);
+      setFeedback({
+        color: 'danger',
+        message: 'We could not load your Daily Pulse data right now. Please refresh and try again.',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [permissions.goalsRead, permissions.hydrationRead, permissions.moodRead, permissions.sleepRead, permissions.weightRead]);
+
+  useEffect(() => {
+    if (!currentUser?.id) {
+      return;
+    }
+
+    loadPulse(currentUser.id).catch((error) => {
+      console.error('Unhandled Daily Pulse load error:', error);
+    });
+  }, [currentUser?.id, loadPulse]);
+
+  const greeting = useMemo(() => {
+    const hour = new Date().getHours();
+
+    if (hour < 12) {
+      return 'Good morning';
+    }
+
+    if (hour < 18) {
+      return 'Good afternoon';
+    }
+
+    return 'Good evening';
+  }, []);
+
+  const summaryCards = useMemo(() => {
+    const hydrationProgress = Math.min(summary.hydrationTotalMl / WATER_GOAL_ML, 1);
+    const sleepTimestamp = summary.sleepLatest?.final_wake_time || summary.sleepLatest?.bedtime;
+    const weightToday = isToday(summary.weightLatest?.measured_at);
+    const sleepLogged = hasRecentSleep(sleepTimestamp);
+    const moodLogged = Boolean(summary.moodToday?.logged_at);
+
+    return [
+      {
+        label: 'Hydration',
+        icon: mdiWaterOutline,
+        value: `${summary.hydrationTotalMl.toLocaleString()} ml`,
+        detail: `${Math.min(100, Math.round(hydrationProgress * 100))}% of your 2L target`,
+        isComplete: summary.hydrationTotalMl > 0,
+      },
+      {
+        label: 'Mood',
+        icon: mdiEmoticonHappyOutline,
+        value: summary.moodToday?.mood_score ? `${summary.moodToday.mood_score}/10 mood` : 'Not logged yet',
+        detail:
+          summary.moodToday?.energy_level || summary.moodToday?.anxiety_level
+            ? `Energy ${summary.moodToday?.energy_level ?? '-'} • Anxiety ${summary.moodToday?.anxiety_level ?? '-'}`
+            : 'Capture how you felt today',
+        isComplete: moodLogged,
+      },
+      {
+        label: 'Sleep',
+        icon: mdiWeatherNight,
+        value: formatMinutes(summary.sleepLatest?.total_sleep_minutes),
+        detail: summary.sleepLatest?.sleep_quality
+          ? `Quality ${summary.sleepLatest.sleep_quality}/10 • Logged ${formatDateTime(sleepTimestamp)}`
+          : 'Add your last sleep block',
+        isComplete: sleepLogged,
+      },
+      {
+        label: 'Weight',
+        icon: mdiScaleBathroom,
+        value: summary.weightLatest?.value_primary
+          ? `${summary.weightLatest.value_primary} ${summary.weightLatest.unit ?? ''}`.trim()
+          : 'Not logged yet',
+        detail: summary.weightLatest?.measured_at
+          ? `Measured ${formatDateTime(summary.weightLatest.measured_at)}`
+          : 'Optional body composition check',
+        isComplete: weightToday,
+      },
+    ];
+  }, [summary.hydrationTotalMl, summary.moodToday, summary.sleepLatest, summary.weightLatest]);
+
+  const completedCount = summaryCards.filter((card) => card.isComplete).length;
+  const completionPercent = Math.round((completedCount / summaryCards.length) * 100);
+  const hydrationScore = Math.round(Math.min(summary.hydrationTotalMl / WATER_GOAL_ML, 1) * 25);
+  const pulseScore = hydrationScore + (summaryCards[1].isComplete ? 25 : 0) + (summaryCards[2].isComplete ? 25 : 0) + (summaryCards[3].isComplete ? 25 : 0);
+  const hasAnyCreatePermission =
+    permissions.hydrationCreate || permissions.moodCreate || permissions.sleepCreate || permissions.weightCreate;
+  const accessibleQuickLinks = quickLinks.filter((link) => {
+    if (link.href.startsWith('/hydration_logs')) {
+      return permissions.hydrationRead;
+    }
+
+    if (link.href.startsWith('/mood_logs')) {
+      return permissions.moodRead;
+    }
+
+    if (link.href.startsWith('/sleep_logs')) {
+      return permissions.sleepRead;
+    }
+
+    if (link.href.startsWith('/goals')) {
+      return permissions.goalsRead;
+    }
+
+    return false;
+  });
+
+  const handleChange = <K extends keyof PulseFormState>(field: K, value: PulseFormState[K]) => {
+    setForm((previous) => ({
+      ...previous,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!currentUser?.id) {
+      setFeedback({
+        color: 'danger',
+        message: 'Your session is not ready yet. Please wait a moment and try again.',
+      });
+      return;
+    }
+
+    const errors: string[] = [];
+    const hasHydrationEntry = permissions.hydrationCreate && form.volumeMl.trim() !== '';
+    const hasMoodEntry =
+      permissions.moodCreate &&
+      [form.moodScore, form.energyLevel, form.anxietyLevel, form.moodTags, form.journalEntry].some((value) => value.trim() !== '');
+    const hasSleepEntry =
+      permissions.sleepCreate &&
+      [form.sleepBedtime, form.sleepWakeTime, form.sleepQuality, form.morningEnergy, form.sleepDisturbances].some((value) => value.trim() !== '');
+    const hasWeightEntry = permissions.weightCreate && form.weightValue.trim() !== '';
+
+    if (!hasHydrationEntry && !hasMoodEntry && !hasSleepEntry && !hasWeightEntry) {
+      errors.push('Add at least one check-in before saving your Daily Pulse.');
+    }
+
+    if (hasHydrationEntry) {
+      const volume = Number(form.volumeMl);
+
+      if (!Number.isFinite(volume) || volume <= 0) {
+        errors.push('Hydration volume must be greater than zero.');
+      }
+    }
+
+    if (hasMoodEntry) {
+      const moodScore = Number(form.moodScore);
+      const energyLevel = form.energyLevel ? Number(form.energyLevel) : null;
+      const anxietyLevel = form.anxietyLevel ? Number(form.anxietyLevel) : null;
+
+      if (!Number.isFinite(moodScore) || moodScore < 1 || moodScore > 10) {
+        errors.push('Mood score must be between 1 and 10.');
+      }
+
+      if (energyLevel && (energyLevel < 1 || energyLevel > 10)) {
+        errors.push('Energy level must be between 1 and 10.');
+      }
+
+      if (anxietyLevel && (anxietyLevel < 1 || anxietyLevel > 10)) {
+        errors.push('Anxiety level must be between 1 and 10.');
+      }
+    }
+
+    if (hasSleepEntry) {
+      if (!form.sleepBedtime || !form.sleepWakeTime) {
+        errors.push('Sleep entries need both a bedtime and a wake time.');
+      } else {
+        const totalMinutes = Math.round((new Date(form.sleepWakeTime).getTime() - new Date(form.sleepBedtime).getTime()) / 60000);
+
+        if (totalMinutes <= 0 || totalMinutes > 24 * 60) {
+          errors.push('Sleep duration must be a realistic positive value.');
+        }
+      }
+
+      if (form.sleepQuality && (Number(form.sleepQuality) < 1 || Number(form.sleepQuality) > 10)) {
+        errors.push('Sleep quality must be between 1 and 10.');
+      }
+
+      if (form.morningEnergy && (Number(form.morningEnergy) < 1 || Number(form.morningEnergy) > 10)) {
+        errors.push('Morning energy must be between 1 and 10.');
+      }
+    }
+
+    if (hasWeightEntry) {
+      const weight = Number(form.weightValue);
+
+      if (!Number.isFinite(weight) || weight <= 0) {
+        errors.push('Weight must be greater than zero.');
+      }
+    }
+
+    if (errors.length) {
+      setFeedback({
+        color: 'danger',
+        message: errors.join(' '),
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+    setFeedback(null);
+
+    const savedSections: string[] = [];
+    const failedSections: string[] = [];
+
+    try {
+      if (hasHydrationEntry) {
+        try {
+          await axios.post('/hydration_logs', {
+            data: {
+              user: currentUser.id,
+              logged_at: toIsoString(form.hydrationLoggedAt),
+              beverage_type: form.beverageType,
+              volume_ml: Number(form.volumeMl),
+              counts_toward_hydration: form.countsTowardHydration,
+              container_label: form.containerLabel || null,
+            },
+          });
+          savedSections.push('hydration');
+        } catch (error) {
+          console.error('Failed to save hydration entry:', error);
+          failedSections.push('hydration');
+        }
+      }
+
+      if (hasMoodEntry) {
+        try {
+          await axios.post('/mood_logs', {
+            data: {
+              user: currentUser.id,
+              logged_at: toIsoString(form.moodLoggedAt),
+              mood_score: Number(form.moodScore),
+              emotion_tags_csv: form.moodTags || null,
+              energy_level: form.energyLevel ? Number(form.energyLevel) : null,
+              anxiety_level: form.anxietyLevel ? Number(form.anxietyLevel) : null,
+              journal_entry: form.journalEntry || null,
+            },
+          });
+          savedSections.push('mood');
+        } catch (error) {
+          console.error('Failed to save mood entry:', error);
+          failedSections.push('mood');
+        }
+      }
+
+      if (hasSleepEntry) {
+        const totalMinutes = Math.round((new Date(form.sleepWakeTime).getTime() - new Date(form.sleepBedtime).getTime()) / 60000);
+
+        try {
+          await axios.post('/sleep_logs', {
+            data: {
+              user: currentUser.id,
+              bedtime: toIsoString(form.sleepBedtime),
+              final_wake_time: toIsoString(form.sleepWakeTime),
+              total_sleep_minutes: totalMinutes,
+              sleep_quality: form.sleepQuality ? Number(form.sleepQuality) : null,
+              morning_energy: form.morningEnergy ? Number(form.morningEnergy) : null,
+              disturbances: form.sleepDisturbances || null,
+            },
+          });
+          savedSections.push('sleep');
+        } catch (error) {
+          console.error('Failed to save sleep entry:', error);
+          failedSections.push('sleep');
+        }
+      }
+
+      if (hasWeightEntry) {
+        try {
+          await axios.post('/health_metrics', {
+            data: {
+              user: currentUser.id,
+              measured_at: toIsoString(form.weightMeasuredAt),
+              metric_type: 'body_composition',
+              value_primary: Number(form.weightValue),
+              unit: form.weightUnit,
+              device_used: DAILY_PULSE_DEVICE,
+              notes: form.weightNotes || null,
+            },
+          });
+          savedSections.push('weight');
+        } catch (error) {
+          console.error('Failed to save weight entry:', error);
+          failedSections.push('weight');
+        }
+      }
+
+      if (!savedSections.length) {
+        setFeedback({
+          color: 'danger',
+          message: 'Nothing was saved. Please review your inputs and try again.',
+        });
+        return;
+      }
+
+      if (failedSections.length) {
+        setFeedback({
+          color: 'danger',
+          message: `Saved ${savedSections.join(', ')}, but ${failedSections.join(', ')} still need attention. Please retry those sections.`,
+        });
+      } else {
+        setFeedback({
+          color: 'success',
+          message: `Saved your ${savedSections.join(', ')} check-in${savedSections.length > 1 ? 's' : ''}. Your Daily Pulse is up to date.`,
+        });
+        setForm(initialPulseForm());
+      }
+
+      await loadPulse(currentUser.id);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Daily Pulse')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiHeartPulse} title="Daily Pulse" main>
+          <div className="flex flex-wrap items-center gap-3">
+            <Link
+              href="/dashboard"
+              className="inline-flex items-center rounded-full border px-4 py-2 text-sm font-semibold transition hover:-translate-y-0.5"
+              style={{ borderColor: '#D6C8B4', color: '#4A6741', backgroundColor: '#FFF9F0' }}
+            >
+              Overview
+            </Link>
+            <Link
+              href="/goals/goals-list"
+              className="inline-flex items-center rounded-full px-4 py-2 text-sm font-semibold text-white transition hover:-translate-y-0.5"
+              style={{ backgroundColor: '#4A6741' }}
+            >
+              Goals
+            </Link>
+          </div>
+        </SectionTitleLineWithButton>
+
+        <div
+          className="mb-6 overflow-hidden rounded-[28px] border p-6 shadow-sm lg:p-8"
+          style={{
+            borderColor: '#D8CBB7',
+            background:
+              'linear-gradient(135deg, rgba(245,240,232,1) 0%, rgba(255,249,240,1) 55%, rgba(236,229,214,1) 100%)',
+          }}
+        >
+          <div className="grid gap-6 lg:grid-cols-[1.35fr_0.9fr] lg:items-center">
+            <div>
+              <div
+                className="mb-4 inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold"
+                style={{ borderColor: '#D6C8B4', color: '#4A6741', backgroundColor: 'rgba(255, 255, 255, 0.66)' }}
+              >
+                <BaseIcon path={mdiTrophyOutline} size={18} />
+                APEX BRAIN signature workflow
+              </div>
+              <h2 className="max-w-3xl text-3xl font-semibold tracking-tight md:text-4xl" style={{ color: '#1C1C1C' }}>
+                {greeting}, {currentUser?.firstName || 'there'}. Here&apos;s your calm, clear view of today.
+              </h2>
+              <p className="mt-4 max-w-2xl text-base leading-7 md:text-lg" style={{ color: '#3F4B35' }}>
+                Save water, mood, sleep, and weight in one elegant ritual, then jump straight into your detailed history and active goals.
+              </p>
+
+              <div className="mt-6 grid gap-4 sm:grid-cols-3">
+                <div className="rounded-3xl border p-4" style={{ borderColor: '#E1D6C5', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                  <div className="text-sm font-medium uppercase tracking-[0.18em]" style={{ color: '#6A6A55' }}>
+                    Today&apos;s pulse score
+                  </div>
+                  <div className="mt-2 text-4xl font-semibold" style={{ color: '#1C1C1C' }}>
+                    {pulseScore}
+                    <span className="text-lg font-medium" style={{ color: '#6A6A55' }}>
+                      /100
+                    </span>
+                  </div>
+                </div>
+                <div className="rounded-3xl border p-4" style={{ borderColor: '#E1D6C5', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                  <div className="text-sm font-medium uppercase tracking-[0.18em]" style={{ color: '#6A6A55' }}>
+                    Live hydration
+                  </div>
+                  <div className="mt-2 text-2xl font-semibold" style={{ color: '#1C1C1C' }}>
+                    {summary.hydrationTotalMl.toLocaleString()} ml
+                  </div>
+                  <p className="mt-1 text-sm" style={{ color: '#6A6A55' }}>
+                    {summary.hydrationLogsToday} entries captured today
+                  </p>
+                </div>
+                <div className="rounded-3xl border p-4" style={{ borderColor: '#E1D6C5', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                  <div className="text-sm font-medium uppercase tracking-[0.18em]" style={{ color: '#6A6A55' }}>
+                    Focus cadence
+                  </div>
+                  <div className="mt-2 text-2xl font-semibold" style={{ color: '#1C1C1C' }}>
+                    {completedCount} / {summaryCards.length} anchors
+                  </div>
+                  <p className="mt-1 text-sm" style={{ color: '#6A6A55' }}>
+                    Hydration, mood, sleep, and weight all in one view
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-center lg:justify-end">
+              <div className="rounded-[32px] border p-6 text-center shadow-sm" style={{ borderColor: '#D8CBB7', backgroundColor: 'rgba(255,255,255,0.82)' }}>
+                <div className="relative mx-auto h-56 w-56">
+                  <div
+                    className="absolute inset-0 rounded-full"
+                    style={{
+                      background: `conic-gradient(#4A6741 ${completionPercent}%, #E9DDCC ${completionPercent}% 100%)`,
+                    }}
+                  />
+                  <div
+                    className="absolute inset-[16px] rounded-full"
+                    style={{ backgroundColor: '#FFF9F0', boxShadow: 'inset 0 0 0 1px rgba(201, 168, 76, 0.18)' }}
+                  />
+                  <div className="absolute inset-0 flex flex-col items-center justify-center">
+                    <div className="text-sm uppercase tracking-[0.2em]" style={{ color: '#6A6A55' }}>
+                      Daily ring
+                    </div>
+                    <div className="mt-2 text-5xl font-semibold" style={{ color: '#1C1C1C' }}>
+                      {completionPercent}%
+                    </div>
+                    <p className="mt-3 max-w-[11rem] text-sm leading-6" style={{ color: '#4A6741' }}>
+                      {completedCount === summaryCards.length
+                        ? 'Everything core is captured for today.'
+                        : 'Keep logging to complete your premium health snapshot.'}
+                    </p>
+                  </div>
+                </div>
+                <div className="mt-6 flex items-center justify-center gap-2 text-sm font-medium" style={{ color: '#4A6741' }}>
+                  <BaseIcon path={mdiCalendarHeart} size={18} />
+                  {new Intl.DateTimeFormat(undefined, {
+                    weekday: 'long',
+                    month: 'long',
+                    day: 'numeric',
+                  }).format(new Date())}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {feedback && (
+          <NotificationBar color={feedback.color} icon={feedback.color === 'success' ? mdiCheckCircleOutline : mdiHeartPulse}>
+            {feedback.message}
+          </NotificationBar>
+        )}
+
+        <div className="mb-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+          {summaryCards.map((card) => (
+            <div
+              key={card.label}
+              className="rounded-[24px] border p-5 shadow-sm transition hover:-translate-y-0.5"
+              style={{ borderColor: '#E1D6C5', backgroundColor: '#FFF9F0' }}
+            >
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex h-12 w-12 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                  <BaseIcon path={card.icon} size={24} />
+                </div>
+                <span
+                  className="rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em]"
+                  style={{
+                    color: card.isComplete ? '#2F5A35' : '#7A7062',
+                    backgroundColor: card.isComplete ? 'rgba(74, 103, 65, 0.12)' : 'rgba(201, 168, 76, 0.14)',
+                  }}
+                >
+                  {card.isComplete ? 'captured' : 'pending'}
+                </span>
+              </div>
+              <h3 className="mt-5 text-lg font-semibold" style={{ color: '#1C1C1C' }}>
+                {card.label}
+              </h3>
+              <p className="mt-2 text-2xl font-semibold" style={{ color: '#4A6741' }}>
+                {loading ? 'Loading...' : card.value}
+              </p>
+              <p className="mt-3 text-sm leading-6" style={{ color: '#6A6A55' }}>
+                {loading ? 'Refreshing your summary...' : card.detail}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <div className="grid gap-6 xl:grid-cols-[1.55fr_0.85fr]">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="rounded-[28px] border p-6 shadow-sm lg:p-7" style={{ borderColor: '#D8CBB7', backgroundColor: '#FFF9F0' }}>
+              <div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+                <div>
+                  <h3 className="text-2xl font-semibold" style={{ color: '#1C1C1C' }}>
+                    Daily capture ritual
+                  </h3>
+                  <p className="mt-2 max-w-2xl text-sm leading-6" style={{ color: '#6A6A55' }}>
+                    Add any combination of water, mood, sleep, and weight in one save. Every item lands in its existing history screen automatically.
+                  </p>
+                </div>
+                <div className="rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em]" style={{ borderColor: '#D8CBB7', color: '#4A6741' }}>
+                  First MVP workflow
+                </div>
+              </div>
+
+              <div className="mt-6 grid gap-5 xl:grid-cols-2">
+                {!hasAnyCreatePermission && (
+                  <div className="rounded-[24px] border px-5 py-6 text-sm leading-6 xl:col-span-2" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)', color: '#6A6A55' }}>
+                    Your current role can view this Daily Pulse workspace, but it does not have create access for the quick-capture records yet. You can still explore your existing history and goals from the cards on the right.
+                  </div>
+                )}
+
+                {permissions.hydrationCreate && (
+                  <div className="rounded-[24px] border p-5" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-12 w-12 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                        <BaseIcon path={mdiWaterOutline} size={24} />
+                      </div>
+                      <div>
+                        <h4 className="text-lg font-semibold" style={{ color: '#1C1C1C' }}>
+                          Hydration log
+                        </h4>
+                        <p className="text-sm" style={{ color: '#6A6A55' }}>
+                          Water first, with room for coffee, tea, and other beverages.
+                        </p>
+                      </div>
+                    </div>
+                    <div className="mt-5 grid gap-4 md:grid-cols-2">
+                      <FormField label="Logged at">
+                        <input
+                          type="datetime-local"
+                          value={form.hydrationLoggedAt}
+                          onChange={(event) => handleChange('hydrationLoggedAt', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Volume (ml)">
+                        <input
+                          type="number"
+                          min="0"
+                          placeholder="500"
+                          value={form.volumeMl}
+                          onChange={(event) => handleChange('volumeMl', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Beverage">
+                        <select
+                          value={form.beverageType}
+                          onChange={(event) => handleChange('beverageType', event.target.value)}
+                        >
+                          <option value="water">Water</option>
+                          <option value="coffee">Coffee</option>
+                          <option value="tea">Tea</option>
+                          <option value="juice">Juice</option>
+                          <option value="sports_drink">Sports drink</option>
+                          <option value="alcohol">Alcohol</option>
+                          <option value="other">Other</option>
+                        </select>
+                      </FormField>
+                      <FormField label="Container label">
+                        <input
+                          type="text"
+                          placeholder="Morning bottle"
+                          value={form.containerLabel}
+                          onChange={(event) => handleChange('containerLabel', event.target.value)}
+                        />
+                      </FormField>
+                    </div>
+                    <label className="mt-4 flex cursor-pointer items-center gap-3 rounded-2xl border px-4 py-3 text-sm font-medium" style={{ borderColor: '#E5DAC9', color: '#4A6741' }}>
+                      <input
+                        type="checkbox"
+                        className="h-4 w-4"
+                        checked={form.countsTowardHydration}
+                        onChange={(event) => handleChange('countsTowardHydration', event.target.checked)}
+                      />
+                      Count this toward today&apos;s hydration target
+                    </label>
+                  </div>
+                )}
+
+                {permissions.moodCreate && (
+                  <div className="rounded-[24px] border p-5" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-12 w-12 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                        <BaseIcon path={mdiEmoticonHappyOutline} size={24} />
+                      </div>
+                      <div>
+                        <h4 className="text-lg font-semibold" style={{ color: '#1C1C1C' }}>
+                          Mood check-in
+                        </h4>
+                        <p className="text-sm" style={{ color: '#6A6A55' }}>
+                          Capture feelings, energy, and anything that shaped your day.
+                        </p>
+                      </div>
+                    </div>
+                    <div className="mt-5 grid gap-4 md:grid-cols-2">
+                      <FormField label="Logged at">
+                        <input
+                          type="datetime-local"
+                          value={form.moodLoggedAt}
+                          onChange={(event) => handleChange('moodLoggedAt', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Mood score (1–10)">
+                        <input
+                          type="number"
+                          min="1"
+                          max="10"
+                          placeholder="8"
+                          value={form.moodScore}
+                          onChange={(event) => handleChange('moodScore', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Energy (1–10)">
+                        <input
+                          type="number"
+                          min="1"
+                          max="10"
+                          placeholder="7"
+                          value={form.energyLevel}
+                          onChange={(event) => handleChange('energyLevel', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Anxiety (1–10)">
+                        <input
+                          type="number"
+                          min="1"
+                          max="10"
+                          placeholder="3"
+                          value={form.anxietyLevel}
+                          onChange={(event) => handleChange('anxietyLevel', event.target.value)}
+                        />
+                      </FormField>
+                    </div>
+                    <div className="mt-1 grid gap-4">
+                      <FormField label="Emotion tags">
+                        <input
+                          type="text"
+                          placeholder="Calm, focused, optimistic"
+                          value={form.moodTags}
+                          onChange={(event) => handleChange('moodTags', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Quick note">
+                        <textarea
+                          placeholder="What contributed most to your mood today?"
+                          value={form.journalEntry}
+                          onChange={(event) => handleChange('journalEntry', event.target.value)}
+                        />
+                      </FormField>
+                    </div>
+                  </div>
+                )}
+
+                {permissions.sleepCreate && (
+                  <div className="rounded-[24px] border p-5" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-12 w-12 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                        <BaseIcon path={mdiWeatherNight} size={24} />
+                      </div>
+                      <div>
+                        <h4 className="text-lg font-semibold" style={{ color: '#1C1C1C' }}>
+                          Sleep recap
+                        </h4>
+                        <p className="text-sm" style={{ color: '#6A6A55' }}>
+                          Turn last night&apos;s recovery into a visible trend.
+                        </p>
+                      </div>
+                    </div>
+                    <div className="mt-5 grid gap-4 md:grid-cols-2">
+                      <FormField label="Bedtime">
+                        <input
+                          type="datetime-local"
+                          value={form.sleepBedtime}
+                          onChange={(event) => handleChange('sleepBedtime', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Final wake time">
+                        <input
+                          type="datetime-local"
+                          value={form.sleepWakeTime}
+                          onChange={(event) => handleChange('sleepWakeTime', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Sleep quality (1–10)">
+                        <input
+                          type="number"
+                          min="1"
+                          max="10"
+                          placeholder="8"
+                          value={form.sleepQuality}
+                          onChange={(event) => handleChange('sleepQuality', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Morning energy (1–10)">
+                        <input
+                          type="number"
+                          min="1"
+                          max="10"
+                          placeholder="7"
+                          value={form.morningEnergy}
+                          onChange={(event) => handleChange('morningEnergy', event.target.value)}
+                        />
+                      </FormField>
+                    </div>
+                    <div className="mt-1 grid gap-4">
+                      <FormField label="Disturbances">
+                        <textarea
+                          placeholder="Night wakings, noise, dreams, temperature, or anything else worth remembering"
+                          value={form.sleepDisturbances}
+                          onChange={(event) => handleChange('sleepDisturbances', event.target.value)}
+                        />
+                      </FormField>
+                    </div>
+                  </div>
+                )}
+
+                {permissions.weightCreate && (
+                  <div className="rounded-[24px] border p-5" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-12 w-12 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                        <BaseIcon path={mdiScaleBathroom} size={24} />
+                      </div>
+                      <div>
+                        <h4 className="text-lg font-semibold" style={{ color: '#1C1C1C' }}>
+                          Weight check
+                        </h4>
+                        <p className="text-sm" style={{ color: '#6A6A55' }}>
+                          Optional body composition anchor for the days you want it.
+                        </p>
+                      </div>
+                    </div>
+                    <div className="mt-5 grid gap-4 md:grid-cols-2">
+                      <FormField label="Measured at">
+                        <input
+                          type="datetime-local"
+                          value={form.weightMeasuredAt}
+                          onChange={(event) => handleChange('weightMeasuredAt', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Weight">
+                        <input
+                          type="number"
+                          min="0"
+                          step="0.1"
+                          placeholder={form.weightUnit === 'kg' ? '74.5' : '164.2'}
+                          value={form.weightValue}
+                          onChange={(event) => handleChange('weightValue', event.target.value)}
+                        />
+                      </FormField>
+                      <FormField label="Unit">
+                        <select
+                          value={form.weightUnit}
+                          onChange={(event) => handleChange('weightUnit', event.target.value as 'kg' | 'lb')}
+                        >
+                          <option value="kg">Kilograms</option>
+                          <option value="lb">Pounds</option>
+                        </select>
+                      </FormField>
+                      <FormField label="Note">
+                        <input
+                          type="text"
+                          placeholder="Fasted weigh-in, after training, etc."
+                          value={form.weightNotes}
+                          onChange={(event) => handleChange('weightNotes', event.target.value)}
+                        />
+                      </FormField>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="mt-6 flex flex-col gap-3 border-t pt-6 sm:flex-row sm:items-center sm:justify-between" style={{ borderColor: '#E1D6C5' }}>
+                <p className="text-sm leading-6" style={{ color: '#6A6A55' }}>
+                  One save, four possible records, and instant links back to the existing detail screens.
+                </p>
+                {hasAnyCreatePermission ? (
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-semibold text-white transition hover:-translate-y-0.5 disabled:cursor-not-allowed disabled:opacity-70"
+                    style={{ backgroundColor: '#4A6741' }}
+                  >
+                    {isSubmitting ? 'Saving your pulse...' : 'Save today\'s pulse'}
+                  </button>
+                ) : (
+                  <Link href="/dashboard" className="text-sm font-semibold" style={{ color: '#4A6741' }}>
+                    Return to overview →
+                  </Link>
+                )}
+              </div>
+            </div>
+          </form>
+
+          <div className="space-y-6">
+            <div className="rounded-[28px] border p-6 shadow-sm" style={{ borderColor: '#D8CBB7', backgroundColor: '#FFF9F0' }}>
+              <div className="flex items-center gap-3">
+                <div className="flex h-12 w-12 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                  <BaseIcon path={mdiTargetVariant} size={24} />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold" style={{ color: '#1C1C1C' }}>
+                    Focus goals
+                  </h3>
+                  <p className="text-sm" style={{ color: '#6A6A55' }}>
+                    Your active priorities, surfaced beside today&apos;s check-in.
+                  </p>
+                </div>
+              </div>
+
+              <div className="mt-5 space-y-4">
+                {!permissions.goalsRead && (
+                  <div className="rounded-2xl border px-4 py-5 text-sm leading-6" style={{ borderColor: '#E5DAC9', color: '#6A6A55' }}>
+                    Goal visibility is not enabled for your current role.
+                  </div>
+                )}
+
+                {permissions.goalsRead && !loading && goals.length === 0 && (
+                  <div className="rounded-2xl border px-4 py-5 text-sm leading-6" style={{ borderColor: '#E5DAC9', color: '#6A6A55' }}>
+                    No active goals yet. Set one up to turn Daily Pulse into a more purposeful ritual.
+                    <div className="mt-4">
+                      <Link href="/goals/goals-new" className="font-semibold" style={{ color: '#4A6741' }}>
+                        Create your first goal →
+                      </Link>
+                    </div>
+                  </div>
+                )}
+
+                {permissions.goalsRead && goals.map((goal) => (
+                  <Link
+                    key={goal.id}
+                    href={`/goals/goals-view/?id=${goal.id}`}
+                    className="block rounded-2xl border px-4 py-4 transition hover:-translate-y-0.5"
+                    style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      <div>
+                        <div className="text-base font-semibold" style={{ color: '#1C1C1C' }}>
+                          {humanize(goal.goal_type)}
+                        </div>
+                        <p className="mt-2 text-sm leading-6" style={{ color: '#6A6A55' }}>
+                          {goal.follow_up_answer || 'Add more detail to make this goal feel tangible and measurable.'}
+                        </p>
+                      </div>
+                      <BaseIcon path={mdiArrowTopRight} size={20} className="shrink-0" />
+                    </div>
+                    <div className="mt-4 text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: '#4A6741' }}>
+                      Target {formatDate(goal.target_date)}
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+
+            <div className="rounded-[28px] border p-6 shadow-sm" style={{ borderColor: '#D8CBB7', backgroundColor: '#FFF9F0' }}>
+              <h3 className="text-xl font-semibold" style={{ color: '#1C1C1C' }}>
+                Explore the full records
+              </h3>
+              <p className="mt-2 text-sm leading-6" style={{ color: '#6A6A55' }}>
+                Daily Pulse is the shortcut. These links take you straight into the deeper CRUD views already available in the app.
+              </p>
+              <div className="mt-5 space-y-3">
+                {accessibleQuickLinks.length === 0 && (
+                  <div className="rounded-2xl border px-4 py-5 text-sm leading-6" style={{ borderColor: "#E5DAC9", color: "#6A6A55" }}>
+                    Your current role does not expose any of the linked history screens yet.
+                  </div>
+                )}
+
+                {accessibleQuickLinks.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    className="flex items-start gap-4 rounded-2xl border px-4 py-4 transition hover:-translate-y-0.5"
+                    style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}
+                  >
+                    <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                      <BaseIcon path={link.icon} size={22} />
+                    </div>
+                    <div>
+                      <div className="text-base font-semibold" style={{ color: '#1C1C1C' }}>
+                        {link.title}
+                      </div>
+                      <p className="mt-1 text-sm leading-6" style={{ color: '#6A6A55' }}>
+                        {link.description}
+                      </p>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 rounded-[28px] border p-6 shadow-sm" style={{ borderColor: '#D8CBB7', backgroundColor: '#FFF9F0' }}>
+          <div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+            <div>
+              <h3 className="text-2xl font-semibold" style={{ color: '#1C1C1C' }}>
+                Recent activity
+              </h3>
+              <p className="mt-2 text-sm leading-6" style={{ color: '#6A6A55' }}>
+                Every Daily Pulse save lands here and links back to its detailed record screen.
+              </p>
+            </div>
+            <Link href="/dashboard" className="text-sm font-semibold" style={{ color: '#4A6741' }}>
+              Back to the wider overview →
+            </Link>
+          </div>
+
+          <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            {!loading && recentActivity.length === 0 && (
+              <div className="rounded-2xl border px-5 py-6 text-sm leading-6 md:col-span-2 xl:col-span-4" style={{ borderColor: '#E5DAC9', color: '#6A6A55' }}>
+                Your activity feed is still empty. Save your first Daily Pulse above and it will appear here instantly.
+              </div>
+            )}
+
+            {(loading ? Array.from({ length: 4 }) : recentActivity).map((item, index) => {
+              if (loading) {
+                return (
+                  <div
+                    key={`activity-skeleton-${index}`}
+                    className="min-h-[168px] rounded-2xl border p-5"
+                    style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}
+                  >
+                    <div className="h-4 w-24 rounded-full" style={{ backgroundColor: '#EFE3D2' }} />
+                    <div className="mt-4 h-7 w-3/4 rounded-full" style={{ backgroundColor: '#F3E9DA' }} />
+                    <div className="mt-3 h-4 w-1/2 rounded-full" style={{ backgroundColor: '#F3E9DA' }} />
+                    <div className="mt-8 h-4 w-2/3 rounded-full" style={{ backgroundColor: '#EFE3D2' }} />
+                  </div>
+                );
+              }
+
+              const route = activityRouteByKind[item.kind];
+              const iconByKind = {
+                hydration: mdiWaterOutline,
+                mood: mdiEmoticonHappyOutline,
+                sleep: mdiWeatherNight,
+                weight: mdiScaleBathroom,
+              };
+
+              return (
+                <Link
+                  key={item.id}
+                  href={`${route}/?id=${item.id}`}
+                  className="block rounded-2xl border p-5 transition hover:-translate-y-0.5"
+                  style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}
+                >
+                  <div className="flex items-center justify-between gap-4">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                      <BaseIcon path={iconByKind[item.kind]} size={24} />
+                    </div>
+                    <span className="rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em]" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                      {item.kind}
+                    </span>
+                  </div>
+                  <div className="mt-5 text-lg font-semibold" style={{ color: '#1C1C1C' }}>
+                    {item.title}
+                  </div>
+                  <p className="mt-2 text-sm" style={{ color: '#4A6741' }}>
+                    {item.detail || 'Open the detail view for more context.'}
+                  </p>
+                  <p className="mt-4 text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: '#8A7C67' }}>
+                    {formatDateTime(item.happened_at)}
+                  </p>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      </SectionMain>
+    </>
+  );
+}
+
+DailyPulsePage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
+
+export default DailyPulsePage;
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
index e6ea8ba..c2a0daa 100644
--- a/frontend/src/pages/dashboard.tsx
+++ b/frontend/src/pages/dashboard.tsx
@@ -1,3368 +1,2017 @@
-import * as icon from '@mdi/js';
-import Head from 'next/head'
-import React from 'react'
+import {
+  mdiAccount,
+  mdiArrowTopRight,
+  mdiCalendarHeart,
+  mdiChartTimelineVariant,
+  mdiCheckCircleOutline,
+  mdiHeartPulse,
+  mdiLeafCircle,
+  mdiScaleBathroom,
+  mdiTargetVariant,
+  mdiWaterOutline,
+  mdiWeatherNight,
+} from '@mdi/js';
 import axios from 'axios';
-import type { ReactElement } from 'react'
-import LayoutAuthenticated from '../layouts/Authenticated'
-import SectionMain from '../components/SectionMain'
-import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
-import BaseIcon from "../components/BaseIcon";
-import { getPageTitle } from '../config'
-import Link from "next/link";
+import Head from 'next/head';
+import Link from 'next/link';
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import BaseIcon from '../components/BaseIcon';
+import NotificationBar from '../components/NotificationBar';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+import { hasCompletedApexOnboarding } from '../helpers/apexOnboarding';
+import { humanize } from '../helpers/humanize';
+import { hasPermission } from '../helpers/userPermissions';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import { useAppSelector } from '../stores/hooks';
 
-import { hasPermission } from "../helpers/userPermissions";
-import { fetchWidgets } from '../stores/roles/rolesSlice';
-import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
-import { SmartWidget } from '../components/SmartWidget/SmartWidget';
+type MoodRow = {
+  mood_score: number | null;
+  energy_level: number | null;
+  anxiety_level: number | null;
+  emotion_tags_csv: string | null;
+  logged_at: string | null;
+};
 
-import { useAppDispatch, useAppSelector } from '../stores/hooks';
-const Dashboard = () => {
-    const dispatch = useAppDispatch();
-    const iconsColor = useAppSelector((state) => state.style.iconsColor);
-    const corners = useAppSelector((state) => state.style.corners);
-    const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+type SleepRow = {
+  bedtime: string | null;
+  final_wake_time: string | null;
+  total_sleep_minutes: number | null;
+  sleep_quality: number | null;
+  morning_energy: number | null;
+};
 
-    const loadingMessage = 'Loading...';
+type WeightRow = {
+  measured_at: string | null;
+  value_primary: number | string | null;
+  unit: string | null;
+  notes: string | null;
+};
 
-    
-    const [users, setUsers] = React.useState(loadingMessage);
-    const [roles, setRoles] = React.useState(loadingMessage);
-    const [permissions, setPermissions] = React.useState(loadingMessage);
-    const [user_physical_baselines, setUser_physical_baselines] = React.useState(loadingMessage);
-    const [user_lifestyle_baselines, setUser_lifestyle_baselines] = React.useState(loadingMessage);
-    const [goals, setGoals] = React.useState(loadingMessage);
-    const [conditions, setConditions] = React.useState(loadingMessage);
-    const [surgeries, setSurgeries] = React.useState(loadingMessage);
-    const [implants_devices, setImplants_devices] = React.useState(loadingMessage);
-    const [allergies, setAllergies] = React.useState(loadingMessage);
-    const [family_histories, setFamily_histories] = React.useState(loadingMessage);
-    const [healthcare_providers, setHealthcare_providers] = React.useState(loadingMessage);
-    const [pharmacies, setPharmacies] = React.useState(loadingMessage);
-    const [medications, setMedications] = React.useState(loadingMessage);
-    const [medication_doses, setMedication_doses] = React.useState(loadingMessage);
-    const [medication_side_effects, setMedication_side_effects] = React.useState(loadingMessage);
-    const [supplements, setSupplements] = React.useState(loadingMessage);
-    const [supplement_evidence_items, setSupplement_evidence_items] = React.useState(loadingMessage);
-    const [workouts, setWorkouts] = React.useState(loadingMessage);
-    const [exercises, setExercises] = React.useState(loadingMessage);
-    const [workout_exercises, setWorkout_exercises] = React.useState(loadingMessage);
-    const [workout_schedules, setWorkout_schedules] = React.useState(loadingMessage);
-    const [training_blocks, setTraining_blocks] = React.useState(loadingMessage);
-    const [workout_sessions, setWorkout_sessions] = React.useState(loadingMessage);
-    const [strength_sets, setStrength_sets] = React.useState(loadingMessage);
-    const [cardio_sessions, setCardio_sessions] = React.useState(loadingMessage);
-    const [recovery_logs, setRecovery_logs] = React.useState(loadingMessage);
-    const [heat_cold_exposures, setHeat_cold_exposures] = React.useState(loadingMessage);
-    const [flexibility_assessments, setFlexibility_assessments] = React.useState(loadingMessage);
-    const [foods, setFoods] = React.useState(loadingMessage);
-    const [recipes, setRecipes] = React.useState(loadingMessage);
-    const [recipe_collections, setRecipe_collections] = React.useState(loadingMessage);
-    const [meals, setMeals] = React.useState(loadingMessage);
-    const [meal_items, setMeal_items] = React.useState(loadingMessage);
-    const [nutrition_targets, setNutrition_targets] = React.useState(loadingMessage);
-    const [meal_plans, setMeal_plans] = React.useState(loadingMessage);
-    const [meal_plan_items, setMeal_plan_items] = React.useState(loadingMessage);
-    const [grocery_lists, setGrocery_lists] = React.useState(loadingMessage);
-    const [grocery_items, setGrocery_items] = React.useState(loadingMessage);
-    const [hydration_logs, setHydration_logs] = React.useState(loadingMessage);
-    const [fasting_sessions, setFasting_sessions] = React.useState(loadingMessage);
-    const [ketone_glucose_logs, setKetone_glucose_logs] = React.useState(loadingMessage);
-    const [bowel_movements, setBowel_movements] = React.useState(loadingMessage);
-    const [gut_symptom_logs, setGut_symptom_logs] = React.useState(loadingMessage);
-    const [health_metrics, setHealth_metrics] = React.useState(loadingMessage);
-    const [symptom_logs, setSymptom_logs] = React.useState(loadingMessage);
-    const [medical_appointments, setMedical_appointments] = React.useState(loadingMessage);
-    const [lab_documents, setLab_documents] = React.useState(loadingMessage);
-    const [vaccinations, setVaccinations] = React.useState(loadingMessage);
-    const [ai_chat_threads, setAi_chat_threads] = React.useState(loadingMessage);
-    const [ai_chat_messages, setAi_chat_messages] = React.useState(loadingMessage);
-    const [ai_generations, setAi_generations] = React.useState(loadingMessage);
-    const [habits, setHabits] = React.useState(loadingMessage);
-    const [habit_logs, setHabit_logs] = React.useState(loadingMessage);
-    const [habit_challenges, setHabit_challenges] = React.useState(loadingMessage);
-    const [library_articles, setLibrary_articles] = React.useState(loadingMessage);
-    const [saved_articles, setSaved_articles] = React.useState(loadingMessage);
-    const [glossary_terms, setGlossary_terms] = React.useState(loadingMessage);
-    const [health_vault_documents, setHealth_vault_documents] = React.useState(loadingMessage);
-    const [emergency_medical_cards, setEmergency_medical_cards] = React.useState(loadingMessage);
-    const [advance_directives, setAdvance_directives] = React.useState(loadingMessage);
-    const [insurance_policies, setInsurance_policies] = React.useState(loadingMessage);
-    const [family_groups, setFamily_groups] = React.useState(loadingMessage);
-    const [family_members, setFamily_members] = React.useState(loadingMessage);
-    const [sharing_permissions, setSharing_permissions] = React.useState(loadingMessage);
-    const [mood_logs, setMood_logs] = React.useState(loadingMessage);
-    const [mental_assessments, setMental_assessments] = React.useState(loadingMessage);
-    const [journal_entries, setJournal_entries] = React.useState(loadingMessage);
-    const [breathing_sessions, setBreathing_sessions] = React.useState(loadingMessage);
-    const [stress_logs, setStress_logs] = React.useState(loadingMessage);
-    const [cognitive_tests, setCognitive_tests] = React.useState(loadingMessage);
-    const [sleep_logs, setSleep_logs] = React.useState(loadingMessage);
-    const [sleep_environment_logs, setSleep_environment_logs] = React.useState(loadingMessage);
-    const [nap_logs, setNap_logs] = React.useState(loadingMessage);
-    const [menstrual_cycles, setMenstrual_cycles] = React.useState(loadingMessage);
-    const [menstrual_day_logs, setMenstrual_day_logs] = React.useState(loadingMessage);
-    const [fertility_logs, setFertility_logs] = React.useState(loadingMessage);
-    const [pregnancies, setPregnancies] = React.useState(loadingMessage);
-    const [pregnancy_symptom_logs, setPregnancy_symptom_logs] = React.useState(loadingMessage);
-    const [breastfeeding_logs, setBreastfeeding_logs] = React.useState(loadingMessage);
-    const [formula_feeding_logs, setFormula_feeding_logs] = React.useState(loadingMessage);
-    const [baby_metrics, setBaby_metrics] = React.useState(loadingMessage);
-    const [epds_assessments, setEpds_assessments] = React.useState(loadingMessage);
-    const [kick_counts, setKick_counts] = React.useState(loadingMessage);
-    const [contraction_sessions, setContraction_sessions] = React.useState(loadingMessage);
-    const [contractions, setContractions] = React.useState(loadingMessage);
-    const [menopause_symptom_logs, setMenopause_symptom_logs] = React.useState(loadingMessage);
-    const [male_reproductive_logs, setMale_reproductive_logs] = React.useState(loadingMessage);
-    const [semen_analyses, setSemen_analyses] = React.useState(loadingMessage);
-    const [sti_tests, setSti_tests] = React.useState(loadingMessage);
-    const [contraception_logs, setContraception_logs] = React.useState(loadingMessage);
-    const [libido_logs, setLibido_logs] = React.useState(loadingMessage);
-    const [sexual_activity_logs, setSexual_activity_logs] = React.useState(loadingMessage);
-    const [skin_care_logs, setSkin_care_logs] = React.useState(loadingMessage);
-    const [sun_exposure_logs, setSun_exposure_logs] = React.useState(loadingMessage);
-    const [mole_lesion_logs, setMole_lesion_logs] = React.useState(loadingMessage);
-    const [oral_hygiene_logs, setOral_hygiene_logs] = React.useState(loadingMessage);
-    const [dental_records, setDental_records] = React.useState(loadingMessage);
-    const [dental_symptoms, setDental_symptoms] = React.useState(loadingMessage);
-    const [vision_prescriptions, setVision_prescriptions] = React.useState(loadingMessage);
-    const [eye_symptom_logs, setEye_symptom_logs] = React.useState(loadingMessage);
-    const [hearing_test_logs, setHearing_test_logs] = React.useState(loadingMessage);
-    const [tinnitus_logs, setTinnitus_logs] = React.useState(loadingMessage);
-    const [noise_exposure_logs, setNoise_exposure_logs] = React.useState(loadingMessage);
-    const [pain_logs, setPain_logs] = React.useState(loadingMessage);
-    const [injuries, setInjuries] = React.useState(loadingMessage);
-    const [physio_exercises, setPhysio_exercises] = React.useState(loadingMessage);
-    const [ergonomics_logs, setErgonomics_logs] = React.useState(loadingMessage);
-    const [notifications, setNotifications] = React.useState(loadingMessage);
-    const [export_jobs, setExport_jobs] = React.useState(loadingMessage);
-    const [app_settings, setApp_settings] = React.useState(loadingMessage);
+type GoalRow = {
+  id: string;
+  goal_type: string | null;
+  follow_up_answer: string | null;
+  target_date: string | null;
+  is_active: boolean | null;
+};
 
-    
-    const [widgetsRole, setWidgetsRole] = React.useState({
-        role: { value: '', label: '' },
+type PhysicalRow = {
+  height_cm: number | null;
+  weight_kg: number | null;
+  dominant_hand: string | null;
+  blood_type: string | null;
+  body_frame_size: string | null;
+  updated_at: string | null;
+};
+
+type LifestyleRow = {
+  typical_bedtime: string | null;
+  typical_wake_time: string | null;
+  caffeine_servings_per_day: number | null;
+  avg_daily_steps_estimate: number | null;
+  typical_stress_level: number | null;
+  currently_exercises: boolean | null;
+  diet_pattern: string | null;
+  alcohol_use: string | null;
+  tobacco_nicotine_use: string | null;
+  updated_at: string | null;
+};
+
+type ConditionRow = {
+  id: string;
+  condition_name: string | null;
+  status: string | null;
+  diagnosing_doctor: string | null;
+  management_plan: string | null;
+  updated_at: string | null;
+};
+
+type ActivityKind =
+  | 'hydration'
+  | 'mood'
+  | 'sleep'
+  | 'weight'
+  | 'goal'
+  | 'condition';
+
+type ActivityEntry = {
+  id: string;
+  kind: ActivityKind;
+  title: string;
+  detail: string | null;
+  happened_at: string | null;
+};
+
+type DashboardData = {
+  hydrationTotalMl: number;
+  hydrationLogsToday: number;
+  moodToday: MoodRow | null;
+  sleepLatest: SleepRow | null;
+  weightLatest: WeightRow | null;
+  activeGoalsCount: number;
+  conditionsCount: number;
+  latestGoal: GoalRow | null;
+  latestPhysical: PhysicalRow | null;
+  latestLifestyle: LifestyleRow | null;
+  latestCondition: ConditionRow | null;
+  recentActivity: ActivityEntry[];
+};
+
+type QuickAction = {
+  href: string;
+  title: string;
+  description: string;
+  icon: string;
+};
+
+type SummaryCard = {
+  label: string;
+  icon: string;
+  value: string;
+  detail: string;
+  isComplete: boolean;
+  isAvailable: boolean;
+};
+
+type CountRow = {
+  count: number | string | null;
+};
+
+const WATER_GOAL_ML = 2000;
+
+const palette = {
+  pageBg: '#F5F0E8',
+  panelBg: '#FFF9F0',
+  panelAlt: '#FBF7F0',
+  border: '#E1D6C5',
+  borderStrong: '#D8CBB7',
+  forest: '#4A6741',
+  forestSoft: '#EDF4EA',
+  charcoal: '#1C1C1C',
+  body: '#4C5544',
+  muted: '#7E725E',
+  gold: '#C9A84C',
+  goldSoft: 'rgba(201,168,76,0.16)',
+};
+
+const activityRouteByKind: Record<ActivityKind, string> = {
+  hydration: '/hydration_logs/hydration_logs-view',
+  mood: '/mood_logs/mood_logs-view',
+  sleep: '/sleep_logs/sleep_logs-view',
+  weight: '/health_metrics/health_metrics-view',
+  goal: '/goals/goals-view',
+  condition: '/conditions/conditions-view',
+};
+
+const activityIconByKind: Record<ActivityKind, string> = {
+  hydration: mdiWaterOutline,
+  mood: mdiHeartPulse,
+  sleep: mdiWeatherNight,
+  weight: mdiScaleBathroom,
+  goal: mdiTargetVariant,
+  condition: mdiLeafCircle,
+};
+
+const initialDashboardData: DashboardData = {
+  hydrationTotalMl: 0,
+  hydrationLogsToday: 0,
+  moodToday: null,
+  sleepLatest: null,
+  weightLatest: null,
+  activeGoalsCount: 0,
+  conditionsCount: 0,
+  latestGoal: null,
+  latestPhysical: null,
+  latestLifestyle: null,
+  latestCondition: null,
+  recentActivity: [],
+};
+
+function escapeSqlLiteral(value: string) {
+  return value.replace(/'/g, "''");
+}
+
+async function runSql<T>(sql: string): Promise<T[]> {
+  const response = await axios.post('/sql', { sql });
+  return Array.isArray(response.data?.rows) ? response.data.rows : [];
+}
+
+function toCount(value: number | string | null | undefined) {
+  if (value === null || value === undefined) {
+    return 0;
+  }
+
+  const parsedValue = Number(value);
+  return Number.isNaN(parsedValue) ? 0 : parsedValue;
+}
+
+function formatDateTime(value?: string | null) {
+  if (!value) {
+    return 'Not captured yet';
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  }).format(new Date(value));
+}
+
+function formatDate(value?: string | null) {
+  if (!value) {
+    return 'No target date set';
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(new Date(value));
+}
+
+function formatMinutes(total?: number | null) {
+  if (!total || total <= 0) {
+    return 'Not logged yet';
+  }
+
+  const hours = Math.floor(total / 60);
+  const minutes = total % 60;
+
+  if (!hours) {
+    return `${minutes} min`;
+  }
+
+  return `${hours}h ${minutes}m`;
+}
+
+function formatClockTime(value?: string | null) {
+  if (!value) {
+    return 'Not set';
+  }
+
+  const timeMatch = value.match(/^(\d{2}):(\d{2})/);
+
+  if (!timeMatch) {
+    const parsedDate = new Date(value);
+
+    if (Number.isNaN(parsedDate.getTime())) {
+      return value;
+    }
+
+    return new Intl.DateTimeFormat(undefined, {
+      hour: 'numeric',
+      minute: '2-digit',
+    }).format(parsedDate);
+  }
+
+  const hours = Number(timeMatch[1]);
+  const minutes = Number(timeMatch[2]);
+  const parsedDate = new Date();
+  parsedDate.setHours(hours, minutes, 0, 0);
+
+  return new Intl.DateTimeFormat(undefined, {
+    hour: 'numeric',
+    minute: '2-digit',
+  }).format(parsedDate);
+}
+
+function formatNumber(value?: number | string | null, suffix = '') {
+  if (value === null || value === undefined || value === '') {
+    return 'Not set';
+  }
+
+  const parsedValue = Number(value);
+
+  if (Number.isNaN(parsedValue)) {
+    return suffix ? `${value} ${suffix}`.trim() : String(value);
+  }
+
+  const formattedValue = Number.isInteger(parsedValue)
+    ? parsedValue.toLocaleString()
+    : parsedValue.toLocaleString(undefined, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 1,
+      });
+
+  return suffix ? `${formattedValue} ${suffix}` : formattedValue;
+}
+
+function isToday(value?: string | null) {
+  if (!value) {
+    return false;
+  }
+
+  const today = new Date();
+  const candidate = new Date(value);
+
+  return today.toDateString() === candidate.toDateString();
+}
+
+function hasRecentSleep(value?: string | null) {
+  if (!value) {
+    return false;
+  }
+
+  const happenedAt = new Date(value).getTime();
+  const now = Date.now();
+  const hoursDiff = Math.abs(now - happenedAt) / (1000 * 60 * 60);
+
+  return hoursDiff <= 36;
+}
+
+function truncateText(value?: string | null, maxLength = 120) {
+  if (!value) {
+    return '';
+  }
+
+  if (value.length <= maxLength) {
+    return value;
+  }
+
+  return `${value.slice(0, maxLength).trim()}…`;
+}
+
+function getDisplayName(firstName?: string | null, email?: string | null) {
+  if (firstName?.trim()) {
+    return firstName.trim();
+  }
+
+  const emailPrefix = email?.split('@')[0];
+
+  if (emailPrefix) {
+    return humanize(emailPrefix.replace(/[._-]+/g, ' '));
+  }
+
+  return 'there';
+}
+
+function DashboardPage() {
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const [dashboardData, setDashboardData] = useState<DashboardData>(
+    initialDashboardData,
+  );
+  const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [onboardingComplete, setOnboardingComplete] = useState(false);
+
+  const permissions = useMemo(
+    () => ({
+      hydrationRead: hasPermission(currentUser, 'READ_HYDRATION_LOGS'),
+      moodRead: hasPermission(currentUser, 'READ_MOOD_LOGS'),
+      sleepRead: hasPermission(currentUser, 'READ_SLEEP_LOGS'),
+      weightRead: hasPermission(currentUser, 'READ_HEALTH_METRICS'),
+      goalsRead: hasPermission(currentUser, 'READ_GOALS'),
+      conditionsRead: hasPermission(currentUser, 'READ_CONDITIONS'),
+      physicalRead: hasPermission(currentUser, 'READ_USER_PHYSICAL_BASELINES'),
+      lifestyleRead: hasPermission(currentUser, 'READ_USER_LIFESTYLE_BASELINES'),
+    }),
+    [currentUser],
+  );
+
+  useEffect(() => {
+    setOnboardingComplete(hasCompletedApexOnboarding(currentUser?.id));
+  }, [currentUser?.id]);
+
+  const loadDashboard = useCallback(
+    async (userId: string) => {
+      const safeUserId = escapeSqlLiteral(userId);
+      const activityQueries: string[] = [];
+
+      if (permissions.hydrationRead) {
+        activityQueries.push(`
+          SELECT
+            id,
+            'hydration'::text AS kind,
+            COALESCE(NULLIF(container_label, ''), INITCAP(REPLACE(beverage_type, '_', ' ')), 'Hydration') AS title,
+            CONCAT(COALESCE(volume_ml::text, '0'), ' ml') AS detail,
+            logged_at AS happened_at
+          FROM hydration_logs
+          WHERE "userId" = '${safeUserId}'
+            AND "deletedAt" IS NULL
+        `);
+      }
+
+      if (permissions.moodRead) {
+        activityQueries.push(`
+          SELECT
+            id,
+            'mood'::text AS kind,
+            COALESCE(NULLIF(emotion_tags_csv, ''), 'Mood check-in') AS title,
+            CONCAT('Mood ', COALESCE(mood_score::text, '-'), '/10') AS detail,
+            logged_at AS happened_at
+          FROM mood_logs
+          WHERE "userId" = '${safeUserId}'
+            AND "deletedAt" IS NULL
+        `);
+      }
+
+      if (permissions.sleepRead) {
+        activityQueries.push(`
+          SELECT
+            id,
+            'sleep'::text AS kind,
+            'Sleep log'::text AS title,
+            CONCAT(COALESCE(total_sleep_minutes::text, '0'), ' min sleep') AS detail,
+            COALESCE(final_wake_time, bedtime) AS happened_at
+          FROM sleep_logs
+          WHERE "userId" = '${safeUserId}'
+            AND "deletedAt" IS NULL
+        `);
+      }
+
+      if (permissions.weightRead) {
+        activityQueries.push(`
+          SELECT
+            id,
+            'weight'::text AS kind,
+            'Weight check'::text AS title,
+            CONCAT(COALESCE(value_primary::text, '0'), ' ', COALESCE(unit, '')) AS detail,
+            measured_at AS happened_at
+          FROM health_metrics
+          WHERE "userId" = '${safeUserId}'
+            AND "deletedAt" IS NULL
+            AND metric_type = 'body_composition'
+        `);
+      }
+
+      if (permissions.goalsRead) {
+        activityQueries.push(`
+          SELECT
+            id,
+            'goal'::text AS kind,
+            COALESCE(INITCAP(REPLACE(goal_type, '_', ' ')), 'Goal') AS title,
+            COALESCE(
+              NULLIF(follow_up_answer, ''),
+              CASE
+                WHEN target_date IS NOT NULL THEN CONCAT('Target ', TO_CHAR(target_date, 'Mon DD, YYYY'))
+                ELSE 'Goal updated'
+              END
+            ) AS detail,
+            COALESCE(target_date::timestamp, "createdAt") AS happened_at
+          FROM goals
+          WHERE "userId" = '${safeUserId}'
+            AND "deletedAt" IS NULL
+        `);
+      }
+
+      if (permissions.conditionsRead) {
+        activityQueries.push(`
+          SELECT
+            id,
+            'condition'::text AS kind,
+            COALESCE(NULLIF(condition_name, ''), 'Condition') AS title,
+            COALESCE(INITCAP(REPLACE(status, '_', ' ')), 'Health context updated') AS detail,
+            COALESCE("updatedAt", "createdAt") AS happened_at
+          FROM conditions
+          WHERE "userId" = '${safeUserId}'
+            AND "deletedAt" IS NULL
+        `);
+      }
+
+      setLoading(true);
+      setErrorMessage(null);
+
+      try {
+        const [
+          hydrationRows,
+          moodRows,
+          sleepRows,
+          weightRows,
+          goalCountRows,
+          latestGoalRows,
+          physicalRows,
+          lifestyleRows,
+          conditionCountRows,
+          latestConditionRows,
+          activityRows,
+        ] = await Promise.all([
+          permissions.hydrationRead
+            ? runSql<{
+                hydration_total_ml: number | string | null;
+                hydration_logs_today: number | string | null;
+              }>(`
+                SELECT
+                  COALESCE(SUM(CASE WHEN counts_toward_hydration THEN volume_ml ELSE 0 END), 0)::int AS hydration_total_ml,
+                  COUNT(*)::int AS hydration_logs_today
+                FROM hydration_logs
+                WHERE "userId" = '${safeUserId}'
+                  AND "deletedAt" IS NULL
+                  AND logged_at::date = CURRENT_DATE
+              `)
+            : Promise.resolve([]),
+          permissions.moodRead
+            ? runSql<MoodRow>(`
+                SELECT mood_score, energy_level, anxiety_level, emotion_tags_csv, logged_at
+                FROM mood_logs
+                WHERE "userId" = '${safeUserId}'
+                  AND "deletedAt" IS NULL
+                  AND logged_at::date = CURRENT_DATE
+                ORDER BY logged_at DESC
+                LIMIT 1
+              `)
+            : Promise.resolve([]),
+          permissions.sleepRead
+            ? runSql<SleepRow>(`
+                SELECT bedtime, final_wake_time, total_sleep_minutes, sleep_quality, morning_energy
+                FROM sleep_logs
+                WHERE "userId" = '${safeUserId}'
+                  AND "deletedAt" IS NULL
+                ORDER BY COALESCE(final_wake_time, bedtime) DESC NULLS LAST
+                LIMIT 1
+              `)
+            : Promise.resolve([]),
+          permissions.weightRead
+            ? runSql<WeightRow>(`
+                SELECT measured_at, value_primary, unit, notes
+                FROM health_metrics
+                WHERE "userId" = '${safeUserId}'
+                  AND "deletedAt" IS NULL
+                  AND metric_type = 'body_composition'
+                ORDER BY measured_at DESC NULLS LAST, "createdAt" DESC
+                LIMIT 1
+              `)
+            : Promise.resolve([]),
+          permissions.goalsRead
+            ? runSql<CountRow>(`
+                SELECT COUNT(*)::int AS count
+                FROM goals
+                WHERE "userId" = '${safeUserId}'
+                  AND "deletedAt" IS NULL
+                  AND is_active = true
+              `)
+            : Promise.resolve([]),
+          permissions.goalsRead
+            ? runSql<GoalRow>(`
+                SELECT id, goal_type, follow_up_answer, target_date, is_active
+                FROM goals
+                WHERE "userId" = '${safeUserId}'
+                  AND "deletedAt" IS NULL
+                ORDER BY
+                  CASE WHEN is_active = true THEN 0 ELSE 1 END,
+                  CASE WHEN target_date IS NULL THEN 1 ELSE 0 END,
+                  target_date ASC,
+                  "createdAt" DESC
+                LIMIT 1
+              `)
+            : Promise.resolve([]),
+          permissions.physicalRead
+            ? runSql<PhysicalRow>(`
+                SELECT
+                  height_cm,
+                  weight_kg,
+                  dominant_hand,
+                  blood_type,
+                  body_frame_size,
+                  COALESCE("updatedAt", "createdAt") AS updated_at
+                FROM user_physical_baselines
+                WHERE "userId" = '${safeUserId}'
+                  AND "deletedAt" IS NULL
+                ORDER BY COALESCE("updatedAt", "createdAt") DESC NULLS LAST
+                LIMIT 1
+              `)
+            : Promise.resolve([]),
+          permissions.lifestyleRead
+            ? runSql<LifestyleRow>(`
+                SELECT
+                  typical_bedtime,
+                  typical_wake_time,
+                  caffeine_servings_per_day,
+                  avg_daily_steps_estimate,
+                  typical_stress_level,
+                  currently_exercises,
+                  diet_pattern,
+                  alcohol_use,
+                  tobacco_nicotine_use,
+                  COALESCE("updatedAt", "createdAt") AS updated_at
+                FROM user_lifestyle_baselines
+                WHERE "userId" = '${safeUserId}'
+                  AND "deletedAt" IS NULL
+                ORDER BY COALESCE("updatedAt", "createdAt") DESC NULLS LAST
+                LIMIT 1
+              `)
+            : Promise.resolve([]),
+          permissions.conditionsRead
+            ? runSql<CountRow>(`
+                SELECT COUNT(*)::int AS count
+                FROM conditions
+                WHERE "userId" = '${safeUserId}'
+                  AND "deletedAt" IS NULL
+              `)
+            : Promise.resolve([]),
+          permissions.conditionsRead
+            ? runSql<ConditionRow>(`
+                SELECT
+                  id,
+                  condition_name,
+                  status,
+                  diagnosing_doctor,
+                  management_plan,
+                  COALESCE("updatedAt", "createdAt") AS updated_at
+                FROM conditions
+                WHERE "userId" = '${safeUserId}'
+                  AND "deletedAt" IS NULL
+                ORDER BY COALESCE("updatedAt", "createdAt") DESC NULLS LAST
+                LIMIT 1
+              `)
+            : Promise.resolve([]),
+          activityQueries.length > 0
+            ? runSql<ActivityEntry>(`
+                SELECT *
+                FROM (
+                  ${activityQueries.join('\nUNION ALL\n')}
+                ) AS dashboard_activity
+                WHERE happened_at IS NOT NULL
+                ORDER BY happened_at DESC
+                LIMIT 8
+              `)
+            : Promise.resolve([]),
+        ]);
+
+        setDashboardData({
+          hydrationTotalMl: toCount(hydrationRows[0]?.hydration_total_ml),
+          hydrationLogsToday: toCount(hydrationRows[0]?.hydration_logs_today),
+          moodToday: moodRows[0] ?? null,
+          sleepLatest: sleepRows[0] ?? null,
+          weightLatest: weightRows[0] ?? null,
+          activeGoalsCount: toCount(goalCountRows[0]?.count),
+          conditionsCount: toCount(conditionCountRows[0]?.count),
+          latestGoal: latestGoalRows[0] ?? null,
+          latestPhysical: physicalRows[0] ?? null,
+          latestLifestyle: lifestyleRows[0] ?? null,
+          latestCondition: latestConditionRows[0] ?? null,
+          recentActivity: activityRows,
+        });
+      } catch (error) {
+        console.error('Failed to load APEX BRAIN dashboard:', error);
+        setErrorMessage(
+          'We could not load your personalized home dashboard just now. Your saved data is still intact, so please refresh and try again.',
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    [
+      permissions.conditionsRead,
+      permissions.goalsRead,
+      permissions.hydrationRead,
+      permissions.lifestyleRead,
+      permissions.moodRead,
+      permissions.physicalRead,
+      permissions.sleepRead,
+      permissions.weightRead,
+    ],
+  );
+
+  useEffect(() => {
+    if (!currentUser?.id) {
+      return;
+    }
+
+    loadDashboard(currentUser.id).catch((error) => {
+      console.error('Unhandled APEX BRAIN dashboard load error:', error);
     });
-    const { currentUser } = useAppSelector((state) => state.auth);
-    const { isFetchingQuery } = useAppSelector((state) => state.openAi);
-    
-    const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
-    
-    
-    async function loadData() {
-        const entities = ['users','roles','permissions','user_physical_baselines','user_lifestyle_baselines','goals','conditions','surgeries','implants_devices','allergies','family_histories','healthcare_providers','pharmacies','medications','medication_doses','medication_side_effects','supplements','supplement_evidence_items','workouts','exercises','workout_exercises','workout_schedules','training_blocks','workout_sessions','strength_sets','cardio_sessions','recovery_logs','heat_cold_exposures','flexibility_assessments','foods','recipes','recipe_collections','meals','meal_items','nutrition_targets','meal_plans','meal_plan_items','grocery_lists','grocery_items','hydration_logs','fasting_sessions','ketone_glucose_logs','bowel_movements','gut_symptom_logs','health_metrics','symptom_logs','medical_appointments','lab_documents','vaccinations','ai_chat_threads','ai_chat_messages','ai_generations','habits','habit_logs','habit_challenges','library_articles','saved_articles','glossary_terms','health_vault_documents','emergency_medical_cards','advance_directives','insurance_policies','family_groups','family_members','sharing_permissions','mood_logs','mental_assessments','journal_entries','breathing_sessions','stress_logs','cognitive_tests','sleep_logs','sleep_environment_logs','nap_logs','menstrual_cycles','menstrual_day_logs','fertility_logs','pregnancies','pregnancy_symptom_logs','breastfeeding_logs','formula_feeding_logs','baby_metrics','epds_assessments','kick_counts','contraction_sessions','contractions','menopause_symptom_logs','male_reproductive_logs','semen_analyses','sti_tests','contraception_logs','libido_logs','sexual_activity_logs','skin_care_logs','sun_exposure_logs','mole_lesion_logs','oral_hygiene_logs','dental_records','dental_symptoms','vision_prescriptions','eye_symptom_logs','hearing_test_logs','tinnitus_logs','noise_exposure_logs','pain_logs','injuries','physio_exercises','ergonomics_logs','notifications','export_jobs','app_settings',];
-        const fns = [setUsers,setRoles,setPermissions,setUser_physical_baselines,setUser_lifestyle_baselines,setGoals,setConditions,setSurgeries,setImplants_devices,setAllergies,setFamily_histories,setHealthcare_providers,setPharmacies,setMedications,setMedication_doses,setMedication_side_effects,setSupplements,setSupplement_evidence_items,setWorkouts,setExercises,setWorkout_exercises,setWorkout_schedules,setTraining_blocks,setWorkout_sessions,setStrength_sets,setCardio_sessions,setRecovery_logs,setHeat_cold_exposures,setFlexibility_assessments,setFoods,setRecipes,setRecipe_collections,setMeals,setMeal_items,setNutrition_targets,setMeal_plans,setMeal_plan_items,setGrocery_lists,setGrocery_items,setHydration_logs,setFasting_sessions,setKetone_glucose_logs,setBowel_movements,setGut_symptom_logs,setHealth_metrics,setSymptom_logs,setMedical_appointments,setLab_documents,setVaccinations,setAi_chat_threads,setAi_chat_messages,setAi_generations,setHabits,setHabit_logs,setHabit_challenges,setLibrary_articles,setSaved_articles,setGlossary_terms,setHealth_vault_documents,setEmergency_medical_cards,setAdvance_directives,setInsurance_policies,setFamily_groups,setFamily_members,setSharing_permissions,setMood_logs,setMental_assessments,setJournal_entries,setBreathing_sessions,setStress_logs,setCognitive_tests,setSleep_logs,setSleep_environment_logs,setNap_logs,setMenstrual_cycles,setMenstrual_day_logs,setFertility_logs,setPregnancies,setPregnancy_symptom_logs,setBreastfeeding_logs,setFormula_feeding_logs,setBaby_metrics,setEpds_assessments,setKick_counts,setContraction_sessions,setContractions,setMenopause_symptom_logs,setMale_reproductive_logs,setSemen_analyses,setSti_tests,setContraception_logs,setLibido_logs,setSexual_activity_logs,setSkin_care_logs,setSun_exposure_logs,setMole_lesion_logs,setOral_hygiene_logs,setDental_records,setDental_symptoms,setVision_prescriptions,setEye_symptom_logs,setHearing_test_logs,setTinnitus_logs,setNoise_exposure_logs,setPain_logs,setInjuries,setPhysio_exercises,setErgonomics_logs,setNotifications,setExport_jobs,setApp_settings,];
+  }, [currentUser?.id, loadDashboard]);
 
-        const requests = entities.map((entity, index) => {
-          
-          if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
-            return axios.get(`/${entity.toLowerCase()}/count`);
-          } else {
-            fns[index](null);
-            return Promise.resolve({data: {count: null}});
-          }
-          
-        });
+  const greeting = useMemo(() => {
+    const hour = new Date().getHours();
 
-        Promise.allSettled(requests).then((results) => {
-            results.forEach((result, i) => {
-                if (result.status === 'fulfilled') {
-                    fns[i](result.value.data.count);
-                } else {
-                    fns[i](result.reason.message);
-                }
-            });
-        });
+    if (hour < 12) {
+      return 'Good morning';
     }
-  
-    async function getWidgets(roleId) {
-        await dispatch(fetchWidgets(roleId));
-    }
-    React.useEffect(() => {
-        if (!currentUser) return;
-        loadData().then();
-        setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
-    }, [currentUser]);
 
-    React.useEffect(() => {
-        if (!currentUser || !widgetsRole?.role?.value) return;
-        getWidgets(widgetsRole?.role?.value || '').then();
-    }, [widgetsRole?.role?.value]);
-  
+    if (hour < 18) {
+      return 'Good afternoon';
+    }
+
+    return 'Good evening';
+  }, []);
+
+  const displayName = useMemo(
+    () => getDisplayName(currentUser?.firstName, currentUser?.email),
+    [currentUser?.email, currentUser?.firstName],
+  );
+
+  const summaryCards = useMemo<SummaryCard[]>(() => {
+    const hydrationProgress = Math.min(
+      dashboardData.hydrationTotalMl / WATER_GOAL_ML,
+      1,
+    );
+    const sleepTimestamp =
+      dashboardData.sleepLatest?.final_wake_time ||
+      dashboardData.sleepLatest?.bedtime;
+    const weightToday = isToday(dashboardData.weightLatest?.measured_at);
+    const sleepLogged = hasRecentSleep(sleepTimestamp);
+    const moodLogged = Boolean(dashboardData.moodToday?.logged_at);
+
+    return [
+      {
+        label: 'Hydration',
+        icon: mdiWaterOutline,
+        value: permissions.hydrationRead
+          ? `${dashboardData.hydrationTotalMl.toLocaleString()} ml`
+          : 'Locked',
+        detail: permissions.hydrationRead
+          ? `${Math.min(
+              100,
+              Math.round(hydrationProgress * 100),
+            )}% of your 2L hydration target`
+          : 'View access for hydration logs is not enabled.',
+        isComplete:
+          permissions.hydrationRead && dashboardData.hydrationTotalMl > 0,
+        isAvailable: permissions.hydrationRead,
+      },
+      {
+        label: 'Mood',
+        icon: mdiHeartPulse,
+        value: permissions.moodRead
+          ? dashboardData.moodToday?.mood_score
+            ? `${dashboardData.moodToday.mood_score}/10 mood`
+            : 'Not logged yet'
+          : 'Locked',
+        detail: permissions.moodRead
+          ? dashboardData.moodToday?.energy_level ||
+            dashboardData.moodToday?.anxiety_level
+            ? `Energy ${dashboardData.moodToday?.energy_level ?? '-'} • Anxiety ${dashboardData.moodToday?.anxiety_level ?? '-'}`
+            : 'Capture how you felt today'
+          : 'View access for mood logs is not enabled.',
+        isComplete: permissions.moodRead && moodLogged,
+        isAvailable: permissions.moodRead,
+      },
+      {
+        label: 'Sleep',
+        icon: mdiWeatherNight,
+        value: permissions.sleepRead
+          ? formatMinutes(dashboardData.sleepLatest?.total_sleep_minutes)
+          : 'Locked',
+        detail: permissions.sleepRead
+          ? dashboardData.sleepLatest?.sleep_quality
+            ? `Quality ${dashboardData.sleepLatest.sleep_quality}/10 • Logged ${formatDateTime(sleepTimestamp)}`
+            : 'Add your last sleep block'
+          : 'View access for sleep logs is not enabled.',
+        isComplete: permissions.sleepRead && sleepLogged,
+        isAvailable: permissions.sleepRead,
+      },
+      {
+        label: 'Weight',
+        icon: mdiScaleBathroom,
+        value: permissions.weightRead
+          ? dashboardData.weightLatest?.value_primary
+            ? `${dashboardData.weightLatest.value_primary} ${dashboardData.weightLatest.unit ?? ''}`.trim()
+            : 'Not logged yet'
+          : 'Locked',
+        detail: permissions.weightRead
+          ? dashboardData.weightLatest?.measured_at
+            ? `Measured ${formatDateTime(dashboardData.weightLatest.measured_at)}`
+            : 'Optional body-composition check'
+          : 'View access for health metrics is not enabled.',
+        isComplete: permissions.weightRead && weightToday,
+        isAvailable: permissions.weightRead,
+      },
+    ];
+  }, [
+    dashboardData.hydrationTotalMl,
+    dashboardData.moodToday,
+    dashboardData.sleepLatest,
+    dashboardData.weightLatest,
+    permissions.hydrationRead,
+    permissions.moodRead,
+    permissions.sleepRead,
+    permissions.weightRead,
+  ]);
+
+  const accessibleSummaryCards = useMemo(
+    () => summaryCards.filter((card) => card.isAvailable),
+    [summaryCards],
+  );
+
+  const completedCount = accessibleSummaryCards.filter(
+    (card) => card.isComplete,
+  ).length;
+
+  const completionPercent = accessibleSummaryCards.length
+    ? Math.round((completedCount / accessibleSummaryCards.length) * 100)
+    : 0;
+
+  const availablePulsePoints =
+    (permissions.hydrationRead ? 25 : 0) +
+    (permissions.moodRead ? 25 : 0) +
+    (permissions.sleepRead ? 25 : 0) +
+    (permissions.weightRead ? 25 : 0);
+
+  const earnedPulsePoints =
+    (permissions.hydrationRead
+      ? Math.round(
+          Math.min(dashboardData.hydrationTotalMl / WATER_GOAL_ML, 1) * 25,
+        )
+      : 0) +
+    (summaryCards[1]?.isComplete ? 25 : 0) +
+    (summaryCards[2]?.isComplete ? 25 : 0) +
+    (summaryCards[3]?.isComplete ? 25 : 0);
+
+  const pulseScore = availablePulsePoints
+    ? Math.round((earnedPulsePoints / availablePulsePoints) * 100)
+    : 0;
+
+  const profileChecklist = useMemo(
+    () => [
+      {
+        label: 'First name',
+        isComplete: Boolean(currentUser?.firstName?.trim()),
+      },
+      {
+        label: 'Phone number',
+        isComplete: Boolean(currentUser?.phoneNumber?.trim()),
+      },
+      {
+        label: 'Height baseline',
+        isComplete:
+          dashboardData.latestPhysical?.height_cm !== null &&
+          dashboardData.latestPhysical?.height_cm !== undefined,
+      },
+      {
+        label: 'Weight baseline',
+        isComplete:
+          dashboardData.latestPhysical?.weight_kg !== null &&
+          dashboardData.latestPhysical?.weight_kg !== undefined,
+      },
+      {
+        label: 'Typical bedtime',
+        isComplete: Boolean(dashboardData.latestLifestyle?.typical_bedtime),
+      },
+      {
+        label: 'Typical wake time',
+        isComplete: Boolean(dashboardData.latestLifestyle?.typical_wake_time),
+      },
+      {
+        label: 'Primary goal',
+        isComplete: Boolean(dashboardData.latestGoal?.goal_type),
+      },
+      {
+        label: 'Goal target date',
+        isComplete: Boolean(dashboardData.latestGoal?.target_date),
+      },
+    ],
+    [
+      currentUser?.firstName,
+      currentUser?.phoneNumber,
+      dashboardData.latestGoal?.goal_type,
+      dashboardData.latestGoal?.target_date,
+      dashboardData.latestLifestyle?.typical_bedtime,
+      dashboardData.latestLifestyle?.typical_wake_time,
+      dashboardData.latestPhysical?.height_cm,
+      dashboardData.latestPhysical?.weight_kg,
+    ],
+  );
+
+  const profileCompleteness = Math.round(
+    (profileChecklist.filter((item) => item.isComplete).length /
+      profileChecklist.length) *
+      100,
+  );
+
+  const missingProfileItems = profileChecklist
+    .filter((item) => !item.isComplete)
+    .slice(0, 3);
+
+  const nextBestActions = useMemo(() => {
+    const actions: QuickAction[] = [];
+
+    if (!onboardingComplete || profileCompleteness < 100) {
+      actions.push({
+        href: '/onboarding',
+        title: onboardingComplete ? 'Polish your setup' : 'Finish onboarding',
+        description:
+          'Complete your personal, baseline, and goal details so summaries feel truly personal.',
+        icon: mdiAccount,
+      });
+    }
+
+    const firstIncompleteDailyAnchor = accessibleSummaryCards.find(
+      (card) => !card.isComplete,
+    );
+
+    if (firstIncompleteDailyAnchor) {
+      actions.push({
+        href: '/daily-pulse',
+        title: `Complete today's ${firstIncompleteDailyAnchor.label.toLowerCase()} check-in`,
+        description:
+          'Open Daily Pulse to capture the missing piece and strengthen today’s wellness picture.',
+        icon: mdiHeartPulse,
+      });
+    }
+
+    if (!dashboardData.latestGoal && permissions.goalsRead) {
+      actions.push({
+        href: '/goals/goals-list',
+        title: 'Choose a primary goal',
+        description:
+          'Anchor the app around one clear outcome so Daily Pulse and deeper modules stay purposeful.',
+        icon: mdiTargetVariant,
+      });
+    } else if (dashboardData.latestGoal && permissions.goalsRead) {
+      actions.push({
+        href: '/goals/goals-list',
+        title: 'Review your goal plan',
+        description:
+          'Open the goal vault to keep target dates and follow-up notes aligned with your current focus.',
+        icon: mdiTargetVariant,
+      });
+    }
+
+    if (
+      (!dashboardData.latestPhysical || !dashboardData.latestLifestyle) &&
+      (permissions.physicalRead || permissions.lifestyleRead)
+    ) {
+      actions.push({
+        href: '/onboarding',
+        title: 'Add your baseline context',
+        description:
+          'A stronger body and lifestyle baseline makes trends, summaries, and future reports more useful.',
+        icon: mdiLeafCircle,
+      });
+    }
+
+    if (dashboardData.recentActivity.length === 0) {
+      actions.push({
+        href: '/daily-pulse',
+        title: 'Create your first health entry',
+        description:
+          'Start with one Daily Pulse check-in so your home dashboard has real momentum to build from.',
+        icon: mdiArrowTopRight,
+      });
+    }
+
+    if (actions.length === 0) {
+      actions.push(
+        {
+          href: '/daily-pulse',
+          title: 'Open Daily Pulse',
+          description:
+            'Keep today’s hydration, mood, sleep, and weight picture fresh.',
+          icon: mdiHeartPulse,
+        },
+        {
+          href: '/goals/goals-list',
+          title: 'Review active goals',
+          description:
+            'Make sure your target dates and action plans still match what matters most right now.',
+          icon: mdiTargetVariant,
+        },
+      );
+    }
+
+    const seenHrefs = new Set<string>();
+
+    return actions.filter((action) => {
+      if (seenHrefs.has(action.href)) {
+        return false;
+      }
+
+      seenHrefs.add(action.href);
+      return true;
+    });
+  }, [
+    accessibleSummaryCards,
+    dashboardData.latestGoal,
+    dashboardData.latestLifestyle,
+    dashboardData.latestPhysical,
+    dashboardData.recentActivity.length,
+    onboardingComplete,
+    permissions.goalsRead,
+    permissions.lifestyleRead,
+    permissions.physicalRead,
+    profileCompleteness,
+  ]);
+
+  const lifestyleHighlights = useMemo(() => {
+    if (!dashboardData.latestLifestyle) {
+      return [];
+    }
+
+    const highlights = [
+      {
+        label: 'Typical sleep window',
+        value:
+          dashboardData.latestLifestyle.typical_bedtime ||
+          dashboardData.latestLifestyle.typical_wake_time
+            ? `${formatClockTime(
+                dashboardData.latestLifestyle.typical_bedtime,
+              )} → ${formatClockTime(
+                dashboardData.latestLifestyle.typical_wake_time,
+              )}`
+            : 'Not set',
+      },
+      {
+        label: 'Stress baseline',
+        value:
+          dashboardData.latestLifestyle.typical_stress_level !== null &&
+          dashboardData.latestLifestyle.typical_stress_level !== undefined
+            ? `${dashboardData.latestLifestyle.typical_stress_level}/10`
+            : 'Not set',
+      },
+      {
+        label: 'Daily steps estimate',
+        value: formatNumber(
+          dashboardData.latestLifestyle.avg_daily_steps_estimate,
+        ),
+      },
+      {
+        label: 'Diet pattern',
+        value: dashboardData.latestLifestyle.diet_pattern
+          ? humanize(dashboardData.latestLifestyle.diet_pattern)
+          : 'Not set',
+      },
+      {
+        label: 'Exercises regularly',
+        value:
+          dashboardData.latestLifestyle.currently_exercises === null ||
+          dashboardData.latestLifestyle.currently_exercises === undefined
+            ? 'Not set'
+            : dashboardData.latestLifestyle.currently_exercises
+              ? 'Yes'
+              : 'No',
+      },
+      {
+        label: 'Caffeine / day',
+        value: formatNumber(
+          dashboardData.latestLifestyle.caffeine_servings_per_day,
+        ),
+      },
+    ];
+
+    return highlights.filter((highlight) => highlight.value !== 'Not set');
+  }, [dashboardData.latestLifestyle]);
+
+  const baselineHighlights = useMemo(() => {
+    if (!dashboardData.latestPhysical) {
+      return [];
+    }
+
+    const highlights = [
+      {
+        label: 'Height baseline',
+        value: formatNumber(dashboardData.latestPhysical.height_cm, 'cm'),
+      },
+      {
+        label: 'Weight baseline',
+        value: formatNumber(dashboardData.latestPhysical.weight_kg, 'kg'),
+      },
+      {
+        label: 'Dominant hand',
+        value: dashboardData.latestPhysical.dominant_hand
+          ? humanize(dashboardData.latestPhysical.dominant_hand)
+          : 'Not set',
+      },
+      {
+        label: 'Blood type',
+        value: dashboardData.latestPhysical.blood_type
+          ? humanize(dashboardData.latestPhysical.blood_type)
+          : 'Not set',
+      },
+      {
+        label: 'Body frame',
+        value: dashboardData.latestPhysical.body_frame_size
+          ? humanize(dashboardData.latestPhysical.body_frame_size)
+          : 'Not set',
+      },
+    ];
+
+    return highlights.filter((highlight) => highlight.value !== 'Not set');
+  }, [dashboardData.latestPhysical]);
+
   return (
     <>
       <Head>
-        <title>
-            {getPageTitle('Overview')}
-        </title>
+        <title>{getPageTitle('APEX BRAIN Home')}</title>
       </Head>
+
       <SectionMain>
         <SectionTitleLineWithButton
-            icon={icon.mdiChartTimelineVariant}
-            title='Overview'
-            main>
+          icon={mdiChartTimelineVariant}
+          title="APEX BRAIN Home"
+          main
+        >
           {''}
         </SectionTitleLineWithButton>
-        
-        {hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
-            currentUser={currentUser}
-            isFetchingQuery={isFetchingQuery}
-            setWidgetsRole={setWidgetsRole}
-            widgetsRole={widgetsRole}
-        />}
-        {!!rolesWidgets.length &&
-            hasPermission(currentUser, 'CREATE_ROLES') && (
-                <p className='  text-gray-500 dark:text-gray-400 mb-4'>
-                    {`${widgetsRole?.role?.label || 'Users'}'s widgets`}
-                </p>
-            )}
 
-        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
-            {(isFetchingQuery || loading) && (
-                <div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight   text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
-                    <BaseIcon
-                        className={`${iconsColor} animate-spin mr-5`}
-                        w='w-16'
-                        h='h-16'
-                        size={48}
-                        path={icon.mdiLoading}
-                    />{' '}
-                    Loading widgets...
+        <div
+          className="rounded-[32px] border p-6 shadow-sm lg:p-8"
+          style={{
+            borderColor: palette.borderStrong,
+            background:
+              'linear-gradient(135deg, rgba(255,249,240,0.98) 0%, rgba(251,247,240,0.98) 50%, rgba(237,244,234,0.9) 100%)',
+          }}
+        >
+          <div className="grid gap-8 xl:grid-cols-[1.15fr_0.85fr] xl:items-center">
+            <div>
+              <div className="flex flex-wrap items-center gap-3">
+                <span
+                  className="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em]"
+                  style={{
+                    borderColor: palette.borderStrong,
+                    color: palette.forest,
+                    backgroundColor: 'rgba(255,255,255,0.62)',
+                  }}
+                >
+                  <BaseIcon path={mdiCheckCircleOutline} size={16} />
+                  {onboardingComplete
+                    ? 'Personalized setup ready'
+                    : 'Setup still in progress'}
+                </span>
+                <span
+                  className="inline-flex items-center gap-2 rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em]"
+                  style={{
+                    color: palette.charcoal,
+                    backgroundColor: palette.goldSoft,
+                  }}
+                >
+                  Healthcare-first daily home
+                </span>
+              </div>
+
+              <h2
+                className="mt-5 text-4xl font-semibold tracking-tight md:text-5xl"
+                style={{ color: palette.charcoal }}
+              >
+                {greeting}, {displayName}.
+              </h2>
+              <p
+                className="mt-4 max-w-3xl text-base leading-7 md:text-lg"
+                style={{ color: palette.body }}
+              >
+                This is your personalized APEX BRAIN home: a calm summary of
+                today’s Daily Pulse, your setup progress, your current goal, and
+                the latest health activity already stored in the app.
+              </p>
+
+              <div className="mt-6 flex flex-wrap gap-3">
+                <Link
+                  href="/daily-pulse"
+                  className="inline-flex items-center justify-center rounded-full px-5 py-3 text-sm font-semibold text-white transition hover:-translate-y-0.5"
+                  style={{ backgroundColor: palette.forest }}
+                >
+                  Open Daily Pulse
+                </Link>
+                <Link
+                  href="/onboarding"
+                  className="inline-flex items-center justify-center rounded-full border px-5 py-3 text-sm font-semibold transition hover:-translate-y-0.5"
+                  style={{
+                    borderColor: palette.borderStrong,
+                    color: palette.forest,
+                    backgroundColor: 'rgba(255,255,255,0.66)',
+                  }}
+                >
+                  {onboardingComplete ? 'Review onboarding' : 'Finish onboarding'}
+                </Link>
+              </div>
+
+              <div className="mt-8 grid gap-4 sm:grid-cols-3">
+                <div
+                  className="rounded-3xl border p-4"
+                  style={{
+                    borderColor: palette.border,
+                    backgroundColor: 'rgba(255,255,255,0.74)',
+                  }}
+                >
+                  <div
+                    className="text-sm font-medium uppercase tracking-[0.18em]"
+                    style={{ color: palette.muted }}
+                  >
+                    Setup completeness
+                  </div>
+                  <div
+                    className="mt-2 text-3xl font-semibold"
+                    style={{ color: palette.charcoal }}
+                  >
+                    {loading ? '…' : `${profileCompleteness}%`}
+                  </div>
+                  <p className="mt-2 text-sm" style={{ color: palette.body }}>
+                    {loading
+                      ? 'Reviewing your setup...'
+                      : missingProfileItems.length > 0
+                        ? `Still missing ${missingProfileItems
+                            .map((item) => item.label.toLowerCase())
+                            .join(', ')}.`
+                        : 'Your core profile setup looks complete.'}
+                  </p>
                 </div>
-            )}
 
-            { rolesWidgets &&
-                rolesWidgets.map((widget) => (
-                    <SmartWidget
-                        key={widget.id}
-                        userId={currentUser?.id}
-                        widget={widget}
-                        roleId={widgetsRole?.role?.value || ''}
-                        admin={hasPermission(currentUser, 'CREATE_ROLES')}
-                    />
-            ))}
+                <div
+                  className="rounded-3xl border p-4"
+                  style={{
+                    borderColor: palette.border,
+                    backgroundColor: 'rgba(255,255,255,0.74)',
+                  }}
+                >
+                  <div
+                    className="text-sm font-medium uppercase tracking-[0.18em]"
+                    style={{ color: palette.muted }}
+                  >
+                    Active goals
+                  </div>
+                  <div
+                    className="mt-2 text-3xl font-semibold"
+                    style={{ color: palette.charcoal }}
+                  >
+                    {loading ? '…' : dashboardData.activeGoalsCount}
+                  </div>
+                  <p className="mt-2 text-sm" style={{ color: palette.body }}>
+                    {loading
+                      ? 'Gathering your focus areas...'
+                      : dashboardData.latestGoal?.goal_type
+                        ? humanize(dashboardData.latestGoal.goal_type)
+                        : 'No primary goal recorded yet.'}
+                  </p>
+                </div>
+
+                <div
+                  className="rounded-3xl border p-4"
+                  style={{
+                    borderColor: palette.border,
+                    backgroundColor: 'rgba(255,255,255,0.74)',
+                  }}
+                >
+                  <div
+                    className="text-sm font-medium uppercase tracking-[0.18em]"
+                    style={{ color: palette.muted }}
+                  >
+                    Conditions tracked
+                  </div>
+                  <div
+                    className="mt-2 text-3xl font-semibold"
+                    style={{ color: palette.charcoal }}
+                  >
+                    {loading ? '…' : dashboardData.conditionsCount}
+                  </div>
+                  <p className="mt-2 text-sm" style={{ color: palette.body }}>
+                    {loading
+                      ? 'Refreshing your care context...'
+                      : dashboardData.latestCondition?.condition_name
+                        ? `${dashboardData.latestCondition.condition_name}${dashboardData.latestCondition.status ? ` • ${humanize(dashboardData.latestCondition.status)}` : ''}`
+                        : 'Add conditions only if they matter to your care context.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-center xl:justify-end">
+              <div
+                className="w-full max-w-sm rounded-[32px] border p-6 text-center shadow-sm"
+                style={{
+                  borderColor: palette.borderStrong,
+                  backgroundColor: 'rgba(255,255,255,0.84)',
+                }}
+              >
+                <div className="relative mx-auto h-56 w-56">
+                  <div
+                    className="absolute inset-0 rounded-full"
+                    style={{
+                      background: `conic-gradient(${palette.forest} ${completionPercent}%, #E9DDCC ${completionPercent}% 100%)`,
+                    }}
+                  />
+                  <div
+                    className="absolute inset-[16px] rounded-full"
+                    style={{
+                      backgroundColor: palette.panelBg,
+                      boxShadow:
+                        'inset 0 0 0 1px rgba(201, 168, 76, 0.18)',
+                    }}
+                  />
+                  <div className="absolute inset-0 flex flex-col items-center justify-center">
+                    <div
+                      className="text-sm uppercase tracking-[0.2em]"
+                      style={{ color: palette.muted }}
+                    >
+                      Today&apos;s readiness
+                    </div>
+                    <div
+                      className="mt-2 text-5xl font-semibold"
+                      style={{ color: palette.charcoal }}
+                    >
+                      {loading ? '…' : pulseScore}
+                    </div>
+                    <p
+                      className="mt-3 max-w-[11rem] text-sm leading-6"
+                      style={{ color: palette.forest }}
+                    >
+                      {loading
+                        ? 'Refreshing your daily anchors...'
+                        : accessibleSummaryCards.length === 0
+                          ? 'No Daily Pulse modules are visible for your current role yet.'
+                          : completedCount === accessibleSummaryCards.length
+                            ? 'Every available daily anchor is captured.'
+                            : `${completedCount} of ${accessibleSummaryCards.length} available anchors are captured.`}
+                    </p>
+                  </div>
+                </div>
+                <div
+                  className="mt-6 flex items-center justify-center gap-2 text-sm font-medium"
+                  style={{ color: palette.forest }}
+                >
+                  <BaseIcon path={mdiCalendarHeart} size={18} />
+                  {new Intl.DateTimeFormat(undefined, {
+                    weekday: 'long',
+                    month: 'long',
+                    day: 'numeric',
+                  }).format(new Date())}
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
 
-        {!!rolesWidgets.length && <hr className='my-6 text-pastelBrownTheme-mainBG  ' />}
-        
-        <div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
-        
-          
-            {hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Users
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {users}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={icon.mdiAccountGroup || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Roles
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {roles}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Permissions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {permissions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={icon.mdiShieldAccountOutline || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_USER_PHYSICAL_BASELINES') && <Link href={'/user_physical_baselines/user_physical_baselines-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              User physical baselines
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {user_physical_baselines}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHumanMaleHeight' in icon ? icon['mdiHumanMaleHeight' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_USER_LIFESTYLE_BASELINES') && <Link href={'/user_lifestyle_baselines/user_lifestyle_baselines-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              User lifestyle baselines
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {user_lifestyle_baselines}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiLeaf' in icon ? icon['mdiLeaf' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_GOALS') && <Link href={'/goals/goals-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Goals
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {goals}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiTarget' in icon ? icon['mdiTarget' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_CONDITIONS') && <Link href={'/conditions/conditions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Conditions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {conditions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHeartPulse' in icon ? icon['mdiHeartPulse' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SURGERIES') && <Link href={'/surgeries/surgeries-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Surgeries
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {surgeries}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiScalpel' in icon ? icon['mdiScalpel' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_IMPLANTS_DEVICES') && <Link href={'/implants_devices/implants_devices-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Implants devices
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {implants_devices}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiChip' in icon ? icon['mdiChip' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_ALLERGIES') && <Link href={'/allergies/allergies-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Allergies
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {allergies}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiAllergy' in icon ? icon['mdiAllergy' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_FAMILY_HISTORIES') && <Link href={'/family_histories/family_histories-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Family histories
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {family_histories}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiAccountGroup' in icon ? icon['mdiAccountGroup' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_HEALTHCARE_PROVIDERS') && <Link href={'/healthcare_providers/healthcare_providers-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Healthcare providers
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {healthcare_providers}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiDoctor' in icon ? icon['mdiDoctor' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PHARMACIES') && <Link href={'/pharmacies/pharmacies-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Pharmacies
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {pharmacies}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiPharmacy' in icon ? icon['mdiPharmacy' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MEDICATIONS') && <Link href={'/medications/medications-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Medications
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {medications}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiPill' in icon ? icon['mdiPill' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MEDICATION_DOSES') && <Link href={'/medication_doses/medication_doses-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Medication doses
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {medication_doses}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiClockCheck' in icon ? icon['mdiClockCheck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MEDICATION_SIDE_EFFECTS') && <Link href={'/medication_side_effects/medication_side_effects-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Medication side effects
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {medication_side_effects}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiAlertCircle' in icon ? icon['mdiAlertCircle' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SUPPLEMENTS') && <Link href={'/supplements/supplements-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Supplements
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {supplements}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBottleTonicPlus' in icon ? icon['mdiBottleTonicPlus' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SUPPLEMENT_EVIDENCE_ITEMS') && <Link href={'/supplement_evidence_items/supplement_evidence_items-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Supplement evidence items
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {supplement_evidence_items}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFlask' in icon ? icon['mdiFlask' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_WORKOUTS') && <Link href={'/workouts/workouts-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Workouts
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {workouts}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiDumbbell' in icon ? icon['mdiDumbbell' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_EXERCISES') && <Link href={'/exercises/exercises-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Exercises
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {exercises}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiArmFlex' in icon ? icon['mdiArmFlex' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_WORKOUT_EXERCISES') && <Link href={'/workout_exercises/workout_exercises-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Workout exercises
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {workout_exercises}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFormatListNumbered' in icon ? icon['mdiFormatListNumbered' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_WORKOUT_SCHEDULES') && <Link href={'/workout_schedules/workout_schedules-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Workout schedules
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {workout_schedules}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCalendarFitness' in icon ? icon['mdiCalendarFitness' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_TRAINING_BLOCKS') && <Link href={'/training_blocks/training_blocks-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Training blocks
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {training_blocks}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiTimeline' in icon ? icon['mdiTimeline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_WORKOUT_SESSIONS') && <Link href={'/workout_sessions/workout_sessions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Workout sessions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {workout_sessions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiRun' in icon ? icon['mdiRun' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_STRENGTH_SETS') && <Link href={'/strength_sets/strength_sets-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Strength sets
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {strength_sets}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiWeightLifter' in icon ? icon['mdiWeightLifter' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_CARDIO_SESSIONS') && <Link href={'/cardio_sessions/cardio_sessions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Cardio sessions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {cardio_sessions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBike' in icon ? icon['mdiBike' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_RECOVERY_LOGS') && <Link href={'/recovery_logs/recovery_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Recovery logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {recovery_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHeartFlash' in icon ? icon['mdiHeartFlash' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_HEAT_COLD_EXPOSURES') && <Link href={'/heat_cold_exposures/heat_cold_exposures-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Heat cold exposures
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {heat_cold_exposures}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiThermometer' in icon ? icon['mdiThermometer' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_FLEXIBILITY_ASSESSMENTS') && <Link href={'/flexibility_assessments/flexibility_assessments-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Flexibility assessments
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {flexibility_assessments}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiYoga' in icon ? icon['mdiYoga' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_FOODS') && <Link href={'/foods/foods-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Foods
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {foods}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFoodApple' in icon ? icon['mdiFoodApple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_RECIPES') && <Link href={'/recipes/recipes-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Recipes
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {recipes}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBookOpenVariant' in icon ? icon['mdiBookOpenVariant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_RECIPE_COLLECTIONS') && <Link href={'/recipe_collections/recipe_collections-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Recipe collections
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {recipe_collections}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFolderMultiple' in icon ? icon['mdiFolderMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MEALS') && <Link href={'/meals/meals-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Meals
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {meals}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiSilverwareForkKnife' in icon ? icon['mdiSilverwareForkKnife' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MEAL_ITEMS') && <Link href={'/meal_items/meal_items-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Meal items
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {meal_items}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFood' in icon ? icon['mdiFood' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_NUTRITION_TARGETS') && <Link href={'/nutrition_targets/nutrition_targets-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Nutrition targets
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {nutrition_targets}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCalculatorVariant' in icon ? icon['mdiCalculatorVariant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MEAL_PLANS') && <Link href={'/meal_plans/meal_plans-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Meal plans
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {meal_plans}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCalendarText' in icon ? icon['mdiCalendarText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MEAL_PLAN_ITEMS') && <Link href={'/meal_plan_items/meal_plan_items-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Meal plan items
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {meal_plan_items}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFoodVariant' in icon ? icon['mdiFoodVariant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_GROCERY_LISTS') && <Link href={'/grocery_lists/grocery_lists-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Grocery lists
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {grocery_lists}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCartOutline' in icon ? icon['mdiCartOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_GROCERY_ITEMS') && <Link href={'/grocery_items/grocery_items-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Grocery items
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {grocery_items}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFormatListCheckmarks' in icon ? icon['mdiFormatListCheckmarks' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_HYDRATION_LOGS') && <Link href={'/hydration_logs/hydration_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Hydration logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {hydration_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCupWater' in icon ? icon['mdiCupWater' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_FASTING_SESSIONS') && <Link href={'/fasting_sessions/fasting_sessions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Fasting sessions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {fasting_sessions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiTimerSand' in icon ? icon['mdiTimerSand' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_KETONE_GLUCOSE_LOGS') && <Link href={'/ketone_glucose_logs/ketone_glucose_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Ketone glucose logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {ketone_glucose_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBloodBag' in icon ? icon['mdiBloodBag' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_BOWEL_MOVEMENTS') && <Link href={'/bowel_movements/bowel_movements-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Bowel movements
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {bowel_movements}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiToilet' in icon ? icon['mdiToilet' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_GUT_SYMPTOM_LOGS') && <Link href={'/gut_symptom_logs/gut_symptom_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Gut symptom logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {gut_symptom_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiStomach' in icon ? icon['mdiStomach' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_HEALTH_METRICS') && <Link href={'/health_metrics/health_metrics-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Health metrics
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {health_metrics}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiChartLine' in icon ? icon['mdiChartLine' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SYMPTOM_LOGS') && <Link href={'/symptom_logs/symptom_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Symptom logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {symptom_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiEmoticonSickOutline' in icon ? icon['mdiEmoticonSickOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MEDICAL_APPOINTMENTS') && <Link href={'/medical_appointments/medical_appointments-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Medical appointments
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {medical_appointments}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCalendarClock' in icon ? icon['mdiCalendarClock' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_LAB_DOCUMENTS') && <Link href={'/lab_documents/lab_documents-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Lab documents
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {lab_documents}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFileDocument' in icon ? icon['mdiFileDocument' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_VACCINATIONS') && <Link href={'/vaccinations/vaccinations-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Vaccinations
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {vaccinations}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiNeedle' in icon ? icon['mdiNeedle' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_AI_CHAT_THREADS') && <Link href={'/ai_chat_threads/ai_chat_threads-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Ai chat threads
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {ai_chat_threads}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiChatProcessing' in icon ? icon['mdiChatProcessing' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_AI_CHAT_MESSAGES') && <Link href={'/ai_chat_messages/ai_chat_messages-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Ai chat messages
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {ai_chat_messages}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiMessageText' in icon ? icon['mdiMessageText' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_AI_GENERATIONS') && <Link href={'/ai_generations/ai_generations-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Ai generations
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {ai_generations}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiRobotOutline' in icon ? icon['mdiRobotOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_HABITS') && <Link href={'/habits/habits-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Habits
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {habits}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCheckboxMarkedCircleOutline' in icon ? icon['mdiCheckboxMarkedCircleOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_HABIT_LOGS') && <Link href={'/habit_logs/habit_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Habit logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {habit_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCalendarCheck' in icon ? icon['mdiCalendarCheck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_HABIT_CHALLENGES') && <Link href={'/habit_challenges/habit_challenges-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Habit challenges
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {habit_challenges}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiTrophyOutline' in icon ? icon['mdiTrophyOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_LIBRARY_ARTICLES') && <Link href={'/library_articles/library_articles-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Library articles
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {library_articles}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiLibrary' in icon ? icon['mdiLibrary' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SAVED_ARTICLES') && <Link href={'/saved_articles/saved_articles-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Saved articles
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {saved_articles}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBookmark' in icon ? icon['mdiBookmark' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_GLOSSARY_TERMS') && <Link href={'/glossary_terms/glossary_terms-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Glossary terms
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {glossary_terms}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiAlphabetical' in icon ? icon['mdiAlphabetical' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_HEALTH_VAULT_DOCUMENTS') && <Link href={'/health_vault_documents/health_vault_documents-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Health vault documents
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {health_vault_documents}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiLock' in icon ? icon['mdiLock' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_EMERGENCY_MEDICAL_CARDS') && <Link href={'/emergency_medical_cards/emergency_medical_cards-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Emergency medical cards
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {emergency_medical_cards}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCardAccountDetails' in icon ? icon['mdiCardAccountDetails' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_ADVANCE_DIRECTIVES') && <Link href={'/advance_directives/advance_directives-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Advance directives
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {advance_directives}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFileLock' in icon ? icon['mdiFileLock' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_INSURANCE_POLICIES') && <Link href={'/insurance_policies/insurance_policies-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Insurance policies
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {insurance_policies}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiShieldAccount' in icon ? icon['mdiShieldAccount' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_FAMILY_GROUPS') && <Link href={'/family_groups/family_groups-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Family groups
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {family_groups}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHomeAccount' in icon ? icon['mdiHomeAccount' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_FAMILY_MEMBERS') && <Link href={'/family_members/family_members-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Family members
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {family_members}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiAccountMultiple' in icon ? icon['mdiAccountMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SHARING_PERMISSIONS') && <Link href={'/sharing_permissions/sharing_permissions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Sharing permissions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {sharing_permissions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiShareVariant' in icon ? icon['mdiShareVariant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MOOD_LOGS') && <Link href={'/mood_logs/mood_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Mood logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {mood_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiEmoticonHappyOutline' in icon ? icon['mdiEmoticonHappyOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MENTAL_ASSESSMENTS') && <Link href={'/mental_assessments/mental_assessments-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Mental assessments
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {mental_assessments}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiClipboardPulse' in icon ? icon['mdiClipboardPulse' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_JOURNAL_ENTRIES') && <Link href={'/journal_entries/journal_entries-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Journal entries
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {journal_entries}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiNotebook' in icon ? icon['mdiNotebook' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_BREATHING_SESSIONS') && <Link href={'/breathing_sessions/breathing_sessions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Breathing sessions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {breathing_sessions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiMeditation' in icon ? icon['mdiMeditation' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_STRESS_LOGS') && <Link href={'/stress_logs/stress_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Stress logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {stress_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiWeatherLightning' in icon ? icon['mdiWeatherLightning' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_COGNITIVE_TESTS') && <Link href={'/cognitive_tests/cognitive_tests-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Cognitive tests
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {cognitive_tests}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBrain' in icon ? icon['mdiBrain' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SLEEP_LOGS') && <Link href={'/sleep_logs/sleep_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Sleep logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {sleep_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiSleep' in icon ? icon['mdiSleep' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SLEEP_ENVIRONMENT_LOGS') && <Link href={'/sleep_environment_logs/sleep_environment_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Sleep environment logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {sleep_environment_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHomeThermometer' in icon ? icon['mdiHomeThermometer' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_NAP_LOGS') && <Link href={'/nap_logs/nap_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Nap logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {nap_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiPowerSleep' in icon ? icon['mdiPowerSleep' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MENSTRUAL_CYCLES') && <Link href={'/menstrual_cycles/menstrual_cycles-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Menstrual cycles
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {menstrual_cycles}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCalendarHeart' in icon ? icon['mdiCalendarHeart' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MENSTRUAL_DAY_LOGS') && <Link href={'/menstrual_day_logs/menstrual_day_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Menstrual day logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {menstrual_day_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiWaterOutline' in icon ? icon['mdiWaterOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_FERTILITY_LOGS') && <Link href={'/fertility_logs/fertility_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Fertility logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {fertility_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBabyFaceOutline' in icon ? icon['mdiBabyFaceOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PREGNANCIES') && <Link href={'/pregnancies/pregnancies-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Pregnancies
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {pregnancies}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHumanPregnant' in icon ? icon['mdiHumanPregnant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PREGNANCY_SYMPTOM_LOGS') && <Link href={'/pregnancy_symptom_logs/pregnancy_symptom_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Pregnancy symptom logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {pregnancy_symptom_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHeartOutline' in icon ? icon['mdiHeartOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_BREASTFEEDING_LOGS') && <Link href={'/breastfeeding_logs/breastfeeding_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Breastfeeding logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {breastfeeding_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBabyBottleOutline' in icon ? icon['mdiBabyBottleOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_FORMULA_FEEDING_LOGS') && <Link href={'/formula_feeding_logs/formula_feeding_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Formula feeding logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {formula_feeding_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBottleSodaOutline' in icon ? icon['mdiBottleSodaOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_BABY_METRICS') && <Link href={'/baby_metrics/baby_metrics-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Baby metrics
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {baby_metrics}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiChartBellCurve' in icon ? icon['mdiChartBellCurve' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_EPDS_ASSESSMENTS') && <Link href={'/epds_assessments/epds_assessments-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Epds assessments
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {epds_assessments}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiClipboardTextOutline' in icon ? icon['mdiClipboardTextOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_KICK_COUNTS') && <Link href={'/kick_counts/kick_counts-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Kick counts
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {kick_counts}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHandTap' in icon ? icon['mdiHandTap' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_CONTRACTION_SESSIONS') && <Link href={'/contraction_sessions/contraction_sessions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Contraction sessions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {contraction_sessions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiTimerOutline' in icon ? icon['mdiTimerOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_CONTRACTIONS') && <Link href={'/contractions/contractions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Contractions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {contractions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiChartTimelineVariant' in icon ? icon['mdiChartTimelineVariant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MENOPAUSE_SYMPTOM_LOGS') && <Link href={'/menopause_symptom_logs/menopause_symptom_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Menopause symptom logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {menopause_symptom_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFire' in icon ? icon['mdiFire' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MALE_REPRODUCTIVE_LOGS') && <Link href={'/male_reproductive_logs/male_reproductive_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Male reproductive logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {male_reproductive_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiGenderMale' in icon ? icon['mdiGenderMale' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SEMEN_ANALYSES') && <Link href={'/semen_analyses/semen_analyses-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Semen analyses
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {semen_analyses}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiMicroscope' in icon ? icon['mdiMicroscope' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_STI_TESTS') && <Link href={'/sti_tests/sti_tests-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Sti tests
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {sti_tests}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiShieldCheck' in icon ? icon['mdiShieldCheck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_CONTRACEPTION_LOGS') && <Link href={'/contraception_logs/contraception_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Contraception logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {contraception_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiShieldOutline' in icon ? icon['mdiShieldOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_LIBIDO_LOGS') && <Link href={'/libido_logs/libido_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Libido logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {libido_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHeartPlusOutline' in icon ? icon['mdiHeartPlusOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SEXUAL_ACTIVITY_LOGS') && <Link href={'/sexual_activity_logs/sexual_activity_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Sexual activity logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {sexual_activity_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiLockOutline' in icon ? icon['mdiLockOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SKIN_CARE_LOGS') && <Link href={'/skin_care_logs/skin_care_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Skin care logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {skin_care_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFaceManShimmer' in icon ? icon['mdiFaceManShimmer' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_SUN_EXPOSURE_LOGS') && <Link href={'/sun_exposure_logs/sun_exposure_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Sun exposure logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {sun_exposure_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiWeatherSunny' in icon ? icon['mdiWeatherSunny' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_MOLE_LESION_LOGS') && <Link href={'/mole_lesion_logs/mole_lesion_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Mole lesion logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {mole_lesion_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiMolecule' in icon ? icon['mdiMolecule' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_ORAL_HYGIENE_LOGS') && <Link href={'/oral_hygiene_logs/oral_hygiene_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Oral hygiene logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {oral_hygiene_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiToothOutline' in icon ? icon['mdiToothOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_DENTAL_RECORDS') && <Link href={'/dental_records/dental_records-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Dental records
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {dental_records}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiTooth' in icon ? icon['mdiTooth' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_DENTAL_SYMPTOMS') && <Link href={'/dental_symptoms/dental_symptoms-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Dental symptoms
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {dental_symptoms}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiAlert' in icon ? icon['mdiAlert' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_VISION_PRESCRIPTIONS') && <Link href={'/vision_prescriptions/vision_prescriptions-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Vision prescriptions
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {vision_prescriptions}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiEyeOutline' in icon ? icon['mdiEyeOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_EYE_SYMPTOM_LOGS') && <Link href={'/eye_symptom_logs/eye_symptom_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Eye symptom logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {eye_symptom_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiMonitorEye' in icon ? icon['mdiMonitorEye' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_HEARING_TEST_LOGS') && <Link href={'/hearing_test_logs/hearing_test_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Hearing test logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {hearing_test_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiEarHearing' in icon ? icon['mdiEarHearing' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_TINNITUS_LOGS') && <Link href={'/tinnitus_logs/tinnitus_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Tinnitus logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {tinnitus_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiEarHearingOff' in icon ? icon['mdiEarHearingOff' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_NOISE_EXPOSURE_LOGS') && <Link href={'/noise_exposure_logs/noise_exposure_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Noise exposure logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {noise_exposure_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiVolumeHigh' in icon ? icon['mdiVolumeHigh' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PAIN_LOGS') && <Link href={'/pain_logs/pain_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Pain logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {pain_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiHumanCane' in icon ? icon['mdiHumanCane' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_INJURIES') && <Link href={'/injuries/injuries-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Injuries
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {injuries}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBandage' in icon ? icon['mdiBandage' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_PHYSIO_EXERCISES') && <Link href={'/physio_exercises/physio_exercises-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Physio exercises
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {physio_exercises}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiArmFlexOutline' in icon ? icon['mdiArmFlexOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_ERGONOMICS_LOGS') && <Link href={'/ergonomics_logs/ergonomics_logs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Ergonomics logs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {ergonomics_logs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiDesk' in icon ? icon['mdiDesk' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_NOTIFICATIONS') && <Link href={'/notifications/notifications-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Notifications
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {notifications}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiBellOutline' in icon ? icon['mdiBellOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_EXPORT_JOBS') && <Link href={'/export_jobs/export_jobs-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              Export jobs
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {export_jobs}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiFileExport' in icon ? icon['mdiFileExport' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-            {hasPermission(currentUser, 'READ_APP_SETTINGS') && <Link href={'/app_settings/app_settings-list'}>
-                <div
-                    className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
-                >
-                    <div className="flex justify-between align-center">
-                        <div>
-                            <div className="text-lg leading-tight   text-gray-500 dark:text-gray-400">
-                              App settings
-                            </div>
-                            <div className="text-3xl leading-tight font-semibold">
-                                {app_settings}
-                            </div>
-                        </div>
-                        <div>
-                            <BaseIcon
-                                className={`${iconsColor}`}
-                                w="w-16"
-                                h="h-16"
-                                size={48}
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                path={'mdiCogOutline' in icon ? icon['mdiCogOutline' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Link>}
-          
-          
+        {errorMessage && (
+          <div className="mt-6">
+            <NotificationBar color="danger" icon={mdiHeartPulse}>
+              {errorMessage}
+            </NotificationBar>
+          </div>
+        )}
+
+        <div className="mt-6 grid gap-6 xl:grid-cols-[1.45fr_0.95fr]">
+          <div className="space-y-6">
+            <div
+              className="rounded-[28px] border p-6 shadow-sm"
+              style={{
+                borderColor: palette.borderStrong,
+                backgroundColor: palette.panelBg,
+              }}
+            >
+              <div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+                <div>
+                  <h3
+                    className="text-2xl font-semibold"
+                    style={{ color: palette.charcoal }}
+                  >
+                    Today at a glance
+                  </h3>
+                  <p className="mt-2 text-sm leading-6" style={{ color: palette.body }}>
+                    Four simple anchors — hydration, mood, sleep, and weight —
+                    connected directly to your existing history screens.
+                  </p>
+                </div>
+                <div
+                  className="rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em]"
+                  style={{ borderColor: palette.borderStrong, color: palette.forest }}
+                >
+                  {loading
+                    ? 'Refreshing'
+                    : accessibleSummaryCards.length === 0
+                      ? 'No daily anchors visible'
+                      : `${completedCount} / ${accessibleSummaryCards.length} anchors captured`}
+                </div>
+              </div>
+
+              <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                {summaryCards.map((card) => (
+                  <div
+                    key={card.label}
+                    className="rounded-[24px] border p-5 shadow-sm"
+                    style={{
+                      borderColor: palette.border,
+                      backgroundColor: card.isAvailable
+                        ? palette.panelAlt
+                        : 'rgba(255,255,255,0.55)',
+                    }}
+                  >
+                    <div className="flex items-center justify-between gap-3">
+                      <div
+                        className="flex h-12 w-12 items-center justify-center rounded-2xl"
+                        style={{
+                          backgroundColor: palette.goldSoft,
+                          color: palette.forest,
+                        }}
+                      >
+                        <BaseIcon path={card.icon} size={24} />
+                      </div>
+                      <span
+                        className="rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em]"
+                        style={{
+                          color: card.isAvailable
+                            ? card.isComplete
+                              ? '#2F5A35'
+                              : palette.muted
+                            : palette.muted,
+                          backgroundColor: card.isAvailable && card.isComplete
+                            ? 'rgba(74, 103, 65, 0.12)'
+                            : 'rgba(201, 168, 76, 0.14)',
+                        }}
+                      >
+                        {card.isAvailable
+                          ? card.isComplete
+                            ? 'captured'
+                            : 'pending'
+                          : 'locked'}
+                      </span>
+                    </div>
+                    <h4
+                      className="mt-5 text-lg font-semibold"
+                      style={{ color: palette.charcoal }}
+                    >
+                      {card.label}
+                    </h4>
+                    <p className="mt-2 text-2xl font-semibold" style={{ color: palette.forest }}>
+                      {loading ? 'Loading…' : card.value}
+                    </p>
+                    <p className="mt-3 text-sm leading-6" style={{ color: palette.muted }}>
+                      {loading ? 'Refreshing this card...' : card.detail}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div
+              className="rounded-[28px] border p-6 shadow-sm"
+              style={{
+                borderColor: palette.borderStrong,
+                backgroundColor: palette.panelBg,
+              }}
+            >
+              <div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
+                <div>
+                  <h3
+                    className="text-2xl font-semibold"
+                    style={{ color: palette.charcoal }}
+                  >
+                    Recent health activity
+                  </h3>
+                  <p className="mt-2 text-sm leading-6" style={{ color: palette.body }}>
+                    A real timeline pulled from your existing hydration, mood,
+                    sleep, weight, goal, and condition records.
+                  </p>
+                </div>
+                <Link
+                  href="/daily-pulse"
+                  className="text-sm font-semibold"
+                  style={{ color: palette.forest }}
+                >
+                  Log something new →
+                </Link>
+              </div>
+
+              <div className="mt-6 grid gap-4 md:grid-cols-2">
+                {loading &&
+                  Array.from({ length: 4 }).map((_, index) => (
+                    <div
+                      key={`activity-skeleton-${index}`}
+                      className="min-h-[170px] rounded-2xl border p-5"
+                      style={{
+                        borderColor: palette.border,
+                        backgroundColor: 'rgba(255,255,255,0.72)',
+                      }}
+                    >
+                      <div
+                        className="h-4 w-24 rounded-full"
+                        style={{ backgroundColor: '#EFE3D2' }}
+                      />
+                      <div
+                        className="mt-4 h-7 w-3/4 rounded-full"
+                        style={{ backgroundColor: '#F3E9DA' }}
+                      />
+                      <div
+                        className="mt-3 h-4 w-1/2 rounded-full"
+                        style={{ backgroundColor: '#F3E9DA' }}
+                      />
+                      <div
+                        className="mt-8 h-4 w-2/3 rounded-full"
+                        style={{ backgroundColor: '#EFE3D2' }}
+                      />
+                    </div>
+                  ))}
+
+                {!loading && dashboardData.recentActivity.length === 0 && (
+                  <div
+                    className="rounded-2xl border px-5 py-6 text-sm leading-6 md:col-span-2"
+                    style={{
+                      borderColor: palette.border,
+                      backgroundColor: 'rgba(255,255,255,0.72)',
+                      color: palette.body,
+                    }}
+                  >
+                    There isn&apos;t recent activity to show yet. Start with one
+                    Daily Pulse check-in or continue onboarding so your home
+                    dashboard has something meaningful to reflect.
+                  </div>
+                )}
+
+                {!loading &&
+                  dashboardData.recentActivity.map((item) => {
+                    const route = activityRouteByKind[item.kind];
+
+                    return (
+                      <Link
+                        key={`${item.kind}-${item.id}`}
+                        href={`${route}/?id=${item.id}`}
+                        className="block rounded-2xl border p-5 transition hover:-translate-y-0.5"
+                        style={{
+                          borderColor: palette.border,
+                          backgroundColor: 'rgba(255,255,255,0.72)',
+                        }}
+                      >
+                        <div className="flex items-center justify-between gap-4">
+                          <div
+                            className="flex h-12 w-12 items-center justify-center rounded-2xl"
+                            style={{
+                              backgroundColor: palette.goldSoft,
+                              color: palette.forest,
+                            }}
+                          >
+                            <BaseIcon
+                              path={activityIconByKind[item.kind]}
+                              size={24}
+                            />
+                          </div>
+                          <span
+                            className="rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em]"
+                            style={{
+                              backgroundColor: palette.goldSoft,
+                              color: palette.forest,
+                            }}
+                          >
+                            {humanize(item.kind)}
+                          </span>
+                        </div>
+                        <div
+                          className="mt-5 text-lg font-semibold"
+                          style={{ color: palette.charcoal }}
+                        >
+                          {item.title}
+                        </div>
+                        <p className="mt-2 text-sm" style={{ color: palette.forest }}>
+                          {item.detail || 'Open the detail view for more context.'}
+                        </p>
+                        <p
+                          className="mt-4 text-xs font-semibold uppercase tracking-[0.18em]"
+                          style={{ color: '#8A7C67' }}
+                        >
+                          {formatDateTime(item.happened_at)}
+                        </p>
+                      </Link>
+                    );
+                  })}
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-6">
+            <div
+              className="rounded-[28px] border p-6 shadow-sm"
+              style={{
+                borderColor: palette.borderStrong,
+                backgroundColor: palette.panelBg,
+              }}
+            >
+              <div className="flex items-center gap-3">
+                <div
+                  className="flex h-12 w-12 items-center justify-center rounded-2xl"
+                  style={{ backgroundColor: palette.goldSoft, color: palette.forest }}
+                >
+                  <BaseIcon path={mdiTargetVariant} size={24} />
+                </div>
+                <div>
+                  <h3
+                    className="text-xl font-semibold"
+                    style={{ color: palette.charcoal }}
+                  >
+                    Current focus
+                  </h3>
+                  <p className="text-sm" style={{ color: palette.body }}>
+                    The goal shaping your home dashboard right now.
+                  </p>
+                </div>
+              </div>
+
+              {loading ? (
+                <p className="mt-5 text-sm" style={{ color: palette.body }}>
+                  Loading your current focus...
+                </p>
+              ) : !permissions.goalsRead ? (
+                <div
+                  className="mt-5 rounded-2xl border px-4 py-5 text-sm leading-6"
+                  style={{ borderColor: palette.border, color: palette.body }}
+                >
+                  Goal visibility is not enabled for your current role.
+                </div>
+              ) : dashboardData.latestGoal ? (
+                <>
+                  <div className="mt-5 flex items-start justify-between gap-4">
+                    <div>
+                      <div
+                        className="text-2xl font-semibold"
+                        style={{ color: palette.charcoal }}
+                      >
+                        {dashboardData.latestGoal.goal_type
+                          ? humanize(dashboardData.latestGoal.goal_type)
+                          : 'Primary goal'}
+                      </div>
+                      <p className="mt-2 text-sm leading-6" style={{ color: palette.body }}>
+                        {dashboardData.latestGoal.follow_up_answer
+                          ? truncateText(
+                              dashboardData.latestGoal.follow_up_answer,
+                              150,
+                            )
+                          : 'Add a richer follow-up note in the goal vault whenever you want more context here.'}
+                      </p>
+                    </div>
+                    <span
+                      className="rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em]"
+                      style={{
+                        color: dashboardData.latestGoal.is_active
+                          ? '#2F5A35'
+                          : palette.muted,
+                        backgroundColor: dashboardData.latestGoal.is_active
+                          ? 'rgba(74, 103, 65, 0.12)'
+                          : 'rgba(201, 168, 76, 0.14)',
+                      }}
+                    >
+                      {dashboardData.latestGoal.is_active ? 'active' : 'latest'}
+                    </span>
+                  </div>
+
+                  <div className="mt-5 grid gap-3 sm:grid-cols-2">
+                    <div
+                      className="rounded-2xl border px-4 py-4"
+                      style={{
+                        borderColor: palette.border,
+                        backgroundColor: 'rgba(255,255,255,0.72)',
+                      }}
+                    >
+                      <div
+                        className="text-xs font-semibold uppercase tracking-[0.18em]"
+                        style={{ color: palette.muted }}
+                      >
+                        Target date
+                      </div>
+                      <div className="mt-2 font-semibold" style={{ color: palette.forest }}>
+                        {formatDate(dashboardData.latestGoal.target_date)}
+                      </div>
+                    </div>
+                    <div
+                      className="rounded-2xl border px-4 py-4"
+                      style={{
+                        borderColor: palette.border,
+                        backgroundColor: 'rgba(255,255,255,0.72)',
+                      }}
+                    >
+                      <div
+                        className="text-xs font-semibold uppercase tracking-[0.18em]"
+                        style={{ color: palette.muted }}
+                      >
+                        Active goals total
+                      </div>
+                      <div className="mt-2 font-semibold" style={{ color: palette.forest }}>
+                        {dashboardData.activeGoalsCount}
+                      </div>
+                    </div>
+                  </div>
+
+                  <Link
+                    href="/goals/goals-list"
+                    className="mt-5 inline-flex items-center gap-2 text-sm font-semibold"
+                    style={{ color: palette.forest }}
+                  >
+                    Open goal vault
+                    <BaseIcon path={mdiArrowTopRight} size={16} />
+                  </Link>
+                </>
+              ) : (
+                <div
+                  className="mt-5 rounded-2xl border px-4 py-5 text-sm leading-6"
+                  style={{ borderColor: palette.border, color: palette.body }}
+                >
+                  No goal has been saved yet. Use onboarding or the goal vault to
+                  choose one clear north star for this dashboard.
+                  <div className="mt-4">
+                    <Link
+                      href="/onboarding"
+                      className="font-semibold"
+                      style={{ color: palette.forest }}
+                    >
+                      Choose your first goal →
+                    </Link>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div
+              className="rounded-[28px] border p-6 shadow-sm"
+              style={{
+                borderColor: palette.borderStrong,
+                backgroundColor: palette.panelBg,
+              }}
+            >
+              <div className="flex items-center gap-3">
+                <div
+                  className="flex h-12 w-12 items-center justify-center rounded-2xl"
+                  style={{ backgroundColor: palette.goldSoft, color: palette.forest }}
+                >
+                  <BaseIcon path={mdiLeafCircle} size={24} />
+                </div>
+                <div>
+                  <h3
+                    className="text-xl font-semibold"
+                    style={{ color: palette.charcoal }}
+                  >
+                    Health baseline snapshot
+                  </h3>
+                  <p className="text-sm" style={{ color: palette.body }}>
+                    Your most recent body and lifestyle baselines, surfaced for context.
+                  </p>
+                </div>
+              </div>
+
+              {loading ? (
+                <p className="mt-5 text-sm" style={{ color: palette.body }}>
+                  Loading your baseline snapshot...
+                </p>
+              ) : !permissions.physicalRead && !permissions.lifestyleRead ? (
+                <div
+                  className="mt-5 rounded-2xl border px-4 py-5 text-sm leading-6"
+                  style={{ borderColor: palette.border, color: palette.body }}
+                >
+                  Baseline visibility is not enabled for your current role.
+                </div>
+              ) : baselineHighlights.length === 0 && lifestyleHighlights.length === 0 ? (
+                <div
+                  className="mt-5 rounded-2xl border px-4 py-5 text-sm leading-6"
+                  style={{ borderColor: palette.border, color: palette.body }}
+                >
+                  Your body and lifestyle baseline still looks light. Continue
+                  onboarding to give future trends and reports stronger context.
+                </div>
+              ) : (
+                <div className="mt-5 space-y-4">
+                  {baselineHighlights.length > 0 && (
+                    <div>
+                      <div
+                        className="text-xs font-semibold uppercase tracking-[0.18em]"
+                        style={{ color: palette.muted }}
+                      >
+                        Body baseline
+                      </div>
+                      <div className="mt-3 grid gap-3 sm:grid-cols-2">
+                        {baselineHighlights.map((item) => (
+                          <div
+                            key={item.label}
+                            className="rounded-2xl border px-4 py-4"
+                            style={{
+                              borderColor: palette.border,
+                              backgroundColor: 'rgba(255,255,255,0.72)',
+                            }}
+                          >
+                            <div className="text-xs font-semibold uppercase tracking-[0.16em]" style={{ color: palette.muted }}>
+                              {item.label}
+                            </div>
+                            <div className="mt-2 font-semibold" style={{ color: palette.charcoal }}>
+                              {item.value}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {lifestyleHighlights.length > 0 && (
+                    <div>
+                      <div
+                        className="text-xs font-semibold uppercase tracking-[0.18em]"
+                        style={{ color: palette.muted }}
+                      >
+                        Lifestyle baseline
+                      </div>
+                      <div className="mt-3 grid gap-3 sm:grid-cols-2">
+                        {lifestyleHighlights.map((item) => (
+                          <div
+                            key={item.label}
+                            className="rounded-2xl border px-4 py-4"
+                            style={{
+                              borderColor: palette.border,
+                              backgroundColor: 'rgba(255,255,255,0.72)',
+                            }}
+                          >
+                            <div className="text-xs font-semibold uppercase tracking-[0.16em]" style={{ color: palette.muted }}>
+                              {item.label}
+                            </div>
+                            <div className="mt-2 font-semibold" style={{ color: palette.charcoal }}>
+                              {item.value}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  <Link
+                    href="/onboarding"
+                    className="inline-flex items-center gap-2 text-sm font-semibold"
+                    style={{ color: palette.forest }}
+                  >
+                    Update onboarding and baseline
+                    <BaseIcon path={mdiArrowTopRight} size={16} />
+                  </Link>
+                </div>
+              )}
+            </div>
+
+            <div
+              className="rounded-[28px] border p-6 shadow-sm"
+              style={{
+                borderColor: palette.borderStrong,
+                backgroundColor: palette.panelBg,
+              }}
+            >
+              <div className="flex items-center gap-3">
+                <div
+                  className="flex h-12 w-12 items-center justify-center rounded-2xl"
+                  style={{ backgroundColor: palette.goldSoft, color: palette.forest }}
+                >
+                  <BaseIcon path={mdiArrowTopRight} size={24} />
+                </div>
+                <div>
+                  <h3
+                    className="text-xl font-semibold"
+                    style={{ color: palette.charcoal }}
+                  >
+                    Next best actions
+                  </h3>
+                  <p className="text-sm" style={{ color: palette.body }}>
+                    Personalized shortcuts based on what your dashboard is missing.
+                  </p>
+                </div>
+              </div>
+
+              <div className="mt-5 space-y-3">
+                {nextBestActions.map((action) => (
+                  <Link
+                    key={`${action.href}-${action.title}`}
+                    href={action.href}
+                    className="block rounded-2xl border px-4 py-4 transition hover:-translate-y-0.5"
+                    style={{
+                      borderColor: palette.border,
+                      backgroundColor: 'rgba(255,255,255,0.72)',
+                    }}
+                  >
+                    <div className="flex items-start gap-4">
+                      <div
+                        className="mt-1 flex h-10 w-10 items-center justify-center rounded-2xl"
+                        style={{
+                          backgroundColor: palette.goldSoft,
+                          color: palette.forest,
+                        }}
+                      >
+                        <BaseIcon path={action.icon} size={20} />
+                      </div>
+                      <div>
+                        <div className="text-base font-semibold" style={{ color: palette.charcoal }}>
+                          {action.title}
+                        </div>
+                        <p className="mt-1 text-sm leading-6" style={{ color: palette.body }}>
+                          {action.description}
+                        </p>
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+
+            <div
+              className="rounded-[28px] border p-6 shadow-sm"
+              style={{
+                borderColor: palette.borderStrong,
+                backgroundColor: palette.panelBg,
+              }}
+            >
+              <div className="flex items-center gap-3">
+                <div
+                  className="flex h-12 w-12 items-center justify-center rounded-2xl"
+                  style={{ backgroundColor: palette.goldSoft, color: palette.forest }}
+                >
+                  <BaseIcon path={mdiHeartPulse} size={24} />
+                </div>
+                <div>
+                  <h3
+                    className="text-xl font-semibold"
+                    style={{ color: palette.charcoal }}
+                  >
+                    Care context
+                  </h3>
+                  <p className="text-sm" style={{ color: palette.body }}>
+                    The latest condition context currently visible on your account.
+                  </p>
+                </div>
+              </div>
+
+              {loading ? (
+                <p className="mt-5 text-sm" style={{ color: palette.body }}>
+                  Loading your care context...
+                </p>
+              ) : !permissions.conditionsRead ? (
+                <div
+                  className="mt-5 rounded-2xl border px-4 py-5 text-sm leading-6"
+                  style={{ borderColor: palette.border, color: palette.body }}
+                >
+                  Condition visibility is not enabled for your current role.
+                </div>
+              ) : dashboardData.latestCondition ? (
+                <>
+                  <div className="mt-5 flex items-start justify-between gap-4">
+                    <div>
+                      <div className="text-2xl font-semibold" style={{ color: palette.charcoal }}>
+                        {dashboardData.latestCondition.condition_name || 'Condition'}
+                      </div>
+                      <p className="mt-2 text-sm leading-6" style={{ color: palette.body }}>
+                        {dashboardData.latestCondition.management_plan
+                          ? truncateText(
+                              dashboardData.latestCondition.management_plan,
+                              140,
+                            )
+                          : 'Add a management plan in the conditions module when you want more clinical detail here.'}
+                      </p>
+                    </div>
+                    <span
+                      className="rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em]"
+                      style={{
+                        color: palette.forest,
+                        backgroundColor: 'rgba(74, 103, 65, 0.12)',
+                      }}
+                    >
+                      {dashboardData.latestCondition.status
+                        ? humanize(dashboardData.latestCondition.status)
+                        : 'Tracked'}
+                    </span>
+                  </div>
+
+                  <div className="mt-5 grid gap-3 sm:grid-cols-2">
+                    <div
+                      className="rounded-2xl border px-4 py-4"
+                      style={{
+                        borderColor: palette.border,
+                        backgroundColor: 'rgba(255,255,255,0.72)',
+                      }}
+                    >
+                      <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: palette.muted }}>
+                        Diagnosing doctor
+                      </div>
+                      <div className="mt-2 font-semibold" style={{ color: palette.forest }}>
+                        {dashboardData.latestCondition.diagnosing_doctor || 'Not recorded'}
+                      </div>
+                    </div>
+                    <div
+                      className="rounded-2xl border px-4 py-4"
+                      style={{
+                        borderColor: palette.border,
+                        backgroundColor: 'rgba(255,255,255,0.72)',
+                      }}
+                    >
+                      <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: palette.muted }}>
+                        Last updated
+                      </div>
+                      <div className="mt-2 font-semibold" style={{ color: palette.forest }}>
+                        {formatDateTime(dashboardData.latestCondition.updated_at)}
+                      </div>
+                    </div>
+                  </div>
+
+                  <Link
+                    href="/conditions/conditions-list"
+                    className="mt-5 inline-flex items-center gap-2 text-sm font-semibold"
+                    style={{ color: palette.forest }}
+                  >
+                    Open conditions
+                    <BaseIcon path={mdiArrowTopRight} size={16} />
+                  </Link>
+                </>
+              ) : (
+                <div
+                  className="mt-5 rounded-2xl border px-4 py-5 text-sm leading-6"
+                  style={{ borderColor: palette.border, color: palette.body }}
+                >
+                  No conditions are currently tracked on this account. That is
+                  completely fine if there is nothing clinically relevant to add.
+                </div>
+              )}
+            </div>
+          </div>
         </div>
       </SectionMain>
     </>
-  )
+  );
 }
 
-Dashboard.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
-}
+DashboardPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
 
-export default Dashboard
+export default DashboardPage;
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 69008d1..ed29694 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,166 +1,399 @@
-
-import React, { useEffect, useState } from 'react';
-import type { ReactElement } from 'react';
+import {
+  mdiArrowTopRight,
+  mdiCheckCircleOutline,
+  mdiHeartPulse,
+  mdiLeafCircle,
+  mdiTargetVariant,
+  mdiTrophyOutline,
+  mdiWaterOutline,
+  mdiWeatherNight,
+} from '@mdi/js';
 import Head from 'next/head';
 import Link from 'next/link';
-import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
-import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
+import type { ReactElement } from 'react';
+import BaseIcon from '../components/BaseIcon';
 import { getPageTitle } from '../config';
-import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+import LayoutGuest from '../layouts/Guest';
 
+const promiseCards = [
+  {
+    title: 'Daily Pulse check-ins',
+    description: 'Save water, mood, sleep, and weight in one elegant flow that already connects to the app’s deeper record screens.',
+    icon: mdiHeartPulse,
+  },
+  {
+    title: 'Premium daily ring',
+    description: 'Get a calm summary of what has been captured today, with a clear score that encourages consistency without overwhelm.',
+    icon: mdiTrophyOutline,
+  },
+  {
+    title: 'Goals in context',
+    description: 'Keep active goals visible beside today’s inputs so actions feel connected to long-term outcomes.',
+    icon: mdiTargetVariant,
+  },
+];
+
+const featureChips = [
+  'Fitness',
+  'Nutrition',
+  'Medical',
+  'Mental Wellness',
+  'Sleep',
+  'Hydration',
+  'Longevity',
+  'Family & Teams',
+  'Health Vault',
+  'Reports & Exports',
+];
+
+const workflowSteps = [
+  {
+    step: '01',
+    title: 'Capture your essentials',
+    description: 'Log hydration, mood, sleep, and weight from one mobile-first workspace.',
+    icon: mdiWaterOutline,
+  },
+  {
+    step: '02',
+    title: 'See your score instantly',
+    description: 'The Daily Pulse ring turns raw logging into a clear signal for the day.',
+    icon: mdiCheckCircleOutline,
+  },
+  {
+    step: '03',
+    title: 'Drill into full records',
+    description: 'Jump directly into detailed CRUD screens for trends, edits, exports, and history.',
+    icon: mdiArrowTopRight,
+  },
+];
 
 export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('video');
-    const [contentPosition, setContentPosition] = useState('right');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'APEX BRAIN'
-
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
-
   return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
+    <>
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('APEX BRAIN')}</title>
       </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your APEX BRAIN app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
+      <div style={{ backgroundColor: '#F5F0E8', color: '#1C1C1C' }}>
+        <header className="relative overflow-hidden border-b" style={{ borderColor: '#E1D6C5' }}>
+          <div
+            className="absolute inset-x-0 top-0 h-[28rem]"
+            style={{
+              background:
+                'radial-gradient(circle at top left, rgba(201,168,76,0.18) 0%, rgba(201,168,76,0) 48%), radial-gradient(circle at top right, rgba(74,103,65,0.16) 0%, rgba(74,103,65,0) 44%)',
+            }}
+          />
+          <div className="relative mx-auto max-w-7xl px-6 py-6 lg:px-10">
+            <nav className="flex flex-wrap items-center justify-between gap-4">
+              <Link href="/" className="inline-flex items-center gap-3 text-lg font-semibold tracking-[0.08em]" style={{ color: '#1C1C1C' }}>
+                <span
+                  className="flex h-12 w-12 items-center justify-center rounded-2xl"
+                  style={{ backgroundColor: '#4A6741', color: '#F5F0E8' }}
+                >
+                  <BaseIcon path={mdiTrophyOutline} size={24} />
+                </span>
+                APEX BRAIN
+              </Link>
+
+              <div className="flex flex-wrap items-center gap-3 text-sm font-semibold">
+                <Link href="/daily-pulse" className="rounded-full border px-4 py-2 transition hover:-translate-y-0.5" style={{ borderColor: '#D6C8B4', color: '#4A6741' }}>
+                  Daily Pulse
+                </Link>
+                <Link href="/onboarding" className="rounded-full border px-4 py-2 transition hover:-translate-y-0.5" style={{ borderColor: '#D6C8B4', color: '#4A6741' }}>
+                  Onboarding
+                </Link>
+                <Link href="/dashboard" className="rounded-full border px-4 py-2 transition hover:-translate-y-0.5" style={{ borderColor: '#D6C8B4', color: '#4A6741' }}>
+                  Dashboard
+                </Link>
+                <Link href="/login" className="rounded-full px-4 py-2 text-white transition hover:-translate-y-0.5" style={{ backgroundColor: '#4A6741' }}>
+                  Login
+                </Link>
+              </div>
+            </nav>
+
+            <div className="grid gap-12 pb-14 pt-12 lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:pb-20 lg:pt-20">
+              <div>
+                <div
+                  className="mb-5 inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold"
+                  style={{ borderColor: '#D6C8B4', color: '#4A6741', backgroundColor: 'rgba(255,255,255,0.56)' }}
+                >
+                  <BaseIcon path={mdiLeafCircle} size={18} />
+                  Your Complete Health Operating System
+                </div>
+                <h1 className="max-w-3xl text-5xl font-semibold tracking-tight md:text-6xl" style={{ color: '#1C1C1C' }}>
+                  The warm, premium wellness home for your entire life.
+                </h1>
+                <p className="mt-6 max-w-2xl text-lg leading-8" style={{ color: '#4C5544' }}>
+                  APEX BRAIN brings health, fitness, medical tracking, habits, sleep, hydration, and longevity into one calm, trustworthy experience — with a polished first slice you can use right now.
+                </p>
+
+                <div className="mt-8 flex flex-wrap items-center gap-4">
+                  <Link
+                    href="/register"
+                    className="inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-semibold text-white transition hover:-translate-y-0.5"
+                    style={{ backgroundColor: '#4A6741' }}
+                  >
+                    Create My Profile
+                  </Link>
+                  <Link
+                    href="/login"
+                    className="inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-semibold transition hover:-translate-y-0.5"
+                    style={{ borderColor: '#D6C8B4', color: '#4A6741', backgroundColor: 'rgba(255,255,255,0.66)' }}
+                  >
+                    I Already Have an Account
+                  </Link>
+                  <Link href="/onboarding" className="text-sm font-semibold" style={{ color: '#4A6741' }}>
+                    Continue guided onboarding →
+                  </Link>
+                </div>
+
+                <div className="mt-10 grid gap-4 sm:grid-cols-3">
+                  <div className="rounded-[24px] border p-4" style={{ borderColor: '#E1D6C5', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                    <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: '#7E725E' }}>
+                      Aesthetics
+                    </div>
+                    <p className="mt-3 text-sm leading-6" style={{ color: '#4C5544' }}>
+                      Cream backgrounds, forest green accents, and soft gold highlights for a grounded, luxury feel.
+                    </p>
+                  </div>
+                  <div className="rounded-[24px] border p-4" style={{ borderColor: '#E1D6C5', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                    <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: '#7E725E' }}>
+                      Mobile-first
+                    </div>
+                    <p className="mt-3 text-sm leading-6" style={{ color: '#4C5544' }}>
+                      Designed to feel just as refined on iPhone, Android, and desktop screens.
+                    </p>
+                  </div>
+                  <div className="rounded-[24px] border p-4" style={{ borderColor: '#E1D6C5', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                    <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: '#7E725E' }}>
+                      First live slice
+                    </div>
+                    <p className="mt-3 text-sm leading-6" style={{ color: '#4C5544' }}>
+                      Daily Pulse is implemented now as the first real workflow, not just a mockup.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="lg:justify-self-end">
+                <div className="mx-auto max-w-md rounded-[34px] border p-4 shadow-[0_30px_80px_rgba(74,103,65,0.12)]" style={{ borderColor: '#D8CBB7', backgroundColor: 'rgba(255,255,255,0.7)' }}>
+                  <div className="rounded-[30px] border p-5" style={{ borderColor: '#E1D6C5', backgroundColor: '#FFF9F0' }}>
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: '#7E725E' }}>
+                          Daily Pulse preview
+                        </div>
+                        <div className="mt-2 text-2xl font-semibold" style={{ color: '#1C1C1C' }}>
+                          75 / 100 today
+                        </div>
+                      </div>
+                      <span className="rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em]" style={{ backgroundColor: 'rgba(74,103,65,0.12)', color: '#2F5A35' }}>
+                        live now
+                      </span>
+                    </div>
+
+                    <div className="mt-6 grid gap-3 sm:grid-cols-2">
+                      <div className="rounded-[22px] border p-4" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                        <div className="flex items-center gap-2 text-sm font-semibold" style={{ color: '#4A6741' }}>
+                          <BaseIcon path={mdiWaterOutline} size={20} />
+                          Hydration
+                        </div>
+                        <div className="mt-3 text-2xl font-semibold">1,250 ml</div>
+                        <p className="mt-2 text-sm" style={{ color: '#6A6A55' }}>2 entries captured today</p>
+                      </div>
+                      <div className="rounded-[22px] border p-4" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                        <div className="flex items-center gap-2 text-sm font-semibold" style={{ color: '#4A6741' }}>
+                          <BaseIcon path={mdiWeatherNight} size={20} />
+                          Sleep
+                        </div>
+                        <div className="mt-3 text-2xl font-semibold">7h 38m</div>
+                        <p className="mt-2 text-sm" style={{ color: '#6A6A55' }}>Quality 8 / 10</p>
+                      </div>
+                      <div className="rounded-[22px] border p-4" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                        <div className="flex items-center gap-2 text-sm font-semibold" style={{ color: '#4A6741' }}>
+                          <BaseIcon path={mdiHeartPulse} size={20} />
+                          Mood
+                        </div>
+                        <div className="mt-3 text-2xl font-semibold">8 / 10</div>
+                        <p className="mt-2 text-sm" style={{ color: '#6A6A55' }}>Calm • Focused • Optimistic</p>
+                      </div>
+                      <div className="rounded-[22px] border p-4" style={{ borderColor: '#E5DAC9', backgroundColor: 'rgba(255,255,255,0.72)' }}>
+                        <div className="flex items-center gap-2 text-sm font-semibold" style={{ color: '#4A6741' }}>
+                          <BaseIcon path={mdiTargetVariant} size={20} />
+                          Goal focus
+                        </div>
+                        <div className="mt-3 text-lg font-semibold">Build better daily habits</div>
+                        <p className="mt-2 text-sm" style={{ color: '#6A6A55' }}>One ritual connected to the rest of the app.</p>
+                      </div>
+                    </div>
+
+                    <Link href="/daily-pulse" className="mt-5 inline-flex items-center gap-2 text-sm font-semibold" style={{ color: '#4A6741' }}>
+                      Open the Daily Pulse slice
+                      <BaseIcon path={mdiArrowTopRight} size={18} />
+                    </Link>
+                  </div>
+                </div>
+              </div>
             </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
+          </div>
+        </header>
 
-            </BaseButtons>
-        </CardBox>
-        </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
+        <main>
+          <section className="mx-auto max-w-7xl px-6 py-16 lg:px-10 lg:py-20">
+            <div className="max-w-3xl">
+              <div className="text-sm font-semibold uppercase tracking-[0.2em]" style={{ color: '#7E725E' }}>
+                FIRST DELIVERY
+              </div>
+              <h2 className="mt-4 text-4xl font-semibold tracking-tight" style={{ color: '#1C1C1C' }}>
+                A complete first win, not just a landing page.
+              </h2>
+              <p className="mt-4 text-lg leading-8" style={{ color: '#4C5544' }}>
+                The initial APEX BRAIN experience is centered around a premium Daily Pulse workflow: create inputs, see a summary ring, review recent activity, and jump into full detail screens.
+              </p>
+            </div>
 
-    </div>
+            <div className="mt-10 grid gap-5 lg:grid-cols-3">
+              {promiseCards.map((card) => (
+                <div key={card.title} className="rounded-[28px] border p-6 shadow-sm" style={{ borderColor: '#E1D6C5', backgroundColor: '#FFF9F0' }}>
+                  <div className="flex h-14 w-14 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                    <BaseIcon path={card.icon} size={26} />
+                  </div>
+                  <h3 className="mt-5 text-xl font-semibold" style={{ color: '#1C1C1C' }}>
+                    {card.title}
+                  </h3>
+                  <p className="mt-3 text-sm leading-7" style={{ color: '#4C5544' }}>
+                    {card.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="border-y" style={{ borderColor: '#E1D6C5', backgroundColor: '#EFE6DB' }}>
+            <div className="mx-auto max-w-7xl px-6 py-16 lg:px-10 lg:py-20">
+              <div className="grid gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
+                <div>
+                  <div className="text-sm font-semibold uppercase tracking-[0.2em]" style={{ color: '#7E725E' }}>
+                    How the slice works
+                  </div>
+                  <h2 className="mt-4 text-4xl font-semibold tracking-tight" style={{ color: '#1C1C1C' }}>
+                    One calm ritual that already feels like a real health product.
+                  </h2>
+                  <p className="mt-4 text-lg leading-8" style={{ color: '#4C5544' }}>
+                    Instead of scattering the experience across dozens of unfinished screens, the first release centers attention on the one journey users repeat every day.
+                  </p>
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-3">
+                  {workflowSteps.map((item) => (
+                    <div key={item.step} className="rounded-[28px] border p-5" style={{ borderColor: '#D6C8B4', backgroundColor: '#FFF9F0' }}>
+                      <div className="flex items-center justify-between">
+                        <div className="text-sm font-semibold uppercase tracking-[0.18em]" style={{ color: '#7E725E' }}>
+                          {item.step}
+                        </div>
+                        <div className="flex h-10 w-10 items-center justify-center rounded-2xl" style={{ backgroundColor: '#F1E7D8', color: '#4A6741' }}>
+                          <BaseIcon path={item.icon} size={20} />
+                        </div>
+                      </div>
+                      <h3 className="mt-5 text-lg font-semibold" style={{ color: '#1C1C1C' }}>
+                        {item.title}
+                      </h3>
+                      <p className="mt-3 text-sm leading-7" style={{ color: '#4C5544' }}>
+                        {item.description}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section className="mx-auto max-w-7xl px-6 py-16 lg:px-10 lg:py-20">
+            <div className="max-w-3xl">
+              <div className="text-sm font-semibold uppercase tracking-[0.2em]" style={{ color: '#7E725E' }}>
+                What comes next
+              </div>
+              <h2 className="mt-4 text-4xl font-semibold tracking-tight" style={{ color: '#1C1C1C' }}>
+                The foundation is designed to expand into the full APEX BRAIN vision.
+              </h2>
+              <p className="mt-4 text-lg leading-8" style={{ color: '#4C5544' }}>
+                The app already has the building blocks for a much broader health platform. Daily Pulse is the first polished slice that can grow into the complete ecosystem below.
+              </p>
+            </div>
+
+            <div className="mt-8 flex flex-wrap gap-3">
+              {featureChips.map((chip) => (
+                <span key={chip} className="rounded-full border px-4 py-2 text-sm font-semibold" style={{ borderColor: '#D6C8B4', color: '#4A6741', backgroundColor: '#FFF9F0' }}>
+                  {chip}
+                </span>
+              ))}
+            </div>
+
+            <div className="mt-10 rounded-[32px] border p-8" style={{ borderColor: '#D8CBB7', backgroundColor: '#FFF9F0' }}>
+              <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+                <div>
+                  <div className="text-sm font-semibold uppercase tracking-[0.2em]" style={{ color: '#7E725E' }}>
+                    Ready to continue?
+                  </div>
+                  <h3 className="mt-3 text-3xl font-semibold" style={{ color: '#1C1C1C' }}>
+                    Start with the branded slice, then tell us which area should expand next.
+                  </h3>
+                  <p className="mt-3 max-w-2xl text-base leading-7" style={{ color: '#4C5544' }}>
+                    You can create an account, start the guided onboarding flow, sign in to the admin interface, or go straight to Daily Pulse once your setup feels right.
+                  </p>
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  <Link
+                    href="/onboarding"
+                    className="inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-semibold text-white transition hover:-translate-y-0.5"
+                    style={{ backgroundColor: '#4A6741' }}
+                  >
+                    Start onboarding
+                  </Link>
+                  <Link
+                    href="/daily-pulse"
+                    className="inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-semibold transition hover:-translate-y-0.5"
+                    style={{ borderColor: '#D6C8B4', color: '#4A6741' }}
+                  >
+                    Open Daily Pulse
+                  </Link>
+                  <Link
+                    href="/login"
+                    className="inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-semibold transition hover:-translate-y-0.5"
+                    style={{ borderColor: '#D6C8B4', color: '#4A6741' }}
+                  >
+                    Admin Login
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+
+        <footer className="border-t" style={{ borderColor: '#E1D6C5' }}>
+          <div className="mx-auto flex max-w-7xl flex-col gap-3 px-6 py-6 text-sm lg:flex-row lg:items-center lg:justify-between lg:px-10" style={{ color: '#6A6A55' }}>
+            <p>© 2026 APEX BRAIN. Calm, premium health management in one place.</p>
+            <div className="flex flex-wrap items-center gap-4 font-semibold">
+              <Link href="/register" style={{ color: '#4A6741' }}>
+                Create profile
+              </Link>
+              <Link href="/login" style={{ color: '#4A6741' }}>
+                Login
+              </Link>
+              <Link href="/onboarding" style={{ color: '#4A6741' }}>
+                Onboarding
+              </Link>
+              <Link href="/dashboard" style={{ color: '#4A6741' }}>
+                Dashboard
+              </Link>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </>
   );
 }
 
 Starter.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
 };
-
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index e16bd18..edde696 100644
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -21,6 +21,7 @@ import { useAppDispatch, useAppSelector } from '../stores/hooks';
 import Link from 'next/link';
 import {toast, ToastContainer} from "react-toastify";
 import { getPexelsImage, getPexelsVideo } from '../helpers/pexels'
+import { hasCompletedApexOnboarding } from '../helpers/apexOnboarding';
 
 export default function Login() {
   const router = useRouter();
@@ -64,10 +65,15 @@ export default function Login() {
   }, [token, dispatch]);
   // Redirect to dashboard if user is logged in
   useEffect(() => {
-    if (currentUser?.id) {
-      router.push('/dashboard');
+    if (!currentUser?.id) {
+      return;
     }
-  }, [currentUser?.id, router]);
+
+    const shouldStartOnboarding =
+      !hasCompletedApexOnboarding(currentUser.id) && !currentUser.firstName;
+
+    router.push(shouldStartOnboarding ? '/onboarding' : '/dashboard');
+  }, [currentUser?.firstName, currentUser?.id, router]);
   // Show error message if there is one
   useEffect(() => {
     if (errorMessage){
diff --git a/frontend/src/pages/onboarding.tsx b/frontend/src/pages/onboarding.tsx
new file mode 100644
index 0000000..93a74d8
--- /dev/null
+++ b/frontend/src/pages/onboarding.tsx
@@ -0,0 +1,1626 @@
+import {
+  mdiAccount,
+  mdiCheckCircleOutline,
+  mdiChartTimelineVariant,
+  mdiHeartPulse,
+  mdiLeafCircle,
+  mdiTargetVariant,
+} from '@mdi/js';
+import axios from 'axios';
+import Head from 'next/head';
+import Link from 'next/link';
+import React, { useEffect, useMemo, useState } from 'react';
+import type { ReactElement } from 'react';
+import BaseButton from '../components/BaseButton';
+import BaseIcon from '../components/BaseIcon';
+import CardBox from '../components/CardBox';
+import FormField from '../components/FormField';
+import NotificationBar from '../components/NotificationBar';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+import {
+  type ApexOnboardingRecordIds,
+  hasCompletedApexOnboarding,
+  markApexOnboardingCompleted,
+  readApexOnboardingDraft,
+  saveApexOnboardingDraft,
+} from '../helpers/apexOnboarding';
+import { humanize } from '../helpers/humanize';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import { findMe } from '../stores/authSlice';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+
+type FeedbackState = {
+  color: 'success' | 'danger';
+  message: string;
+} | null;
+
+type PhysicalRecord = {
+  id: string;
+  height_cm?: number | string | null;
+  weight_kg?: number | string | null;
+  dominant_hand?: string | null;
+  blood_type?: string | null;
+  body_frame_size?: string | null;
+};
+
+type LifestyleRecord = {
+  id: string;
+  typical_bedtime?: string | null;
+  typical_wake_time?: string | null;
+  caffeine_servings_per_day?: number | null;
+  avg_daily_steps_estimate?: number | null;
+  typical_stress_level?: number | null;
+  currently_exercises?: boolean | null;
+  diet_pattern?: string | null;
+  alcohol_use?: string | null;
+  tobacco_nicotine_use?: string | null;
+};
+
+type GoalRecord = {
+  id: string;
+  goal_type?: string | null;
+  target_date?: string | null;
+  follow_up_answer?: string | null;
+};
+
+type ConditionRecord = {
+  id: string;
+  condition_name?: string | null;
+  status?: string | null;
+  diagnosing_doctor?: string | null;
+  management_plan?: string | null;
+};
+
+type OnboardingFormState = {
+  firstName: string;
+  lastName: string;
+  phoneNumber: string;
+  email: string;
+  heightCm: string;
+  weightKg: string;
+  dominantHand: string;
+  bloodType: string;
+  bodyFrameSize: string;
+  typicalBedtime: string;
+  typicalWakeTime: string;
+  caffeineServingsPerDay: string;
+  avgDailyStepsEstimate: string;
+  typicalStressLevel: string;
+  currentlyExercises: string;
+  dietPattern: string;
+  alcoholUse: string;
+  tobaccoNicotineUse: string;
+  goalType: string;
+  goalTargetDate: string;
+  goalFollowUpAnswer: string;
+  conditionName: string;
+  conditionStatus: string;
+  conditionDoctor: string;
+  conditionPlan: string;
+};
+
+type StepDefinition = {
+  key: string;
+  title: string;
+  eyebrow: string;
+  description: string;
+  icon: string;
+};
+
+const palette = {
+  pageBg: '#F5F0E8',
+  panelBg: '#FBF7F0',
+  panelAlt: '#FFF9F0',
+  border: '#E1D6C5',
+  borderStrong: '#D6C8B4',
+  forest: '#4A6741',
+  forestSoft: '#EDF4EA',
+  charcoal: '#1C1C1C',
+  body: '#4C5544',
+  muted: '#7E725E',
+  gold: '#C9A84C',
+  goldSoft: 'rgba(201,168,76,0.16)',
+};
+
+const steps: StepDefinition[] = [
+  {
+    key: 'identity',
+    eyebrow: 'Step 1',
+    title: 'Make APEX BRAIN feel personal',
+    description: 'Set the name and contact details that will appear throughout your home, reports, and profile.',
+    icon: mdiAccount,
+  },
+  {
+    key: 'physical',
+    eyebrow: 'Step 2',
+    title: 'Capture your body baseline',
+    description: 'Start with a few body markers so future trends have context from day one.',
+    icon: mdiHeartPulse,
+  },
+  {
+    key: 'lifestyle',
+    eyebrow: 'Step 3',
+    title: 'Understand your everyday rhythm',
+    description: 'Tell the app how you typically sleep, move, and recover so reminders and reviews feel grounded.',
+    icon: mdiLeafCircle,
+  },
+  {
+    key: 'goal',
+    eyebrow: 'Step 4',
+    title: 'Choose your main health focus',
+    description: 'Pick one primary goal so Daily Pulse and your deeper modules have a clear north star.',
+    icon: mdiTargetVariant,
+  },
+  {
+    key: 'context',
+    eyebrow: 'Step 5',
+    title: 'Add health context if it matters today',
+    description: 'Optional condition notes help your future logs and reports stay clinically useful.',
+    icon: mdiChartTimelineVariant,
+  },
+];
+
+const dominantHandOptions = ['left', 'right', 'ambidextrous'];
+const bloodTypeOptions = ['a_plus', 'a_minus', 'b_plus', 'b_minus', 'ab_plus', 'ab_minus', 'o_plus', 'o_minus', 'unknown'];
+const bodyFrameOptions = ['small', 'medium', 'large', 'unknown'];
+const dietPatternOptions = [
+  'omnivore',
+  'vegetarian',
+  'vegan',
+  'pescatarian',
+  'keto',
+  'paleo',
+  'mediterranean',
+  'halal',
+  'kosher',
+  'gluten_free',
+  'dairy_free',
+  'low_fodmap',
+  'other',
+];
+const alcoholUseOptions = ['never', 'social', 'weekly', 'daily', 'trying_to_quit'];
+const tobaccoUseOptions = ['never', 'ex_smoker', 'current_smoker', 'vaper', 'chewing_tobacco'];
+const goalTypeOptions = [
+  'lose_body_fat',
+  'build_muscle_mass',
+  'improve_cardiovascular_fitness',
+  'increase_flexibility_mobility',
+  'improve_sleep_quality',
+  'reduce_stress_anxiety',
+  'manage_chronic_condition_better',
+  'improve_mental_health',
+  'optimise_nutrition',
+  'improve_gut_health',
+  'improve_hormonal_balance',
+  'increase_energy_levels',
+  'longevity_anti_ageing',
+  'athletic_performance',
+  'post_surgery_recovery',
+  'pregnancy_preparation',
+  'postpartum_recovery',
+  'improve_sexual_health',
+  'improve_fertility',
+  'quit_smoking_or_alcohol',
+  'build_better_daily_habits',
+  'improve_cognitive_performance',
+  'support_family_member_health',
+];
+const conditionStatusOptions = ['active', 'in_remission', 'resolved'];
+
+const moduleLinks = [
+  {
+    href: '/profile',
+    label: 'Profile',
+    description: 'Review your personal identity card and account details.',
+  },
+  {
+    href: '/user_physical_baselines/user_physical_baselines-list',
+    label: 'Body baseline',
+    description: 'See the baseline metrics this setup writes into.',
+  },
+  {
+    href: '/user_lifestyle_baselines/user_lifestyle_baselines-list',
+    label: 'Lifestyle baseline',
+    description: 'Open your everyday sleep, stress, and habit baseline.',
+  },
+  {
+    href: '/goals/goals-list',
+    label: 'Goal vault',
+    description: 'Continue shaping your active goals and target dates.',
+  },
+  {
+    href: '/conditions/conditions-list',
+    label: 'Conditions',
+    description: 'Keep optional condition notes doctor-ready from the start.',
+  },
+  {
+    href: '/daily-pulse',
+    label: 'Daily Pulse',
+    description: 'Use your newly personalized check-in experience.',
+  },
+];
+
+function createEmptyForm(email = ''): OnboardingFormState {
+  return {
+    firstName: '',
+    lastName: '',
+    phoneNumber: '',
+    email,
+    heightCm: '',
+    weightKg: '',
+    dominantHand: '',
+    bloodType: '',
+    bodyFrameSize: '',
+    typicalBedtime: '',
+    typicalWakeTime: '',
+    caffeineServingsPerDay: '',
+    avgDailyStepsEstimate: '',
+    typicalStressLevel: '',
+    currentlyExercises: '',
+    dietPattern: '',
+    alcoholUse: '',
+    tobaccoNicotineUse: '',
+    goalType: '',
+    goalTargetDate: '',
+    goalFollowUpAnswer: '',
+    conditionName: '',
+    conditionStatus: '',
+    conditionDoctor: '',
+    conditionPlan: '',
+  };
+}
+
+function asString(value: unknown) {
+  if (value === null || value === undefined) {
+    return '';
+  }
+
+  return String(value);
+}
+
+function toDateInputValue(value?: string | null) {
+  if (!value) {
+    return '';
+  }
+
+  return value.slice(0, 10);
+}
+
+function toYesNoValue(value?: boolean | null) {
+  if (value === true) {
+    return 'yes';
+  }
+
+  if (value === false) {
+    return 'no';
+  }
+
+  return '';
+}
+
+function trimmedValue(value: string) {
+  return value.trim();
+}
+
+function toNumberOrUndefined(value: string) {
+  if (value.trim() === '') {
+    return undefined;
+  }
+
+  const parsedValue = Number(value);
+  return Number.isNaN(parsedValue) ? undefined : parsedValue;
+}
+
+async function fetchLatestRecordForUser<T>(endpoint: string, userId: string) {
+  const response = await axios.get(
+    `/${endpoint}?page=0&limit=1&sort=desc&field=createdAt&user=${userId}`,
+  );
+
+  if (!Array.isArray(response.data?.rows)) {
+    return null;
+  }
+
+  return (response.data.rows[0] ?? null) as T | null;
+}
+
+async function fetchRecordById<T>(endpoint: string, id?: string) {
+  if (!id) {
+    return null;
+  }
+
+  const response = await axios.get(`/${endpoint}/${id}`);
+  return response.data as T;
+}
+
+function entityHasValues(
+  payload: Record<string, unknown>,
+  ignoredKeys: string[] = ['user', 'is_active'],
+) {
+  return Object.entries(payload).some(([key, value]) => {
+    if (ignoredKeys.includes(key)) {
+      return false;
+    }
+
+    return value !== undefined && value !== null && value !== '';
+  });
+}
+
+function FieldError({ error }: { error?: string }) {
+  if (!error) {
+    return null;
+  }
+
+  return <p className="mt-2 text-sm font-medium text-red-600">{error}</p>;
+}
+
+export default function OnboardingPage() {
+  const dispatch = useAppDispatch();
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const [activeStep, setActiveStep] = useState(0);
+  const [formState, setFormState] = useState<OnboardingFormState>(createEmptyForm());
+  const [recordIds, setRecordIds] = useState<ApexOnboardingRecordIds>({});
+  const [feedback, setFeedback] = useState<FeedbackState>(null);
+  const [fieldErrors, setFieldErrors] = useState<
+    Partial<Record<keyof OnboardingFormState, string>>
+  >({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [isReadyForAutosave, setIsReadyForAutosave] = useState(false);
+  const [draftMeta, setDraftMeta] = useState<{
+    lastSavedAt?: string;
+    completedAt?: string;
+  }>({});
+
+  const completionPercent = Math.round(((activeStep + 1) / steps.length) * 100);
+  const hasCompletedOnboarding = Boolean(draftMeta.completedAt) || hasCompletedApexOnboarding(currentUser?.id);
+
+  useEffect(() => {
+    if (!currentUser?.id) {
+      return;
+    }
+
+    let isMounted = true;
+
+    const loadOnboarding = async () => {
+      setLoading(true);
+      setFeedback(null);
+      setIsReadyForAutosave(false);
+
+      const draft = readApexOnboardingDraft<OnboardingFormState>(currentUser.id);
+      const draftRecordIds = draft?.recordIds ?? {};
+
+      const defaultState = createEmptyForm(currentUser.email ?? '');
+      defaultState.firstName = currentUser.firstName ?? '';
+      defaultState.lastName = currentUser.lastName ?? '';
+      defaultState.phoneNumber = currentUser.phoneNumber ?? '';
+
+      const loadResults = await Promise.allSettled([
+        draftRecordIds.physicalId
+          ? fetchRecordById<PhysicalRecord>('user_physical_baselines', draftRecordIds.physicalId)
+          : fetchLatestRecordForUser<PhysicalRecord>('user_physical_baselines', currentUser.id),
+        draftRecordIds.lifestyleId
+          ? fetchRecordById<LifestyleRecord>('user_lifestyle_baselines', draftRecordIds.lifestyleId)
+          : fetchLatestRecordForUser<LifestyleRecord>('user_lifestyle_baselines', currentUser.id),
+        draftRecordIds.goalId
+          ? fetchRecordById<GoalRecord>('goals', draftRecordIds.goalId)
+          : Promise.resolve(null),
+        draftRecordIds.conditionId
+          ? fetchRecordById<ConditionRecord>('conditions', draftRecordIds.conditionId)
+          : Promise.resolve(null),
+      ]);
+
+      if (!isMounted) {
+        return;
+      }
+
+      const [physicalResult, lifestyleResult, goalResult, conditionResult] = loadResults;
+      const loadErrors = loadResults.filter((result) => result.status === 'rejected');
+
+      if (loadErrors.length) {
+        loadErrors.forEach((result) => {
+          if (result.status === 'rejected') {
+            console.error('Failed to load an onboarding record:', result.reason);
+          }
+        });
+
+        setFeedback({
+          color: 'danger',
+          message:
+            'We could not load every saved onboarding detail from the server, but you can still continue editing your setup now.',
+        });
+      }
+
+      const physicalRecord =
+        physicalResult.status === 'fulfilled' ? physicalResult.value : null;
+      const lifestyleRecord =
+        lifestyleResult.status === 'fulfilled' ? lifestyleResult.value : null;
+      const goalRecord = goalResult.status === 'fulfilled' ? goalResult.value : null;
+      const conditionRecord =
+        conditionResult.status === 'fulfilled' ? conditionResult.value : null;
+
+      const nextFormState: OnboardingFormState = {
+        ...defaultState,
+        heightCm: asString(physicalRecord?.height_cm),
+        weightKg: asString(physicalRecord?.weight_kg),
+        dominantHand: physicalRecord?.dominant_hand ?? '',
+        bloodType: physicalRecord?.blood_type ?? '',
+        bodyFrameSize: physicalRecord?.body_frame_size ?? '',
+        typicalBedtime: lifestyleRecord?.typical_bedtime ?? '',
+        typicalWakeTime: lifestyleRecord?.typical_wake_time ?? '',
+        caffeineServingsPerDay: asString(lifestyleRecord?.caffeine_servings_per_day),
+        avgDailyStepsEstimate: asString(lifestyleRecord?.avg_daily_steps_estimate),
+        typicalStressLevel: asString(lifestyleRecord?.typical_stress_level),
+        currentlyExercises: toYesNoValue(lifestyleRecord?.currently_exercises),
+        dietPattern: lifestyleRecord?.diet_pattern ?? '',
+        alcoholUse: lifestyleRecord?.alcohol_use ?? '',
+        tobaccoNicotineUse: lifestyleRecord?.tobacco_nicotine_use ?? '',
+        goalType: goalRecord?.goal_type ?? '',
+        goalTargetDate: toDateInputValue(goalRecord?.target_date),
+        goalFollowUpAnswer: goalRecord?.follow_up_answer ?? '',
+        conditionName: conditionRecord?.condition_name ?? '',
+        conditionStatus: conditionRecord?.status ?? '',
+        conditionDoctor: conditionRecord?.diagnosing_doctor ?? '',
+        conditionPlan: conditionRecord?.management_plan ?? '',
+        ...(draft?.form ?? {}),
+      };
+
+      setFormState(nextFormState);
+      setRecordIds({
+        physicalId: draftRecordIds.physicalId ?? physicalRecord?.id,
+        lifestyleId: draftRecordIds.lifestyleId ?? lifestyleRecord?.id,
+        goalId: draftRecordIds.goalId,
+        conditionId: draftRecordIds.conditionId,
+      });
+      setDraftMeta({
+        lastSavedAt: draft?.lastSavedAt,
+        completedAt: draft?.completedAt,
+      });
+      setLoading(false);
+      setIsReadyForAutosave(true);
+    };
+
+    loadOnboarding().catch((error) => {
+      console.error('Failed to initialize APEX BRAIN onboarding:', error);
+
+      if (!isMounted) {
+        return;
+      }
+
+      setFormState({
+        ...createEmptyForm(currentUser.email ?? ''),
+        firstName: currentUser.firstName ?? '',
+        lastName: currentUser.lastName ?? '',
+        phoneNumber: currentUser.phoneNumber ?? '',
+      });
+      setLoading(false);
+      setIsReadyForAutosave(true);
+      setFeedback({
+        color: 'danger',
+        message:
+          'We hit a setup issue while opening onboarding. You can still complete the form, and any new save will rebuild your draft cleanly.',
+      });
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [currentUser?.email, currentUser?.firstName, currentUser?.id, currentUser?.lastName, currentUser?.phoneNumber]);
+
+  useEffect(() => {
+    if (!isReadyForAutosave || !currentUser?.id) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      const timestamp = new Date().toISOString();
+
+      saveApexOnboardingDraft<OnboardingFormState>(currentUser.id, {
+        form: formState,
+        recordIds,
+        completedAt: draftMeta.completedAt,
+        lastSavedAt: timestamp,
+      });
+
+      setDraftMeta((previousState) => ({
+        ...previousState,
+        lastSavedAt: timestamp,
+      }));
+    }, 300);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [currentUser?.id, draftMeta.completedAt, formState, isReadyForAutosave, recordIds]);
+
+  const filledSections = useMemo(() => {
+    return [
+      [formState.firstName, formState.lastName, formState.phoneNumber].filter(Boolean)
+        .length,
+      [
+        formState.heightCm,
+        formState.weightKg,
+        formState.dominantHand,
+        formState.bloodType,
+        formState.bodyFrameSize,
+      ].filter(Boolean).length,
+      [
+        formState.typicalBedtime,
+        formState.typicalWakeTime,
+        formState.caffeineServingsPerDay,
+        formState.avgDailyStepsEstimate,
+        formState.typicalStressLevel,
+        formState.currentlyExercises,
+        formState.dietPattern,
+        formState.alcoholUse,
+        formState.tobaccoNicotineUse,
+      ].filter(Boolean).length,
+      [formState.goalType, formState.goalTargetDate, formState.goalFollowUpAnswer].filter(Boolean)
+        .length,
+      [
+        formState.conditionName,
+        formState.conditionStatus,
+        formState.conditionDoctor,
+        formState.conditionPlan,
+      ].filter(Boolean).length,
+    ];
+  }, [formState]);
+
+  const setupReadiness = useMemo(() => {
+    const totalImportantFields = 10;
+    const completedImportantFields = [
+      formState.firstName,
+      formState.heightCm,
+      formState.weightKg,
+      formState.typicalBedtime,
+      formState.typicalWakeTime,
+      formState.typicalStressLevel,
+      formState.goalType,
+      formState.goalTargetDate,
+      formState.conditionName,
+      formState.conditionPlan,
+    ].filter(Boolean).length;
+
+    return Math.round((completedImportantFields / totalImportantFields) * 100);
+  }, [formState]);
+
+  const currentStepDefinition = steps[activeStep];
+
+  const handleFieldChange =
+    (field: keyof OnboardingFormState) =>
+    (
+      event: React.ChangeEvent<
+        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+      >,
+    ) => {
+      const nextValue = event.target.value;
+
+      setFormState((previousState) => ({
+        ...previousState,
+        [field]: nextValue,
+      }));
+
+      setFieldErrors((previousState) => {
+        if (!previousState[field]) {
+          return previousState;
+        }
+
+        const nextErrors = { ...previousState };
+        delete nextErrors[field];
+        return nextErrors;
+      });
+    };
+
+  const validateStep = (stepIndex: number) => {
+    const nextErrors: Partial<Record<keyof OnboardingFormState, string>> = {};
+
+    if (stepIndex === 0 && !trimmedValue(formState.firstName)) {
+      nextErrors.firstName =
+        'Please enter the name you want APEX BRAIN to use throughout the app.';
+    }
+
+    if (stepIndex === 3 && !formState.goalType) {
+      nextErrors.goalType =
+        'Choose one primary focus so your home and Daily Pulse can orient around it.';
+    }
+
+    return nextErrors;
+  };
+
+  const scrollToTop = () => {
+    if (typeof window !== 'undefined') {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  const handleNextStep = () => {
+    const nextErrors = validateStep(activeStep);
+
+    if (Object.keys(nextErrors).length) {
+      setFieldErrors(nextErrors);
+      return;
+    }
+
+    setFieldErrors({});
+    setActiveStep((previousStep) =>
+      Math.min(previousStep + 1, steps.length - 1),
+    );
+    scrollToTop();
+  };
+
+  const handlePreviousStep = () => {
+    setActiveStep((previousStep) => Math.max(previousStep - 1, 0));
+    scrollToTop();
+  };
+
+  const handleJumpToStep = (stepIndex: number) => {
+    if (stepIndex > activeStep) {
+      return;
+    }
+
+    setActiveStep(stepIndex);
+    scrollToTop();
+  };
+
+  const upsertEntity = async (
+    endpoint: string,
+    payload: Record<string, unknown>,
+    existingId?: string,
+    createIfMissing = true,
+  ) => {
+    if (!entityHasValues(payload)) {
+      return existingId;
+    }
+
+    if (existingId) {
+      await axios.put(`/${endpoint}/${existingId}`, {
+        id: existingId,
+        data: payload,
+      });
+      return existingId;
+    }
+
+    if (!createIfMissing) {
+      return undefined;
+    }
+
+    const response = await axios.post(`/${endpoint}`, {
+      data: payload,
+    });
+
+    return response.data?.id as string | undefined;
+  };
+
+  const handleSaveOnboarding = async () => {
+    const nextErrors = validateStep(activeStep);
+
+    if (Object.keys(nextErrors).length) {
+      setFieldErrors(nextErrors);
+      return;
+    }
+
+    if (!currentUser?.id) {
+      setFeedback({
+        color: 'danger',
+        message:
+          'We could not detect your signed-in account. Please refresh the page and try onboarding again.',
+      });
+      return;
+    }
+
+    setSaving(true);
+    setFeedback(null);
+    setFieldErrors({});
+
+    const nextRecordIds: ApexOnboardingRecordIds = {
+      ...recordIds,
+    };
+
+    try {
+      await axios.put('/auth/profile', {
+        profile: {
+          firstName: trimmedValue(formState.firstName),
+          lastName: trimmedValue(formState.lastName),
+          phoneNumber: trimmedValue(formState.phoneNumber),
+          email: currentUser.email,
+          disabled: Boolean(currentUser.disabled),
+          emailVerified: Boolean(currentUser.emailVerified),
+          provider: currentUser.provider,
+          avatar: currentUser.avatar ?? [],
+        },
+      });
+
+      const physicalPayload: Record<string, unknown> = {
+        user: currentUser.id,
+        height_cm: toNumberOrUndefined(formState.heightCm),
+        weight_kg: toNumberOrUndefined(formState.weightKg),
+        dominant_hand: formState.dominantHand || undefined,
+        blood_type: formState.bloodType || undefined,
+        body_frame_size: formState.bodyFrameSize || undefined,
+      };
+
+      const lifestylePayload: Record<string, unknown> = {
+        user: currentUser.id,
+        typical_bedtime: trimmedValue(formState.typicalBedtime) || undefined,
+        typical_wake_time: trimmedValue(formState.typicalWakeTime) || undefined,
+        caffeine_servings_per_day: toNumberOrUndefined(
+          formState.caffeineServingsPerDay,
+        ),
+        avg_daily_steps_estimate: toNumberOrUndefined(
+          formState.avgDailyStepsEstimate,
+        ),
+        typical_stress_level: toNumberOrUndefined(formState.typicalStressLevel),
+        currently_exercises:
+          formState.currentlyExercises === ''
+            ? undefined
+            : formState.currentlyExercises === 'yes',
+        diet_pattern: formState.dietPattern || undefined,
+        alcohol_use: formState.alcoholUse || undefined,
+        tobacco_nicotine_use: formState.tobaccoNicotineUse || undefined,
+      };
+
+      const goalPayload: Record<string, unknown> = {
+        user: currentUser.id,
+        goal_type: formState.goalType || undefined,
+        target_date: formState.goalTargetDate || undefined,
+        follow_up_answer: trimmedValue(formState.goalFollowUpAnswer) || undefined,
+        is_active: true,
+      };
+
+      const conditionPayload: Record<string, unknown> = {
+        user: currentUser.id,
+        condition_name: trimmedValue(formState.conditionName) || undefined,
+        status: formState.conditionStatus || undefined,
+        diagnosing_doctor: trimmedValue(formState.conditionDoctor) || undefined,
+        management_plan: trimmedValue(formState.conditionPlan) || undefined,
+      };
+
+      nextRecordIds.physicalId = await upsertEntity(
+        'user_physical_baselines',
+        physicalPayload,
+        nextRecordIds.physicalId,
+      );
+      nextRecordIds.lifestyleId = await upsertEntity(
+        'user_lifestyle_baselines',
+        lifestylePayload,
+        nextRecordIds.lifestyleId,
+      );
+      nextRecordIds.goalId = await upsertEntity(
+        'goals',
+        goalPayload,
+        nextRecordIds.goalId,
+      );
+      nextRecordIds.conditionId = await upsertEntity(
+        'conditions',
+        conditionPayload,
+        nextRecordIds.conditionId,
+      );
+
+      await dispatch(findMe());
+
+      const completedAt = new Date().toISOString();
+      markApexOnboardingCompleted<OnboardingFormState>(currentUser.id, {
+        form: formState,
+        recordIds: nextRecordIds,
+        completedAt,
+        lastSavedAt: completedAt,
+      });
+
+      setRecordIds(nextRecordIds);
+      setDraftMeta({
+        completedAt,
+        lastSavedAt: completedAt,
+      });
+      setFeedback({
+        color: 'success',
+        message:
+          'Your APEX BRAIN onboarding is saved. Your profile, baseline, and starting focus are now ready for Daily Pulse and the deeper health modules.',
+      });
+      setActiveStep(steps.length - 1);
+      scrollToTop();
+    } catch (error) {
+      console.error('Failed to save APEX BRAIN onboarding:', error);
+      setFeedback({
+        color: 'danger',
+        message:
+          'We could not finish saving onboarding. Some earlier sections may already be stored, so please review the linked modules below and try again.',
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const renderIdentityStep = () => (
+    <>
+      <div className="grid gap-6 md:grid-cols-2">
+        <div>
+          <FormField label="First name" help="This is the name APEX BRAIN will use in greetings and summaries.">
+            <input
+              name="firstName"
+              type="text"
+              placeholder="e.g. Maya"
+              value={formState.firstName}
+              onChange={handleFieldChange('firstName')}
+            />
+          </FormField>
+          <FieldError error={fieldErrors.firstName} />
+        </div>
+
+        <FormField label="Last name" help="Optional now — helpful later for formal medical exports.">
+          <input
+            name="lastName"
+            type="text"
+            placeholder="e.g. Johnson"
+            value={formState.lastName}
+            onChange={handleFieldChange('lastName')}
+          />
+        </FormField>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <FormField label="Phone number" help="Optional now — you can always edit this later.">
+          <input
+            name="phoneNumber"
+            type="tel"
+            placeholder="(555) 123-4567"
+            value={formState.phoneNumber}
+            onChange={handleFieldChange('phoneNumber')}
+          />
+        </FormField>
+
+        <FormField label="Email" help="This comes from your account and is kept read-only here.">
+          <input
+            name="email"
+            type="email"
+            value={formState.email}
+            disabled
+            onChange={handleFieldChange('email')}
+          />
+        </FormField>
+      </div>
+    </>
+  );
+
+  const renderPhysicalStep = () => (
+    <>
+      <div className="grid gap-6 md:grid-cols-2">
+        <FormField label="Height (cm)" help="A simple starting point for body trend context.">
+          <input
+            name="heightCm"
+            type="number"
+            min="0"
+            step="0.1"
+            placeholder="170"
+            value={formState.heightCm}
+            onChange={handleFieldChange('heightCm')}
+          />
+        </FormField>
+
+        <FormField label="Weight (kg)" help="Use your current best estimate — perfection is not required.">
+          <input
+            name="weightKg"
+            type="number"
+            min="0"
+            step="0.1"
+            placeholder="68.5"
+            value={formState.weightKg}
+            onChange={handleFieldChange('weightKg')}
+          />
+        </FormField>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-3">
+        <FormField label="Dominant hand">
+          <select
+            name="dominantHand"
+            value={formState.dominantHand}
+            onChange={handleFieldChange('dominantHand')}
+          >
+            <option value="">Select one</option>
+            {dominantHandOptions.map((option) => (
+              <option key={option} value={option}>
+                {humanize(option)}
+              </option>
+            ))}
+          </select>
+        </FormField>
+
+        <FormField label="Blood type">
+          <select
+            name="bloodType"
+            value={formState.bloodType}
+            onChange={handleFieldChange('bloodType')}
+          >
+            <option value="">Select one</option>
+            {bloodTypeOptions.map((option) => (
+              <option key={option} value={option}>
+                {humanize(option)}
+              </option>
+            ))}
+          </select>
+        </FormField>
+
+        <FormField label="Body frame size">
+          <select
+            name="bodyFrameSize"
+            value={formState.bodyFrameSize}
+            onChange={handleFieldChange('bodyFrameSize')}
+          >
+            <option value="">Select one</option>
+            {bodyFrameOptions.map((option) => (
+              <option key={option} value={option}>
+                {humanize(option)}
+              </option>
+            ))}
+          </select>
+        </FormField>
+      </div>
+    </>
+  );
+
+  const renderLifestyleStep = () => (
+    <>
+      <div className="grid gap-6 md:grid-cols-2">
+        <FormField label="Typical bedtime">
+          <input
+            name="typicalBedtime"
+            type="time"
+            value={formState.typicalBedtime}
+            onChange={handleFieldChange('typicalBedtime')}
+          />
+        </FormField>
+
+        <FormField label="Typical wake time">
+          <input
+            name="typicalWakeTime"
+            type="time"
+            value={formState.typicalWakeTime}
+            onChange={handleFieldChange('typicalWakeTime')}
+          />
+        </FormField>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-3">
+        <FormField label="Caffeine servings / day">
+          <input
+            name="caffeineServingsPerDay"
+            type="number"
+            min="0"
+            placeholder="2"
+            value={formState.caffeineServingsPerDay}
+            onChange={handleFieldChange('caffeineServingsPerDay')}
+          />
+        </FormField>
+
+        <FormField label="Daily step estimate">
+          <input
+            name="avgDailyStepsEstimate"
+            type="number"
+            min="0"
+            placeholder="7000"
+            value={formState.avgDailyStepsEstimate}
+            onChange={handleFieldChange('avgDailyStepsEstimate')}
+          />
+        </FormField>
+
+        <FormField label="Typical stress (1-10)">
+          <input
+            name="typicalStressLevel"
+            type="number"
+            min="1"
+            max="10"
+            placeholder="6"
+            value={formState.typicalStressLevel}
+            onChange={handleFieldChange('typicalStressLevel')}
+          />
+        </FormField>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <FormField label="Do you currently exercise?">
+          <select
+            name="currentlyExercises"
+            value={formState.currentlyExercises}
+            onChange={handleFieldChange('currentlyExercises')}
+          >
+            <option value="">Select one</option>
+            <option value="yes">Yes</option>
+            <option value="no">No</option>
+          </select>
+        </FormField>
+
+        <FormField label="Diet pattern">
+          <select
+            name="dietPattern"
+            value={formState.dietPattern}
+            onChange={handleFieldChange('dietPattern')}
+          >
+            <option value="">Select one</option>
+            {dietPatternOptions.map((option) => (
+              <option key={option} value={option}>
+                {humanize(option)}
+              </option>
+            ))}
+          </select>
+        </FormField>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <FormField label="Alcohol use">
+          <select
+            name="alcoholUse"
+            value={formState.alcoholUse}
+            onChange={handleFieldChange('alcoholUse')}
+          >
+            <option value="">Select one</option>
+            {alcoholUseOptions.map((option) => (
+              <option key={option} value={option}>
+                {humanize(option)}
+              </option>
+            ))}
+          </select>
+        </FormField>
+
+        <FormField label="Tobacco / nicotine use">
+          <select
+            name="tobaccoNicotineUse"
+            value={formState.tobaccoNicotineUse}
+            onChange={handleFieldChange('tobaccoNicotineUse')}
+          >
+            <option value="">Select one</option>
+            {tobaccoUseOptions.map((option) => (
+              <option key={option} value={option}>
+                {humanize(option)}
+              </option>
+            ))}
+          </select>
+        </FormField>
+      </div>
+    </>
+  );
+
+  const renderGoalStep = () => (
+    <>
+      <FormField label="Primary focus" help="Choose the health outcome you most want APEX BRAIN to orient around next.">
+        <select
+          name="goalType"
+          value={formState.goalType}
+          onChange={handleFieldChange('goalType')}
+        >
+          <option value="">Select one</option>
+          {goalTypeOptions.map((option) => (
+            <option key={option} value={option}>
+              {humanize(option)}
+            </option>
+          ))}
+        </select>
+      </FormField>
+      <FieldError error={fieldErrors.goalType} />
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <FormField label="Target date" help="Optional, but useful if you want momentum and accountability.">
+          <input
+            name="goalTargetDate"
+            type="date"
+            value={formState.goalTargetDate}
+            onChange={handleFieldChange('goalTargetDate')}
+          />
+        </FormField>
+
+        <div
+          className="rounded-3xl border p-5"
+          style={{
+            borderColor: palette.border,
+            backgroundColor: palette.panelAlt,
+          }}
+        >
+          <div
+            className="text-xs font-semibold uppercase tracking-[0.2em]"
+            style={{ color: palette.muted }}
+          >
+            Why this matters
+          </div>
+          <p className="mt-3 text-sm leading-7" style={{ color: palette.body }}>
+            Your primary focus helps APEX BRAIN move from “generic tracker” to “personal health operating system.” It becomes the lens for your Daily Pulse, reviews, and future recommendations.
+          </p>
+        </div>
+      </div>
+
+      <FormField label="What would success look like?" hasTextareaHeight help="Write it in plain language — the app will save it into your goal record.">
+        <textarea
+          name="goalFollowUpAnswer"
+          rows={5}
+          placeholder="Example: Sleep at least 7.5 hours most nights, feel more steady in the afternoon, and stop waking up exhausted."
+          value={formState.goalFollowUpAnswer}
+          onChange={handleFieldChange('goalFollowUpAnswer')}
+        />
+      </FormField>
+    </>
+  );
+
+  const renderContextStep = () => (
+    <>
+      <div className="grid gap-6 md:grid-cols-2">
+        <FormField label="Condition name" help="Optional — add only what feels useful to track now.">
+          <input
+            name="conditionName"
+            type="text"
+            placeholder="Example: Migraines"
+            value={formState.conditionName}
+            onChange={handleFieldChange('conditionName')}
+          />
+        </FormField>
+
+        <FormField label="Status">
+          <select
+            name="conditionStatus"
+            value={formState.conditionStatus}
+            onChange={handleFieldChange('conditionStatus')}
+          >
+            <option value="">Select one</option>
+            {conditionStatusOptions.map((option) => (
+              <option key={option} value={option}>
+                {humanize(option)}
+              </option>
+            ))}
+          </select>
+        </FormField>
+      </div>
+
+      <FormField label="Diagnosing doctor">
+        <input
+          name="conditionDoctor"
+          type="text"
+          placeholder="Example: Dr. Patel"
+          value={formState.conditionDoctor}
+          onChange={handleFieldChange('conditionDoctor')}
+        />
+      </FormField>
+
+      <FormField label="Management plan" hasTextareaHeight help="Optional notes that will make later reports more useful to you or a clinician.">
+        <textarea
+          name="conditionPlan"
+          rows={5}
+          placeholder="Example: Track triggers, hydration, sleep consistency, and rescue-med timing."
+          value={formState.conditionPlan}
+          onChange={handleFieldChange('conditionPlan')}
+        />
+      </FormField>
+    </>
+  );
+
+  const renderCurrentStep = () => {
+    switch (activeStep) {
+      case 0:
+        return renderIdentityStep();
+      case 1:
+        return renderPhysicalStep();
+      case 2:
+        return renderLifestyleStep();
+      case 3:
+        return renderGoalStep();
+      case 4:
+      default:
+        return renderContextStep();
+    }
+  };
+
+  if (loading || !currentUser?.id) {
+    return (
+      <>
+        <Head>
+          <title>{getPageTitle('Onboarding')}</title>
+        </Head>
+        <SectionMain>
+          <SectionTitleLineWithButton
+            icon={mdiCheckCircleOutline}
+            title="Onboarding"
+            main
+          >
+            {''}
+          </SectionTitleLineWithButton>
+          <CardBox>
+            <div className="space-y-3 py-4">
+              <div className="text-sm font-semibold uppercase tracking-[0.2em] text-gray-500">
+                APEX BRAIN
+              </div>
+              <h2 className="text-2xl font-semibold text-gray-900">
+                Loading your onboarding workspace…
+              </h2>
+              <p className="text-base leading-7 text-gray-600">
+                We’re checking your current account, baseline records, and any saved draft so you can continue where you left off.
+              </p>
+            </div>
+          </CardBox>
+        </SectionMain>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Onboarding')}</title>
+      </Head>
+
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiCheckCircleOutline}
+          title="Apex brain onboarding"
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+
+        <section
+          className="overflow-hidden rounded-[34px] border p-6 shadow-[0_20px_80px_rgba(74,103,65,0.08)] md:p-8"
+          style={{
+            backgroundColor: palette.pageBg,
+            borderColor: palette.border,
+          }}
+        >
+          <div className="grid gap-8 lg:grid-cols-[minmax(0,1.1fr)_320px] lg:items-center">
+            <div>
+              <div
+                className="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold"
+                style={{
+                  borderColor: palette.borderStrong,
+                  backgroundColor: 'rgba(255,255,255,0.64)',
+                  color: palette.forest,
+                }}
+              >
+                <BaseIcon path={mdiCheckCircleOutline} size={18} />
+                Guided setup for your premium health home
+              </div>
+
+              <h2
+                className="mt-5 max-w-3xl text-4xl font-semibold tracking-tight"
+                style={{ color: palette.charcoal }}
+              >
+                Let’s turn the schema into a real personal health experience.
+              </h2>
+              <p
+                className="mt-4 max-w-3xl text-lg leading-8"
+                style={{ color: palette.body }}
+              >
+                This first onboarding slice fills in the data that already exists in APEX BRAIN today: your profile basics, body baseline, lifestyle baseline, first active goal, and optional condition context.
+              </p>
+
+              <div className="mt-6 h-3 overflow-hidden rounded-full bg-white/70">
+                <div
+                  className="h-full rounded-full transition-all duration-300"
+                  style={{
+                    width: `${completionPercent}%`,
+                    background:
+                      'linear-gradient(90deg, rgba(74,103,65,1) 0%, rgba(201,168,76,1) 100%)',
+                  }}
+                />
+              </div>
+
+              <div className="mt-4 flex flex-wrap items-center gap-3 text-sm font-medium">
+                <span style={{ color: palette.forest }}>
+                  {currentStepDefinition.eyebrow} of {steps.length}
+                </span>
+                <span style={{ color: palette.muted }}>•</span>
+                <span style={{ color: palette.body }}>{currentStepDefinition.title}</span>
+                {hasCompletedOnboarding && (
+                  <span
+                    className="rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em]"
+                    style={{
+                      backgroundColor: palette.forestSoft,
+                      color: palette.forest,
+                    }}
+                  >
+                    Baseline saved
+                  </span>
+                )}
+              </div>
+            </div>
+
+            <div
+              className="rounded-[30px] border p-5"
+              style={{
+                borderColor: palette.border,
+                backgroundColor: 'rgba(255,255,255,0.72)',
+              }}
+            >
+              <div
+                className="text-xs font-semibold uppercase tracking-[0.18em]"
+                style={{ color: palette.muted }}
+              >
+                Snapshot
+              </div>
+              <div className="mt-3 text-3xl font-semibold" style={{ color: palette.charcoal }}>
+                {setupReadiness}% ready
+              </div>
+              <p className="mt-3 text-sm leading-7" style={{ color: palette.body }}>
+                You can finish this gradually. APEX BRAIN auto-saves your draft in this browser while you fill things in.
+              </p>
+
+              <div className="mt-5 grid grid-cols-2 gap-3">
+                {[
+                  { label: 'Identity', value: `${filledSections[0]}/3` },
+                  { label: 'Body', value: `${filledSections[1]}/5` },
+                  { label: 'Lifestyle', value: `${filledSections[2]}/9` },
+                  { label: 'Goal', value: `${filledSections[3]}/3` },
+                ].map((item) => (
+                  <div
+                    key={item.label}
+                    className="rounded-2xl border p-3"
+                    style={{
+                      borderColor: palette.border,
+                      backgroundColor: palette.panelAlt,
+                    }}
+                  >
+                    <div className="text-xs font-semibold uppercase tracking-[0.16em]" style={{ color: palette.muted }}>
+                      {item.label}
+                    </div>
+                    <div className="mt-2 text-xl font-semibold" style={{ color: palette.charcoal }}>
+                      {item.value}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {feedback && (
+          <div className="mt-6">
+            <NotificationBar
+              color={feedback.color}
+              icon={feedback.color === 'success' ? mdiCheckCircleOutline : mdiHeartPulse}
+              button={
+                feedback.color === 'success' ? (
+                  <BaseButton href="/daily-pulse" color="whiteDark" label="Open Daily Pulse" />
+                ) : undefined
+              }
+            >
+              {feedback.message}
+            </NotificationBar>
+          </div>
+        )}
+
+        <div className="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
+          <CardBox>
+            <div className="space-y-8 py-2">
+              <div className="flex flex-wrap gap-3">
+                {steps.map((step, index) => {
+                  const isActive = index === activeStep;
+                  const isClickable = index <= activeStep;
+
+                  return (
+                    <button
+                      key={step.key}
+                      type="button"
+                      className="min-w-[140px] flex-1 rounded-[24px] border px-4 py-4 text-left transition"
+                      style={{
+                        borderColor: isActive ? palette.forest : palette.border,
+                        backgroundColor: isActive ? palette.forestSoft : palette.panelBg,
+                        color: palette.charcoal,
+                        cursor: isClickable ? 'pointer' : 'default',
+                        opacity: isClickable ? 1 : 0.7,
+                      }}
+                      onClick={() => handleJumpToStep(index)}
+                    >
+                      <div className="flex items-center gap-3">
+                        <span
+                          className="flex h-10 w-10 items-center justify-center rounded-2xl"
+                          style={{
+                            backgroundColor: isActive ? palette.forest : palette.goldSoft,
+                            color: isActive ? palette.pageBg : palette.forest,
+                          }}
+                        >
+                          <BaseIcon path={step.icon} size={20} />
+                        </span>
+                        <div>
+                          <div className="text-xs font-semibold uppercase tracking-[0.16em]" style={{ color: palette.muted }}>
+                            {step.eyebrow}
+                          </div>
+                          <div className="mt-1 text-sm font-semibold leading-5">
+                            {step.title}
+                          </div>
+                        </div>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+
+              <div>
+                <div
+                  className="inline-flex items-center gap-2 rounded-full px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em]"
+                  style={{
+                    backgroundColor: palette.goldSoft,
+                    color: palette.forest,
+                  }}
+                >
+                  <BaseIcon path={currentStepDefinition.icon} size={16} />
+                  {currentStepDefinition.eyebrow}
+                </div>
+                <h3 className="mt-4 text-3xl font-semibold" style={{ color: palette.charcoal }}>
+                  {currentStepDefinition.title}
+                </h3>
+                <p className="mt-3 max-w-3xl text-base leading-7" style={{ color: palette.body }}>
+                  {currentStepDefinition.description}
+                </p>
+              </div>
+
+              <div
+                className="rounded-[30px] border p-6"
+                style={{
+                  borderColor: palette.border,
+                  backgroundColor: palette.panelBg,
+                }}
+              >
+                {renderCurrentStep()}
+              </div>
+
+              <div className="flex flex-col gap-4 border-t pt-6 md:flex-row md:items-center md:justify-between" style={{ borderColor: palette.border }}>
+                <div className="text-sm leading-7" style={{ color: palette.body }}>
+                  {draftMeta.lastSavedAt ? (
+                    <>
+                      Draft last saved in this browser on{' '}
+                      <span className="font-semibold" style={{ color: palette.charcoal }}>
+                        {new Date(draftMeta.lastSavedAt).toLocaleString()}
+                      </span>
+                      .
+                    </>
+                  ) : (
+                    'Your onboarding draft will auto-save in this browser as you go.'
+                  )}
+                </div>
+
+                <div className="flex flex-wrap gap-3">
+                  {activeStep > 0 && (
+                    <BaseButton
+                      type="button"
+                      color="whiteDark"
+                      label="Back"
+                      onClick={handlePreviousStep}
+                    />
+                  )}
+
+                  {activeStep < steps.length - 1 ? (
+                    <BaseButton
+                      type="button"
+                      color="info"
+                      label="Continue"
+                      onClick={handleNextStep}
+                    />
+                  ) : (
+                    <BaseButton
+                      type="button"
+                      color="success"
+                      label={saving ? 'Saving...' : 'Save onboarding'}
+                      disabled={saving}
+                      onClick={handleSaveOnboarding}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          </CardBox>
+
+          <div className="space-y-6">
+            <CardBox>
+              <div className="space-y-4 py-2">
+                <div className="flex items-center gap-3">
+                  <span
+                    className="flex h-12 w-12 items-center justify-center rounded-2xl"
+                    style={{
+                      backgroundColor: palette.forestSoft,
+                      color: palette.forest,
+                    }}
+                  >
+                    <BaseIcon path={mdiCheckCircleOutline} size={24} />
+                  </span>
+                  <div>
+                    <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: palette.muted }}>
+                      What this setup powers
+                    </div>
+                    <div className="mt-1 text-xl font-semibold" style={{ color: palette.charcoal }}>
+                      Your first real APEX BRAIN home
+                    </div>
+                  </div>
+                </div>
+
+                <p className="text-sm leading-7" style={{ color: palette.body }}>
+                  This onboarding doesn’t live in isolation — it writes into the real app modules that already exist today. That means your first setup can immediately feed Daily Pulse, profile reviews, and the deeper admin screens behind the scenes.
+                </p>
+
+                <div className="space-y-3">
+                  {moduleLinks.map((link) => (
+                    <Link
+                      key={link.href}
+                      href={link.href}
+                      className="block rounded-[24px] border p-4 transition hover:-translate-y-0.5"
+                      style={{
+                        borderColor: palette.border,
+                        backgroundColor: palette.panelAlt,
+                      }}
+                    >
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <div className="text-sm font-semibold" style={{ color: palette.charcoal }}>
+                            {link.label}
+                          </div>
+                          <div className="mt-1 text-sm leading-6" style={{ color: palette.body }}>
+                            {link.description}
+                          </div>
+                        </div>
+                        <span className="text-lg font-semibold" style={{ color: palette.forest }}>
+                          →
+                        </span>
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </CardBox>
+
+            <CardBox>
+              <div className="space-y-4 py-2">
+                <div className="text-xs font-semibold uppercase tracking-[0.18em]" style={{ color: palette.muted }}>
+                  Your current focus
+                </div>
+                <div className="rounded-[26px] border p-5" style={{ borderColor: palette.border, backgroundColor: palette.panelAlt }}>
+                  <div className="text-sm font-semibold" style={{ color: palette.charcoal }}>
+                    {trimmedValue(formState.firstName) || 'Your profile'}
+                  </div>
+                  <p className="mt-2 text-sm leading-7" style={{ color: palette.body }}>
+                    {formState.goalType
+                      ? `${humanize(formState.goalType)} is currently your headline goal.`
+                      : 'Choose a primary focus and it will become the anchor for your early APEX BRAIN experience.'}
+                  </p>
+                </div>
+
+                <div className="rounded-[26px] border p-5" style={{ borderColor: palette.border, backgroundColor: palette.panelAlt }}>
+                  <div className="text-sm font-semibold" style={{ color: palette.charcoal }}>
+                    Daily rhythm snapshot
+                  </div>
+                  <ul className="mt-3 space-y-2 text-sm leading-7" style={{ color: palette.body }}>
+                    <li>
+                      Sleep window:{' '}
+                      <span className="font-semibold" style={{ color: palette.charcoal }}>
+                        {formState.typicalBedtime || '--:--'} → {formState.typicalWakeTime || '--:--'}
+                      </span>
+                    </li>
+                    <li>
+                      Stress level:{' '}
+                      <span className="font-semibold" style={{ color: palette.charcoal }}>
+                        {formState.typicalStressLevel || 'Not set'}
+                      </span>
+                    </li>
+                    <li>
+                      Movement:{' '}
+                      <span className="font-semibold" style={{ color: palette.charcoal }}>
+                        {formState.currentlyExercises
+                          ? humanize(formState.currentlyExercises)
+                          : 'Not set'}
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+
+                <div className="rounded-[26px] border p-5" style={{ borderColor: palette.border, backgroundColor: palette.panelAlt }}>
+                  <div className="text-sm font-semibold" style={{ color: palette.charcoal }}>
+                    Why this is a first slice
+                  </div>
+                  <p className="mt-2 text-sm leading-7" style={{ color: palette.body }}>
+                    APEX BRAIN’s schema is already broad, but this onboarding flow is the first consumer-friendly layer on top of it. Next we can expand it into deeper medical history, family setup, reproductive health, care-team collaboration, and more guided dashboards.
+                  </p>
+                </div>
+              </div>
+            </CardBox>
+          </div>
+        </div>
+      </SectionMain>
+    </>
+  );
+}
+
+OnboardingPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};