f0400114f9
Kickoff brief, design spec, both implementation plans (rates foundation + booking wizard), the UI mockup, and the hands-off Westin clone-verify/deploy script for the Technician Service Booking feature. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
326 lines
20 KiB
HTML
326 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Book a Service — Mockup v2</title>
|
||
<style>
|
||
:root, [data-theme="light"] {
|
||
--page:#eef0f3; --panel:#e6e9ed; --card:#ffffff; --border:#d8dadd;
|
||
--text:#1f2430; --muted:#6b7280; --faint:#9ca3af;
|
||
--field:#ffffff; --field-border:#cfd3d8; --field-focus:#3a8fb7;
|
||
--chip:#f1f4f7; --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
|
||
--accent:#2e7aad; --accent-soft:#e8f2f8; --ok:#16a34a; --star:#f5b301; --money:#0f7d4e; --money-soft:#e7f6ee;
|
||
}
|
||
[data-theme="dark"] {
|
||
--page:#14161b; --panel:#1b1e24; --card:#22262d; --border:#343a42;
|
||
--text:#e7eaef; --muted:#9aa3af; --faint:#6b7480;
|
||
--field:#1a1d23; --field-border:#3a4049; --field-focus:#4aa3cf;
|
||
--chip:#2a2f37; --shadow:0 1px 3px rgba(0,0,0,.4);
|
||
--accent:#3a8fb7; --accent-soft:#19303d; --ok:#22c55e; --star:#f5b301; --money:#34d27f; --money-soft:#15281f;
|
||
}
|
||
* { box-sizing:border-box; }
|
||
body { margin:0; background:var(--page); color:var(--text);
|
||
font-family:'Inter','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif; font-size:14px; }
|
||
.wrap { max-width:1000px; margin:24px auto; padding:0 18px; }
|
||
.dialog { background:var(--panel); border:1px solid var(--border); border-radius:16px;
|
||
box-shadow:0 12px 40px rgba(16,24,40,.16); overflow:hidden; }
|
||
.topbar { background:linear-gradient(135deg,#5ba848 0%,#3a8fb7 60%,#2e7aad 100%);
|
||
padding:17px 24px; display:flex; align-items:center; justify-content:space-between; color:#fff; }
|
||
.topbar h1 { font-size:19px; font-weight:700; margin:0; }
|
||
.topbar .sub { font-size:12.5px; opacity:.9; margin-top:2px; }
|
||
.theme-btn { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); color:#fff;
|
||
border-radius:20px; padding:6px 14px; font-size:12.5px; cursor:pointer; font-weight:600; }
|
||
.stepper { display:flex; gap:6px; padding:11px 24px; background:var(--panel); border-bottom:1px solid var(--border); flex-wrap:wrap; }
|
||
.step { font-size:11.5px; font-weight:600; color:var(--faint); padding:5px 13px; border-radius:20px; background:var(--chip); }
|
||
.step.active { color:#fff; background:linear-gradient(135deg,#3a8fb7,#2e7aad); }
|
||
.step.draft { margin-left:auto; color:var(--money); background:var(--money-soft); }
|
||
|
||
.body { padding:20px 24px 6px; }
|
||
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
|
||
@media (max-width:780px){ .grid { grid-template-columns:1fr; } }
|
||
.card { background:var(--card); border:1px solid var(--border); border-radius:13px; padding:16px 17px; box-shadow:var(--shadow); }
|
||
.card.span2 { grid-column:1 / -1; }
|
||
.card h3 { margin:0 0 13px; font-size:11.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
|
||
color:var(--muted); display:flex; align-items:center; gap:7px; }
|
||
.card h3 .dot { width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,#5ba848,#2e7aad); }
|
||
.card h3 .tag { margin-left:auto; font-size:10px; font-weight:700; color:var(--money); background:var(--money-soft);
|
||
padding:2px 8px; border-radius:10px; letter-spacing:.3px; }
|
||
|
||
label.fl { display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 0 5px; }
|
||
.row { margin-bottom:12px; } .row:last-child { margin-bottom:0; }
|
||
.two { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
|
||
.three { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
|
||
input.f, select.f, textarea.f { width:100%; background:var(--field); color:var(--text); border:1px solid var(--field-border);
|
||
border-radius:9px; padding:9px 11px; font-size:13.5px; font-family:inherit; outline:none; transition:border .15s,box-shadow .15s; }
|
||
input.f:focus, select.f:focus, textarea.f:focus { border-color:var(--field-focus);
|
||
box-shadow:0 0 0 3px color-mix(in srgb, var(--field-focus) 22%, transparent); }
|
||
textarea.f { resize:vertical; min-height:56px; }
|
||
.hint { font-size:11px; color:var(--faint); margin-top:5px; }
|
||
.with-icon { position:relative; } .with-icon .pin { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#5ba848; font-size:16px; }
|
||
|
||
.seg { display:inline-flex; background:var(--chip); border:1px solid var(--border); border-radius:9px; padding:3px; gap:3px; }
|
||
.seg button { border:none; background:transparent; color:var(--muted); font-weight:600; font-size:12.5px; padding:6px 14px;
|
||
border-radius:7px; cursor:pointer; font-family:inherit; }
|
||
.seg button.on { background:var(--card); color:var(--accent); box-shadow:var(--shadow); }
|
||
.seg.full { display:flex; } .seg.full button { flex:1; }
|
||
|
||
.timepick { display:inline-flex; align-items:stretch; gap:7px; }
|
||
.timepick select.f { width:auto; padding-right:24px; }
|
||
.ampm { display:inline-flex; background:var(--chip); border:1px solid var(--border); border-radius:9px; padding:3px; }
|
||
.ampm button { border:none; background:transparent; color:var(--muted); font-weight:700; font-size:12px; padding:6px 12px; border-radius:7px; cursor:pointer; }
|
||
.ampm button.on { background:var(--accent); color:#fff; }
|
||
.endtime { font-size:13px; color:var(--muted); margin-top:7px; } .endtime b { color:var(--text); }
|
||
.avail { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ok);
|
||
background:color-mix(in srgb,var(--ok) 14%,transparent); padding:3px 9px; border-radius:20px; margin-top:6px; }
|
||
|
||
.opt { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); }
|
||
.opt:last-child { border-bottom:none; }
|
||
.opt .lab { font-size:13.5px; font-weight:500; } .opt .lab small { display:block; color:var(--faint); font-weight:400; font-size:11.5px; }
|
||
.sw { width:42px; height:24px; border-radius:20px; background:var(--field-border); position:relative; cursor:pointer; transition:background .15s; flex-shrink:0; }
|
||
.sw::after { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:3px; left:3px; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
|
||
.sw.on { background:var(--ok); } .sw.on::after { left:21px; }
|
||
|
||
/* fee readout inside Service & Pricing */
|
||
.feeline { display:flex; align-items:center; justify-content:space-between; background:var(--money-soft);
|
||
border:1px solid color-mix(in srgb,var(--money) 35%,transparent); border-radius:10px; padding:11px 14px; margin-top:4px; }
|
||
.feeline .lbl { font-size:12.5px; font-weight:600; color:var(--text); }
|
||
.feeline .lbl small { display:block; color:var(--faint); font-weight:400; font-size:11px; }
|
||
.feeline .amt { font-size:20px; font-weight:800; color:var(--money); }
|
||
|
||
/* ESTIMATE strip */
|
||
.estimate { grid-column:1/-1; background:var(--money-soft); border:1px solid color-mix(in srgb,var(--money) 40%,transparent);
|
||
border-left:5px solid var(--money); border-radius:13px; padding:15px 18px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
|
||
.estimate .breakdown { display:flex; gap:18px; flex-wrap:wrap; flex:1; }
|
||
.estimate .bk { } .estimate .bk .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--faint); }
|
||
.estimate .bk .v { font-size:15px; font-weight:700; margin-top:1px; }
|
||
.estimate .total { text-align:right; }
|
||
.estimate .total .k { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--money); font-weight:700; }
|
||
.estimate .total .v { font-size:27px; font-weight:800; color:var(--money); line-height:1; }
|
||
.estimate .total .note { font-size:11px; color:var(--faint); margin-top:3px; }
|
||
|
||
.foot { display:flex; align-items:center; justify-content:flex-end; gap:11px; padding:16px 24px; background:var(--panel); border-top:1px solid var(--border); }
|
||
.foot .spacer { margin-right:auto; font-size:12px; color:var(--faint); }
|
||
.btn { border:none; border-radius:10px; padding:11px 18px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; }
|
||
.btn.ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
|
||
.btn.primary { color:#fff; background:linear-gradient(135deg,#5ba848,#2e7aad); box-shadow:0 3px 10px color-mix(in srgb,#2e7aad 40%,transparent); }
|
||
.hide { display:none !important; }
|
||
.note { max-width:1000px; margin:14px auto 40px; padding:0 18px; color:var(--muted); font-size:12.5px; }
|
||
.note code { background:var(--chip); padding:1px 6px; border-radius:5px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="dialog">
|
||
<div class="topbar">
|
||
<div><h1>Book a Service</h1><div class="sub">Repair · delivery · pickup — captures the job and creates the priced repair order</div></div>
|
||
<button class="theme-btn" onclick="toggleTheme()">◐ Light / Dark</button>
|
||
</div>
|
||
<div class="stepper">
|
||
<span class="step active">Scheduled</span><span class="step">En Route</span>
|
||
<span class="step">In Progress</span><span class="step">Completed</span>
|
||
<span class="step draft">● Draft repair SO will be created</span>
|
||
</div>
|
||
|
||
<div class="body">
|
||
<div class="grid">
|
||
<!-- CUSTOMER -->
|
||
<div class="card">
|
||
<h3><span class="dot"></span>Customer</h3>
|
||
<div class="row">
|
||
<div class="seg full">
|
||
<button class="on" id="segExisting" onclick="custMode('existing')">Existing customer</button>
|
||
<button id="segNew" onclick="custMode('new')">New client</button>
|
||
</div>
|
||
</div>
|
||
<div id="custExisting">
|
||
<div class="row">
|
||
<label class="fl">Search by phone, name or SO</label>
|
||
<input class="f" placeholder="e.g. (416) 555-0142 …" value="(416) 555-0142 — Margaret Chen">
|
||
<div class="hint">Inbound call? Type the phone number — we match the contact & their history.</div>
|
||
</div>
|
||
</div>
|
||
<div id="custNew" class="hide">
|
||
<div class="row two">
|
||
<div><label class="fl">Client name *</label><input class="f" placeholder="Full name"></div>
|
||
<div><label class="fl">Phone *</label><input class="f" placeholder="(416) 555-…"></div>
|
||
</div>
|
||
<div class="row"><label class="fl">Email</label><input class="f" type="email" placeholder="client@email.com"></div>
|
||
<div class="row"><label class="fl">Address</label>
|
||
<div class="with-icon"><input class="f" placeholder="Start typing an address…"><span class="pin">📍</span></div>
|
||
</div>
|
||
<div class="row three">
|
||
<div><label class="fl">Unit</label><input class="f" placeholder="#"></div>
|
||
<div><label class="fl">Buzz</label><input class="f" placeholder="—"></div>
|
||
<div><label class="fl">City</label><input class="f" placeholder="City"></div>
|
||
</div>
|
||
<div class="hint">Contact is created & linked on save — all from this page.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SERVICE & PRICING -->
|
||
<div class="card">
|
||
<h3><span class="dot"></span>Service & Pricing<span class="tag">$ REVENUE</span></h3>
|
||
<div class="row two">
|
||
<div>
|
||
<label class="fl">Device being serviced</label>
|
||
<select class="f" id="device" onchange="onDevice()">
|
||
<option value="standard">Mobility Scooter</option>
|
||
<option value="standard">Powerchair</option>
|
||
<option value="standard">Wheelchair</option>
|
||
<option value="lift">Stairlift</option>
|
||
<option value="lift">Patient / Ceiling Lift</option>
|
||
<option value="standard">Lift Chair</option>
|
||
<option value="standard">Hospital Bed</option>
|
||
<option value="standard">Other</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="fl">Issue / symptom</label>
|
||
<input class="f" placeholder="e.g. won't power on">
|
||
</div>
|
||
</div>
|
||
<div class="row" id="callTypeRow">
|
||
<label class="fl">Service call type</label>
|
||
<select class="f" id="callType" onchange="recalc()">
|
||
<option data-fee="95" data-km="0">Standard Service Call — $95 (incl. 30 min labour)</option>
|
||
<option data-fee="160" data-km="0">Lift & Elevating Service Call — $160 (incl. 30 min)</option>
|
||
<option data-fee="120" data-km="1">Rush Service Call — $120 + $0.70/km ×2-way</option>
|
||
<option data-fee="140" data-km="1">After-Hours Service Call — $140 + $0.70/km ×2-way</option>
|
||
</select>
|
||
<div class="hint">Auto-suggested from the device — change if needed.</div>
|
||
</div>
|
||
<div class="feeline" id="feeBox">
|
||
<div class="lbl">Call-out fee<small id="feeSub">Standard · includes 30 min labour</small></div>
|
||
<div class="amt" id="feeAmt">$95</div>
|
||
</div>
|
||
<div class="hint" id="inshopNote" style="display:none;">In-shop job — no call-out fee; labour billed at $75/hr.</div>
|
||
</div>
|
||
|
||
<!-- SCHEDULE -->
|
||
<div class="card">
|
||
<h3><span class="dot"></span>Schedule</h3>
|
||
<div class="row two">
|
||
<div><label class="fl">Date</label><input class="f" type="date" value="2026-06-03"></div>
|
||
<div><label class="fl">Duration</label>
|
||
<select class="f" id="dur" onchange="recalc();endTime()">
|
||
<option value="0.5">30 min</option><option value="1" selected>1 hour</option>
|
||
<option value="1.5">1.5 hours</option><option value="2">2 hours</option><option value="3">3 hours</option>
|
||
</select></div>
|
||
</div>
|
||
<div class="row">
|
||
<label class="fl">Start time</label>
|
||
<div class="timepick">
|
||
<select class="f" id="hh" onchange="endTime()"><option>9</option><option>10</option><option>11</option><option>12</option><option>1</option><option>2</option><option>3</option><option>4</option></select>
|
||
<select class="f" id="mm" onchange="endTime()"><option>:00</option><option>:15</option><option>:30</option><option>:45</option></select>
|
||
<div class="ampm"><button class="on" onclick="ampm(this)">AM</button><button onclick="ampm(this)">PM</button></div>
|
||
</div>
|
||
<div class="endtime">Ends at <b id="endlbl">10:00 AM</b> · your local time</div>
|
||
</div>
|
||
<div class="row">
|
||
<label class="fl">Technician</label>
|
||
<select class="f"><option>— Choose —</option><option selected>Dave Wilson</option><option>Priya Anand</option></select>
|
||
<span class="avail">● 3 open slots before 5:00 PM</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LOCATION -->
|
||
<div class="card">
|
||
<h3><span class="dot"></span>Location</h3>
|
||
<div class="opt" style="border:none; padding-top:0;">
|
||
<div class="lab">In-shop job<small>At the store — no call-out, labour @ $75/hr</small></div>
|
||
<div class="sw" id="inshopSw" onclick="toggleShop(this)"></div>
|
||
</div>
|
||
<div id="addrBlock">
|
||
<div class="row"><label class="fl">Job address</label>
|
||
<div class="with-icon"><input class="f" placeholder="Auto-fills from customer…" value="88 Bloor St E, Toronto"><span class="pin">📍</span></div>
|
||
</div>
|
||
<div class="row two">
|
||
<div><label class="fl">Unit / Suite</label><input class="f" placeholder="#"></div>
|
||
<div><label class="fl">Buzz code</label><input class="f" placeholder="—"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JOB DETAILS -->
|
||
<div class="card span2">
|
||
<h3><span class="dot"></span>Job details</h3>
|
||
<div class="two">
|
||
<div class="row"><label class="fl">Work description</label><textarea class="f" placeholder="Symptom, what to check, history…"></textarea></div>
|
||
<div class="row"><label class="fl">Parts / materials to bring</label><textarea class="f" placeholder="Batteries, controller, casters…"></textarea></div>
|
||
</div>
|
||
<div class="opt"><div class="lab">Under manufacturer warranty<small>Parts not billed when covered</small></div><div class="sw" onclick="sw(this)"></div></div>
|
||
<div class="opt"><div class="lab">POD required<small>Capture proof of delivery on completion</small></div><div class="sw" onclick="sw(this)"></div></div>
|
||
<div class="opt"><div class="lab">Send client confirmation (email/SMS)<small>Booked · en-route · completed</small></div><div class="sw on" onclick="sw(this)"></div></div>
|
||
<div class="opt"><div class="lab">Request Google review after completion</div><div class="sw on" onclick="sw(this)"></div></div>
|
||
</div>
|
||
|
||
<!-- ESTIMATE -->
|
||
<div class="estimate">
|
||
<div class="breakdown">
|
||
<div class="bk"><div class="k">Call-out</div><div class="v" id="eCall">$95</div></div>
|
||
<div class="bk"><div class="k">Est. labour</div><div class="v" id="eLab">$85 · 1h</div></div>
|
||
<div class="bk" id="eKmBox" style="display:none;"><div class="k">Travel ($0.70/km ×2)</div><div class="v" id="eKm">$18</div></div>
|
||
</div>
|
||
<div class="total"><div class="k">Estimated total</div><div class="v" id="eTotal">$180</div>
|
||
<div class="note">+ parts as used · pre-tax · a draft SO is created</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="foot">
|
||
<span class="spacer">Local time · America/Toronto · 13 km away</span>
|
||
<button class="btn ghost">Cancel</button>
|
||
<button class="btn primary">Book & Create SO</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
Mockup v2 — demo-wired (theme, customer mode, device→call-type, in-shop, AM/PM, switches, live estimate).
|
||
Real build = an OWL client action; <b>Book & Create SO</b> calls one server method that find-or-creates the
|
||
contact, creates the <code>fusion.technician.task</code> + a draft <code>sale.order</code> with the call-out line
|
||
(+ auto per-km for rush/after-hours, from the computed distance). Rate-card items are seeded as service products.
|
||
Toggle <b>◐</b> top-right for dark/light.
|
||
</div>
|
||
|
||
<script>
|
||
const DIST_2WAY = 26, KM_RATE = 0.70; // demo: 13km away, 2-way
|
||
let inshop=false, ap='AM';
|
||
function toggleTheme(){ const h=document.documentElement; h.dataset.theme=h.dataset.theme==='dark'?'light':'dark'; }
|
||
function custMode(m){ const ex=m==='existing';
|
||
segExisting.classList.toggle('on',ex); segNew.classList.toggle('on',!ex);
|
||
custExisting.classList.toggle('hide',!ex); custNew.classList.toggle('hide',ex); }
|
||
function onDevice(){ const cat=device.value; callType.selectedIndex = cat==='lift'?1:0; recalc(); }
|
||
function ampm(el){ [...el.parentNode.children].forEach(b=>b.classList.remove('on')); el.classList.add('on'); ap=el.textContent; endTime(); }
|
||
function sw(el){ el.classList.toggle('on'); }
|
||
function toggleShop(el){ el.classList.toggle('on'); inshop=el.classList.contains('on');
|
||
addrBlock.classList.toggle('hide',inshop); callTypeRow.classList.toggle('hide',inshop);
|
||
feeBox.classList.toggle('hide',inshop); inshopNote.style.display=inshop?'block':'none'; recalc(); }
|
||
function endTime(){ const h=+hh.value, m=+mm.value.replace(':',''), dur=+document.getElementById('dur').value;
|
||
let mins=((h%12)+(ap==='PM'?12:0))*60+m+dur*60;
|
||
let eh=Math.floor(mins/60)%24, em=mins%60; endlbl.textContent=(eh%12||12)+':'+String(em).padStart(2,'0')+' '+(eh>=12?'PM':'AM'); }
|
||
function money(n){ return '$'+n.toFixed(n%1?2:0); }
|
||
function recalc(){
|
||
const dur=+document.getElementById('dur').value;
|
||
const labRate = inshop?75:85;
|
||
let callout=0, km=0, sub='', kmFlag=false;
|
||
if(!inshop){ const o=callType.options[callType.selectedIndex];
|
||
callout=+o.dataset.fee; kmFlag=o.dataset.km==='1';
|
||
feeAmt.textContent=money(callout); feeSub.textContent=o.text.split('—')[0].trim()+(kmFlag?' · + travel':' · incl. 30 min labour');
|
||
if(kmFlag) km=DIST_2WAY*KM_RATE;
|
||
}
|
||
// labour: first 30 min included on standard/lift call (not rush/afterhours which are time-based but keep simple)
|
||
const incl = (!inshop && !kmFlag) ? 0.5 : 0;
|
||
const billLabHrs = Math.max(0, dur - incl);
|
||
const lab = billLabHrs*labRate;
|
||
eCall.textContent = inshop?'—':money(callout);
|
||
eLab.textContent = money(lab)+' · '+billLabHrs+'h @ $'+labRate;
|
||
eKmBox.style.display = kmFlag?'block':'none'; eKm.textContent=money(km);
|
||
eTotal.textContent = money(callout+lab+km);
|
||
}
|
||
endTime(); recalc();
|
||
</script>
|
||
</body>
|
||
</html>
|