family-hub/QUICK_START_TESTING.md

🚀 Quick Start - Phase 3.1 Testing

Step-by-Step Testing Guide

Before You Start

Make sure both backend and frontend are running:

# Backend (Terminal 1)
cd backend
# Should already be running from earlier

# Frontend (Terminal 2)  
cd frontend
npm run dev

---

1. Generate Some Test Data (2 minutes)

Method 1: Use Kiosk

1. Go to: http://10.0.0.243:5173/kiosk
2. Select Lou → Complete 2-3 chores
3. Select Jess → Complete 2-3 chores
4. Select William → Complete 1-2 chores
5. Select Xander → Complete 1 chore
6. Select Bella → Complete 1 chore

Method 2: Use API Docs

1. Go to: http://10.0.0.243:8000/docs
2. Find "POST /api/v1/chores/{chore_id}/complete"
3. Click "Try it out"
4. Complete a few chores with different users

---

2. Test Weekly Reports (5 minutes)

Access Reports

URL: http://10.0.0.243:5173/reports

What to Check

✅ Stats Cards Show Numbers

• Total Completions > 0
• Active Members = number of users who completed chores
• Different Chores = types of chores completed

✅ Top Performers Section

• Shows users ranked by completion count
• Avatars display correctly
• Medal badges for top 3 (🥇🥈🥉)

✅ Completions by Day Chart

• Bar chart shows activity
• Days with completions show counts

✅ Recent Completions List

• Shows recently completed chores
• User names and avatars visible
• Timestamps show correctly

Test Week Navigation

1. Click "Previous Week" button

   • Should show "Last Week" or "1 Week Ago"
   • Date range updates
   • Shows that week's data (probably 0)

2. Click "Next Week" button

   • Returns to current week
   • Button disabled when at current week

---

3. Test User Statistics (3 minutes)

Access Your Stats

URL: http://10.0.0.243:5173/stats

What to Check

✅ Personal Metrics Cards

• Total Completions (all time)
• This Week count
• This Month count
• Favorite Chore displays

✅ Recent Completions

• Shows your last 10 completions
• Chore titles correct
• Timestamps accurate

✅ Visual Design

• Your avatar shows
• Cards are colorful and clear
• Layout is responsive

---

4. Test Navigation (1 minute)

From Dashboard

1. Go to: http://10.0.0.243:5173/dashboard
2. Look at header (top right)
3. Click "Reports" → Should go to reports page
4. Click "My Stats" → Should go to your stats page
5. Click "Settings" → Should go to settings
6. All links work smoothly

---

5. Complete a New Chore (3 minutes)

Test the Full Flow

1. Go to Kiosk: http://10.0.0.243:5173/kiosk

2. Select a user (your user)

3. Complete a chore

   • Current modal works (we'll enhance it later)

4. Go to Reports: http://10.0.0.243:5173/reports

5. Verify:

   • Total completions increased by 1
   • You appear in Recent Completions
   • Your count in Top Performers increased

6. Go to Your Stats: http://10.0.0.243:5173/stats

7. Verify:

   • Total increased by 1
   • This Week increased by 1
   • New completion in Recent Completions

---

6. Test With Notes (Future - When Modal Updated)

This will be tested after we integrate the EnhancedCompletionModal:

• Complete a chore with notes
• Check Reports → Recent Completions
• Verify notes display correctly

---

Expected Results

Reports Page Should Show:

📊 Stats Cards
   Total Completions: 10
   Active Members: 5
   Different Chores: 7

🏆 Top Performers
   1. 🥇 Lou - 4 completions
   2. 🥈 Jess - 3 completions
   3. 🥉 William - 2 completions

📈 Completions by Day
   Monday    ■■■■ 4
   Tuesday   ■■ 2
   Wednesday ■■■■ 4
   ...

📋 Recent Completions
   Clean Kitchen - by Lou - 2:30 PM
   Vacuum Living Room - by Jess - 1:15 PM
   ...

User Stats Page Should Show:

👤 Your Profile
   Total Completions: 4
   This Week: 4
   This Month: 4
   Favorite Chore: Clean Kitchen

📜 Recent Completions
   1. Clean Kitchen - Today 2:30 PM
   2. Load Dishwasher - Today 1:45 PM
   ...

---

Troubleshooting

"No Data" or "0 Completions"

Fix: Complete some chores first! Use the kiosk or API docs.

Reports Not Showing

Fix:

• Check backend is running (http://10.0.0.243:8000/health)
• Check frontend is running (http://10.0.0.243:5173)
• Check browser console for errors (F12)

Navigation Not Working

Fix:

• Clear browser cache (Ctrl+Shift+R)
• Check App.tsx routes are saved
• Restart frontend dev server

Avatars Not Loading

Fix:

• Verify API_BASE_URL in axios.ts is http://10.0.0.243:8000
• Check avatar files exist in backend/app/static/avatars/

---

Quick Verification Commands

Check Backend Health

curl http://10.0.0.243:8000/health
# Should return: {"status":"healthy"}

Check Weekly Report API

curl -H "Authorization: Bearer YOUR_TOKEN" \
  http://10.0.0.243:8000/api/v1/chores/reports/weekly
# Should return JSON with report data

Check User Stats API

curl -H "Authorization: Bearer YOUR_TOKEN" \
  http://10.0.0.243:8000/api/v1/chores/reports/user/1
# Should return JSON with user stats

---

Success Checklist

After testing, you should have verified:

• Backend migration ran successfully
• Backend is running and responsive
• Frontend is running and accessible
• Can view Weekly Reports page
• Can view User Stats page
• Navigation links work from Dashboard
• Data shows correctly in reports
• Top performers displays properly
• Recent completions show
• User stats are accurate
• Week navigation works
• New completions appear immediately

---

Next Steps After Testing

1. ✅ Test everything works (you're doing this now!)
2. 🎨 Optionally enhance kiosk with EnhancedCompletionModal
3. 📊 Optionally add charts (recharts library)
4. 📅 Start Phase 3.2 - Calendar Module
5. 💾 Commit to Gitea when ready

---

Getting Help

If something doesn't work:

1. Check browser console (F12 → Console tab)
2. Check backend logs in terminal
3. Verify URLs match your setup
4. Check PHASE_3_1_FRONTEND_COMPLETE.md for details

---

Ready? Start testing! 🚀

Visit: http://10.0.0.243:5173