Todd/little.beaver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added discount

Browse Source
This commit is contained in:
Todd
2026-03-20 16:52:20 -04:00
parent 821cf379a9
commit 0b4e60970e
5 changed files with 83 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/ItemSelector.jsx
View File

@ -4,21 +4,27 @@ import { Plus } from 'lucide-react';
export default function ItemSelector({ items, onAddItem }) {
const [selectedItemIndex, setSelectedItemIndex] = useState('');
const [quantity, setQuantity] = useState(1);
const [discount, setDiscount] = useState('');
const handleAdd = () => {
if (selectedItemIndex !== '' && quantity > 0) {
const selectedItem = items[selectedItemIndex];
onAddItem({ ...selectedItem, quantity: parseInt(quantity, 10) });
onAddItem({
...selectedItem,
quantity: parseInt(quantity, 10),
discount: parseFloat(discount) || 0
});
setSelectedItemIndex('');
setQuantity(1);
setDiscount('');
}
};
return (
<div className="glass-card no-print">
<h2>Add Items to Quote</h2>
<div className="form-grid" style={{ alignItems: 'flex-end', gridTemplateColumns: '1fr 80px auto' }}>
<div className="form-group">
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem', alignItems: 'flex-end' }}>
<div className="form-group" style={{ flex: '1 1 250px' }}>
<label htmlFor="itemSelect">Select Product</label>
<select
id="itemSelect"
@ -33,18 +39,36 @@ export default function ItemSelector({ items, onAddItem }) {
))}
</select>
</div>
<div className="form-group">
<div className="form-group" style={{ flex: '0 0 auto' }}>
<label htmlFor="discount">Discount (%)</label>
<input
type="number"
id="discount"
min="0"
max="100"
style={{ width: '100px' }}
value={discount}
onChange={(e) => setDiscount(e.target.value)}
placeholder="0"
/>
</div>
<div className="form-group" style={{ flex: '0 0 auto' }}>
<label htmlFor="quantity">Quantity</label>
<input
type="number"
id="quantity"
min="1"
style={{ width: '80px' }}
style={{ width: '100px' }}
value={quantity}
onChange={(e) => setQuantity(e.target.value)}
/>
</div>
<button className="btn btn-primary" onClick={handleAdd} disabled={selectedItemIndex === ''}>
<button
className="btn btn-primary"
onClick={handleAdd}
disabled={selectedItemIndex === ''}
style={{ flex: '0 0 auto', height: '44px' }}
>
<Plus size={20} /> Add
</button>
</div>

49
src/components/QuoteSummary.jsx
View File

@ -24,7 +24,11 @@ export default function QuoteSummary({ items, customer, shippingCost, onShipping
};
const calculateSubtotal = () => {
return items.reduce((total, item) => total + (item.Price * item.quantity), 0);
return items.reduce((total, item) => {
const itemTotal = item.Price * item.quantity;
const discountAmount = itemTotal * ((item.discount || 0) / 100);
return total + (itemTotal - discountAmount);
}, 0);
};
const subtotal = calculateSubtotal();
@ -55,30 +59,37 @@ export default function QuoteSummary({ items, customer, shippingCost, onShipping
<th>Item ID</th>
<th>Description</th>
<th>Unit Price</th>
<th>Discount</th>
<th>Quantity</th>
<th>Total</th>
<th className="no-print">Action</th>
</tr>
</thead>
<tbody>
{items.map((item, index) => (
<tr key={index}>
<td>{item['Item ID']}</td>
<td>{item.Description}</td>
<td>{formatCurrency(item.Price)}</td>
<td>{item.quantity}</td>
<td>{formatCurrency(item.Price * item.quantity)}</td>
<td className="no-print">
<button
className="btn btn-icon btn-danger"
onClick={() => onRemoveItem(index)}
title="Remove item"
>
<Trash2 size={16} />
</button>
</td>
</tr>
))}
{items.map((item, index) => {
const itemTotal = item.Price * item.quantity;
const discountAmount = itemTotal * ((item.discount || 0) / 100);
const finalPrice = itemTotal - discountAmount;
return (
<tr key={index}>
<td>{item['Item ID']}</td>
<td>{item.Description}</td>
<td>{formatCurrency(item.Price)}</td>
<td>{item.discount ? `${item.discount}%` : '-'}</td>
<td>{item.quantity}</td>
<td>{formatCurrency(finalPrice)}</td>
<td className="no-print">
<button
className="btn btn-icon btn-danger"
onClick={() => onRemoveItem(index)}
title="Remove item"
>
<Trash2 size={16} />
</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>