Web Dashboard & TanStack Router
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The SweepBot Web Dashboard serves as the central "Command Center" for the sweepstakes casino player ecosystem. Built using React 18, Vite, and Tailwind CSS, it provides players with a comprehensive interface to monitor cross-platform portfolios, including Profit & Loss (P&L), Return to Player (RTP) analytics, and automated gaming sessions. The application follows a Single Page Application (SPA) architecture, ensuring high performance and a seamless user experience for data-heavy visualizations.
Navigation and routing are managed by TanStack Router (v1.56+), which provides type-safe routing and integrated data fetching. This architecture enables the dashboard to handle complex nested routes, such as platform-specific details and automation flow management, while maintaining strict TypeScript compliance across the frontend.
Sources: AGENTS.md:15-20, README.md:16-18, SWEEPBOT_UI_MAP.html:43-50
Routing Architecture
The routing system is built on a type-safe foundation using TanStack Router. This ensures that all navigation parameters, search queries, and route definitions are validated at compile-time, reducing runtime errors.
Route Structure and Hierarchy
The application uses a nested route structure where the AppShell component acts as a persistent layout wrapper for all authenticated routes. The routing logic distinguishes between public pages (like Sign In and Pricing) and protected dashboard components.
The diagram above illustrates the logical navigation flow from the root of the application through public and protected route branches.
Sources: apps/web/src/routeTree.tsx, SWEEPBOT_UI_MAP.html:100-140
Routing Components and Configuration
| Component | Function | Implementation Details |
|---|---|---|
routeTree.tsx | Main Router Definition | Defines the mapping between URL paths and React components. |
AppShell | Layout Wrapper | Provides the sidebar, topbar, and navigation menu across pages. |
TanStack Router | Type-Safe Navigation | Handles params (e.g., :id) and search state with full TS support. |
Error Boundaries | Fault Tolerance | Wraps routes to catch and display localized errors without crashing the app. |
Sources: AGENTS.md:57-60, CODEBASE_IMPROVEMENTS.md:42-48, QUICK_WINS_CHECKLIST.md:160-165
Dashboard Components
The Dashboard (Command Center) is the primary landing page for authenticated users. It aggregates data from various modules into a cohesive overview.
Core Visual Elements
- Header & Greeting: Features a dynamic greeting system that personalizes the experience based on the user's account status or time of day.
- Stat Cards: Four primary cards display key metrics such as total wagers, net profit, and total sessions using
AnimatedCountercomponents. - Analytics Charts: Utilizes Recharts and Chart.js to render 7-day activity trends and jackpot tracking.
- Activity Widgets: Includes the "Streak Widget" for tracking win/loss consistency and the "Jackpot Tracker" for real-time monitoring.
This graph represents the high-level UI composition of the Dashboard Command Center.
Sources: apps/web/src/pages/DashboardPage.tsx, SWEEPBOT_DASHBOARD.html:470-490, SWEEPBOT_UI_MAP.html:117-122
Feature Matrix and Readiness
The dashboard includes a feature matrix that tracks the implementation status and grade of various system components.
| Feature Category | Primary Components | Status |
|---|---|---|
| Auth & Accounts | Sign In, Profile CRUD, JWT Mgmt | Complete (A+) |
| Session Tracking | Batch Transactions, RTP Compute | Complete (A+++) |
| Jackpots | Leaderboard, 30-day History | Complete (A) |
| Automation | NLP Flow Engine, AST Builder | Partial (B) |
| Trust Index | Scoring Algo, TOS Stability | Partial (C) |
Sources: SWEEPBOT_DASHBOARD.html:610-650, AGENTS.md:120-140
Data Flow & State Management
The frontend maintains a robust data lifecycle, moving from interceptors in the browser extension to the dashboard's visual state via the API.
Request Lifecycle
The dashboard communicates with the Fastify API using a specialized client that handles retries, deduplication, and authentication tokens.
The sequence above shows how TanStack Query manages the asynchronous data state between the UI and the backend.
Sources: CODEBASE_IMPROVEMENTS.md:65-80, AGENTS.md:180-190
Performance & Resilience Hooks
To ensure a high-performance experience, the dashboard utilizes several custom performance hooks:
usePerformanceMonitor(): Measures render times to identify bottlenecks.useDebounce(): Used in platform filters and search inputs to limit API calls.useIntersectionObserver(): Enables lazy loading of heavy chart components or long lists.useSafeState(): Prevents memory leaks by ensuring state updates only occur on mounted components.
Sources: CODEBASE_IMPROVEMENTS.md:110-135, QUICK_WINS_CHECKLIST.md:30-45
User Interface & Experience (UX)
The design system is built on Tailwind CSS v4 with a zinc-900 dark theme, emphasizing a premium, technical aesthetic.
UI Enhancements
- Loading States: All data-driven pages utilize skeleton loaders (via
LoadingStatecomponent) to prevent layout shifts during fetches. - Empty States: Context-aware components guide users when data is missing, such as providing a "Gamepad2" icon for empty session lists.
- Animations: The application uses Framer Motion or custom CSS classes (e.g.,
animate-fade-in-up) for route transitions and micro-interactions. - Onboarding: A dedicated
OnboardingTourcomponent guides new users through the dashboard, highlighting stat cards and charts on their first visit.
Sources: QUICK_WINS_CHECKLIST.md:25-70, SWEEPBOT_DASHBOARD.html:40-60, CODEBASE_IMPROVEMENTS.md:50-55
Summary
The Web Dashboard is a sophisticated React application that serves as the visual interface for the SweepBot ecosystem. By leveraging TanStack Router, it provides a strictly typed and performant navigation experience. The dashboard's architecture prioritizes data integrity through Zod validation and resilience via enhanced API client logic, while the UI/UX layer utilizes modern animation and loading patterns to provide a high-quality "Command Center" for casino players.