@wopr-network/platform-ui-core 1.0.0

package/src/components/admin/roles-dashboard.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { Search, Shield, ShieldCheck, ShieldOff, UserCog } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { AdminRole, UserRoleAssignment } from "@/lib/admin-api";
+import { assignRole, getRolesList, revokeRole } from "@/lib/admin-api";
+import { toUserMessage } from "@/lib/errors";
+
+const PLATFORM_ROLES = ["platform_admin", "platform_support", "user"] as const;
+
+function roleBadgeClass(role: string): string {
+  switch (role) {
+    case "platform_admin":
+      return "bg-red-500/15 text-red-400 border-red-500/20";
+    case "platform_support":
+      return "bg-amber-500/15 text-amber-400 border-amber-500/20";
+    default:
+      return "bg-muted text-muted-foreground border-border";
+  }
+}
+
+function RoleIcon({ role }: { role: string }) {
+  if (role === "platform_admin") return <ShieldCheck className="h-3.5 w-3.5" />;
+  if (role === "platform_support") return <Shield className="h-3.5 w-3.5" />;
+  return <ShieldOff className="h-3.5 w-3.5 opacity-40" />;
+}
+
+interface RoleRowProps {
+  assignment: UserRoleAssignment;
+  onChanged: (userId: string, tenantId: string, newRole: string) => void;
+}
+
+function RoleRow({ assignment, onChanged }: RoleRowProps) {
+  const [busy, setBusy] = useState(false);
+
+  async function handleChange(newRole: string) {
+    if (newRole === assignment.role) return;
+    setBusy(true);
+    try {
+      if (newRole === "user") {
+        await revokeRole(assignment.user_id, assignment.tenant_id, assignment.role);
+      } else {
+        if (assignment.role !== "user") {
+          await revokeRole(assignment.user_id, assignment.tenant_id, assignment.role);
+        }
+        await assignRole(assignment.user_id, assignment.tenant_id, newRole);
+      }
+      onChanged(assignment.user_id, assignment.tenant_id, newRole);
+      toast.success(`Role updated to ${newRole}.`);
+    } catch (err) {
+      toast.error(toUserMessage(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <TableRow>
+      <TableCell>
+        <div>
+          <p className="text-sm font-medium">{assignment.name ?? "(no name)"}</p>
+          <p className="text-xs text-muted-foreground">{assignment.email}</p>
+        </div>
+      </TableCell>
+      <TableCell>
+        <code className="text-xs text-muted-foreground">{assignment.tenant_id}</code>
+      </TableCell>
+      <TableCell>
+        <Badge
+          variant="secondary"
+          className={`${roleBadgeClass(assignment.role)} inline-flex items-center gap-1`}
+        >
+          <RoleIcon role={assignment.role} />
+          {assignment.role}
+        </Badge>
+      </TableCell>
+      <TableCell className="text-xs text-muted-foreground">
+        {assignment.assigned_at ? new Date(assignment.assigned_at).toLocaleDateString() : "—"}
+      </TableCell>
+      <TableCell>
+        <Select value={assignment.role} onValueChange={handleChange} disabled={busy}>
+          <SelectTrigger className="h-7 w-40 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {PLATFORM_ROLES.map((r) => (
+              <SelectItem key={r} value={r} className="text-xs">
+                {r}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+// ---- Role catalog panel ----
+
+function RoleCatalog({ roles }: { roles: AdminRole[] }) {
+  return (
+    <div className="rounded-lg border border-border overflow-hidden">
+      <div className="border-b border-border bg-muted/40 px-4 py-2.5 flex items-center gap-2">
+        <UserCog className="h-4 w-4 text-muted-foreground" />
+        <h3 className="text-sm font-medium">Available Roles</h3>
+      </div>
+      <div className="divide-y divide-border">
+        {roles.map((role) => (
+          <div key={role.id} className="flex items-start justify-between px-4 py-3">
+            <div className="space-y-0.5">
+              <div className="flex items-center gap-2">
+                <Badge variant="secondary" className={`${roleBadgeClass(role.name)} text-xs`}>
+                  {role.name}
+                </Badge>
+                {role.is_system && <span className="text-xs text-muted-foreground">(system)</span>}
+              </div>
+              {role.description && (
+                <p className="text-xs text-muted-foreground">{role.description}</p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---- Main ----
+
+export function RolesDashboard() {
+  const [roles, setRoles] = useState<AdminRole[]>([]);
+  const [assignments, setAssignments] = useState<UserRoleAssignment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+  const [filterRole, setFilterRole] = useState<string>("all");
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const { roles: r, assignments: a } = await getRolesList();
+      setRoles(r);
+      setAssignments(a);
+    } catch (err) {
+      toast.error(toUserMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  function handleRoleChanged(userId: string, tenantId: string, newRole: string) {
+    setAssignments((prev) =>
+      prev.map((a) =>
+        a.user_id === userId && a.tenant_id === tenantId ? { ...a, role: newRole } : a,
+      ),
+    );
+  }
+
+  const filtered = assignments.filter((a) => {
+    const matchSearch =
+      !search ||
+      a.email.toLowerCase().includes(search.toLowerCase()) ||
+      (a.name ?? "").toLowerCase().includes(search.toLowerCase()) ||
+      a.tenant_id.includes(search);
+    const matchRole = filterRole === "all" || a.role === filterRole;
+    return matchSearch && matchRole;
+  });
+
+  return (
+    <div className="space-y-6 p-6">
+      <div>
+        <h1 className="text-2xl font-bold">Roles</h1>
+        <p className="text-muted-foreground text-sm">Manage platform roles and user assignments</p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <div className="lg:col-span-3 space-y-4">
+          <div className="flex gap-3">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+              <Input
+                placeholder="Search users…"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-8 h-8 text-sm"
+              />
+            </div>
+            <Select value={filterRole} onValueChange={setFilterRole}>
+              <SelectTrigger className="h-8 w-44 text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Roles</SelectItem>
+                {PLATFORM_ROLES.map((r) => (
+                  <SelectItem key={r} value={r}>
+                    {r}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button size="sm" variant="outline" onClick={load}>
+              Refresh
+            </Button>
+          </div>
+
+          {loading ? (
+            <div className="space-y-2">
+              {Array.from({ length: 6 }, (_, i) => `sk-row-${i}`).map((k) => (
+                <Skeleton key={k} className="h-12 rounded-md" />
+              ))}
+            </div>
+          ) : (
+            <div className="rounded-md border border-border overflow-hidden">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-muted/40">
+                    <TableHead>User</TableHead>
+                    <TableHead>Tenant</TableHead>
+                    <TableHead>Current Role</TableHead>
+                    <TableHead>Assigned</TableHead>
+                    <TableHead>Change Role</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filtered.length === 0 ? (
+                    <TableRow>
+                      <TableCell
+                        colSpan={5}
+                        className="text-center text-muted-foreground py-8 text-sm"
+                      >
+                        No users found.
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filtered.map((a) => (
+                      <RoleRow
+                        key={`${a.user_id}-${a.tenant_id}`}
+                        assignment={a}
+                        onChanged={handleRoleChanged}
+                      />
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
+
+        <div className="lg:col-span-1">
+          {loading ? <Skeleton className="h-48 rounded-lg" /> : <RoleCatalog roles={roles} />}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/admin/suspend-dialog.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { type AdminUserSummary, reactivateTenant, suspendTenant } from "@/lib/admin-api";
+
+interface SuspendDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user: AdminUserSummary;
+  onComplete: () => void;
+}
+
+export function SuspendDialog({ open, onOpenChange, user, onComplete }: SuspendDialogProps) {
+  const isSuspended = user.status === "suspended";
+  const [reason, setReason] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleConfirm() {
+    setSubmitting(true);
+    try {
+      if (isSuspended) {
+        await reactivateTenant(user.tenant_id);
+      } else {
+        await suspendTenant(user.tenant_id, reason);
+      }
+      onOpenChange(false);
+      setReason("");
+      onComplete();
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md border-terminal/10">
+        <DialogHeader>
+          <DialogTitle className="uppercase tracking-wider font-bold">
+            {isSuspended ? "REACTIVATE TENANT" : "SUSPEND TENANT"}
+          </DialogTitle>
+          <DialogDescription>
+            {isSuspended ? (
+              <>
+                Reactivate <span className="font-mono text-terminal">{user.email}</span>? Their bots
+                will resume.
+              </>
+            ) : (
+              <>
+                Suspend <span className="font-mono text-terminal">{user.email}</span>? Their running
+                bots will be paused immediately.
+              </>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        {!isSuspended && (
+          <div className="space-y-2">
+            <Label htmlFor="suspend-reason">Reason (required)</Label>
+            <Input
+              id="suspend-reason"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              placeholder="e.g. Payment overdue, TOS violation"
+            />
+          </div>
+        )}
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant={isSuspended ? "terminal" : "destructive"}
+            disabled={(!isSuspended && !reason.trim()) || submitting}
+            onClick={handleConfirm}
+          >
+            {submitting
+              ? isSuspended
+                ? "Reactivating..."
+                : "Suspending..."
+              : isSuspended
+                ? "Reactivate"
+                : "Suspend"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/admin/tenant-notes-panel.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { Plus, StickyNote } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Textarea } from "@/components/ui/textarea";
+import type { AdminNote } from "@/lib/admin-api";
+import { addTenantNote, getTenantNotes } from "@/lib/admin-api";
+import { toUserMessage } from "@/lib/errors";
+
+function relativeTime(ts: number): string {
+  const diff = Date.now() - ts;
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return new Date(ts).toLocaleDateString();
+}
+
+interface TenantNotesPanelProps {
+  tenantId: string;
+}
+
+export function TenantNotesPanel({ tenantId }: TenantNotesPanelProps) {
+  const [notes, setNotes] = useState<AdminNote[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [adding, setAdding] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await getTenantNotes(tenantId);
+      setNotes(result);
+    } catch (err) {
+      toast.error(toUserMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [tenantId]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function handleAdd() {
+    if (!draft.trim()) return;
+    setSaving(true);
+    try {
+      const note = await addTenantNote(tenantId, draft.trim());
+      setNotes((prev) => [note, ...prev]);
+      setDraft("");
+      setAdding(false);
+      toast.success("Note added.");
+    } catch (err) {
+      toast.error(toUserMessage(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="rounded-lg border border-border overflow-hidden">
+      <div className="flex items-center justify-between border-b border-border bg-muted/40 px-4 py-2.5">
+        <div className="flex items-center gap-2">
+          <StickyNote className="h-4 w-4 text-muted-foreground" />
+          <h3 className="text-sm font-medium">Admin Notes</h3>
+          {!loading && <span className="text-xs text-muted-foreground">({notes.length})</span>}
+        </div>
+        <Button size="sm" variant="ghost" onClick={() => setAdding((v) => !v)} className="h-7 px-2">
+          <Plus className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      {adding && (
+        <div className="border-b border-border p-3 space-y-2 bg-muted/10">
+          <Textarea
+            placeholder="Write a note…"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            rows={3}
+            className="text-sm"
+            autoFocus
+          />
+          <div className="flex gap-2 justify-end">
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                setAdding(false);
+                setDraft("");
+              }}
+              disabled={saving}
+            >
+              Cancel
+            </Button>
+            <Button size="sm" onClick={handleAdd} disabled={saving || !draft.trim()}>
+              {saving ? "Saving…" : "Add Note"}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <div className="divide-y divide-border max-h-72 overflow-y-auto">
+        {loading ? (
+          Array.from({ length: 3 }, (_, i) => `sk-note-${i}`).map((k) => (
+            <div key={k} className="px-4 py-3 space-y-1.5">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-4 w-full" />
+            </div>
+          ))
+        ) : notes.length === 0 ? (
+          <p className="px-4 py-6 text-center text-sm text-muted-foreground">No notes yet.</p>
+        ) : (
+          notes.map((note) => (
+            <div key={note.id} className="px-4 py-3 space-y-1">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-medium text-muted-foreground">{note.admin_user}</span>
+                <span className="text-xs text-muted-foreground">
+                  {relativeTime(note.created_at)}
+                </span>
+              </div>
+              <p className="text-sm whitespace-pre-wrap">{note.content}</p>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/admin/tenant-row-actions.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Gift, MoreHorizontal, ShieldBan, ShieldCheck } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { AdminUserSummary } from "@/lib/admin-api";
+import { GrantCreditsDialog } from "./grant-credits-dialog";
+import { SuspendDialog } from "./suspend-dialog";
+
+interface TenantRowActionsProps {
+  user: AdminUserSummary;
+  onAction: () => void;
+}
+
+export function TenantRowActions({ user, onAction }: TenantRowActionsProps) {
+  const [suspendOpen, setSuspendOpen] = useState(false);
+  const [grantOpen, setGrantOpen] = useState(false);
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            className="opacity-40 transition-opacity duration-100 hover:opacity-100"
+          >
+            <MoreHorizontal className="size-3.5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48 border-terminal/10">
+          <DropdownMenuItem onClick={() => setGrantOpen(true)}>
+            <Gift className="size-4" />
+            Grant Credits
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          {user.status === "active" ? (
+            <DropdownMenuItem
+              onClick={() => setSuspendOpen(true)}
+              className="text-amber-500 focus:text-amber-500"
+            >
+              <ShieldBan className="size-4" />
+              Suspend
+            </DropdownMenuItem>
+          ) : user.status === "suspended" ? (
+            <DropdownMenuItem
+              onClick={() => setSuspendOpen(true)}
+              className="text-terminal focus:text-terminal"
+            >
+              <ShieldCheck className="size-4" />
+              Reactivate
+            </DropdownMenuItem>
+          ) : null}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <SuspendDialog
+        open={suspendOpen}
+        onOpenChange={setSuspendOpen}
+        user={user}
+        onComplete={onAction}
+      />
+      <GrantCreditsDialog
+        open={grantOpen}
+        onOpenChange={setGrantOpen}
+        user={user}
+        onComplete={onAction}
+      />
+    </>
+  );
+}