Initial commit: gate operator quotation app
React + Vite + Tailwind frontend with Express backend. 3-step wizard (Operator, Ground Loops, Access Control) with PDF quote download and CAD pricing data.
This commit is contained in:
Todd
226
client/src/components/QuoteSummary.jsx
Normal file
226
client/src/components/QuoteSummary.jsx
Normal file
@ -0,0 +1,226 @@
|
||||
import { useRef } from 'react';
|
||||
import { calculateQuote } from '../utils/quoteCalculator';
|
||||
|
||||
export default function QuoteSummary({ pricing, selections, onBack, onNew }) {
|
||||
const quoteRef = useRef(null);
|
||||
const quote = calculateQuote(pricing, selections);
|
||||
const operator = pricing.operators.find((o) => o.id === selections.operator);
|
||||
|
||||
const handleDownloadPDF = async () => {
|
||||
const html2canvas = (await import('html2canvas')).default;
|
||||
const { jsPDF } = await import('jspdf');
|
||||
|
||||
const element = quoteRef.current;
|
||||
if (!element) return;
|
||||
|
||||
const canvas = await html2canvas(element, {
|
||||
scale: 2,
|
||||
backgroundColor: '#ffffff',
|
||||
logging: false,
|
||||
});
|
||||
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
const pdf = new jsPDF('p', 'mm', 'a4');
|
||||
const margin = 14;
|
||||
const pageWidth = pdf.internal.pageSize.getWidth();
|
||||
const pageHeight = pdf.internal.pageSize.getHeight();
|
||||
const imgWidth = pageWidth - 2 * margin;
|
||||
const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
||||
|
||||
let heightLeft = imgHeight;
|
||||
let position = margin;
|
||||
|
||||
pdf.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
|
||||
heightLeft -= pageHeight - margin;
|
||||
|
||||
while (heightLeft > 0) {
|
||||
position -= pageHeight - margin;
|
||||
pdf.addPage();
|
||||
pdf.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
|
||||
heightLeft -= pageHeight - margin;
|
||||
}
|
||||
|
||||
pdf.save(`Gate_Quote_${operator?.model || 'Quote'}.pdf`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Quote Summary
|
||||
</h2>
|
||||
<p className="text-gray-500">
|
||||
Review your selection and itemized cost estimate
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={quoteRef} className="bg-white p-6">
|
||||
<div className="border-b border-gray-300 pb-4 mb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900">
|
||||
Gate Operator Quote
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
Quotation Date: {new Date().toLocaleDateString('en-CA')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-blue-600">
|
||||
{pricing.currency.symbol}
|
||||
{quote.total.toLocaleString(pricing.currency.locale, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">Estimated Total</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{operator && (
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-4">
|
||||
<div className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-1">
|
||||
Selected Operator
|
||||
</div>
|
||||
<div className="font-semibold text-gray-900">{operator.name}</div>
|
||||
<div className="text-sm text-gray-500">Model: {operator.model}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{quote.items.length > 0 ? (
|
||||
<table className="w-full mb-4">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="text-left py-3 px-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Item
|
||||
</th>
|
||||
<th className="text-center py-3 px-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Qty
|
||||
</th>
|
||||
<th className="text-right py-3 px-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Unit Price
|
||||
</th>
|
||||
<th className="text-right py-3 px-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{quote.items.map((item, i) => (
|
||||
<tr key={i} className="border-b border-gray-100">
|
||||
<td className="py-3 px-2">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{item.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">{item.category}</div>
|
||||
</td>
|
||||
<td className="py-3 px-2 text-center text-sm text-gray-700">
|
||||
{item.qty}
|
||||
</td>
|
||||
<td className="py-3 px-2 text-right text-sm text-gray-700">
|
||||
{pricing.currency.symbol}
|
||||
{item.unitPrice.toLocaleString(pricing.currency.locale, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</td>
|
||||
<td className="py-3 px-2 text-right text-sm font-medium text-gray-900">
|
||||
{pricing.currency.symbol}
|
||||
{item.lineTotal.toLocaleString(pricing.currency.locale, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
No items selected. Please go back and make your selections.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="border-t border-gray-300 pt-4 space-y-2">
|
||||
<div className="flex justify-between text-sm text-gray-600">
|
||||
<span>Subtotal</span>
|
||||
<span>
|
||||
{pricing.currency.symbol}
|
||||
{quote.subtotal.toLocaleString(pricing.currency.locale, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-gray-600">
|
||||
<span>HST ({((quote.taxRate ?? 0) * 100).toFixed(0)}%)</span>
|
||||
<span>
|
||||
{pricing.currency.symbol}
|
||||
{quote.tax.toLocaleString(pricing.currency.locale, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-lg font-bold text-gray-900 border-t border-gray-200 pt-2">
|
||||
<span>Total Estimate</span>
|
||||
<span>
|
||||
{pricing.currency.symbol}
|
||||
{quote.total.toLocaleString(pricing.currency.locale, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-xs text-gray-400 text-center border-t border-gray-200 pt-4">
|
||||
<p>
|
||||
This is a preliminary cost estimate. Final pricing may vary based on
|
||||
site-specific requirements.
|
||||
</p>
|
||||
<p className="mt-1">
|
||||
Generated by Gate Operator Quotation System — {new Date().toLocaleDateString('en-CA')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-6 border-t border-gray-200 mt-6">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleDownloadPDF}
|
||||
className="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Download PDF
|
||||
</button>
|
||||
<button
|
||||
onClick={onNew}
|
||||
className="px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
New Quote
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user