From 130130a7ed49633d3890f19b0b0ffd5dfa6fdf26 Mon Sep 17 00:00:00 2001 From: Todd Date: Tue, 19 May 2026 08:20:30 -0400 Subject: [PATCH] Print Fix --- quotes.json | 129 ++++++++++++++++++++++++++++++++ src/App.jsx | 4 +- src/components/QuoteSummary.jsx | 69 +++++++++-------- src/index.css | 76 ++++++++++++++----- 4 files changed, 228 insertions(+), 50 deletions(-) diff --git a/quotes.json b/quotes.json index 011bd31..34635ca 100644 --- a/quotes.json +++ b/quotes.json @@ -512,5 +512,134 @@ } ], "shippingCost": 0 + }, + { + "id": 7294, + "date": "May 14, 2026", + "customer": { + "name": "", + "contactName": "", + "address": "", + "city": "", + "province": "", + "postalCode": "", + "phone": "", + "email": "" + }, + "items": [ + { + "Item ID": "MDL-5H", + "Description": "Earth Drill, 5.5HP Honda Engine #GX160", + "Price": 4623.113879999999, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "MDL-8H2R7", + "Description": "Earth Drill, 8 HP Honda, 20:1 Trans & Roll Cage", + "Price": 6183.13014, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "3002-KEP", + "Description": "Nut, KEP NC, 5/16 pltd. (Nut w/Lock Washer)", + "Price": 0.7970885999999999, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "3000-B", + "Description": "Motor Carrier", + "Price": 189.3085425, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "3002", + "Description": "Bolt, 5/16 x 1-1/2 Hex NC Gr 5Zinc Plated", + "Price": 1.2335895, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "MDL-5B3PR7", + "Description": "Earth Drill,6HP B&S PW RC 13:1Vanguard Engine#12V3320012F", + "Price": 5091.403432499999, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "4034-3", + "Description": "Nut, Hex, 10-32 Pltd", + "Price": 0.49343580000000004, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "4018-2H", + "Description": "Clamp, Flex Shaft", + "Price": 23.153526, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "4018-2H", + "Description": "Clamp, Flex Shaft", + "Price": 23.153526, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "3000-B", + "Description": "Motor Carrier", + "Price": 189.3085425, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "3063-A", + "Description": "Guide Spool Assy., 8HP Honda Direct Throttle", + "Price": 22.963743, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "3004", + "Description": "Wheel (Includes #3006-1 Cap)", + "Price": 42.321608999999995, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "3000-B", + "Description": "Motor Carrier", + "Price": 189.3085425, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "3000-B", + "Description": "Motor Carrier", + "Price": 189.3085425, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "CAP", + "Description": "Cap, LITTLE BEAVER", + "Price": 39.095298, + "quantity": 1, + "discount": 0 + }, + { + "Item ID": "MDL-5B", + "Description": "Earth Drill, 6 HP B&S VanguardEngine #12V3320012F", + "Price": 4526.324549999999, + "quantity": 1, + "discount": 0 + } + ], + "shippingCost": 0 } ] \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 863d491..388f708 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -84,14 +84,14 @@ function App() { setIsWorkOrderMode(false); setTimeout(() => { window.print(); - }, 100); + }, 300); }; const handlePrintWorkOrder = () => { setIsWorkOrderMode(true); setTimeout(() => { window.print(); - }, 100); + }, 300); }; const handleSaveQuote = async () => { diff --git a/src/components/QuoteSummary.jsx b/src/components/QuoteSummary.jsx index d8b1975..3d9f619 100644 --- a/src/components/QuoteSummary.jsx +++ b/src/components/QuoteSummary.jsx @@ -53,33 +53,42 @@ export default function QuoteSummary({ items, customer, quoteId, quoteDate, ship return (
-

{isWorkOrderMode ? 'Work Order Summary' : 'Quote Summary'}

+

{isWorkOrderMode ? 'Work Order Summary' : 'Quote Summary'}

+
+
+ Company Logo +

Little Beaver Earth Augers

+

{isWorkOrderMode ? 'Work Order' : 'Official Quote'}

+
+ + + + + + + +
+

Quote For:

+

{customer.name || 'N/A'}

+ {customer.contactName &&

Attn: {customer.contactName}

} +

{customer.address || 'N/A'}

+

{customer.city ? `${customer.city}, ` : ''}{customer.province} {customer.postalCode}

+

{customer.phone || 'N/A'}

+

{customer.email || 'N/A'}

+ 		+

{isWorkOrderMode ? 'Work Order Details:' : 'Quote Details:'}

+

Date: {quoteDate}

+

{isWorkOrderMode ? 'Work Order #' : 'Quote #'}: {quoteId}

+
+
- +
- - + @@ -105,7 +114,7 @@ export default function QuoteSummary({ items, customer, quoteId, quoteDate, ship {!isWorkOrderMode && } {!isWorkOrderMode && } } {isWorkOrderMode && ( )} @@ -182,7 +191,7 @@ export default function QuoteSummary({ items, customer, quoteId, quoteDate, ship style={{ width: '80px', padding: '0.25rem', fontSize: '1rem', textAlign: 'right' }} /> - {formatCurrency(shipping)} + {formatCurrency(shipping)}
Tax ({(taxRate * 100).toFixed(1)}%): diff --git a/src/index.css b/src/index.css index 9446dbb..19cb734 100644 --- a/src/index.css +++ b/src/index.css @@ -227,11 +227,24 @@ td { } /* Print Styles */ +.print-continuation-header, +.print-continuation-row { + display: none; +} + +.print-page-header { + display: none; +} + @media print { :root { --print-size: 9pt; } + @page { + margin: 0.5in; + } + body { background: white !important; color: black !important; @@ -246,11 +259,40 @@ td { display: block !important; } + .print-only-row { + display: table-row !important; + } + + .print-page-header { + display: block !important; + } + + .print-continuation-row { + display: table-row !important; + } + + .print-continuation-header { + display: flex !important; + justify-content: space-between; + padding: 0.5rem 0; + margin-bottom: 0.5rem; + border-bottom: 1px solid #ccc; + font-size: 0.85rem; + color: black; + } + + html, body { + height: auto !important; + min-height: auto !important; + margin: 0 !important; + padding: 0 !important; + } + .glass-card { box-shadow: none !important; border: none !important; padding: 0 !important; - margin-bottom: 2rem !important; + margin: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; @@ -259,23 +301,7 @@ td { .container { padding: 0 !important; max-width: 100% !important; - } - - .header { - margin-bottom: 1.5rem !important; - } - - .header h1 { - -webkit-text-fill-color: black !important; - background: none !important; - color: black !important; - font-size: 1.8rem !important; - margin-bottom: 0.2rem !important; - } - - .header p { - font-size: 1rem !important; - color: black !important; + margin: 0 !important; } .table-container { @@ -284,6 +310,20 @@ td { table { font-size: var(--print-size) !important; + page-break-inside: auto !important; + } + + thead { + display: table-header-group !important; + } + + tfoot { + display: table-footer-group !important; + } + + tr { + page-break-inside: avoid !important; + page-break-after: auto !important; } table th {
-
- Company Logo -

Little Beaver Earth Augers

-

{isWorkOrderMode ? 'Work Order' : 'Official Quote'}

-
-
-
-

Quote For:

-

{customer.name || 'N/A'}

- {customer.contactName &&

Attn: {customer.contactName}

} -

{customer.address || 'N/A'}

-

{customer.city ? `${customer.city}, ` : ''}{customer.province} {customer.postalCode}

-

{customer.phone || 'N/A'}

-

{customer.email || 'N/A'}

-
-
-

{isWorkOrderMode ? 'Work Order Details:' : 'Quote Details:'}

-

Date: {quoteDate}

-

{isWorkOrderMode ? 'Work Order #:' : 'Quote #:'} {quoteId}

-
-
+
+ + {isWorkOrderMode ? 'Work Order' : 'Quote'} #{quoteId}  |  {quoteDate} +
{item['Item ID']} {item.Description} - {formatCurrency(price)} + {formatCurrency(price)}
$
- {item.discount ? `${item.discount}%` : '-'} + {item.discount ? `${item.discount}%` : '-'}
- {qty} + {qty}
{formatCurrency(finalPrice)}
 -
+