Swing gate changes: LA500 1 op + secondary arm, CSW24UL optional second operator

client/src/components/StepOperator.jsx

@@ -7,8 +7,16 @@ const categoryLabels = {
   tilt: 'Tilt Gate Operators',
 };
 
-export default function StepOperator({ operators, selected, onSelect }) {
+export default function StepOperator({
+  operators,
+  selected,
+  optionalParts,
+  onSelect,
+  onToggleOptionalPart,
+  onNext,
+}) {
   const categories = [...new Set(operators.map((o) => o.category))];
+  const selectedOp = operators.find((o) => o.id === selected);
 
   return (
     <div>
@@ -83,6 +91,71 @@ export default function StepOperator({ operators, selected, onSelect }) {
           </div>
         </div>
       ))}
+
+      {selectedOp?.optionalParts && selectedOp.optionalParts.length > 0 && (
+        <div className="mt-8 pt-6 border-t border-gray-200">
+          <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">
+            Optional Add-Ons for {selectedOp.model}
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {selectedOp.optionalParts.map((part) => {
+              const isSelected = optionalParts.includes(part.id);
+              return (
+                <button
+                  key={part.id}
+                  onClick={() => onToggleOptionalPart(part.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">{part.name}</div>
+                      <div className="text-sm text-gray-500 mt-1">Qty: {part.qty}</div>
+                    </div>
+                    <div className="text-right shrink-0 ml-4">
+                      <div className="text-lg font-bold text-blue-600">
+                        C${part.unitPrice.toLocaleString('en-CA')}
+                      </div>
+                      <div
+                        className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center ml-auto 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>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {selected && (
+        <div className="flex items-center justify-between pt-6 border-t border-gray-200 mt-8">
+          <div className="text-sm text-gray-500">
+            {selectedOp?.optionalParts?.length > 0
+              ? `${optionalParts.length} optional add-on${optionalParts.length !== 1 ? 's' : ''} selected`
+              : 'Operator 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"
+          >
+            Continue
+          </button>
+        </div>
+      )}
     </div>
   );
 }

client/src/components/Wizard.jsx

@@ -7,6 +7,7 @@ import QuoteSummary from './QuoteSummary';
 const initialState = {
   step: 1,
   operator: null,
+  optionalParts: [],
   groundLoops: {
     needed: false,
     style: null,
@@ -21,7 +22,17 @@ const initialState = {
 function reducer(state, action) {
   switch (action.type) {
     case 'SELECT_OPERATOR':
-      return { ...state, operator: action.payload, step: 2 };
+      return { ...state, operator: action.payload, optionalParts: [], step: 2 };
+    case 'TOGGLE_OPTIONAL_PART': {
+      const id = action.payload;
+      const exists = state.optionalParts.includes(id);
+      return {
+        ...state,
+        optionalParts: exists
+          ? state.optionalParts.filter((p) => p !== id)
+          : [...state.optionalParts, id],
+      };
+    }
     case 'SET_GROUND_LOOPS_NEEDED':
       return {
         ...state,
@@ -94,7 +105,7 @@ function reducer(state, action) {
 
 export default function Wizard({ pricing, onLogout }) {
   const [state, dispatch] = useReducer(reducer, initialState);
-  const { step, operator, groundLoops, accessControl, remoteButtons, remoteQuantity } = state;
+  const { step, operator, optionalParts, groundLoops, accessControl, remoteButtons, remoteQuantity } = state;
 
   const steps = [
     { num: 1, label: 'Operator' },
@@ -171,7 +182,10 @@ export default function Wizard({ pricing, onLogout }) {
           <StepOperator
             operators={pricing.operators}
             selected={operator}
+            optionalParts={optionalParts}
             onSelect={(id) => dispatch({ type: 'SELECT_OPERATOR', payload: id })}
+            onToggleOptionalPart={(id) => dispatch({ type: 'TOGGLE_OPTIONAL_PART', payload: id })}
+            onNext={() => dispatch({ type: 'NEXT_STEP' })}
           />
         )}
 
@@ -209,7 +223,7 @@ export default function Wizard({ pricing, onLogout }) {
         {step === 4 && (
           <QuoteSummary
             pricing={pricing}
-            selections={{ operator, groundLoops, accessControl, remoteButtons, remoteQuantity }}
+            selections={{ operator, optionalParts, groundLoops, accessControl, remoteButtons, remoteQuantity }}
             onBack={() => dispatch({ type: 'PREV_STEP' })}
             onNew={() => dispatch({ type: 'RESET' })}
           />

client/src/utils/quoteCalculator.js

@@ -1,5 +1,5 @@
 export function calculateQuote(pricing, selections) {
-  const { operator, groundLoops, accessControl } = selections;
+  const { operator, optionalParts, groundLoops, accessControl } = selections;
   const items = [];
   let subtotal = 0;
 
@@ -34,6 +34,28 @@ export function calculateQuote(pricing, selections) {
         });
       }
     }
+
+    // Optional add-on parts for selected operator
+    if (optionalParts && optionalParts.length > 0) {
+      const op = typeof operator === 'string' && pricing.operators.find((o) => o.id === operator);
+      if (op?.optionalParts) {
+        optionalParts.forEach((partId) => {
+          const part = op.optionalParts.find((p) => p.id === partId);
+          if (part) {
+            const lineTotal = part.qty * part.unitPrice;
+            items.push({
+              type: 'optionalPart',
+              category: 'Optional Add-Ons',
+              name: part.name,
+              qty: part.qty,
+              unitPrice: part.unitPrice,
+              lineTotal,
+            });
+            subtotal += lineTotal;
+          }
+        });
+      }
+    }
   }
 
   if (groundLoops?.needed) {