# Workflow Step Component Dispatching System

## Overview

This system enables dynamic dispatching of Vue.js components based on workflow type and current step in the WorkflowDetail view. It provides a flexible, extensible architecture for creating custom step-specific user interfaces for different workflow types.

## Architecture

### 1. Component Registry (`/components/workflow/ComponentRegistry.js`)

The central registry that maps workflow types and steps to their corresponding Vue components using the format: `workflowType-step` → Component.

**Key Functions:**
- `getStepComponent(workflowType, step)` - Retrieves a step component
- `registerStepComponent(workflowType, step, component)` - Registers new components
- `hasStepComponent(workflowType, step)` - Checks component existence
- `getWorkflowComponents(workflowType)` - Gets all components for a workflow
- `getRegisteredWorkflowTypes()` - Lists all registered workflow types

### 2. Step Components (`/components/workflow/steps/`)

Individual Vue components that handle specific workflow steps:

#### Foto First Import Workflow
- **FotoFirstStep1.vue** - Photo capture/upload with camera and file upload support
- **FotoFirstStep2.vue** - Image processing with compression and optimization
- **FotoFirstStep3.vue** - Item details entry with form-based data collection
- **FotoFirstStep4.vue** - Import completion with summary and finalization

#### Bulk Import Workflow
- **BulkImportStep1.vue** - File upload with CSV/Excel support and column mapping

### 3. Dynamic Component Loading in WorkflowDetail.vue

The `stepComponent` computed property now uses the registry:

```javascript
stepComponent() {
    // `name` on the WorkflowInstance doubles as the workflow type identifier
    const workflowType = this.workflowInstance?.name;
    if (workflowType && this.currentStep) {
        return getStepComponent(workflowType, this.currentStep);
    }
    return null;
}
```

## How Content Dispatching Works

### 1. **Workflow Active State Management**
- Components connect to Vuex store's `active_workflows` state
- `loadWorkflowInstance()` fetches and finds specific workflow instances
- State determines which workflow type and step are active

### 2. **Dynamic Component Resolution**
- System looks up components using workflow type + step combination
- Registry returns the appropriate Vue component or null
- Vue's `<component :is="stepComponent">` renders the resolved component

### 3. **Component Communication**
- Step components receive props: `workflowInstance`, `step`, `payload`
- Components emit events: `@update`, `@next`, `@prev`, `@complete`
- Parent WorkflowDetail handles state updates and navigation

### 4. **Workflow Active Classes**
- `isStepCurrent(stepNumber)` - Identifies active step
- `isStepCompleted(stepNumber)` - Tracks completed steps
- `getStepClass(stepNumber)` - Applies appropriate CSS classes:
  - `step-indicator-completed bg-success` - Completed steps
  - `step-indicator-current bg-primary text-white` - Current step
  - `step-indicator-pending bg-light border` - Pending steps

## Component Features

### FotoFirstStep1 (Photo Capture)
- **Camera Integration**: Uses `navigator.mediaDevices.getUserMedia()`
- **File Upload**: Drag-and-drop and file selection
- **Image Preview**: Real-time photo gallery
- **Data Persistence**: Photos saved to workflow payload

### FotoFirstStep2 (Image Processing)
- **Batch Processing**: Processes multiple images sequentially
- **Image Optimization**: Compression and resizing
- **Progress Tracking**: Visual progress indicators
- **Processing Options**: Configurable compression and dimensions

### FotoFirstStep3 (Item Details)
- **Item-by-Item Entry**: Navigate through captured photos
- **Comprehensive Forms**: Name, category, quantity, location, pricing
- **Progress Tracking**: Shows completion status
- **Data Validation**: Required field validation
- **Edit Support**: Ability to modify previously entered items

### FotoFirstStep4 (Completion)
- **Import Summary**: Statistics and breakdowns
- **Data Review**: Grid and list view of items
- **Final Options**: QR codes, notifications, reports
- **Completion Workflow**: Final import execution

### BulkImportStep1 (File Upload)
- **File Type Support**: CSV and Excel files
- **Drag-and-Drop**: Modern file upload interface
- **Column Mapping**: Automatic and manual field mapping
- **Data Preview**: Shows first 5 rows of data
- **Template Download**: Provides sample CSV template
- **File Analysis**: Validates data structure and content

## Extensibility

### Adding New Workflow Types
1. Create step components in `/components/workflow/steps/`
2. Import components in `ComponentRegistry.js`
3. Add mappings to `componentRegistry` object
4. Define workflow in `workflows.js`

### Adding New Steps
1. Create component: `WorkflowTypeStepN.vue`
2. Import and register in ComponentRegistry
3. Update workflow step definitions
4. Component automatically dispatched when step is reached

## Benefits

1. **Modularity**: Each step is an independent, reusable component
2. **Flexibility**: Easy to create workflow-specific UI experiences  
3. **Maintainability**: Clear separation of concerns
4. **Extensibility**: Simple process to add new workflows and steps
5. **Type Safety**: Registry provides centralized component management
6. **Performance**: Components only loaded when needed
7. **Consistency**: Standardized props and events across all step components

## Usage Example

```javascript
// Register a new step component
registerStepComponent('custom-workflow', '1', CustomStep1Component);

// Check if component exists
if (hasStepComponent('foto-first-bulk-import', '1')) {
    // Component is available
}

// Get all components for a workflow
const components = getWorkflowComponents('import-items');
```

This system provides a robust foundation for building complex, multi-step workflows with rich, interactive user interfaces while maintaining clean separation between workflow logic and presentation components.
