Page: Settings Hub

Code: SETT Route: /settings Access: Authenticated Priority: P0 Test Script: scripts/page-tests/test-SETT.sh

Purpose

Central hub for all user settings, providing quick access to profile, payments, notifications, and security settings.

Connections

Incoming (users arrive from)

Source Trigger Notes
HDER User menu → Settings From header user dropdown
SDSH Settings link From student dashboard

Outgoing (users navigate to)

Target Trigger Notes
SPRF Profile card click Update name, bio, avatar
SPAY Payments card click Stripe Connect setup
SNOT Notifications card click Email and push preferences
SSEC Security card click Password and account security

Sections

Header

  • • Page title: Settings
  • • Subtitle: Manage your account and preferences

Settings Cards

  • • Profile - Update name, bio, avatar (icon: user)
  • • Payments - Connect Stripe (icon: credit card, purple)
  • • Notifications - Email/push preferences (icon: bell)
  • • Security - Password and account (icon: lock)

User Stories Fulfilled

  • • US-U001: As a user, I want to access my settings easily

States & Variations

State Description
Default All settings cards visible and clickable

Mobile Considerations

  • • Cards stack vertically on mobile
  • • Touch-friendly tap targets

Analytics Events

Event Trigger Data
`page_view` Page load user_id
`settings_section_click` Card clicked section_name

Notes

  • • Simple hub page - no API calls needed
  • • Acts as navigation to specific settings sections
  • • Shows all settings regardless of user role

Test Coverage

Component ○ Page ○ SSR ○ API 0/0
Script: scripts/page-tests/test-SETT.sh
Page Test: tests/pages/settings/index.test.tsx ○

Settings

Manage your account and preferences

Profile

Update your name, bio, and avatar

Payments

Connect Stripe to receive payments

Notifications

Email and push notification preferences

Security

Password and account security