@wopr-network/platform-ui-core 1.0.0

package/src/components/billing/first-dividend-dialog.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { SparklesIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useCountUp } from "@/hooks/use-count-up";
+import { brandName, storageKey } from "@/lib/brand-config";
+import { formatCreditStandard } from "@/lib/format-credit";
+
+const STORAGE_KEY = storageKey("first_dividend_seen");
+
+interface FirstDividendDialogProps {
+  todayAmountCents: number;
+}
+
+export function FirstDividendDialog({ todayAmountCents }: FirstDividendDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [glowActive, setGlowActive] = useState(false);
+  const animatedAmount = useCountUp(open ? todayAmountCents / 100 : 0, 800);
+
+  useEffect(() => {
+    if (todayAmountCents <= 0) return;
+    const seen = localStorage.getItem(STORAGE_KEY);
+    if (!seen) {
+      setOpen(true);
+    }
+  }, [todayAmountCents]);
+
+  // Single border glow pulse 200ms after open
+  useEffect(() => {
+    if (!open) return;
+    const timer = setTimeout(() => setGlowActive(true), 200);
+    return () => clearTimeout(timer);
+  }, [open]);
+
+  function handleDismiss() {
+    localStorage.setItem(STORAGE_KEY, "true");
+    setOpen(false);
+  }
+
+  if (todayAmountCents <= 0) return null;
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(v) => {
+        if (!v) handleDismiss();
+      }}
+    >
+      <DialogContent className="sm:max-w-md text-center" showCloseButton={false}>
+        <motion.div
+          animate={
+            glowActive
+              ? {
+                  boxShadow: [
+                    "0 0 0 0 rgba(0, 255, 65, 0)",
+                    "0 0 15px 4px rgba(0, 255, 65, 0.2)",
+                    "0 0 0 0 rgba(0, 255, 65, 0)",
+                  ],
+                }
+              : {}
+          }
+          transition={{ duration: 1.5, times: [0, 0.5, 1] }}
+          className="contents"
+        >
+          <DialogHeader className="items-center">
+            <motion.div
+              initial={{ scale: 0, rotate: -180 }}
+              animate={{ scale: 1, rotate: 0 }}
+              transition={{
+                type: "spring",
+                stiffness: 200,
+                damping: 15,
+                delay: 0.1,
+              }}
+            >
+              <SparklesIcon
+                className="size-12 text-terminal mx-auto mb-2"
+                style={{ filter: "drop-shadow(0 0 20px rgba(0, 255, 65, 0.4))" }}
+              />
+            </motion.div>
+            <DialogTitle className="text-2xl">
+              {brandName()} just paid you{" "}
+              <span className="font-mono tabular-nums">{formatCreditStandard(animatedAmount)}</span>
+            </DialogTitle>
+            <DialogDescription>
+              This is your community dividend &mdash; a share of the platform&apos;s daily margin,
+              distributed equally to all active users. Stay active to keep earning.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="justify-center sm:justify-center">
+            <Button variant="terminal" onClick={handleDismiss}>
+              Nice.
+            </Button>
+          </DialogFooter>
+        </motion.div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/billing/low-balance-banner.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import Link from "next/link";
+import { Banner } from "@/components/ui/banner";
+
+interface LowBalanceBannerProps {
+  balance: number;
+  runway: number | null;
+  global?: boolean;
+}
+
+export function LowBalanceBanner({ balance, runway, global }: LowBalanceBannerProps) {
+  if (balance > 2) return null;
+
+  if (balance === 0) {
+    return (
+      <Banner variant="destructive" role="alert" className="animate-gentle-pulse">
+        <span className="flex-1">Bots suspended — buy credits to reactivate</span>
+        <Link href="/billing/credits" className="font-semibold underline underline-offset-4">
+          Buy credits
+        </Link>
+      </Banner>
+    );
+  }
+
+  if (balance < 1) {
+    return (
+      <Banner variant="destructive" role="alert" className="animate-gentle-pulse">
+        <span className="flex-1">Credits critically low — buy now to avoid suspension</span>
+        <Link href="/billing/credits" className="font-semibold underline underline-offset-4">
+          Buy credits
+        </Link>
+      </Banner>
+    );
+  }
+
+  // Balance $1.00 - $2.00: only show on credits page (not global)
+  if (global) return null;
+
+  const daysText = runway !== null ? `~${runway} day${runway === 1 ? "" : "s"} left` : "low";
+
+  return (
+    <Banner variant="warning" role="alert" className="animate-gentle-pulse">
+      <span className="flex-1">Credits running low — {daysText}</span>
+      <Link href="/billing/credits" className="font-semibold underline underline-offset-4">
+        Top up now
+      </Link>
+    </Banner>
+  );
+}

package/src/components/billing/org-billing-page.tsx

@@ -0,0 +1,360 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Building2, Download } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { AddPaymentMethodDialog } from "@/components/billing/add-payment-method-dialog";
+import { BuyCreditsPanel } from "@/components/billing/buy-credits-panel";
+import { CreditBalance } from "@/components/billing/credit-balance";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { CreditDetailed } from "@/components/ui/credit-detailed";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { formatCreditStandard } from "@/lib/format-credit";
+import type { OrgCreditBalance, OrgMemberUsageRow } from "@/lib/org-billing-api";
+import { getOrgBillingInfo, getOrgCreditBalance, getOrgMemberUsage } from "@/lib/org-billing-api";
+
+const stripeBackendReady = Boolean(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
+
+interface OrgPaymentMethod {
+  id: string;
+  brand: string;
+  last4: string;
+  expiryMonth: number;
+  expiryYear: number;
+  isDefault: boolean;
+}
+
+interface OrgInvoice {
+  id: string;
+  date: string;
+  amount: number;
+  status: string;
+  downloadUrl: string;
+}
+
+interface OrgBillingPageProps {
+  orgId: string;
+  orgName: string;
+  isAdmin: boolean;
+}
+
+const invoiceStatusStyles: Record<string, string> = {
+  paid: "border-primary/25 text-primary",
+  pending: "border-amber-500/25 text-amber-500",
+  failed: "border-destructive/25 text-destructive",
+};
+
+export function OrgBillingPage({ orgId, orgName, isAdmin }: OrgBillingPageProps) {
+  const [balance, setBalance] = useState<OrgCreditBalance | null>(null);
+  const [members, setMembers] = useState<OrgMemberUsageRow[]>([]);
+  const [paymentMethods, setPaymentMethods] = useState<OrgPaymentMethod[]>([]);
+  const [invoices, setInvoices] = useState<OrgInvoice[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showAddPayment, setShowAddPayment] = useState(false);
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [balanceData, usageData, billingData] = await Promise.all([
+        getOrgCreditBalance(orgId),
+        isAdmin ? getOrgMemberUsage(orgId) : Promise.resolve(null),
+        getOrgBillingInfo(orgId),
+      ]);
+      setBalance(balanceData);
+      if (usageData) setMembers(usageData.members);
+      setPaymentMethods(billingData.paymentMethods);
+      setInvoices(billingData.invoices);
+    } catch {
+      setError("Failed to load org billing data.");
+    } finally {
+      setLoading(false);
+    }
+  }, [orgId, isAdmin]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (loading) {
+    return (
+      <div className="max-w-3xl space-y-6">
+        <div className="space-y-2">
+          <Skeleton className="h-7 w-32" />
+          <Skeleton className="h-4 w-56" />
+        </div>
+        <Skeleton className="h-20 w-full rounded-md" />
+        <Skeleton className="h-40 w-full rounded-md" />
+      </div>
+    );
+  }
+
+  if (error || !balance) {
+    return (
+      <div className="flex h-40 flex-col items-center justify-center gap-2 text-muted-foreground">
+        <p>{error ?? "Unable to load org billing."}</p>
+        <Button variant="ghost" size="sm" onClick={load}>
+          Retry
+        </Button>
+      </div>
+    );
+  }
+
+  const sectionDelays = {
+    balance: 0 * 0.1,
+    buyCredits: 1 * 0.1,
+    memberUsage: 2 * 0.1,
+    paymentMethods: isAdmin ? 3 * 0.1 : 1 * 0.1,
+    billingHistory: isAdmin ? 4 * 0.1 : 2 * 0.1,
+  };
+
+  return (
+    <div className="max-w-3xl space-y-6">
+      {/* Org Context Banner */}
+      <motion.div
+        initial={{ opacity: 0, y: -4 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        className="flex items-center gap-2 rounded-md border border-primary/25 bg-primary/5 px-4 py-2"
+      >
+        <Building2 className="h-4 w-4 text-primary" />
+        <p className="text-sm">
+          Viewing org billing for <span className="font-bold">{orgName}</span>
+        </p>
+      </motion.div>
+
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">Org Credits</h1>
+        <p className="text-sm text-muted-foreground">Shared credit pool for {orgName}</p>
+      </div>
+
+      {/* Balance Card */}
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: sectionDelays.balance, ease: "easeOut" }}
+      >
+        <CreditBalance
+          data={{ balance: balance.balance, dailyBurn: balance.dailyBurn, runway: balance.runway }}
+        />
+      </motion.div>
+
+      {/* Buy Credits (admin only) */}
+      {isAdmin && (
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: sectionDelays.buyCredits, ease: "easeOut" }}
+        >
+          <BuyCreditsPanel />
+        </motion.div>
+      )}
+
+      {/* Per-Member Usage (admin only) */}
+      {isAdmin && (
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: sectionDelays.memberUsage, ease: "easeOut" }}
+        >
+          <Card>
+            <CardHeader>
+              <CardTitle>Per-Member Usage</CardTitle>
+              <CardDescription>Credits consumed this billing period</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {members.length === 0 ? (
+                <p className="text-sm text-muted-foreground">
+                  No usage data for this billing period.
+                </p>
+              ) : (
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Member</TableHead>
+                        <TableHead className="text-right">Credits Used</TableHead>
+                        <TableHead className="text-right">Last Active</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {members.map((m, index) => (
+                        <motion.tr
+                          key={m.memberId}
+                          initial={{ opacity: 0, x: -12 }}
+                          animate={{ opacity: 1, x: 0 }}
+                          transition={{
+                            delay: Math.min(index, 20) * 0.05,
+                            duration: 0.3,
+                            ease: "easeOut",
+                          }}
+                          className="border-b transition-colors hover:bg-accent/50"
+                        >
+                          <TableCell>
+                            <div>
+                              <p className="text-sm font-medium text-foreground">{m.name}</p>
+                              <p className="text-xs text-muted-foreground">{m.email}</p>
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-right font-mono text-sm min-w-[7rem]">
+                            <CreditDetailed value={m.creditsConsumed} />
+                          </TableCell>
+                          <TableCell className="text-right text-sm text-muted-foreground">
+                            {m.lastActiveAt ? (
+                              new Date(m.lastActiveAt).toLocaleDateString("en-US", {
+                                month: "short",
+                                day: "numeric",
+                              })
+                            ) : (
+                              <span className="italic text-muted-foreground/60">Never</span>
+                            )}
+                          </TableCell>
+                        </motion.tr>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </motion.div>
+      )}
+
+      {/* Org Payment Methods */}
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: sectionDelays.paymentMethods, ease: "easeOut" }}
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle>Org Payment Methods</CardTitle>
+            <CardDescription>Cards on file for org-level charges</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {paymentMethods.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No payment methods on file.</p>
+            ) : (
+              <div className="space-y-3">
+                {paymentMethods.map((pm) => (
+                  <div
+                    key={pm.id}
+                    className="flex items-center justify-between rounded-md border p-3"
+                  >
+                    <p className="text-sm font-medium font-mono">
+                      **** {pm.last4}
+                      {pm.isDefault && (
+                        <Badge
+                          variant="outline"
+                          className="ml-2 border-primary/25 text-primary text-xs"
+                        >
+                          Default
+                        </Badge>
+                      )}
+                    </p>
+                    {/* Wire to org.orgRemovePaymentMethod tRPC procedure when backend adds it
+                    {isAdmin && (
+                      <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-destructive"
+                        onClick={() => handleDeletePaymentMethod(pm.id)}>
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    )} */}
+                  </div>
+                ))}
+              </div>
+            )}
+            {isAdmin && stripeBackendReady && (
+              <>
+                <Button variant="outline" className="mt-4" onClick={() => setShowAddPayment(true)}>
+                  Add org payment method
+                </Button>
+                <AddPaymentMethodDialog
+                  open={showAddPayment}
+                  onOpenChange={setShowAddPayment}
+                  onSuccess={load}
+                  orgId={orgId}
+                  returnUrl="/billing/credits"
+                />
+              </>
+            )}
+          </CardContent>
+        </Card>
+      </motion.div>
+
+      {/* Billing History */}
+      {invoices.length > 0 && (
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: sectionDelays.billingHistory, ease: "easeOut" }}
+        >
+          <Card>
+            <CardHeader>
+              <CardTitle>Billing History</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Date</TableHead>
+                    <TableHead>Amount</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead className="w-[60px]" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {invoices.map((inv, index) => (
+                    <motion.tr
+                      key={inv.id}
+                      initial={{ opacity: 0, x: -12 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{
+                        delay: Math.min(index, 20) * 0.05,
+                        duration: 0.3,
+                        ease: "easeOut",
+                      }}
+                      className="border-b transition-colors hover:bg-accent/50"
+                    >
+                      <TableCell className="text-sm text-foreground">
+                        {new Date(inv.date).toLocaleDateString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                        })}
+                      </TableCell>
+                      <TableCell className="font-mono text-sm text-foreground">
+                        {formatCreditStandard(inv.amount)}
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline" className={invoiceStatusStyles[inv.status] ?? ""}>
+                          {inv.status}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Button variant="ghost" size="sm" asChild>
+                          <a href={inv.downloadUrl}>
+                            <Download className="h-3.5 w-3.5" />
+                          </a>
+                        </Button>
+                      </TableCell>
+                    </motion.tr>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </motion.div>
+      )}
+    </div>
+  );
+}

package/src/components/billing/suspension-banner.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { DegradedStateBanner } from "@/components/billing/degraded-state-banner";
+import { LowBalanceBanner } from "@/components/billing/low-balance-banner";
+import { Banner } from "@/components/ui/banner";
+import type { BillingUsageSummary } from "@/lib/api";
+import { getBillingUsageSummary, getCreditBalance } from "@/lib/api";
+import { formatCreditStandard } from "@/lib/format-credit";
+
+export function SuspensionBanner() {
+  const [balance, setBalance] = useState<number | null>(null);
+  const [runway, setRunway] = useState<number | null>(null);
+  const [summary, setSummary] = useState<BillingUsageSummary | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      const [data, summaryData] = await Promise.all([
+        getCreditBalance(),
+        getBillingUsageSummary().catch(() => null),
+      ]);
+      setBalance(data.balance);
+      setRunway(data.runway);
+      setSummary(summaryData);
+    } catch {
+      // Non-critical — don't block rendering
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (balance === null) return null;
+
+  return (
+    <>
+      <DegradedStateBanner />
+      <LowBalanceBanner balance={balance} runway={runway} global />
+      {summary && summary.amountDue > 0 && (
+        <Banner variant="warning" role="alert">
+          <span className="flex-1">
+            {formatCreditStandard(summary.amountDue)} due this billing period
+          </span>
+          <Link href="/billing/usage" className="font-semibold underline underline-offset-4">
+            View usage
+          </Link>
+        </Banner>
+      )}
+    </>
+  );
+}