VIN Number field displays license plate when VIN is empty #39

Closed
opened 2026-01-16 02:24:39 +00:00 by egullickson · 3 comments
Owner

Summary

The VIN Number field in Vehicle Detail Page shows the license plate value when no VIN is provided. This creates user confusion because the field label says "VIN Number" but displays a license plate.

Current Behavior

In VehicleDetailPage.tsx:390, the code uses:

<DetailField
  label="VIN Number"
  value={vehicle.vin || vehicle.licensePlate}
  isRequired
/>

When vehicle.vin is empty/null/undefined, the license plate is displayed under the "VIN Number" label.

Expected Behavior

The VIN Number field should display:

  • The actual VIN when present
  • "Not provided" or similar when VIN is empty

License plate should only be shown in its own dedicated field, not as a VIN fallback.

Affected Files

File Line Issue
frontend/src/features/vehicles/pages/VehicleDetailPage.tsx 390 Fallback logic shows license plate as VIN

Context

Other components handle this correctly:

  • VehicleCard.tsx (lines 54-60): Shows VIN and license plate as separate fields
  • VehicleMobileCard.tsx: Only shows license plate, VIN not displayed in card
  • VehicleDetailMobile.tsx: Shows VIN conditionally, separate from license plate
  • vehicleLabel.ts: Falls back to ID, not license plate

Acceptance Criteria

  • VIN Number field shows only VIN value (or empty state when missing)
  • License plate displayed in its own field (if needed)
  • Desktop and mobile detail views behave consistently
  • Lint and type-check pass
## Summary The VIN Number field in Vehicle Detail Page shows the license plate value when no VIN is provided. This creates user confusion because the field label says "VIN Number" but displays a license plate. ## Current Behavior In `VehicleDetailPage.tsx:390`, the code uses: ```tsx <DetailField label="VIN Number" value={vehicle.vin || vehicle.licensePlate} isRequired /> ``` When `vehicle.vin` is empty/null/undefined, the license plate is displayed under the "VIN Number" label. ## Expected Behavior The VIN Number field should display: - The actual VIN when present - "Not provided" or similar when VIN is empty License plate should only be shown in its own dedicated field, not as a VIN fallback. ## Affected Files | File | Line | Issue | |------|------|-------| | `frontend/src/features/vehicles/pages/VehicleDetailPage.tsx` | 390 | Fallback logic shows license plate as VIN | ## Context Other components handle this correctly: - **VehicleCard.tsx** (lines 54-60): Shows VIN and license plate as separate fields - **VehicleMobileCard.tsx**: Only shows license plate, VIN not displayed in card - **VehicleDetailMobile.tsx**: Shows VIN conditionally, separate from license plate - **vehicleLabel.ts**: Falls back to ID, not license plate ## Acceptance Criteria - [ ] VIN Number field shows only VIN value (or empty state when missing) - [ ] License plate displayed in its own field (if needed) - [ ] Desktop and mobile detail views behave consistently - [ ] Lint and type-check pass
egullickson added the
status
backlog
type
bug
labels 2026-01-16 02:24:44 +00:00
egullickson added
status
in-progress
and removed
status
backlog
labels 2026-01-16 02:28:07 +00:00
Author
Owner

Plan: Fix VIN Field Fallback

Phase: Planning | Agent: Planner | Status: APPROVED

Analysis

Root Cause: Line 390 in VehicleDetailPage.tsx uses vehicle.vin || vehicle.licensePlate which incorrectly shows the license plate under the "VIN Number" label when VIN is empty.

Mobile View: Already handles this correctly - VIN is conditionally rendered only when present (lines 195-201 in VehicleDetailMobile.tsx).

Desktop View: The DetailField component already handles empty values gracefully by displaying "Not provided" (line 42).

Milestones

# Task Files
1 Remove license plate fallback from VIN field frontend/src/features/vehicles/pages/VehicleDetailPage.tsx
2 Run lint and type-check -

Change Details

Before (line 390):

<DetailField
  label="VIN Number"
  value={vehicle.vin || vehicle.licensePlate}
  isRequired
/>

After:

<DetailField
  label="VIN Number"
  value={vehicle.vin}
/>

Note: Also removing isRequired since VIN is not actually required (vehicles can have license plate only).

Acceptance Criteria Mapping

  • VIN Number field shows only VIN value (or empty state when missing) - Fixed by removing fallback
  • License plate displayed in its own field - Already exists at line 411
  • Desktop and mobile detail views behave consistently - Mobile already correct, desktop will match
  • Lint and type-check pass - Will verify

Verdict: APPROVED | Next: Execute Milestone 1

## Plan: Fix VIN Field Fallback **Phase**: Planning | **Agent**: Planner | **Status**: APPROVED ### Analysis **Root Cause**: Line 390 in `VehicleDetailPage.tsx` uses `vehicle.vin || vehicle.licensePlate` which incorrectly shows the license plate under the "VIN Number" label when VIN is empty. **Mobile View**: Already handles this correctly - VIN is conditionally rendered only when present (lines 195-201 in `VehicleDetailMobile.tsx`). **Desktop View**: The `DetailField` component already handles empty values gracefully by displaying "Not provided" (line 42). ### Milestones | # | Task | Files | |---|------|-------| | 1 | Remove license plate fallback from VIN field | `frontend/src/features/vehicles/pages/VehicleDetailPage.tsx` | | 2 | Run lint and type-check | - | ### Change Details **Before** (line 390): ```tsx <DetailField label="VIN Number" value={vehicle.vin || vehicle.licensePlate} isRequired /> ``` **After**: ```tsx <DetailField label="VIN Number" value={vehicle.vin} /> ``` Note: Also removing `isRequired` since VIN is not actually required (vehicles can have license plate only). ### Acceptance Criteria Mapping - [x] VIN Number field shows only VIN value (or empty state when missing) - Fixed by removing fallback - [x] License plate displayed in its own field - Already exists at line 411 - [x] Desktop and mobile detail views behave consistently - Mobile already correct, desktop will match - [ ] Lint and type-check pass - Will verify *Verdict*: APPROVED | *Next*: Execute Milestone 1
egullickson added
status
review
and removed
status
in-progress
labels 2026-01-16 02:30:09 +00:00
Author
Owner

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: PASS

Changes Made

File Change
frontend/src/features/vehicles/pages/VehicleDetailPage.tsx Removed || vehicle.licensePlate fallback and isRequired from VIN field

Verification

  • Lint: PASS (pre-existing warnings only)
  • Type-check: PASS

PR Created

PR #40: #40

Verdict: PASS | Next: Quality Agent review

## Milestone: Implementation Complete **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Changes Made | File | Change | |------|--------| | `frontend/src/features/vehicles/pages/VehicleDetailPage.tsx` | Removed `\|\| vehicle.licensePlate` fallback and `isRequired` from VIN field | ### Verification - Lint: PASS (pre-existing warnings only) - Type-check: PASS ### PR Created PR #40: https://git.motovaultpro.com/egullickson/motovaultpro/pulls/40 *Verdict*: PASS | *Next*: Quality Agent review
Author
Owner

Quality Review: PR #40

Status: APPROVED

RULE 0 (CRITICAL): Production Reliability

PASS - No blocking issues

  • No unhandled errors introduced
  • No security implications
  • No resource exhaustion concerns
  • Change is minimal and focused: removed fallback display logic only

RULE 1 (HIGH): Project Standards

PASS - All standards met

Mobile + Desktop Consistency:

  • Desktop (VehicleDetailPage.tsx line 388-391): VIN field now shows vehicle.vin only
  • Mobile (VehicleDetailMobile.tsx line 195-202): VIN field already conditionally renders with {vehicle.vin && ...}
  • Both views now consistently display VIN only when present, showing nothing when empty
  • No license plate fallback in either view

Code Quality:

  • Lint: PASS (warnings exist but are pre-existing, not introduced by this PR)
  • Type-check: PASS (no TypeScript errors)
  • Naming conventions: Followed
  • Field simplified correctly: removed isRequired and || vehicle.licensePlate fallback

RULE 2 (SHOULD_FIX): Structural Quality

PASS - No structural issues

  • No duplication introduced
  • Old fallback logic properly removed
  • Clean, minimal change

Summary

The fix correctly addresses issue #39 by removing the license plate fallback from the VIN field. The change is consistent across both mobile and desktop views. The VIN field will now:

  • Display the VIN when present
  • Show "Not provided" (via DetailField component default) when empty
  • Never show the license plate as a fallback

Recommendation: MERGE

All quality gates passed. The PR is ready for merge.

## Quality Review: PR #40 **Status: APPROVED** ### RULE 0 (CRITICAL): Production Reliability **PASS - No blocking issues** - No unhandled errors introduced - No security implications - No resource exhaustion concerns - Change is minimal and focused: removed fallback display logic only ### RULE 1 (HIGH): Project Standards **PASS - All standards met** **Mobile + Desktop Consistency:** - Desktop (VehicleDetailPage.tsx line 388-391): VIN field now shows `vehicle.vin` only - Mobile (VehicleDetailMobile.tsx line 195-202): VIN field already conditionally renders with `{vehicle.vin && ...}` - Both views now consistently display VIN only when present, showing nothing when empty - No license plate fallback in either view **Code Quality:** - Lint: PASS (warnings exist but are pre-existing, not introduced by this PR) - Type-check: PASS (no TypeScript errors) - Naming conventions: Followed - Field simplified correctly: removed `isRequired` and `|| vehicle.licensePlate` fallback ### RULE 2 (SHOULD_FIX): Structural Quality **PASS - No structural issues** - No duplication introduced - Old fallback logic properly removed - Clean, minimal change --- ### Summary The fix correctly addresses issue #39 by removing the license plate fallback from the VIN field. The change is consistent across both mobile and desktop views. The VIN field will now: - Display the VIN when present - Show "Not provided" (via DetailField component default) when empty - Never show the license plate as a fallback **Recommendation: MERGE** All quality gates passed. The PR is ready for merge.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#39