Powdercoating Batch Editor - Demo Application

A comprehensive React demo application showcasing the BatchEditor component for managing powdercoating batches with drag-and-drop functionality, process recipes, and batch splitting capabilities.

🚀 Demo Features

📊 Job Dashboard

• Multi-Project Management - Handle multiple powdercoating jobs simultaneously
• Job Status Tracking - Active, Planning, and Completed job states
• Client Information - Track client details and deadlines
• Visual Job Cards - Quick overview with part icons and batch counts

🔄 BatchEditor Component Integration

• Multiple Job Types - Automotive, Industrial, Motorcycle parts
• Dedicated Processes - Custom processes per job type
• Recipe Management - Pre-configured process combinations
• Real-time Updates - Live data synchronization between components

⚡ Async Loading Demo

• API Simulation - Demonstrates loading data from external sources
• Loading States - Professional loading indicators
• Dynamic Updates - Refresh and update data on demand

Features

• 🔄 Drag & Drop Interface - Intuitive drag-and-drop for processes and recipes
• 📋 Recipe System - Pre-configured process combinations for common workflows
• ✂️ Batch Splitting - Split batches by quantity while preserving processes
• 🚗 Part Icons - Visual identification with customizable part icons
• ⚡ Async Data Loading - Support for dynamic data loading from APIs
• 📊 Real-time Updates - onChange callbacks for data synchronization
• 🎨 Modern UI - Clean, minimal design with glassmorphism elements
• 📱 Responsive Design - Works on desktop, tablet, and mobile devices

Installation & Setup

git clone https://github.com/yourusername/powdercoating-batch-editor.git
cd powdercoating-batch-editor
npm install
npm start

The demo will be available at http://localhost:3000

Demo Application Structure

1. Job Dashboard View

• Browse multiple powdercoating projects
• View job status, client info, and deadlines
• See batch counts and part type previews
• Click any job to open the BatchEditor

2. Individual Job Management

Each job contains:

• Batches: Different part types with quantities
• Processes: Available coating processes
• Recipes: Pre-configured process sequences
• Real-time editing: Changes sync immediately

3. Async Loading Demo

• Simulates API data loading
• Shows loading states and error handling
• Demonstrates dynamic data updates

Component Usage Examples

Basic Integration

import BatchEditor from './BatchEditor';

function MyApp() {
  const [batches, setBatches] = useState([]);
  
  return (
    <BatchEditor
      initialJobName="My Coating Job"
      initialBatches={batches}
      onBatchesChange={setBatches}
    />
  );
}

Multi-Job Application

function JobManagementApp() {
  const [jobs, setJobs] = useState([]);
  const [activeJobId, setActiveJobId] = useState(null);
  
  const activeJob = jobs.find(job => job.id === activeJobId);
  
  return (
    <div>
      {!activeJob ? (
        <JobList jobs={jobs} onSelectJob={setActiveJobId} />
      ) : (
        <BatchEditor
          initialJobName={activeJob.name}
          initialBatches={activeJob.batches}
          initialAvailableProcesses={activeJob.processes}
          initialAvailableRecipes={activeJob.recipes}
          onBatchesChange={(batches) => updateJobBatches(activeJob.id, batches)}
        />
      )}
    </div>
  );
}

Async Data Loading

function AsyncJobEditor({ jobId }) {
  const [jobData, setJobData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    loadJobFromAPI(jobId)
      .then(setJobData)
      .finally(() => setLoading(false));
  }, [jobId]);
  
  if (loading) return <LoadingSpinner />;
  
  return (
    <BatchEditor
      initialJobName={jobData.name}
      initialBatches={jobData.batches}
      initialAvailableProcesses={jobData.processes}
      initialAvailableRecipes={jobData.recipes}
      onBatchesChange={(batches) => saveJobToAPI(jobId, { batches })}
    />
  );
}

Data Structures

Job Format

{
  "id": "job-1",
  "name": "Automotive Parts - Q4 Production",
  "client": "AutoCorp Industries",
  "status": "active",
  "deadline": "2024-01-15",
  "batches": [...],
  "processes": [...],
  "recipes": [...]
}

Batch Format

{
  "id": "batch-1",
  "name": "Wheel Rims Set A",
  "quantity": 48,
  "partType": "rims",
  "partIcon": "🚗",
  "processes": [...]
}

Process Format

{
  "id": "process-1",
  "name": "Sandblasting",
  "type": "prep",
  "color": "#ff6b6b"
}

Recipe Format

{
  "id": "recipe-1",
  "name": "Standard Automotive",
  "type": "recipe",
  "color": "#2c3e50",
  "processes": [...]
}

BatchEditor Props

Sample Jobs in Demo

1. Automotive Parts - Q4 Production

• Status: Active
• Parts: Wheel rims, bumper components
• Processes: Degreasing, sandblasting, powder coating, oven curing
• Client: AutoCorp Industries

2. Industrial Equipment Refurbishment

• Status: Planning
• Parts: Excavator arms, hydraulic components
• Processes: High-pressure wash, rust removal, primer, industrial coating
• Client: Heavy Machinery Co.

3. Custom Motorcycle Parts

• Status: Completed
• Parts: Exhaust pipes, engine covers
• Processes: Precision cleaning, chrome coating, polishing
• Client: Precision Bikes Ltd.

Development

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Available Scripts

npm start          # Start development server
npm run build      # Build for production
npm test           # Run tests
npm run eject      # Eject from Create React App

Project Structure

src/
├── App.js                      # Main demo application
├── App.css                     # Application styles
├── BatchEditor.js              # Core BatchEditor component
├── BatchEditor.css             # BatchEditor styles
├── AsyncBatchEditorDemo.js     # Async loading demo
├── TaskCard.js                 # Individual task components
└── TaskCard.css                # Task card styles

Integration Guide

This demo shows how to integrate the BatchEditor into your own applications:

1. Import the component: import BatchEditor from './BatchEditor';
2. Prepare your data: Format jobs, batches, processes, and recipes
3. Handle callbacks: Use onBatchesChange and onJobNameChange for updates
4. Style integration: Customize CSS to match your app's design
5. API integration: Use async patterns for loading/saving data

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Built for powdercoating professionals who need efficient batch management 🏭✨