# 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
  ```javascript
  { 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:**
   ```javascript
   // 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.