Skip to main content

​
Overview

The Dashboard (Today page) is your central hub for monitoring your baby’s daily activities. It displays live timing information, daily summaries, upcoming reminders, and provides quick access to log new activities.

​
Key Features

​
Live Timer Cards

Four prominent cards show elapsed time since the last logged activity:

Last Feed

Shows time since last bottle or breast feed, with feed details (volume, type)

Diaper

Time since last diaper change, showing type (wet, dirty, mixed)

Sleep

Active sleep timer when baby is sleeping, or time since last wake-up

Medicine

Time since last medication dose, with medicine name

​
Implementation

The dashboard uses real-time updates via the useLiveTimer hook:
src/app/page.tsx
const now = useLiveTimer();

const lastEvents = useQuery(
  api.events.getLastEventsByTypes,
  babyId
    ? {
        babyId,
        eventTypes: [
          EVENT_TYPES.FEED_BOTTLE,
          EVENT_TYPES.FEED_BREAST,
          EVENT_TYPES.DIAPER,
          EVENT_TYPES.SLEEP,
          EVENT_TYPES.MED_DOSE,
        ],
      }
    : "skip"
);

​
Daily Summary

A comprehensive summary card displays today’s statistics:
  • Feeds: Total count and volume (ml)
  • Diapers: Total count
  • Sleep: Total hours
  • Other metrics: Calculated from event data
src/app/page.tsx
const dailyAggregates = useQuery(
  api.events.getDailyAggregates,
  babyId ? { babyId, date: todayStr } : "skip"
);
Daily aggregates are computed server-side using Convex queries for optimal performance.

​
Next Reminder

If you have reminder rules configured, the next upcoming reminder appears prominently: 
const upcomingReminders = useQuery(
  api.events.computeUpcomingReminders,
  babyId ? { babyId } : "skip"
);

const nextReminder = upcomingReminders?.[0] ?? null;
Overdue reminders are highlighted in red to draw attention.

​
Quick Suggestions

Intelligent suggestion pills appear based on:
  • Time since last feed
  • Daily patterns
  • Typical feeding intervals
  • Baby’s age and needs
Implemented via the QuickSuggestionsPills component with ML-based pattern detection.

​
Activity Feed

The activity feed shows recent events in reverse chronological order. Each entry displays:
  • Event type icon and color
  • Timestamp
  • Details (e.g., feed amount, sleep duration)
  • Caregiver who logged it
  • Notes and photos (if attached)
See Activity Tracking for more details on event types.

​
Quick Actions

Fixed action buttons at the bottom provide one-tap access to log:
  • Feed (bottle or breast)
  • Diaper change
  • Sleep start/end
  • Medicine dose
These buttons trigger the QuickLoggerDrawer component:
src/app/page.tsx
window.dispatchEvent(new CustomEvent('openQuickLogger'))

​
Gender Theming

The dashboard adapts its color scheme based on the baby’s configured gender: 
const genderTheme = useGenderTheme();
const genderGreeting = useGenderGreeting();
const genderEmoji = useGenderEmoji();
This provides personalized styling throughout the interface.

​
Baby Age Display

The dashboard header prominently displays the baby’s current age: 
{babyProfile.dob && (
  <div className={`shrink-0 ${genderTheme.primaryLight} ${genderTheme.border} border rounded-2xl px-4 py-2 text-center`}>
    <span className={`material-symbols-outlined ${genderTheme.text} text-[18px] leading-none`}>cake</span>
    <p className="text-sm font-bold text-espresso mt-0.5">{formatBabyAge(babyProfile.dob)}</p>
  </div>
)}

​
Loading States

The dashboard implements skeleton loading for a smooth user experience: 
{babyLoading ? (
  <div className="space-y-6">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 lg:gap-4">
      {[0, 1, 2, 3].map((i) => (
        <div key={i} className="p-4 rounded-[20px] shadow-sm border bg-white border-muted/10 animate-pulse">
          {/* Skeleton content */}
        </div>
      ))}
    </div>
  </div>
) : (
  // Actual content
)}

Activity Tracking

Log and manage all baby activities

Baby Profiles

Configure baby settings and preferences

Reminders

Set up automated reminders

Weekly Digests

View AI-generated weekly summaries

Build docs developers (and LLMs) love

Get started for freeTalk to us