# 🚀 Quick Start - Phase 3.1 Testing ## Step-by-Step Testing Guide ### Before You Start Make sure both backend and frontend are running: ```bash # 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 ```bash curl http://10.0.0.243:8000/health # Should return: {"status":"healthy"} ``` ### Check Weekly Report API ```bash 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 ```bash 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