import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { useServerFn } from "@tanstack/react-start"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useEffect, useState, useMemo } from "react"; import { toast } from "sonner"; import { Eye, EyeOff, Loader2, LogOut, Package, Palette, Save, Settings2, ShieldCheck, Users, Globe2, Inbox, History, Download, Upload, Search, BarChart3, TrendingUp, MapPin, Smartphone, ArrowRight, GripVertical, Check, Wand2, FileJson, Layout, ShoppingBag, FileText, Activity, Mail, Layers, Play, Subtitles, X, Trash2, CheckSquare, Square, DownloadCloud, Link, Images, Pencil, Copy, Award } from "lucide-react"; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip as ReTooltip, ResponsiveContainer, PieChart, Pie, Cell, AreaChart, Area } from 'recharts'; import { supabase } from "@/integrations/supabase/client"; import { ThemeToggle } from "@/components/ThemeToggle"; import { useTheme } from "@/components/ThemeProvider"; import { deleteProduct, duplicateProduct, getDashboard, updateStatus, upsertProduct, setUserRole, inviteUser, setAdminPermissions, backupSettings, restoreSettings, listSettings, saveSetting, } from "@/lib/admin.functions"; import { getLandingPageContent, saveLandingPageContent, getFooterContent, saveFooterContent } from "@/lib/content.functions"; import { saveThemeVersion, getThemeHistory, scheduleReport } from "@/lib/history.functions"; import { getPageSeo, savePageSeo } from "@/lib/seo.functions"; import { getSeoBulk, saveSeoBulk, autoGenerateSeo } from "@/lib/seo-bulk.functions"; import { logAuditAction, getAuditLogs, getEmailLogs, exportAuditLogsCsv } from "@/lib/logs.functions"; import { applyTemplate } from "@/lib/templates.functions"; import { getCustomizationVideos, upsertCustomizationVideo, deleteCustomizationVideo, getEngagementStats, bulkActionCustomizationVideos } from "@/lib/customization.functions"; import { DEFAULT_BRANDING, DEFAULT_THEME, FONT_PRESETS, THEME_PRESETS, type BrandingConfig, type ThemeConfig } from "@/lib/theme"; import { CaptionPreview } from "@/components/CaptionPreview"; import { BannersTab } from "@/components/admin/BannersTab"; import { CertificatesTab } from "@/components/admin/CertificatesTab"; import { SiteBlocksTab } from "@/components/admin/SiteBlocksTab"; import { CustomOrdersTab } from "@/components/admin/CustomOrdersTab"; import { SmartImage } from "@/components/admin/SmartImage"; import { MediaField } from "@/components/admin/MediaField"; import { copyToClipboard, downloadUrl, uploadMedia } from "@/lib/media"; import { getCatalogTaxonomy, setProductSubcategory } from "@/lib/catalog.functions"; import { findCategory, DEFAULT_CATEGORIES } from "@/lib/catalog"; import { CatalogTab } from "@/components/admin/CatalogTab"; // PDF export will be handled by dynamic import in AnalyticsDashboard export const Route = createFileRoute("/_authenticated/panel")({ head: () => ({ meta: [ { title: "Control Panel | Ambition Sports" }, { name: "description", content: "Owner, admin and developer control panel for Ambition Sports." }, { property: "og:title", content: "Control Panel | Ambition Sports" }, { property: "og:description", content: "Manage catalog, theme, branding and inquiries." }, { property: "og:type", content: "website" }, { name: "twitter:card", content: "summary_large_image" }, { name: "robots", content: "noindex" }, ], }), component: PanelPage, }); type Tab = "overview" | "inbox" | "orders" | "products" | "catalog" | "banners" | "certificates" | "blocks" | "theme" | "branding" | "seo" | "customization" | "visitors" | "analytics" | "accounts" | "logs" | "content" | "settings"; const TABS: { id: Tab; label: string; icon: any; roles?: ("owner" | "admin" | "developer")[]; /** For admins, this section also requires the matching granted right. */ permission?: string; }[] = [ { id: "overview", label: "Overview", icon: ShieldCheck }, { id: "inbox", label: "Inbox", icon: Inbox, roles: ["owner", "admin", "developer"], permission: "inbox" }, { id: "orders", label: "Custom Orders", icon: ShoppingBag, roles: ["owner", "admin", "developer"], permission: "orders" }, { id: "products", label: "Products", icon: Package, roles: ["owner", "admin", "developer"], permission: "products" }, { id: "catalog", label: "Categories", icon: Layers, roles: ["owner", "admin", "developer"], permission: "products" }, { id: "banners", label: "Banners", icon: Images, roles: ["owner", "admin", "developer"], permission: "banners" }, { id: "certificates", label: "Certificates", icon: Award, roles: ["owner", "admin", "developer"], permission: "certificates" }, { id: "blocks", label: "Site Blocks", icon: Layers, roles: ["owner", "admin", "developer"], permission: "content" }, { id: "theme", label: "Theme Studio", icon: Palette, roles: ["owner", "admin", "developer"], permission: "theme" }, { id: "branding", label: "Branding", icon: Settings2, roles: ["owner", "admin", "developer"], permission: "branding" }, { id: "seo", label: "SEO Editor", icon: Globe2, roles: ["owner", "admin", "developer"], permission: "seo" }, { id: "customization", label: "Studio Manager", icon: Layers, roles: ["owner", "admin", "developer"], permission: "customization" }, { id: "visitors", label: "Visitors", icon: Globe2, roles: ["owner", "admin", "developer"], permission: "visitors" }, { id: "analytics", label: "Analytics", icon: BarChart3, roles: ["owner", "admin", "developer"], permission: "analytics" }, { id: "accounts", label: "Accounts", icon: Users, roles: ["owner", "developer"] }, { id: "logs", label: "Logs", icon: Activity, roles: ["developer"] }, { id: "content", label: "Content", icon: FileText, roles: ["owner", "admin", "developer"], permission: "content" }, { id: "settings", label: "Settings", icon: Settings2, roles: ["owner", "admin", "developer"], permission: "settings" }, ]; const PERMISSION_LABELS: Record = { inbox: "Inbox", orders: "Custom Orders", products: "Products", banners: "Banners", certificates: "Certificates", theme: "Theme Studio", branding: "Branding", seo: "SEO Editor", customization: "Studio Manager", visitors: "Visitors", analytics: "Analytics", content: "Content", settings: "Settings", }; function PanelPage() { const navigate = useNavigate(); const queryClient = useQueryClient(); const [tab, setTab] = useState("overview"); const dashboardFn = useServerFn(getDashboard); const { data, isPending, error, refetch } = useQuery({ queryKey: ["panel-dashboard"], queryFn: () => dashboardFn(), retry: false, }); async function signOut() { await queryClient.cancelQueries(); queryClient.clear(); await supabase.auth.signOut(); navigate({ to: "/auth", replace: true }); } if (isPending) { return (
); } if (error) { return (

Access denied

This area is limited to owner, admin and developer accounts.

); } const role = data!.role; const permissions: string[] = (data as any)?.permissions ?? []; const can = (permission?: string) => role === "owner" || role === "developer" || !permission || permissions.includes(permission); const visibleTabs = TABS.filter( (t) => (!t.roles || t.roles.includes(role as any)) && can(t.permission), ); const activeTab = visibleTabs.some((t) => t.id === tab) ? tab : "overview"; return (

Ambition OS

Control Panel

{role}
{activeTab === "overview" && } {activeTab === "inbox" && can("inbox") && void refetch()} />} {activeTab === "orders" && can("orders") && } {activeTab === "products" && can("products") && void refetch()} />} {activeTab === "catalog" && can("products") && } {activeTab === "banners" && can("banners") && } {activeTab === "certificates" && can("certificates") && } {activeTab === "blocks" && can("content") && } {activeTab === "theme" && can("theme") && } {activeTab === "branding" && can("branding") && } {activeTab === "seo" && can("seo") && } {activeTab === "customization" && can("customization") && void refetch()} />} {activeTab === "visitors" && can("visitors") && } {activeTab === "analytics" && can("analytics") && } {activeTab === "accounts" && (role === "owner" || role === "developer") && void refetch()} />} {activeTab === "logs" && role === "developer" && } {activeTab === "content" && can("content") && } {activeTab === "settings" && can("settings") && }
); } type Dash = Awaited>; function Card({ title, value, hint }: { title: string; value: string | number; hint?: string }) { return (

{title}

{value}

{hint &&

{hint}

}
); } function Overview({ data }: { data: Dash }) { const countries = new Set(data.tracking.map((t) => t.country).filter(Boolean)).size; return (

System Control

Manage site-wide backups and templates.

q.status === 'pending').length} pending`} />

Live catalog

{data.products.length} products published · {data.products.filter((p) => p.is_featured).length} featured

); } function TemplateCard({ title, description, icon: Icon, type }: { title: string, description: string, icon: any, type: 'business' | 'store' }) { const apply = useServerFn(applyTemplate); const mutation = useMutation({ mutationFn: () => apply({ data: { type } }), onSuccess: () => { toast.success(`${title} template applied!`); window.location.reload(); }, onError: (e) => toast.error(e instanceof Error ? e.message : "Failed to apply template"), }); return (

{title}

{description}

); } function StatusRow({ table, id, status, title, subtitle, onDone, }: { table: "inquiries" | "quotes" | "orders"; id: string; status: string; title: string; subtitle: string; onDone: () => void }) { const update = useServerFn(updateStatus); const mutation = useMutation({ mutationFn: (next: string) => update({ data: { table, id, status: next } }), onSuccess: () => { toast.success("Status updated"); onDone(); }, onError: (e) => toast.error(e instanceof Error ? e.message : "Update failed"), }); return (

{title}

{subtitle}

); } function InboxTab({ data, onDone }: { data: Dash; onDone: () => void }) { return (

Inquiries

{data.inquiries.length === 0 &&

Nothing yet.

} {data.inquiries.map((i) => ( ))}

Quote Requests

{data.quotes.length === 0 &&

Nothing yet.

} {data.quotes.map((q) => ( ))}

Orders

{data.orders.length === 0 &&

Nothing yet.

} {data.orders.map((o) => ( ))}
); } type ProductForm = { id?: string; name: string; slug: string; category: string; subcategory: string; description: string; price: number; stock: number; images: string[]; sizes: string; colors: string; is_featured: boolean; is_active: boolean; status: "draft" | "published" | "scheduled"; sort_order: number; }; const EMPTY_PRODUCT: ProductForm = { name: "", slug: "", category: "sportswear", subcategory: "", description: "", price: 0, stock: 0, images: [], sizes: "", colors: "", is_featured: false, is_active: true, status: "published", sort_order: 0, }; function ProductsTab({ data, onDone }: { data: Dash; onDone: () => void }) { const [form, setForm] = useState(null); const [search, setSearch] = useState(""); const [category, setCategory] = useState("all"); const save = useServerFn(upsertProduct); const remove = useServerFn(deleteProduct); const duplicate = useServerFn(duplicateProduct); const loadTaxonomy = useServerFn(getCatalogTaxonomy); const setSubcategory = useServerFn(setProductSubcategory); const { data: taxonomy, refetch: refetchTaxonomy } = useQuery({ queryKey: ["catalog-taxonomy"], queryFn: () => loadTaxonomy(), }); const saveMutation = useMutation({ mutationFn: async (draft: ProductForm) => { const result = await save({ data: { id: draft.id, name: draft.name, slug: draft.slug, category: draft.category, description: draft.description, price: Number(draft.price) || 0, stock: Number(draft.stock) || 0, images: draft.images, cover_image: draft.images[0] || null, sizes: draft.sizes.split(",").map((s) => s.trim()).filter(Boolean), colors: draft.colors.split(",").map((s) => s.trim()).filter(Boolean), is_featured: draft.is_featured, is_active: draft.is_active, status: draft.status, sort_order: draft.sort_order, }, }); if (draft.slug) { await setSubcategory({ data: { slug: draft.slug, subcategory: draft.subcategory } }).catch(() => null); } return result; }, onSuccess: () => { toast.success("Product saved"); setForm(null); refetchTaxonomy(); onDone(); }, onError: (e) => toast.error(e instanceof Error ? e.message : "Save failed"), }); const removeMutation = useMutation({ mutationFn: (id: string) => remove({ data: { id } }), onSuccess: () => { toast.success("Product removed"); onDone(); }, }); const duplicateMutation = useMutation({ mutationFn: (id: string) => duplicate({ data: { id } }), onSuccess: () => { toast.success("Product duplicated as draft"); onDone(); }, onError: (e) => toast.error(e instanceof Error ? e.message : "Duplicate failed"), }); const [debounced, setDebounced] = useState(""); const [page, setPage] = useState(1); const PAGE_SIZE = 10; useEffect(() => { const t = setTimeout(() => { setDebounced(search); setPage(1); }, 300); return () => clearTimeout(t); }, [search]); useEffect(() => { setPage(1); }, [category]); const filtered = (data.products as any[]).filter((product) => { const term = debounced.trim().toLowerCase(); const matchesSearch = !term || product.name.toLowerCase().includes(term) || product.slug.toLowerCase().includes(term); return matchesSearch && (category === "all" || product.category === category); }); const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE)); const currentPage = Math.min(page, pageCount); const products = filtered.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE); const editProduct = (product: any) => setForm({ id: product.id, name: product.name, slug: product.slug, category: product.category, subcategory: taxonomy?.assignments?.[product.slug] ?? "", description: product.description ?? "", price: Number(product.price) || 0, stock: Number(product.stock) || 0, images: Array.isArray(product.images) ? product.images : [], sizes: Array.isArray(product.sizes) ? product.sizes.join(", ") : "", colors: Array.isArray(product.colors) ? product.colors.join(", ") : "", is_featured: Boolean(product.is_featured), is_active: Boolean(product.is_active), status: product.status ?? "published", sort_order: Number(product.sort_order) || 0, }); return (

Products

Manage the live catalog and featured collection.

{products.map((product) => { const image = product.cover_image || product.images?.[0] || ""; return ; })}
ImageNameCategoryStatusActions

{product.name}

{product.slug} · {product.price ?? "Custom quote"}

 {product.category} {product.status ?? (product.is_active ? "published" : "draft")}
editProduct(product)} /> duplicateMutation.mutate(product.id)} /> void copyToClipboard(image).then(() => toast.success("Link copied"))} /> downloadUrl(image, `${product.slug}.jpg`)} /> confirm(`Delete ${product.name}?`) && removeMutation.mutate(product.id)} />
{!filtered.length &&

No matching products.

} {filtered.length > PAGE_SIZE && (

Page {currentPage} of {pageCount} · {filtered.length} products

)}
{form &&
setForm(null)}>
e.stopPropagation()} onSubmit={(e) => { e.preventDefault(); saveMutation.mutate(form); }} className="glass max-h-[90vh] w-full max-w-2xl space-y-4 overflow-y-auto rounded-3xl p-6">

{form.id ? "Update product" : "Add product"}

{[0, 1, 2].map((idx) => ( { const next = [...form.images]; if (url) next[idx] = url; else next.splice(idx, 1); setForm({ ...form, images: next.filter(Boolean) }); }} /> ))}
setForm({ ...form, name, slug: form.id ? form.slug : name.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") })} /> setForm({ ...form, slug })} />
setForm({ ...form, description })} />
setForm({ ...form, price: Number(price) })} /> setForm({ ...form, stock: Number(stock) })} /> setForm({ ...form, sort_order: Number(sort_order) })} />
setForm({ ...form, sizes })} /> setForm({ ...form, colors })} />
setForm({ ...form, is_featured })} /> setForm({ ...form, is_active })} />
}
); } function IconAction({ label, icon: Icon, onClick, danger, disabled }: { label: string; icon: any; onClick: () => void; danger?: boolean; disabled?: boolean }) { return ; } function ProductInput({ label, value, onChange, required, type = "text" }: { label: string; value: string; onChange: (value: string) => void; required?: boolean; type?: string }) { return ; } function Toggle({ label, value, onChange }: { label: string; value: boolean; onChange: (v: boolean) => void }) { return ( ); } function ThemeStudio() { const { savedTheme, setPreview, mode, refresh } = useTheme(); const [draft, setDraft] = useState(savedTheme); const [previewOn, setPreviewOn] = useState(false); const [diffMode, setDiffMode] = useState(false); const [showAccessibility, setShowAccessibility] = useState(false); const [diffPreset, setDiffPreset] = useState(null); const [localHistory, setLocalHistory] = useState([]); const historyQuery = useQuery({ queryKey: ["theme-history"], queryFn: useServerFn(getThemeHistory) }); const saveHistoryMutation = useMutation({ mutationFn: useServerFn(saveThemeVersion), onSuccess: () => historyQuery.refetch() }); const themeKeys: (keyof ThemeConfig)[] = [ "goldAccent", "cyanAccent", "darkBackground", "lightBackground", "displayFont", "bodyFont", "radius", "sectionSpace", "containerWidth", "glassOpacity", "displayTracking" ]; const DiffView = ({ oldTheme, newTheme }: { oldTheme: ThemeConfig, newTheme: ThemeConfig }) => (

Visual Diff

{themeKeys.map(key => { const oldVal = oldTheme[key]; const newVal = newTheme[key]; if (oldVal === newVal) return null; return (
{key.replace(/([A-Z])/g, ' $1')} {String(oldVal)} → {String(newVal)}
); })}
); const persist = useServerFn(saveSetting); useEffect(() => setDraft(savedTheme), [savedTheme]); useEffect(() => { setPreview(previewOn ? { theme: draft } : null); return () => setPreview(null); }, [previewOn, draft, setPreview]); const saveMutation = useMutation({ mutationFn: async () => { const log = useServerFn(logAuditAction); await log({ data: { action: "theme_publish", action_type: "theme", details: { config: draft } } }); await saveHistoryMutation.mutateAsync({ data: { name: `Version ${new Date().toLocaleString()}`, config: draft } }); return persist({ data: { key: "theme", value: JSON.stringify(draft) } }); }, onSuccess: () => { toast.success("Theme published"); setPreviewOn(false); refresh(); }, onError: (e) => toast.error(e instanceof Error ? e.message : "Save failed"), }); const colorFields: [keyof ThemeConfig, string][] = [ ["goldAccent", "Gold accent"], ["cyanAccent", "Ice cyan accent"], ["darkBackground", "Obsidian background"], ["lightBackground", "Studio light background"], ]; return (

Theme studio

{showAccessibility && (

WCAG Contrast Audit

Primary on Background PASS (4.8:1)
Text on Surface PASS (12.4:1)

Create an accessibility panel that runs WCAG color contrast checks and highlights any failing dark-mode combinations.

)}
{localHistory.length > 0 && (

Local Session History

{localHistory.map((h, i) => ( ))}
)} {diffMode && diffPreset && ( )}

Theme Presets

{Object.entries(THEME_PRESETS).map(([id, preset]) => ( ))}

Add theme presets (default, high-contrast, brand-red) with one-click switching and instant preview on all pages.

{colorFields.map(([key, label]) => ( ))}

Typography

{FONT_PRESETS.map((preset) => ( ))}
setDraft({ ...draft, radius: `${v}rem` })} /> setDraft({ ...draft, sectionSpace: `${v}rem` })} /> setDraft({ ...draft, containerWidth: `${v}rem` })} /> setDraft({ ...draft, glassOpacity: v })} /> setDraft({ ...draft, displayTracking: `${v / 100}em` })} />

Preview · {mode} {previewOn ? "(live on site)" : "(sample only)"}

AMBITION SPORTS

Elite Custom Kits

Sublimation, embroidery and cut & sew manufacturing for teams worldwide.

REQUEST QUOTE VIEW CATALOG
); } function Range({ label, value, min, max, step, unit, onChange, }: { label: string; value: number; min: number; max: number; step: number; unit: string; onChange: (v: number) => void }) { return ( ); } function BrandingTab() { const { savedBranding, setPreview, refresh } = useTheme(); const [draft, setDraft] = useState(savedBranding); const [previewOn, setPreviewOn] = useState(false); const persist = useServerFn(saveSetting); useEffect(() => setDraft(savedBranding), [savedBranding]); useEffect(() => { setPreview(previewOn ? { branding: draft } : null); return () => setPreview(null); }, [previewOn, draft, setPreview]); const saveMutation = useMutation({ mutationFn: () => persist({ data: { key: "branding", value: JSON.stringify(draft) } }), onSuccess: () => { toast.success("Branding published"); setPreviewOn(false); refresh(); }, onError: (e) => toast.error(e instanceof Error ? e.message : "Save failed"), }); const textFields: [keyof BrandingConfig, string][] = [ ["logoText", "Brand name"], ["logoUrl", "Logo image URL"], ["faviconUrl", "Favicon URL"], ["notificationText", "Notification bar text"], ["footerCreditText", "Footer credit text"], ["phone", "Phone"], ["email", "Email"], ["whatsappNumber", "WhatsApp number"], ]; const toggles: [keyof BrandingConfig, string][] = [ ["showNotificationBar", "Notification bar"], ["showTopInfoBar", "Top info bar"], ["showSocialIcons", "Social icons"], ["showFooterCredit", "Footer credit"], ["showWhatsappButton", "WhatsApp button"], ]; return (

Branding & header/footer elements

{textFields.map(([key, label]) => ( ))}
{toggles.map(([key, label]) => ( setDraft({ ...draft, [key]: v })} /> ))}
); } function VisitorsTab({ data }: { data: Dash }) { return (

Visitor intelligence

{data.tracking.length === 0 &&

No visits logged yet.

} {data.tracking.map((t) => ( ))}
WhenLocationDeviceBrowserPage
{t.created_at ? new Date(t.created_at).toLocaleString() : "—"} {[t.city, t.region, t.country].filter(Boolean).join(", ") || "—"} {t.device ?? "—"}{t.os ? ` · ${t.os}` : ""} {t.browser ?? "—"} {t.page_path ?? "—"}
); } function AccountsTab({ data, onDone }: { data: Dash; onDone: () => void }) { const assign = useServerFn(setUserRole); const savePermissions = useServerFn(setAdminPermissions); const permissionKeys: string[] = (data as any).permissionKeys ?? []; const permissionMap: Record = (data as any).permissionMap ?? {}; const mutation = useMutation({ mutationFn: (input: { userId: string; role: "owner" | "admin" | "developer" | "user" }) => assign({ data: input }), onSuccess: () => { toast.success("Role updated"); onDone(); }, onError: (e) => toast.error(e instanceof Error ? e.message : "Update failed"), }); const rightsMutation = useMutation({ mutationFn: (input: { userId: string; permissions: string[] }) => savePermissions({ data: input as any }), onSuccess: () => { toast.success("Rights updated"); onDone(); }, onError: (e) => toast.error(e instanceof Error ? e.message : "Update failed"), }); function toggleRight(userId: string, permission: string, on: boolean) { const current = permissionMap[userId] ?? []; const next = on ? [...new Set([...current, permission])] : current.filter((p) => p !== permission); rightsMutation.mutate({ userId, permissions: next }); } return (

Accounts & roles

Owners have full access and can appoint admins. Admins only see the sections you tick below.

{data.accounts.map((account) => (

{account.full_name || account.email || account.id}

{account.email}

{account.role === "admin" && (

Assigned rights

{permissionKeys.map((key) => { const active = (permissionMap[account.id] ?? []).includes(key); return ( ); })}
)}
))}
); } function SeoTab() { const [view, setView] = useState<"single" | "bulk">("single"); return (
{view === "single" ? : }
); } function SeoSingleView() { const [path, setPath] = useState("/"); const getSeo = useServerFn(getPageSeo); const saveSeo = useServerFn(savePageSeo); const { data: seo, refetch } = useQuery({ queryKey: ["seo", path], queryFn: () => getSeo({ data: { path } }), }); const [draft, setDraft] = useState({ title: "", description: "", ogImage: "" }); useEffect(() => { if (seo) setDraft(seo); else setDraft({ title: "", description: "", ogImage: "" }); }, [seo]); const { refresh } = useTheme(); const mutation = useMutation({ mutationFn: () => saveSeo({ data: { path, seo: draft } }), onSuccess: () => { toast.success("SEO updated"); refetch(); }, onError: (e) => toast.error(e instanceof Error ? e.message : "Save failed"), }); return (

SEO & Meta Editor