show gallons and goal, cents per mile for mileage

Author: aligneddev

src/BikeTracking.Api.Tests/Application/Dashboard/GetDashboardServiceTests.cs

@@ -113,6 +113,58 @@ public async Task GetDashboardService_ExcludesLegacyRideWithoutSnapshot_FromSavi
         Assert.Equal(8m, dashboard.Totals.AllTimeMiles.Miles);
     }
 
+    [Fact]
+    public async Task GetDashboardService_IncludesOptionalMetricValues_WhenDataIsAvailable()
+    {
+        using var dbContext = CreateDbContext();
+        var rider = new UserEntity
+        {
+            DisplayName = "Optional Metric Rider",
+            NormalizedName = "optional metric rider",
+            CreatedAtUtc = DateTime.UtcNow,
+        };
+        dbContext.Users.Add(rider);
+        await dbContext.SaveChangesAsync();
+
+        dbContext.UserSettings.Add(
+            new UserSettingsEntity
+            {
+                UserId = rider.UserId,
+                YearlyGoalMiles = 100m,
+                DashboardGallonsAvoidedEnabled = true,
+                DashboardGoalProgressEnabled = true,
+                UpdatedAtUtc = DateTime.UtcNow,
+            }
+        );
+
+        dbContext.Rides.Add(
+            new RideEntity
+            {
+                RiderId = rider.UserId,
+                RideDateTimeLocal = DateTime.Now,
+                Miles = 20m,
+                SnapshotAverageCarMpg = 10m,
+                CreatedAtUtc = DateTime.UtcNow,
+            }
+        );
+        await dbContext.SaveChangesAsync();
+
+        var service = new GetDashboardService(dbContext);
+        var dashboard = await service.GetAsync(rider.UserId);
+
+        var gallonsSuggestion = dashboard.Suggestions.Single(metric =>
+            metric.MetricKey == "gallonsAvoided"
+        );
+        var goalSuggestion = dashboard.Suggestions.Single(metric =>
+            metric.MetricKey == "goalProgress"
+        );
+
+        Assert.Equal(2m, gallonsSuggestion.Value);
+        Assert.Equal("gal", gallonsSuggestion.UnitLabel);
+        Assert.Equal(20m, goalSuggestion.Value);
+        Assert.Equal("%", goalSuggestion.UnitLabel);
+    }
+
     private static BikeTrackingDbContext CreateDbContext()
     {
         var options = new DbContextOptionsBuilder<BikeTrackingDbContext>()

src/BikeTracking.Api/Application/Dashboard/GetDashboardService.cs

@@ -40,6 +40,8 @@ public async Task<DashboardResponse> GetAsync(
                 ride.RideDateTimeLocal >= currentYearStart && ride.RideDateTimeLocal < nextYearStart
             )
             .ToList();
+        var yearToDateMiles = currentYearRides.Sum(ride => ride.Miles);
+        var gallonsAvoided = CalculateGallonsAvoided(rides);
 
         var savings = CalculateSavings(rides);
 
@@ -59,7 +61,7 @@ public async Task<DashboardResponse> GetAsync(
                 MileageByMonth: BuildMileageSeries(rides, nowLocal),
                 SavingsByMonth: BuildSavingsSeries(rides, nowLocal)
             ),
-            Suggestions: BuildSuggestions(settings),
+            Suggestions: BuildSuggestions(settings, gallonsAvoided, yearToDateMiles),
             MissingData: new DashboardMissingData(
                 RidesMissingSavingsSnapshot: rides.Count(ride =>
                     ride.SnapshotMileageRateCents is null || ride.SnapshotAverageCarMpg is null
@@ -228,26 +230,53 @@ private static SavingsAggregate AggregateSavings(IEnumerable<RideEntity> rides)
     }
 
     private static IReadOnlyList<DashboardMetricSuggestion> BuildSuggestions(
-        UserSettingsEntity? settings
+        UserSettingsEntity? settings,
+        decimal? gallonsAvoided,
+        decimal yearToDateMiles
     )
     {
+        var yearlyGoalMiles = settings?.YearlyGoalMiles;
+        decimal? goalProgressPercent =
+            yearlyGoalMiles is decimal goal && goal > 0m
+                ? decimal.Round((yearToDateMiles / goal) * 100m, 1, MidpointRounding.AwayFromZero)
+                : null;
+
         return
         [
             new DashboardMetricSuggestion(
                 MetricKey: "gallonsAvoided",
                 Title: "Gallons Avoided",
                 Description: "See how much gas your rides kept in the tank.",
-                IsEnabled: settings?.DashboardGallonsAvoidedEnabled ?? false
+                IsEnabled: settings?.DashboardGallonsAvoidedEnabled ?? false,
+                Value: gallonsAvoided,
+                UnitLabel: "gal"
             ),
             new DashboardMetricSuggestion(
                 MetricKey: "goalProgress",
                 Title: "Goal Progress",
                 Description: "Compare your riding pace to your yearly mileage goal.",
-                IsEnabled: settings?.DashboardGoalProgressEnabled ?? false
+                IsEnabled: settings?.DashboardGoalProgressEnabled ?? false,
+                Value: goalProgressPercent,
+                UnitLabel: "%"
             ),
         ];
     }
 
+    private static decimal? CalculateGallonsAvoided(IReadOnlyCollection<RideEntity> rides)
+    {
+        var totalGallonsAvoided = rides
+            .Where(ride =>
+                ride.SnapshotAverageCarMpg is decimal averageCarMpg && averageCarMpg > 0m
+            )
+            .Select(ride => ride.Miles / ride.SnapshotAverageCarMpg!.Value)
+            .DefaultIfEmpty(0m)
+            .Sum();
+
+        return totalGallonsAvoided > 0m
+            ? decimal.Round(totalGallonsAvoided, 2, MidpointRounding.AwayFromZero)
+            : null;
+    }
+
     private static IEnumerable<DateTime> EnumerateRollingMonths(DateTime nowLocal)
     {
         var start = new DateTime(nowLocal.Year, nowLocal.Month, 1).AddMonths(-11);

src/BikeTracking.Api/Contracts/DashboardContracts.cs

@@ -50,7 +50,9 @@ public sealed record DashboardMetricSuggestion(
     string MetricKey,
     string Title,
     string Description,
-    bool IsEnabled
+    bool IsEnabled,
+    decimal? Value = null,
+    string? UnitLabel = null
 );
 
 public sealed record DashboardMissingData(

src/BikeTracking.Frontend/src/pages/dashboard/dashboard-page.tsx

@@ -84,10 +84,26 @@ function formatCurrency(value: number | null): string {
   return new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: 'USD',
-    maximumFractionDigits: 0,
+    maximumFractionDigits: 2,
   }).format(value)
 }
 
+function formatOptionalMetricValue(value: number | null | undefined, unitLabel?: string | null): string {
+  if (value === null || value === undefined) {
+    return '—'
+  }
+
+  if (unitLabel === '%') {
+    return `${value.toFixed(1)}%`
+  }
+
+  if (unitLabel === 'gal') {
+    return `${value.toFixed(2)} gal`
+  }
+
+  return `${value}`
+}
+
 export function DashboardPage() {
   const hasSession = Boolean(sessionStorage.getItem(SESSION_KEY))
   const [dashboard, setDashboard] = useState<DashboardResponse>(() => buildEmptyDashboard())
@@ -187,7 +203,7 @@ export function DashboardPage() {
           accentClassName="dashboard-summary-card-accent-savings"
         >
           <div className="dashboard-summary-split">
-            <span>Rate {formatCurrency(dashboard.totals.moneySaved.mileageRateSavings)}</span>
+            <span>Rate (cents per mile) {formatCurrency(dashboard.totals.moneySaved.mileageRateSavings)}</span>
             <span>Fuel {formatCurrency(dashboard.totals.moneySaved.fuelCostAvoided)}</span>
           </div>
         </DashboardSummaryCard>
@@ -255,7 +271,10 @@ export function DashboardPage() {
           {enabledSuggestions.map((suggestion) => (
             <article key={suggestion.metricKey} className="dashboard-average-card">
               <p className="dashboard-average-label">Approved Metric</p>
-              <p className="dashboard-average-value">{suggestion.title}</p>
+              <p className="dashboard-average-value">
+                {formatOptionalMetricValue(suggestion.value, suggestion.unitLabel)}
+              </p>
+              <p className="dashboard-average-label">{suggestion.title}</p>
               <p className="dashboard-summary-card-detail">{suggestion.description}</p>
             </article>
           ))}

src/BikeTracking.Frontend/src/pages/settings/SettingsPage.tsx

@@ -272,7 +272,7 @@ export function SettingsPage() {
             </div>
 
             <div className="settings-field">
-              <label htmlFor="mileageRateCents">Mileage Rate</label>
+              <label htmlFor="mileageRateCents">Mileage Rate (cents per mile)</label>
               <input
                 id="mileageRateCents"
                 type="number"

src/BikeTracking.Frontend/src/services/dashboard-api.ts

@@ -40,6 +40,8 @@ export interface DashboardMetricSuggestion {
   title: string;
   description: string;
   isEnabled: boolean;
+  value?: number | null;
+  unitLabel?: string | null;
 }
 
 export interface DashboardMissingData {

src/BikeTracking.Frontend/tests/e2e/dashboard.spec.ts

@@ -8,7 +8,7 @@ async function saveDashboardSettings(
 ) {
   await page.goto("/settings");
   await page.getByLabel("Average Car MPG").fill(mpg);
-  await page.getByLabel("Mileage Rate").fill(mileageRate);
+  await page.getByLabel("Mileage Rate (cents per mile)").fill(mileageRate);
   await page.getByRole("button", { name: "Save Settings" }).click();
   await expect(page.getByText(/settings saved successfully/i)).toBeVisible();
 }
@@ -62,13 +62,13 @@ test.describe("012-dashboard-stats e2e", () => {
     await recordRideWithGasPrice(page, "10", "3.00");
 
     await page.goto("/dashboard");
-    await expect(page.getByText("$7", { exact: true })).toBeVisible();
+    await expect(page.getByText("$6.50", { exact: true })).toBeVisible();
 
     await saveDashboardSettings(page, "40", "70");
     await recordRideWithGasPrice(page, "10", "3.00");
 
     await page.goto("/dashboard");
-    await expect(page.getByText("$14", { exact: true })).toBeVisible();
+    await expect(page.getByText("$14.25", { exact: true })).toBeVisible();
   });
 
   test("optional metrics appear only after approval", async ({ page }) => {