ServePanda v9 — Admin-Side Walkthrough

A guided click-path through every admin and owner surface. May 2026.

A guided click-path through every admin and owner surface in v9. Login creds and what to look at are inline. Walk it on your own pace; nothing here writes anything you can't undo by re-seeding.

Live site: https://service-hours-tracker.pages.dev

---

Three test logins to know

Role	Email	Password	What it sees
Teacher-Admin (Demo School)	admin@demo.school	AdminDemo!2026	Demo School data only
Teacher-Admin (Riverside)	admin@riverside.school	AdminDemo!2026	Riverside data only
Teacher-Admin (Hillcrest)	admin@hillcrest.school	AdminDemo!2026	Hillcrest data only
Owner (gives you SUPERADMIN button)	n/a — passcode at /owner/login	OwnerOnly2026Demo	Cross-tenant; can switch between any school

Owner cookie + admin login cookie can co-exist. With both, the SUPERADMIN button appears top-right; click → school picker → switch.

---

Part 1 — Owner side (cross-tenant view)

Step 1. Owner login

1. Go to https://service-hours-tracker.pages.dev/owner/login
2. Enter passcode: OwnerOnly2026Demo
3. You land at /owner — the owner dashboard.

What to look at: the dashboard summary (across all tenants). This is your view of the entire ServePanda customer base — once we have real customers, this is where you'll see who's who.

Step 2. Cross-tenant inventory

From /owner, click around to:

• /owner/access-requests — public signup-interest queue from /request-access. Currently empty (no traffic yet).
• /owner/usage — per-tenant counts: students, log entries, etc.

What to look at: Riverside / Hillcrest / Demo all show up with their respective counts. This is the data partition working.

Step 3. Get an admin login on top of owner

Owner cookie alone doesn't show you the SUPERADMIN button — you need an admin session too. Go to /login and log in as admin@demo.school with AdminDemo!2026.

You're now on /dashboard (Demo School's admin view).

Step 4. The SUPERADMIN button

Look at the top-right of the page. You should see a 🔧 SUPERADMIN button (this only renders when the owner cookie is valid).

1. Click it. A modal opens with all three schools listed.
2. Pick Riverside Charter Academy.
3. The page reloads. You're still logged in as admin@demo.school — but the data you see is now Riverside's.

What to look at: the school name in the header switches. The roster table changes (different students). The "override-verify queue" (if any) changes. This is tenant impersonation working — useful for support, demos, and seeing what each tenant's view looks like without needing their password.

5. Click the button again, switch to Hillcrest. Same effect.
6. Switch back to Demo when you're done.

This is the answer to Luke's "show me 3 demo tenants and the picker."

---

Part 2 — Admin side (per-tenant)

These are the surfaces a real teacher-admin (the school's day-to-day user) interacts with. Best to walk these as admin@demo.school (most populated dataset).

Step 5. Dashboard

URL: /dashboard

What to look at:

• Roster table with every student in the school, status against the requirement (Behind / On track / Completed).
• Filter row: by grad year, status, search.
• + Add student and + Log entry buttons at the top — both trigger modals; both work.
• Override-verify queue (if there are pending log entries with no site host): this is where the admin clicks to mark a hour as verified-by-staff when no site host exists.
• Tabbed by requirement at the top: each requirement gets its own tab.
• Status as of date footer — small thing but it grounds the snapshot.

Step 6. Configure (/config)

URL: /config

What to look at:

• School name + program-end-date + program-end-name at the top (admin-editable; default is "Graduation").
• Requirements list below: each requirement has a name, target-per-year, total target, and a checkpoint table (date + expected amount + label). This is where the new admin-configurable pacing curve lives.
• Try adding a checkpoint row — it should save inline.

The slider UI is iter-10 work; iter-9 ships the table.

Step 7. Import CSV (/import)

URL: /import

What to look at: Two upload boxes — students roster and log entries. Both validate row-by-row and report back errors. Useful for the typical school onboarding flow.

Step 8. Sites + site hosts (/admin/sites)

URL: /admin/sites

What to look at:

• List of organizations / nonprofits where students serve.
• Each site has an optional "site host" assigned (the external verifier).
• Admin can add a site, register a site host (sends invite link — actual email send is iter-10 deferred; Borty surfaces a manual login token instead).

Step 9. Bump-reminder admin queue (/admin/bumps)

URL: /admin/bumps

What to look at:

• Two tabs: "Behind students" and "Stale verifications."
• "Send bump" button per row records bumps.sent_at (actual email send is iter-10 deferred — currently records the intent only).
• Cadence dropdown at the top (7d / 14d / 30d) saves to school config.

Step 10. Notification preferences (/settings/notifications)

URL: /settings/notifications

What to look at:

• Per-role checkboxes: events × channels (email + web-push).
• Saves to user record. Actual sends not wired — preference persistence only (iter-10).

---

Part 3 — Pricing + subscription experience

Step 11. Public /pricing

URL: /pricing (works without login)

What to look at:

• Four tiers: Standard $79 / Plus $129 (featured) / Scale $179 / Enterprise (custom).
• Monthly/annual toggle flips the prices and reveals "save $349/$549/$649" copy.
• Subscribe buttons on each tier card. Standard / Plus / Scale → POST /api/billing/checkout (creates Stripe Checkout session, redirects). Enterprise → /request-access.

Step 12. Try the subscribe flow (test mode)

This will only work end-to-end once STRIPE_WEBHOOK_SECRET is set as a Pages secret (see the handoff path in #bergs-borty). Until then:

• Clicking Subscribe + Stripe-test-card 4242 4242 4242 4242 will succeed at Stripe's side
• The redirect back to /billing/success will work
• The webhook signature verification will fail without the secret → subscription state in our DB stays null / "demo mode"
• After you wire the webhook secret, subscriptions move to active and the demo-mode banner clears

Step 13. Subscription banner on dashboard

URL: /dashboard (as admin)

What to look at:

• Top of page: a banner indicating subscription state.
• Currently: "Demo mode — subscribe to unlock production features" (because no school has an active subscription yet).
• After Stripe wiring completes: clears for active subscriptions; shows yellow "Payment failed" for past_due; red "Subscription ended" for canceled.

---

What's wired vs. stubbed (clean ledger)

Feature	Status
Multi-tenant data partition + SUPERADMIN switcher	✅ Live
3 populated demo tenants	✅ Live
Tiered pricing on /pricing (4 tiers, monthly/annual toggle)	✅ Live
Stripe Checkout session creation	✅ Code live; activates with STRIPE_SECRET_KEY (set)
Stripe webhook signature verification	⏳ Awaiting STRIPE_WEBHOOK_SECRET
Subscription DB state + banner	✅ Live (banner shows demo mode without subscription)
Email send (notifications, bumps, site-host invites)	⏳ iter-10
Native phone app	⏳ iter-10+
Drag-handle slider for checkpoint editor	⏳ iter-10
Real Google OAuth for staff signup	⏳ iter-10

---

Iter-10 candidates (informed by walkthrough)

If you find anything sticky in the walk-through, that's the iter-10 priority. Likely candidates already on radar: - Wire actual email sends for notifications + bumps + site-host invites (Resend or Postmark; ~3-4 hr) - Drag-handle slider checkpoint editor (~4-6 hr; UX polish vs the iter-9 table form) - Real Google OAuth flow for staff (~2-3 hr; client provisioning + redirect handler) - Stripe price-tier auto-detection by school size (~2 hr; soft-enforces tier pricing rather than relying on customer self-selection)

Ping me with whatever you find.