guild-portal-ui-implementation

Guild Portal UI Revamp — Implementation Plan

Context

The member portal currently looks like a generic loyalty dashboard (6 stats cards, flat timeline, simple top nav). The design docs describe it as an RPG character sheet — identity, progression, quests, inventory. We’re redesigning the portal to match that vision: 5 pages with sidebar navigation, character sheet as home, game-flavored language throughout.

This plan covers the information architecture and layout revamp. Theming/skinning (warcraftcn, matsu, etc.) comes later as a separate phase.

Build Order

Phase 0: Install shadcn components

pnpm dlx shadcn@latest add sidebar sheet dropdown-menu tabs skeleton

Phase 1: Sidebar + Layout

Replace the top nav with a collapsible sidebar.

Page	Route	Icon
Character Sheet	/dashboard	ScrollIcon
Adventure Log	/dashboard/activity	BookOpenIcon
Quest Log	/dashboard/quests	MapIcon
Rewards	/dashboard/rewards	PackageIcon
Guild Hall	/dashboard/tiers	CastleIcon

New: app-sidebar.tsx, nav-main.tsx, nav-user.tsx Modify: dashboard/layout.tsx (SidebarProvider + AppSidebar + SidebarInset) Delete: portal-header.tsx

Phase 2: Character Sheet (dashboard home)

Full rewrite of dashboard/page.tsx. Sections:

1. Character Identity — portrait, name/nickname, class badge, level, faction placeholder
2. XP Bar (hero) — dominant element, taller bar, prominent level display
3. Tier + Points — 2-col: tier info + points with store credit equivalent
4. Stats Row — compact single card (purchases, visits, member since + placeholders)
5. Recent Activity — last 3 items + “View full log →”
6. Active Quests — placeholder + “View all quests →“

Phase 3: Placeholder Pages

• dashboard/quests/page.tsx — tabs (Active/Available/Completed), mock quest cards
• dashboard/rewards/page.tsx — tabs (Inventory/Shop), mock reward items

Phase 4: Adventure Log Redesign

• Add filter tabs (All/Purchases/Check-ins/Quests/Events)
• Group entries by month
• Level-up moments as timeline entries (future enhancement)

Phase 5: Guild Hall Redesign

• Horizontal tier progression layout
• Real value math: “This month with Gold: earned X XP, saved $Y,net+$Z”
• Next tier comparison: “With Mithril you would have…”

Verification

1. pnpm build — no type errors
2. All 5 pages navigable via sidebar (desktop + mobile)
3. Character Sheet shows real member data
4. Adventure Log renders with month grouping + filters
5. Auth redirect works (unauthenticated → /login)
6. Logout works from sidebar

Related

• guild-portal-ui-mockups — ASCII wireframes this implements
• guild-visual-direction — cassette futurism aesthetic
• membership-platform — backend architecture