{total != null && ( )}

{pending ? (

Want to service this flight? Submit a trip or leg quote to compete in the marketplace.

) : (

Quotes {trip.quotes.length} on file
{(() => { const capped = trip.quotes.length > 5; return (

{trip.quotes.map((q, i) => (

))}
{capped && (
)}
); })()}
)}

); } /* ---------- batch quote builder sheet ---------- */ function BatchQuoteSheet({ trip, open, onClose, onDecline, onSubmitAll, isInitial, initialView }) { const [batch, setBatch] = useStateC([]); const [view, setView] = useStateC(null); // null = selector | 'trip' | 'leg-N' = form const [editingIndex, setEditingIndex] = useStateC(null); const [tail, setTail] = useStateC(''); const [raw, setRaw] = useStateC(''); const [price, setPrice] = useStateC(0); const [notes, setNotes] = useStateC(''); const [pdfFile, setPdfFile] = useStateC(null); const fileRef = useRef(null); useEffect(() => { if (open) { setBatch([]); setView(initialView || null); setEditingIndex(null); resetForm(); } }, [open]); function resetForm() { setTail(''); setRaw(''); setPrice(0); setNotes(''); setPdfFile(null); } function openEdit(i) { const b = batch[i]; setEditingIndex(i); setView(b.type); setTail(b.tail); setRaw(String(b.price)); setPrice(b.price); setNotes(b.notes || ''); setPdfFile(b.file || null); } function handleAddToBatch() { if (!price) return; const item = { type: view, tail, price, notes, file: pdfFile }; if (editingIndex !== null) { setBatch(prev => prev.map((b, i) => i === editingIndex ? item : b)); setEditingIndex(null); } else { setBatch(prev => [...prev, item]); } setView(null); resetForm(); } const legs = trip ? Array.from({ length: trip.legCount }, (_, i) => i + 1) : []; const labelFor = key => key === 'trip' ? 'Trip Quote' : `Leg ${key.split('-')[1]} Quote`; const FL = { font: '600 11px/1 var(--font-ui)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--baj-text-mute)', marginBottom: 7 }; return (

{/* header */}

Add Quotes

{trip ? `${trip.from} → ${trip.to}` : ''}
{trip && (
{trip.ref} · {trip.date}
)}

{view === null ? ( <> {/* batch list */} {batch.length > 0 && (

Batch · {batch.length} quote{batch.length > 1 ? 's' : ''}

{batch.map((b, i) => (

{b.type === 'trip' ? : }

{labelFor(b.type)}

{b.tail || '—'} · {fmtMoney(b.price)}{b.file ? ' · PDF' : ''}

))}

)} {batch.length > 0 && (
)} {/* type selector */}

{legs.map(n => ( ))}

{/* submit / decline */}

) : ( /* ---- inline form ---- */ <>
{editingIndex !== null ? `Edit ${labelFor(view)}` : labelFor(view)}
{/* aircraft */}

Aircraft

{/* amount */}

Quote amount

$ { const d = e.target.value.replace(/[^0-9]/g, ''); const n = d ? parseInt(d, 10) : 0; setRaw(d ? n.toLocaleString() : ''); setPrice(n); }} placeholder="0" style={{ font: '800 34px/1 var(--font-ui)', color: 'var(--baj-text)', background: 'transparent', border: 0, outline: 'none', width: 160, letterSpacing: '-0.01em', caretColor: 'var(--baj-blue)' }} />

{/* notes */}

Notes
setNotes(e.target.value)} placeholder="Internal notes…" rows={3} style={{ width: '100%', padding: '11px 13px', borderRadius: 10, border: '1px solid var(--baj-line)', background: '#fff', font: '500 13px/1.45 var(--font-ui)', color: 'var(--baj-text)', resize: 'vertical', outline: 'none', boxSizing: 'border-box' }} /> </div> {/* pdf */} <div> <div style={FL}>Quote document</div> <input ref={fileRef} type="file" accept=".pdf,application/pdf" style={{ display: 'none' }} onChange={e => setPdfFile(e.target.files[0] || null)} /> {pdfFile ? ( <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 13px', borderRadius: 10, border: '1px solid var(--baj-line)', background: 'var(--baj-surface)' }}> <Icon.doc width={16} height={16} style={{ color: 'var(--baj-blue)', flex: '0 0 auto' }} /> <span style={{ flex: 1, font: '500 12.5px/1.3 var(--font-ui)', color: 'var(--baj-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pdfFile.name}</span> <button onClick={() => setPdfFile(null)} style={{ background: 'none', border: 0, cursor: 'pointer', color: 'var(--baj-text-mute)', display: 'flex', padding: 2 }}> <Icon.close width={14} height={14} /> </button> </div> ) : ( <button onClick={() => fileRef.current && fileRef.current.click()} style={{ width: '100%', padding: '11px 13px', borderRadius: 10, border: '1.5px dashed var(--baj-line)', background: '#fff', font: '600 12.5px/1 var(--font-ui)', color: 'var(--baj-text-mute)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, }}> <Icon.doc width={14} height={14} style={{ color: 'var(--baj-blue)' }} />Attach PDF </button> )} </div> <button onClick={handleAddToBatch} style={{ width: '100%', padding: '15px 0', border: 0, borderRadius: 12, cursor: price ? 'pointer' : 'default', background: price ? 'var(--baj-navy)' : 'var(--baj-surface-2)', color: price ? '#fff' : 'var(--baj-text-mute)', font: '700 13px/1 var(--font-ui)', letterSpacing: '0.06em', textTransform: 'uppercase', }}>{editingIndex !== null ? 'Save changes' : 'Add to batch'}</button> </> )} </div> </div> </div> ); } /* ---------- holistic map sheet ---------- */ function MapSheet({ open, onClose, trips }) { return ( <div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', pointerEvents: open ? 'auto' : 'none', }}> <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.45)', opacity: open ? 1 : 0, transition: 'opacity 280ms', }} /> <div style={{ position: 'relative', background: '#fff', borderRadius: '20px 20px 0 0', maxHeight: '72%', display: 'flex', flexDirection: 'column', transform: open ? 'translateY(0)' : 'translateY(100%)', transition: 'transform 340ms var(--ease-out)', }}> <div style={{ padding: '14px 16px 11px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--baj-line)' }}> <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}> <i className="fas fa-map" style={{ fontSize: 14, color: 'var(--baj-blue)' }} /> <span style={{ font: '700 14px/1 var(--font-ui)', color: 'var(--baj-text)' }}>Route Map</span> <span style={{ font: '600 11px/1 var(--font-ui)', color: 'var(--baj-text-mute)' }}>· {trips.length} itineraries</span> </div> <button onClick={onClose} style={{ background: 'none', border: 0, cursor: 'pointer', color: 'var(--baj-text-mute)', display: 'flex', padding: 4 }}> <Icon.close width={18} height={18} /> </button> </div> <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 12, padding: 14 }}> {trips.map(t => ( <div key={t.id}> <div style={{ font: '700 12px/1 var(--font-ui)', color: 'var(--baj-text)', marginBottom: 6 }}> {t.from} → {t.to} <span style={{ fontWeight: 500, color: 'var(--baj-text-mute)', marginLeft: 7 }}>{t.date}</span> </div> <div style={{ borderRadius: 12, overflow: 'hidden', border: '1px solid var(--baj-line)' }}> <MapGraphic trip={t} /> </div> </div> ))} </div> </div> </div> ); } /* ---------- APP C ---------- */ function ItineraryApp() { const [trips, setTrips] = useStateC(() => TRIPS.map(t => { const stripYou = rows => rows ? rows.filter(r => !r.you) : rows; return { ...t, quotes: [], yourRank: null, ladder: t.ladder ? { ...t.ladder, trip: stripYou(t.ladder.trip), leg1: stripYou(t.ladder.leg1), leg2: stripYou(t.ladder.leg2), } : t.ladder, }; })); const [tab, setTab] = useStateC('Quotes'); const [openId, setOpenId] = useStateC(null); const [competitorId, setCompetitorId] = useStateC(null); const [quoteEdit, setQuoteEdit] = useStateC(null); const [attachmentsId, setAttachmentsId] = useStateC(null); const [legend, setLegend] = useStateC(false); const [addQuoteTripId, setAddQuoteTripId] = useStateC(() => { const first = TRIPS.find(t => t.bucket === 'pending'); return first ? first.id : null; }); const [addQuoteIsInitial, setAddQuoteIsInitial] = useStateC(true); const [batchInitialView, setBatchInitialView] = useStateC(null); const nextTripTimer = useRef(null); const displayedTrips = trips.filter(t => t.bucket === 'pending' || t.quotes.some(q => q.you) || t.declined); const competitorTrip = competitorId ? trips.find(t => t.id === competitorId) : null; const addQuoteTrip = addQuoteTripId ? trips.find(t => t.id === addQuoteTripId) : null; const attachmentsTrip = attachmentsId ? trips.find(t => t.id === attachmentsId) : null; const quoteEditTrip = quoteEdit ? trips.find(t => t.id === quoteEdit.tripId) : null; const quoteEditQuote = quoteEditTrip ? quoteEditTrip.quotes.find(q => q.id === quoteEdit.quoteId) : null; function updateTrip(tripId, updater) { setTrips(prev => prev.map(t => t.id === tripId ? updater(t) : t)); } function applyLadderYou(ladder, updates) { if (!ladder) return ladder; const updateRows = rows => rows ? [...rows.map(r => r.you ? { ...r, ...updates } : r)].sort((a, b) => a.price - b.price) : rows; return { ...ladder, ...(ladder.trip ? { trip: updateRows(ladder.trip) } : {}), ...(ladder.leg1 ? { leg1: updateRows(ladder.leg1) } : {}), ...(ladder.leg2 ? { leg2: updateRows(ladder.leg2) } : {}), }; } function calcRank(ladder) { return ladder && ladder.trip ? ladder.trip.findIndex(r => r.you) + 1 : null; } function handleRequote(tripId, quoteId, { tail, price }) { const fleet = FLEET.find(f => f.tail === tail) || {}; const youUpdates = { price, ...(fleet.ac ? { ac: fleet.ac, cat: fleet.cat } : {}) }; updateTrip(tripId, t => { const newLadder = applyLadderYou(t.ladder, youUpdates); return { ...t, yourRank: calcRank(newLadder) || t.yourRank, quotes: t.quotes.map(q => q.id === quoteId ? { ...q, amount: price, tail, status: 'submitted', ...(fleet.ac ? { ac: fleet.ac, cat: fleet.cat } : {}) } : q ), ladder: newLadder, }; }); setQuoteEdit(null); setCompetitorId(tripId); } function handleCompetitorAddQuote(viewKey) { const tripId = competitorId; const batchView = viewKey === 'trip' ? 'trip' : `leg-${viewKey.replace('leg', '')}`; setBatchInitialView(batchView); setAddQuoteIsInitial(false); setAddQuoteTripId(tripId); setCompetitorId(null); } function handleDecline(tripId) { clearTimeout(nextTripTimer.current); updateTrip(tripId, t => ({ ...t, declined: true })); setOpenId(tripId); setAddQuoteTripId(null); setAddQuoteIsInitial(false); } function handleBatchSubmit(tripId, batchQuotes) { updateTrip(tripId, t => { const newQuotes = batchQuotes.map((b, i) => { const f = (b.tail && FLEET.find(x => x.tail === b.tail)) || FLEET[0] || {}; const isLeg = b.type !== 'trip'; const legNum = isLeg ? parseInt(b.type.split('-')[1]) : null; return { id: `q_${tripId}_${Date.now()}_${i}`, tail: f.tail || '', ac: f.ac || '', cat: f.cat || '', type: isLeg ? 'Leg' : 'Trip', legs: isLeg ? 1 : t.legCount, ...(isLeg ? { legNum } : {}), ...(b.notes ? { notes: b.notes } : {}), ...(b.file ? { fileName: b.file.name } : {}), status: 'submitted', requested: null, amount: b.price, you: true, }; }); const getFleet = b => (b && b.tail && FLEET.find(x => x.tail === b.tail)) || FLEET[0] || {}; const youMeta = b => { const f = getFleet(b); return { ac: f.ac || '', cat: f.cat || '', refurbInt: f.refurbInt, refurbExt: f.refurbExt }; }; const insertAllYou = (rows, quotes) => { if (!rows) return rows; if (!quotes.length) return rows; return [...rows, ...quotes.map(b => ({ price: b.price, you: true, ...youMeta(b) }))].sort((a, b) => a.price - b.price); }; const newLadder = t.ladder ? { ...t.ladder, trip: insertAllYou(t.ladder.trip, batchQuotes.filter(b => b.type === 'trip')), leg1: insertAllYou(t.ladder.leg1, batchQuotes.filter(b => b.type === 'leg-1')), leg2: insertAllYou(t.ladder.leg2, batchQuotes.filter(b => b.type === 'leg-2')), } : t.ladder; const newRank = newLadder?.trip ? newLadder.trip.findIndex(r => r.you) + 1 : null; return { ...t, bucket: 'live', yourRank: newRank || null, ladder: newLadder, quotes: [...t.quotes, ...newQuotes] }; }); setOpenId(tripId); setAddQuoteTripId(null); setAddQuoteIsInitial(false); setBatchInitialView(null); } return ( <PhoneShell statusBg="#19253C" statusFg="#fff"> <div style={{ flex: '0 0 auto', background: 'var(--baj-navy)', color: '#fff', padding: '6px 18px 15px' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}> <BajopsMark /> <span style={{ font: '600 12px/1 var(--font-ui)', color: 'rgba(255,255,255,0.62)' }}>Demo Operator</span> </div> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}> <div style={{ font: '800 23px/1.05 var(--font-ui)', letterSpacing: '-0.01em' }}>Active Quotes</div> <button onClick={() => setLegend(true)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(255,255,255,0.1)', border: 0, borderRadius: 9, padding: '8px 11px', cursor: 'pointer', color: 'rgba(255,255,255,0.85)', font: '600 11px/1 var(--font-ui)' }}> <Icon.filter width={13} height={13} />Status key </button> </div> </div> <div style={{ flex: 1, overflowY: 'auto', background: '#EEF2F5', padding: '15px 14px 24px', display: 'flex', flexDirection: 'column', gap: 12 }}> <div style={{ display: 'flex', alignItems: 'center', padding: '0 4px' }}> <span style={{ font: '600 11px/1 var(--font-ui)', letterSpacing: '0.04em', color: 'var(--baj-text-mute)' }}> {displayedTrips.length > 0 ? `${displayedTrips.length} flights · tap to expand` : `${trips.length} itineraries pending`} </span> </div> {displayedTrips.length === 0 ? ( <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '48px 24px', gap: 10, textAlign: 'center' }}> <Icon.layers width={28} height={28} style={{ color: 'var(--baj-text-mute)', opacity: 0.4 }} /> <span style={{ font: '600 13px/1.4 var(--font-ui)', color: 'var(--baj-text-mute)' }}>Submitted quotes will appear here</span> </div> ) : displayedTrips.map(t => ( <TripGroup key={t.id} trip={t} openId={openId} setOpenId={setOpenId} onCompetitor={(tr) => setCompetitorId(tr.id)} onAttachments={(tr) => setAttachmentsId(tr.id)} onEdit={(q) => setQuoteEdit({ tripId: t.id, quoteId: q.id })} onAddQuote={(tr) => { setAddQuoteIsInitial(false); setAddQuoteTripId(tr.id); }} /> ))} </div> <TabBar active={tab} onTab={setTab} /> <CompetitorSheet trip={competitorTrip} open={!!competitorId} onClose={() => setCompetitorId(null)} onAddQuote={handleCompetitorAddQuote} /> <AttachmentsSheet trip={attachmentsTrip} open={!!attachmentsId} onClose={() => setAttachmentsId(null)} /> <QuoteEditSheet trip={quoteEditTrip} quote={quoteEditQuote} open={!!quoteEdit} onClose={() => setQuoteEdit(null)} onRequote={({ tail, price }) => handleRequote(quoteEdit.tripId, quoteEdit.quoteId, { tail, price })} /> <LegendSheet open={legend} onClose={() => setLegend(false)} /> <BatchQuoteSheet trip={addQuoteTrip} open={!!addQuoteTripId} isInitial={addQuoteIsInitial} initialView={batchInitialView} onClose={() => { clearTimeout(nextTripTimer.current); setAddQuoteTripId(null); setBatchInitialView(null); }} onDecline={() => handleDecline(addQuoteTripId)} onSubmitAll={(batch) => handleBatchSubmit(addQuoteTripId, batch)} /> </PhoneShell> ); } Object.assign(window, { ItineraryApp });