Front-End Components

Overview

This document catalogs the visual elements and UI components needed for LBH Educate.

Screen-Level Components

Authentication Screen

Sign-In View

• App logo/branding
• Welcome message
• Three OAuth provider buttons (Google, Apple, Microsoft)
• Each button displays provider logo and "Sign in with [Provider]" text

Component States:

• Default state (ready for selection)
• Loading state (during OAuth flow)
• Error state (if authentication fails)

Home/Dashboard Screen

Components:

• Navigation bar/tabs (Journal, Ideas, Progress)
• Child selector (if user manages multiple children)
• "New Entry" button (prominent, always accessible)
• Quick stats summary (recent entries, skills tracked)
• Timeline preview (recent journal entries)

States:

• Empty state (no children/entries yet - onboarding prompts)
• Populated state (shows entries and progress)
• Multiple children view (carousel or grid of child profiles)

Child Profile Management Screen

Create/Edit Child Profile View:

• Profile photo upload/selector
• Name input field
• Date of birth picker
• Interests tags input (can add multiple)
• Curriculum approach selector (dropdown or radio buttons)
• Save/Cancel buttons

Child Profile Card (Summary View):

• Child photo
• Child name and age
• Quick progress indicators
• Tap to view full profile/timeline

Journal Entry Creation Screen

Photo Capture View:

• Camera viewfinder (or photo library picker)
• Capture button
• Switch camera button (front/back)
• Flash control
• Gallery thumbnail (to select existing photo)

Entry Details View:

• Selected photo preview (large, editable)
• Date/time picker (defaults to now, can be adjusted for past events)
• Freeform notes text area (multiline, expandable)
• "Analyze Photo" button or automatic AI processing indicator

AI Template Suggestion View:

• Suggested template card with icon
• Template name and description
• Pre-selected skills/behaviors (displayed as tags/chips)
• "Use Template" and "Skip" buttons
• Option to view other template suggestions

Skill & Behaviour Tagging View:

• Skills Section:
  • Selected skills displayed as tags/chips (from template or custom)
  • Quick-add skill selector (searchable dropdown or categorized by: Literacy, Communication, Numeracy, Motor, Analytical, Cognitive)
  • Each skill tag shows:
    • Skill name
    • Remove button (X)
    • Optional confidence/strength indicator
  • "Add custom skill" option
• Behaviours Section:
  • Selected character traits displayed as tags/chips (from template or custom)
  • Quick-add behaviour selector (searchable dropdown from 22 core behaviours)
  • Each behaviour tag shows:
    • Behaviour name
    • Remove button (X)
    • Optional confidence/strength indicator
  • "Add custom behaviour" option
• Save entry button

States:

• Photo selection state
• AI processing state (loading/analyzing)
• Template selection state
• Final review state before save
• Success confirmation state

Timeline/Journal View Screen

Components:

• Chronological list of journal entries
• Each entry card shows:
  • Entry photo (thumbnail or full-width)
  • Date/timestamp
  • Skills demonstrated (tag display with category color coding)
  • Behaviours demonstrated (tag display with distinct styling from skills)
  • Excerpt of notes (expandable)
  • Tap to view full entry
• Infinite scroll or pagination
• Filter/search bar
• Sort options (newest first, oldest first, by skill, by behaviour)

Empty State:

• Illustration or icon
• "No entries yet" message
• "Create your first entry" call-to-action button

Filter Panel:

• Date range picker
• Skill selector (multi-select, categorized by: Literacy, Communication, Numeracy, Motor, Analytical, Cognitive)
• Behaviour selector (multi-select from 22 character traits)
• Search text input

Entry Detail View

Components:

• Full-size photo display (pinch to zoom)
• Entry date/time
• Creator info (which parent/user logged it)
• Full freeform notes text
• All associated skills (tags with category color coding, tappable to filter by that skill)
• All associated behaviours (tags with distinct styling, tappable to filter by that behaviour)
• Edit button (if user has permissions)
• Delete button (with confirmation)
• Share button (export this specific entry)

Ideas Mode Screen

Gap Visualization View:

• "Skills to Develop" section showing identified gaps
• Visual indicators (progress bars, circular charts)
• Each gap shows:
  • Skill name
  • Context (e.g., "Not demonstrated in last 30 days")
  • "Find Activities" button

Activity Suggestions List:

• Activity cards showing:
  • Activity name and icon
  • Knowledge area context (e.g., "Household: Cooking")
  • Progression level indicator (1-3 scale with visual indicator)
  • Brief description
  • Target skills (tags with category colors)
  • Target behaviours (tags if applicable)
  • Time investment indicator
  • Location indicator (indoor/outdoor)
  • Materials needed preview
  • Age suitability
  • Bookmark button
  • "Learn More" to expand details
• Filter controls:
  • Knowledge area category (Household, Society, Well-being, etc.)
  • Progression level (1-3)
  • Time investment
  • Location
  • Materials available
  • Target skills
• Sort options (recommended, progression level, newest, easiest)

Activity Detail View:

• Activity name and large icon/image
• Knowledge area badge (e.g., "Household: Cooking")
• Progression level indicator (1-3 with description)
• Full description
• Target skills (detailed, with category labels and explanations)
• Target behaviours (if applicable, with explanations)
• Age range suitability
• Estimated time investment
• Location requirements
• Materials needed (full list)
• Step-by-step guidance (optional)
• "Bookmark" button
• "Mark as Completed" button (creates journal entry)
• Related activities suggestions (same knowledge area or similar skills, different progression levels)

Bookmarked Activities View:

• List of saved activity suggestions
• Quick access to try activities later
• Remove bookmark option
• Mark as completed option

Progress Dashboard Screen

Components:

• Child selector (if multiple children)
• Overall progress summary (visual chart or infographic)
• Skills breakdown:
  • Categorized skill progress by 6 core categories (Literacy, Communication, Numeracy, Motor skills, Analytical, Cognitive)
  • Visual progress indicators per skill
  • Trend arrows (improving/stable/declining)
  • Tap skill to see related journal entries
• Character Development (Behaviours) section:
  • Visual representation of demonstrated character traits
  • Frequency indicators for each behaviour
  • Most frequently demonstrated behaviours highlighted
  • Tap behaviour to see related journal entries
• Timeline chart showing entry frequency over time
• Recent achievements/milestones highlighted
• "Generate Live CV" button

Skill Detail View:

• Skill name and category
• Progress chart over time
• All journal entries demonstrating this skill (linked list)
• First demonstrated date
• Latest demonstration date
• Frequency indicators
• Related skills suggestions

Live CV Export Screen

Components:

• Date range selector (for report period)
• Export format options (PDF, JSON, etc.)
• Preview of report contents
• Customization options:
  • Include/exclude specific sections
  • Branding/header customization
  • Target audience selector (parent use, government reporting, educational institution)
• "Generate Report" button
• Share/download options after generation

Generated Report Preview:

• Scrollable report preview
• Download button
• Share button (email, cloud storage)
• Print option
• Regenerate with different settings

Search & Filter Components

Global Search Bar:

• Text input with search icon
• Autocomplete suggestions (skills, dates, keywords from notes)
• Recent searches dropdown

Filter Panel (Reusable):

• Date range picker
• Skill multi-select (categorized)
• Child selector (if multiple)
• Template type filter
• Clear all filters button
• Apply filters button

Component Variants

Button Variants

• Primary action (e.g., "Save Entry") - prominent, filled
• Secondary action (e.g., "Cancel") - outline or text
• Destructive action (e.g., "Delete") - red/warning color
• Icon-only buttons (navigation, quick actions)

Tag/Chip Variants

• Skill tag (color coded by category: Literacy, Communication, Numeracy, Motor, Analytical, Cognitive)
• Behaviour tag (distinct styling from skills, e.g., different shape or pattern)
• Knowledge area tag (for activity context)
• Interest tag
• Template tag
• Progression level badge (visual indicator for Level 1-3)
• Removable tags (with X button)
• Non-interactive tags (display only)

Card Variants

• Journal entry card (compact and expanded)
• Child profile card
• Activity suggestion card
• Template suggestion card
• Progress summary card

Navigation Patterns

• Bottom tab navigation (Journal, Ideas, Progress)
• Top navigation bar with back button
• Hamburger menu (if additional settings/options needed)
• Floating action button for "New Entry" (always accessible)

Layout Patterns

Mobile-First Design

• Single column layouts for primary content
• Full-width photo displays
• Bottom sheet modals for pickers and filters
• Pull-to-refresh on scrollable lists
• Swipe gestures for navigation (where appropriate)

Tablet/Responsive Layouts

• Two-column layouts where appropriate (e.g., timeline + detail view)
• Sidebar navigation instead of bottom tabs
• Larger photo galleries with grid view options
• Picture-in-picture for AI processing while user continues editing

Interaction Patterns

Photo-First Emphasis

• Camera accessible within one tap from any screen
• Large photo displays throughout app
• Photo as visual anchor for all entries

Speed Optimizations

• Auto-save drafts
• Minimal required fields
• Smart defaults (current date/time, current child)
• One-tap template acceptance
• Swipe actions for common tasks (delete, bookmark, edit)

AI Feedback

• Real-time processing indicators
• Confidence levels for suggestions
• Ability to accept/reject AI suggestions quickly
• Learn from user corrections over time (noted, not detailed in UI)

Notes

• This is a living document that will be updated after each brainstorming prompt
• Focus on visual elements and their purpose, not implementation code
• Consider responsive behavior and different states (loading, error, empty, etc.)
• Prioritize speed and ease of use - must be faster than traditional journaling apps