egullickson/motovaultpro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: standardize empty field display across all views (#162) #171

New Issue
Closed
opened 2026-02-13 22:23:56 +00:00 by egullickson · 2 comments
egullickson commented 2026-02-13 22:23:56 +00:00
Owner
Copy Link
Copy Source

Relates to #162

Severity: Medium

Problem

Vehicle detail page shows "Not provided" in gray italic for missing fields (Color, VIN, Purchase Price/Date). But on the vehicle list cards, empty VIN shows "VIN:" with nothing after it. The approach should be consistent across all views.

Recommendation

Pick one consistent pattern for empty/missing field display and apply it everywhere:

  • Option A: "Not provided" in gray italic (currently used on detail page)
  • Option B: Hide the field row entirely when empty

Acceptance Criteria

  • Missing/empty fields use the same display pattern across all views (detail page, list cards, settings)
  • No blank labels with empty values visible
  • Tested on mobile (320px, 768px) and desktop (1920px)
Relates to #162 ## Severity: Medium ## Problem Vehicle detail page shows "Not provided" in gray italic for missing fields (Color, VIN, Purchase Price/Date). But on the vehicle list cards, empty VIN shows "VIN:" with nothing after it. The approach should be consistent across all views. ## Recommendation Pick one consistent pattern for empty/missing field display and apply it everywhere: - Option A: "Not provided" in gray italic (currently used on detail page) - Option B: Hide the field row entirely when empty ## Acceptance Criteria - Missing/empty fields use the same display pattern across all views (detail page, list cards, settings) - No blank labels with empty values visible - Tested on mobile (320px, 768px) and desktop (1920px)
egullickson added the
status
backlog
type
chore
 labels 2026-02-13 22:24:33 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:24:52 +00:00
egullickson commented 2026-02-14 01:15:32 +00:00
Author
Owner
Copy Link
Copy Source

Implementation Plan (from #162 -- Milestone 8)

Phase: 3 (Vehicle display consistency) | Priority: Medium | Depends on: #165 (Milestone 1 -- shared utilities) | Blocks: None

Context

Empty fields are handled inconsistently: some show blank labels, some show "null", some hide correctly. This milestone standardizes the approach: hide empty fields on list/card views, keep "Not provided" on detail pages.

Implementation

Pattern decision:

  • List cards: Hide empty fields entirely (don't show rows with no data)
  • Detail pages: Show "Not provided" in italic gray (already exists in VehicleDetailPage.tsx)

Exhaustive audit scope:

File Field(s) Current Behavior Target
features/vehicles/components/VehicleCard.tsx:54 VIN Always shown (blank if empty) Hide when empty
features/vehicles/components/VehicleCard.tsx:57-61 License plate Conditional (correct) No change
features/vehicles/mobile/VehicleMobileCard.tsx:43-46 License plate Conditional (correct) No change
features/vehicles/pages/VehicleDetailPage.tsx:288-350 Color, VIN, Purchase Price/Date "Not provided" italic No change (detail page pattern)
pages/SettingsPage.tsx:378 Year/Make/Model Direct concat (null possible) Use getVehicleSubtitle()
features/settings/mobile/MobileSettingsScreen.tsx:376 Year/Make/Model Direct concat (null possible) Use getVehicleSubtitle()
features/dashboard/components/VehicleAttention.tsx Vehicle name Direct concat Use getVehicleLabel()

Changes:

  1. In VehicleCard.tsx: Wrap VIN in conditional {vehicle.vin && ...} (may overlap with #167 work -- coordinate)
  2. In SettingsPage.tsx and MobileSettingsScreen.tsx: Replace direct Year/Make/Model concatenation with getVehicleSubtitle() from @/core/utils/vehicleDisplay
  3. Verify VehicleDetailPage.tsx detail page pattern is consistent (should already be correct)
  4. Verify VehicleAttention.tsx uses getVehicleLabel() (should be done in #165)

Files

  • frontend/src/features/vehicles/components/VehicleCard.tsx
  • frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx (verify only)
  • frontend/src/features/vehicles/pages/VehicleDetailPage.tsx (verify only)
  • frontend/src/pages/SettingsPage.tsx
  • frontend/src/features/settings/mobile/MobileSettingsScreen.tsx
  • frontend/src/features/dashboard/components/VehicleAttention.tsx (verify only)

Commit Convention

chore: standardize empty field display across vehicle views (refs #171)

Test Criteria

  • No blank "Label:" rows visible on any card/list view
  • Detail pages show "Not provided" in italic gray for missing fields
  • Settings vehicle list shows clean Year Make Model (no "null" text)
  • Consistent behavior across all audited locations
  • Verify on mobile (320px, 768px) and desktop (1920px) viewports

Branch

Work on branch issue-162-ux-design-audit-cleanup (shared with all #162 sub-issues)

## Implementation Plan (from #162 -- Milestone 8) **Phase**: 3 (Vehicle display consistency) | **Priority**: Medium | **Depends on**: #165 (Milestone 1 -- shared utilities) | **Blocks**: None ### Context Empty fields are handled inconsistently: some show blank labels, some show "null", some hide correctly. This milestone standardizes the approach: **hide empty fields on list/card views**, keep "Not provided" on detail pages. ### Implementation **Pattern decision:** - **List cards**: Hide empty fields entirely (don't show rows with no data) - **Detail pages**: Show "Not provided" in italic gray (already exists in `VehicleDetailPage.tsx`) **Exhaustive audit scope:** | File | Field(s) | Current Behavior | Target | |------|----------|-----------------|--------| | `features/vehicles/components/VehicleCard.tsx:54` | VIN | Always shown (blank if empty) | Hide when empty | | `features/vehicles/components/VehicleCard.tsx:57-61` | License plate | Conditional (correct) | No change | | `features/vehicles/mobile/VehicleMobileCard.tsx:43-46` | License plate | Conditional (correct) | No change | | `features/vehicles/pages/VehicleDetailPage.tsx:288-350` | Color, VIN, Purchase Price/Date | "Not provided" italic | No change (detail page pattern) | | `pages/SettingsPage.tsx:378` | Year/Make/Model | Direct concat (null possible) | Use `getVehicleSubtitle()` | | `features/settings/mobile/MobileSettingsScreen.tsx:376` | Year/Make/Model | Direct concat (null possible) | Use `getVehicleSubtitle()` | | `features/dashboard/components/VehicleAttention.tsx` | Vehicle name | Direct concat | Use `getVehicleLabel()` | **Changes:** 1. In `VehicleCard.tsx`: Wrap VIN in conditional `{vehicle.vin && ...}` (may overlap with #167 work -- coordinate) 2. In `SettingsPage.tsx` and `MobileSettingsScreen.tsx`: Replace direct Year/Make/Model concatenation with `getVehicleSubtitle()` from `@/core/utils/vehicleDisplay` 3. Verify `VehicleDetailPage.tsx` detail page pattern is consistent (should already be correct) 4. Verify `VehicleAttention.tsx` uses `getVehicleLabel()` (should be done in #165) ### Files - `frontend/src/features/vehicles/components/VehicleCard.tsx` - `frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx` (verify only) - `frontend/src/features/vehicles/pages/VehicleDetailPage.tsx` (verify only) - `frontend/src/pages/SettingsPage.tsx` - `frontend/src/features/settings/mobile/MobileSettingsScreen.tsx` - `frontend/src/features/dashboard/components/VehicleAttention.tsx` (verify only) ### Commit Convention ``` chore: standardize empty field display across vehicle views (refs #171) ``` ### Test Criteria - No blank "Label:" rows visible on any card/list view - Detail pages show "Not provided" in italic gray for missing fields - Settings vehicle list shows clean Year Make Model (no "null" text) - Consistent behavior across all audited locations - Verify on mobile (320px, 768px) and desktop (1920px) viewports ### Branch Work on branch `issue-162-ux-design-audit-cleanup` (shared with all #162 sub-issues)
egullickson added
status
in-progress
 and removed
status
backlog
 labels 2026-02-14 01:42:00 +00:00
egullickson commented 2026-02-14 01:42:21 +00:00
Author
Owner
Copy Link
Copy Source

Milestone: Audit Complete -- No Additional Changes Needed

Phase: Execution | Agent: Developer | Status: PASS

Audit Results

File Field(s) Status
VehicleCard.tsx VIN Already fixed in #167 (conditional hide)
VehicleCard.tsx License plate Already conditional (correct)
VehicleMobileCard.tsx License plate Already conditional (correct)
VehicleDetailPage.tsx Color, VIN, Price/Date "Not provided" italic pattern (correct)
SettingsPage.tsx:379 Year/Make/Model Already uses getVehicleSubtitle() (fixed in #165)
MobileSettingsScreen.tsx:377 Year/Make/Model Already uses getVehicleSubtitle() (fixed in #165)
VehicleAttention.tsx:108 Vehicle name Already uses getVehicleLabel() (fixed in #165)

Pattern Summary

  • List/card views: Hide empty fields entirely
  • Detail pages: Show "Not provided" in italic gray

All locations are consistent. No additional code changes required -- prior milestones (#165, #167) already addressed all items.

Verdict: PASS | Next: Continue to next milestone

## Milestone: Audit Complete -- No Additional Changes Needed **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Audit Results | File | Field(s) | Status | |------|----------|--------| | `VehicleCard.tsx` | VIN | Already fixed in #167 (conditional hide) | | `VehicleCard.tsx` | License plate | Already conditional (correct) | | `VehicleMobileCard.tsx` | License plate | Already conditional (correct) | | `VehicleDetailPage.tsx` | Color, VIN, Price/Date | "Not provided" italic pattern (correct) | | `SettingsPage.tsx:379` | Year/Make/Model | Already uses `getVehicleSubtitle()` (fixed in #165) | | `MobileSettingsScreen.tsx:377` | Year/Make/Model | Already uses `getVehicleSubtitle()` (fixed in #165) | | `VehicleAttention.tsx:108` | Vehicle name | Already uses `getVehicleLabel()` (fixed in #165) | ### Pattern Summary - **List/card views**: Hide empty fields entirely - **Detail pages**: Show "Not provided" in italic gray All locations are consistent. No additional code changes required -- prior milestones (#165, #167) already addressed all items. *Verdict*: PASS | *Next*: Continue to next milestone
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
status
backlog
status/blocked
status
done
status
in-progress
status
ready
status
review
type
bug
type
chore
type
docs
type
feature
No labels
status
in-progress
type
chore
Milestone
No items
No Milestone Sprint 2026-02-02
Projects
Clear projects
No projects
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#171