Mobile: FAB + button maintenance option navigates to wrong screen #13

New Issue

2026-01-04T04:11:34Z

egullickson commented

2026-01-04 04:11:34 +00:00

Bug Description

On mobile, tapping the floating action button (+) in the bottom navigation and selecting "Maintenance" navigates to the Vehicles screen instead of the New Maintenance dialog.

Steps to Reproduce

Open the app on mobile
Tap the + (FAB) button in the center of the bottom navigation
Select "Maintenance" from the menu

Expected Behavior

Should open the New Maintenance dialog.

Actual Behavior

Navigates to the Vehicles screen.

Context

This is the same navigation bug that was previously fixed on the dashboard + button. The fix was not applied to the FAB in the bottom navigation bar.

Affected Component

Bottom navigation floating action button (FAB)
Mobile only

## Bug Description On mobile, tapping the floating action button (+) in the bottom navigation and selecting "Maintenance" navigates to the Vehicles screen instead of the New Maintenance dialog. ## Steps to Reproduce 1. Open the app on mobile 2. Tap the + (FAB) button in the center of the bottom navigation 3. Select "Maintenance" from the menu ## Expected Behavior Should open the New Maintenance dialog. ## Actual Behavior Navigates to the Vehicles screen. ## Context This is the same navigation bug that was previously fixed on the dashboard + button. The fix was not applied to the FAB in the bottom navigation bar. ## Affected Component - Bottom navigation floating action button (FAB) - Mobile only

egullickson added the

labels 2026-01-04 04:11:46 +00:00

egullickson added

and removed

labels 2026-01-04 04:28:08 +00:00

egullickson commented

2026-01-04 04:29:28 +00:00

Plan: FAB Maintenance Navigation Fix

Phase: Review | Agent: Claude | Status: PASS

Root Cause

In frontend/src/App.tsx, the handleQuickAction function (lines 426-444) handles FAB button clicks. The 'add-maintenance' case incorrectly navigated to 'Vehicles':

case 'add-maintenance':
  // Navigate to maintenance or open form (future implementation)
  navigateToScreen('Vehicles', { source: 'quick-action' });  // <-- BUG
  break;

Solution

Changed navigation target from 'Vehicles' to 'Maintenance':

case 'add-maintenance':
  navigateToScreen('Maintenance', { source: 'quick-action' });
  break;

Implementation Steps

#	Task	File	Status
1	Update 'add-maintenance' case to navigate to 'Maintenance' screen	`frontend/src/App.tsx`	Done

Validation

TypeScript compilation passes
ESLint passes (0 errors)
Mobile viewport manual test pending

Verdict: PASS | Next: Manual testing and PR merge

PR: #14

## Plan: FAB Maintenance Navigation Fix **Phase**: Review | **Agent**: Claude | **Status**: PASS ### Root Cause In `frontend/src/App.tsx`, the `handleQuickAction` function (lines 426-444) handles FAB button clicks. The 'add-maintenance' case incorrectly navigated to 'Vehicles': ```typescript case 'add-maintenance': // Navigate to maintenance or open form (future implementation) navigateToScreen('Vehicles', { source: 'quick-action' }); // <-- BUG break; ``` ### Solution Changed navigation target from 'Vehicles' to 'Maintenance': ```typescript case 'add-maintenance': navigateToScreen('Maintenance', { source: 'quick-action' }); break; ``` ### Implementation Steps | # | Task | File | Status | |---|------|------|--------| | 1 | Update 'add-maintenance' case to navigate to 'Maintenance' screen | `frontend/src/App.tsx` | Done | ### Validation - [x] TypeScript compilation passes - [x] ESLint passes (0 errors) - [ ] Mobile viewport manual test pending *Verdict*: PASS | *Next*: Manual testing and PR merge --- **PR**: https://git.motovaultpro.com/egullickson/motovaultpro/pulls/14

egullickson referenced this issue from a commit

2026-01-04 04:31:26 +00:00

fix: FAB maintenance button navigates to correct screen (refs #13)

egullickson referenced a pull request that will close this issue

2026-01-04 04:31:38 +00:00

fix: FAB maintenance navigation (#13) #14

egullickson added

and removed