diff --git a/src/App.jsx b/src/App.jsx index 3b74666..d918bad 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -74,6 +74,12 @@ function App() { setQuoteItems(newItems); }; + const handleEditItem = (index, field, value) => { + const newItems = [...quoteItems]; + newItems[index] = { ...newItems[index], [field]: value }; + setQuoteItems(newItems); + }; + const handlePrintQuote = () => { setIsWorkOrderMode(false); setTimeout(() => { @@ -222,6 +228,7 @@ function App() { shippingCost={shippingCost} onShippingChange={setShippingCost} onRemoveItem={handleRemoveItem} + onEditItem={handleEditItem} isWorkOrderMode={isWorkOrderMode} /> diff --git a/src/components/QuoteSummary.jsx b/src/components/QuoteSummary.jsx index 346bbfa..ebd25c1 100644 --- a/src/components/QuoteSummary.jsx +++ b/src/components/QuoteSummary.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Trash2 } from 'lucide-react'; -export default function QuoteSummary({ items, customer, shippingCost, onShippingChange, onRemoveItem, isWorkOrderMode }) { +export default function QuoteSummary({ items, customer, shippingCost, onShippingChange, onRemoveItem, onEditItem, isWorkOrderMode }) { const provinceTaxRates = { 'ON': 0.13, // Ontario (HST) 'QC': 0.05, // Quebec (GST) @@ -25,7 +25,9 @@ export default function QuoteSummary({ items, customer, shippingCost, onShipping const calculateSubtotal = () => { return items.reduce((total, item) => { - const itemTotal = item.Price * item.quantity; + const qty = parseInt(item.quantity, 10) || 0; + const price = parseFloat(item.Price) || 0; + const itemTotal = price * qty; const discountAmount = itemTotal * ((item.discount || 0) / 100); return total + (itemTotal - discountAmount); }, 0); @@ -68,16 +70,53 @@ export default function QuoteSummary({ items, customer, shippingCost, onShipping {items.map((item, index) => { - const itemTotal = item.Price * item.quantity; + const qty = parseInt(item.quantity, 10) || 0; + const price = parseFloat(item.Price) || 0; + const itemTotal = price * qty; const discountAmount = itemTotal * ((item.discount || 0) / 100); const finalPrice = itemTotal - discountAmount; return ( {item['Item ID']} {item.Description} - {!isWorkOrderMode && {formatCurrency(item.Price)}} - {!isWorkOrderMode && {item.discount ? `${item.discount}%` : '-'}} - {item.quantity} + {!isWorkOrderMode && + {formatCurrency(price)} +
+ $ + onEditItem(index, 'Price', e.target.value === '' ? '' : parseFloat(e.target.value))} + style={{ width: '80px', padding: '0.25rem' }} + step="0.01" + /> +
+ } + {!isWorkOrderMode && + {item.discount ? `${item.discount}%` : '-'} +
+ onEditItem(index, 'discount', e.target.value === '' ? '' : parseFloat(e.target.value))} + style={{ width: '60px', padding: '0.25rem' }} + placeholder="0" + /> + % +
+ } + + {qty} +
+ onEditItem(index, 'quantity', e.target.value === '' ? '' : parseInt(e.target.value, 10))} + style={{ width: '60px', padding: '0.25rem' }} + min="1" + /> +
+ {!isWorkOrderMode && {formatCurrency(finalPrice)}} {isWorkOrderMode && (