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**:
```typescript
{
  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):
```typescript
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**:
```typescript
{
  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