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
12
client/index.html
Normal file
12
client/index.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Gate Operator Quotation System</title>
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
2872
client/package-lock.json
generated
Normal file
2872
client/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
client/package.json
Normal file
24
client/package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "gate-quote-client",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"html2canvas": "^1.4.1",
|
||||
"jspdf": "^2.5.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"postcss": "^8.4.33",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"vite": "^5.0.12"
|
||||
}
|
||||
}
|
||||
6
client/postcss.config.js
Normal file
6
client/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
46
client/src/App.jsx
Normal file
46
client/src/App.jsx
Normal file
@ -0,0 +1,46 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import Wizard from './components/Wizard';
|
||||
import pricingData from './data/pricing.json';
|
||||
|
||||
export default function App() {
|
||||
const [pricing, setPricing] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/pricing')
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error('API unavailable');
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
setPricing(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setPricing(pricingData);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!pricing) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-red-600">Failed to load pricing data</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Wizard pricing={pricing} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
89
client/src/components/StepAccessControl.jsx
Normal file
89
client/src/components/StepAccessControl.jsx
Normal file
@ -0,0 +1,89 @@
|
||||
export default function StepAccessControl({
|
||||
accessControl,
|
||||
selected,
|
||||
onToggle,
|
||||
onBack,
|
||||
onNext,
|
||||
}) {
|
||||
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">
|
||||
Step 3: Access Control
|
||||
</h2>
|
||||
<p className="text-gray-500">
|
||||
Select the access control methods for your gate (choose one or more)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
{accessControl.map((ac) => {
|
||||
const isSelected = selected.includes(ac.id);
|
||||
return (
|
||||
<button
|
||||
key={ac.id}
|
||||
onClick={() => onToggle(ac.id)}
|
||||
className={`text-left p-4 rounded-xl border-2 transition-all ${
|
||||
isSelected
|
||||
? 'border-blue-600 bg-blue-50 shadow-md'
|
||||
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="font-semibold text-gray-900">{ac.name}</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
Model: {ac.model}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
{ac.description}
|
||||
</div>
|
||||
<div className="mt-2 text-lg font-bold text-blue-600">
|
||||
C${ac.price.toLocaleString('en-CA')}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center mt-1 transition-colors ${
|
||||
isSelected
|
||||
? 'border-blue-600 bg-blue-600'
|
||||
: 'border-gray-300'
|
||||
}`}
|
||||
>
|
||||
{isSelected && (
|
||||
<svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t border-gray-200">
|
||||
<div className="text-sm text-gray-500">
|
||||
{selected.length === 0
|
||||
? 'No access control selected (you can skip this step)'
|
||||
: `${selected.length} item${selected.length > 1 ? 's' : ''} selected`}
|
||||
</div>
|
||||
<button
|
||||
onClick={onNext}
|
||||
className="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Generate Quote
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
180
client/src/components/StepGroundLoops.jsx
Normal file
180
client/src/components/StepGroundLoops.jsx
Normal file
@ -0,0 +1,180 @@
|
||||
export default function StepGroundLoops({
|
||||
styles,
|
||||
types,
|
||||
value,
|
||||
onSetNeeded,
|
||||
onSetStyle,
|
||||
onToggleType,
|
||||
onNext,
|
||||
onBack,
|
||||
}) {
|
||||
const { needed, style, types: selectedTypes } = value;
|
||||
|
||||
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">
|
||||
Step 2: Ground Loops
|
||||
</h2>
|
||||
<p className="text-gray-500">
|
||||
Are ground loop detectors required for this installation?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 mb-8">
|
||||
<button
|
||||
onClick={() => onSetNeeded(false)}
|
||||
className={`flex-1 p-5 rounded-xl border-2 text-center transition-all ${
|
||||
!needed
|
||||
? 'border-blue-600 bg-blue-50 shadow-md'
|
||||
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="text-3xl mb-2">❌</div>
|
||||
<div className="font-semibold text-gray-900">No Ground Loops</div>
|
||||
<div className="text-sm text-gray-500 mt-1">Skip this section</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onSetNeeded(true)}
|
||||
className={`flex-1 p-5 rounded-xl border-2 text-center transition-all ${
|
||||
needed
|
||||
? 'border-blue-600 bg-blue-50 shadow-md'
|
||||
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="text-3xl mb-2">🕵</div>
|
||||
<div className="font-semibold text-gray-900">Yes, Loops Needed</div>
|
||||
<div className="text-sm text-gray-500 mt-1">Configure below</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{needed && (
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">
|
||||
Installation Style
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{styles.map((s) => (
|
||||
<button
|
||||
key={s.id}
|
||||
onClick={() => onSetStyle(s.id)}
|
||||
className={`text-left p-4 rounded-xl border-2 transition-all ${
|
||||
style === s.id
|
||||
? 'border-blue-600 bg-blue-50 shadow-md'
|
||||
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className={`shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center mt-0.5 ${
|
||||
style === s.id
|
||||
? 'border-blue-600'
|
||||
: 'border-gray-300'
|
||||
}`}
|
||||
>
|
||||
{style === s.id && (
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-blue-600" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">{s.name}</div>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
{s.description}
|
||||
</div>
|
||||
{s.additionalCost > 0 && (
|
||||
<div className="mt-1 text-sm font-medium text-blue-600">
|
||||
+C${s.additionalCost.toLocaleString('en-CA')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Loop Types Needed
|
||||
</h3>
|
||||
{selectedTypes.length > 0 && (
|
||||
<span className="text-xs text-blue-600 font-medium">
|
||||
{selectedTypes.length} selected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{types.map((t) => {
|
||||
const isSelected = selectedTypes.includes(t.id);
|
||||
return (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => onToggleType(t.id)}
|
||||
className={`text-left p-4 rounded-xl border-2 transition-all ${
|
||||
isSelected
|
||||
? 'border-blue-600 bg-blue-50 shadow-md'
|
||||
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="font-semibold text-gray-900">
|
||||
{t.name}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
{t.description}
|
||||
</div>
|
||||
<div className="mt-2 text-lg font-bold text-blue-600">
|
||||
C${t.price.toLocaleString('en-CA')}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center mt-1 transition-colors ${
|
||||
isSelected
|
||||
? 'border-blue-600 bg-blue-600'
|
||||
: 'border-gray-300'
|
||||
}`}
|
||||
>
|
||||
{isSelected && (
|
||||
<svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between pt-6 border-t border-gray-200 mt-8">
|
||||
<div className="text-sm text-gray-500">
|
||||
{needed
|
||||
? `${selectedTypes.length} loop type${selectedTypes.length !== 1 ? 's' : ''} selected`
|
||||
: 'Ground loops not required'}
|
||||
</div>
|
||||
<button
|
||||
onClick={onNext}
|
||||
className="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
104
client/src/components/StepOperator.jsx
Normal file
104
client/src/components/StepOperator.jsx
Normal file
@ -0,0 +1,104 @@
|
||||
const categoryLabels = {
|
||||
swing: 'Swing Gate Operators',
|
||||
slide: 'Slide Gate Operators',
|
||||
barrier: 'Barrier Gate Operators',
|
||||
};
|
||||
|
||||
const categoryIcons = {
|
||||
swing: (
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" fill="none">
|
||||
<rect x="4" y="8" width="8" height="32" rx="2" className="fill-blue-200" />
|
||||
<rect x="36" y="8" width="8" height="32" rx="2" className="fill-blue-200" />
|
||||
<line x1="8" y1="20" x2="40" y2="20" stroke="currentColor" strokeWidth="3" className="stroke-blue-600" />
|
||||
<line x1="8" y1="28" x2="36" y2="28" stroke="currentColor" strokeWidth="2" className="stroke-blue-400" strokeDasharray="2 2" />
|
||||
<circle cx="32" cy="28" r="3" className="fill-yellow-400" />
|
||||
</svg>
|
||||
),
|
||||
slide: (
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" fill="none">
|
||||
<rect x="4" y="8" width="8" height="32" rx="2" className="fill-blue-200" />
|
||||
<rect x="36" y="16" width="8" height="24" rx="1" className="fill-blue-200" />
|
||||
<rect x="12" y="24" width="24" height="6" rx="1" className="fill-blue-600" />
|
||||
<circle cx="14" cy="16" r="2" className="fill-gray-400" />
|
||||
<circle cx="14" cy="36" r="2" className="fill-gray-400" />
|
||||
</svg>
|
||||
),
|
||||
barrier: (
|
||||
<svg className="w-12 h-12" viewBox="0 0 48 48" fill="none">
|
||||
<rect x="4" y="8" width="6" height="34" rx="2" className="fill-blue-200" />
|
||||
<rect x="22" y="8" width="6" height="34" rx="2" className="fill-blue-200" />
|
||||
<rect x="2" y="12" width="28" height="6" rx="1" className="fill-blue-600" />
|
||||
<rect x="26" y="14" width="34" height="4" rx="1" className="fill-yellow-400" transform="rotate(30 26 14)" />
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
|
||||
export default function StepOperator({ operators, selected, onSelect }) {
|
||||
const categories = [...new Set(operators.map((o) => o.category))];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
Step 1: Select Operator Type
|
||||
</h2>
|
||||
<p className="text-gray-500 mb-6">
|
||||
Choose the type of gate operator you need for your installation
|
||||
</p>
|
||||
|
||||
{categories.map((cat) => (
|
||||
<div key={cat} className="mb-8 last:mb-0">
|
||||
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">
|
||||
{categoryLabels[cat] || cat}
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{operators
|
||||
.filter((o) => o.category === cat)
|
||||
.map((op) => (
|
||||
<button
|
||||
key={op.id}
|
||||
onClick={() => onSelect(op.id)}
|
||||
className={`text-left p-5 rounded-xl border-2 transition-all ${
|
||||
selected === op.id
|
||||
? 'border-blue-600 bg-blue-50 shadow-md'
|
||||
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`shrink-0 p-2 rounded-lg ${
|
||||
selected === op.id ? 'bg-blue-100' : 'bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
{categoryIcons[cat]}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="font-semibold text-gray-900">
|
||||
{op.name}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-0.5">
|
||||
Model: {op.model}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
{op.description}
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<span className="text-lg font-bold text-blue-600">
|
||||
C${op.basePrice.toLocaleString('en-CA')}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">base</span>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">
|
||||
{op.requiredParts.length} parts included
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
176
client/src/components/Wizard.jsx
Normal file
176
client/src/components/Wizard.jsx
Normal file
@ -0,0 +1,176 @@
|
||||
import { useReducer } from 'react';
|
||||
import StepOperator from './StepOperator';
|
||||
import StepGroundLoops from './StepGroundLoops';
|
||||
import StepAccessControl from './StepAccessControl';
|
||||
import QuoteSummary from './QuoteSummary';
|
||||
|
||||
const initialState = {
|
||||
step: 1,
|
||||
operator: null,
|
||||
groundLoops: {
|
||||
needed: false,
|
||||
style: null,
|
||||
types: [],
|
||||
},
|
||||
accessControl: [],
|
||||
};
|
||||
|
||||
function reducer(state, action) {
|
||||
switch (action.type) {
|
||||
case 'SELECT_OPERATOR':
|
||||
return { ...state, operator: action.payload, step: 2 };
|
||||
case 'SET_GROUND_LOOPS_NEEDED':
|
||||
return {
|
||||
...state,
|
||||
groundLoops: { needed: action.payload, style: null, types: [] },
|
||||
step: action.payload ? state.step : state.step + 1,
|
||||
};
|
||||
case 'SET_GROUND_LOOP_STYLE':
|
||||
return {
|
||||
...state,
|
||||
groundLoops: { ...state.groundLoops, style: action.payload },
|
||||
};
|
||||
case 'TOGGLE_GROUND_LOOP_TYPE': {
|
||||
const id = action.payload;
|
||||
const exists = state.groundLoops.types.includes(id);
|
||||
return {
|
||||
...state,
|
||||
groundLoops: {
|
||||
...state.groundLoops,
|
||||
types: exists
|
||||
? state.groundLoops.types.filter((t) => t !== id)
|
||||
: [...state.groundLoops.types, id],
|
||||
},
|
||||
};
|
||||
}
|
||||
case 'TOGGLE_ACCESS_CONTROL': {
|
||||
const id = action.payload;
|
||||
const exists = state.accessControl.includes(id);
|
||||
return {
|
||||
...state,
|
||||
accessControl: exists
|
||||
? state.accessControl.filter((a) => a !== id)
|
||||
: [...state.accessControl, id],
|
||||
};
|
||||
}
|
||||
case 'NEXT_STEP':
|
||||
return { ...state, step: Math.min(state.step + 1, 4) };
|
||||
case 'PREV_STEP':
|
||||
return { ...state, step: Math.max(state.step - 1, 1) };
|
||||
case 'GO_TO_STEP':
|
||||
return { ...state, step: Math.min(action.payload, 4) };
|
||||
case 'RESET':
|
||||
return { ...initialState };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export default function Wizard({ pricing }) {
|
||||
const [state, dispatch] = useReducer(reducer, initialState);
|
||||
const { step, operator, groundLoops, accessControl } = state;
|
||||
|
||||
const steps = [
|
||||
{ num: 1, label: 'Operator' },
|
||||
{ num: 2, label: 'Ground Loops' },
|
||||
{ num: 3, label: 'Access Control' },
|
||||
{ num: 4, label: 'Quote' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900">
|
||||
Gate Operator Quotation System
|
||||
</h1>
|
||||
<p className="text-gray-500 mt-2">
|
||||
Select your configuration to generate a detailed cost estimate
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<nav className="mb-8">
|
||||
<ol className="flex items-center justify-center gap-2">
|
||||
{steps.map((s) => (
|
||||
<li key={s.num} className="flex items-center gap-2">
|
||||
{s.num > 1 && (
|
||||
<div
|
||||
className={`w-8 h-0.5 ${
|
||||
step >= s.num ? 'bg-blue-600' : 'bg-gray-300'
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
if (s.num < step) dispatch({ type: 'GO_TO_STEP', payload: s.num });
|
||||
}}
|
||||
disabled={s.num > step}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
|
||||
step === s.num
|
||||
? 'bg-blue-600 text-white'
|
||||
: step > s.num
|
||||
? 'bg-blue-100 text-blue-700 cursor-pointer hover:bg-blue-200'
|
||||
: 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold ${
|
||||
step === s.num
|
||||
? 'bg-white text-blue-600'
|
||||
: step > s.num
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-300 text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{step > s.num ? '\u2713' : s.num}
|
||||
</span>
|
||||
{s.label}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 md:p-8">
|
||||
{step === 1 && (
|
||||
<StepOperator
|
||||
operators={pricing.operators}
|
||||
selected={operator}
|
||||
onSelect={(id) => dispatch({ type: 'SELECT_OPERATOR', payload: id })}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<StepGroundLoops
|
||||
styles={pricing.groundLoopStyles}
|
||||
types={pricing.groundLoopTypes}
|
||||
value={groundLoops}
|
||||
onSetNeeded={(needed) => dispatch({ type: 'SET_GROUND_LOOPS_NEEDED', payload: needed })}
|
||||
onSetStyle={(id) => dispatch({ type: 'SET_GROUND_LOOP_STYLE', payload: id })}
|
||||
onToggleType={(id) => dispatch({ type: 'TOGGLE_GROUND_LOOP_TYPE', payload: id })}
|
||||
onNext={() => dispatch({ type: 'NEXT_STEP' })}
|
||||
onBack={() => dispatch({ type: 'PREV_STEP' })}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<StepAccessControl
|
||||
accessControl={pricing.accessControl}
|
||||
selected={accessControl}
|
||||
onToggle={(id) => dispatch({ type: 'TOGGLE_ACCESS_CONTROL', payload: id })}
|
||||
onBack={() => dispatch({ type: 'PREV_STEP' })}
|
||||
onNext={() => dispatch({ type: 'NEXT_STEP' })}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === 4 && (
|
||||
<QuoteSummary
|
||||
pricing={pricing}
|
||||
selections={{ operator, groundLoops, accessControl }}
|
||||
onBack={() => dispatch({ type: 'PREV_STEP' })}
|
||||
onNew={() => dispatch({ type: 'RESET' })}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
73
client/src/data/pricing.json
Normal file
73
client/src/data/pricing.json
Normal file
@ -0,0 +1,73 @@
|
||||
{
|
||||
"currency": {
|
||||
"symbol": "C$",
|
||||
"code": "CAD",
|
||||
"locale": "en-CA"
|
||||
},
|
||||
"operators": [
|
||||
{
|
||||
"id": "swing-residential",
|
||||
"name": "Residential Swing Gate Operator",
|
||||
"model": "SG-1000",
|
||||
"category": "swing",
|
||||
"description": "12V DC swing gate operator for residential gates up to 14 ft",
|
||||
"basePrice": 2495,
|
||||
"image": "swing",
|
||||
"requiredParts": [
|
||||
{ "id": "op-unit-swing", "name": "Operator Unit (SG-1000)", "qty": 2, "unitPrice": 1247.50 },
|
||||
{ "id": "bracket-kit", "name": "Gate Bracket Kit", "qty": 2, "unitPrice": 85 },
|
||||
{ "id": "photo-eye", "name": "Photo Eye Kit", "qty": 1, "unitPrice": 125 },
|
||||
{ "id": "hinges", "name": "Gate Hinges (Heavy Duty)", "qty": 4, "unitPrice": 45 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "slide-commercial",
|
||||
"name": "Commercial Slide Gate Operator",
|
||||
"model": "SL-3000",
|
||||
"category": "slide",
|
||||
"description": "24V DC slide gate operator for commercial gates up to 40 ft",
|
||||
"basePrice": 3895,
|
||||
"image": "slide",
|
||||
"requiredParts": [
|
||||
{ "id": "op-unit-slide", "name": "Heavy Duty Operator Unit (SL-3000)", "qty": 1, "unitPrice": 3895 },
|
||||
{ "id": "rack-kit", "name": "Slide Gate Rack Kit (10ft sections)", "qty": 4, "unitPrice": 175 },
|
||||
{ "id": "photo-eye", "name": "Photo Eye Kit", "qty": 1, "unitPrice": 125 },
|
||||
{ "id": "warning-light", "name": "Strobe Warning Light", "qty": 1, "unitPrice": 195 },
|
||||
{ "id": "sensor-loop", "name": "Vehicle Loop Sensor", "qty": 1, "unitPrice": 285 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "barrier-parking",
|
||||
"name": "Parking Barrier Gate Operator",
|
||||
"model": "BG-200",
|
||||
"category": "barrier",
|
||||
"description": "120V AC barrier gate for parking lots and access control up to 20 ft",
|
||||
"basePrice": 3195,
|
||||
"image": "barrier",
|
||||
"requiredParts": [
|
||||
{ "id": "op-unit-barrier", "name": "Barrier Arm Assembly (BG-200)", "qty": 1, "unitPrice": 3195 },
|
||||
{ "id": "barrier-arm", "name": "Barrier Arm (8ft Aluminum)", "qty": 1, "unitPrice": 395 },
|
||||
{ "id": "loop-detector", "name": "Loop Detector Card", "qty": 1, "unitPrice": 345 },
|
||||
{ "id": "warning-light", "name": "LED Warning Light", "qty": 2, "unitPrice": 145 },
|
||||
{ "id": "signage", "name": "Gate Signage Kit", "qty": 1, "unitPrice": 120 }
|
||||
]
|
||||
}
|
||||
],
|
||||
"groundLoopStyles": [
|
||||
{ "id": "saw-cut", "name": "Saw-Cut Installation", "description": "Loop cut into existing pavement and sealed flush", "additionalCost": 0 },
|
||||
{ "id": "pave-over", "name": "Pave-Over Installation", "description": "Surface-mount loop installed on top of pavement with protective casing", "additionalCost": 195 }
|
||||
],
|
||||
"groundLoopTypes": [
|
||||
{ "id": "interrupt", "name": "Interrupt Loop", "description": "Primary vehicle detection loop for gate activation", "price": 425 },
|
||||
{ "id": "shadow", "name": "Shadow Loop", "description": "Secondary safety loop located behind gate to prevent closure on vehicle", "price": 375 },
|
||||
{ "id": "exit", "name": "Exit Loop", "description": "Free exit loop on departure side for automatic exit detection", "price": 375 }
|
||||
],
|
||||
"accessControl": [
|
||||
{ "id": "keypad", "name": "Digital Keypad", "model": "KP-200", "description": "Weatherproof digital keypad with backlit keys, 500 user codes", "price": 295 },
|
||||
{ "id": "card-reader", "name": "Proximity Card Reader", "model": "PR-500", "description": "125kHz proximity card reader with 1000 card capacity", "price": 445 },
|
||||
{ "id": "intercom", "name": "Audio/Video Intercom", "model": "AV-700", "description": "2-wire audio/video intercom with color camera", "price": 895 },
|
||||
{ "id": "remote-kit", "name": "Remote Control Kit", "model": "RC-4", "description": "4-button remote control with 2 remotes, rolling code", "price": 195 },
|
||||
{ "id": "solar-kit", "name": "Solar Panel Kit", "model": "SP-100", "description": "100W solar panel with charge controller and battery", "price": 695 },
|
||||
{ "id": "gsm-controller", "name": "GSM Cellular Controller", "model": "GSM-4G", "description": "4G cellular controller with app, no phone line needed", "price": 595 }
|
||||
]
|
||||
}
|
||||
3
client/src/index.css
Normal file
3
client/src/index.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
10
client/src/main.jsx
Normal file
10
client/src/main.jsx
Normal file
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
80
client/src/utils/quoteCalculator.js
Normal file
80
client/src/utils/quoteCalculator.js
Normal file
@ -0,0 +1,80 @@
|
||||
export function calculateQuote(pricing, selections) {
|
||||
const { operator, groundLoops, accessControl } = selections;
|
||||
const items = [];
|
||||
let subtotal = 0;
|
||||
|
||||
if (operator) {
|
||||
const op = pricing.operators.find((o) => o.id === operator);
|
||||
if (op) {
|
||||
op.requiredParts.forEach((part) => {
|
||||
const lineTotal = part.qty * part.unitPrice;
|
||||
items.push({
|
||||
type: 'part',
|
||||
category: 'Required Equipment',
|
||||
name: part.name,
|
||||
qty: part.qty,
|
||||
unitPrice: part.unitPrice,
|
||||
lineTotal,
|
||||
});
|
||||
subtotal += lineTotal;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (groundLoops?.needed) {
|
||||
if (groundLoops.style) {
|
||||
const gls = pricing.groundLoopStyles.find((s) => s.id === groundLoops.style);
|
||||
if (gls && gls.additionalCost > 0) {
|
||||
items.push({
|
||||
type: 'groundLoopStyle',
|
||||
category: 'Ground Loops',
|
||||
name: `Installation: ${gls.name}`,
|
||||
qty: 1,
|
||||
unitPrice: gls.additionalCost,
|
||||
lineTotal: gls.additionalCost,
|
||||
});
|
||||
subtotal += gls.additionalCost;
|
||||
}
|
||||
}
|
||||
|
||||
if (groundLoops.types && groundLoops.types.length > 0) {
|
||||
groundLoops.types.forEach((typeId) => {
|
||||
const glt = pricing.groundLoopTypes.find((t) => t.id === typeId);
|
||||
if (glt) {
|
||||
items.push({
|
||||
type: 'groundLoopType',
|
||||
category: 'Ground Loops',
|
||||
name: glt.name,
|
||||
qty: 1,
|
||||
unitPrice: glt.price,
|
||||
lineTotal: glt.price,
|
||||
});
|
||||
subtotal += glt.price;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (accessControl && accessControl.length > 0) {
|
||||
accessControl.forEach((acId) => {
|
||||
const ac = pricing.accessControl.find((a) => a.id === acId);
|
||||
if (ac) {
|
||||
items.push({
|
||||
type: 'accessControl',
|
||||
category: 'Access Control',
|
||||
name: ac.name,
|
||||
qty: 1,
|
||||
unitPrice: ac.price,
|
||||
lineTotal: ac.price,
|
||||
});
|
||||
subtotal += ac.price;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const taxRate = 0.13;
|
||||
const tax = subtotal * taxRate;
|
||||
const total = subtotal + tax;
|
||||
|
||||
return { items, subtotal, tax, taxRate, total };
|
||||
}
|
||||
8
client/tailwind.config.js
Normal file
8
client/tailwind.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
13
client/vite.config.js
Normal file
13
client/vite.config.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3001',
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user