Files
bakery-ia/docs/ROADMAP.md
Urtzi Alfaro 221781731c Fix frontend 3
2025-08-28 23:40:44 +02:00

5.1 KiB

⏺ Based on my analysis of your bakery project, here's a clear divide and conquer strategy to transition from mock/demo data to real API connections:

Current State Analysis

What's Already Done:

  • Complete backend microservices architecture (17+ services)
  • Full API client setup with authentication & tenant management
  • Comprehensive service layer (auth, inventory, sales, forecasting, etc.)
  • Real-time SSE & WebSocket infrastructure

🔍 What Needs Connection:

  • Mock data in auth store (mockLogin, mockRefreshToken)
  • Mock alerts in alerts store (mockAlerts, mockRules)
  • Various hardcoded arrays across hooks and utilities

Divide & Conquer Strategy

Phase 1: Authentication Foundation (Week 1)

Priority: CRITICAL - Everything depends on this

// IMMEDIATE ACTION: Replace mock auth

  1. Update auth.store.ts → Connect to real auth service
  2. Replace mockLogin() with authService.login()
  3. Replace mockRefreshToken() with authService.refreshToken()
  4. Test tenant switching and permission system

Files to modify:

  • frontend/src/stores/auth.store.ts:46-88 (replace mock functions)
  • frontend/src/services/api/auth.service.ts (already done)

Phase 2: Core Operations (Week 2)

Priority: HIGH - Daily operations

// Connect inventory management first (most used)

  1. Inventory Service → Real API calls

    • Replace mock data in components
    • Connect to /api/v1/inventory/* endpoints
  2. Production Service → Real API calls

    • Connect batch management
    • Link to /api/v1/production/* endpoints
  3. Sales Service → Real API calls

    • Connect POS integration
    • Link to /api/v1/sales/* endpoints

Files to modify:

  • All inventory components using mock data
  • Production scheduling hooks
  • Sales tracking components

Phase 3: Analytics & Intelligence (Week 3)

Priority: MEDIUM - Business insights

// Connect AI-powered features

  1. Forecasting Service → Real ML predictions

    • Connect to /api/v1/forecasts/* endpoints
    • Enable real demand forecasting
  2. Training Service → Real model training

    • Connect WebSocket training progress
    • Enable /api/v1/training/* endpoints
  3. Analytics Service → Real business data

    • Connect charts and reports
    • Enable trend analysis

Phase 4: Communication & Automation (Week 4)

Priority: LOW - Enhancements

// Replace mock alerts with real-time system

  1. Alerts Store → Real SSE connection

    • Connect to /api/v1/sse/alerts/stream/{tenant_id}
    • Replace mockAlerts with live data
  2. Notification Service → Real messaging

    • WhatsApp & Email integration
    • Connect to /api/v1/notifications/* endpoints
  3. External Data → Live feeds

    • Weather API (AEMET)
    • Traffic patterns
    • Market events

Specific Next Steps

STEP 1: Start with Authentication (Today)

// 1. Replace frontend/src/stores/auth.store.ts // Remove lines 46-88 and replace with:

const performLogin = async (email: string, password: string) => { const response = await authService.login({ email, password }); if (!response.success) throw new Error(response.error || 'Login failed'); return response.data; };

const performRefresh = async (refreshToken: string) => { const response = await authService.refreshToken(refreshToken); if (!response.success) throw new Error('Token refresh failed'); return response.data; };

STEP 2: Connect Inventory (Next)

// 2. Update inventory components to use real API // Replace mock data arrays with:

const { data: ingredients, isLoading } = useQuery({ queryKey: ['ingredients', tenantId], queryFn: () => inventoryService.getIngredients(), });

STEP 3: Enable Real-time Alerts (After)

// 3. Connect SSE for real alerts // Replace alerts store mock data with:

useEffect(() => { const eventSource = new EventSource(/api/v1/sse/alerts/stream/${tenantId});

eventSource.onmessage = (event) => {
  const alert = JSON.parse(event.data);
  createAlert(alert);
};

return () => eventSource.close();

}, [tenantId]);

Migration Checklist

Immediate (This Week)

  • Replace auth mock functions with real API calls
  • Test login/logout/refresh flows
  • Verify tenant switching works
  • Test permission-based UI rendering

Short-term (Next 2 Weeks)

  • Connect inventory service to real API
  • Enable production planning with real data
  • Connect sales tracking to POS systems
  • Test data consistency across services

Medium-term (Next Month)

  • Enable ML forecasting with real models
  • Connect real-time alert system
  • Integrate external data sources (weather, traffic)
  • Test full end-to-end workflows

Risk Mitigation

  1. Gradual Migration: Keep mock fallbacks during transition
  2. Environment Switching: Use env variables to toggle mock/real APIs
  3. Error Handling: Robust error handling for API failures
  4. Data Validation: Verify API responses match expected schemas
  5. User Testing: Test with real bakery workflows

Ready to start? I recommend beginning with Step 1 (Authentication) today. The infrastructure is already there - you just need to connect the pipes!