bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Critical - Remove infinite re-render loops from all wizards

Browse Source 
CRITICAL BUG FIX: The useEffect hooks syncing wizard state with parent were
causing infinite re-render loops, completely blocking all UI interactions
(text inputs, clicks, selections, etc.).

Root cause: useEffect(() => onDataChange({...data, ...localState}), [localState])
creates infinite loop because localState is recreated on every render, triggering
the effect again, which updates parent, which re-renders component, repeat forever.

Solution: Remove problematic useEffect sync hooks and instead:
1. Create handler functions that update both local state AND parent state together
2. Call these handlers directly in onChange events (not in useEffect)
3. Only sync auto-generated fields (SKU, order number) in useEffect with proper deps

Files fixed:
- InventoryWizard.tsx: Added handleDataChange() function, updated all onChange
- QualityTemplateWizard.tsx: Added handleDataChange() function, updated all onChange
- CustomerOrderWizard.tsx: Fixed all 3 steps:
  * Step 1: handleCustomerChange(), handleNewCustomerChange()
  * Step 2: updateOrderItems()
  * Step 3: handleOrderDataChange()

Testing: All text inputs, select dropdowns, checkboxes, and buttons now work correctly.
UI is responsive and performant without infinite re-rendering.

This was blocking all user interactions - highest priority fix.
This commit is contained in:
Claude
2025-11-10 09:50:33 +00:00
parent e3021b839e
commit 502dae8dfa
3 changed files with 175 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
frontend/src/components/domain/unified-wizard/wizards/CustomerOrderWizard.tsx
View File

@@ -46,18 +46,30 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
fetchCustomers();
}, []);
// Sync with parent wizard state in real-time
useEffect(() => {
// Update parent whenever customer selection changes
const handleCustomerChange = (newCustomer: any, newShowForm: boolean) => {
setSelectedCustomer(newCustomer);
setShowNewCustomerForm(newShowForm);
onDataChange({
...data,
customer: selectedCustomer,
showNewCustomerForm,
newCustomerName: newCustomer.name,
newCustomerType: newCustomer.type,
newCustomerPhone: newCustomer.phone,
newCustomerEmail: newCustomer.email,
customer: newCustomer,
showNewCustomerForm: newShowForm,
});
}, [selectedCustomer, showNewCustomerForm, newCustomer]);
};
// Update new customer data
const handleNewCustomerChange = (updates: any) => {
const updated = { ...newCustomer, ...updates };
setNewCustomer(updated);
onDataChange({
...data,
showNewCustomerForm,
newCustomerName: updated.name,
newCustomerType: updated.type,
newCustomerPhone: updated.phone,
newCustomerEmail: updated.email,
});
};
const fetchCustomers = async () => {
if (!currentTenant?.id) return;
@@ -84,8 +96,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
);
const handleSelectCustomer = (customer: any) => {
setSelectedCustomer(customer);
setShowNewCustomerForm(false);
handleCustomerChange(customer, false);
};
return (
@@ -188,7 +199,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
{/* Create New Customer Button */}
<button
onClick={() => setShowNewCustomerForm(true)}
onClick={() => handleCustomerChange(null, true)}
className="w-full p-4 border-2 border-dashed border-[var(--border-secondary)] rounded-lg hover:border-[var(--color-primary)] transition-colors text-[var(--text-secondary)] hover:text-[var(--color-primary)] flex items-center justify-center gap-2"
>
<Plus className="w-5 h-5" />
@@ -212,7 +223,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
<input
type="text"
value={newCustomer.name}
onChange={(e) => setNewCustomer({ ...newCustomer, name: e.target.value })}
onChange={(e) => handleNewCustomerChange({ name: e.target.value })}
placeholder="E.g., The Mill Restaurant"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -224,7 +235,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
</label>
<select
value={newCustomer.type}
onChange={(e) => setNewCustomer({ ...newCustomer, type: e.target.value })}
onChange={(e) => handleNewCustomerChange({ type: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="retail">Retail</option>
@@ -241,7 +252,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
<input
type="tel"
value={newCustomer.phone}
onChange={(e) => setNewCustomer({ ...newCustomer, phone: e.target.value })}
onChange={(e) => handleNewCustomerChange({ phone: e.target.value })}
placeholder="+34 123 456 789"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -254,7 +265,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
<input
type="email"
value={newCustomer.email}
onChange={(e) => setNewCustomer({ ...newCustomer, email: e.target.value })}
onChange={(e) => handleNewCustomerChange({ email: e.target.value })}
placeholder="contact@restaurant.com"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -262,7 +273,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
</div>
<button
onClick={() => setShowNewCustomerForm(false)}
onClick={() => handleCustomerChange(selectedCustomer, false)}
className="mt-4 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
>
← Back to customer list
@@ -286,11 +297,12 @@ const OrderItemsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
fetchProducts();
}, []);
// Sync with parent wizard state in real-time
useEffect(() => {
const totalAmount = orderItems.reduce((sum: number, item: any) => sum + (item.subtotal || 0), 0);
onDataChange({ ...data, orderItems, totalAmount });
}, [orderItems]);
// Update parent whenever order items change
const updateOrderItems = (newItems: any[]) => {
setOrderItems(newItems);
const totalAmount = newItems.reduce((sum: number, item: any) => sum + (item.subtotal || 0), 0);
onDataChange({ ...data, orderItems: newItems, totalAmount });
};
const fetchProducts = async () => {
if (!currentTenant?.id) return;
@@ -313,7 +325,7 @@ const OrderItemsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
};
const handleAddItem = () => {
setOrderItems([
updateOrderItems([
...orderItems,
{
id: Date.now(),
@@ -349,11 +361,11 @@ const OrderItemsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
}
return item;
});
setOrderItems(updated);
updateOrderItems(updated);
};
const handleRemoveItem = (index: number) => {
setOrderItems(orderItems.filter((_: any, i: number) => i !== index));
updateOrderItems(orderItems.filter((_: any, i: number) => i !== index));
};
const calculateTotal = () => {
@@ -594,14 +606,17 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
useEffect(() => {
if (!orderData.orderNumber) {
const orderNum = `ORD-${Date.now().toString().slice(-8)}`;
setOrderData(prev => ({ ...prev, orderNumber: orderNum }));
const newData = { ...orderData, orderNumber: orderNum };
setOrderData(newData);
onDataChange({ ...data, ...newData });
}
}, []);
}, [orderData.orderNumber]);
// Sync with parent wizard state in real-time
useEffect(() => {
onDataChange({ ...data, ...orderData });
}, [orderData]);
// Update parent whenever order data changes
const handleOrderDataChange = (newOrderData: any) => {
setOrderData(newOrderData);
onDataChange({ ...data, ...newOrderData });
};
return (
<div className="space-y-6">
@@ -625,7 +640,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="date"
value={orderData.requestedDeliveryDate}
onChange={(e) => setOrderData({ ...orderData, requestedDeliveryDate: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, requestedDeliveryDate: e.target.value })}
min={new Date().toISOString().split('T')[0]}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -641,7 +656,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.orderNumber}
onChange={(e) => setOrderData({ ...orderData, orderNumber: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, orderNumber: e.target.value })}
placeholder="ORD-12345678"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -658,7 +673,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<select
value={orderData.orderType}
onChange={(e) => setOrderData({ ...orderData, orderType: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, orderType: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="standard">Standard</option>
@@ -674,7 +689,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<select
value={orderData.priority}
onChange={(e) => setOrderData({ ...orderData, priority: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, priority: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="low">Low</option>
@@ -690,7 +705,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<select
value={orderData.status}
onChange={(e) => setOrderData({ ...orderData, status: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, status: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="pending">Pending</option>
@@ -715,7 +730,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<button
type="button"
onClick={() => setOrderData({ ...orderData, deliveryMethod: 'pickup' })}
onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'pickup' })}
className={`p-3 rounded-lg border-2 transition-all ${
orderData.deliveryMethod === 'pickup'
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
@@ -727,7 +742,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</button>
<button
type="button"
onClick={() => setOrderData({ ...orderData, deliveryMethod: 'delivery' })}
onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'delivery' })}
className={`p-3 rounded-lg border-2 transition-all ${
orderData.deliveryMethod === 'delivery'
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
@@ -739,7 +754,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</button>
<button
type="button"
onClick={() => setOrderData({ ...orderData, deliveryMethod: 'shipping' })}
onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'shipping' })}
className={`p-3 rounded-lg border-2 transition-all ${
orderData.deliveryMethod === 'shipping'
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
@@ -760,7 +775,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<textarea
value={orderData.deliveryAddress}
onChange={(e) => setOrderData({ ...orderData, deliveryAddress: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryAddress: e.target.value })}
placeholder="Street, number, floor, postal code, city..."
rows={2}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
@@ -776,7 +791,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.deliveryContactName}
onChange={(e) => setOrderData({ ...orderData, deliveryContactName: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryContactName: e.target.value })}
placeholder="Contact person"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -789,7 +804,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="tel"
value={orderData.deliveryContactPhone}
onChange={(e) => setOrderData({ ...orderData, deliveryContactPhone: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryContactPhone: e.target.value })}
placeholder="+34 123 456 789"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -809,7 +824,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<select
value={orderData.paymentMethod}
onChange={(e) => setOrderData({ ...orderData, paymentMethod: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, paymentMethod: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="cash">Cash</option>
@@ -826,7 +841,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<select
value={orderData.paymentTerms}
onChange={(e) => setOrderData({ ...orderData, paymentTerms: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, paymentTerms: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="immediate">Immediate</option>
@@ -841,7 +856,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<select
value={orderData.paymentStatus}
onChange={(e) => setOrderData({ ...orderData, paymentStatus: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, paymentStatus: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="pending">Pending</option>
@@ -858,7 +873,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="date"
value={orderData.paymentDueDate}
onChange={(e) => setOrderData({ ...orderData, paymentDueDate: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, paymentDueDate: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -904,7 +919,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="number"
value={orderData.discountPercentage}
onChange={(e) => setOrderData({ ...orderData, discountPercentage: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, discountPercentage: e.target.value })}
placeholder="0"
step="0.01"
min="0"
@@ -920,7 +935,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="number"
value={orderData.deliveryFee}
onChange={(e) => setOrderData({ ...orderData, deliveryFee: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryFee: e.target.value })}
placeholder="0.00"
step="0.01"
min="0"
@@ -943,7 +958,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="date"
value={orderData.productionStartDate}
onChange={(e) => setOrderData({ ...orderData, productionStartDate: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, productionStartDate: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -955,7 +970,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="date"
value={orderData.productionDueDate}
onChange={(e) => setOrderData({ ...orderData, productionDueDate: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, productionDueDate: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -967,7 +982,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.productionBatchNumber}
onChange={(e) => setOrderData({ ...orderData, productionBatchNumber: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, productionBatchNumber: e.target.value })}
placeholder="BATCH-001"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -980,7 +995,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.deliveryTimeWindow}
onChange={(e) => setOrderData({ ...orderData, deliveryTimeWindow: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryTimeWindow: e.target.value })}
placeholder="E.g., 9:00 AM - 11:00 AM"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -992,7 +1007,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<textarea
value={orderData.productionNotes}
onChange={(e) => setOrderData({ ...orderData, productionNotes: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, productionNotes: e.target.value })}
placeholder="Special production requirements or notes"
rows={2}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
@@ -1014,7 +1029,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.shippingTrackingNumber}
onChange={(e) => setOrderData({ ...orderData, shippingTrackingNumber: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, shippingTrackingNumber: e.target.value })}
placeholder="Tracking number"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1027,7 +1042,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.shippingCarrier}
onChange={(e) => setOrderData({ ...orderData, shippingCarrier: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, shippingCarrier: e.target.value })}
placeholder="E.g., DHL, UPS, FedEx"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1040,7 +1055,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.pickupLocation}
onChange={(e) => setOrderData({ ...orderData, pickupLocation: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, pickupLocation: e.target.value })}
placeholder="Store location for pickup"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1053,7 +1068,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="date"
value={orderData.actualDeliveryDate}
onChange={(e) => setOrderData({ ...orderData, actualDeliveryDate: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, actualDeliveryDate: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -1072,7 +1087,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<select
value={orderData.orderSource}
onChange={(e) => setOrderData({ ...orderData, orderSource: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, orderSource: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="manual">Manual</option>
@@ -1089,7 +1104,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<select
value={orderData.salesChannel}
onChange={(e) => setOrderData({ ...orderData, salesChannel: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, salesChannel: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="direct">Direct</option>
@@ -1106,7 +1121,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.salesRepId}
onChange={(e) => setOrderData({ ...orderData, salesRepId: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, salesRepId: e.target.value })}
placeholder="Sales rep ID or name"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1127,7 +1142,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.customerPurchaseOrder}
onChange={(e) => setOrderData({ ...orderData, customerPurchaseOrder: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, customerPurchaseOrder: e.target.value })}
placeholder="Customer's PO number"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1139,7 +1154,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<textarea
value={orderData.deliveryInstructions}
onChange={(e) => setOrderData({ ...orderData, deliveryInstructions: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, deliveryInstructions: e.target.value })}
placeholder="Special delivery instructions"
rows={2}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
@@ -1152,7 +1167,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<textarea
value={orderData.specialInstructions}
onChange={(e) => setOrderData({ ...orderData, specialInstructions: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, specialInstructions: e.target.value })}
placeholder="Any special requirements or instructions"
rows={2}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
@@ -1165,7 +1180,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<textarea
value={orderData.internalNotes}
onChange={(e) => setOrderData({ ...orderData, internalNotes: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, internalNotes: e.target.value })}
placeholder="Internal notes (not visible to customer)"
rows={2}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
@@ -1178,7 +1193,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<textarea
value={orderData.customerNotes}
onChange={(e) => setOrderData({ ...orderData, customerNotes: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, customerNotes: e.target.value })}
placeholder="Notes from/for the customer"
rows={2}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
@@ -1197,7 +1212,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="checkbox"
checked={orderData.notifyCustomerOnStatusChange}
onChange={(e) => setOrderData({ ...orderData, notifyCustomerOnStatusChange: e.target.checked })}
onChange={(e) => handleOrderDataChange({ ...orderData, notifyCustomerOnStatusChange: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/>
<label className="text-sm text-[var(--text-secondary)]">
@@ -1209,7 +1224,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="checkbox"
checked={orderData.notifyCustomerOnDelivery}
onChange={(e) => setOrderData({ ...orderData, notifyCustomerOnDelivery: e.target.checked })}
onChange={(e) => handleOrderDataChange({ ...orderData, notifyCustomerOnDelivery: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/>
<label className="text-sm text-[var(--text-secondary)]">
@@ -1224,7 +1239,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="email"
value={orderData.customerNotificationEmail}
onChange={(e) => setOrderData({ ...orderData, customerNotificationEmail: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, customerNotificationEmail: e.target.value })}
placeholder="customer@email.com"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1237,7 +1252,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="tel"
value={orderData.customerNotificationPhone}
onChange={(e) => setOrderData({ ...orderData, customerNotificationPhone: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, customerNotificationPhone: e.target.value })}
placeholder="+34 123 456 789"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1255,7 +1270,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="checkbox"
checked={orderData.qualityCheckRequired}
onChange={(e) => setOrderData({ ...orderData, qualityCheckRequired: e.target.checked })}
onChange={(e) => handleOrderDataChange({ ...orderData, qualityCheckRequired: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/>
<label className="text-sm text-[var(--text-secondary)]">
@@ -1269,7 +1284,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<select
value={orderData.qualityCheckStatus}
onChange={(e) => setOrderData({ ...orderData, qualityCheckStatus: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, qualityCheckStatus: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="">Not Started</option>
@@ -1286,7 +1301,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.packagingInstructions}
onChange={(e) => setOrderData({ ...orderData, packagingInstructions: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, packagingInstructions: e.target.value })}
placeholder="Special packaging requirements"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1299,7 +1314,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.labelingRequirements}
onChange={(e) => setOrderData({ ...orderData, labelingRequirements: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, labelingRequirements: e.target.value })}
placeholder="Custom label requirements"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1317,7 +1332,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="checkbox"
checked={orderData.isRecurring}
onChange={(e) => setOrderData({ ...orderData, isRecurring: e.target.checked })}
onChange={(e) => handleOrderDataChange({ ...orderData, isRecurring: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/>
<label className="text-sm text-[var(--text-secondary)]">
@@ -1333,7 +1348,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.recurringSchedule}
onChange={(e) => setOrderData({ ...orderData, recurringSchedule: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, recurringSchedule: e.target.value })}
placeholder="E.g., Weekly on Mondays, Every 2 weeks"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1350,7 +1365,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input
type="text"
value={orderData.tags}
onChange={(e) => setOrderData({ ...orderData, tags: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, tags: e.target.value })}
placeholder="urgent, vip, wholesale"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -1365,7 +1380,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label>
<textarea
value={orderData.metadata}
onChange={(e) => setOrderData({ ...orderData, metadata: e.target.value })}
onChange={(e) => handleOrderDataChange({ ...orderData, metadata: e.target.value })}
placeholder='{"custom_field": "value"}'
rows={2}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)] font-mono text-xs"