frontend kínlódás
This commit is contained in:
Roo
161
docs/frontend_garage_audit.md
Normal file
161
docs/frontend_garage_audit.md
Normal file
@@ -0,0 +1,161 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user