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

print update

Browse Source
This commit is contained in:
Todd
2026-05-14 13:17:08 -04:00
parent 1f25293750
commit da80fcffe9
2 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.jsx
View File

@ -175,34 +175,14 @@ function App() {
return (
<div className="container">
{/* Header - Visible on screen and print */}
<div className="header">
{/* Header - Visible on screen */}
<div className="header no-print">
<img src="/Logo.jpg" alt="Company Logo" style={{ height: '80px', marginBottom: '1rem' }} />
<h1>Little Beaver Earth Augers</h1>
<p>{isWorkOrderMode ? 'Work Order' : 'Official Quote Generator'}</p>
</div>
{/* Print-only details */}
<div style={{ display: 'none' }} className="print-only-block">
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2rem' }}>
<div>
<h3>Quote For:</h3>
<p>{customer.name || 'N/A'}</p>
{customer.contactName && <p><strong>Attn:</strong> {customer.contactName}</p>}
<p>{customer.address || 'N/A'}</p>
<p>{customer.city ? `${customer.city}, ` : ''}{customer.province} {customer.postalCode}</p>
<p>{customer.phone || 'N/A'}</p>
<p>{customer.email || 'N/A'}</p>
</div>
<div style={{ textAlign: 'right' }}>
<h3>{isWorkOrderMode ? 'Work Order Details:' : 'Quote Details:'}</h3>
<p><strong>Date:</strong> {quoteDate}</p>
<p><strong>{isWorkOrderMode ? 'Work Order #:' : 'Quote #:'}</strong> {quoteId}</p>
</div>
</div>
</div>
<div className="no-print" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
@ -225,6 +205,8 @@ function App() {
<QuoteSummary
items={quoteItems}
customer={customer}
quoteId={quoteId}
quoteDate={quoteDate}
shippingCost={shippingCost}
onShippingChange={setShippingCost}
onRemoveItem={handleRemoveItem}

27
src/components/QuoteSummary.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { Trash2 } from 'lucide-react';
export default function QuoteSummary({ items, customer, shippingCost, onShippingChange, onRemoveItem, onEditItem, isWorkOrderMode }) {
export default function QuoteSummary({ items, customer, quoteId, quoteDate, shippingCost, onShippingChange, onRemoveItem, onEditItem, isWorkOrderMode }) {
const provinceTaxRates = {
'ON': 0.13, // Ontario (HST)
'QC': 0.05, // Quebec (GST)
@ -57,6 +57,31 @@ export default function QuoteSummary({ items, customer, shippingCost, onShipping
<div className="table-container">
<table>
<thead>
<tr className="print-only-block" style={{ display: 'none' }}>
<th colSpan={isWorkOrderMode ? 6 : 7} style={{ background: 'white', border: 'none', padding: '0 0 1.5rem 0' }}>
<div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
<img src="/Logo.jpg" alt="Company Logo" style={{ height: '80px', marginBottom: '1rem' }} />
<h1 style={{ fontSize: '1.8rem', color: 'black', margin: '0 0 0.5rem 0', WebkitTextFillColor: 'black', background: 'none' }}>Little Beaver Earth Augers</h1>
<p style={{ fontSize: '1rem', color: 'black', margin: 0 }}>{isWorkOrderMode ? 'Work Order' : 'Official Quote'}</p>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', textAlign: 'left', fontWeight: 'normal' }}>
<div>
<h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', color: 'black' }}>Quote For:</h3>
<p style={{ margin: 0, color: 'black' }}>{customer.name || 'N/A'}</p>
{customer.contactName && <p style={{ margin: 0, color: 'black' }}><strong>Attn:</strong> {customer.contactName}</p>}
<p style={{ margin: 0, color: 'black' }}>{customer.address || 'N/A'}</p>
<p style={{ margin: 0, color: 'black' }}>{customer.city ? `${customer.city}, ` : ''}{customer.province} {customer.postalCode}</p>
<p style={{ margin: 0, color: 'black' }}>{customer.phone || 'N/A'}</p>
<p style={{ margin: 0, color: 'black' }}>{customer.email || 'N/A'}</p>
</div>
<div style={{ textAlign: 'right' }}>
<h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', color: 'black' }}>{isWorkOrderMode ? 'Work Order Details:' : 'Quote Details:'}</h3>
<p style={{ margin: 0, color: 'black' }}><strong>Date:</strong> {quoteDate}</p>
<p style={{ margin: 0, color: 'black' }}><strong>{isWorkOrderMode ? 'Work Order #:' : 'Quote #:'}</strong> {quoteId}</p>
</div>
</div>
</th>
</tr>
<tr>
<th>Item ID</th>
<th>Description</th>