Improve the demo feature of the project

frontend/src/api/client/apiClient.ts

@@ -92,12 +92,16 @@ class ApiClient {
 
         if (this.tenantId && !isPublicEndpoint) {
           config.headers['X-Tenant-ID'] = this.tenantId;
+          console.log('🔍 [API Client] Adding X-Tenant-ID header:', this.tenantId, 'for URL:', config.url);
+        } else if (!isPublicEndpoint) {
+          console.warn('⚠️ [API Client] No tenant ID set for non-public endpoint:', config.url);
         }
 
         // Check demo session ID from memory OR localStorage
         const demoSessionId = this.demoSessionId || localStorage.getItem('demo_session_id');
         if (demoSessionId) {
           config.headers['X-Demo-Session-Id'] = demoSessionId;
+          console.log('🔍 [API Client] Adding X-Demo-Session-Id header:', demoSessionId);
         }
 
         return config;

frontend/src/api/services/demo.ts

@@ -9,12 +9,13 @@
  * - OPERATIONS: demo_operations.py
  *
  * Note: Demo service does NOT use tenant prefix
- *
+ * 
  * Last Updated: 2025-10-05
  * Status: ✅ Complete - Zero drift with backend
  */
 
 import { apiClient } from '../client';
+import type { DemoSessionResponse } from '../types/demo';
 
 export interface DemoAccount {
   account_type: string;
@@ -26,16 +27,8 @@ export interface DemoAccount {
   business_model?: string;
 }
 
-export interface DemoSession {
-  session_id: string;
-  virtual_tenant_id: string;
-  base_demo_tenant_id: string;
-  demo_account_type: string;
-  status: 'active' | 'expired' | 'destroyed';
-  created_at: string;
-  expires_at: string;
-  remaining_extensions: number;
-}
+// Use the complete type from types/demo.ts which matches backend response
+export type DemoSession = DemoSessionResponse;
 
 export interface CreateSessionRequest {
   demo_account_type: 'individual_bakery' | 'central_baker';
@@ -46,9 +39,43 @@ export interface ExtendSessionRequest {
 }
 
 export interface DestroySessionRequest {
-  session_id: string;
+ session_id: string;
 }
 
+export interface ServiceProgress {
+  status: 'not_started' | 'in_progress' | 'completed' | 'failed';
+  records_cloned: number;
+  error?: string;
+}
+
+export interface SessionStatusResponse {
+  session_id: string;
+  status: 'pending' | 'ready' | 'partial' | 'failed' | 'active' | 'expired' | 'destroyed';
+  total_records_cloned: number;
+  progress?: Record<string, ServiceProgress>;
+  errors?: Array<{ service: string; error_message: string }>;
+}
+
+// ===================================================================
+// OPERATIONS: Demo Session Status and Cloning
+// ===================================================================
+
+/**
+ * Get session status
+ * GET /demo/sessions/{session_id}/status
+ */
+export const getSessionStatus = async (sessionId: string): Promise<SessionStatusResponse> => {
+  return await apiClient.get<SessionStatusResponse>(`/demo/sessions/${sessionId}/status`);
+};
+
+/**
+ * Retry data cloning for a session
+ * POST /demo/sessions/{session_id}/retry
+ */
+export const retryCloning = async (sessionId: string): Promise<SessionStatusResponse> => {
+  return await apiClient.post<SessionStatusResponse>(`/demo/sessions/${sessionId}/retry`, {});
+};
+
 // ===================================================================
 // ATOMIC: Demo Accounts
 // Backend: services/demo_session/app/api/demo_accounts.py
@@ -131,3 +158,47 @@ export const getDemoStats = async (): Promise<any> => {
 export const cleanupExpiredSessions = async (): Promise<any> => {
   return await apiClient.post('/demo/operations/cleanup', {});
 };
+
+// ===================================================================
+// API Service Class
+// ===================================================================
+
+export class DemoSessionAPI {
+  async getDemoAccounts(): Promise<DemoAccount[]> {
+    return getDemoAccounts();
+  }
+
+  async createDemoSession(request: CreateSessionRequest): Promise<DemoSession> {
+    return createDemoSession(request);
+  }
+
+  async getDemoSession(sessionId: string): Promise<any> {
+    return getDemoSession(sessionId);
+  }
+
+  async extendDemoSession(request: ExtendSessionRequest): Promise<DemoSession> {
+    return extendDemoSession(request);
+  }
+
+  async destroyDemoSession(request: DestroySessionRequest): Promise<{ message: string }> {
+    return destroyDemoSession(request);
+  }
+
+  async getDemoStats(): Promise<any> {
+    return getDemoStats();
+  }
+
+  async cleanupExpiredSessions(): Promise<any> {
+    return cleanupExpiredSessions();
+  }
+
+  async getSessionStatus(sessionId: string): Promise<SessionStatusResponse> {
+    return getSessionStatus(sessionId);
+  }
+
+  async retryCloning(sessionId: string): Promise<SessionStatusResponse> {
+    return retryCloning(sessionId);
+  }
+}
+
+export const demoSessionAPI = new DemoSessionAPI();