@wopr-network/platform-ui-core 1.0.0

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

@@ -0,0 +1,189 @@
+"use client";
+
+import { ArrowRight, Download } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+
+type ExportFieldKey =
+  | "account_info"
+  | "credit_balance"
+  | "monthly_products"
+  | "lifetime_spend"
+  | "last_seen"
+  | "transaction_history";
+
+interface ExportFieldConfig {
+  key: ExportFieldKey;
+  label: string;
+  description?: string;
+  large?: boolean;
+}
+
+const EXPORT_FIELDS: ExportFieldConfig[] = [
+  { key: "account_info", label: "Account info", description: "name, email, status, role" },
+  { key: "credit_balance", label: "Credit balance" },
+  { key: "monthly_products", label: "Monthly products" },
+  { key: "lifetime_spend", label: "Lifetime spend" },
+  { key: "last_seen", label: "Last seen" },
+  { key: "transaction_history", label: "Full transaction history", large: true },
+];
+
+interface BulkExportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedCount: number;
+  onConfirm: (fields: Array<{ key: ExportFieldKey; enabled: boolean }>) => void;
+  isLoading?: boolean;
+}
+
+function BulkExportDialog({
+  open,
+  onOpenChange,
+  selectedCount,
+  onConfirm,
+  isLoading,
+}: BulkExportDialogProps) {
+  const [enabledFields, setEnabledFields] = useState<Set<ExportFieldKey>>(
+    new Set(["account_info", "credit_balance", "monthly_products", "lifetime_spend", "last_seen"]),
+  );
+
+  const toggleField = (key: ExportFieldKey) => {
+    setEnabledFields((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
+  const handleConfirm = () => {
+    const fields = EXPORT_FIELDS.map((f) => ({ key: f.key, enabled: enabledFields.has(f.key) }));
+    onConfirm(fields);
+  };
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) {
+      setEnabledFields(
+        new Set([
+          "account_info",
+          "credit_balance",
+          "monthly_products",
+          "lifetime_spend",
+          "last_seen",
+        ]),
+      );
+    }
+    onOpenChange(next);
+  };
+
+  const standardFields = EXPORT_FIELDS.filter((f) => !f.large);
+  const largeFields = EXPORT_FIELDS.filter((f) => f.large);
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Download className="size-5 text-muted-foreground" />
+            Export data for {selectedCount} tenants
+          </DialogTitle>
+          <DialogDescription>Select which fields to include in the CSV export.</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-1">
+          {standardFields.map((field) => (
+            <div key={field.key} className="flex items-start gap-3 py-2">
+              <Checkbox
+                id={`export-${field.key}`}
+                checked={enabledFields.has(field.key)}
+                onCheckedChange={() => toggleField(field.key)}
+                className="mt-0.5"
+              />
+              <div className="flex flex-col">
+                <Label htmlFor={`export-${field.key}`} className="cursor-pointer">
+                  {field.label}
+                </Label>
+                {field.description && (
+                  <span className="text-xs text-muted-foreground">{field.description}</span>
+                )}
+              </div>
+            </div>
+          ))}
+
+          <Separator className="my-1" />
+
+          {largeFields.map((field) => (
+            <div key={field.key} className="flex items-start gap-3 py-2">
+              <Checkbox
+                id={`export-${field.key}`}
+                checked={enabledFields.has(field.key)}
+                onCheckedChange={() => toggleField(field.key)}
+                className="mt-0.5"
+              />
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-2">
+                  <Label htmlFor={`export-${field.key}`} className="cursor-pointer">
+                    {field.label}
+                  </Label>
+                  <Badge variant="secondary">large</Badge>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="space-y-2">
+          <Label>Format</Label>
+          <Select defaultValue="csv" disabled>
+            <SelectTrigger className="w-full opacity-60">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="csv">CSV</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            variant="terminal"
+            onClick={handleConfirm}
+            disabled={enabledFields.size === 0 || isLoading}
+          >
+            <Download className="size-4" />
+            Generate export
+            <ArrowRight className="size-4" />
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { BulkExportDialog };
+export type { ExportFieldKey };

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

@@ -0,0 +1,81 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BulkGrantDialog } from "./bulk-grant-dialog";
+
+const defaultProps = {
+  open: true,
+  onOpenChange: vi.fn(),
+  selectedCount: 3,
+  onConfirm: vi.fn(),
+  isLoading: false,
+};
+
+describe("BulkGrantDialog", () => {
+  it("renders dialog with tenant count", () => {
+    render(<BulkGrantDialog {...defaultProps} />);
+    expect(screen.getByText("3")).toBeInTheDocument();
+    expect(screen.getByText(/tenants/)).toBeInTheDocument();
+  });
+
+  it("confirm button is disabled when amount is 0", () => {
+    render(<BulkGrantDialog {...defaultProps} />);
+    const buttons = screen.getAllByRole("button");
+    const confirmBtn = buttons.find(
+      (b) => b.textContent?.includes("Grant") && b.textContent?.includes("="),
+    );
+    expect(confirmBtn).toBeDisabled();
+  });
+
+  it("confirm button is disabled when reason is empty but amount is set", async () => {
+    const user = userEvent.setup();
+    render(<BulkGrantDialog {...defaultProps} />);
+    await user.type(screen.getByLabelText("Amount per tenant"), "5");
+    const buttons = screen.getAllByRole("button");
+    const confirmBtn = buttons.find(
+      (b) => b.textContent?.includes("Grant") && b.textContent?.includes("="),
+    );
+    expect(confirmBtn).toBeDisabled();
+  });
+
+  it("calls onConfirm with amountCents, reason, notifyByEmail when valid", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    render(<BulkGrantDialog {...defaultProps} onConfirm={onConfirm} />);
+    await user.type(screen.getByLabelText("Amount per tenant"), "5.00");
+    await user.type(screen.getByLabelText("Reason"), "Service outage");
+    await user.click(screen.getByRole("button", { name: /Grant.*=/ }));
+    expect(onConfirm).toHaveBeenCalledWith(500, "Service outage", false);
+  });
+
+  it("shows total cost formatted after entering amount", async () => {
+    const user = userEvent.setup();
+    render(<BulkGrantDialog {...defaultProps} />);
+    await user.type(screen.getByLabelText("Amount per tenant"), "10");
+    expect(screen.getByText(/Total:/)).toBeInTheDocument();
+  });
+
+  it("passes notifyByEmail=true when checkbox checked", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    render(<BulkGrantDialog {...defaultProps} onConfirm={onConfirm} />);
+    await user.type(screen.getByLabelText("Amount per tenant"), "5");
+    await user.type(screen.getByLabelText("Reason"), "test");
+    await user.click(screen.getByLabelText("Notify each user by email"));
+    await user.click(screen.getByRole("button", { name: /Grant.*=/ }));
+    expect(onConfirm).toHaveBeenCalledWith(500, "test", true);
+  });
+
+  it("calls onOpenChange(false) when Cancel clicked", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(<BulkGrantDialog {...defaultProps} onOpenChange={onOpenChange} />);
+    await user.click(screen.getByText("Cancel"));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("disables Cancel when isLoading", () => {
+    render(<BulkGrantDialog {...defaultProps} isLoading={true} />);
+    expect(screen.getByText("Cancel").closest("button")).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,147 @@
+"use client";
+
+import { Gift } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { formatCreditStandard } from "@/lib/format-credit";
+import { cn } from "@/lib/utils";
+
+interface BulkGrantDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedCount: number;
+  onConfirm: (amountCents: number, reason: string, notifyByEmail: boolean) => void;
+  isLoading?: boolean;
+}
+
+function BulkGrantDialog({
+  open,
+  onOpenChange,
+  selectedCount,
+  onConfirm,
+  isLoading,
+}: BulkGrantDialogProps) {
+  const [amount, setAmount] = useState("");
+  const [reason, setReason] = useState("");
+  const [notifyByEmail, setNotifyByEmail] = useState(false);
+
+  const amountCents = useMemo(() => {
+    const parsed = Number.parseFloat(amount);
+    return Number.isNaN(parsed) || parsed <= 0 ? 0 : Math.round(parsed * 100);
+  }, [amount]);
+
+  const totalCents = amountCents * selectedCount;
+  const totalFormatted = formatCreditStandard(totalCents / 100);
+  const perTenantFormatted = formatCreditStandard(amountCents / 100);
+
+  const handleConfirm = () => {
+    if (amountCents > 0 && reason.trim()) {
+      onConfirm(amountCents, reason.trim(), notifyByEmail);
+    }
+  };
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) {
+      setAmount("");
+      setReason("");
+      setNotifyByEmail(false);
+    }
+    onOpenChange(next);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Gift className="size-5 text-terminal" />
+            Grant credits to <span className="text-terminal font-semibold">{selectedCount}</span>{" "}
+            tenants
+          </DialogTitle>
+          <DialogDescription>
+            Grant a fixed amount to each selected tenant account.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="grant-amount">Amount per tenant</Label>
+            <div className="relative">
+              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+                $
+              </span>
+              <Input
+                id="grant-amount"
+                type="number"
+                min="0.01"
+                step="0.01"
+                placeholder="5.00"
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+                className="pl-7 text-right"
+              />
+            </div>
+            {amountCents > 0 && (
+              <p
+                className={cn("text-sm", {
+                  "text-muted-foreground": totalCents < 100_000,
+                  "text-amber-500": totalCents >= 100_000 && totalCents < 1_000_000,
+                  "text-red-500": totalCents >= 1_000_000,
+                })}
+              >
+                Total: {totalFormatted}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="grant-reason">Reason</Label>
+            <Input
+              id="grant-reason"
+              placeholder="e.g. Service outage Feb 10"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+            />
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Checkbox
+              id="grant-notify"
+              checked={notifyByEmail}
+              onCheckedChange={(checked) => setNotifyByEmail(checked === true)}
+            />
+            <Label htmlFor="grant-notify" className="cursor-pointer">
+              Notify each user by email
+            </Label>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            variant="terminal"
+            onClick={handleConfirm}
+            disabled={amountCents === 0 || !reason.trim() || isLoading}
+          >
+            Grant {perTenantFormatted} x {selectedCount} = {totalFormatted}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { BulkGrantDialog };

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

@@ -0,0 +1,72 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BulkPreviewDialog } from "./bulk-preview-dialog";
+
+const tenants = [
+  { tenantId: "t-1", name: "Alice", email: "alice@example.com", status: "active" },
+  { tenantId: "t-2", name: null, email: "bob@example.com", status: "suspended" },
+];
+
+const defaultProps = {
+  open: true,
+  onOpenChange: vi.fn(),
+  tenants,
+  actionLabel: "Suspend 2 accounts",
+  actionVariant: "destructive" as const,
+  onBack: vi.fn(),
+  onConfirm: vi.fn(),
+  isLoading: false,
+};
+
+describe("BulkPreviewDialog", () => {
+  it("renders tenant count in title", () => {
+    render(<BulkPreviewDialog {...defaultProps} />);
+    expect(screen.getByText(/2 tenants will be affected/)).toBeInTheDocument();
+  });
+
+  it("renders tenant rows with data", () => {
+    render(<BulkPreviewDialog {...defaultProps} />);
+    expect(screen.getByText("t-1")).toBeInTheDocument();
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+    expect(screen.getByText("alice@example.com")).toBeInTheDocument();
+    expect(screen.getByText("-")).toBeInTheDocument();
+    expect(screen.getByText("bob@example.com")).toBeInTheDocument();
+  });
+
+  it("shows empty state when no tenants", () => {
+    render(<BulkPreviewDialog {...defaultProps} tenants={[]} />);
+    expect(screen.getByText("No matching tenants found.")).toBeInTheDocument();
+  });
+
+  it("fires onConfirm when action button clicked", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    render(<BulkPreviewDialog {...defaultProps} onConfirm={onConfirm} />);
+    await user.click(screen.getByText("Suspend 2 accounts"));
+    expect(onConfirm).toHaveBeenCalledOnce();
+  });
+
+  it("fires onBack when Back clicked", async () => {
+    const user = userEvent.setup();
+    const onBack = vi.fn();
+    render(<BulkPreviewDialog {...defaultProps} onBack={onBack} />);
+    await user.click(screen.getByText("Back"));
+    expect(onBack).toHaveBeenCalledOnce();
+  });
+
+  it("fires onOpenChange(false) when Cancel clicked", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(<BulkPreviewDialog {...defaultProps} onOpenChange={onOpenChange} />);
+    await user.click(screen.getByText("Cancel"));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("disables all buttons when isLoading", () => {
+    render(<BulkPreviewDialog {...defaultProps} isLoading={true} />);
+    expect(screen.getByText("Cancel").closest("button")).toBeDisabled();
+    expect(screen.getByText("Back").closest("button")).toBeDisabled();
+    expect(screen.getByText("Suspend 2 accounts").closest("button")).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,106 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface PreviewTenant {
+  tenantId: string;
+  name: string | null;
+  email: string;
+  status: string;
+}
+
+interface BulkPreviewDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  tenants: PreviewTenant[];
+  actionLabel: string;
+  actionVariant: "terminal" | "destructive";
+  onBack: () => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+function BulkPreviewDialog({
+  open,
+  onOpenChange,
+  tenants,
+  actionLabel,
+  actionVariant,
+  onBack,
+  onConfirm,
+  isLoading,
+}: BulkPreviewDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Preview: {tenants.length} tenants will be affected</DialogTitle>
+          <DialogDescription>
+            Review the list of tenants before executing the operation.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="max-h-80 overflow-y-auto rounded-sm border border-border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-xs">Tenant ID</TableHead>
+                <TableHead className="text-xs">Name</TableHead>
+                <TableHead className="text-xs">Email</TableHead>
+                <TableHead className="text-xs">Status</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {tenants.map((tenant) => (
+                <TableRow key={tenant.tenantId}>
+                  <TableCell className="text-xs font-mono">{tenant.tenantId}</TableCell>
+                  <TableCell className="text-xs">{tenant.name ?? "-"}</TableCell>
+                  <TableCell className="text-xs">{tenant.email}</TableCell>
+                  <TableCell className="text-xs">{tenant.status}</TableCell>
+                </TableRow>
+              ))}
+              {tenants.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={4} className="text-center text-xs text-muted-foreground py-8">
+                    No matching tenants found.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button variant="outline" onClick={onBack} disabled={isLoading}>
+            Back
+          </Button>
+          <Button variant={actionVariant} onClick={onConfirm} disabled={isLoading}>
+            {actionLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { BulkPreviewDialog };
+export type { PreviewTenant };

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

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { BulkReactivateDialog } from "./bulk-reactivate-dialog";
+
+const defaultProps = {
+  open: true,
+  onOpenChange: vi.fn(),
+  selectedCount: 2,
+  onConfirm: vi.fn(),
+  isLoading: false,
+};
+
+describe("BulkReactivateDialog", () => {
+  it("renders dialog title with count", () => {
+    render(<BulkReactivateDialog {...defaultProps} />);
+    expect(screen.getByText("Reactivate 2 accounts")).toBeInTheDocument();
+  });
+
+  it("shows description about restoring access", () => {
+    render(<BulkReactivateDialog {...defaultProps} />);
+    expect(screen.getByText(/restored to active status/)).toBeInTheDocument();
+  });
+
+  it("calls onConfirm when Reactivate button clicked", async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    render(<BulkReactivateDialog {...defaultProps} onConfirm={onConfirm} />);
+    await user.click(screen.getByText("Reactivate 2 accounts"));
+    expect(onConfirm).toHaveBeenCalledOnce();
+  });
+
+  it("calls onOpenChange(false) when Cancel clicked", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(<BulkReactivateDialog {...defaultProps} onOpenChange={onOpenChange} />);
+    await user.click(screen.getByText("Cancel"));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("disables buttons when isLoading", () => {
+    render(<BulkReactivateDialog {...defaultProps} isLoading={true} />);
+    expect(screen.getByText("Cancel").closest("button")).toBeDisabled();
+    expect(screen.getByText("Reactivate 2 accounts").closest("button")).toBeDisabled();
+  });
+
+  it("renders nothing when open is false", () => {
+    render(<BulkReactivateDialog {...defaultProps} open={false} />);
+    expect(screen.queryByText("Reactivate 2 accounts")).toBeNull();
+  });
+});