Parent Dashboard

The parent dashboard is your central hub for managing all your children’s learning experiences. It provides a consolidated view of all learner accounts with quick access to key features.

Dashboard Layout

The dashboard consists of several key sections:

Welcome Header

// From dashboard-page.tsx:255
<Text style={styles.welcomeText}>Welcome, {user?.name || 'User'}!</Text>

A personalized greeting displays your name and sets the context for the dashboard.

Child Cards

Each child has a dedicated card showing real-time information:

Card Components

From dashboard-page.tsx:76-92, each card includes:

Avatar Circle - Displays the first letter of the child’s name
Name & Grade - Shows the child’s full name and current grade level
Stats Row - Three key metrics displayed side-by-side
Action Button - “Start Learning” to switch into learner mode

<View style={styles.childCard}>
  {/* Avatar with first letter */}
  <View style={styles.childAvatar}>
    <Text style={styles.childAvatarText}>
      {learner.name?.charAt(0)?.toUpperCase() ?? '?'}
    </Text>
  </View>
  
  {/* Name and grade badge */}
  <View style={styles.childNameContainer}>
    <Text style={styles.childName}>{learner.name}</Text>
    {gradeLabel && (
      <View style={styles.gradeBadge}>
        <Text style={styles.gradeBadgeText}>{gradeLabel}</Text>
      </View>
    )}
  </View>
</View>

Quick Stats Display

Each child card shows three metrics:

Lessons

Total number of completed lessons

lessonsCompleted = report?.analytics?.lessonsCompleted ?? 0

Avg Score

Average score across all completed lessonsCalculated automatically if not provided

Achievements

Total achievements earned

achievementsCount = report?.analytics?.achievementsCount ?? 0

Understanding Child Status

From dashboard-page.tsx:95-123, the stats row displays:

<View style={styles.childStatsRow}>
  <View style={styles.childStat}>
    <BookOpen size={14} color={colors.textSecondary} />
    <Text style={styles.childStatValue}>{lessonsCompleted}</Text>
    <Text style={styles.childStatLabel}>Lessons</Text>
  </View>

  <View style={styles.childStatDivider} />

  <View style={styles.childStat}>
    <BarChart2 size={14} color={colors.textSecondary} />
    <Text style={styles.childStatValue}>
      {avgScore !== null ? `${avgScore}%` : '--'}
    </Text>
    <Text style={styles.childStatLabel}>Avg Score</Text>
  </View>

  <View style={styles.childStatDivider} />

  <View style={styles.childStat}>
    <Award size={14} color={colors.textSecondary} />
    <Text style={styles.childStatValue}>{achievementsCount}</Text>
    <Text style={styles.childStatLabel}>Achievements</Text>
  </View>
</View>

If a child hasn’t completed any lessons yet, their average score will show ”—” instead of 0%, making it clear they’re just getting started.

Quick Actions

Start Learning Button

From dashboard-page.tsx:126-131:

<TouchableOpacity style={styles.childViewButton} onPress={onView}>
  <User size={14} color={colors.onPrimary} />
  <Text style={styles.childViewButtonText}>Start Learning as {learner.name}</Text>
  <ArrowRight size={14} color={colors.onPrimary} />
</TouchableOpacity>

This button:

Switches context to the selected child
Navigates to the learner dashboard
Allows you to experience learning as that child
Useful for testing and understanding their experience

Add Another Child

After you have at least one child, you can add more:

// From dashboard-page.tsx:273-279
<TouchableOpacity
  style={styles.addAnotherButton}
  onPress={() => setLocation('/add-learner')}
>
  <Plus size={16} color={colors.primary} />
  <Text style={styles.addAnotherButtonText}>Add Another Child</Text>
</TouchableOpacity>

Tools Row

From dashboard-page.tsx:282-298, quick links to key features:

<View style={styles.toolsRow}>
  <Link href="/reports">
    <Text style={styles.toolLink}>Reports</Text>
  </Link>
  <Text style={styles.toolDivider}>·</Text>
  <Link href="/rewards">
    <Text style={styles.toolLink}>Rewards</Text>
  </Link>
  {user?.role === 'ADMIN' && (
    <>
      <Text style={styles.toolDivider}>·</Text>
      <Link href="/admin">
        <Text style={styles.toolLink}>Admin Panel</Text>
      </Link>
    </>
  )}
</View>

First-Time Parent Experience

When you have no children yet, you’ll see:

Inline Add Child Form

From dashboard-page.tsx:136-228:

const InlineAddChildForm: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
  const [name, setName] = useState('');
  const [gradeLevel, setGradeLevel] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const handleSubmit = async () => {
    if (!name.trim()) {
      setError('Please enter a name');
      return;
    }
    const numericGrade = gradeToNumber(gradeLevel);
    if (numericGrade === null) {
      setError('Please select a grade level');
      return;
    }

    await apiRequest('POST', '/api/learners', {
      name: name.trim(),
      gradeLevel: numericGrade,
      role: 'LEARNER',
      parentId: user?.id,
    });
  };
};

Enter Child's Name

Provide your child’s first name or nickname

Select Grade Level

Choose from Kindergarten (K) through Grade 12The system converts “K” to grade level 0 internally

Click Add Child

Creates the learner account and refreshes the dashboard

Managing Multiple Children

The dashboard automatically adapts based on the number of children:

No Children
One or More Children

Shows inline form to add first child with helpful onboarding text

From dashboard-page.tsx:250:

const hasChildren = learners && learners.length > 0;

Loading States

While fetching learner data:

// From dashboard-page.tsx:259-261
{learnersLoading ? (
  <ActivityIndicator size="large" color={colors.primary} style={{ marginVertical: 24 }} />
) : hasChildren ? (
  // Show child cards
) : (
  // Show add child form
)}

The dashboard may take a few seconds to load if you have many children or extensive learning history. This is normal and ensures all data is accurate.

Data Refresh

The dashboard uses React Query for automatic data management:

// From dashboard-page.tsx:28-35
const { data: report, isLoading: reportLoading } = useQuery<ChildReport>({
  queryKey: [`/api/reports`, learner.id, 'progress'],
  queryFn: () =>
    apiRequest('GET', `/api/reports?learnerId=${learner.id}&type=progress`).then(
      (res: any) => res.data ?? res,
    ),
  enabled: !!learner.id,
});

Data refreshes automatically when you return to the dashboard, ensuring you always see the latest progress.

Next Steps

Add Your First Child

Learn how to create learner accounts

View Progress Reports

Dive into detailed analytics

Set Up Rewards

Create motivational incentives

Export Data

Download learner information

Parent Guide

Managing Learning

Advanced

Parent Dashboard Guide

Parent Dashboard

Dashboard Layout

Welcome Header

Child Cards

Card Components

Quick Stats Display

Lessons

Avg Score

Achievements

Understanding Child Status

Quick Actions

Start Learning Button

Add Another Child

Tools Row

First-Time Parent Experience

Inline Add Child Form

Managing Multiple Children

Loading States

Data Refresh

Next Steps

Add Your First Child

View Progress Reports

Set Up Rewards

Export Data

​Parent Dashboard

​Dashboard Layout

​Welcome Header

​Child Cards

​Card Components

​Quick Stats Display

Lessons

Avg Score

Achievements

​Understanding Child Status

​Quick Actions

​Start Learning Button

​Add Another Child

​Tools Row

​First-Time Parent Experience

​Inline Add Child Form

​Managing Multiple Children

​Loading States

​Data Refresh

​Next Steps

Add Your First Child

View Progress Reports

Set Up Rewards

Export Data

Parent Dashboard

Dashboard Layout

Welcome Header

Child Cards

Card Components

Quick Stats Display

Understanding Child Status

Quick Actions

Start Learning Button

Add Another Child

Tools Row

First-Time Parent Experience

Inline Add Child Form

Managing Multiple Children

Loading States

Data Refresh

Next Steps