Todd/gate-quote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: gate operator quotation app

Browse Source 
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
2026-05-21 09:13:59 -04:00
commit 74587ccceb
24 changed files with 5306 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
client/src/components/StepGroundLoops.jsx Normal file
View 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">&#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>
);
}