Skip to content

UI_ENHANCEMENT_VISUAL_GUIDE.md

Latest commit

 

History

History
332 lines (291 loc) · 16.4 KB

UI_ENHANCEMENT_VISUAL_GUIDE.md

File metadata and controls

332 lines (291 loc) · 16.4 KB

Flutter UI Enhancement - Visual Reference Guide

Parent Dashboard Layout

┌─────────────────────────────────────────────────────┐
│  Parent Dashboard                                   │
├─────────────────────────────────────────────────────┤
│ AppBar: [Link] [Refresh] [Theme] [Settings] [Logout]│
│         (Pending Approvals | Approved Tasks)        │
├─────────────────────────────────────────────────────┤
│                                                      │
│  ┌──────────────────────────────────────────────┐  │
│  │  👨‍👩‍👧‍👦 Your Family's Green Impact              │  │
│  │        📊 [Family Total Points]               │  │
│  └──────────────────────────────────────────────┘  │
│                                                      │
│  ┌──────────────────┐  ┌──────────────────┐       │
│  │ ➕ Add Task      │  │ 👁️ See My Child   │       │
│  └──────────────────┘  └──────────────────┘       │
│                                                      │
│  ┌──────────────────────────────────────────────┐  │
│  │  👨‍👧 My Children (3)                           │  │
│  └──────────────────────────────────────────────┘  │
│                                                      │
│  ┌──────────────────────────────────────────────┐  │
│  │  📋 Task List (Pending/Approved Tabs)         │  │
│  │  ├─ Task 1: Plant Tree - [Approve/Reject]    │  │
│  │  ├─ Task 2: Recycle - [Approve/Reject]       │  │
│  │  └─ Task 3: Water Plants - [Approve/Reject]  │  │
│  └──────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────┘

See My Child - Draggable Panel

BEFORE DRAG:
┌─────────────────────────────────────────────┐
│ [=] (handle bar)                            │ ← 25% height
├─────────────────────────────────────────────┤
│ Task Management          [Swipe to switch]  │
│ ●  ○  ○  (navigation dots)                  │
├─────────────────────────────────────────────┤
│ 👧 Child 1's Tasks                          │
│ ├─ Task: Plant Tree              [Pending] │
│ │  📸 Proof: [Photo Preview]                │
│ │  [❌ Reject] [✅ Approve]                 │
│ └─                                          │
└─────────────────────────────────────────────┘

AFTER DRAG (EXPANDED):
┌─────────────────────────────────────────────┐
│ [=] (handle bar)                            │
├─────────────────────────────────────────────┤
│ Task Management          [Swipe to switch]  │
│ ●  ○  ○  (navigation dots)                  │
├─────────────────────────────────────────────┤
│ 👧 Child 1's Tasks                          │
│ ├─ Task 1: Plant Tree      [Pending]        │
│ │  📸 Proof: [Large Photo]                   │
│ │  [❌ Reject] [✅ Approve]                 │
│ │                                           │
│ ├─ Task 2: Recycle         [Pending]        │
│ │  [❌ Reject] [✅ Approve]                 │
│ │                                           │
│ ├─ Task 3: Water Plants    [Approved] ✓    │
│ │                                           │
│ └─ [Scroll for more tasks...]               │
└─────────────────────────────────────────────┘

HORIZONTAL SWIPING:
       SWIPE LEFT ← → SWIPE RIGHT
┌─────────────────────────────────────────────┐
│ ●  ○  ○  → Switch between: Alex, Maya, Sam │
└─────────────────────────────────────────────┘

Settings Pages

Parent Settings

┌─────────────────────────────────────────────┐
│  Parent Settings                            │
├─────────────────────────────────────────────┤
│ [Children] [Screen Time] [Gmail & Display] │ ← Tabs
├─────────────────────────────────────────────┤
│                                              │
│ TAB 1: CHILDREN                              │
│ ├─ 👧 Alex                                   │
│ │  ├─ [📸 Toggle Proof] [🔗 Unlink]         │
│ │  └─ 📸 Proof Required: ON                  │
│ ├─ 👧 Maya                                   │
│ │  └─ 📸 Proof Required: OFF                 │
│ └─ 👦 Sam                                    │
│    └─ [Add more children...]                │
│                                              │
│ TAB 2: SCREEN TIME                           │
│ ├─ 👧 Alex: 45 min / 120 min ████░░░░░     │
│ ├─ 👧 Maya: 92 min / 120 min ███████░░░    │
│ └─ 👦 Sam: 120 min / 120 min ███████████   │
│         ⚠️ Screen time exceeded!            │
│                                              │
│ TAB 3: GMAIL & DISPLAY                       │
│ ├─ 📧 Gmail: Connected ✓ (parent@gmail.com)│
│ │  [🔗 Unlink]                              │
│ ├─ 🌙 Dark Mode: [Toggle]                    │
│ └─ [🚪 Sign Out]                            │
│                                              │
└─────────────────────────────────────────────┘

Child Settings

┌─────────────────────────────────────────────┐
│  Settings                                   │
├─────────────────────────────────────────────┤
│                                              │
│ 📋 ACCOUNT                                   │
│ ├─ 👤 Username: Alex123                      │
│ ├─ 👨‍👧 Parent: Mom Account                    │
│ └─ [🔒 Change Password]                      │
│                                              │
│ 🎨 DISPLAY                                   │
│ ├─ 🌙 Dark Mode: [Toggle]                    │
│ └─ 🔔 Notifications: [Toggle]                │
│                                              │
│ ℹ️ ABOUT                                     │
│ ├─ 📦 App Version: 1.0.0                     │
│ └─ ❤️ Made with Love by GreenTime Team      │
│                                              │
│ [🚪 Sign Out]                               │
│                                              │
└─────────────────────────────────────────────┘

Child Dashboard Updates

┌─────────────────────────────────────────────┐
│  Daily Missions 🌱                          │
├─────────────────────────────────────────────┤
│ AppBar: [Settings ⚙️] [Logout 🚪]          │ ← NEW
├─────────────────────────────────────────────┤
│                                              │
│  ┌──────────────────────────────────────┐  │
│  │ 🏆 Your Eco Stats                     │  │
│  │ 450 Eco Points | 45 min Screen Time  │  │
│  └──────────────────────────────────────┘  │
│                                              │
│  [💳 Redeem Now] [🎨 Theme]                 │
│                                              │
│  ┌──────────────────────────────────────┐  │
│  │ 📋 Your Tasks                         │  │
│  │ ├─ 🌳 Plant a Tree (50 pts) [❌]      │  │
│  │ │   Proof Required: [📸 Upload]       │  │
│  │ │                                    │  │
│  │ ├─ ♻️ Recycle Paper (20 pts) [✅]    │  │
│  │ │   Completed!                       │  │
│  │ │                                    │  │
│  │ └─ 💧 Water Plants (15 pts) [❌]     │  │
│  │    [Upload Proof]                   │  │
│  └──────────────────────────────────────┘  │
│                                              │
│ 🎉 [Confetti on task completion]            │
│                                              │
└─────────────────────────────────────────────┘

New Button Locations

Parent Dashboard AppBar

[Link] [Refresh] [Theme] [Settings ⚙️] [Logout]
                         └─ NEW SETTINGS BUTTON

Parent Dashboard Main Section

┌──────────────────┬──────────────────┐
│ ➕ Add Task      │ 👁️ See My Child   │
└──────────────────┴──────────────────┘
       ↓                    ↓
    Opens task          Opens draggable
    creation form       task panel
    (existing)          (NEW)

┌──────────────────────────────────────┐
│ 👨‍👧 My Children (3)                    │ ← NEW BUTTON
└──────────────────────────────────────┘
       ↓
  Opens children
  management screen
  (existing route)

Child Dashboard AppBar

[Settings ⚙️] [Logout 🚪]
└─ NEW      └─ Already existed

Navigation Flow Diagram

┌──────────────────────┐
│  Parent Dashboard    │
└──────────────────────┘
         │
    ┌────┼────┬─────────────────┐
    │         │                 │
    ▼         ▼                 ▼
  [+Task]  [See My Child]    [My Children]
    │      └──────────┬──────────┘           [Settings]
    │           (Draggable Panel)            │
    │    ┌──────────────────────┐            │
    │    │ • Alex  ○ Maya ○ Sam │            │
    │    │ [Approve/Reject ...]│            │
    │    └──────────────────────┘            │
    │                                        │
    └────────────────────────┬───────────────┘
                             ▼
                   ┌──────────────────────┐
                   │ Parent Settings      │
                   │ [Children][Time][Etc]│
                   └──────────────────────┘


┌──────────────────────┐
│  Child Dashboard     │
└──────────────────────┘
         │
    ┌────┼────────────────────┐
    │                         │
    ▼                         ▼
 [Settings]              [Redeem/Theme]
    │
    ▼
┌─────────────────────┐
│ Child Settings      │
│ [Account][Display]  │
└─────────────────────┘

Feature Checklist for Implementation

✅ COMPLETED

Parent Dashboard:

  • Settings button in AppBar
  • "See My Child" button (opens draggable panel)
  • "My Children" button (shows count)
  • Draggable task panel with swipe support
  • Navigation dots in panel
  • Approve/Reject buttons in panel
  • Proof photo display in panel

Settings Pages:

  • Parent settings (children, screen time, gmail)
  • Child settings (account, display, about)
  • Dark mode toggle (both)
  • Logout buttons (both)

Child Dashboard:

  • Settings button in AppBar
  • Navigation to settings page

🔄 WORKING

Firebase Integration:

  • Firestore task management
  • Authentication
  • TinyDB fallback
  • Windows desktop support

⏭️ OPTIONAL FUTURE

  • Profile picture uploads
  • Full photo gallery view
  • Push notifications
  • Enhanced offline sync
  • Usage analytics

Color Scheme Reference

PRIMARY (Blues):
- Light: #29B6F6, #0288D1
- Dark: #1976D2, #0D47A1

SECONDARY (Greens):
- Light: #66BB6A, #388E3C  
- Dark: #43A047, #2E7D32

ACCENT (Purples):
- #7B1FA2

STATUS:
- Success: #4CAF50 (Green)
- Warning: #FF9800 (Orange)
- Error: #F44336 (Red)
- Pending: #FFC107 (Amber)

Testing Scenarios

Parent Testing

  1. ✅ Click "See My Child" → Panel opens at 35% height
  2. ✅ Swipe left → Switch to next child
  3. ✅ Tap navigation dots → Jump to specific child
  4. ✅ Drag handle bar → Panel expands to 85%
  5. ✅ Click "Approve" → Task marked approved, points added
  6. ✅ Click "Reject" → Task goes back to pending
  7. ✅ Click Settings → Opens parent settings page
  8. ✅ Click "My Children" → Opens full management screen

Child Testing

  1. ✅ Click Settings → Opens child settings page
  2. ✅ Toggle dark mode → Theme changes
  3. ✅ Change password → Password updated
  4. ✅ Click Logout → Confirms and signs out
  5. ✅ Submit task with proof → Photo displays in parent panel

Generated: November 20, 2025 Status: ✅ COMPLETE & TESTED Build: Windows ✅ | Firebase ✅ | No Breaking Changes ✅