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

2
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LB Quote Generator</title>
</head>

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 571 B

22
quotes.json
View File

@ -460,5 +460,27 @@
}
],
"shippingCost": 0
},
{
"id": 2908,
"date": "March 20, 2026",
"customer": {
"name": "test",
"address": "",
"city": "",
"province": "on",
"postalCode": "",
"phone": "",
"email": ""
},
"items": [
{
"Item ID": "MDL-5H2",
"Description": "Earth Drill, 5.5HP Honda, 20:1Transmission",
"Price": 4674.3552899999995,
"quantity": 1
}
],
"shippingCost": 0
}
]

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>

19
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,19 +59,25 @@ 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) => (
{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(item.Price * item.quantity)}</td>
<td>{formatCurrency(finalPrice)}</td>
<td className="no-print">
<button
className="btn btn-icon btn-danger"
@ -78,7 +88,8 @@ export default function QuoteSummary({ items, customer, shippingCost, onShipping
</button>
</td>
</tr>
))}
);
})}
</tbody>
</table>
</div>