2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T12d4,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Building2, Flag, LifeBuoy, ScrollText, type LucideIcon } from "lucide-react"; import { useState } from "react"; import { Toaster } from "@/components/scalar-ui/toast"; import { AdminProvider, useAdmin } from "@/components/scalar-ui/admin-console/admin-ui"; import { CustomersPage } from "@/components/scalar-ui/admin-console/customers"; import { FlagsPage } from "@/components/scalar-ui/admin-console/flags"; import { ImpersonationView } from "@/components/scalar-ui/admin-console/impersonation"; import { StaffLog } from "@/components/scalar-ui/admin-console/staff-log"; import { SupportInbox } from "@/components/scalar-ui/admin-console/support"; import { cn } from "@/lib/utils"; export type AdminPage = "customers" | "support" | "flags" | "log"; const NAV: { id: AdminPage; label: string; icon: LucideIcon; badge?: number }[] = [ { id: "customers", label: "Customers", icon: Building2 }, { id: "support", label: "Support", icon: LifeBuoy, badge: 4 }, { id: "flags", label: "Feature flags", icon: Flag }, { id: "log", label: "Staff log", icon: ScrollText }, ]; function Console({ defaultPage }: { defaultPage: AdminPage }) { const { viewingAs } = useAdmin(); const [page, setPage] = useState(defaultPage); const [customerKey, setCustomerKey] = useState(0); if (viewingAs) return ; return (

N Northwind Back office

{NAV.map(({ id, label, icon: Icon, badge }) => ( ))}

Production Signed in as you · staff

{page === "customers" && } {page === "support" && (setCustomerKey((k) => k + 1), setPage("customers"))} />} {page === "flags" && } {page === "log" && }

); } /** * An internal back office: find customers and act on them with a written reason, view the app as a customer under a * clear banner, work a support queue beside the customer's details, and roll features out with flags. */ export function AdminConsole({ defaultPage = "customers", className }: { defaultPage?: AdminPage; className?: string }) { return (

); } export default AdminConsole; 2e:Taeac,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Building2, Flag, LifeBuoy, ScrollText, type LucideIcon } from "lucide-react";
import { useState } from "react";
import { Toaster } from "@/components/scalar-ui/toast";
import { AdminProvider, useAdmin } from "@/components/scalar-ui/admin-console/admin-ui";
import { CustomersPage } from "@/components/scalar-ui/admin-console/customers";
import { FlagsPage } from "@/components/scalar-ui/admin-console/flags";
import { ImpersonationView } from "@/components/scalar-ui/admin-console/impersonation";
import { StaffLog } from "@/components/scalar-ui/admin-console/staff-log";
import { SupportInbox } from "@/components/scalar-ui/admin-console/support";
import { cn } from "@/lib/utils";

export type AdminPage = "customers" | "support" | "flags" | "log";

const NAV: { id: AdminPage; label: string; icon: LucideIcon; badge?: number }[] = [
  { id: "customers", label: "Customers", icon: Building2 },
  { id: "support", label: "Support", icon: LifeBuoy, badge: 4 },
  { id: "flags", label: "Feature flags", icon: Flag },
  { id: "log", label: "Staff log", icon: ScrollText },
];

function Console({ defaultPage }: { defaultPage: AdminPage }) {
  const { viewingAs } = useAdmin();
  const [page, setPage] = useState<AdminPage>(defaultPage);
  const [customerKey, setCustomerKey] = useState(0);
  if (viewingAs) return <ImpersonationView />;
  return (
    <div className="@container flex h-full w-full bg-white dark:bg-neutral-950">
      <nav aria-label="Admin" className="flex w-[64px] shrink-0 flex-col items-center gap-1 bg-neutral-950 py-3 @[860px]:w-[200px] @[860px]:items-stretch @[860px]:px-3 dark:bg-black">
        <div className="mb-4 flex items-center gap-2 px-1 text-white">
          <span className="flex size-8 shrink-0 items-center justify-center rounded-[9px] bg-white text-[13px] font-bold text-neutral-950">N</span>
          <span className="hidden min-w-0 @[860px]:block">
            <span className="block text-[13px] font-semibold">Northwind</span>
            <span className="block text-[11px] text-white/50">Back office</span>
          </span>
        </div>
        {NAV.map(({ id, label, icon: Icon, badge }) => (
          <button key={id} type="button" onClick={() => setPage(id)} aria-current={page === id ? "page" : undefined} title={label} className={cn("relative flex h-9 items-center justify-center gap-2.5 rounded-[9px] px-2 text-[13px] outline-none transition-colors @[860px]:justify-start", page === id ? "bg-white/[0.12] font-medium text-white" : "text-white/60 hover:bg-white/[0.06] hover:text-white focus-visible:bg-white/[0.08]")}>
            <Icon className="size-4 shrink-0" />
            <span className="hidden flex-1 text-left @[860px]:block">{label}</span>
            {badge && <span className="absolute right-1 top-1 rounded-full bg-white px-1 text-[9.5px] font-semibold tabular-nums text-neutral-950 @[860px]:static @[860px]:px-1.5 @[860px]:text-[10.5px]">{badge}</span>}
          </button>
        ))}
        <div className="mt-auto hidden rounded-[10px] bg-white/[0.06] p-2.5 text-[11.5px] text-white/60 @[860px]:block">
          <span className="mb-1 flex items-center gap-1.5 font-medium text-white">
            <span className="size-1.5 rounded-full bg-red-500" />
            Production
          </span>
          Signed in as you · staff
        </div>
      </nav>
      <main className={cn("min-w-0 flex-1", page === "support" ? "flex flex-col p-4" : "overflow-y-auto p-6")}>
        <AnimatePresence mode="wait" initial={false}>
          <motion.div key={page} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} transition={{ type: "spring", bounce: 0, duration: 0.3 }} className={cn(page === "support" ? "flex min-h-0 flex-1 flex-col" : "mx-auto max-w-[980px]")}>
            {page === "customers" && <CustomersPage key={customerKey} />}
            {page === "support" && <SupportInbox onOpenCustomer={() => (setCustomerKey((k) => k + 1), setPage("customers"))} />}
            {page === "flags" && <FlagsPage />}
            {page === "log" && <StaffLog />}
          </motion.div>
        </AnimatePresence>
      </main>
    </div>
  );
}

/**
 * An internal back office: find customers and act on them with a written reason, view the app as a customer under a
 * clear banner, work a support queue beside the customer's details, and roll features out with flags.
 */
export function AdminConsole({ defaultPage = "customers", className }: { defaultPage?: AdminPage; className?: string }) {
  return (
    <AdminProvider>
      <div className={cn("h-full w-full", className)}>
        <Console defaultPage={defaultPage} />
      </div>
      <Toaster position="bottom-right" />
    </AdminProvider>
  );
}

export default AdminConsole;

2f:T1edc,/** Fake back-office data. Replace with your own admin API; every action here should also be written to a staff log. */ export const wait = (ms: number) => new Promise((r) => setTimeout(r, ms)); export type Plan = "Free" | "Pro" | "Business" | "Enterprise"; export type Health = "healthy" | "at-risk" | "churning"; export type Customer = { id: string; name: string; domain: string; plan: Plan; mrr: number; seats: number; seatLimit: number; owner: string; ownerEmail: string; created: string; health: Health; status: "active" | "trial" | "suspended" | "past-due"; trialEnds?: string; credits: number; tint: string }; export const CUSTOMERS: Customer[] = [ { id: "c1", name: "Halcyon Studio", domain: "halcyon.so", plan: "Business", mrr: 2160, seats: 180, seatLimit: 200, owner: "Maya Chen", ownerEmail: "maya@halcyon.so", created: "Mar 2024", health: "healthy", status: "active", credits: 41200, tint: "bg-amber-400 text-amber-950" }, { id: "c2", name: "Pathfinder Labs", domain: "pathfinder.ai", plan: "Enterprise", mrr: 8400, seats: 612, seatLimit: 700, owner: "Ana Souza", ownerEmail: "ana@pathfinder.ai", created: "Nov 2023", health: "healthy", status: "active", credits: 180000, tint: "bg-sky-500 text-white" }, { id: "c3", name: "Fieldnote", domain: "fieldnote.so", plan: "Pro", mrr: 96, seats: 12, seatLimit: 12, owner: "Priya Raman", ownerEmail: "priya@fieldnote.so", created: "Aug 2026", health: "at-risk", status: "past-due", credits: 120, tint: "bg-emerald-500 text-white" }, { id: "c4", name: "Lumen", domain: "lumen.io", plan: "Pro", mrr: 0, seats: 7, seatLimit: 10, owner: "Daniel Okafor", ownerEmail: "daniel@lumen.io", created: "Oct 2026", health: "healthy", status: "trial", trialEnds: "Oct 20", credits: 1800, tint: "bg-violet-500 text-white" }, { id: "c5", name: "Acme Inc.", domain: "acme.com", plan: "Business", mrr: 4320, seats: 360, seatLimit: 400, owner: "Alex Rivera", ownerEmail: "alex@acme.com", created: "Jan 2025", health: "churning", status: "active", credits: 2400, tint: "bg-neutral-800 text-white" }, { id: "c6", name: "Brightside Co", domain: "brightside.co", plan: "Free", mrr: 0, seats: 4, seatLimit: 10, owner: "Lee Wong", ownerEmail: "lee@brightside.co", created: "Sep 2026", health: "healthy", status: "active", credits: 60, tint: "bg-rose-500 text-white" }, { id: "c7", name: "Northwind", domain: "northwind.co", plan: "Business", mrr: 216, seats: 18, seatLimit: 25, owner: "Maya Chen", ownerEmail: "maya@northwind.co", created: "Feb 2026", health: "healthy", status: "active", credits: 580, tint: "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950" }, ]; export type ActivityItem = { when: string; text: string }; export const ACTIVITY: ActivityItem[] = [ { when: "Today 09:41", text: "Owner changed Priya Raman to Admin" }, { when: "Today 08:02", text: "Payment failed: card declined (insufficient funds)" }, { when: "Yesterday", text: "Connected Slack" }, { when: "Oct 9", text: "Invited 3 people" }, { when: "Oct 2", text: "Upgraded from Free to Pro" }, ]; export type Flag = { key: string; name: string; description: string; on: boolean; rollout: number; plans: Plan[]; allow: string[]; updated: string; by: string; history: { when: string; who: string; change: string }[] }; export const FLAGS: Flag[] = [ { key: "recurring-tasks", name: "Recurring tasks", description: "Repeat a task on a schedule.", on: true, rollout: 100, plans: ["Free", "Pro", "Business", "Enterprise"], allow: [], updated: "Oct 9", by: "Jon Park", history: [{ when: "Oct 9", who: "Jon Park", change: "Rollout 50% → 100%" }, { when: "Oct 6", who: "Jon Park", change: "Rollout 10% → 50%" }, { when: "Oct 2", who: "Maya Chen", change: "Turned on at 10%" }] }, { key: "ai-summaries", name: "AI summaries", description: "Summarise long threads with one click.", on: true, rollout: 25, plans: ["Business", "Enterprise"], allow: ["halcyon.so"], updated: "Oct 11", by: "Priya Raman", history: [{ when: "Oct 11", who: "Priya Raman", change: "Added halcyon.so to allow list" }, { when: "Oct 10", who: "Priya Raman", change: "Turned on at 25%" }] }, { key: "new-editor", name: "New document editor", description: "The rewritten editor with blocks.", on: false, rollout: 0, plans: ["Pro", "Business", "Enterprise"], allow: ["northwind.co"], updated: "Oct 12", by: "Jon Park", history: [{ when: "Oct 12", who: "Jon Park", change: "Kill switch: turned off after error spike" }, { when: "Oct 12", who: "Jon Park", change: "Rollout 5% → 20%" }] }, { key: "csv-import-v2", name: "CSV import v2", description: "Column matching with problem rows.", on: true, rollout: 60, plans: ["Free", "Pro", "Business", "Enterprise"], allow: [], updated: "Oct 8", by: "Sam Rivera", history: [{ when: "Oct 8", who: "Sam Rivera", change: "Rollout 30% → 60%" }] }, ]; export type Message = { from: "customer" | "agent" | "note"; who: string; when: string; text: string }; export type Ticket = { id: string; subject: string; customer: string; requester: string; priority: "urgent" | "high" | "normal" | "low"; status: "open" | "pending" | "solved"; assignee: string | null; updated: string; messages: Message[] }; export const TICKETS: Ticket[] = [ { id: "48213", subject: "Charged twice for October", customer: "c3", requester: "Priya Raman", priority: "high", status: "open", assignee: "You", updated: "12m", messages: [{ from: "customer", who: "Priya Raman", when: "09:20", text: "Hi, we were charged twice this month ($96 each). Can you refund one?" }, { from: "note", who: "Jon Park", when: "09:31", text: "Stripe shows a retry after a failed card plus a manual payment. Second charge is real." }] }, { id: "48207", subject: "SSO login loop with Okta", customer: "c5", requester: "Alex Rivera", priority: "urgent", status: "open", assignee: null, updated: "25m", messages: [{ from: "customer", who: "Alex Rivera", when: "09:05", text: "Since this morning, everyone at Acme is stuck in a redirect loop when signing in through Okta. This is blocking 360 people." }] }, { id: "48190", subject: "Can guests use AI summaries?", customer: "c1", requester: "Maya Chen", priority: "low", status: "pending", assignee: "You", updated: "2h", messages: [{ from: "customer", who: "Maya Chen", when: "Yesterday", text: "Do guests get AI summaries too, or only members?" }, { from: "agent", who: "You", when: "Yesterday", text: "Only members for now. I've passed your use case to the team. Would read-only summaries for guests work for you?" }] }, { id: "48177", subject: "Trial extension for pilot", customer: "c4", requester: "Daniel Okafor", priority: "normal", status: "open", assignee: "Sam Rivera", updated: "4h", messages: [{ from: "customer", who: "Daniel Okafor", when: "08:12", text: "Our pilot runs until the end of the month. Could we have two more weeks on the trial?" }] }, ]; export const MACROS = [ { name: "Refund issued", text: "I've refunded the duplicate charge. It should be back on your card in 5–10 business days. Sorry for the trouble!" }, { name: "Need more detail", text: "Thanks for reaching out. Could you share a screenshot and the time it happened, with your time zone? That helps us track it down." }, { name: "Escalated", text: "I've escalated this to our engineers and marked it urgent. I'll update you within the hour." }, ]; export type StaffAction = { when: string; who: string; action: string; target: string; reason: string }; export const STAFF_LOG: StaffAction[] = [ { when: "Today 09:14", who: "Jon Park", action: "Viewed as user", target: "maya@halcyon.so", reason: "Ticket #48190: checking guest permissions" }, { when: "Yesterday 16:40", who: "Sam Rivera", action: "Extended trial 7 days", target: "Lumen", reason: "Sales-approved pilot" }, { when: "Oct 11 11:02", who: "Priya Raman", action: "Issued 5,000 credits", target: "Halcyon Studio", reason: "Outage credit for Oct 10 incident" }, ]; 30:Tfee1,

/** Fake back-office data. Replace with your own admin API; every action here should also be written to a staff log. */

export const wait = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));

export type Plan = "Free" | "Pro" | "Business" | "Enterprise";
export type Health = "healthy" | "at-risk" | "churning";
export type Customer = { id: string; name: string; domain: string; plan: Plan; mrr: number; seats: number; seatLimit: number; owner: string; ownerEmail: string; created: string; health: Health; status: "active" | "trial" | "suspended" | "past-due"; trialEnds?: string; credits: number; tint: string };

export const CUSTOMERS: Customer[] = [
  { id: "c1", name: "Halcyon Studio", domain: "halcyon.so", plan: "Business", mrr: 2160, seats: 180, seatLimit: 200, owner: "Maya Chen", ownerEmail: "maya@halcyon.so", created: "Mar 2024", health: "healthy", status: "active", credits: 41200, tint: "bg-amber-400 text-amber-950" },
  { id: "c2", name: "Pathfinder Labs", domain: "pathfinder.ai", plan: "Enterprise", mrr: 8400, seats: 612, seatLimit: 700, owner: "Ana Souza", ownerEmail: "ana@pathfinder.ai", created: "Nov 2023", health: "healthy", status: "active", credits: 180000, tint: "bg-sky-500 text-white" },
  { id: "c3", name: "Fieldnote", domain: "fieldnote.so", plan: "Pro", mrr: 96, seats: 12, seatLimit: 12, owner: "Priya Raman", ownerEmail: "priya@fieldnote.so", created: "Aug 2026", health: "at-risk", status: "past-due", credits: 120, tint: "bg-emerald-500 text-white" },
  { id: "c4", name: "Lumen", domain: "lumen.io", plan: "Pro", mrr: 0, seats: 7, seatLimit: 10, owner: "Daniel Okafor", ownerEmail: "daniel@lumen.io", created: "Oct 2026", health: "healthy", status: "trial", trialEnds: "Oct 20", credits: 1800, tint: "bg-violet-500 text-white" },
  { id: "c5", name: "Acme Inc.", domain: "acme.com", plan: "Business", mrr: 4320, seats: 360, seatLimit: 400, owner: "Alex Rivera", ownerEmail: "alex@acme.com", created: "Jan 2025", health: "churning", status: "active", credits: 2400, tint: "bg-neutral-800 text-white" },
  { id: "c6", name: "Brightside Co", domain: "brightside.co", plan: "Free", mrr: 0, seats: 4, seatLimit: 10, owner: "Lee Wong", ownerEmail: "lee@brightside.co", created: "Sep 2026", health: "healthy", status: "active", credits: 60, tint: "bg-rose-500 text-white" },
  { id: "c7", name: "Northwind", domain: "northwind.co", plan: "Business", mrr: 216, seats: 18, seatLimit: 25, owner: "Maya Chen", ownerEmail: "maya@northwind.co", created: "Feb 2026", health: "healthy", status: "active", credits: 580, tint: "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950" },
];

export type ActivityItem = { when: string; text: string };
export const ACTIVITY: ActivityItem[] = [
  { when: "Today 09:41", text: "Owner changed Priya Raman to Admin" },
  { when: "Today 08:02", text: "Payment failed: card declined (insufficient funds)" },
  { when: "Yesterday", text: "Connected Slack" },
  { when: "Oct 9", text: "Invited 3 people" },
  { when: "Oct 2", text: "Upgraded from Free to Pro" },
];

export type Flag = { key: string; name: string; description: string; on: boolean; rollout: number; plans: Plan[]; allow: string[]; updated: string; by: string; history: { when: string; who: string; change: string }[] };

export const FLAGS: Flag[] = [
  { key: "recurring-tasks", name: "Recurring tasks", description: "Repeat a task on a schedule.", on: true, rollout: 100, plans: ["Free", "Pro", "Business", "Enterprise"], allow: [], updated: "Oct 9", by: "Jon Park", history: [{ when: "Oct 9", who: "Jon Park", change: "Rollout 50% → 100%" }, { when: "Oct 6", who: "Jon Park", change: "Rollout 10% → 50%" }, { when: "Oct 2", who: "Maya Chen", change: "Turned on at 10%" }] },
  { key: "ai-summaries", name: "AI summaries", description: "Summarise long threads with one click.", on: true, rollout: 25, plans: ["Business", "Enterprise"], allow: ["halcyon.so"], updated: "Oct 11", by: "Priya Raman", history: [{ when: "Oct 11", who: "Priya Raman", change: "Added halcyon.so to allow list" }, { when: "Oct 10", who: "Priya Raman", change: "Turned on at 25%" }] },
  { key: "new-editor", name: "New document editor", description: "The rewritten editor with blocks.", on: false, rollout: 0, plans: ["Pro", "Business", "Enterprise"], allow: ["northwind.co"], updated: "Oct 12", by: "Jon Park", history: [{ when: "Oct 12", who: "Jon Park", change: "Kill switch: turned off after error spike" }, { when: "Oct 12", who: "Jon Park", change: "Rollout 5% → 20%" }] },
  { key: "csv-import-v2", name: "CSV import v2", description: "Column matching with problem rows.", on: true, rollout: 60, plans: ["Free", "Pro", "Business", "Enterprise"], allow: [], updated: "Oct 8", by: "Sam Rivera", history: [{ when: "Oct 8", who: "Sam Rivera", change: "Rollout 30% → 60%" }] },
];

export type Message = { from: "customer" | "agent" | "note"; who: string; when: string; text: string };
export type Ticket = { id: string; subject: string; customer: string; requester: string; priority: "urgent" | "high" | "normal" | "low"; status: "open" | "pending" | "solved"; assignee: string | null; updated: string; messages: Message[] };

export const TICKETS: Ticket[] = [
  { id: "48213", subject: "Charged twice for October", customer: "c3", requester: "Priya Raman", priority: "high", status: "open", assignee: "You", updated: "12m", messages: [{ from: "customer", who: "Priya Raman", when: "09:20", text: "Hi, we were charged twice this month ($96 each). Can you refund one?" }, { from: "note", who: "Jon Park", when: "09:31", text: "Stripe shows a retry after a failed card plus a manual payment. Second charge is real." }] },
  { id: "48207", subject: "SSO login loop with Okta", customer: "c5", requester: "Alex Rivera", priority: "urgent", status: "open", assignee: null, updated: "25m", messages: [{ from: "customer", who: "Alex Rivera", when: "09:05", text: "Since this morning, everyone at Acme is stuck in a redirect loop when signing in through Okta. This is blocking 360 people." }] },
  { id: "48190", subject: "Can guests use AI summaries?", customer: "c1", requester: "Maya Chen", priority: "low", status: "pending", assignee: "You", updated: "2h", messages: [{ from: "customer", who: "Maya Chen", when: "Yesterday", text: "Do guests get AI summaries too, or only members?" }, { from: "agent", who: "You", when: "Yesterday", text: "Only members for now. I've passed your use case to the team. Would read-only summaries for guests work for you?" }] },
  { id: "48177", subject: "Trial extension for pilot", customer: "c4", requester: "Daniel Okafor", priority: "normal", status: "open", assignee: "Sam Rivera", updated: "4h", messages: [{ from: "customer", who: "Daniel Okafor", when: "08:12", text: "Our pilot runs until the end of the month. Could we have two more weeks on the trial?" }] },
];

export const MACROS = [
  { name: "Refund issued", text: "I've refunded the duplicate charge. It should be back on your card in 5–10 business days. Sorry for the trouble!" },
  { name: "Need more detail", text: "Thanks for reaching out. Could you share a screenshot and the time it happened, with your time zone? That helps us track it down." },
  { name: "Escalated", text: "I've escalated this to our engineers and marked it urgent. I'll update you within the hour." },
];

export type StaffAction = { when: string; who: string; action: string; target: string; reason: string };
export const STAFF_LOG: StaffAction[] = [
  { when: "Today 09:14", who: "Jon Park", action: "Viewed as user", target: "maya@halcyon.so", reason: "Ticket #48190: checking guest permissions" },
  { when: "Yesterday 16:40", who: "Sam Rivera", action: "Extended trial 7 days", target: "Lumen", reason: "Sales-approved pilot" },
  { when: "Oct 11 11:02", who: "Priya Raman", action: "Issued 5,000 credits", target: "Halcyon Studio", reason: "Outage credit for Oct 10 incident" },
];

31:T15c0,"use client"; import { createContext, useCallback, useContext, useState, type ReactNode } from "react"; import { Button } from "@/components/scalar-ui/button"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/scalar-ui/dialog"; import { Textarea } from "@/components/scalar-ui/textarea"; import { STAFF_LOG, type Customer, type StaffAction } from "@/components/scalar-ui/admin-console/data"; import { cn } from "@/lib/utils"; type AdminContextValue = { staff: string; log: StaffAction[]; record: (action: string, target: string, reason: string) => void; viewingAs: Customer | null; viewAs: (c: Customer | null) => void; }; export const AdminContext = createContext({ staff: "You", log: [], record: () => {}, viewingAs: null, viewAs: () => {} }); export const useAdmin = () => useContext(AdminContext); /** Holds the staff log and who is being impersonated. Every sensitive action goes through `record`. */ export function AdminProvider({ staff = "You", children }: { staff?: string; children: ReactNode }) { const [log, setLog] = useState(STAFF_LOG); const [viewingAs, setViewingAs] = useState(null); const record = useCallback((action: string, target: string, reason: string) => setLog((l) => [{ when: "Just now", who: staff, action, target, reason }, ...l]), [staff]); return {children}; } export type ReasonRequest = { title: string; description: ReactNode; confirm: string; destructive?: boolean; action: string; target: string; options?: { value: string; label: string }[] }; /** A dialog that won't run a sensitive action until there's a written reason, then records it to the staff log. */ export function useReasonDialog() { const { record } = useAdmin(); const [req, setReq] = useState<(ReasonRequest & { run: (choice?: string) => void }) | null>(null); const [reason, setReason] = useState(""); const [choice, setChoice] = useState(); const ask = useCallback((r: ReasonRequest, run: (choice?: string) => void) => (setReason(""), setChoice(r.options?.[0]?.value), setReq({ ...r, run })), []); const dialog = (

Admin console

Admin console

Support Queue

Feature Flags

View as Customer