005 view history page (#18)

* phase 3, failing tests

* us3 tests pass

* working

---------

Co-authored-by: aligneddev <aligneddev@github.com>

Author: aligneddev

.gitignore

@@ -63,4 +63,3 @@ src/.vs/*
 .fake
 src/BikeTracking.Frontend/test-results/
 src/BikeTracking.Frontend/playwright-report/
-src/BikeTracking.Frontend/playwright-report/index.html

.specify/scripts/powershell/common.ps1

@@ -84,6 +84,16 @@ function Test-FeatureBranch {
         Write-Output "Feature branches should be named like: 001-feature-name"
         return $false
     }
+
+    # Enforce max 4 words in branch suffix (after the numeric prefix).
+    $suffix = $Branch -replace '^[0-9]{3}-', ''
+    $suffixParts = ($suffix -split '-') | Where-Object { $_ }
+    if ($suffixParts.Count -gt 4) {
+        Write-Output "ERROR: Feature branch suffix exceeds 4 words. Current branch: $Branch"
+        Write-Output "Feature branches must use max 4 words after the numeric prefix (e.g., 005-view-history-page)."
+        return $false
+    }
+
     return $true
 }
 

.specify/scripts/powershell/create-new-feature.ps1

@@ -135,6 +135,20 @@ function ConvertTo-CleanBranchName {
 
     return $Name.ToLower() -replace '[^a-z0-9]', '-' -replace '-{2,}', '-' -replace '^-', '' -replace '-$', ''
 }
+
+function Limit-BranchSuffixWords {
+    param(
+        [string]$Suffix,
+        [int]$MaxWords = 4
+    )
+
+    $parts = ($Suffix -split '-') | Where-Object { $_ }
+    if ($parts.Count -le $MaxWords) {
+        return ($parts -join '-')
+    }
+
+    return (($parts | Select-Object -First $MaxWords) -join '-')
+}
 $fallbackRoot = (Find-RepositoryRoot -StartDir $PSScriptRoot)
 if (-not $fallbackRoot) {
     Write-Error "Error: Could not determine repository root. Please run this script from within the repository."
@@ -212,6 +226,9 @@ if ($ShortName) {
     $branchSuffix = Get-BranchName -Description $featureDesc
 }
 
+# Enforce a consistent word cap for branch suffixes.
+$branchSuffix = Limit-BranchSuffixWords -Suffix $branchSuffix -MaxWords 4
+
 # Determine branch number
 if ($Number -eq 0) {
     if ($hasGit) {

specs/005-view-history-page/checklists/requirements.md

@@ -0,0 +1,37 @@
+# Specification Quality Checklist: Ride History Page
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning  
+**Created**: 2026-03-26  
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified
+- [x] Scope is clearly bounded
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- All checklist items pass. Spec is ready for `/speckit.clarify` or `/speckit.plan`.
+- Assumption made: dashboard page already exists as a logged-in shell; this feature adds widgets to it.
+- Assumption made: "this month" and "this year" calculated relative to rider's local system date.
+- Grid pagination/virtualization approach is left as an implementation decision.

specs/005-view-history-page/checklists/spec.md

@@ -0,0 +1,116 @@
+# Feature Specification: Ride History Page
+
+**Feature Branch**: `005-view-history-page`  
+**Created**: 2026-03-26  
+**Status**: Draft  
+**Input**: User description: "Create the view history page to see all past miles. Add summaries at the top for miles this month, this year, and overall total with visuals. Show all rides in a TanstackUI grid with filters for date ranges. Show total miles for the date range. Make components so the total overall and year can be shown on the dashboard as well"
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - View Ride History with Summary Stats (Priority: P1)
+
+As a logged-in rider, I want to open a history page that shows all my past rides and my overall mileage totals so I can understand my cumulative progress at a glance.
+
+**Why this priority**: Seeing the history and summary stats is the core purpose of this page. Without it the feature provides no value. All other stories build on this foundation.
+
+**Independent Test**: Can be fully tested by navigating to the history page after recording at least one ride and verifying that the page displays summary tiles (this month, this year, all-time) and at least one row in the ride list.
+
+**Acceptance Scenarios**:
+
+1. **Given** the rider is logged in and has recorded rides, **When** they navigate to the history page, **Then** three summary tiles are visible at the top showing miles this month, miles this year, and all-time total miles.
+2. **Given** the rider is logged in and has recorded rides, **When** they view the history page, **Then** all rides appear in a data grid showing at minimum ride date and miles.
+3. **Given** the rider is logged in and has no rides recorded, **When** they navigate to the history page, **Then** all three summary tiles show zero and the grid displays an empty-state message.
+
+---
+
+### User Story 2 - Filter Rides by Date Range and See Filtered Total (Priority: P2)
+
+As a rider, I want to narrow the ride list to a specific date range and see the total miles for that period so I can track progress over custom time windows (e.g., a training block or vacation).
+
+**Why this priority**: Date range filtering with a running total is a key analytical tool that makes raw history data actionable. It can be developed and tested independently of the dashboard work.
+
+**Independent Test**: Can be fully tested by recording rides on multiple dates, applying a date range filter that includes only some rides, and confirming the grid and total reflect only the rides within the selected range.
+
+**Acceptance Scenarios**:
+
+1. **Given** the rider has rides on various dates, **When** they set a start date and end date filter, **Then** only rides within that inclusive range appear in the grid.
+2. **Given** a date range filter is applied, **When** the rider views the filtered grid, **Then** the total miles displayed below or near the grid reflects only the filtered results.
+3. **Given** a date range filter is applied that matches no rides, **When** the rider views the grid, **Then** an empty-state message is shown and the filtered total displays zero.
+4. **Given** a date range filter is active, **When** the rider clears the filter, **Then** all rides are shown again and the total reflects the full history.
+
+---
+
+### User Story 3 - Dashboard Mileage Widgets (Priority: P3)
+
+As a rider, I want to see my all-time total miles and year-to-date miles on the main dashboard so I can check my key stats without navigating to the full history page.
+
+**Why this priority**: Dashboard visibility of key stats increases daily engagement and gives riders instant motivation on login. It relies on the same data computed for the history page summary tiles and shares the same reusable components.
+
+**Independent Test**: Can be fully tested independently by verifying the dashboard page displays the all-time total and year-to-date mileage widgets, and that the values match those shown on the history summary tiles for the same rider.
+
+**Acceptance Scenarios**:
+
+1. **Given** the rider is logged in and has recorded rides, **When** they view the dashboard, **Then** the all-time total miles and year-to-date miles are visible.
+2. **Given** the rider records a new ride, **When** they visit the dashboard, **Then** the displayed totals reflect the newly added miles on next load.
+3. **Given** the rider has no rides recorded, **When** they view the dashboard, **Then** the total and year-to-date widgets show zero.
+
+---
+
+### Edge Cases
+
+- What happens when a rider has rides but none in the current month? The "this month" summary tile must show zero.
+- What happens when a rider has rides but none in the current year? The "this year" summary tile must show zero.
+- How does the grid handle a very large number of rides? The grid must remain navigable (pagination or virtualization).
+- What happens if the start date of the filter is after the end date? The system must prevent or handle this invalid range gracefully.
+- What happens when ride data includes partial dates near timezone boundaries? Displayed dates should reflect the rider's local time as originally entered.
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: System MUST provide a History page accessible only to authenticated riders.
+- **FR-002**: System MUST display three summary stat tiles at the top of the History page: miles this month, miles this year, and all-time total miles.
+- **FR-003**: Summary stat tiles MUST include a visual element (such as an icon, chart, or graphical indicator) alongside the numeric total.
+- **FR-004**: System MUST display all rides for the authenticated rider in a data grid on the History page.
+- **FR-005**: The data grid MUST display at minimum: ride date and miles for each ride.
+- **FR-006**: The data grid MUST display optional fields (ride duration and temperature) when those values were recorded for a ride.
+- **FR-007**: System MUST provide date range filter controls (start date and end date) above the data grid.
+- **FR-008**: When a date range filter is applied, the data grid MUST show only rides with dates within the inclusive range.
+- **FR-009**: System MUST display a total miles value that reflects only the rides currently visible in the grid (filtered or unfiltered).
+- **FR-010**: When no date range filter is active, the data grid MUST show all rides and the total MUST reflect all-time miles.
+- **FR-011**: System MUST show an empty-state message in the grid when no rides match the current filter.
+- **FR-012**: Summary stat tiles MUST be implemented as reusable components that can be embedded in other pages.
+- **FR-013**: The Dashboard page MUST embed the all-time total miles and year-to-date miles components using the reusable stat components from FR-012.
+- **FR-014**: Summary stat values MUST be accurate as of the most recent page load; real-time push updates are not required.
+
+### Key Entities
+
+- **Ride**: A single recorded ride event with ride date, miles, optional duration in minutes, and optional temperature. Rides are associated with a specific rider and are immutable once recorded.
+- **RideSummary**: Aggregated total miles for a defined period — this month, this year, all-time, or a custom date range. Derived by summing ride miles for the period.
+- **DateRangeFilter**: A user-supplied start date and end date used to restrict which rides appear in the grid and which rides contribute to the filtered total.
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: Riders can navigate to the History page and see their complete ride list and summary stats in a single view without additional interactions.
+- **SC-002**: All three summary tiles (this month, this year, all-time) are visible above the fold on standard laptop screen sizes without scrolling.
+- **SC-003**: Riders can apply a date range filter and have the grid and total update without a full page reload.
+- **SC-004**: The filtered total always matches the sum of miles in the currently visible grid rows.
+- **SC-005**: Dashboard mileage widgets display values consistent with the History page summary tiles for the same rider.
+- **SC-006**: Riders with no recorded rides see zeros rather than errors or blank spaces for all stats.
+
+## Assumptions
+
+- Ride dates are stored and displayed using the local time value entered by the rider (as established in feature 004).
+- "This month" and "this year" are calculated relative to the rider's system locale/date, consistent with how ride date/time input works.
+- The dashboard page already exists (or will exist as part of the logged-in shell); this feature adds widgets to it rather than creating a new dashboard from scratch.
+- Grid pagination or virtualization is acceptable to handle large ride counts; infinite scroll or traditional pagination are both valid approaches.
+- Visual indicators on summary tiles do not require animated or real-time charts; static icons or simple graphical displays satisfy the requirement.
+
+## Out of Scope
+
+- Editing or deleting recorded rides (read-only history view).
+- Exporting ride data to CSV or other formats.
+- Sharing ride history with other users.
+- Real-time push updates when a new ride is recorded in another browser tab.

specs/005-view-history-page/contracts/ride-history-api.yaml

@@ -0,0 +1,163 @@
+openapi: 3.0.3
+info:
+  title: BikeTracking Ride History API
+  version: 1.0.0
+  description: Authenticated ride history query with summaries and date-range filtering.
+
+paths:
+  /api/rides/history:
+    get:
+      summary: Get ride history rows with summary totals for the authenticated rider
+      operationId: getRideHistory
+      parameters:
+        - in: query
+          name: from
+          schema:
+            type: string
+            format: date
+          required: false
+          description: Inclusive start date filter in rider-local date semantics.
+        - in: query
+          name: to
+          schema:
+            type: string
+            format: date
+          required: false
+          description: Inclusive end date filter in rider-local date semantics.
+        - in: query
+          name: page
+          schema:
+            type: integer
+            minimum: 1
+            default: 1
+          required: false
+        - in: query
+          name: pageSize
+          schema:
+            type: integer
+            minimum: 1
+            maximum: 200
+            default: 25
+          required: false
+      responses:
+        '200':
+          description: History and summaries resolved.
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RideHistoryResponse'
+        '400':
+          description: Invalid query parameters (e.g., from > to)
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorResponse'
+        '401':
+          description: Unauthorized
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorResponse'
+
+components:
+  schemas:
+    MileageSummary:
+      type: object
+      required:
+        - miles
+        - rideCount
+        - period
+      properties:
+        miles:
+          type: number
+          minimum: 0
+        rideCount:
+          type: integer
+          minimum: 0
+        period:
+          type: string
+          enum:
+            - thisMonth
+            - thisYear
+            - allTime
+            - filtered
+          description: The time period this summary represents.
+
+    RideHistoryRow:
+      type: object
+      required:
+        - rideId
+        - rideDateTimeLocal
+        - miles
+      properties:
+        rideId:
+          type: integer
+          format: int64
+        rideDateTimeLocal:
+          type: string
+          format: date-time
+        miles:
+          type: number
+          exclusiveMinimum: 0
+        rideMinutes:
+          type: integer
+          nullable: true
+          minimum: 1
+        temperature:
+          type: number
+          nullable: true
+
+    RideHistoryResponse:
+      type: object
+      required:
+        - summaries
+        - filteredTotal
+        - rides
+        - page
+        - pageSize
+        - totalRows
+      properties:
+        summaries:
+          type: object
+          required:
+            - thisMonth
+            - thisYear
+            - allTime
+          properties:
+            thisMonth:
+              $ref: '#/components/schemas/MileageSummary'
+            thisYear:
+              $ref: '#/components/schemas/MileageSummary'
+            allTime:
+              $ref: '#/components/schemas/MileageSummary'
+        filteredTotal:
+          $ref: '#/components/schemas/MileageSummary'
+        rides:
+          type: array
+          items:
+            $ref: '#/components/schemas/RideHistoryRow'
+        page:
+          type: integer
+          minimum: 1
+        pageSize:
+          type: integer
+          minimum: 1
+          maximum: 200
+        totalRows:
+          type: integer
+          minimum: 0
+
+    ErrorResponse:
+      type: object
+      required:
+        - code
+        - message
+      properties:
+        code:
+          type: string
+        message:
+          type: string
+        details:
+          type: array
+          items:
+            type: string