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