);
}
// In-page confirmation (native confirm dialogs are blocked in some embeds).
let confirmSetter = null;
// opts.titleOnly: show the message as the title, with no body, in a small popup.
// opts.noMessage: just "Are you sure?" and the buttons, in a small popup.
function askConfirm(message, okLabel, opts) {
return new Promise(res => (confirmSetter ? confirmSetter(Object.assign({ message, okLabel: okLabel || "Delete", res }, opts)) : res(true)));
}
function ConfirmHost() {
const [c, setC] = useState(null);
useEffect(() => { confirmSetter = setC; return () => { confirmSetter = null; }; }, []);
if (!c) return null;
const done = v => { c.res(v); setC(null); };
return (
done(false)}
className="confirm" noClose
footer={<>}>
{!c.titleOnly && !c.noMessage &&
{c.message}
}
);
}
// ---------- project sheet ----------
function ProjectSheet({ data, update, project, onClose, toast, onCreated }) {
const [name, setName] = useState(project ? project.name : "");
const [cat, setCat] = useState(project ? project.categoryId || "" : "");
const [rev, setRev] = useState(project && project.revenue !== "" && project.revenue != null ? String(project.revenue) : "");
const [start, setStart] = useState(project ? project.start || "" : "");
const [end, setEnd] = useState(project ? project.end || "" : "");
const timing = project && data.timer && data.timer.projectId === project.id;
// Name and Category are required: a missing one just gets a red border.
const [tried, setTried] = useState(false);
const missName = tried && !name.trim(), missCat = tried && !cat;
function save() {
if (!name.trim() || !cat) { setTried(true); return; }
if (start && end && end < start) { toast("The end date is before the start date"); return; }
const revenue = rev.trim() === "" ? "" : E.num(rev);
if (project) {
update(d => { const p = byId(d.projects, project.id); Object.assign(p, { name: name.trim(), categoryId: cat, revenue, start, end }); });
} else {
const id = uid();
update(d => { d.projects.push({ id, name: name.trim(), categoryId: cat, revenue, start, end, done: false, archived: false, createdAt: new Date().toISOString() }); });
onCreated && onCreated(id);
}
onClose();
}
async function toggleArchive() {
if (!project.archived && !(await askConfirm("", "Archive", { noMessage: true }))) return;
update(d => { byId(d.projects, project.id).archived = !project.archived; });
toast(project.archived ? "Project restored" : "Project archived");
onClose();
}
return (
{project && }
}>
);
}
// ---------- home: project list ----------
// Project order: by start date (earliest first, no date last), then name.
// Projects marked done drop to the bottom in the same order.
function byStart(a, b) {
return (!!a.done - !!b.done) || ((a.start || "9999").localeCompare(b.start || "9999")) || a.name.localeCompare(b.name, undefined, { sensitivity: "base" });
}
// onAdd puts a small + for adding time by hand in the Time worked tile.
// Empty Time worked and Per hour tiles stay blank (a no-break space keeps their height).
function StatTrio({ s, big, onAdd }) {
return (
Worked
{s.seconds ? E.workedText(s.seconds) : "\u00a0"}
{onAdd && }
Revenue
{s.revenue === null ? "–" : money(s.revenue)}
Per hour
{s.rate === null ? "\u00a0" : perHour(s.rate)}
);
}
// A record's category as a capsule in its color, with the type after it.
function RecCat({ data, r }) {
const c = byId(data.workCategories, r.categoryId);
const t = c && r.subId ? byId(c.subs, r.subId) : null;
return <>
{c ? c.name : "No category"}
{t && {t.name}}
;
}
// M/D/YY with no leading zeros, like 9/20/26 (project dates and time records).
function shortDate(value) { const [y, m, d] = value.split("-").map(Number); return `${m}/${d}/${String(y).slice(-2)}`; }
// Start or end date in a project's header.
function DateTile({ label, value }) {
const v = value ? shortDate(value) : "–";
return
{label}{v}
;
}
function ProjectCapsule({ data, update, p, open, selected, onToggle, onSelect, openSheet }) {
const s = E.projectStats(data, p.id);
const recs = useMemo(() => E.sortRecords(E.projectRecords(data, p.id)), [data.records, p.id]);
const cat = byId(data.projectCategories, p.categoryId);
const cats = Object.entries(s.byCat).sort((a, b) => b[1] - a[1]);
const canOpen = recs.length > 0;
open = open && canOpen;
return (
// Clicking anywhere on the card selects it; the top row also opens and closes it,
// but only once it has time recorded.
onSelect(p.id)}>
{/* The whole header toggles; the name is the keyboard-focusable toggle. */}
{ if (canOpen) onToggle(p.id); }}>
{/* Totals show even when collapsed; the breakdown and records only when open. */}
)}
{/* Only the cards scroll; the header and totals stay put. */}
{list.map(p => (
))}
);
}
// ---------- home: stopwatch ----------
// A selected picker pill in its category's color (types use their category's).
function pillStyle(color) {
return color ? { background: color + "24", color: capInk(color), borderColor: color, boxShadow: `inset 0 0 0 0.5px ${color}` } : null;
}
function useTick(on) {
const [, set] = useState(0);
useEffect(() => {
if (!on) return;
const t = setInterval(() => set(x => x + 1), 250);
return () => clearInterval(t);
}, [on]);
}
function Stopwatch({ data, update, selectedId, toast }) {
const t = data.timer;
const running = !!(t && t.startedAt);
useTick(running);
// Category picks before the stopwatch starts live here; after that they live on the timer.
const [draft, setDraft] = useState({ categoryId: "", subId: "" });
// Save pressed without a category: outline and shake the category buttons (a new number reruns the shake).
const [needCat, setNeedCat] = useState(0);
const pillsRef = useRef(null);
const [editing, setEditing] = useState(false);
const projectId = t ? t.projectId : selectedId;
const project = byId(data.projects, projectId);
const secs = E.timerSeconds(t, Date.now());
const c = E.clock(secs);
const pick = t ? { categoryId: t.categoryId || "", subId: t.subId || "" } : draft;
const cat = byId(data.workCategories, pick.categoryId);
const cats = liveOptions(data.workCategories, pick.categoryId);
const subs = cat ? liveOptions(cat.subs, pick.subId) : [];
const disabled = !project || project.archived;
useEffect(() => {
document.title = running ? `${c.h ? c.h + ":" : ""}${c.m}:${c.s} · Business Time` : "Business Time";
});
function setPick(categoryId, subId) {
if (t) update(d => { d.timer.categoryId = categoryId; d.timer.subId = subId; });
else setDraft({ categoryId, subId });
}
function start() {
if (disabled) return;
const now = new Date().toISOString();
update(d => {
if (d.timer) d.timer.startedAt = now;
else d.timer = { projectId: project.id, categoryId: draft.categoryId, subId: draft.subId, elapsed: 0, startedAt: now, date: today() };
});
}
// Set the stopwatch to an entered h:mm; Start or Resume carries on from there.
function setTime(seconds) {
update(d => {
if (d.timer) { d.timer.elapsed = seconds; d.timer.startedAt = null; }
else d.timer = { projectId: project.id, categoryId: draft.categoryId, subId: draft.subId, elapsed: seconds, startedAt: null, date: today() };
});
setEditing(false);
}
function stop() {
const now = Date.now();
update(d => { if (d.timer) { d.timer.elapsed = E.timerSeconds(d.timer, now); d.timer.startedAt = null; } });
}
function save() {
if (!pick.categoryId) {
setNeedCat(n => n + 1);
if (pillsRef.current) pillsRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
return;
}
if (secs < 1) return;
const now = new Date().toISOString();
setNeedCat(0);
update(d => {
const tm = d.timer;
d.records.push({ id: uid(), projectId: tm.projectId, categoryId: tm.categoryId, subId: tm.subId || "", date: tm.date || today(), seconds: secs, source: "timer", createdAt: now, updatedAt: now });
d.timer = null;
});
setDraft({ categoryId: pick.categoryId, subId: pick.subId });
toast(`Saved ${E.workedText(secs)} to ${project ? project.name : "the project"}`);
}
async function discard() {
if (!(await askConfirm("You sure about that?", "Discard", { titleOnly: true }))) return;
setNeedCat(0);
update(d => { d.timer = null; });
}
return (
{/* Always present (blank with no project) so the card keeps its size. */}
{project ? project.name : "\u00a0"}
{/* While running, Delphinus drifts across the sky every so often (like the leaping dolphin). */}
{/* MM:SS until an hour has passed, then H:MM:SS. */}
{c.h && <>{c.h}:}
{c.m}:{c.s}
{project && project.archived && !t &&
This project is archived. Restore it to track more time.
}
{/* Start (Resume once paused) and Stop, then a smaller centered Save and Discard.
Save and Discard are greyed while running or with nothing to save; without a category it
just marks the Category label red. */}
Category
{cats.map(x => )}
{!cats.length && Add work categories in Setup.}
{subs.length > 0 && <>
Type
{subs.map(x => )}
}
{editing && setEditing(false)} />}
);
}
// Popup for setting the stopwatch's time by hand.
function TimerEdit({ seconds, onSave, onClose }) {
const [v, setV] = useState(seconds ? E.workedText(seconds) : "");
const [tried, setTried] = useState(false);
const secs = E.parseWorked(v);
const bad = tried && secs === null;
const save = () => { if (secs === null) { setTried(true); return; } onSave(secs); };
return (
}>
setV(e.target.value.replace(/[^0-9:.]/g, "").slice(0, 7))} onKeyDown={e => e.key === "Enter" && save()} />
);
}
function HomeView({ data, update, openSheet, toast, selectedId, setSelectedId }) {
return (
);
}
// ---------- admin ----------
// Built to match GDBB's Setup: Categories (one narrow card per kind, a color
// tile, a name you edit in place, a trash button that archives) and
// Types (as in GDBB: pick a work category, add, then chips).
function AddRow({ placeholder, onAdd, label }) {
const [v, setV] = useState("");
const go = () => { const t = v.trim(); if (!t) return; onAdd(t); setV(""); };
return (
{c.subs.filter(s => !s.archived).sort(byName).map(s => (
{editing === s.id ? (
{ const n = e.target.value.trim(); if (n) setSub(c.id, s.id, x => { x.name = n; }); setEditing(null); }}
onKeyDown={e => { if (e.key === "Enter") e.target.blur(); if (e.key === "Escape") setEditing(null); }} />
) : (
)}
))}
))}
{archivedSubs.length > 0 && (
{showArchived && archivedSubs.map(({ s, c }) => (
{s.name} in {c.name}archived {stampDay(s.archivedAt)}
))}
)}
);
}
// Hidden for now (sign out and backup). Render it in AdminView to bring it back.
function AccountCard({ data, session, local, onSignOut }) {
function exportJson() {
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = `business-time-${today()}.json`;
a.click();
setTimeout(() => URL.revokeObjectURL(a.href), 1000);
}
return (
Account
{local ? "Preview mode: saved in this browser only." : <>Signed in as {session && session.user.email}.}
);
}
// ---------- auth ----------
// Same as GDBB's: log in, create an account, or get a reset link. Accounts are
// shared with Plantalog (same Supabase project); a new account starts with the
// default categories and no projects.
function AuthScreen() {
const [mode, setMode] = useState("in"); // in | up | reset
const [email, setEmail] = useState("");
const [pw, setPw] = useState("");
const [msg, setMsg] = useState(null);
const [busy, setBusy] = useState(false);
async function go(e) {
e.preventDefault();
if (!sb()) { setMsg("Can’t reach the server right now."); return; }
setBusy(true); setMsg(null);
try {
if (mode === "in") {
const { error } = await sb().auth.signInWithPassword({ email, password: pw });
if (error) throw error;
} else if (mode === "up") {
const { data, error } = await sb().auth.signUp({ email, password: pw, options: { emailRedirectTo: location.origin + location.pathname } });
if (error) throw error;
if (!data.session) setMsg("Check your email to confirm, then log in.");
} else {
const { error } = await sb().auth.resetPasswordForEmail(email, { redirectTo: location.origin + location.pathname });
if (error) throw error;
setMsg("If that email has an account, a reset link is on its way.");
}
} catch (err) { setMsg(err.message || "Something went wrong."); }
setBusy(false);
}
const to = m => { setMode(m); setMsg(null); };
const title = mode === "in" ? "Log In" : mode === "up" ? "Create Account" : "Reset Password";
return (
Business Time
Delphina Photography
);
}
function NewPasswordSheet({ onClose, toast }) {
const [pw, setPw] = useState("");
return (
}>
setPw(e.target.value)} />
);
}
// ---------- app ----------
// The same rotating loading messages as GDBB, one per load, in order.
const LOADING_MESSAGES = [
"What a cool guy Bacon is...",
"Right this way, Glitter Queen...",
"WHAT IS WRONG WITH ME TODAY?!...",
"I'll have the shrimp tacos...",
"What even is money? ¯\\_(ツ)_/¯...",
"What the hell's that's goin' on out there? POPPERRRRRS...",
"Point for me...",
"Budgeting isn't hard, fucktard...",
];
function App() {
const [loadingMsg] = useState(() => {
const i = (parseInt(safeLS.get("bt-load-msg"), 10) + 1) % LOADING_MESSAGES.length || 0;
safeLS.set("bt-load-msg", String(i));
return LOADING_MESSAGES[i];
});
const [held, setHeld] = useState(true); // keep the loading screen up long enough to read, like GDBB
useEffect(() => { const t = setTimeout(() => setHeld(false), 3000); return () => clearTimeout(t); }, []);
const [phase, setPhase] = useState("loading"); // loading | auth | ready | error
const [session, setSession] = useState(null);
const [local, setLocal] = useState(() => /[?&]local\b/.test(location.search));
const [data, setData] = useState(null);
const [status, setStatus] = useState("saved");
const [conflict, setConflict] = useState(false);
const [tab, setTab] = useState(() => safeLS.get("bt-tab") || "home");
const [sheet, setSheet] = useState(null);
const [selectedId, setSelectedId] = useState(null); // every load starts with no project selected
const [toastMsg, setToastMsg] = useState(null);
const [recovery, setRecovery] = useState(false);
const [err, setErr] = useState(null);
const versionRef = useRef(0);
const dirtyRef = useRef(false);
const timerRef = useRef(null);
const dataRef = useRef(null);
const userRef = useRef(null);
const skipSaveRef = useRef(true);
dataRef.current = data;
const toast = useCallback(m => { setToastMsg(m); clearTimeout(toast.t); toast.t = setTimeout(() => setToastMsg(null), 2600); }, []);
useEffect(() => { safeLS.set("bt-tab", tab); window.scrollTo(0, 0); }, [tab]);
const loadFor = useCallback(async user => {
userRef.current = user;
try {
const r = await Store.loadRemote(user.id);
versionRef.current = r.version; skipSaveRef.current = true; dirtyRef.current = false;
setData(r.data); setPhase("ready"); setStatus("saved");
} catch (e) {
console.error(e);
setErr(e.message || String(e)); setPhase("error");
}
}, []);
// boot
useEffect(() => {
if (local) {
skipSaveRef.current = true;
setData(Store.loadLocal() || defaultData()); setPhase("ready");
return;
}
if (!sb()) { setErr("Couldn’t load the sync library. Check the connection and reload."); setPhase("error"); return; }
sb().auth.getSession().then(({ data: { session } }) => {
setSession(session);
if (session) loadFor(session.user); else setPhase("auth");
});
const { data: sub } = sb().auth.onAuthStateChange((event, s) => {
setSession(s);
if (event === "PASSWORD_RECOVERY") setRecovery(true);
if (event === "SIGNED_IN" && s && (!userRef.current || userRef.current.id !== s.user.id)) { setPhase("loading"); loadFor(s.user); }
if (event === "SIGNED_OUT") { userRef.current = null; setData(null); setPhase("auth"); }
});
return () => sub && sub.subscription && sub.subscription.unsubscribe();
}, [local]);
// save (debounced)
const flush = useCallback(async () => {
clearTimeout(timerRef.current);
const d = dataRef.current;
if (!d || !dirtyRef.current) return;
if (local) { Store.saveLocal(d); dirtyRef.current = false; setStatus("saved"); return; }
if (!userRef.current) return;
setStatus("saving");
try {
const r = await Store.saveRemote(userRef.current.id, d, versionRef.current);
if (r.conflict) { setConflict(true); setStatus("error"); return; }
versionRef.current = r.version;
if (dataRef.current === d) dirtyRef.current = false; else timerRef.current = setTimeout(flush, 400);
setStatus(dirtyRef.current ? "saving" : "saved");
} catch (e) {
console.error(e); setStatus("error");
timerRef.current = setTimeout(flush, 5000);
}
}, [local]);
useEffect(() => {
if (!data) return;
if (skipSaveRef.current) { skipSaveRef.current = false; return; }
dirtyRef.current = true; setStatus("saving");
clearTimeout(timerRef.current);
timerRef.current = setTimeout(flush, 500);
}, [data]);
useEffect(() => {
const onHide = () => { if (document.hidden) flush(); };
const onVisible = async () => {
if (document.hidden || local || !userRef.current || dirtyRef.current) return;
const v = await Store.remoteVersion(userRef.current.id);
if (v && v > versionRef.current) loadFor(userRef.current);
};
const onUnload = e => { if (dirtyRef.current) { flush(); e.preventDefault(); e.returnValue = ""; } };
document.addEventListener("visibilitychange", onHide);
document.addEventListener("visibilitychange", onVisible);
window.addEventListener("beforeunload", onUnload);
return () => { document.removeEventListener("visibilitychange", onHide); document.removeEventListener("visibilitychange", onVisible); window.removeEventListener("beforeunload", onUnload); };
}, [flush, local]);
const update = useCallback(fn => {
setData(prev => { const next = clone(prev); fn(next); return next; });
}, []);
const openSheet = useCallback(s => setSheet(s), []);
const close = useCallback(() => setSheet(null), []);
async function signOut() {
await flush();
if (local) { location.replace(location.pathname); return; }
await sb().auth.signOut();
}
async function resolveConflict(keepMine) {
const v = await Store.remoteVersion(userRef.current.id);
setConflict(false);
if (keepMine) { versionRef.current = v || versionRef.current; dirtyRef.current = true; flush(); }
else loadFor(userRef.current);
}
if (phase === "loading" || held) return
{loadingMsg}
;
if (phase === "auth") return ;
if (phase === "error") return (
Something went wrong loading your projects.
{err}
{!local && }
);
const selProject = byId(data.projects, selectedId);
const sel = data.timer ? data.timer.projectId : selProject ? selectedId : null;
// Picking another project while time is running or unsaved moves that time to it
// (for when the wrong project was picked). Archived projects can't take it.
const pickProject = id => {
setSelectedId(id);
const p = byId(data.projects, id);
if (data.timer && data.timer.projectId !== id && p && !p.archived) update(d => { d.timer.projectId = id; });
};
// On Home, a click anywhere that isn't on a project card, the timer, a control or a popup selects no project.
const deselect = e => {
if (tab === "home" && !e.target.closest(".proj, .watch, button, input, select, a, .overlay, .dp-pop")) pickProject(null);
};
return (
);
}
// If anything crashes while drawing, show a way back instead of a blank page.
// Saved data is untouched; a reload usually fixes it (say, after a half-loaded update).
class CrashGuard extends React.Component {
constructor(props) { super(props); this.state = { err: null }; }
static getDerivedStateFromError(err) { return { err }; }
componentDidCatch(err) { console.error(err); }
render() {
if (!this.state.err) return this.props.children;
return (
Something went wrong on this screen. Your saved work is safe.