@wopr-network/platform-ui-core 1.0.0

package/src/app/admin/accounting/loading.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminAccountingLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+      <div className="rounded-md border">
+        <div className="border-b px-4 py-3">
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </div>
+        <div className="space-y-0">
+          {Array.from({ length: 8 }, (_, n) => `sk-${n}`).map((skId) => (
+            <div key={skId} className="flex items-center gap-4 border-b px-4 py-3 last:border-b-0">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/admin/accounting/page.tsx

@@ -0,0 +1,5 @@
+import { AccountingDashboard } from "@/components/admin/accounting-dashboard";
+
+export default function AdminAccountingPage() {
+  return <AccountingDashboard />;
+}

package/src/app/admin/affiliates/loading.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminAffiliatesLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+      <div className="rounded-md border">
+        <div className="border-b px-4 py-3">
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </div>
+        <div className="space-y-0">
+          {Array.from({ length: 8 }, (_, n) => `sk-${n}`).map((skId) => (
+            <div key={skId} className="flex items-center gap-4 border-b px-4 py-3 last:border-b-0">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/admin/affiliates/page.tsx

@@ -0,0 +1,5 @@
+import { AffiliateDashboard } from "@/components/admin/affiliate-dashboard";
+
+export default function AdminAffiliatesPage() {
+  return <AffiliateDashboard />;
+}

package/src/app/admin/audit/loading.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminAuditLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+      <div className="rounded-md border">
+        <div className="border-b px-4 py-3">
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </div>
+        <div className="space-y-0">
+          {Array.from({ length: 8 }, (_, n) => `sk-${n}`).map((skId) => (
+            <div key={skId} className="flex items-center gap-4 border-b px-4 py-3 last:border-b-0">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/admin/audit/page.tsx

@@ -0,0 +1,5 @@
+import { AuditLogTable } from "@/components/admin/audit-log-table";
+
+export default function AdminAuditPage() {
+  return <AuditLogTable />;
+}

package/src/app/admin/billing-health/loading.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminBillingHealthLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {Array.from({ length: 6 }, (_, i) => `card-sk-${i}`).map((skId) => (
+          <Skeleton key={skId} className="h-32" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/app/admin/billing-health/page.tsx

@@ -0,0 +1,10 @@
+import { BillingHealthDashboard } from "@/components/admin/billing-health-dashboard";
+
+export default function BillingHealthPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-6">Billing Health</h1>
+      <BillingHealthDashboard />
+    </div>
+  );
+}

package/src/app/admin/compliance/page.tsx

@@ -0,0 +1,5 @@
+import { ComplianceDashboard } from "@/components/admin/compliance-dashboard";
+
+export default function AdminCompliancePage() {
+  return <ComplianceDashboard />;
+}

package/src/app/admin/error.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { AlertTriangleIcon, HomeIcon, RefreshCwIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { logger } from "@/lib/logger";
+
+const log = logger("error-boundary:admin");
+
+export default function AdminError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const [showDetails, setShowDetails] = useState(false);
+  const isDev = process.env.NODE_ENV === "development";
+
+  useEffect(() => {
+    log.error("Admin error", error);
+  }, [error]);
+
+  return (
+    <div className="flex h-full items-center justify-center p-6">
+      <Card className="w-full max-w-lg">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <AlertTriangleIcon className="size-6 text-destructive" />
+            <CardTitle className="text-xl">Admin Error</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground">
+            Something went wrong loading the admin panel. This may be a temporary issue.
+          </p>
+          {isDev && (
+            <Button
+              type="button"
+              variant="link"
+              size="sm"
+              onClick={() => setShowDetails((v) => !v)}
+              className="h-auto p-0 text-muted-foreground"
+            >
+              {showDetails ? "Hide" : "Show"} error details
+            </Button>
+          )}
+          {isDev && showDetails && (
+            <pre className="max-h-48 overflow-auto rounded-md border bg-muted p-3 text-xs">
+              {error.message}
+              {error.stack && `\n\n${error.stack}`}
+              {error.digest && `\n\nDigest: ${error.digest}`}
+            </pre>
+          )}
+        </CardContent>
+        <CardFooter className="gap-3">
+          <Button onClick={reset}>
+            <RefreshCwIcon />
+            Try Again
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="/admin">
+              <HomeIcon />
+              Admin Home
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/src/app/admin/gpu/loading.tsx

@@ -0,0 +1,38 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminGpuLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+      <div className="grid grid-cols-4 gap-3">
+        {Array.from({ length: 4 }, (_, n) => `kpi-${n}`).map((id) => (
+          <Skeleton key={id} className="h-24 rounded-sm" />
+        ))}
+      </div>
+      <div className="rounded-sm border">
+        <div className="border-b px-4 py-3">
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </div>
+        <div className="space-y-0">
+          {Array.from({ length: 5 }, (_, n) => `row-${n}`).map((id) => (
+            <div key={id} className="flex items-center gap-4 border-b px-4 py-3 last:border-b-0">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-20" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/admin/gpu/page.tsx

@@ -0,0 +1,5 @@
+import { GpuDashboard } from "@/components/admin/gpu-dashboard";
+
+export default function AdminGpuPage() {
+  return <GpuDashboard />;
+}

package/src/app/admin/incidents/page.tsx

@@ -0,0 +1,10 @@
+import { IncidentDashboard } from "@/components/admin/incident-dashboard";
+
+export default function IncidentsPage() {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-6">Incident Response</h1>
+      <IncidentDashboard />
+    </div>
+  );
+}

package/src/app/admin/inference/loading.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminInferenceLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+      <div className="rounded-md border">
+        <div className="border-b px-4 py-3">
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </div>
+        <div className="space-y-0">
+          {Array.from({ length: 8 }, (_, n) => `sk-${n}`).map((skId) => (
+            <div key={skId} className="flex items-center gap-4 border-b px-4 py-3 last:border-b-0">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/admin/inference/page.tsx

@@ -0,0 +1,5 @@
+import { InferenceDashboard } from "@/components/admin/inference-dashboard";
+
+export default function AdminInferencePage() {
+  return <InferenceDashboard />;
+}

package/src/app/admin/layout.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import { AdminGuard } from "@/components/admin/admin-guard";
+import { AdminNav } from "@/components/admin/admin-nav";
+import { Sidebar } from "@/components/sidebar";
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {/* Desktop only -- admin requires 1024px+ */}
+      <div className="hidden lg:flex h-screen">
+        <Sidebar />
+        <div className="flex flex-1 flex-col overflow-auto">
+          <AdminGuard>
+            <AdminNav />
+            <AnimatePresence mode="wait">
+              <motion.main
+                key={pathname}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+                className="flex-1 overflow-auto"
+              >
+                {children}
+              </motion.main>
+            </AnimatePresence>
+          </AdminGuard>
+        </div>
+      </div>
+
+      {/* Mobile/tablet -- show desktop-required message */}
+      <div className="flex lg:hidden h-screen items-center justify-center p-6">
+        <p className="text-center text-sm text-muted-foreground">
+          Admin panel requires desktop. Minimum width: 1024px.
+        </p>
+      </div>
+    </>
+  );
+}

package/src/app/admin/loading.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+      <div className="rounded-md border">
+        <div className="border-b px-4 py-3">
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </div>
+        <div className="space-y-0">
+          {Array.from({ length: 8 }, (_, n) => `sk-${n}`).map((skId) => (
+            <div key={skId} className="flex items-center gap-4 border-b px-4 py-3 last:border-b-0">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/admin/marketplace/loading.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminMarketplaceLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+      <div className="rounded-md border">
+        <div className="border-b px-4 py-3">
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-28" />
+          </div>
+        </div>
+        <div className="space-y-0">
+          {Array.from({ length: 8 }, (_, n) => `sk-${n}`).map((skId) => (
+            <div key={skId} className="flex items-center gap-4 border-b px-4 py-3 last:border-b-0">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/admin/marketplace/page.tsx

@@ -0,0 +1,5 @@
+import { MarketplaceAdmin } from "@/components/admin/marketplace-admin";
+
+export default function AdminMarketplacePage() {
+  return <MarketplaceAdmin />;
+}

package/src/app/admin/migrations/loading.tsx

@@ -0,0 +1,22 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminMigrationsLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-36" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="rounded-md border">
+        {Array.from({ length: 6 }, (_, i) => `sk-row-${i}`).map((k) => (
+          <div key={k} className="flex items-center gap-4 border-b px-4 py-3 last:border-b-0">
+            <Skeleton className="h-4 w-48" />
+            <Skeleton className="h-5 w-20" />
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-16" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/app/admin/migrations/page.tsx

@@ -0,0 +1,5 @@
+import { MigrationsDashboard } from "@/components/admin/migrations-dashboard";
+
+export default function AdminMigrationsPage() {
+  return <MigrationsDashboard />;
+}

package/src/app/admin/onboarding/loading.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminOnboardingLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-40" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+      <div className="grid grid-cols-4 gap-3">
+        {Array.from({ length: 4 }, (_, i) => `sk-stat-${i}`).map((k) => (
+          <Skeleton key={k} className="h-20 rounded-lg" />
+        ))}
+      </div>
+      <Skeleton className="h-48 rounded-lg" />
+    </div>
+  );
+}

package/src/app/admin/onboarding/page.tsx

@@ -0,0 +1,5 @@
+import { OnboardingDashboard } from "@/components/admin/onboarding-dashboard";
+
+export default function AdminOnboardingPage() {
+  return <OnboardingDashboard />;
+}

package/src/app/admin/promotions/[id]/edit/loading.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminPromotionEditLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <Skeleton className="h-8 w-48" />
+      <div className="max-w-2xl space-y-4">
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-10 w-2/3" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-10 w-32" />
+      </div>
+    </div>
+  );
+}

package/src/app/admin/promotions/[id]/edit/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { PromotionForm } from "@/components/admin/promotions/promotion-form";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { Promotion } from "@/lib/promotions-types";
+import { trpcVanilla } from "@/lib/trpc";
+
+const client = trpcVanilla;
+
+export default function EditPromotionPage() {
+  const { id } = useParams<{ id: string }>();
+  const [promo, setPromo] = useState<Promotion | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await client.promotions.get.query({ id });
+      setPromo(result);
+    } catch {
+      // keep null
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (loading) {
+    return (
+      <div className="p-6 space-y-4">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-64 w-full max-w-2xl" />
+      </div>
+    );
+  }
+
+  if (!promo) {
+    return (
+      <div className="p-6">
+        <p className="text-sm text-muted-foreground">Promotion not found.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold tracking-tight">Edit: {promo.name}</h1>
+      <PromotionForm initialData={promo} />
+    </div>
+  );
+}

package/src/app/admin/promotions/[id]/loading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminPromotionDetailLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <Skeleton className="h-8 w-48" />
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {Array.from({ length: 4 }, (_, i) => `stat-sk-${i}`).map((skId) => (
+          <Skeleton key={skId} className="h-24" />
+        ))}
+      </div>
+      <Skeleton className="h-48" />
+    </div>
+  );
+}