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(); fetchCustomers();
}, []); }, []);
// Sync with parent wizard state in real-time // Update parent whenever customer selection changes
useEffect(() => { const handleCustomerChange = (newCustomer: any, newShowForm: boolean) => {
setSelectedCustomer(newCustomer);
setShowNewCustomerForm(newShowForm);
onDataChange({ onDataChange({
...data, ...data,
customer: selectedCustomer, customer: newCustomer,
showNewCustomerForm, showNewCustomerForm: newShowForm,
newCustomerName: newCustomer.name,
newCustomerType: newCustomer.type,
newCustomerPhone: newCustomer.phone,
newCustomerEmail: newCustomer.email,
}); });
}, [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 () => { const fetchCustomers = async () => {
if (!currentTenant?.id) return; if (!currentTenant?.id) return;
@@ -84,8 +96,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
); );
const handleSelectCustomer = (customer: any) => { const handleSelectCustomer = (customer: any) => {
setSelectedCustomer(customer); handleCustomerChange(customer, false);
setShowNewCustomerForm(false);
}; };
return ( return (
@@ -188,7 +199,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
{/* Create New Customer Button */} {/* Create New Customer Button */}
<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" 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" /> <Plus className="w-5 h-5" />
@@ -212,7 +223,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
<input <input
type="text" type="text"
value={newCustomer.name} value={newCustomer.name}
onChange={(e) => setNewCustomer({ ...newCustomer, name: e.target.value })} onChange={(e) => handleNewCustomerChange({ name: e.target.value })}
placeholder="E.g., The Mill Restaurant" 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)]" 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> </label>
<select <select
value={newCustomer.type} 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)]" 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> <option value="retail">Retail</option>
@@ -241,7 +252,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }
<input <input
type="tel" type="tel"
value={newCustomer.phone} value={newCustomer.phone}
onChange={(e) => setNewCustomer({ ...newCustomer, phone: e.target.value })} onChange={(e) => handleNewCustomerChange({ phone: e.target.value })}
placeholder="+34 123 456 789" 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)]" 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 <input
type="email" type="email"
value={newCustomer.email} value={newCustomer.email}
onChange={(e) => setNewCustomer({ ...newCustomer, email: e.target.value })} onChange={(e) => handleNewCustomerChange({ email: e.target.value })}
placeholder="contact@restaurant.com" 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)]" 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> </div>
<button <button
onClick={() => setShowNewCustomerForm(false)} onClick={() => handleCustomerChange(selectedCustomer, false)}
className="mt-4 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]" className="mt-4 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
> >
← Back to customer list ← Back to customer list
@@ -286,11 +297,12 @@ const OrderItemsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
fetchProducts(); fetchProducts();
}, []); }, []);
// Sync with parent wizard state in real-time // Update parent whenever order items change
useEffect(() => { const updateOrderItems = (newItems: any[]) => {
const totalAmount = orderItems.reduce((sum: number, item: any) => sum + (item.subtotal || 0), 0); setOrderItems(newItems);
onDataChange({ ...data, orderItems, totalAmount }); const totalAmount = newItems.reduce((sum: number, item: any) => sum + (item.subtotal || 0), 0);
}, [orderItems]); onDataChange({ ...data, orderItems: newItems, totalAmount });
};
const fetchProducts = async () => { const fetchProducts = async () => {
if (!currentTenant?.id) return; if (!currentTenant?.id) return;
@@ -313,7 +325,7 @@ const OrderItemsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
}; };
const handleAddItem = () => { const handleAddItem = () => {
setOrderItems([ updateOrderItems([
...orderItems, ...orderItems,
{ {
id: Date.now(), id: Date.now(),
@@ -349,11 +361,11 @@ const OrderItemsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
} }
return item; return item;
}); });
setOrderItems(updated); updateOrderItems(updated);
}; };
const handleRemoveItem = (index: number) => { const handleRemoveItem = (index: number) => {
setOrderItems(orderItems.filter((_: any, i: number) => i !== index)); updateOrderItems(orderItems.filter((_: any, i: number) => i !== index));
}; };
const calculateTotal = () => { const calculateTotal = () => {
@@ -594,14 +606,17 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
useEffect(() => { useEffect(() => {
if (!orderData.orderNumber) { if (!orderData.orderNumber) {
const orderNum = `ORD-${Date.now().toString().slice(-8)}`; 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 // Update parent whenever order data changes
useEffect(() => { const handleOrderDataChange = (newOrderData: any) => {
onDataChange({ ...data, ...orderData }); setOrderData(newOrderData);
}, [orderData]); onDataChange({ ...data, ...newOrderData });
};
return ( return (
<div className="space-y-6"> <div className="space-y-6">
@@ -625,7 +640,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="date" type="date"
value={orderData.requestedDeliveryDate} 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]} 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)]" 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 <input
type="text" type="text"
value={orderData.orderNumber} value={orderData.orderNumber}
onChange={(e) => setOrderData({ ...orderData, orderNumber: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, orderNumber: e.target.value })}
placeholder="ORD-12345678" 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)]" 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> </label>
<select <select
value={orderData.orderType} 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)]" 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> <option value="standard">Standard</option>
@@ -674,7 +689,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<select <select
value={orderData.priority} 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)]" 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> <option value="low">Low</option>
@@ -690,7 +705,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<select <select
value={orderData.status} 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)]" 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> <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"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<button <button
type="button" type="button"
onClick={() => setOrderData({ ...orderData, deliveryMethod: 'pickup' })} onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'pickup' })}
className={`p-3 rounded-lg border-2 transition-all ${ className={`p-3 rounded-lg border-2 transition-all ${
orderData.deliveryMethod === 'pickup' orderData.deliveryMethod === 'pickup'
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5' ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
@@ -727,7 +742,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</button> </button>
<button <button
type="button" type="button"
onClick={() => setOrderData({ ...orderData, deliveryMethod: 'delivery' })} onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'delivery' })}
className={`p-3 rounded-lg border-2 transition-all ${ className={`p-3 rounded-lg border-2 transition-all ${
orderData.deliveryMethod === 'delivery' orderData.deliveryMethod === 'delivery'
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5' ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
@@ -739,7 +754,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</button> </button>
<button <button
type="button" type="button"
onClick={() => setOrderData({ ...orderData, deliveryMethod: 'shipping' })} onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'shipping' })}
className={`p-3 rounded-lg border-2 transition-all ${ className={`p-3 rounded-lg border-2 transition-all ${
orderData.deliveryMethod === 'shipping' orderData.deliveryMethod === 'shipping'
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5' ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
@@ -760,7 +775,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<textarea <textarea
value={orderData.deliveryAddress} 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..." placeholder="Street, number, floor, postal code, city..."
rows={2} 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)]" 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 <input
type="text" type="text"
value={orderData.deliveryContactName} value={orderData.deliveryContactName}
onChange={(e) => setOrderData({ ...orderData, deliveryContactName: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, deliveryContactName: e.target.value })}
placeholder="Contact person" 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)]" 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 <input
type="tel" type="tel"
value={orderData.deliveryContactPhone} value={orderData.deliveryContactPhone}
onChange={(e) => setOrderData({ ...orderData, deliveryContactPhone: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, deliveryContactPhone: e.target.value })}
placeholder="+34 123 456 789" 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)]" 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> </label>
<select <select
value={orderData.paymentMethod} 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)]" 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> <option value="cash">Cash</option>
@@ -826,7 +841,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<select <select
value={orderData.paymentTerms} 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)]" 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> <option value="immediate">Immediate</option>
@@ -841,7 +856,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<select <select
value={orderData.paymentStatus} 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)]" 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> <option value="pending">Pending</option>
@@ -858,7 +873,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="date" type="date"
value={orderData.paymentDueDate} 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)]" 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> </div>
@@ -904,7 +919,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={orderData.discountPercentage} value={orderData.discountPercentage}
onChange={(e) => setOrderData({ ...orderData, discountPercentage: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, discountPercentage: e.target.value })}
placeholder="0" placeholder="0"
step="0.01" step="0.01"
min="0" min="0"
@@ -920,7 +935,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={orderData.deliveryFee} value={orderData.deliveryFee}
onChange={(e) => setOrderData({ ...orderData, deliveryFee: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, deliveryFee: e.target.value })}
placeholder="0.00" placeholder="0.00"
step="0.01" step="0.01"
min="0" min="0"
@@ -943,7 +958,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="date" type="date"
value={orderData.productionStartDate} 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)]" 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> </div>
@@ -955,7 +970,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="date" type="date"
value={orderData.productionDueDate} 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)]" 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> </div>
@@ -967,7 +982,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={orderData.productionBatchNumber} value={orderData.productionBatchNumber}
onChange={(e) => setOrderData({ ...orderData, productionBatchNumber: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, productionBatchNumber: e.target.value })}
placeholder="BATCH-001" 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)]" 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 <input
type="text" type="text"
value={orderData.deliveryTimeWindow} 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" 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)]" 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> </label>
<textarea <textarea
value={orderData.productionNotes} 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" placeholder="Special production requirements or notes"
rows={2} 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)]" 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 <input
type="text" type="text"
value={orderData.shippingTrackingNumber} value={orderData.shippingTrackingNumber}
onChange={(e) => setOrderData({ ...orderData, shippingTrackingNumber: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, shippingTrackingNumber: e.target.value })}
placeholder="Tracking number" 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)]" 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 <input
type="text" type="text"
value={orderData.shippingCarrier} 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" 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)]" 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 <input
type="text" type="text"
value={orderData.pickupLocation} value={orderData.pickupLocation}
onChange={(e) => setOrderData({ ...orderData, pickupLocation: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, pickupLocation: e.target.value })}
placeholder="Store location for pickup" 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)]" 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 <input
type="date" type="date"
value={orderData.actualDeliveryDate} 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)]" 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> </div>
@@ -1072,7 +1087,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<select <select
value={orderData.orderSource} 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)]" 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> <option value="manual">Manual</option>
@@ -1089,7 +1104,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<select <select
value={orderData.salesChannel} 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)]" 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> <option value="direct">Direct</option>
@@ -1106,7 +1121,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={orderData.salesRepId} 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" 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)]" 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 <input
type="text" type="text"
value={orderData.customerPurchaseOrder} value={orderData.customerPurchaseOrder}
onChange={(e) => setOrderData({ ...orderData, customerPurchaseOrder: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, customerPurchaseOrder: e.target.value })}
placeholder="Customer's PO number" 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)]" 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> </label>
<textarea <textarea
value={orderData.deliveryInstructions} value={orderData.deliveryInstructions}
onChange={(e) => setOrderData({ ...orderData, deliveryInstructions: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, deliveryInstructions: e.target.value })}
placeholder="Special delivery instructions" placeholder="Special delivery instructions"
rows={2} 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)]" 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> </label>
<textarea <textarea
value={orderData.specialInstructions} 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" placeholder="Any special requirements or instructions"
rows={2} 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)]" 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> </label>
<textarea <textarea
value={orderData.internalNotes} 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)" placeholder="Internal notes (not visible to customer)"
rows={2} 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)]" 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> </label>
<textarea <textarea
value={orderData.customerNotes} 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" placeholder="Notes from/for the customer"
rows={2} 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)]" 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 <input
type="checkbox" type="checkbox"
checked={orderData.notifyCustomerOnStatusChange} 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)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -1209,7 +1224,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="checkbox" type="checkbox"
checked={orderData.notifyCustomerOnDelivery} 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)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -1224,7 +1239,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="email" type="email"
value={orderData.customerNotificationEmail} value={orderData.customerNotificationEmail}
onChange={(e) => setOrderData({ ...orderData, customerNotificationEmail: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, customerNotificationEmail: e.target.value })}
placeholder="customer@email.com" 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)]" 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 <input
type="tel" type="tel"
value={orderData.customerNotificationPhone} value={orderData.customerNotificationPhone}
onChange={(e) => setOrderData({ ...orderData, customerNotificationPhone: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, customerNotificationPhone: e.target.value })}
placeholder="+34 123 456 789" 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)]" 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 <input
type="checkbox" type="checkbox"
checked={orderData.qualityCheckRequired} 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)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -1269,7 +1284,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<select <select
value={orderData.qualityCheckStatus} 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)]" 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> <option value="">Not Started</option>
@@ -1286,7 +1301,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={orderData.packagingInstructions} value={orderData.packagingInstructions}
onChange={(e) => setOrderData({ ...orderData, packagingInstructions: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, packagingInstructions: e.target.value })}
placeholder="Special packaging requirements" 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)]" 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 <input
type="text" type="text"
value={orderData.labelingRequirements} value={orderData.labelingRequirements}
onChange={(e) => setOrderData({ ...orderData, labelingRequirements: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, labelingRequirements: e.target.value })}
placeholder="Custom label requirements" 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)]" 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 <input
type="checkbox" type="checkbox"
checked={orderData.isRecurring} 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)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -1333,7 +1348,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={orderData.recurringSchedule} 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" 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)]" 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 <input
type="text" type="text"
value={orderData.tags} value={orderData.tags}
onChange={(e) => setOrderData({ ...orderData, tags: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, tags: e.target.value })}
placeholder="urgent, vip, wholesale" 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)]" 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> </label>
<textarea <textarea
value={orderData.metadata} value={orderData.metadata}
onChange={(e) => setOrderData({ ...orderData, metadata: e.target.value })} onChange={(e) => handleOrderDataChange({ ...orderData, metadata: e.target.value })}
placeholder='{"custom_field": "value"}' placeholder='{"custom_field": "value"}'
rows={2} 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" 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"

99
frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx
View File

@@ -82,14 +82,17 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
useEffect(() => { useEffect(() => {
if (!inventoryData.sku && inventoryData.name) { if (!inventoryData.sku && inventoryData.name) {
const sku = `SKU-${inventoryData.name.substring(0, 3).toUpperCase()}-${Date.now().toString().slice(-4)}`; const sku = `SKU-${inventoryData.name.substring(0, 3).toUpperCase()}-${Date.now().toString().slice(-4)}`;
setInventoryData(prev => ({ ...prev, sku })); const newData = { ...inventoryData, sku };
setInventoryData(newData);
onDataChange({ ...data, ...newData });
} }
}, [inventoryData.name]); }, [inventoryData.name, inventoryData.sku]);
// Sync with parent wizard state in real-time // Update parent whenever local state changes
useEffect(() => { const handleDataChange = (newInventoryData: any) => {
onDataChange({ ...data, ...inventoryData }); setInventoryData(newInventoryData);
}, [inventoryData]); onDataChange({ ...data, ...newInventoryData });
};
return ( return (
<div className="space-y-6"> <div className="space-y-6">
@@ -111,7 +114,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.name} value={inventoryData.name}
onChange={(e) => setInventoryData({ ...inventoryData, name: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, name: e.target.value })}
placeholder="E.g., All-Purpose Flour, Sourdough Bread" placeholder="E.g., All-Purpose Flour, Sourdough Bread"
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)]" 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)]"
/> />
@@ -123,7 +126,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<select <select
value={inventoryData.productType} value={inventoryData.productType}
onChange={(e) => setInventoryData({ ...inventoryData, productType: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, productType: 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)]" 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="ingredient">Ingredient</option> <option value="ingredient">Ingredient</option>
@@ -139,7 +142,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<select <select
value={inventoryData.unitOfMeasure} value={inventoryData.unitOfMeasure}
onChange={(e) => setInventoryData({ ...inventoryData, unitOfMeasure: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, unitOfMeasure: 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)]" 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="">Select...</option> <option value="">Select...</option>
@@ -169,7 +172,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.sku} value={inventoryData.sku}
onChange={(e) => setInventoryData({ ...inventoryData, sku: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, sku: e.target.value })}
placeholder="SKU-XXX-1234" placeholder="SKU-XXX-1234"
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)]" 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)]"
/> />
@@ -182,7 +185,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.barcode} value={inventoryData.barcode}
onChange={(e) => setInventoryData({ ...inventoryData, barcode: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, barcode: e.target.value })}
placeholder="Barcode/UPC/EAN" placeholder="Barcode/UPC/EAN"
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)]" 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)]"
/> />
@@ -194,7 +197,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<select <select
value={inventoryData.productType === 'ingredient' ? inventoryData.ingredientCategory : inventoryData.productCategory} value={inventoryData.productType === 'ingredient' ? inventoryData.ingredientCategory : inventoryData.productCategory}
onChange={(e) => setInventoryData({ onChange={(e) => handleDataChange({
...inventoryData, ...inventoryData,
[inventoryData.productType === 'ingredient' ? 'ingredientCategory' : 'productCategory']: e.target.value [inventoryData.productType === 'ingredient' ? 'ingredientCategory' : 'productCategory']: e.target.value
})} })}
@@ -233,7 +236,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.brand} value={inventoryData.brand}
onChange={(e) => setInventoryData({ ...inventoryData, brand: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, brand: e.target.value })}
placeholder="Brand name" placeholder="Brand 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)]" 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)]"
/> />
@@ -245,7 +248,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<textarea <textarea
value={inventoryData.description} value={inventoryData.description}
onChange={(e) => setInventoryData({ ...inventoryData, description: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, description: e.target.value })}
placeholder="Detailed description of the inventory item" placeholder="Detailed description of the inventory item"
rows={2} 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)]" 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)]"
@@ -275,7 +278,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.averageCost} value={inventoryData.averageCost}
onChange={(e) => setInventoryData({ ...inventoryData, averageCost: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, averageCost: e.target.value })}
placeholder="0.00" placeholder="0.00"
step="0.01" step="0.01"
min="0" min="0"
@@ -290,7 +293,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.lastPurchasePrice} value={inventoryData.lastPurchasePrice}
onChange={(e) => setInventoryData({ ...inventoryData, lastPurchasePrice: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, lastPurchasePrice: e.target.value })}
placeholder="0.00" placeholder="0.00"
step="0.01" step="0.01"
min="0" min="0"
@@ -308,7 +311,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.standardCost} value={inventoryData.standardCost}
onChange={(e) => setInventoryData({ ...inventoryData, standardCost: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, standardCost: e.target.value })}
placeholder="0.00" placeholder="0.00"
step="0.01" step="0.01"
min="0" min="0"
@@ -323,7 +326,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.sellingPrice} value={inventoryData.sellingPrice}
onChange={(e) => setInventoryData({ ...inventoryData, sellingPrice: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, sellingPrice: e.target.value })}
placeholder="0.00" placeholder="0.00"
step="0.01" step="0.01"
min="0" min="0"
@@ -338,7 +341,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.minimumPrice} value={inventoryData.minimumPrice}
onChange={(e) => setInventoryData({ ...inventoryData, minimumPrice: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, minimumPrice: e.target.value })}
placeholder="0.00" placeholder="0.00"
step="0.01" step="0.01"
min="0" min="0"
@@ -364,7 +367,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.lowStockThreshold} value={inventoryData.lowStockThreshold}
onChange={(e) => setInventoryData({ ...inventoryData, lowStockThreshold: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, lowStockThreshold: e.target.value })}
placeholder="10" placeholder="10"
min="0" min="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)]" 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)]"
@@ -381,7 +384,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.reorderPoint} value={inventoryData.reorderPoint}
onChange={(e) => setInventoryData({ ...inventoryData, reorderPoint: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, reorderPoint: e.target.value })}
placeholder="20" placeholder="20"
min="0" min="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)]" 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)]"
@@ -398,7 +401,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.reorderQuantity} value={inventoryData.reorderQuantity}
onChange={(e) => setInventoryData({ ...inventoryData, reorderQuantity: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, reorderQuantity: e.target.value })}
placeholder="100" placeholder="100"
min="0" min="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)]" 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)]"
@@ -412,7 +415,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.maxStockLevel} value={inventoryData.maxStockLevel}
onChange={(e) => setInventoryData({ ...inventoryData, maxStockLevel: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, maxStockLevel: e.target.value })}
placeholder="500" placeholder="500"
min="0" min="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)]" 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)]"
@@ -429,7 +432,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.leadTimeDays} value={inventoryData.leadTimeDays}
onChange={(e) => setInventoryData({ ...inventoryData, leadTimeDays: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, leadTimeDays: e.target.value })}
placeholder="7" placeholder="7"
min="0" min="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)]" 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)]"
@@ -451,7 +454,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.packageSize} value={inventoryData.packageSize}
onChange={(e) => setInventoryData({ ...inventoryData, packageSize: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, packageSize: e.target.value })}
placeholder="E.g., 25kg bag, 12-pack" placeholder="E.g., 25kg bag, 12-pack"
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)]" 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)]"
/> />
@@ -464,7 +467,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.shelfLifeDays} value={inventoryData.shelfLifeDays}
onChange={(e) => setInventoryData({ ...inventoryData, shelfLifeDays: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, shelfLifeDays: e.target.value })}
placeholder="365" placeholder="365"
min="0" min="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)]" 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)]"
@@ -481,7 +484,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.displayLifeHours} value={inventoryData.displayLifeHours}
onChange={(e) => setInventoryData({ ...inventoryData, displayLifeHours: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, displayLifeHours: e.target.value })}
placeholder="24" placeholder="24"
min="0" min="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)]" 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)]"
@@ -496,7 +499,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.storageTempMin} value={inventoryData.storageTempMin}
onChange={(e) => setInventoryData({ ...inventoryData, storageTempMin: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, storageTempMin: e.target.value })}
placeholder="Min" placeholder="Min"
step="0.1" step="0.1"
className="w-1/2 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)]" className="w-1/2 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)]"
@@ -504,7 +507,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.storageTempMax} value={inventoryData.storageTempMax}
onChange={(e) => setInventoryData({ ...inventoryData, storageTempMax: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, storageTempMax: e.target.value })}
placeholder="Max" placeholder="Max"
step="0.1" step="0.1"
className="w-1/2 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)]" className="w-1/2 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)]"
@@ -526,7 +529,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<textarea <textarea
value={inventoryData.storageInstructions} value={inventoryData.storageInstructions}
onChange={(e) => setInventoryData({ ...inventoryData, storageInstructions: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, storageInstructions: e.target.value })}
placeholder="E.g., Store in cool, dry place away from direct sunlight" placeholder="E.g., Store in cool, dry place away from direct sunlight"
rows={2} 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)]" 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)]"
@@ -539,7 +542,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<textarea <textarea
value={inventoryData.handlingInstructions} value={inventoryData.handlingInstructions}
onChange={(e) => setInventoryData({ ...inventoryData, handlingInstructions: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, handlingInstructions: e.target.value })}
placeholder="Special handling requirements" placeholder="Special handling requirements"
rows={2} 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)]" 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)]"
@@ -550,7 +553,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="checkbox" type="checkbox"
checked={inventoryData.isPerishable} checked={inventoryData.isPerishable}
onChange={(e) => setInventoryData({ ...inventoryData, isPerishable: e.target.checked })} onChange={(e) => handleDataChange({ ...inventoryData, isPerishable: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -573,7 +576,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.preferredSupplierId} value={inventoryData.preferredSupplierId}
onChange={(e) => setInventoryData({ ...inventoryData, preferredSupplierId: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, preferredSupplierId: e.target.value })}
placeholder="Supplier ID" placeholder="Supplier ID"
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)]" 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)]"
/> />
@@ -586,7 +589,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.supplierProductCode} value={inventoryData.supplierProductCode}
onChange={(e) => setInventoryData({ ...inventoryData, supplierProductCode: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, supplierProductCode: e.target.value })}
placeholder="Supplier's product code" placeholder="Supplier's product code"
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)]" 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)]"
/> />
@@ -610,7 +613,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.allergenInfo} value={inventoryData.allergenInfo}
onChange={(e) => setInventoryData({ ...inventoryData, allergenInfo: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, allergenInfo: e.target.value })}
placeholder="gluten, milk, eggs" placeholder="gluten, milk, eggs"
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)]" 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)]"
/> />
@@ -626,7 +629,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.nutritionalInfo} value={inventoryData.nutritionalInfo}
onChange={(e) => setInventoryData({ ...inventoryData, nutritionalInfo: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, nutritionalInfo: e.target.value })}
placeholder="calories:250, protein:8g, carbs:45g" placeholder="calories:250, protein:8g, carbs:45g"
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)]" 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)]"
/> />
@@ -642,7 +645,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.certifications} value={inventoryData.certifications}
onChange={(e) => setInventoryData({ ...inventoryData, certifications: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, certifications: e.target.value })}
placeholder="Organic, Non-GMO, Kosher" placeholder="Organic, Non-GMO, Kosher"
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)]" 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)]"
/> />
@@ -663,7 +666,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.weight} value={inventoryData.weight}
onChange={(e) => setInventoryData({ ...inventoryData, weight: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, weight: e.target.value })}
placeholder="0.00" placeholder="0.00"
step="0.01" step="0.01"
min="0" min="0"
@@ -678,7 +681,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="number" type="number"
value={inventoryData.volume} value={inventoryData.volume}
onChange={(e) => setInventoryData({ ...inventoryData, volume: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, volume: e.target.value })}
placeholder="0.00" placeholder="0.00"
step="0.01" step="0.01"
min="0" min="0"
@@ -693,7 +696,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.dimensions} value={inventoryData.dimensions}
onChange={(e) => setInventoryData({ ...inventoryData, dimensions: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, dimensions: e.target.value })}
placeholder="30×20×15" placeholder="30×20×15"
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)]" 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)]"
/> />
@@ -706,7 +709,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.color} value={inventoryData.color}
onChange={(e) => setInventoryData({ ...inventoryData, color: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, color: e.target.value })}
placeholder="Product color" placeholder="Product color"
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)]" 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)]"
/> />
@@ -724,7 +727,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="checkbox" type="checkbox"
checked={inventoryData.isActive} checked={inventoryData.isActive}
onChange={(e) => setInventoryData({ ...inventoryData, isActive: e.target.checked })} onChange={(e) => handleDataChange({ ...inventoryData, isActive: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -736,7 +739,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="checkbox" type="checkbox"
checked={inventoryData.trackByLot} checked={inventoryData.trackByLot}
onChange={(e) => setInventoryData({ ...inventoryData, trackByLot: e.target.checked })} onChange={(e) => handleDataChange({ ...inventoryData, trackByLot: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -748,7 +751,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="checkbox" type="checkbox"
checked={inventoryData.trackByExpiry} checked={inventoryData.trackByExpiry}
onChange={(e) => setInventoryData({ ...inventoryData, trackByExpiry: e.target.checked })} onChange={(e) => handleDataChange({ ...inventoryData, trackByExpiry: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -760,7 +763,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="checkbox" type="checkbox"
checked={inventoryData.allowNegativeStock} checked={inventoryData.allowNegativeStock}
onChange={(e) => setInventoryData({ ...inventoryData, allowNegativeStock: e.target.checked })} onChange={(e) => handleDataChange({ ...inventoryData, allowNegativeStock: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -782,7 +785,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<textarea <textarea
value={inventoryData.notes} value={inventoryData.notes}
onChange={(e) => setInventoryData({ ...inventoryData, notes: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, notes: e.target.value })}
placeholder="Additional notes about this item" placeholder="Additional notes about this item"
rows={3} rows={3}
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)]" 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)]"
@@ -799,7 +802,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
<input <input
type="text" type="text"
value={inventoryData.tags} value={inventoryData.tags}
onChange={(e) => setInventoryData({ ...inventoryData, tags: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, tags: e.target.value })}
placeholder="organic, premium, seasonal" placeholder="organic, premium, seasonal"
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)]" 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)]"
/> />
@@ -814,7 +817,7 @@ const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange })
</label> </label>
<textarea <textarea
value={inventoryData.customFields} value={inventoryData.customFields}
onChange={(e) => setInventoryData({ ...inventoryData, customFields: e.target.value })} onChange={(e) => handleDataChange({ ...inventoryData, customFields: e.target.value })}
placeholder='{"custom_field": "value"}' placeholder='{"custom_field": "value"}'
rows={2} 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" 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"

61
frontend/src/components/domain/unified-wizard/wizards/QualityTemplateWizard.tsx
View File

@@ -54,14 +54,17 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
useEffect(() => { useEffect(() => {
if (!templateData.templateCode && templateData.name) { if (!templateData.templateCode && templateData.name) {
const code = `TPL-${templateData.name.substring(0, 3).toUpperCase()}-${Date.now().toString().slice(-4)}`; const code = `TPL-${templateData.name.substring(0, 3).toUpperCase()}-${Date.now().toString().slice(-4)}`;
setTemplateData(prev => ({ ...prev, templateCode: code })); const newData = { ...templateData, templateCode: code };
setTemplateData(newData);
onDataChange({ ...data, ...newData });
} }
}, [templateData.name]); }, [templateData.name, templateData.templateCode]);
// Sync with parent wizard state in real-time // Update parent whenever local state changes
useEffect(() => { const handleDataChange = (newTemplateData: any) => {
onDataChange({ ...data, ...templateData }); setTemplateData(newTemplateData);
}, [templateData]); onDataChange({ ...data, ...newTemplateData });
};
return ( return (
<div className="space-y-6"> <div className="space-y-6">
@@ -83,7 +86,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="text" type="text"
value={templateData.name} value={templateData.name}
onChange={(e) => setTemplateData({ ...templateData, name: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, name: e.target.value })}
placeholder="E.g., Bread Quality Control, Hygiene Inspection" placeholder="E.g., Bread Quality Control, Hygiene Inspection"
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)]" 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)]"
/> />
@@ -95,7 +98,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
</label> </label>
<select <select
value={templateData.checkType} value={templateData.checkType}
onChange={(e) => setTemplateData({ ...templateData, checkType: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, checkType: 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)]" 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="product_quality">Product Quality</option> <option value="product_quality">Product Quality</option>
@@ -118,7 +121,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="number" type="number"
value={templateData.weight} value={templateData.weight}
onChange={(e) => setTemplateData({ ...templateData, weight: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, weight: e.target.value })}
placeholder="5.0" placeholder="5.0"
step="0.1" step="0.1"
min="0" min="0"
@@ -142,7 +145,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="text" type="text"
value={templateData.templateCode} value={templateData.templateCode}
onChange={(e) => setTemplateData({ ...templateData, templateCode: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, templateCode: e.target.value })}
placeholder="TPL-XXX-1234" placeholder="TPL-XXX-1234"
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)]" 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)]"
/> />
@@ -155,7 +158,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="text" type="text"
value={templateData.version} value={templateData.version}
onChange={(e) => setTemplateData({ ...templateData, version: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, version: e.target.value })}
placeholder="1.0" placeholder="1.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)]" 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)]"
/> />
@@ -167,7 +170,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
</label> </label>
<textarea <textarea
value={templateData.description} value={templateData.description}
onChange={(e) => setTemplateData({ ...templateData, description: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, description: e.target.value })}
placeholder="Detailed description of the quality check template" placeholder="Detailed description of the quality check template"
rows={2} 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)]" 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)]"
@@ -184,7 +187,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="text" type="text"
value={templateData.applicableStages} value={templateData.applicableStages}
onChange={(e) => setTemplateData({ ...templateData, applicableStages: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, applicableStages: e.target.value })}
placeholder="mixing, proofing, baking, cooling" placeholder="mixing, proofing, baking, cooling"
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)]" 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)]"
/> />
@@ -202,7 +205,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
</label> </label>
<select <select
value={templateData.scoringMethod} value={templateData.scoringMethod}
onChange={(e) => setTemplateData({ ...templateData, scoringMethod: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, scoringMethod: 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)]" 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="weighted_average">Weighted Average</option> <option value="weighted_average">Weighted Average</option>
@@ -222,7 +225,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="number" type="number"
value={templateData.passThreshold} value={templateData.passThreshold}
onChange={(e) => setTemplateData({ ...templateData, passThreshold: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, passThreshold: e.target.value })}
placeholder="70.0" placeholder="70.0"
step="0.1" step="0.1"
min="0" min="0"
@@ -241,7 +244,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="number" type="number"
value={templateData.frequencyDays} value={templateData.frequencyDays}
onChange={(e) => setTemplateData({ ...templateData, frequencyDays: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, frequencyDays: e.target.value })}
placeholder="Leave empty for batch-based" placeholder="Leave empty for batch-based"
min="1" min="1"
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)]" 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)]"
@@ -252,7 +255,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="checkbox" type="checkbox"
checked={templateData.isRequired} checked={templateData.isRequired}
onChange={(e) => setTemplateData({ ...templateData, isRequired: e.target.checked })} onChange={(e) => handleDataChange({ ...templateData, isRequired: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -282,7 +285,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
</label> </label>
<textarea <textarea
value={templateData.checkPoints} value={templateData.checkPoints}
onChange={(e) => setTemplateData({ ...templateData, checkPoints: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, checkPoints: e.target.value })}
placeholder='[{"name": "Visual Inspection", "description": "Check appearance", "expected_value": "Golden brown", "measurement_type": "visual", "is_critical": false, "weight": 1.0}]' placeholder='[{"name": "Visual Inspection", "description": "Check appearance", "expected_value": "Golden brown", "measurement_type": "visual", "is_critical": false, "weight": 1.0}]'
rows={4} rows={4}
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" 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"
@@ -295,7 +298,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
</label> </label>
<textarea <textarea
value={templateData.acceptanceCriteria} value={templateData.acceptanceCriteria}
onChange={(e) => setTemplateData({ ...templateData, acceptanceCriteria: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, acceptanceCriteria: e.target.value })}
placeholder="E.g., Golden uniform color, fluffy texture, no burns..." placeholder="E.g., Golden uniform color, fluffy texture, no burns..."
rows={2} 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)]" 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)]"
@@ -319,7 +322,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
</label> </label>
<textarea <textarea
value={templateData.parameters} value={templateData.parameters}
onChange={(e) => setTemplateData({ ...templateData, parameters: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, parameters: e.target.value })}
placeholder='{"temp_min": 75, "temp_max": 85, "humidity": 65}' placeholder='{"temp_min": 75, "temp_max": 85, "humidity": 65}'
rows={2} 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" 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"
@@ -335,7 +338,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
</label> </label>
<textarea <textarea
value={templateData.thresholds} value={templateData.thresholds}
onChange={(e) => setTemplateData({ ...templateData, thresholds: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, thresholds: e.target.value })}
placeholder='{"critical": 90, "warning": 70, "acceptable": 50}' placeholder='{"critical": 90, "warning": 70, "acceptable": 50}'
rows={2} 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" 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"
@@ -351,7 +354,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
</label> </label>
<textarea <textarea
value={templateData.scoringCriteria} value={templateData.scoringCriteria}
onChange={(e) => setTemplateData({ ...templateData, scoringCriteria: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, scoringCriteria: e.target.value })}
placeholder='{"appearance": 30, "texture": 30, "taste": 40}' placeholder='{"appearance": 30, "texture": 30, "taste": 40}'
rows={2} 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" 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"
@@ -373,7 +376,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="text" type="text"
value={templateData.responsibleRole} value={templateData.responsibleRole}
onChange={(e) => setTemplateData({ ...templateData, responsibleRole: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, responsibleRole: e.target.value })}
placeholder="E.g., Production Manager, Baker" placeholder="E.g., Production Manager, Baker"
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)]" 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)]"
/> />
@@ -386,7 +389,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="text" type="text"
value={templateData.requiredEquipment} value={templateData.requiredEquipment}
onChange={(e) => setTemplateData({ ...templateData, requiredEquipment: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, requiredEquipment: e.target.value })}
placeholder="E.g., Thermometer, scale, timer" placeholder="E.g., Thermometer, scale, timer"
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)]" 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)]"
/> />
@@ -398,7 +401,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
</label> </label>
<textarea <textarea
value={templateData.specificConditions} value={templateData.specificConditions}
onChange={(e) => setTemplateData({ ...templateData, specificConditions: e.target.value })} onChange={(e) => handleDataChange({ ...templateData, specificConditions: e.target.value })}
placeholder="E.g., Only applicable on humid days, check 30 min after baking..." placeholder="E.g., Only applicable on humid days, check 30 min after baking..."
rows={2} 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)]" 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)]"
@@ -417,7 +420,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="checkbox" type="checkbox"
checked={templateData.isActive} checked={templateData.isActive}
onChange={(e) => setTemplateData({ ...templateData, isActive: e.target.checked })} onChange={(e) => handleDataChange({ ...templateData, isActive: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -429,7 +432,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="checkbox" type="checkbox"
checked={templateData.requiresPhoto} checked={templateData.requiresPhoto}
onChange={(e) => setTemplateData({ ...templateData, requiresPhoto: e.target.checked })} onChange={(e) => handleDataChange({ ...templateData, requiresPhoto: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -441,7 +444,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="checkbox" type="checkbox"
checked={templateData.criticalControlPoint} checked={templateData.criticalControlPoint}
onChange={(e) => setTemplateData({ ...templateData, criticalControlPoint: e.target.checked })} onChange={(e) => handleDataChange({ ...templateData, criticalControlPoint: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">
@@ -453,7 +456,7 @@ const QualityTemplateDetailsStep: React.FC<WizardDataProps> = ({ data, onDataCha
<input <input
type="checkbox" type="checkbox"
checked={templateData.notifyOnFail} checked={templateData.notifyOnFail}
onChange={(e) => setTemplateData({ ...templateData, notifyOnFail: e.target.checked })} onChange={(e) => handleDataChange({ ...templateData, notifyOnFail: e.target.checked })}
className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]" className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
/> />
<label className="text-sm text-[var(--text-secondary)]"> <label className="text-sm text-[var(--text-secondary)]">