@wopr-network/platform-ui-core 1.24.1 → 1.26.0

package/src/components/admin/products/billing-form.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toUserMessage } from "@/lib/errors";
+
+interface BillingConfig {
+  stripePublishableKey: string | null;
+  creditPrices: Record<string, number>;
+  affiliateBaseUrl: string | null;
+  affiliateMatchRate: string;
+  affiliateMaxCap: number;
+  dividendRate: string;
+}
+
+interface BillingFormProps {
+  initial: BillingConfig;
+  onSave: (endpoint: string, data: unknown) => Promise<void>;
+}
+
+export function BillingForm({ initial, onSave }: BillingFormProps) {
+  const [form, setForm] = useState<BillingConfig>(initial);
+  const [saving, setSaving] = useState(false);
+
+  function setStr(key: keyof BillingConfig, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value || null }));
+  }
+
+  function setRate(key: "affiliateMatchRate" | "dividendRate", value: string) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  function setNum(key: "affiliateMaxCap", value: string) {
+    setForm((prev) => ({ ...prev, [key]: value === "" ? 0 : Number.parseInt(value, 10) }));
+  }
+
+  function setCreditPrice(tier: string, value: string) {
+    const n = Number.parseFloat(value);
+    setForm((prev) => ({
+      ...prev,
+      creditPrices: { ...prev.creditPrices, [tier]: Number.isNaN(n) ? 0 : n },
+    }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave("updateBilling", form);
+      toast.success("Billing settings saved.");
+    } catch (err) {
+      toast.error(toUserMessage(err, "Failed to save billing settings"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const creditTiers = Object.keys(form.creditPrices);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Billing Configuration</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-5">
+        <div className="space-y-1.5">
+          <Label htmlFor="billing-stripeKey">Stripe Publishable Key</Label>
+          <Input
+            id="billing-stripeKey"
+            value={form.stripePublishableKey ?? ""}
+            onChange={(e) => setStr("stripePublishableKey", e.target.value)}
+            placeholder="pk_live_..."
+          />
+          <p className="text-xs text-muted-foreground">Publishable key only — never the secret.</p>
+        </div>
+
+        {creditTiers.length > 0 && (
+          <div className="space-y-3">
+            <p className="text-sm font-medium">Credit Price Tiers</p>
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+              {creditTiers.map((tier) => (
+                <div key={tier} className="space-y-1.5">
+                  <Label htmlFor={`billing-price-${tier}`} className="capitalize">
+                    {tier}
+                  </Label>
+                  <Input
+                    id={`billing-price-${tier}`}
+                    type="number"
+                    step="0.0001"
+                    value={form.creditPrices[tier]}
+                    onChange={(e) => setCreditPrice(tier, e.target.value)}
+                    min={0}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="border-t border-border pt-4 space-y-4">
+          <p className="text-sm font-medium text-muted-foreground">Affiliate &amp; Dividends</p>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="col-span-full space-y-1.5">
+              <Label htmlFor="billing-affiliateUrl">Affiliate Base URL</Label>
+              <Input
+                id="billing-affiliateUrl"
+                value={form.affiliateBaseUrl ?? ""}
+                onChange={(e) => setStr("affiliateBaseUrl", e.target.value)}
+                placeholder="https://wopr.bot/ref"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="billing-matchRate">Affiliate Match Rate</Label>
+              <Input
+                id="billing-matchRate"
+                value={form.affiliateMatchRate}
+                onChange={(e) => setRate("affiliateMatchRate", e.target.value)}
+                placeholder="0.10"
+              />
+              <p className="text-xs text-muted-foreground">Decimal, e.g. 0.10 = 10%</p>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="billing-maxCap">Affiliate Max Cap (credits)</Label>
+              <Input
+                id="billing-maxCap"
+                type="number"
+                value={form.affiliateMaxCap}
+                onChange={(e) => setNum("affiliateMaxCap", e.target.value)}
+                min={0}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="billing-dividendRate">Dividend Rate</Label>
+              <Input
+                id="billing-dividendRate"
+                value={form.dividendRate}
+                onChange={(e) => setRate("dividendRate", e.target.value)}
+                placeholder="0.05"
+              />
+              <p className="text-xs text-muted-foreground">Decimal, e.g. 0.05 = 5%</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-end pt-2">
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Billing"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/admin/products/brand-form.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toUserMessage } from "@/lib/errors";
+
+interface BrandConfig {
+  id: string;
+  slug: string;
+  brandName: string;
+  productName: string;
+  tagline: string;
+  domain: string;
+  appDomain: string;
+  cookieDomain: string;
+  companyLegal: string;
+  priceLabel: string;
+  defaultImage: string;
+  emailSupport: string;
+  emailPrivacy: string;
+  emailLegal: string;
+  fromEmail: string;
+  homePath: string;
+  storagePrefix: string;
+}
+
+interface BrandFormProps {
+  initial: BrandConfig;
+  onSave: (endpoint: string, data: unknown) => Promise<void>;
+}
+
+export function BrandForm({ initial, onSave }: BrandFormProps) {
+  const [form, setForm] = useState<BrandConfig>(initial);
+  const [saving, setSaving] = useState(false);
+
+  function set(key: keyof BrandConfig, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave("updateBrand", form);
+      toast.success("Brand settings saved.");
+    } catch (err) {
+      toast.error(toUserMessage(err, "Failed to save brand settings"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const fields: Array<{ key: keyof BrandConfig; label: string; placeholder?: string }> = [
+    { key: "brandName", label: "Brand Name", placeholder: "WOPR" },
+    { key: "productName", label: "Product Name", placeholder: "WOPR Platform" },
+    { key: "tagline", label: "Tagline", placeholder: "Your AI platform" },
+    { key: "slug", label: "Slug", placeholder: "wopr" },
+    { key: "domain", label: "Domain", placeholder: "wopr.bot" },
+    { key: "appDomain", label: "App Domain", placeholder: "app.wopr.bot" },
+    { key: "cookieDomain", label: "Cookie Domain", placeholder: ".wopr.bot" },
+    { key: "companyLegal", label: "Company Legal Name", placeholder: "WOPR Inc." },
+    { key: "priceLabel", label: "Price Label", placeholder: "credits" },
+    { key: "defaultImage", label: "Default Image URL", placeholder: "/og-image.png" },
+    { key: "emailSupport", label: "Support Email", placeholder: "support@wopr.bot" },
+    { key: "emailPrivacy", label: "Privacy Email", placeholder: "privacy@wopr.bot" },
+    { key: "emailLegal", label: "Legal Email", placeholder: "legal@wopr.bot" },
+    { key: "fromEmail", label: "From Email", placeholder: "noreply@wopr.bot" },
+    { key: "homePath", label: "Home Path", placeholder: "/dashboard" },
+    { key: "storagePrefix", label: "Storage Prefix", placeholder: "wopr" },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Brand Configuration</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {fields.map(({ key, label, placeholder }) => (
+            <div key={key} className="space-y-1.5">
+              <Label htmlFor={`brand-${key}`}>{label}</Label>
+              <Input
+                id={`brand-${key}`}
+                value={form[key]}
+                onChange={(e) => set(key, e.target.value)}
+                placeholder={placeholder}
+              />
+            </div>
+          ))}
+        </div>
+        <div className="flex justify-end pt-2">
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Brand"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/admin/products/features-form.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toUserMessage } from "@/lib/errors";
+
+interface FeaturesConfig {
+  chatEnabled: boolean;
+  onboardingEnabled: boolean;
+  onboardingDefaultModel: string | null;
+  onboardingMaxCredits: number;
+  onboardingWelcomeMsg: string | null;
+  sharedModuleBilling: boolean;
+  sharedModuleMonitoring: boolean;
+  sharedModuleAnalytics: boolean;
+}
+
+interface FeaturesFormProps {
+  initial: FeaturesConfig;
+  onSave: (endpoint: string, data: unknown) => Promise<void>;
+}
+
+export function FeaturesForm({ initial, onSave }: FeaturesFormProps) {
+  const [form, setForm] = useState<FeaturesConfig>(initial);
+  const [saving, setSaving] = useState(false);
+
+  function setBool(key: keyof FeaturesConfig, value: boolean) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  function setStr(key: keyof FeaturesConfig, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value || null }));
+  }
+
+  function setNum(key: keyof FeaturesConfig, value: string) {
+    const n = Number.parseInt(value, 10);
+    if (!Number.isNaN(n)) setForm((prev) => ({ ...prev, [key]: n }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave("updateFeatures", form);
+      toast.success("Feature settings saved.");
+    } catch (err) {
+      toast.error(toUserMessage(err, "Failed to save feature settings"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const boolFields: Array<{ key: keyof FeaturesConfig; label: string }> = [
+    { key: "chatEnabled", label: "Chat Enabled" },
+    { key: "onboardingEnabled", label: "Onboarding Enabled" },
+    { key: "sharedModuleBilling", label: "Shared Module: Billing" },
+    { key: "sharedModuleMonitoring", label: "Shared Module: Monitoring" },
+    { key: "sharedModuleAnalytics", label: "Shared Module: Analytics" },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Feature Flags</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-5">
+        <div className="space-y-3">
+          {boolFields.map(({ key, label }) => (
+            <div key={key} className="flex items-center gap-3">
+              <Checkbox
+                id={`feature-${key}`}
+                checked={Boolean(form[key])}
+                onCheckedChange={(checked) => setBool(key, Boolean(checked))}
+              />
+              <Label htmlFor={`feature-${key}`}>{label}</Label>
+            </div>
+          ))}
+        </div>
+
+        <div className="border-t border-border pt-4 space-y-4">
+          <p className="text-sm font-medium text-muted-foreground">Onboarding</p>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="space-y-1.5">
+              <Label htmlFor="feature-defaultModel">Default Model</Label>
+              <Input
+                id="feature-defaultModel"
+                value={form.onboardingDefaultModel ?? ""}
+                onChange={(e) => setStr("onboardingDefaultModel", e.target.value)}
+                placeholder="claude-3-5-sonnet"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="feature-maxCredits">Max Onboarding Credits</Label>
+              <Input
+                id="feature-maxCredits"
+                type="number"
+                value={form.onboardingMaxCredits}
+                onChange={(e) => setNum("onboardingMaxCredits", e.target.value)}
+                min={0}
+              />
+            </div>
+            <div className="col-span-full space-y-1.5">
+              <Label htmlFor="feature-welcomeMsg">Welcome Message</Label>
+              <Input
+                id="feature-welcomeMsg"
+                value={form.onboardingWelcomeMsg ?? ""}
+                onChange={(e) => setStr("onboardingWelcomeMsg", e.target.value)}
+                placeholder="Welcome to the platform!"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-end pt-2">
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Features"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/admin/products/fleet-form.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { toUserMessage } from "@/lib/errors";
+
+interface FleetConfig {
+  containerImage: string;
+  containerPort: number;
+  lifecycle: string;
+  billingModel: string;
+  maxInstances: number;
+  dockerNetwork: string;
+  placementStrategy: string;
+  fleetDataDir: string;
+}
+
+interface FleetFormProps {
+  initial: FleetConfig;
+  onSave: (endpoint: string, data: unknown) => Promise<void>;
+}
+
+export function FleetForm({ initial, onSave }: FleetFormProps) {
+  const [form, setForm] = useState<FleetConfig>(initial);
+  const [saving, setSaving] = useState(false);
+
+  function setStr(key: keyof FleetConfig, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  function setNum(key: keyof FleetConfig, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value === "" ? 0 : Number.parseInt(value, 10) }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave("updateFleet", form);
+      toast.success("Fleet settings saved.");
+    } catch (err) {
+      toast.error(toUserMessage(err, "Failed to save fleet settings"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Fleet Configuration</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div className="col-span-full space-y-1.5">
+            <Label htmlFor="fleet-image">Container Image</Label>
+            <Input
+              id="fleet-image"
+              value={form.containerImage}
+              onChange={(e) => setStr("containerImage", e.target.value)}
+              placeholder="ghcr.io/wopr-network/agent:latest"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-port">Container Port</Label>
+            <Input
+              id="fleet-port"
+              type="number"
+              value={form.containerPort}
+              onChange={(e) => setNum("containerPort", e.target.value)}
+              min={1}
+              max={65535}
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-maxInstances">Max Instances</Label>
+            <Input
+              id="fleet-maxInstances"
+              type="number"
+              value={form.maxInstances}
+              onChange={(e) => setNum("maxInstances", e.target.value)}
+              min={1}
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-lifecycle">Lifecycle</Label>
+            <Select value={form.lifecycle} onValueChange={(v) => setStr("lifecycle", v)}>
+              <SelectTrigger id="fleet-lifecycle">
+                <SelectValue placeholder="Select lifecycle" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="managed">Managed</SelectItem>
+                <SelectItem value="ephemeral">Ephemeral</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-billingModel">Billing Model</Label>
+            <Select value={form.billingModel} onValueChange={(v) => setStr("billingModel", v)}>
+              <SelectTrigger id="fleet-billingModel">
+                <SelectValue placeholder="Select billing model" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="monthly">Monthly</SelectItem>
+                <SelectItem value="per_use">Per Use</SelectItem>
+                <SelectItem value="none">None</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-placementStrategy">Placement Strategy</Label>
+            <Select
+              value={form.placementStrategy}
+              onValueChange={(v) => setStr("placementStrategy", v)}
+            >
+              <SelectTrigger id="fleet-placementStrategy">
+                <SelectValue placeholder="Select strategy" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="round_robin">Round Robin</SelectItem>
+                <SelectItem value="least_loaded">Least Loaded</SelectItem>
+                <SelectItem value="random">Random</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="fleet-dockerNetwork">Docker Network</Label>
+            <Input
+              id="fleet-dockerNetwork"
+              value={form.dockerNetwork}
+              onChange={(e) => setStr("dockerNetwork", e.target.value)}
+              placeholder="platform"
+            />
+          </div>
+
+          <div className="col-span-full space-y-1.5">
+            <Label htmlFor="fleet-dataDir">Fleet Data Directory</Label>
+            <Input
+              id="fleet-dataDir"
+              value={form.fleetDataDir}
+              onChange={(e) => setStr("fleetDataDir", e.target.value)}
+              placeholder="/data/fleet"
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end pt-2">
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Fleet"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}