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.

client/src/components/QuoteSummary.jsx

@@ -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 &mdash; {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>
+  );
+}

client/src/components/StepAccessControl.jsx

@@ -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>
+  );
+}

client/src/components/StepGroundLoops.jsx

@@ -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">&#10060;</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">&#128373;</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>
+  );
+}

client/src/components/StepOperator.jsx

@@ -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>
+  );
+}

client/src/components/Wizard.jsx

@@ -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>
+  );
+}