} onClick={submit} disabled={busy}>
{busy ? "Creating…" : "Confirm booking"}
)}
}
>
{step === 1 &&
);
}
/* ====================================================================
ADMIN — WALLETS & PAYOUTS
==================================================================== */
function AdminWallets({ tok }) {
const toast = window.useToast();
const [wallets, setWallets] = React.useState(null);
const [payouts, setPayouts] = React.useState(null);
const [txns, setTxns] = React.useState(null);
const [reloadKey, setReloadKey] = React.useState(0);
const [adjustVendor, setAdjustVendor] = React.useState(null);
const [showPendingOnly, setShowPendingOnly] = React.useState(false);
React.useEffect(() => {
let alive = true;
setWallets(null); setPayouts(null); setTxns(null);
Promise.all([
SB.adminGetVendorWallets(tok),
SB.adminGetAllPayoutRequests(tok),
SB.adminGetTransactions(tok),
]).then(([w, p, t]) => {
if (!alive) return;
setWallets(w || []);
setPayouts(p || []);
setTxns(t || []);
});
return () => { alive = false; };
}, [tok, reloadKey]);
const reload = () => setReloadKey(k => k + 1);
if (wallets === null || payouts === null || txns === null) {
return
;
}
const totalEarnings = wallets.reduce((s, w) => s + Number(w.total_earnings || 0), 0);
const totalBalance = wallets.reduce((s, w) => s + Number(w.balance || 0), 0);
const pending = payouts.filter(p => p.status === "pending");
const approved = payouts.filter(p => p.status === "approved" || p.status === "paid");
const pendingAmount = pending.reduce((s, p) => s + Number(p.amount || 0), 0);
const completedAmt = approved.reduce((s, p) => s + Number(p.amount || 0), 0);
const visiblePayouts = showPendingOnly ? pending : payouts;
const processPayout = async (id, decision) => {
const verb = decision === "approved" ? "approve" : "decline";
if (!confirm(`Are you sure you want to ${verb} this payout?`)) return;
const r = await SB.adminProcessPayout(id, decision, tok);
if (!r.ok) { toast.error(r.message || "Action failed"); return; }
toast.success(`Payout ${decision}`);
reload();
};
// Build a simple 12-week revenue series from transactions
const now = Date.now();
const weekMs = 7 * 24 * 60 * 60 * 1000;
const weekRevenue = Array(12).fill(0);
const weekLabels = [];
for (let i = 11; i >= 0; i--) {
const d = new Date(now - i * weekMs);
weekLabels.push(d.toLocaleDateString("en-US", { month: "short", day: "numeric" }));
}
txns.forEach(t => {
const ageWeeks = Math.floor((now - new Date(t.created_at).getTime()) / weekMs);
if (ageWeeks >= 0 && ageWeeks < 12 && Number(t.amount) > 0) {
weekRevenue[11 - ageWeeks] += Number(t.amount);
}
});
return (
);
}
function AdjustWalletModal({ vendor, onClose, tok, onSaved }) {
const toast = window.useToast();
const [type, setType] = React.useState("credit");
const [amount, setAmount] = React.useState("");
const [notes, setNotes] = React.useState("");
const [busy, setBusy] = React.useState(false);
React.useEffect(() => { if (vendor) { setType("credit"); setAmount(""); setNotes(""); } }, [vendor?.vendor_id]);
if (!vendor) return null;
const submit = async () => {
const amt = parseFloat(amount);
if (!amt || amt <= 0) { toast.error("Amount must be > 0"); return; }
setBusy(true);
try {
const r = await SB.adminAdjustWallet({ vendorId: vendor.vendor_id, amount: amt, type, notes }, tok);
if (!r.ok) { toast.error(r.message || "Adjustment failed"); return; }
onSaved?.();
} finally {
setBusy(false);
}
};
return (
} title={`Adjust wallet — ${vendor.business_name || "—"}`}
subtitle="Manually credit or debit a vendor's wallet. Logged in the transaction ledger."
footer={<>
);
}
/* ====================================================================
ADMIN — SUBSCRIPTIONS
==================================================================== */
function AdminSubscriptions({ tok }) {
const toast = window.useToast();
const [tab, setTab] = React.useState("clients");
const [planFormOpen, setPlanFormOpen] = React.useState(false);
const [editingPlan, setEditingPlan] = React.useState(null);
const [confirmDelete, setConfirmDelete] = React.useState(null);
const [plans, setPlans] = React.useState(null);
const [reloadKey, setReloadKey] = React.useState(0);
React.useEffect(() => {
let alive = true;
setPlans(null);
SB.adminGetPlans(tok).then((p) => { if (alive) setPlans(p || []); });
return () => { alive = false; };
}, [tok, reloadKey]);
const reload = () => setReloadKey(k => k + 1);
if (plans === null) return
;
// audience filter: 'user' plans on clients tab, 'vendor' on vendors tab
const audience = tab === "clients" ? "user" : "vendor";
const visible = plans.filter(p => (p.audience || "user") === audience);
const openNew = () => { setEditingPlan(null); setPlanFormOpen(true); };
const openEdit = (p) => { setEditingPlan(p); setPlanFormOpen(true); };
const togglePlanStatus = async (p) => {
const r = await SB.adminUpdatePlan(p.id, { is_active: !(p.is_active !== false) }, tok);
if (!r.ok) { toast.error(r.message || "Update failed"); return; }
toast.success("Plan updated");
reload();
};
const deletePlan = async () => {
const r = await SB.adminDeletePlan(confirmDelete.id, tok);
if (!r.ok) { toast.error(r.message || "Delete failed"); setConfirmDelete(null); return; }
toast.success("Plan deleted");
setConfirmDelete(null);
reload();
};
const savePlan = async (next) => {
const features = (next.features || "").split("\n").map(f => f.trim()).filter(Boolean);
const payload = {
name: next.name,
price: next.price === "" ? null : parseFloat(next.price),
duration: next.duration,
audience,
features,
};
const r = editingPlan
? await SB.adminUpdatePlan(editingPlan.id, payload, tok)
: await SB.adminCreatePlan(payload, tok);
if (!r.ok) { toast.error(r.message || "Save failed"); return; }
toast.success(editingPlan ? "Plan updated" : "Plan created");
setPlanFormOpen(false);
reload();
};
const activePlans = visible.filter(p => p.is_active !== false);
return (
);
}
function PlanFormModal({ open, plan, audience, onClose, onSave }) {
const [data, setData] = React.useState({ name: "", price: "", duration: "Monthly", features: "" });
React.useEffect(() => {
if (open) setData(plan ? {
name: plan.name, price: plan.price === null ? "" : String(plan.price),
duration: plan.duration || "Monthly",
features: (Array.isArray(plan.features) ? plan.features : (plan.features ? Object.values(plan.features) : [])).join("\n"),
} : { name: "", price: "", duration: "Monthly", features: "" });
}, [open, plan]);
const set = (k, v) => setData(d => ({ ...d, [k]: v }));
const submit = () => {
onSave({
name: data.name || "Untitled",
price: data.price === "" ? null : Number(data.price),
period: "mo",
duration: data.duration,
features: data.features.split("\n").map(s => s.trim()).filter(Boolean),
});
};
return (
} title={plan ? `Edit ${plan.name}` : `Create ${audience === "clients" ? "client" : "vendor"} plan`}
subtitle={plan ? "Changes apply to new subscribers immediately." : "Define pricing, duration, and what's included."}
footer={<>
);
}
/* ====================================================================
STUBS — payments / reports / support / coupons / notifs / settings
==================================================================== */
function AdminPayments({ tok }) {
const [stats, setStats] = React.useState(null);
const [txns, setTxns] = React.useState(null);
const [searchInput, setSearchInput] = React.useState("");
const search = window.useDebounce(searchInput, 250);
const [typeFilter, setTypeFilter] = React.useState("all");
React.useEffect(() => {
let alive = true;
setStats(null); setTxns(null);
Promise.all([SB.adminGetPaymentStats(tok), SB.adminGetTransactions(tok)]).then(([s, t]) => {
if (!alive) return;
setStats(s); setTxns(t || []);
});
}, [tok]);
if (stats === null || txns === null) return
;
// Filter
let filtered = txns;
if (typeFilter !== "all") filtered = filtered.filter(t => t.type === typeFilter);
if (search) {
const q = search.toLowerCase();
filtered = filtered.filter(t =>
((t.reference || "").toLowerCase().includes(q)) ||
((t.type || "").toLowerCase().includes(q)) ||
String(t.amount || "").includes(q)
);
}
const today = new Date(); today.setHours(0,0,0,0);
const todayTxns = txns.filter(t => new Date(t.created_at) >= today);
const captures = txns.filter(t => Number(t.amount) > 0 && (t.status === "completed" || t.status === "captured"));
const captureTotal = captures.reduce((s, t) => s + Number(t.amount), 0);
const todayCaptureTotal = todayTxns.filter(t => Number(t.amount) > 0).reduce((s, t) => s + Number(t.amount), 0);
const successRate = txns.length === 0 ? 100 : (txns.filter(t => t.status === "completed" || t.status === "captured" || t.status === "approved").length / txns.length * 100);
const avgTicket = captures.length ? captureTotal / captures.length : 0;
return (
);
}
function AdminReports({ tok }) {
const [range, setRange] = React.useState("90d");
const [report, setReport] = React.useState(null);
React.useEffect(() => {
let alive = true;
setReport(null);
SB.adminGetReports(tok).then((r) => {
if (!alive) return;
setReport(r);
});
return () => { alive = false; };
}, [tok, range]);
if (!report) return
;
// Build trailing-N labels for charts
const dayLabels = [];
for (let i = 6; i >= 0; i--) {
const d = new Date(Date.now() - i * 24 * 60 * 60 * 1000);
dayLabels.push(d.toLocaleDateString("en-US", { weekday: "short" }));
}
const weekLabels = [];
for (let i = 6; i >= 0; i--) {
const d = new Date(Date.now() - i * 7 * 24 * 60 * 60 * 1000);
weekLabels.push(d.toLocaleDateString("en-US", { month: "short", day: "numeric" }));
}
return (
);
}
function FunnelChart({ steps }) {
const max = steps[0].count;
return (
);
}
function CohortGrid() {
const months = ["Aug", "Sep", "Oct", "Nov", "Dec", "Jan"];
const data = [
[100, 64, 52, 44, 38, 34],
[100, 68, 56, 48, 42, null],
[100, 70, 58, 50, null, null],
[100, 72, 60, null, null, null],
[100, 74, null, null, null, null],
[100, null, null, null, null, null],
];
return (
);
}
function AdminSupport({ tok }) {
const toast = window.useToast();
const [filter, setFilter] = React.useState("all");
const [selected, setSelected] = React.useState(null);
const [tickets, setTickets] = React.useState(null);
const [reloadKey, setReloadKey] = React.useState(0);
React.useEffect(() => {
let alive = true;
setTickets(null);
SB.adminGetTickets(null, tok).then((t) => {
if (!alive) return;
setTickets(t || []);
});
return () => { alive = false; };
}, [tok, reloadKey]);
const reload = () => setReloadKey(k => k + 1);
if (tickets === null) {
return
;
}
// Derived counts
const counts = {
all: tickets.length,
open: tickets.filter(t => t.status === "open").length,
in_progress: tickets.filter(t => t.status === "in_progress").length,
resolved: tickets.filter(t => t.status === "resolved" || t.status === "closed").length,
urgent: tickets.filter(t => t.priority === "urgent").length,
};
// Filter
let filtered = tickets;
if (filter === "open") filtered = tickets.filter(t => t.status === "open");
if (filter === "in_progress") filtered = tickets.filter(t => t.status === "in_progress");
if (filter === "resolved") filtered = tickets.filter(t => t.status === "resolved" || t.status === "closed");
if (filter === "urgent") filtered = tickets.filter(t => t.priority === "urgent");
const priorityTone = (p) => p === "urgent" ? "neg" : p === "high" ? "warn" : p === "low" ? "" : "info";
return (
);
}
function TicketDetail({ ticket, tok, onClose, onChanged }) {
const toast = window.useToast();
const [replies, setReplies] = React.useState([]);
const [body, setBody] = React.useState("");
const [priority, setPriority] = React.useState(ticket.priority || "normal");
const [busy, setBusy] = React.useState(false);
React.useEffect(() => {
setPriority(ticket.priority || "normal");
setBody("");
SB.adminGetTicketReplies(ticket.id, tok).then((r) => setReplies(r || []));
}, [ticket?.id, tok]);
const fromName = ticket.author?.full_name || ticket.user_name || ticket.author?.email || ticket.user_email || "Anonymous";
const fromRole = ticket.author?.role || "user";
const shortId = "TKT-" + (ticket.id || "").slice(0, 8).toUpperCase();
const isResolved = ticket.status === "resolved" || ticket.status === "closed";
const priorityTone = (p) => p === "urgent" ? "neg" : p === "high" ? "warn" : p === "low" ? "" : "info";
const sendReply = async () => {
if (!body.trim()) { toast.error("Type a reply first"); return; }
setBusy(true);
try {
const r = await SB.adminReplyTicket(ticket.id, body.trim(), tok);
if (!r.ok) { toast.error(r.message || "Couldn't send"); return; }
const fresh = await SB.adminGetTicketReplies(ticket.id, tok);
setReplies(fresh || []);
setBody("");
toast.success("Reply sent");
onChanged?.();
} finally {
setBusy(false);
}
};
const updateStatus = async (newStatus) => {
setBusy(true);
try {
const r = await SB.adminUpdateTicketStatus(ticket.id, newStatus, tok);
if (!r.ok) { toast.error(r.message || "Update failed"); return; }
toast.success(newStatus === "resolved" ? "Marked resolved" : "Reopened");
onChanged?.();
onClose();
} finally {
setBusy(false);
}
};
const updatePriority = async (newPriority) => {
setPriority(newPriority);
const r = await SB.adminUpdateTicketPriority(ticket.id, newPriority, tok);
if (!r.ok) { toast.error(r.message || "Update failed"); return; }
toast.success("Priority updated");
onChanged?.();
};
return (
{ticket.subject}
{priority}
{window.statusLabel(ticket.status)}
Priority
updatePriority(e.target.value)} disabled={busy}>
Low
Normal
High
Urgent
Thread · {1 + replies.length} {1 + replies.length === 1 ? "message" : "messages"}
{fromName} · {window.fmtDate(ticket.created_at)}
{ticket.body}
{replies.map((r) => {
const isAdmin = r.author_role === "admin";
const author = r.author?.full_name || r.author?.email || (isAdmin ? "Admin" : "User");
return (
{author}{isAdmin ? " · Admin" : ""} · {window.fmtDate(r.created_at)}
{r.body}
);
})}
{!isResolved && (