# Bionis dashboard A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/bionis-dashboard). - Page, with a live preview: https://shadcn.exchange/r/watermelon/bionis-dashboard - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/bionis-dashboard-light-95c36fa32867f728.png - Registry item: https://registry.watermelon.sh/r/bionis-dashboard.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/watermelon/bionis-dashboard.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react`, `recharts` - Registry items: `button`, `dropdown-menu`, `input-group`, `sidebar`, `utils` ## Files ### `src/components/dashboards/bionis-dashboard/components/bionis/dashboard-content.tsx` ```tsx import { useMemo, useState, type ComponentType, type SVGProps } from 'react' import { AlertDiamondIcon, AlertTriangleIcon, BedIcon, BlingFilledIcon, CalendarIcon, CheckCircleRegularIcon, DropIcon, HeartbeatFilledIcon, HighKneesIcon, Sparkles3FilledIcon, VoiceIcon, } from './icons' import { ScoreDonut, SleepBreakdownChart, ActivityTrendChart, KeyMetricCard, } from './shared' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { bodyVitals, currentUser, getActivityTrend, getSleepBreakdown, healthPredictions, keyMetricsByTimeline, recommendedActions, timelineOptions, wellnessByTimeline, type BodyVitalTone, type HealthPredictionTone, type RecommendedAction, type TimelineOptionValue, } from '../../data' import { cn } from '@/lib/utils' function useGreeting(fullName: string) { return useMemo(() => { const hour = new Date().getHours() const firstName = fullName.split(' ')[0] ?? fullName if (hour < 12) return `Good Morning ${firstName}` if (hour < 18) return `Good Afternoon ${firstName}` return `Good Evening ${firstName}` }, [fullName]) } const predictionToneIcon: Record< HealthPredictionTone, ComponentType> > = { warning: AlertTriangleIcon, success: CheckCircleRegularIcon, danger: AlertDiamondIcon, } const predictionToneClass: Record = { warning: 'text-(--prediction-warn)', success: 'text-(--vital-good)', danger: 'text-(--prediction-danger)', } const vitalToneClass: Record = { good: 'text-(--vital-good)', neutral: 'text-foreground', warn: 'text-(--chart-warn)', } const actionIcons: Record< RecommendedAction['icon'], ComponentType> > = { bed: BedIcon, drop: DropIcon, highKnees: HighKneesIcon, voice: VoiceIcon, } function InsightBadge({ children }: { children: string }) { return ( {children} ) } export function DashboardContent() { const greeting = useGreeting(currentUser.name) const [timeline, setTimeline] = useState('7d') const selectedLabel = timelineOptions.find((option) => option.value === timeline)?.label ?? 'Last 7 days' const wellness = wellnessByTimeline[timeline] const keyMetrics = keyMetricsByTimeline[timeline] const sleepBreakdown = getSleepBreakdown(timeline) const activityTrend = getActivityTrend(timeline) return (

{greeting}

setTimeline(value as TimelineOptionValue) } > {timelineOptions.map((option) => ( {option.label} ))}

Overall Wellness

{wellness.condition}

{wellness.summary.before} {wellness.summary.highlight} {wellness.summary.after}

Key metrics

Today's snapshot vs your weekly average

{keyMetrics.map((metric) => ( ))}

Health Prediction

7 days outlook

{healthPredictions.map((item) => { const Icon = predictionToneIcon[item.tone] return (

{item.title}

{item.description}

) })}

Body Vitals

All Stable

{bodyVitals.map((vital) => (

{vital.label}

{vital.value}

))}

Recommended actions

{recommendedActions.map((action) => { const Icon = actionIcons[action.icon] return (

{action.title}

{action.description}

) })}

) } ``` ### `src/components/dashboards/bionis-dashboard/components/bionis/icons.tsx` ```tsx import type { SVGProps } from 'react' import { cn } from '@/lib/utils' type IconProps = SVGProps function Icon({ className, ...props }: IconProps) { return ( ) } export function HomeIcon({ className, ...props }: IconProps) { return ( ) } export function SleepIcon({ className, ...props }: IconProps) { return ( ) } export function ActivityIcon({ className, ...props }: IconProps) { return ( ) } export function RecoveryIcon({ className, ...props }: IconProps) { return ( ) } export function TrendsIcon({ className, ...props }: IconProps) { return ( ) } export function PredictionIcon({ className, ...props }: IconProps) { return ( ) } export function ReportsIcon({ className, ...props }: IconProps) { return ( ) } export function BellIcon({ className, ...props }: IconProps) { return ( ) } export function GearIcon({ className, ...props }: IconProps) { return ( ) } export function QuestionIcon({ className, ...props }: IconProps) { return ( ) } export function UserIcon({ className, ...props }: IconProps) { return ( ) } export function ArrowRightIcon({ className, ...props }: IconProps) { return ( ) } export function SidebarCollapseIcon({ className, ...props }: IconProps) { return ( ) } type ToggleIconProps = IconProps & { pressed?: boolean } export function ToggleIcon({ className, pressed = false, ...props }: ToggleIconProps) { return ( ) } export function SearchIcon({ className, ...props }: IconProps) { return ( ) } export function CalendarIcon({ className, ...props }: IconProps) { return ( ) } export function CloseIcon({ className, ...props }: IconProps) { return ( ) } function SmallIcon({ className, ...props }: IconProps) { return ( ) } export function SpinnerGapIcon({ className, ...props }: IconProps) { return ( ) } export function FadersHorizontalIcon({ className, ...props }: IconProps) { return ( ) } export function CheckCircleIcon({ className, ...props }: IconProps) { return ( ) } export function StatusWarningIcon({ className, ...props }: IconProps) { return ( ) } export function HeartbeatIcon({ className, ...props }: IconProps) { return ( ) } export function WalkIcon({ className, ...props }: IconProps) { return ( ) } export function MoonStarsIcon({ className, ...props }: IconProps) { return ( ) } export function BatteryChargingIcon({ className, ...props }: IconProps) { return ( ) } export function MoreVerticalIcon({ className, ...props }: IconProps) { return ( ) } export function TrendUpIcon({ className, ...props }: IconProps) { return ( ) } export function WarningFilledIcon({ className, ...props }: IconProps) { return ( ) } export function AlertDiamondIcon({ className, ...props }: IconProps) { return ( ) } export function AlertTriangleIcon({ className, ...props }: IconProps) { return ( ) } export function BedIcon({ className, ...props }: IconProps) { return ( ) } export function BlingFilledIcon({ className, ...props }: IconProps) { return ( ) } export function CheckCircleRegularIcon({ className, ...props }: IconProps) { return ( ) } export function DropIcon({ className, ...props }: IconProps) { return ( ) } export function HeartbeatFilledIcon({ className, ...props }: IconProps) { return ( ) } export function NurseFilledIcon({ className, ...props }: IconProps) { return ( ) } export function HighKneesIcon({ className, ...props }: IconProps) { return ( ) } export function Sparkles3FilledIcon({ className, ...props }: IconProps) { return ( ) } export function VoiceIcon({ className, ...props }: IconProps) { return ( ) } ``` ### `src/components/dashboards/bionis-dashboard/components/bionis/logo.tsx` ```tsx import { useId, type SVGProps } from 'react' export function BionisLogo({ className, ...props }: SVGProps) { const reactId = useId().replace(/:/g, '') const gradientA = `bionis-logo-a-${reactId}` const gradientB = `bionis-logo-b-${reactId}` return ( ) } ``` ### `src/components/dashboards/bionis-dashboard/components/bionis/navigation.tsx` ```tsx import { createContext, useContext, useMemo, useState, type AnchorHTMLAttributes, type MouseEvent, type ReactNode, } from 'react' type DashboardNavigation = { pathname: string navigate: (pathname: string) => void } const DashboardNavigationContext = createContext(null) export function DashboardNavigationProvider({ children }: { children: ReactNode }) { const [pathname, setPathname] = useState('/') const value = useMemo( () => ({ pathname, navigate: setPathname }), [pathname], ) return ( {children} ) } export function useDashboardNavigation() { const context = useContext(DashboardNavigationContext) if (!context) { throw new Error('useDashboardNavigation must be used within DashboardNavigationProvider') } return context } export function DashboardLink({ href, onClick, ...props }: AnchorHTMLAttributes & { href: string }) { const { navigate } = useDashboardNavigation() function handleClick(event: MouseEvent) { onClick?.(event) if ( event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ) { return } event.preventDefault() navigate(href) } return } ``` ### `src/components/dashboards/bionis-dashboard/components/bionis/shared.tsx` ```tsx import { useEffect, useId, useMemo, useState, type ComponentType, type HTMLAttributes, type ReactNode, type SVGProps, } from 'react' import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis, } from 'recharts' import { AlertDiamondIcon, AlertTriangleIcon, BatteryChargingIcon, BedIcon, BlingFilledIcon, CalendarIcon, HeartbeatFilledIcon, HeartbeatIcon, MoonStarsIcon, MoreVerticalIcon, NurseFilledIcon, TrendUpIcon, WalkIcon, WarningFilledIcon, } from './icons' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { heatmapDateLabels, recoveryFactors, recoveryHeatmapData, type ActivityTrendPoint, type HeatmapColumn, type HeatmapTile, type KeyMetric, type KeyMetricIcon, type RecoveryFactor, type SleepBreakdownPoint, type SleepRecoveryTrendPoint, } from '../../data' import { cn } from '@/lib/utils' export const CHART_THEME_COLORS = { recovery: 'var(--chart-steps)', sleep: 'var(--chart-sleep)', prediction: 'var(--insight-prediction)', actions: 'var(--insight-actions)', improving: 'var(--live)', outlook: 'var(--chart-period)', tooltipBg: 'var(--chart-tooltip-bg)', heatmap: { low: 'var(--heatmap-low)', med: 'var(--heatmap-med)', high: 'var(--heatmap-high)', }, } as const const metricIcons: Record< KeyMetricIcon, ComponentType> > = { heart: HeartbeatIcon, walk: WalkIcon, moon: MoonStarsIcon, battery: BatteryChargingIcon, heartbeat: HeartbeatFilledIcon, nurse: NurseFilledIcon, } const metricIconBgMap: Record = { heart: 'var(--metric-heart)', walk: 'var(--metric-steps)', moon: 'var(--metric-sleep)', battery: 'var(--metric-recovery)', heartbeat: 'var(--bionis-blue)', nurse: 'var(--metric-recovery)', } export function KeyMetricCard({ metric, className, }: { metric: KeyMetric className?: string }) { const Icon = metricIcons[metric.icon] const isUp = metric.trend.direction === 'up' return (

{metric.label}

View details View trend Compare periods

{metric.value}{' '} {metric.unit}

{metric.trend.emphasis}{' '} {metric.trend.label}

) } type ScoreDonutProps = HTMLAttributes & { value: number max?: number label?: string } const CHART_ANIMATION_MS = 900 const AXIS_TICK = { fill: 'var(--muted-foreground)', fontSize: 10, fontFamily: 'Geist, sans-serif', } as const export function ScoreDonut({ value, max = 100, label = 'Score', className, style, ...props }: ScoreDonutProps) { const chartColor = 'var(--score)' const progress = Math.min(Math.max(value / max, 0), 1) const pieData = [ { name: 'Score', value: progress }, { name: 'Remaining', value: Math.max(1 - progress, 0) }, ] return (

{label} {value}

) } type ChartTooltipItemProps = { label: string value: ReactNode color?: string } function ChartTooltipItem({ label, value, color = 'var(--foreground)', }: ChartTooltipItemProps) { return (

{label}

{value}

) } type ChartTooltipFrameProps = { title?: ReactNode icon?: ComponentType> children: ReactNode } function ChartTooltipFrame({ title, icon: Icon, children, }: ChartTooltipFrameProps) { return (

{title ? (

{Icon ? ( ) : null} {title}

) : null} {children}

) } export type ChartTooltipItemConfig = { // eslint-disable-next-line @typescript-eslint/no-explicit-any label: string | ((point?: any) => string) dataKey: string // eslint-disable-next-line @typescript-eslint/no-explicit-any formatValue?: (value: any, point?: any) => ReactNode color?: string } export type ChartTooltipProps = { active?: boolean payload?: Array<{ name?: string dataKey?: string | number // eslint-disable-next-line @typescript-eslint/no-explicit-any value?: any color?: string fill?: string stroke?: string // eslint-disable-next-line @typescript-eslint/no-explicit-any payload?: Record }> label?: ReactNode icon?: ComponentType> items?: ChartTooltipItemConfig[] } export function ChartTooltip({ active, payload, label, icon, items, }: ChartTooltipProps) { if (!active || !payload?.length) return null const point = payload[0]?.payload const titleText = point?.fullDate ?? point?.label ?? label ?? '—' if (items && items.length > 0) { return ( {items.map((item) => { const val = point?.[item.dataKey] ?? payload.find((p) => p.dataKey === item.dataKey)?.value const displayLabel = typeof item.label === 'function' ? item.label(point) : item.label const displayVal = item.formatValue ? item.formatValue(val, point) : (val ?? '—') return ( ) })} ) } return ( {payload.map((p, idx) => ( ))} ) } type SleepBarShapeProps = { x?: number y?: number width?: number height?: number active?: boolean } function SleepBarShape({ x = 0, y = 0, width = 0, height = 0, active = false, }: SleepBarShapeProps) { if (height <= 0) return null const cap = 3 const bodyHeight = Math.max(height - cap, 0) return ( {active ? ( ) : null} ) } function SleepAxisTick({ x, y, index, data, }: { x?: number | string y?: number | string index?: number data: SleepBreakdownPoint[] }) { const point = typeof index === 'number' ? data[index] : undefined if (!point || x == null || y == null) return null const tickX = typeof x === 'number' ? x : Number(x) const tickY = typeof y === 'number' ? y : Number(y) if (Number.isNaN(tickX) || Number.isNaN(tickY)) return null const lines = point.labelLines const lineHeight = 12 return ( {lines.map((line, lineIndex) => ( {line} ))} ) } export function SleepBreakdownChart({ data, flaggedNights, className, }: { data: SleepBreakdownPoint[] flaggedNights: number className?: string }) { return (

Nightly hours and recovery score for the last 30 days

Sleep (hrs)

Recovery score

} /> (typeof v === 'number' ? `${v}h` : '—'), color: CHART_THEME_COLORS.recovery, }, { label: 'Recovery', dataKey: 'recoveryScore', formatValue: (v) => (typeof v === 'number' ? `${v}%` : '—'), color: CHART_THEME_COLORS.sleep, }, ]} /> } />

) } const factorIcons: Record< 'moon' | 'walk' | 'warning' | 'alert' | 'bed', ComponentType> > = { moon: MoonStarsIcon, walk: WalkIcon, warning: AlertTriangleIcon, alert: AlertDiamondIcon, bed: BedIcon, } const factorColorMap: Record = { sleep: 'var(--metric-vital)', steps: 'var(--bionis-blue)', stress: 'var(--prediction-warn)', screen: 'var(--prediction-danger)', bedtime: 'var(--vital-good)', } export function RecoveryFactorsCard({ factors = recoveryFactors, className, }: { factors?: RecoveryFactor[] className?: string }) { const [mounted, setMounted] = useState(false) useEffect(() => { const frame = requestAnimationFrame(() => setMounted(true)) return () => cancelAnimationFrame(frame) }, []) return (

Recovery factors

7 days outlook

{factors.map((factor, idx) => { const Icon = factorIcons[factor.icon] const factorColor = factorColorMap[factor.id] || 'var(--bionis-blue)' return (

{factor.label}

{factor.value}

) })}

) } const tileDotColorMap: Record = { low: CHART_THEME_COLORS.heatmap.low, med: CHART_THEME_COLORS.heatmap.med, high: CHART_THEME_COLORS.heatmap.high, } // eslint-disable-next-line @typescript-eslint/no-explicit-any function HeatmapScatterTooltip({ active, payload }: any) { if (!active || !payload?.length) return null const tile = payload[0]?.payload if (!tile) return null return ( ) } export function RecoveryHeatmapCard({ data = recoveryHeatmapData, dateLabels = heatmapDateLabels, className, }: { data?: HeatmapColumn[] dateLabels?: string[] className?: string }) { const scatterData = useMemo(() => { const points: Array<{ x: number y: number id: string level: HeatmapTile score: number date: string status: string }> = [] data.forEach((col, colIdx) => { col.tiles.forEach((tile, rowIdx) => { points.push({ x: colIdx, y: 4 - rowIdx, id: tile.id, level: tile.level, score: tile.score, date: tile.date, status: tile.status, }) }) }) return points }, [data]) return (

Recovery heatmap

Low

High

dateLabels[Math.round(val / 2)] || '' } axisLine={false} tickLine={false} tick={AXIS_TICK} /> } /> { const { xAxis, yAxis, cx, cy, payload } = props if (typeof cx !== 'number' || typeof cy !== 'number') return const colW = (xAxis?.width ?? 0) / 7 const rowH = (yAxis?.height ?? 0) / 5 const w = Math.max(colW - 6, 8) const h = Math.max(rowH - 4, 8) return ( ) }} isAnimationActive animationDuration={CHART_ANIMATION_MS} />

) } ``` ### `src/components/dashboards/bionis-dashboard/components/bionis/sidebar.tsx` ```tsx import { useState } from 'react' import { BookOpenIcon, CreditCardIcon, LogOutIcon, MessageCircleIcon, SettingsIcon, UserIcon as LucideUserIcon, } from 'lucide-react' import { ArrowRightIcon, CloseIcon, QuestionIcon, SidebarCollapseIcon, ToggleIcon, UserIcon, } from './icons' import { BionisLogo } from './logo' import { DashboardLink, useDashboardNavigation } from './navigation' import { useTheme } from './theme-provider' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, useSidebar, } from '@/components/ui/sidebar' import { currentUser, navigationGroups, type NavigationItem } from '../../data' import { cn } from '@/lib/utils' const menuButtonClassName = cn( 'h-12 gap-2.5 rounded-xl border border-transparent px-3 text-base tracking-tight text-muted-foreground transition-colors', 'aria-[current=page]:border-border aria-[current=page]:bg-background aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground aria-[current=page]:shadow-[1px_2px_12px_rgba(158,158,158,0.08)]', 'dark:aria-[current=page]:border-transparent dark:aria-[current=page]:bg-sidebar-accent dark:aria-[current=page]:shadow-[1px_2px_12px_rgba(0,0,0,0.25)]', 'hover:bg-sidebar-accent data-open:bg-background data-open:text-sidebar-accent-foreground dark:data-open:bg-sidebar-accent', '[&_svg]:size-5!', 'group-data-[collapsible=icon]:size-11! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:[&>span]:hidden', ) function NavItem({ item }: { item: NavigationItem }) { const { isMobile, setOpenMobile } = useSidebar() const { pathname } = useDashboardNavigation() const isActive = item.href === '/' ? pathname === item.href : pathname === item.href || pathname.startsWith(`${item.href}/`) return ( { if (isMobile) setOpenMobile(false) }} > {item.name} {item.badge ? ( {item.badge} ) : null} ) } function HelpItem() { return ( Help

Need help?

Guides, docs, and support for Bionis.

Documentation Contact support ) } function DarkModeItem() { const { resolvedTheme, setTheme } = useTheme() const isDark = resolvedTheme === 'dark' const label = isDark ? 'Light Mode' : 'Dark Mode' return ( setTheme(isDark ? 'light' : 'dark')} > {label} ) } function ProfileItem() { return ( Profile

{currentUser.name}

{currentUser.email}

Account Preferences Billing Log out ) } function CollapseControl({ collapsed, onToggle, }: { collapsed: boolean onToggle: () => void }) { if (!collapsed) { return ( ) } return (

) } function HealthCoachCard() { const [open, setOpen] = useState(true) if (!open) return null return (

New

AI Health Coach

Get personalised tips based on your data

) } export function DashboardSidebar() { const { state, toggleSidebar } = useSidebar() const collapsed = state === 'collapsed' return ( {!collapsed && (

Bionis

)} {navigationGroups.map((group) => ( {group.label} {group.items.map((item) => ( ))} ))} ) } ``` ### `src/components/dashboards/bionis-dashboard/components/bionis/theme-provider.tsx` ```tsx import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode, } from 'react' export type Theme = 'dark' | 'light' | 'system' type ThemeProviderProps = { children: ReactNode defaultTheme?: Theme storageKey?: string } type ThemeProviderState = { theme: Theme resolvedTheme: 'dark' | 'light' setTheme: (theme: Theme) => void toggleTheme: () => void } const ThemeProviderContext = createContext(null) function getSystemTheme(): 'dark' | 'light' { if (typeof window === 'undefined') return 'light' return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' } export function ThemeProvider({ children, defaultTheme = 'light', storageKey = 'bionis-theme', }: ThemeProviderProps) { const [theme, setThemeState] = useState(() => { if (typeof window === 'undefined') return defaultTheme const stored = localStorage.getItem(storageKey) as Theme | null return stored ?? defaultTheme }) const resolvedTheme = useMemo( () => (theme === 'system' ? getSystemTheme() : theme), [theme], ) useEffect(() => { if (typeof window === 'undefined') return const root = window.document.documentElement root.classList.remove('light', 'dark') root.classList.add(resolvedTheme) }, [resolvedTheme]) const setTheme = useCallback( (next: Theme) => { if (typeof window !== 'undefined') { localStorage.setItem(storageKey, next) } setThemeState(next) }, [storageKey], ) const toggleTheme = useCallback(() => { const nextTheme = resolvedTheme === 'dark' ? 'light' : 'dark' setTheme(nextTheme) }, [resolvedTheme, setTheme]) const value = useMemo( () => ({ theme, resolvedTheme, setTheme, toggleTheme }), [theme, resolvedTheme, setTheme, toggleTheme], ) return ( {children} ) } export function useTheme() { const context = useContext(ThemeProviderContext) if (!context) { throw new Error('useTheme must be used within a ThemeProvider') } return context } ``` ### `src/components/dashboards/bionis-dashboard/components/bionis/topbar.tsx` ```tsx import { useEffect, useRef, useState, type ComponentType, type SVGProps } from 'react' import { ActivityIcon, AlertTriangleIcon, BatteryChargingIcon, BellIcon, CheckCircleRegularIcon, CloseIcon, HeartbeatFilledIcon, HeartbeatIcon, MoonStarsIcon, NurseFilledIcon, SearchIcon, WalkIcon, } from './icons' import { DashboardLink, useDashboardNavigation } from './navigation' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { InputGroup, InputGroupAddon, InputGroupInput, } from '@/components/ui/input-group' import { SidebarTrigger } from '@/components/ui/sidebar' import { currentUser, keyMetricsByTimeline, navigationGroups, notifications, profileHealthSummary, type KeyMetricIcon, type NotificationIcon, type NotificationTone, } from '../../data' import { cn } from '@/lib/utils' const profileMetricIcons: Record< KeyMetricIcon, ComponentType> > = { heart: HeartbeatIcon, walk: WalkIcon, moon: MoonStarsIcon, battery: BatteryChargingIcon, heartbeat: HeartbeatFilledIcon, nurse: NurseFilledIcon, } const profileMetricIconBgMap: Record = { heart: 'var(--metric-heart)', walk: 'var(--metric-steps)', moon: 'var(--metric-sleep)', battery: 'var(--metric-recovery)', heartbeat: 'var(--metric-vital)', nurse: 'var(--metric-vital)', } const notificationIcons: Record< NotificationIcon, ComponentType> > = { moon: MoonStarsIcon, check: CheckCircleRegularIcon, heart: HeartbeatIcon, alert: AlertTriangleIcon, activity: ActivityIcon, battery: BatteryChargingIcon, } const notificationToneClass: Record< NotificationTone, { icon: string; bg: string } > = { warning: { icon: '!text-(--prediction-warn) [&_*]:!text-(--prediction-warn)', bg: 'bg-(--chart-warn-bg)', }, success: { icon: '!text-(--vital-good) [&_*]:!text-(--vital-good)', bg: 'bg-(--vital-good)/10', }, info: { icon: '!text-(--chart-period) [&_*]:!text-(--chart-period)', bg: 'bg-(--chart-period-bg)', }, danger: { icon: '!text-(--prediction-danger) [&_*]:!text-(--prediction-danger)', bg: 'bg-(--prediction-danger)/10', }, } function useCurrentNavItem() { const { pathname } = useDashboardNavigation() return ( navigationGroups .flatMap((group) => group.items) .find((item) => item.href === pathname) ?? navigationGroups[0].items[0] ) } export function DashboardTopbar() { const currentNavItem = useCurrentNavItem() const PageIcon = currentNavItem.icon const [searchQuery, setSearchQuery] = useState('') const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false) const searchInputRef = useRef(null) const mobileSearchInputRef = useRef(null) const openMobileSearch = () => { setIsMobileSearchOpen(true) requestAnimationFrame(() => { mobileSearchInputRef.current?.focus() }) } const closeMobileSearch = () => { setIsMobileSearchOpen(false) } useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') { event.preventDefault() if (window.matchMedia('(width < 48rem)').matches) { setIsMobileSearchOpen(true) requestAnimationFrame(() => { mobileSearchInputRef.current?.focus() }) return } searchInputRef.current?.focus() } if (event.key === 'Escape') { setIsMobileSearchOpen(false) } } window.addEventListener('keydown', handleKeyDown) return () => window.removeEventListener('keydown', handleKeyDown) }, []) return (

{isMobileSearchOpen ? (

setSearchQuery(event.target.value)} />

) : ( <>

{currentNavItem.name}

setSearchQuery(event.target.value)} />

Notifications

{notifications.filter((item) => item.unread).length} unread

{notifications.slice(0, 3).map((notification) => { const Icon = notificationIcons[notification.icon] const tone = notificationToneClass[notification.tone] return (

{notification.title}

{notification.unread ? ( ) : null}

{notification.description}

{notification.time}

) })}

View all

{currentUser.name}

{currentUser.email}

Age: {currentUser.age} {currentUser.planStatus}

Score

{profileHealthSummary.wellnessScore}

{profileHealthSummary.condition}

{profileHealthSummary.summary.before} {profileHealthSummary.summary.highlight} {profileHealthSummary.summary.after}

{keyMetricsByTimeline['7d'].map((metric) => { const Icon = profileMetricIcons[metric.icon] return (

{metric.value} {metric.unit}

) })}

{profileHealthSummary.vitals.map((vital) => (

{vital.label}

{vital.value}

))}

)}

) } ``` ### `src/components/dashboards/bionis-dashboard/components/bionis/trends-content.tsx` ```tsx import { useState } from 'react' import { CalendarIcon } from './icons' import { KeyMetricCard, RecoveryFactorsCard, RecoveryHeatmapCard, SleepRecoveryTrendChart, } from './shared' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { getRecoveryHeatmap, getSleepRecoveryTrend, recoveryFactorsByTimeline, timelineOptions, trendsMetricsByTimeline, type TimelineOptionValue, } from '../../data' export function TrendsContent() { const [timeline, setTimeline] = useState('7d') const selectedLabel = timelineOptions.find((option) => option.value === timeline)?.label ?? 'Last 7 days' const metrics = trendsMetricsByTimeline[timeline] const trendData = getSleepRecoveryTrend(timeline) const factors = recoveryFactorsByTimeline[timeline] const heatmap = getRecoveryHeatmap(timeline) return (

Trends

How your key metrics have moved over time

setTimeline(value as TimelineOptionValue) } > {timelineOptions.map((option) => ( {option.label} ))}

{metrics.map((metric) => ( ))}

) } ``` ### `src/components/dashboards/bionis-dashboard/dashboard-layout.tsx` ```tsx import type { CSSProperties, ReactNode } from 'react' import { DashboardSidebar } from './components/bionis/sidebar' import { DashboardTopbar } from './components/bionis/topbar' import { SidebarProvider } from '@/components/ui/sidebar' import './dashboard.css' type DashboardLayoutProps = { children: ReactNode } export default function DashboardLayout({ children }: DashboardLayoutProps) { return (

{children}

) } ``` ### `src/components/dashboards/bionis-dashboard/dashboard.css` ```css @import url("https://cdn.jsdelivr.net/npm/@fontsource/geist@5/400.css"); @import url("https://cdn.jsdelivr.net/npm/@fontsource/geist@5/500.css"); @import url("https://cdn.jsdelivr.net/npm/@fontsource/geist@5/600.css"); @import url("https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5/400.css"); @import url("https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5/500.css"); .bionis-dashboard, body:has(.bionis-dashboard) [data-slot="sidebar"][data-mobile="true"], body:has(.bionis-dashboard) [data-slot="dropdown-menu-content"], body:has(.bionis-dashboard) [data-slot="sheet-content"], body:has(.bionis-dashboard) [data-slot="tooltip-content"] { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.2271 0.0625 260.828); --card: oklch(0.97 0 0); --card-foreground: oklch(0.2271 0.0625 260.828); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2271 0.0625 260.828); --primary: oklch(0 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.9761 0 0); --secondary-foreground: oklch(0.2271 0.0625 260.828); --muted: oklch(0.9761 0 0); --muted-foreground: oklch(0.5138 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.2271 0.0625 260.828); --destructive: oklch(0.574 0.232 29.36); --border: oklch(0.9401 0 0); --input: oklch(0.9401 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --sidebar: #fafafa; --sidebar-foreground: oklch(0.2271 0.0625 260.828); --sidebar-primary: oklch(0.2271 0.0625 260.828); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: var(--background); --sidebar-accent-foreground: oklch(0.2271 0.0625 260.828); --sidebar-border: #eeefe9; --sidebar-ring: oklch(0.708 0 0); --sidebar-muted: oklch(0.6993 0 0); --sidebar-muted-foreground: oklch(0.5138 0 0); --promo-gradient-from: #f7f9fc; --promo-gradient-to: #4d8dff; --bionis-blue: #1975f2; --live: #00b153; --score: var(--bionis-blue); --chart-sleep: var(--bionis-blue); --chart-sleep-fill: color-mix(in srgb, var(--bionis-blue) 10%, transparent); --chart-steps: #19c035; --chart-recovery: var(--bionis-blue); --chart-axis: #485066; --chart-grid: #e5e7eb; --chart-warn: #c57d00; --chart-warn-bg: #fef6e7; --chart-period: color-mix(in srgb, var(--bionis-blue) 85%, white); --chart-period-bg: color-mix(in srgb, var(--bionis-blue) 8%, transparent); --chart-tooltip-bg: #fafafa; --insight-prediction: #6366f1; --insight-vitals: #f72e2e; --insight-actions: #14b8a6; --vital-good: #269b6a; --prediction-warn: #9e6400; --prediction-danger: #dd524d; --status-processing: #2762ea; --status-completed: #16a34a; --status-exception: #dc2627; --source-oracle: #5946f9; --source-sharepoint: #09aff7; --source-concur: #ff4fa3; --trend: #2c9c5d; --metric-heart: #f72e2e; --metric-steps: #19c035; --metric-sleep: #6366f1; --metric-recovery: #22d3ee; --metric-vital: #269b6a; --metric-warn: #f59e0b; --heatmap-base: #22d3ee; --heatmap-med: var(--heatmap-base); --heatmap-low: color-mix(in srgb, var(--heatmap-base) 20%, white); --heatmap-high: color-mix(in srgb, var(--heatmap-base) 75%, black); --font-serif: "Instrument Serif", serif; --font-mono: "Geist Mono", ui-monospace, monospace; } .bionis-dashboard, body:has(.bionis-dashboard), body:has(.bionis-dashboard) [data-mobile="true"][data-sidebar="sidebar"] { --font-sans: "Geist", sans-serif; font-family: "Geist", sans-serif; font-weight: 400; } .bionis-dashboard { background-color: var(--background); color: var(--foreground); } .bionis-dashboard.dark, .dark .bionis-dashboard, .dark body:has(.bionis-dashboard) [data-slot="sidebar"][data-mobile="true"], .dark body:has(.bionis-dashboard) [data-slot="dropdown-menu-content"], .dark body:has(.bionis-dashboard) [data-slot="sheet-content"], .dark body:has(.bionis-dashboard) [data-slot="tooltip-content"] { --background: #000000; --foreground: oklch(0.985 0 0); --card: oklch(0.281 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.574 0.232 29.36); --border: oklch(1 0 0 / 12%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --sidebar: #111111; --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.922 0 0); --sidebar-primary-foreground: oklch(0.205 0 0); --sidebar-accent: #1a1a1a; --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); --sidebar-muted: oklch(0.535 0 0); --sidebar-muted-foreground: oklch(0.725 0 0); --promo-gradient-from: #090d16; --promo-gradient-to: #1d4ed8; --bionis-blue: #4d8dff; --score: var(--bionis-blue); --chart-sleep: var(--bionis-blue); --chart-sleep-fill: color-mix(in srgb, var(--bionis-blue) 18%, transparent); --chart-steps: #19c035; --chart-recovery: var(--bionis-blue); --chart-axis: oklch(0.708 0 0); --chart-grid: oklch(1 0 0 / 12%); --chart-warn: #f0b429; --chart-warn-bg: rgb(240 180 41 / 12%); --chart-period: color-mix(in srgb, var(--bionis-blue) 90%, white); --chart-period-bg: color-mix(in srgb, var(--bionis-blue) 15%, transparent); --chart-tooltip-bg: #171717; --insight-prediction: #818cf8; --insight-vitals: #f87171; --insight-actions: #2dd4bf; --vital-good: #34d399; --prediction-warn: #f0b429; --prediction-danger: #f87171; --metric-heart: #f87171; --metric-steps: #34d399; --metric-sleep: #818cf8; --metric-recovery: #38bdf8; --metric-vital: #34d399; --metric-warn: #f0b429; } .bionis-dashboard .font-serif { font-family: var(--font-serif); } .bionis-dashboard .font-mono { font-family: var(--font-mono); } /* custom classes */ .text-2\.5xl { font-size: 1.75rem; } .text-xxs { font-size: 0.6875rem; } .sidebar-badge-shadow { filter: drop-shadow(0 0.0125rem 0.125rem rgba(0, 0, 0, 0.05)); } @keyframes live-dot-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.75); opacity: 0; } } .live-dot-pulse { position: relative; } .live-dot-pulse::before, .live-dot-pulse::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; pointer-events: none; transform-origin: center; animation: live-dot-pulse 1.5s ease-out infinite; } .live-dot-pulse::after { animation-delay: 0.75s; } .no-scrollbar, .no-scrollbar * { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar, .no-scrollbar *::-webkit-scrollbar { display: none; } body:has(.bionis-dashboard) [data-slot='tooltip-content'] { background-color: var(--foreground) !important; color: var(--background) !important; } body:has(.bionis-dashboard) [data-slot='tooltip-content'] > svg { background-color: var(--foreground) !important; fill: var(--foreground) !important; } [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-item"], [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-sub-trigger"] { padding-inline: 0.625rem; padding-block: 0.625rem; } [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-checkbox-item"], [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-radio-item"] { padding-block: 0.625rem; padding-left: 0.625rem; padding-right: 2rem; } ``` ### `src/components/dashboards/bionis-dashboard/data.ts` Left out to keep this page a readable size (39,357 characters). It is in the registry item above. ### `src/components/dashboards/bionis-dashboard/demo.tsx` ```tsx import DashboardLayout from './dashboard-layout' import { DashboardContent } from './components/bionis/dashboard-content' import { TrendsContent } from './components/bionis/trends-content' import { DashboardNavigationProvider, useDashboardNavigation, } from './components/bionis/navigation' import { ThemeProvider } from './components/bionis/theme-provider' function DashboardRoute() { const { pathname } = useDashboardNavigation() return ( {pathname === '/trends' ? : } ) } export default function BionisDashboardDemo() { return ( ) } ```

{greeting}

Overall Wellness

Key metrics

Health Prediction

Body Vitals

Recommended actions

Sleep breakdown

Activity & HRV trend

Sleep & recovery over time

Recovery factors

Recovery heatmap

Trends