@wopr-network/platform-ui-core 1.0.0

package/src/components/admin/bulk-reactivate-dialog.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ShieldCheck } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface BulkReactivateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedCount: number;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+function BulkReactivateDialog({
+  open,
+  onOpenChange,
+  selectedCount,
+  onConfirm,
+  isLoading,
+}: BulkReactivateDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <ShieldCheck className="size-5 text-emerald-500" />
+            Reactivate <span className="text-terminal font-semibold">{selectedCount}</span> accounts
+          </DialogTitle>
+          <DialogDescription>
+            These accounts will be restored to active status and users will regain platform access.
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button variant="terminal" onClick={onConfirm} disabled={isLoading}>
+            Reactivate {selectedCount} accounts
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { BulkReactivateDialog };

package/src/components/admin/bulk-select-all-banner.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BulkSelectAllBanner } from "./bulk-select-all-banner";
+
+const defaultProps = {
+  visible: true,
+  pageCount: 25,
+  totalMatching: 142,
+  onSelectAllMatching: vi.fn(),
+};
+
+describe("BulkSelectAllBanner", () => {
+  it("renders page count message when visible", () => {
+    render(<BulkSelectAllBanner {...defaultProps} />);
+    expect(screen.getByText(/All 25 users on this page are selected/)).toBeInTheDocument();
+  });
+
+  it("renders select all matching button with total count", () => {
+    render(<BulkSelectAllBanner {...defaultProps} />);
+    expect(screen.getByText(/Select all 142 matching filters/)).toBeInTheDocument();
+  });
+
+  it("renders nothing when not visible", () => {
+    const { container } = render(<BulkSelectAllBanner {...defaultProps} visible={false} />);
+    expect(container.textContent).toBe("");
+  });
+
+  it("fires onSelectAllMatching when link button clicked", async () => {
+    const user = userEvent.setup();
+    const onSelectAllMatching = vi.fn();
+    render(<BulkSelectAllBanner {...defaultProps} onSelectAllMatching={onSelectAllMatching} />);
+    await user.click(screen.getByText(/Select all 142 matching filters/));
+    expect(onSelectAllMatching).toHaveBeenCalledOnce();
+  });
+});

package/src/components/admin/bulk-select-all-banner.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+
+interface BulkSelectAllBannerProps {
+  visible: boolean;
+  pageCount: number;
+  totalMatching: number;
+  onSelectAllMatching: () => void;
+}
+
+function BulkSelectAllBanner({
+  visible,
+  pageCount,
+  totalMatching,
+  onSelectAllMatching,
+}: BulkSelectAllBannerProps) {
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.15 }}
+          className="w-full py-2 px-4 text-sm text-center bg-terminal/[0.06] border border-terminal/15 rounded-sm"
+        >
+          All {pageCount} users on this page are selected.{" "}
+          <Button
+            type="button"
+            variant="link"
+            className="h-auto p-0 text-terminal font-medium"
+            onClick={onSelectAllMatching}
+          >
+            Select all {totalMatching} matching filters
+          </Button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export { BulkSelectAllBanner };

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

@@ -0,0 +1,77 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BulkSuspendDialog } from "./bulk-suspend-dialog";
+
+const defaultProps = {
+  open: true,
+  onOpenChange: vi.fn(),
+  selectedCount: 4,
+  onConfirm: vi.fn(),
+  onPreview: vi.fn(),
+  isLoading: false,
+};
+
+describe("BulkSuspendDialog", () => {
+  it("renders dialog title with count", () => {
+    render(<BulkSuspendDialog {...defaultProps} />);
+    expect(screen.getByText("Suspend")).toBeInTheDocument();
+    expect(screen.getByText("4")).toBeInTheDocument();
+    expect(screen.getByText("accounts")).toBeInTheDocument();
+  });
+
+  it("shows warning banner about immediate lockout", () => {
+    render(<BulkSuspendDialog {...defaultProps} />);
+    expect(screen.getByText(/immediately prevent these accounts/)).toBeInTheDocument();
+  });
+
+  it("confirm button is disabled when reason is empty", () => {
+    render(<BulkSuspendDialog {...defaultProps} />);
+    expect(screen.getByText("Suspend 4 accounts").closest("button")).toBeDisabled();
+  });
+
+  it("calls onConfirm with reason and notifyByEmail when submitted", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    render(<BulkSuspendDialog {...defaultProps} onConfirm={onConfirm} />);
+    await user.type(screen.getByLabelText("Reason"), "TOS violation");
+    await user.click(screen.getByText("Suspend 4 accounts"));
+    expect(onConfirm).toHaveBeenCalledWith("TOS violation", false);
+  });
+
+  it("calls onConfirm with notifyByEmail=true when checkbox checked", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    render(<BulkSuspendDialog {...defaultProps} onConfirm={onConfirm} />);
+    await user.type(screen.getByLabelText("Reason"), "cleanup");
+    await user.click(screen.getByLabelText("Notify each user by email"));
+    await user.click(screen.getByText("Suspend 4 accounts"));
+    expect(onConfirm).toHaveBeenCalledWith("cleanup", true);
+  });
+
+  it("calls onPreview instead of onConfirm when preview checkbox checked", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    const onPreview = vi.fn();
+    render(<BulkSuspendDialog {...defaultProps} onConfirm={onConfirm} onPreview={onPreview} />);
+    await user.type(screen.getByLabelText("Reason"), "cleanup");
+    await user.click(screen.getByLabelText("Preview list before executing"));
+    await user.click(screen.getByText("Suspend 4 accounts"));
+    expect(onPreview).toHaveBeenCalledOnce();
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it("calls onOpenChange(false) when Cancel clicked", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(<BulkSuspendDialog {...defaultProps} onOpenChange={onOpenChange} />);
+    await user.click(screen.getByText("Cancel"));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("disables buttons when isLoading", () => {
+    render(<BulkSuspendDialog {...defaultProps} isLoading={true} />);
+    expect(screen.getByText("Cancel").closest("button")).toBeDisabled();
+    expect(screen.getByText("Suspend 4 accounts").closest("button")).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,129 @@
+"use client";
+
+import { ShieldBan } from "lucide-react";
+import { useState } from "react";
+import { Banner } from "@/components/ui/banner";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+interface BulkSuspendDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedCount: number;
+  onConfirm: (reason: string, notifyByEmail: boolean) => void;
+  onPreview: () => void;
+  isLoading?: boolean;
+}
+
+function BulkSuspendDialog({
+  open,
+  onOpenChange,
+  selectedCount,
+  onConfirm,
+  onPreview,
+  isLoading,
+}: BulkSuspendDialogProps) {
+  const [reason, setReason] = useState("");
+  const [notifyByEmail, setNotifyByEmail] = useState(false);
+  const [wantsPreview, setWantsPreview] = useState(false);
+
+  const handleConfirm = () => {
+    if (!reason.trim()) return;
+    if (wantsPreview) {
+      onPreview();
+      return;
+    }
+    onConfirm(reason.trim(), notifyByEmail);
+  };
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) {
+      setReason("");
+      setNotifyByEmail(false);
+      setWantsPreview(false);
+    }
+    onOpenChange(next);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <ShieldBan className="size-5 text-amber-500" />
+            <span className="text-amber-500">Suspend</span>{" "}
+            <span className="font-semibold">{selectedCount}</span> accounts
+          </DialogTitle>
+          <DialogDescription>
+            Suspended accounts will immediately lose platform access.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Banner variant="warning">
+          This will immediately prevent these accounts from using the platform. Users will be locked
+          out.
+        </Banner>
+
+        <div className="flex flex-col gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="suspend-reason">Reason</Label>
+            <Textarea
+              id="suspend-reason"
+              rows={3}
+              placeholder="e.g. Dormant account cleanup"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+            />
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Checkbox
+              id="suspend-notify"
+              checked={notifyByEmail}
+              onCheckedChange={(checked) => setNotifyByEmail(checked === true)}
+            />
+            <Label htmlFor="suspend-notify" className="cursor-pointer">
+              Notify each user by email
+            </Label>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Checkbox
+              id="suspend-preview"
+              checked={wantsPreview}
+              onCheckedChange={(checked) => setWantsPreview(checked === true)}
+            />
+            <Label htmlFor="suspend-preview" className="cursor-pointer">
+              Preview list before executing
+            </Label>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleConfirm}
+            disabled={!reason.trim() || isLoading}
+          >
+            Suspend {selectedCount} accounts
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { BulkSuspendDialog };

package/src/components/admin/bulk-undo-toast.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BulkUndoToast } from "./bulk-undo-toast";
+
+const defaultProps = {
+  visible: true,
+  operationId: "op-123",
+  description: "Suspended 5 accounts",
+  detail: "Operation completed successfully",
+  undoDeadline: Date.now() + 300_000,
+  onUndo: vi.fn(),
+  onDismiss: vi.fn(),
+  isUndoing: false,
+  windowMs: 300_000,
+};
+
+describe("BulkUndoToast", () => {
+  it("renders description and detail", () => {
+    render(<BulkUndoToast {...defaultProps} />);
+    expect(screen.getByText("Suspended 5 accounts")).toBeInTheDocument();
+    expect(screen.getByText("Operation completed successfully")).toBeInTheDocument();
+  });
+
+  it("renders nothing when not visible", () => {
+    const { container } = render(<BulkUndoToast {...defaultProps} visible={false} />);
+    expect(container.textContent).toBe("");
+  });
+
+  it("shows undo button with countdown", () => {
+    render(<BulkUndoToast {...defaultProps} />);
+    expect(screen.getByText(/Undo/)).toBeInTheDocument();
+    expect(screen.getByText(/remaining/)).toBeInTheDocument();
+  });
+
+  it("calls onUndo with operationId when undo clicked", async () => {
+    const user = userEvent.setup();
+    const onUndo = vi.fn();
+    render(<BulkUndoToast {...defaultProps} onUndo={onUndo} />);
+    await user.click(screen.getByText(/Undo/));
+    expect(onUndo).toHaveBeenCalledWith("op-123");
+  });
+
+  it("calls onDismiss when dismiss button clicked", async () => {
+    const user = userEvent.setup();
+    const onDismiss = vi.fn();
+    render(<BulkUndoToast {...defaultProps} onDismiss={onDismiss} />);
+    await user.click(screen.getByLabelText("Dismiss"));
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+
+  it("disables undo button when isUndoing", () => {
+    render(<BulkUndoToast {...defaultProps} isUndoing={true} />);
+    expect(screen.getByText(/Undo/).closest("button")).toBeDisabled();
+  });
+
+  it("calls onDismiss when countdown reaches zero", () => {
+    vi.useFakeTimers();
+    const onDismiss = vi.fn();
+    const deadline = Date.now() + 3000;
+    render(<BulkUndoToast {...defaultProps} undoDeadline={deadline} onDismiss={onDismiss} />);
+    vi.advanceTimersByTime(4000);
+    vi.useRealTimers();
+    expect(onDismiss).toHaveBeenCalled();
+  });
+});

package/src/components/admin/bulk-undo-toast.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { CheckCircle, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface BulkUndoToastProps {
+  visible: boolean;
+  operationId: string;
+  description: string;
+  detail: string;
+  undoDeadline: number;
+  onUndo: (operationId: string) => void;
+  onDismiss: () => void;
+  isUndoing?: boolean;
+  /** Total undo window in ms. Defaults to 5 minutes. */
+  windowMs?: number;
+}
+
+function BulkUndoToast({
+  visible,
+  operationId,
+  description,
+  detail,
+  undoDeadline,
+  onUndo,
+  onDismiss,
+  isUndoing,
+  windowMs = 5 * 60 * 1000,
+}: BulkUndoToastProps) {
+  const [remainingMs, setRemainingMs] = useState(() => Math.max(0, undoDeadline - Date.now()));
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+
+  useEffect(() => {
+    if (!visible) return;
+    setRemainingMs(Math.max(0, undoDeadline - Date.now()));
+
+    const interval = setInterval(() => {
+      const ms = Math.max(0, undoDeadline - Date.now());
+      setRemainingMs(ms);
+      if (ms <= 0) {
+        clearInterval(interval);
+        onDismissRef.current();
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [visible, undoDeadline]);
+
+  const formatCountdown = useCallback((ms: number) => {
+    const totalSeconds = Math.ceil(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${String(seconds).padStart(2, "0")}`;
+  }, []);
+
+  const progressPercent = (remainingMs / windowMs) * 100;
+
+  const barColor =
+    remainingMs > 180_000 ? "bg-terminal" : remainingMs > 60_000 ? "bg-amber-500" : "bg-red-500";
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          initial={{ x: 100, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          exit={{ x: 100, opacity: 0, transition: { duration: 0.2 } }}
+          transition={{ type: "spring", stiffness: 300, damping: 25 }}
+          className={cn(
+            "fixed bottom-4 right-4 z-50 w-80 rounded-sm bg-card border border-terminal/30 shadow-[0_0_20px_rgba(0,255,65,0.1)]",
+            "animate-terminal-pulse",
+          )}
+        >
+          <div className="p-4 relative">
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              className="absolute top-2 right-2"
+              onClick={onDismiss}
+              aria-label="Dismiss"
+            >
+              <X className="size-3" />
+            </Button>
+
+            <div className="flex items-center gap-2 mb-1">
+              <CheckCircle className="size-4 text-terminal shrink-0" />
+              <span className="text-sm font-medium text-foreground">{description}</span>
+            </div>
+
+            <p className="text-xs text-muted-foreground mb-3">{detail}</p>
+
+            <div className="h-1 w-full bg-muted rounded-full overflow-hidden mb-3">
+              <motion.div
+                className={cn("h-full rounded-full", barColor)}
+                initial={{ width: "100%" }}
+                animate={{ width: `${progressPercent}%` }}
+                transition={{ duration: 1, ease: "linear" }}
+              />
+            </div>
+
+            <Button
+              variant="terminal"
+              size="sm"
+              className="w-full"
+              onClick={() => onUndo(operationId)}
+              disabled={isUndoing}
+            >
+              Undo ({formatCountdown(remainingMs)} remaining)
+            </Button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export { BulkUndoToast };