bakery-ia/WIZARD_API_INTEGRATION_STATUS.md

Wizard API Integration Status

Summary

This document tracks the progress of replacing mock data and console.log placeholders with full API integration across all unified add wizards.

Completed ✅

1. Quality Template Wizard

File: frontend/src/components/domain/unified-wizard/wizards/QualityTemplateWizard.tsx Status: ✅ Fully Implemented

Changes Made:

• Fixed bug: Changed onNext to onComplete in component props
• Added full API integration using qualityTemplateService.createTemplate()
• Added tenant ID retrieval via useTenant() hook
• Added loading states with spinner during API calls
• Added error handling with user-friendly error messages
• Removed console.log, now saves to backend database

API Used:

• POST /tenants/{tenant_id}/production/quality-templates

2. Equipment Wizard

File: frontend/src/components/domain/unified-wizard/wizards/EquipmentWizard.tsx Status: ✅ Fully Implemented

Changes Made:

• Added full API integration using equipmentService.createEquipment()
• Added tenant ID retrieval via useTenant() hook
• Added loading states with spinner during API calls
• Added error handling with user-friendly error messages
• Removed console.log, now saves to backend database

API Used:

• POST /tenants/{tenant_id}/production/equipment

3. Team Member Wizard

File: frontend/src/components/domain/unified-wizard/wizards/TeamMemberWizard.tsx Status: ✅ Fully Implemented

Changes Made:

• Added full API integration using authService.register()
• Added tenant ID retrieval via useTenant() hook
• Added loading states with spinner during API calls
• Added error handling with user-friendly error messages
• Removed console.log, now creates actual user accounts
• Generates temporary password for new team members

API Used:

• POST /auth/register

Notes:

• In production, temporary password should be sent via email
• Permissions (canManageInventory, etc.) should be stored in separate permissions table
• User-tenant-role relationship should be properly linked

Partially Completed 🟡

4. Inventory Wizard

File: frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx Status: 🟡 Previously Implemented (from earlier commits)

This wizard was fully implemented in previous commits with proper API integration.

5. Sales Entry Wizard

File: frontend/src/components/domain/unified-wizard/wizards/SalesEntryWizard.tsx Status: 🟡 Partially Complete - Needs File Upload Implementation

Current State:

• Manual entry flow is complete with UI
• File upload step shows placeholder

Remaining Work:

• Implement file upload functionality using salesService.importSalesData()
• Add CSV/Excel file validation using salesService.validateImportFile()
• Implement download template functionality using salesService.downloadImportTemplate()
• Replace console.log in ReviewStep with salesService.createSalesRecord()

APIs Available:

• POST /tenants/{tenant_id}/sales/sales - Create manual sales record
• POST /tenants/{tenant_id}/sales/operations/import - Import from file
• POST /tenants/{tenant_id}/sales/operations/import/validate - Validate import file
• GET /tenants/{tenant_id}/sales/operations/import/template - Download CSV template

Not Started ⚠️

6. Recipe Wizard

File: frontend/src/components/domain/unified-wizard/wizards/RecipeWizard.tsx Status: ⚠️ Needs Full Ingredient Selection Implementation

Current State:

• Step 1: Recipe details (name, category, yield) - Complete UI
• Step 2: Ingredients selection - Shows placeholder message

Remaining Work:

1. Fetch ingredients from inventory API using inventoryService.getIngredients()
2. Create ingredient selection UI with:
   • Search/filter ingredients by name and category
   • Select multiple ingredients
   • Specify quantity and unit for each ingredient
   • Display selected ingredients with ability to remove
3. Map UI ingredient format to API format (RecipeIngredientCreate)
4. Replace console.log with recipesService.createRecipe() API call

APIs Available:

• GET /tenants/{tenant_id}/inventory/ingredients - List all ingredients
• POST /tenants/{tenant_id}/recipes - Create recipe with ingredients

Recipe Ingredient Format:

{
  inventory_product_id: string;
  quantity: number;
  unit: string; // 'kg', 'g', 'l', 'ml', 'units'
  notes?: string;
}

7. Supplier Wizard

File: frontend/src/components/domain/unified-wizard/wizards/SupplierWizard.tsx Status: ⚠️ Needs Mock Data Replacement

Current State:

• Step 1: Supplier info - Complete with validation
• Step 2: Products & Pricing - Uses mock ingredients array

Remaining Work:

1. Replace mockIngredients with API call to inventoryService.getIngredients()
2. Add loading state while fetching ingredients
3. Add error handling if ingredients fetch fails
4. Replace console.log with suppliersService.createSupplier() API call
5. After supplier creation, create price list using suppliersService.createSupplierPriceList()

Mock Data to Replace (line 154-159):

const mockIngredients = [
  { id: 1, name: 'Harina de Trigo', unit: 'kg' },
  { id: 2, name: 'Mantequilla', unit: 'kg' },
  { id: 3, name: 'Azúcar', unit: 'kg' },
  { id: 4, name: 'Levadura', unit: 'kg' },
];

APIs Available:

• GET /tenants/{tenant_id}/inventory/ingredients - List ingredients
• POST /tenants/{tenant_id}/suppliers - Create supplier
• POST /tenants/{tenant_id}/suppliers/{supplier_id}/price-lists - Create price list

8. Customer Order Wizard

File: frontend/src/components/domain/unified-wizard/wizards/CustomerOrderWizard.tsx Status: ⚠️ Needs Mock Data Replacement

Current State:

• Step 1: Customer selection - Uses mock customers array, has inline customer creation
• Step 2: Order items - Uses mock products array
• Step 3: Delivery & payment - Complete with validation

Remaining Work:

1. Customer Selection Step:

   • Replace mockCustomers with OrdersService.getCustomers() API call
   • Update inline customer creation to use OrdersService.createCustomer() API
   • Add loading states while fetching customers

2. Order Items Step:

   • Replace mockProducts with inventoryService.getIngredients() API call (for finished products)
   • Add loading states while fetching products
   • Filter ingredients to show only finished products (category: finished_product)

3. Final Step:

   • Replace console.log with OrdersService.createOrder() API call
   • Map wizard data to OrderCreate format with order items

Mock Data to Replace:

• mockCustomers (line ~35): 4 hardcoded customers
• mockProducts (line ~125): 6 hardcoded products

APIs Available:

• GET /tenants/{tenant_id}/orders/customers - List customers
• POST /tenants/{tenant_id}/orders/customers - Create customer
• GET /tenants/{tenant_id}/inventory/ingredients - List products (filter by category)
• POST /tenants/{tenant_id}/orders - Create order

Order Item Format:

{
  inventory_product_id: string;
  ordered_quantity: number;
  unit_price: number;
  notes?: string;
}

9. Customer Wizard

File: frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx Status: ⚠️ Needs API Integration

Current State:

• Step 1: Customer details - Complete UI
• Step 2: Preferences & terms - Complete UI

Remaining Work:

• Replace console.log with OrdersService.createCustomer() API call
• Map wizard data to CustomerCreate format
• Add loading states and error handling

APIs Available:

• POST /tenants/{tenant_id}/orders/customers

Implementation Priority

Based on user impact and complexity:

High Priority (Most Used):

1. ✅ Sales Entry Wizard - File upload implementation
2. ⚠️ Customer Order Wizard - Most complex, uses orders
3. ⚠️ Supplier Wizard - Procurement workflow

Medium Priority: 4. ⚠️ Recipe Wizard - Production planning 5. ⚠️ Customer Wizard - Standalone customer creation

Completed:

• ✅ Quality Template Wizard
• ✅ Equipment Wizard
• ✅ Team Member Wizard

Testing Checklist

For each wizard implementation:

• API calls work with valid tenant ID
• Loading states display during API calls
• Error messages show when API calls fail
• Success callback (onComplete) triggers on successful save
• Wizard closes after successful completion
• Data is properly formatted for backend API
• Required fields are validated before submission
• No console.log or console.error left (except for debugging in catch blocks)

Next Steps

1. Implement Sales Entry file upload (High Impact, Medium Complexity)
2. Implement Supplier ingredient fetching (High Impact, Low Complexity)
3. Implement Customer Order with API (High Impact, High Complexity)
4. Implement Recipe ingredient selection (Medium Impact, High Complexity)
5. Implement Customer creation (Medium Impact, Low Complexity)

Notes

• All wizards use useTenant() hook from frontend/src/stores/tenant.store.ts
• All wizards follow the pattern: Loading state → API call → Error handling → Success callback
• Error messages are shown in red alert boxes above form
• Loading states show spinner with "Guardando..." text
• Tenant ID is always required for all API calls