// modals.jsx — FlightDetail + AddTrip modals for the Mody-Gandhi Travel Tracker.
const { FAMILY: _FAM, FLIGHTS: _FLT, AIRLINES: _AL, AIRPORTS: _AP } = window.MGData;
const _flightStatus = window.MGData.flightStatus;
const _familyById = window.MGData.familyById;
const _airport = window.MGData.airport;
const _flightAwareUrl = window.MGData.flightAwareUrl;
const _modeOf = window.MGData.modeOf;
const _modeMeta = window.MGData.modeMeta;
const _MODE = window.MGData.MODE_META;
const _hasLoggedReturn = window.MGData.hasLoggedReturn;
const _hasCoords = window.MGData.hasCoords;
// supabase-js only exposes a generic "Edge Function returned a non-2xx
// status code" on failure — it doesn't parse the response body for you. The
// actual JSON error we sent back (see parse-flight/save-flight) is sitting
// on error.context, which is the raw Response object. Dig it out so people
// see the real reason instead of this one useless sentence every time.
// A hung request (bad connection, a cold-start stall, whatever) previously
// left the UI stuck on "Saving…" forever — the promise just never settled,
// so neither the success path nor the .catch() ever ran. Race every
// Edge Function call against a hard timeout so that can't happen again.
function withTimeout(promise, ms, label) {
return Promise.race([
promise,
new Promise((_, reject) =>
setTimeout(() => reject(new Error(`${label} is taking too long — check your connection and try again.`)), ms)
),
]);
}
async function readFunctionError(error) {
if (!error) return null;
try {
if (error.context && typeof error.context.json === "function") {
const body = await error.context.clone().json();
if (body && body.error) return body.error;
}
} catch (e) { /* body wasn't JSON — fall through to the generic message */ }
return error.message || "Something went wrong.";
}
// Resize + re-encode any uploaded image client-side, before it goes
// anywhere. Two birds, one stone: Claude's vision encoder doesn't get any
// more useful out of an image bigger than ~1568px on the long edge — beyond
// that you're just paying more bandwidth and tokens for nothing — and
// redrawing through a canvas always outputs plain JPEG regardless of the
// source format, which quietly fixes formats Claude can't read directly
// (HEIC off an iPhone, etc.) as long as the browser itself can decode them.
const MAX_UPLOAD_DIM = 1568;
const MAX_UPLOAD_BYTES = 20 * 1024 * 1024; // sanity cap before we even try decoding
async function resizeImageForUpload(file) {
if (file.size > MAX_UPLOAD_BYTES) {
throw new Error("That file's too large (over 20MB) — try a smaller photo or a screenshot instead?");
}
let bitmap;
try {
bitmap = await createImageBitmap(file);
} catch (e) {
throw new Error("Couldn't read that image — try a different file or format?");
}
const scale = Math.min(1, MAX_UPLOAD_DIM / Math.max(bitmap.width, bitmap.height));
const w = Math.max(1, Math.round(bitmap.width * scale));
const h = Math.max(1, Math.round(bitmap.height * scale));
const canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext("2d");
ctx.drawImage(bitmap, 0, 0, w, h);
if (bitmap.close) bitmap.close();
const blob = await new Promise((resolve, reject) => {
canvas.toBlob(
(b) => (b ? resolve(b) : reject(new Error("Couldn't process that image."))),
"image/jpeg",
0.9
);
});
return blob;
}
// ── Modal shell ─────────────────────────────────────────────────────────────
function Modal({ open, onClose, children, size = "lg" }) {
React.useEffect(() => {
if (!open) return undefined;
const onKey = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
return () => {
window.removeEventListener("keydown", onKey);
document.body.style.overflow = "";
};
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()}>
{children}
);
}
// ── FlightDetail ────────────────────────────────────────────────────────────
function FlightDetailModal({ flight, onClose, now, onEdit, onDeleted, allFlights, onAddReturn, onDismissReturn }) {
const [deleting, setDeleting] = React.useState(false);
const [deleteError, setDeleteError] = React.useState(null);
React.useEffect(() => { setDeleting(false); setDeleteError(null); }, [flight?.id]);
if (!flight) return null;
const isJourney = Array.isArray(flight.legs) && flight.legs.length > 1;
const legs = isJourney ? flight.legs : [flight];
const firstLeg = legs[0], lastLeg = legs[legs.length - 1];
const status = isJourney ? window.MGData.journeyStatus(legs, now) : _flightStatus(flight, now);
const mode = _modeOf(firstLeg);
const isFlight = mode === "flight";
const meta = _modeMeta(firstLeg);
const from = { ..._airport(firstLeg.from), code: firstLeg.from };
const to = { ..._airport(lastLeg.to), code: lastLeg.to };
const travelers = firstLeg.travelers.map(_familyById).filter(Boolean);
const noReturn = allFlights && !lastLeg.returnDismissed && !_hasLoggedReturn(lastLeg, allFlights) && !window.MGData.isHomeArrival(lastLeg);
const airborneLeg = isJourney ? legs.find((l) => _flightStatus(l, now) === "airborne") : flight;
// The leg currently underway during a layover — i.e. which gap in the
// chain "now" falls into — so the detail panel can name the right city.
const layoverIdx = isJourney ? legs.findIndex((l, i) => i < legs.length - 1 && now >= window.MGData.flightRealArrive(l) && now < window.MGData.flightRealDepart(legs[i + 1])) : -1;
const handleAddReturn = () => onAddReturn({ from: from.code, to: to.code, travelers: firstLeg.travelers, mode });
const handleDelete = () => {
const label = isJourney ? `this trip (${from.code} → ${to.code}, ${legs.length} legs)` : `this trip (${flight.from} → ${flight.to})`;
if (!window.confirm(`Delete ${label}? This can't be undone.`)) return;
setDeleting(true);
setDeleteError(null);
Promise.all(legs.map((l) =>
withTimeout(window.supabaseClient.functions.invoke("delete-flight", { body: { flightId: l.id } }), 15000, "Deleting")
)).then(async (results) => {
setDeleting(false);
const failed = results.find(({ data, error }) => error || !data || !data.ok);
if (failed) {
const message = (failed.data && failed.data.error) || await readFunctionError(failed.error) || "Couldn't delete this trip — mind trying again?";
setDeleteError(message);
return;
}
onDeleted();
onClose();
}).catch((err) => {
setDeleting(false);
setDeleteError(String((err && err.message) || err));
});
};
// FlightAware's per-flight-number page shows whichever instance of that
// number is currently live/most-recent — for a flight booked far ahead,
// that's a *different day's* flight, not this one, which is misleading
// rather than just unavailable. Only offer the link once it's close
// enough to actually be about this flight (within 48h of departure,
// through touchdown) and only when flightAwareUrl actually has a
// FlightAware-recognized ICAO code to build a real link from.
const faUrlFor = (leg) => window.MGData.flightRealDepart(leg).getTime() - now.getTime() <= hours(48) ? _flightAwareUrl(leg) : null;
return (
via {legs.slice(0, -1).map((l) => _airport(l.to).city).join(", ")}
)}
{fmtDateLong(firstLeg.depart)}
{/* Skipped while airborne — FlightProgress right below already
shows this same route, cities, and times moving in real time;
showing both back to back was pure repetition. */}
{status !== "airborne" && (
{fmtDuration(now - window.MGData.flightRealArrive(lastLeg))} ago · arrived {fmtTime(lastLeg.arrive)} {to.tz}
)}
{/* Note from the traveler */}
{firstLeg.note && (
A note from {travelers[0]?.first}
"{firstLeg.note}"
)}
{/* Itinerary details — the same compact Flight/Depart/Arrive/Duration
row the board cards use, once per leg (just one row for a
nonstop flight, so no separate summary line duplicating it). */}
⏱
Layover in {_airport(leg.to).city} — {fmtDuration(window.MGData.flightRealDepart(legs[i + 1]) - window.MGData.flightRealArrive(leg))}
)}
))}
{noReturn && (
)}
{/* Travelers */}
Who's on this flight
{travelers.map((p) => (
{p.first} {p.last}
{p.role &&
{p.role}
}
))}
{/* Manage */}
{deleteError &&
{deleteError}
}
{isJourney ? (
legs.map((leg, i) => (
))
) : (
)}
);
}
// ── AddTrip modal ───────────────────────────────────────────────────────────
// One screen: the upload button, the paste-toggle, and the review/edit form
// are all visible together from the moment the modal opens — no click-through
// required. Uploading or pasting fills in the same fields live, in place.
const EMPTY_TRIP_FORM = {
travelers: [], airline: "", number: "",
from: "", to: "", date: "", departTime: "", arriveTime: "", arriveNextDay: false, note: "",
};
// Loose name match against the family roster, used to auto-check a traveler
// when parse-flight returns a passenger_name — only acts on a confident hit,
// leaves it alone otherwise so nobody's silently mis-tagged.
function matchTravelerByName(name) {
if (!name) return null;
const norm = String(name).trim().toLowerCase();
if (!norm) return null;
const hit = _FAM.find((p) => {
const first = p.first.toLowerCase();
const last = p.last.toLowerCase();
const nick = (p.nick || "").toLowerCase();
return norm === first || norm === last || (nick && norm === nick) ||
norm === `${first} ${last}` || norm.includes(`${first} ${last}`) ||
(nick && norm.includes(nick));
});
return hit ? hit.id : null;
}
// One date field drives both depart and arrive by default — fine for most
// trips, wrong for anything that lands the next calendar day (any real
// long-haul: JFK–BOM, PHL–LHR overnight, etc.), which would otherwise store
// an arrival that's earlier in real terms than its own departure. The
// "Arrives next day" checkbox is what fixes that on the form side; this is
// where it actually gets applied when building the timestamps to save.
function addOneDay(dateStr) {
const d = new Date(`${dateStr}T00:00:00Z`);
d.setUTCDate(d.getUTCDate() + 1);
return d.toISOString().slice(0, 10);
}
function buildDepartArrive(date, departTime, arriveTime, arriveNextDay) {
const departAt = new Date(`${date}T${departTime}:00Z`);
// Arrival is optional (mainly for train/car, where it's often not known
// upfront) — default to 2 hours out so status still has a valid window.
if (!arriveTime) return { departAt, arriveAt: new Date(departAt.getTime() + 2 * 60 * 60 * 1000) };
const arriveAt = new Date(`${arriveNextDay ? addOneDay(date) : date}T${arriveTime}:00Z`);
return { departAt, arriveAt };
}
// UTC-getters because the app deliberately stores clock digits "as if" UTC
// (see fmtTime elsewhere) rather than doing real timezone conversion — same
// convention applied in reverse here to prefill the form from a saved flight.
function dateToFormFields(d) {
const pad = (n) => String(n).padStart(2, "0");
return {
date: `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}`,
time: `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`,
};
}
// Combobox display: a known airport shows as "City (CODE)" so the code is
// context, not the thing you have to know — free-typed cities or codes we
// don't recognize just pass through unchanged. placeCode reverses it back
// to a bare code at submit time (or passes the text through as-is for
// anything that was never a recognized airport, matching how the backend
// already accepts a free-text place for those).
function placeDisplay(value) {
if (!value) return "";
const a = _AP[String(value).toUpperCase()];
return a ? `${a.city} (${value.toUpperCase()})` : value;
}
function placeCode(value) {
if (!value) return value;
const m = String(value).trim().match(/\(([A-Za-z0-9]{2,4})\)\s*$/);
return m ? m[1].toUpperCase() : value.trim();
}
const EMPTY_LEG_FORM = {
airline: "", number: "", from: "", to: "", date: "", departTime: "", arriveTime: "", arriveNextDay: false,
};
// One "second leg" — used identically for the connecting-flight leg and the
// round-trip return leg, so both get the exact same upload/paste/manual-entry
// experience instead of two half-built copies of it. Each call is an
// independent set of hooks (this is just a plain function returning an
// object, not a component), so AddTripModal can hold two of these side by
// side with no conflict.
function useLegForm() {
const [form, setForm] = React.useState(EMPTY_LEG_FORM);
const [pasteOpen, setPasteOpen] = React.useState(false);
const [pasteText, setPasteText] = React.useState("");
const [parsing, setParsing] = React.useState(false);
const [parsed, setParsed] = React.useState(null);
const [error, setError] = React.useState(null);
const [uploading, setUploading] = React.useState(false);
// Just tracks *whether* this leg came from a photo upload (vs. paste/typed)
// for the "source" field — the image itself is never kept anywhere past
// the parse-flight request, so there's no path to remember.
const [uploaded, setUploaded] = React.useState(false);
const applyParsed = (p) => {
setForm((l) => ({
...l,
airline: (p.airline_code || l.airline || "").toUpperCase(),
number: p.flight_number || l.number,
from: p.from_airport ? placeDisplay(p.from_airport) : l.from,
to: p.to_airport ? placeDisplay(p.to_airport) : l.to,
date: p.date || l.date,
departTime: p.depart_time || l.departTime,
arriveTime: p.arrive_time || l.arriveTime,
arriveNextDay: p.arrives_next_day ?? l.arriveNextDay,
}));
};
const parseText = () => {
if (!pasteText.trim()) return;
setParsing(true);
setError(null);
withTimeout(window.supabaseClient.functions.invoke("parse-flight", {
body: { text: pasteText },
}), 30000, "Reading").then(async ({ data, error: err }) => {
setParsing(false);
if (err || !data || !data.ok) {
setError((data && data.error) || await readFunctionError(err) || "Couldn't make sense of that — try filling in the fields below instead?");
return;
}
setParsed(data.parsed);
applyParsed(data.parsed);
}).catch((err) => {
setParsing(false);
setError(String((err && err.message) || err));
});
};
const handleFileSelect = (e) => {
const file = e.target.files && e.target.files[0];
e.target.value = "";
if (!file) return;
setUploading(true);
setError(null);
setParsed(null);
resizeImageForUpload(file).then((blob) => {
const reader = new FileReader();
reader.onerror = () => { setUploading(false); setError("Couldn't read that file — try a different one?"); };
reader.onload = () => {
const base64 = String(reader.result).split(",")[1];
withTimeout(window.supabaseClient.functions.invoke("parse-flight", {
body: { image: base64, mediaType: "image/jpeg" },
}), 30000, "Reading").then(async ({ data, error: err }) => {
setUploading(false);
if (err || !data || !data.ok) {
setError((data && data.error) || await readFunctionError(err) || "Couldn't read that image — mind typing the details in below?");
return;
}
setUploaded(true);
setParsed(data.parsed);
applyParsed(data.parsed);
}).catch((err) => {
setUploading(false);
setError(String((err && err.message) || err));
});
};
reader.readAsDataURL(blob);
}).catch((err) => {
setUploading(false);
setError(String((err && err.message) || err));
});
};
const reset = () => {
setForm(EMPTY_LEG_FORM); setPasteOpen(false); setPasteText(""); setParsing(false);
setParsed(null); setError(null); setUploading(false); setUploaded(false);
};
return { form, setForm, pasteOpen, setPasteOpen, pasteText, setPasteText, parsing, parsed, error, uploading, uploaded, parseText, handleFileSelect, reset };
}
// The upload/paste/manual-entry block for one leg — identical UI whether
// it's a connecting flight's second leg or a round trip's return leg.
function LegFields({ leg, idPrefix, title, isFlight, fromPlaceholder, toPlaceholder, fromOptional, toOptional, pasteExample }) {
const f = leg.form;
return (