/* ================================================================ Lumina Voyages — Admin Panel v2 (CRM Dashboard) ================================================================ */ /* ── Shared primitives ──────────────────────────────────────────── */ function StatCard({ icon, label, value, sub, color = "var(--ocean)", onClick }) { return (
{ if (onClick) { e.currentTarget.style.boxShadow = "var(--sh-md)"; e.currentTarget.style.transform = "translateY(-2px)"; } }} onMouseLeave={e => { e.currentTarget.style.boxShadow = ""; e.currentTarget.style.transform = ""; }}>
{sub && {sub}}
{value}
{label}
); } function ATable({ cols, rows, empty = "No data yet." }) { if (!rows.length) return (
{empty}
); return (
{cols.map((c, i) => )} {rows.map((row, i) => ( e.currentTarget.style.background = "var(--surface-2)"} onMouseLeave={e => e.currentTarget.style.background = ""}> {row} ))}
{c}
); } function TD({ children, style }) { return {children}; } function StatusBadge({ status }) { const map = { active: { bg: "var(--ocean-tint)", color: "var(--ocean-deep)", label: "Active" }, draft: { bg: "var(--sand)", color: "oklch(0.46 0.06 78)", label: "Draft" }, hidden: { bg: "var(--hairline)", color: "var(--ink-3)", label: "Hidden" }, new: { bg: "var(--coral-soft)", color: "var(--coral-deep)", label: "New" }, contacted: { bg: "var(--ocean-tint)", color: "var(--ocean-deep)", label: "Contacted" }, in_progress: { bg: "var(--teal-soft)", color: "oklch(0.38 0.07 200)", label: "In Progress" }, closed: { bg: "var(--surface-2)", color: "var(--ink-3)", label: "Closed" }, confirmed: { bg: "var(--ocean-tint)", color: "var(--ocean-deep)", label: "Confirmed" }, completed: { bg: "var(--teal-soft)", color: "oklch(0.38 0.07 200)", label: "Completed" }, cancelled: { bg: "var(--coral-soft)", color: "var(--coral-deep)", label: "Cancelled" }, pending: { bg: "var(--sand)", color: "oklch(0.46 0.06 78)", label: "Pending" }, }; const s = map[status] || map.draft; return {s.label}; } /* ── SVG Bar Chart ─────────────────────────────────────────────── */ function BarChart({ data, color = "var(--ocean)" }) { if (!data || !data.length) return (
No booking data yet
); const max = Math.max(...data.map(d => d.count), 1); return (
{data.map((d, i) => (
0 ? 8 : 2) + "%", transition: "height 0.8s var(--ease-out)", opacity: 0.85 }} />
{d.label}
))}
); } /* ── Drag & drop image zone ────────────────────────────────────── */ function DropZone({ onFile, uploading, preview, label = "Drop image or click to upload" }) { const [dragging, setDragging] = useState(false); const ref = useRef(null); const handle = (file) => { if (file && file.type.startsWith("image/")) onFile(file); }; return (
{ e.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={e => { e.preventDefault(); setDragging(false); handle(e.dataTransfer.files[0]); }} onClick={() => !uploading && ref.current?.click()} style={{ border: `2px dashed ${dragging ? "var(--ocean)" : "var(--hairline-2)"}`, borderRadius: "var(--r-md)", padding: preview ? "8px" : "28px 16px", textAlign: "center", cursor: uploading ? "wait" : "pointer", background: dragging ? "var(--ocean-tint)" : "var(--bg-2)", transition: "all 0.25s", position: "relative", overflow: "hidden" }}> {preview ? :
{uploading ? "Uploading…" : label}
PNG, JPG, WEBP · max 10 MB
} {preview &&
e.currentTarget.style.background = "oklch(0 0 0 / 0.35)"} onMouseLeave={e => e.currentTarget.style.background = "oklch(0 0 0 / 0)"}> Change image
} handle(e.target.files[0])} />
); } /* ── Tags input ────────────────────────────────────────────────── */ function TagsInput({ value = [], onChange }) { const [input, setInput] = useState(""); const add = () => { const v = input.trim(); if (v && !value.includes(v)) onChange([...value, v]); setInput(""); }; return (
{value.map(t => ( {t} ))}
setInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); add(); } }} placeholder="Add tag, press Enter" style={{ border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-sans)", fontSize: "0.9rem", flex: 1, color: "var(--ink)", minWidth: 100 }} />
); } /* ── List input (included/excluded) ───────────────────────────── */ function ListInput({ value = [], onChange, placeholder }) { const [input, setInput] = useState(""); const add = () => { const v = input.trim(); if (v) { onChange([...value, v]); setInput(""); } }; return (
{value.map((item, i) => (
{item}
))}
setInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); add(); } }} placeholder={placeholder} style={{ border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-sans)", fontSize: "0.88rem", flex: 1, color: "var(--ink)", padding: "4px 6px" }} />
); } /* ══════════════════════════════════════════════════════════════════ DASHBOARD ══════════════════════════════════════════════════════════════════ */ function AdminDashboard({ setTab }) { const [stats, setStats] = useState(null); const [inquiryStats, setInquiryStats] = useState(null); const [recentInquiries, setRecentInquiries] = useState([]); const [chart, setChart] = useState([]); const [loading, setLoading] = useState(true); const [err, setErr] = useState(null); useEffect(() => { if (!SB.ok) { setLoading(false); return; } const safe = (p, fallback) => Promise.race([ p, new Promise(res => setTimeout(() => res(fallback), 7000)) ]).catch(() => fallback); Promise.all([ safe(SB.tours.stats(), null), safe(SB.inquiries.counts(), null), safe(SB.inquiries.all().then(d => d.slice(0, 5)), []), safe(SB.bookings.monthlyCounts(), []), ]).then(([ts, is, ri, mc]) => { if (!ts && !is) { setErr("Database error — run the RLS fix SQL in Supabase SQL Editor (see setup guide)."); } setStats(ts); setInquiryStats(is); setRecentInquiries(ri || []); setChart(mc || []); }).catch(() => setErr("Failed to load — check your Supabase connection.")) .finally(() => setLoading(false)); }, []); if (!SB.ok) return (
Supabase not configured. Add your credentials to supabase.jsx.
); if (err) return (
Database Error

{err}

How to fix 
{`-- Run this in Supabase SQL Editor:
CREATE OR REPLACE FUNCTION public.is_admin()
RETURNS boolean LANGUAGE sql SECURITY DEFINER STABLE AS $$
  SELECT COALESCE((SELECT is_admin FROM public.profiles WHERE id = auth.uid()), false);
$$;

DROP POLICY IF EXISTS "admin read profiles" ON public.profiles;
DROP POLICY IF EXISTS "admin read all profiles" ON public.profiles;
CREATE POLICY "profiles_select" ON public.profiles FOR SELECT
  USING (auth.uid() = id OR public.is_admin());

DROP POLICY IF EXISTS "admin tours" ON public.tours;
CREATE POLICY "admin tours" ON public.tours FOR ALL USING (public.is_admin());

DROP POLICY IF EXISTS "admin all bookings" ON public.bookings;
CREATE POLICY "admin all bookings" ON public.bookings FOR ALL USING (public.is_admin());

DROP POLICY IF EXISTS "admin settings" ON public.site_settings;
CREATE POLICY "admin settings" ON public.site_settings FOR ALL USING (public.is_admin());

DROP POLICY IF EXISTS "Admin manages inquiries" ON public.inquiries;
CREATE POLICY "Admin manages inquiries" ON public.inquiries FOR ALL USING (public.is_admin());`}
); if (loading) return (
{[...Array(6)].map((_, i) =>
)}
); return (
{/* Stats row */}
setTab("tours")} /> setTab("inquiries")} /> setTab("inquiries")} />
{/* Chart + Recent inquiries */}

Monthly Bookings

{!chart.length &&

Bookings will appear here once created

}

Recent Inquiries

{!recentInquiries.length ?
No inquiries yet
:
{recentInquiries.map(inq => (
{(inq.name || "?")[0].toUpperCase()}
{inq.name}
{inq.tour_title || "General inquiry"}
{inq.message}
))}
}
{/* Top tours */} {stats?.topViewed?.length > 0 && (

Most Viewed Tours

{stats.topViewed.map((tour, i) => (
{i + 1}
{tour.title}
{tour.view_count || 0} views
))}
)}
); } function TourField({ label, hint, children }) { return (
{children} {hint && {hint}}
); } /* ══════════════════════════════════════════════════════════════════ TOUR MANAGEMENT ══════════════════════════════════════════════════════════════════ */ function TourEditModal({ tour, onClose, onSaved }) { const isNew = !tour?.id; const toast = useToast(); const blank = { id: "tour-" + Date.now(), title: "", blurb: "", full_description: "", country: "", city: "", region: "", place: "", days: 7, price: "", discount_price: "", old_price: "", category: "luxury", theme: "ocean", difficulty: "Moderate", group_max: 12, group_min: 1, season: "year-round", image_url: "", gallery_urls: [], departure_dates: [], tags_json: [], included_json: [], excluded_json: [], featured: false, popular: false, is_hot: false, status: "active", rating: 5.0, reviews: 0 }; const [form, setForm] = useState(tour ? { ...blank, ...tour, tags_json: tour.tags_json || (tour.tags ? tour.tags : []), included_json: tour.included_json || (tour.included ? tour.included : []), excluded_json: tour.excluded_json || (tour.notIncluded ? tour.notIncluded : []) } : blank); const [uploading, setUploading] = useState(false); const [galUploading, setGalUploading] = useState(false); const [saving, setSaving] = useState(false); const [dateInput, setDateInput] = useState(""); const set = (k) => (v) => setForm(p => ({ ...p, [k]: v })); const setE = (k) => (e) => setForm(p => ({ ...p, [k]: e.target.value })); const uploadMain = async (file) => { setUploading(true); try { const url = await SB.storage.upload(file); set("image_url")(url); toast("Image uploaded!", "check"); } catch(e) { const msg = e.message && e.message.includes("Bucket not found") ? 'Storage bucket missing. Go to Supabase → Storage → New bucket → name it "tour-images" (public).' : "Upload failed: " + e.message; toast(msg, "x"); } setUploading(false); }; const uploadGallery = async (file) => { setGalUploading(true); try { const url = await SB.storage.upload(file); setForm(p => ({ ...p, gallery_urls: [...(p.gallery_urls || []), url] })); toast("Added to gallery!", "check"); } catch(e) { const msg = e.message && e.message.includes("Bucket not found") ? 'Storage bucket missing. Create "tour-images" public bucket in Supabase → Storage.' : "Upload failed: " + e.message; toast(msg, "x"); } setGalUploading(false); }; const removeGallery = (url) => setForm(p => ({ ...p, gallery_urls: p.gallery_urls.filter(u => u !== url) })); const addDate = () => { const v = dateInput.trim(); if (v) { setForm(p => ({ ...p, departure_dates: [...(p.departure_dates || []), v] })); setDateInput(""); } }; const save = async (status = form.status) => { if (!form.title.trim()) { toast("Title is required", "x"); return; } setSaving(true); try { await SB.tours.upsert({ id: form.id, title: form.title, blurb: form.blurb, full_description: form.full_description, country: form.country, city: form.city, region: form.region || form.country || form.city || "", place: form.city && form.country ? `${form.city}, ${form.country}` : (form.place || ""), days: Number(form.days) || 7, price: Number(form.price) || 0, discount_price: form.discount_price ? Number(form.discount_price) : null, old_price: form.old_price ? Number(form.old_price) : null, category: form.category || "luxury", difficulty: form.difficulty || "Moderate", group_max: Number(form.group_max) || 12, season: form.season || "year-round", theme: form.theme || "ocean", image_url: form.image_url || null, gallery_urls: form.gallery_urls || [], departure_dates: form.departure_dates || [], tags_json: form.tags_json || [], included_json: form.included_json || [], excluded_json: form.excluded_json || [], featured: !!form.featured, popular: !!form.popular, is_hot: !!form.is_hot, rating: Number(form.rating) || 5.0, reviews: Number(form.reviews) || 0, status, }); toast(isNew ? "Tour created!" : "Tour saved!", "check"); onSaved(); } catch(e) { toast("Save failed: " + e.message, "x"); } setSaving(false); }; return (
{/* Header */}

{isNew ? "New Tour" : "Edit: " + form.title}

{/* Body */}
{/* Left column */}
{/* Basic info */}

Basic Information

{/* Pricing */}

Pricing

{/* Description */}

Description