service-finder/docs/frontend_garage_audit.md

Frontend Garage View Audit Report

Date: 2026-03-30
Auditor: QA Lead & Frontend Architect
Scope: Garage overview page (VehicleShowcase, VehicleCard, FleetTable components)

Executive Summary

The Garage view exhibits several critical issues including hardcoded values, mock data dependencies, and broken API connections. While the dual-UI architecture (B2C Cards vs B2B Table) is conceptually sound, implementation gaps prevent proper integration with backend services.

1. Hardcoded Values & Mock Data

VehicleShowcase.vue

• Line 159-163: Stats cards use hardcoded labels and icon mappings

  { label: 'Total Vehicles', value: stats.totalVehicles, icon: 'check', color: 'blue' },
  { label: 'Monthly Cost', value: formatCurrency(stats.totalMonthlyExpense), icon: 'currency', color: 'green' },
  { label: 'Need Service', value: stats.vehiclesNeedingService, icon: 'warning', color: 'orange' }
  

• Line 94-113: Header titles and descriptions contain hardcoded Hungarian/English strings
• Line 119: Gradient colors (from-blue-50 to-indigo-50) are hardcoded

VehicleCard.vue

• Lines 14-23: Status color mappings are hardcoded with English status strings
• Lines 25-51: brandLogoUrl and getCountryFlag functions contain:
  • Hardcoded CDN URLs (https://cdn.simpleicons.org/, https://flagcdn.com/)
  • Hardcoded brand-to-country mappings (German brands, US brands, etc.)
  • No fallback for missing brands
• Line 89: Currency symbol hardcoded as € (Euro-centric)
• Line 57: Default vehicle image uses vehicle.imageUrl which may not exist

FleetTable.vue

• Lines 13-22: Status color mappings duplicated from VehicleCard
• Lines 41-60: Duplicated getCountryFlag function with same hardcoded mappings
• Line 66: Header gradient colors hardcoded (from-slate-900/90 to-slate-800/90)
• Line 70: Descriptive text "Enterprise-grade vehicle oversight with real-time analytics" is hardcoded

2. Broken Logic & API Connections

Data Flow Issues

1. Vehicle Data Structure Mismatch:

   • Components expect vehicle.imageUrl, vehicle.monthlyExpense, vehicle.data_status
   • Backend likely returns different field names (e.g., thumbnail_url, monthly_cost, status)

2. Stats Computation:

   • garageStore.totalVehicles, totalMonthlyExpense, vehiclesNeedingService appear to be computed from mock data
   • No evidence of real API integration for these aggregate statistics

3. Organization Context:

   • fetchOrganizations() function (Line 47-75) attempts API call but has fallback to "Corporate Fleet" string
   • Active organization detection relies on authStore.activeOrgId which may not be synchronized

4. Empty State Handling:

   • Empty state redirects to /vehicles/add (Line 231) but route may not exist
   • No loading states for initial vehicle fetch beyond basic garageStore.loading

API Integration Gaps

• Vehicle images: No fallback when vehicle.imageUrl is null/undefined
• Brand logos: CDN may fail (404) for uncommon brands
• Country flags: Logic based on brand name substring matching is fragile
• Currency formatting: Always uses EUR, no localization based on user/organization

3. Cleanup Strategy

Phase 1: Data Layer Unification

1. Create Vehicle Data Adapter:

   // In a new file: adapters/vehicleAdapter.js
   export function adaptBackendVehicle(apiVehicle) {
     return {
       id: apiVehicle.id,
       make: apiVehicle.brand || apiVehicle.make,
       model: apiVehicle.model,
       year: apiVehicle.year || apiVehicle.manufacture_year,
       // ... other mappings
     }
   }
   

2. Enhance Garage Store:

   • Replace mock computations with real API calls to /vehicles/stats endpoint
   • Add proper error handling and loading states
   • Implement vehicle data transformation in the store

Phase 2: Configuration Externalization

1. Create Configuration Files:

   • config/statusColors.js - Status-to-color mappings
   • config/brandCountries.js - Brand-to-country mappings (with fallbacks)
   • config/uiStrings.js - Localizable UI strings

2. Environment-based URLs:

   • Move CDN URLs to environment variables
   • Add fallback image URLs for missing vehicle images

Phase 3: API Integration

1. Real Endpoints:

   • GET /vehicles - Replace mock vehicle data
   • GET /vehicles/stats - For dashboard statistics
   • GET /organizations/my - Already implemented, needs error handling

2. Enhanced Error States:

   • Network failure UI
   • Empty states with actionable CTAs
   • Loading skeletons for better UX

Phase 4: Internationalization

1. Currency Localization:

   • Detect user/organization currency from backend
   • Use Intl.NumberFormat with dynamic currency code

2. Multi-language Support:

   • Extract all hardcoded strings to locale files
   • Implement i18n for Hungarian/English toggle

4. Critical Issues Requiring Immediate Attention

Blockers

1. Vehicle Image Handling: Current implementation will break with null imageUrl
2. Currency Assumption: Euro symbol hardcoded, not dynamic
3. Status Mapping: Backend status values may not match frontend color mappings

High Priority

1. Brand Logo CDN Failures: Need fallback to local SVG or text display
2. Organization Context: Fleet mode may show incorrect organization name
3. Empty State Routing: /vehicles/add route needs verification

5. Recommendations

Short-term (Sprint 1)

1. Add prop validation with default values in VehicleCard
2. Implement image fallback using onerror handler
3. Create centralized status color configuration
4. Fix the /vehicles/add route or update empty state CTA

Medium-term (Sprint 2)

1. Implement vehicle data adapter pattern
2. Add proper loading states and error boundaries
3. Externalize hardcoded strings to configuration
4. Enhance garage store with real API integration

Long-term (Sprint 3+)

1. Full i18n implementation
2. Dynamic currency/unit localization
3. Advanced error recovery and retry logic
4. Performance optimizations (lazy loading, image optimization)

6. Verification Checklist

• All hardcoded strings moved to configuration
• Vehicle data adapter implemented and tested
• Garage store uses real API endpoints
• Error states and loading indicators present
• Currency formatting respects user/organization settings
• Image fallbacks work for missing vehicle images
• Brand logos have appropriate fallbacks
• Organization context displays correctly in fleet mode
• Empty state CTAs navigate to valid routes

---

Next Steps: Begin with Phase 1 (Data Layer Unification) to establish a clean separation between API data and UI presentation, then systematically address configuration externalization.