Dashboard

Overview

The Dashboard is the primary landing page after login, providing an at-a-glance view of putting performance and a comprehensive session history table.

Core Features

All-Time Stats Summary

Displayed in a grid of stat cards:

• Makes: Total putts made

• Misses: Total putts missed

• Accuracy: Make percentage (makes / total putts × 100)

• Fastest 21: Best time to make 21 consecutive putts (in seconds)

Dynamic Display: Stats section hides when:

• A session is expanded for detailed view

• User scrolls down in the session table

Session History Table

Table Columns:

1. Details: Expandable button to show session breakdown

2. Session #: Privacy-friendly daily session number (newest = highest)

3. Type: Session category (Practice, Duel, League, etc.)

4. Duration: Session length in minutes

5. Makes: Total successful putts

6. Misses: Total unsuccessful putts

7. Streak: Best consecutive makes in session

8. Fastest 21: Time to complete 21 consecutive makes

9. PPM: Putts Per Minute

10. MPM: Makes Per Minute

11. Max 60s: Maximum makes in any 60-second period

Pagination:

• 21 sessions per page (industry-standard golf number)

• Standard pagination controls

• Maintains expanded state across page changes

• Pagination embedded inside session-list-container

Session Row Expansion

When a session is expanded:

• Displays detailed category breakdown

• Shows make/miss analysis by distance and angle

• Performance metrics visualization

• Scroll-to-view automatic positioning

• Dynamic height adjustment for optimal viewing

Data Management

• Refresh Button: Manual data synchronization

• Career Stats Link: Navigate to comprehensive player statistics

• Daily Session Numbering: Privacy-first numbering system

  • Sessions numbered per day (1, 2, 3...)

  • Newest sessions get highest numbers

  • Prevents exposure of total session count

Key Insights

Performance Optimization

• Paginated data loading (21 sessions per page)

• Memoized calculations for session numbers

• Scroll event throttling

• Conditional rendering for large datasets

Session Numbering Algorithm

// Newest session gets highest number on each date
// Example: If 3 sessions on 2025-01-15
// Session 1 (oldest) = #1
// Session 2 (middle) = #2
// Session 3 (newest) = #3

Privacy Features

• Session numbers reset daily

• No global session count exposed

• Time-based privacy protection

State Management

• expandedSessionId: Tracks which session is currently expanded

• isScrolling: Monitors scroll state for UI optimization

• currentPage: Manages pagination state

• sessionsLoading: Loading state for async data fetching

Responsive Behavior

• Desktop: Full table with all columns

• Tablet: Maintains table structure with adjusted spacing

• Mobile: Optimized column widths and stacking

---