@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

package/dist/billing/modules/earnings/pages/PayoutAdminPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayoutAdminPage.js","names":[],"sources":["../../../../../src/billing/modules/earnings/pages/PayoutAdminPage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type FC } from 'react';\nimport {\n  AlertTriangle,\n  Banknote,\n  CheckCircle2,\n  ChevronDown,\n  ChevronUp,\n  Clock,\n  CreditCard,\n  RefreshCw,\n  ReceiptText,\n  XCircle,\n} from 'lucide-react';\n\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { AccessDenied, EmptyState, PageHeader, ServerError } from '../../../shared/components';\nimport { formatCurrency, formatDateTime, isServerError } from '../../../shared/utils';\nimport {\n  approvePayoutRequest,\n  fetchAdminPayoutRequests,\n  fetchAdminPayoutSummary,\n  markPayoutPaid,\n  rejectPayoutRequest,\n  type PayoutAdminSummary,\n  type PayoutRequest,\n} from '../api';\n\ntype Tab = 'pending' | 'approved' | 'history';\n\ninterface ActionDialogState {\n  type: 'approve' | 'reject' | 'mark_paid';\n  requestId: string;\n  amount: number;\n  currency: string;\n  accountLabel: string;\n}\n\nconst STATUS_LABEL: Record<string, string> = {\n  REQUESTED: 'Requested',\n  APPROVED: 'Approved',\n  REJECTED: 'Rejected',\n  PROCESSING: 'Processing',\n  PAID: 'Paid',\n  FAILED: 'Failed',\n  CANCELED: 'Canceled',\n};\n\nconst STATUS_COLORS: Record<string, string> = {\n  REQUESTED: 'bg-warning-surface text-warning-foreground',\n  APPROVED: 'bg-info-surface text-info-foreground',\n  REJECTED: 'bg-destructive/10 text-destructive',\n  PROCESSING: 'bg-info-surface text-info-foreground',\n  PAID: 'bg-success-surface text-success-foreground',\n  FAILED: 'bg-destructive/10 text-destructive',\n  CANCELED: 'bg-muted text-muted-foreground',\n};\n\nfunction StatusBadge({ status }: { status: string }) {\n  return (\n    <span\n      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLORS[status] ?? 'bg-muted text-muted-foreground'}`}\n    >\n      {STATUS_LABEL[status] ?? status}\n    </span>\n  );\n}\n\nfunction AccountDetails({ account }: { account: NonNullable<PayoutRequest['payoutAccount']> }) {\n  const [expanded, setExpanded] = useState(false);\n  const details = account.accountDetails as Record<string, string | null> | null;\n\n  return (\n    <div className=\"rounded-md border border-border bg-muted/40 p-3 text-sm\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2 text-foreground font-medium\">\n          <CreditCard className=\"size-4 text-muted-foreground\" />\n          {account.displayName ?? account.label}\n          <span className=\"text-xs text-muted-foreground font-normal\">\n            ({account.type === 'UPI' ? 'UPI' : 'Bank'} · {account.country ?? 'Unknown'} ·{' '}\n            {account.currency})\n          </span>\n        </div>\n        {details && (\n          <button\n            type=\"button\"\n            onClick={() => setExpanded((v) => !v)}\n            className=\"text-muted-foreground hover:text-foreground\"\n          >\n            {expanded ? <ChevronUp className=\"size-4\" /> : <ChevronDown className=\"size-4\" />}\n          </button>\n        )}\n      </div>\n      {expanded && details && (\n        <div className=\"mt-2 grid gap-1 text-xs\">\n          {details.accountHolderName && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-muted-foreground w-32 shrink-0\">Account holder</span>\n              <span className=\"text-foreground\">{details.accountHolderName}</span>\n            </div>\n          )}\n          {details.bankName && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-muted-foreground w-32 shrink-0\">Bank</span>\n              <span className=\"text-foreground\">{details.bankName}</span>\n            </div>\n          )}\n          {account.accountLast4 && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-muted-foreground w-32 shrink-0\">Account (last 4)</span>\n              <span className=\"text-foreground font-mono\">••••{account.accountLast4}</span>\n            </div>\n          )}\n          {details.ifsc && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-muted-foreground w-32 shrink-0\">IFSC</span>\n              <span className=\"text-foreground font-mono\">{details.ifsc}</span>\n            </div>\n          )}\n          {details.routingNumberLast4 && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-muted-foreground w-32 shrink-0\">Routing (last 4)</span>\n              <span className=\"text-foreground font-mono\">••••{details.routingNumberLast4}</span>\n            </div>\n          )}\n          {details.upiIdMasked && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-muted-foreground w-32 shrink-0\">UPI ID</span>\n              <span className=\"text-foreground font-mono\">{details.upiIdMasked}</span>\n            </div>\n          )}\n          {details.swift && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-muted-foreground w-32 shrink-0\">SWIFT</span>\n              <span className=\"text-foreground font-mono\">{details.swift}</span>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction RequestCard({\n  request,\n  onApprove,\n  onReject,\n  onMarkPaid,\n}: {\n  request: PayoutRequest;\n  onApprove: (r: PayoutRequest) => void;\n  onReject: (r: PayoutRequest) => void;\n  onMarkPaid: (r: PayoutRequest) => void;\n}) {\n  const canApprove = request.status === 'REQUESTED' || request.status === 'REJECTED';\n  const canReject = request.status === 'REQUESTED' || request.status === 'APPROVED';\n  const canMarkPaid = request.status === 'APPROVED' || request.status === 'PROCESSING';\n\n  return (\n    <div className=\"rounded-lg border border-border bg-card p-5 space-y-4\">\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-3\">\n        <div className=\"space-y-1\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-xl font-semibold text-foreground\">\n              {formatCurrency(request.requestedAmount, request.currency)}\n            </span>\n            <StatusBadge status={request.status} />\n          </div>\n          <div className=\"text-xs text-muted-foreground space-x-2\">\n            <span>Requested {formatDateTime(request.createdAt)}</span>\n            {request.requesterUserId && (\n              <>\n                <span>·</span>\n                <span>by {request.requesterUserId}</span>\n              </>\n            )}\n            <span>·</span>\n            <span className=\"font-mono text-xs\">{request.id.slice(0, 8)}…</span>\n          </div>\n        </div>\n        <div className=\"flex flex-wrap gap-2\">\n          {canApprove && (\n            <button\n              type=\"button\"\n              onClick={() => onApprove(request)}\n              className=\"inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground\"\n            >\n              <CheckCircle2 className=\"size-3.5\" />\n              Approve\n            </button>\n          )}\n          {canMarkPaid && (\n            <button\n              type=\"button\"\n              onClick={() => onMarkPaid(request)}\n              className=\"inline-flex items-center gap-1.5 rounded-md bg-success-surface border border-success-border px-3 py-1.5 text-xs font-medium text-success-foreground\"\n            >\n              <Banknote className=\"size-3.5\" />\n              Mark as Paid\n            </button>\n          )}\n          {canReject && (\n            <button\n              type=\"button\"\n              onClick={() => onReject(request)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-destructive\"\n            >\n              <XCircle className=\"size-3.5\" />\n              Reject\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Payout account */}\n      {request.payoutAccount && <AccountDetails account={request.payoutAccount} />}\n\n      {/* User notes */}\n      {request.userNotes && (\n        <div className=\"rounded-md bg-muted/40 border border-border px-3 py-2 text-sm\">\n          <span className=\"text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n            User note\n          </span>\n          <p className=\"mt-1 text-foreground\">{request.userNotes}</p>\n        </div>\n      )}\n\n      {/* Internal notes / failure / ref */}\n      {(request.internalNotes ?? request.failureReason ?? request.externalReference) && (\n        <div className=\"grid gap-1 text-xs text-muted-foreground\">\n          {request.externalReference && (\n            <div className=\"flex gap-2\">\n              <ReceiptText className=\"size-3.5 mt-px shrink-0\" />\n              <span>\n                Ref: <span className=\"font-mono text-foreground\">{request.externalReference}</span>\n              </span>\n            </div>\n          )}\n          {request.internalNotes && (\n            <div className=\"flex gap-2\">\n              <span className=\"shrink-0\">Internal note:</span>\n              <span className=\"text-foreground\">{request.internalNotes}</span>\n            </div>\n          )}\n          {request.failureReason && (\n            <div className=\"flex gap-2 text-destructive\">\n              <AlertTriangle className=\"size-3.5 mt-px shrink-0\" />\n              <span>{request.failureReason}</span>\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Timestamps */}\n      {(request.paidAt ?? request.processedAt) && (\n        <div className=\"flex flex-wrap gap-4 text-xs text-muted-foreground\">\n          {request.processedAt && (\n            <span className=\"flex items-center gap-1\">\n              <Clock className=\"size-3\" />\n              Processed {formatDateTime(request.processedAt)}\n            </span>\n          )}\n          {request.paidAt && (\n            <span className=\"flex items-center gap-1\">\n              <CheckCircle2 className=\"size-3\" />\n              Paid {formatDateTime(request.paidAt)}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SummaryBar({ summary }: { summary: PayoutAdminSummary }) {\n  return (\n    <div className=\"grid gap-3 sm:grid-cols-3\">\n      <div className=\"rounded-lg border border-border bg-card p-4\">\n        <div className=\"text-xs text-muted-foreground uppercase tracking-wide\">Pending payout</div>\n        <div className=\"mt-1 text-lg font-semibold text-foreground\">\n          {formatCurrency(summary.totalRequestedAmount, 'USD')}\n        </div>\n        <div className=\"text-xs text-muted-foreground mt-0.5\">{summary.pendingCount} requests</div>\n      </div>\n      <div className=\"rounded-lg border border-border bg-card p-4\">\n        <div className=\"text-xs text-muted-foreground uppercase tracking-wide\">Processing</div>\n        <div className=\"mt-1 text-lg font-semibold text-foreground\">\n          {formatCurrency(summary.totalProcessingAmount, 'USD')}\n        </div>\n      </div>\n      <div className=\"rounded-lg border border-border bg-card p-4\">\n        <div className=\"text-xs text-muted-foreground uppercase tracking-wide\">Total paid</div>\n        <div className=\"mt-1 text-lg font-semibold text-foreground\">\n          {formatCurrency(summary.totalPaidAmount, 'USD')}\n        </div>\n        {summary.failedCount > 0 && (\n          <div className=\"text-xs text-destructive mt-0.5\">{summary.failedCount} failed</div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction ActionDialog({\n  dialog,\n  onClose,\n  onConfirm,\n}: {\n  dialog: ActionDialogState;\n  onClose: () => void;\n  onConfirm: (data: {\n    notes?: string;\n    reason?: string;\n    externalReference?: string;\n  }) => Promise<void>;\n}) {\n  const [notes, setNotes] = useState('');\n  const [reason, setReason] = useState('');\n  const [txnRef, setTxnRef] = useState('');\n  const [submitting, setSubmitting] = useState(false);\n\n  const handleSubmit = async () => {\n    if (dialog.type === 'reject' && !reason.trim()) return;\n    setSubmitting(true);\n    await onConfirm({\n      notes: notes.trim() || undefined,\n      reason: reason.trim() || undefined,\n      externalReference: txnRef.trim() || undefined,\n    });\n    setSubmitting(false);\n  };\n\n  const titles = {\n    approve: 'Approve withdrawal request',\n    reject: 'Reject withdrawal request',\n    mark_paid: 'Mark as paid',\n  };\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-overlay-scrim p-4\">\n      <div className=\"w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg space-y-4\">\n        <div>\n          <h3 className=\"text-base font-semibold text-foreground\">{titles[dialog.type]}</h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {formatCurrency(dialog.amount, dialog.currency)} · {dialog.accountLabel}\n          </p>\n        </div>\n\n        {dialog.type === 'mark_paid' && (\n          <div className=\"space-y-3\">\n            <div>\n              <label className=\"text-xs font-medium text-foreground block mb-1\">\n                Transaction reference / UTR number\n              </label>\n              <input\n                type=\"text\"\n                value={txnRef}\n                onChange={(e) => setTxnRef(e.target.value)}\n                placeholder=\"e.g. UTR123456789012, TXN_abc123\"\n                className=\"w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n              />\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                Enter the bank reference number so the user can verify the transfer.\n              </p>\n            </div>\n            <div>\n              <label className=\"text-xs font-medium text-foreground block mb-1\">\n                Internal notes (optional)\n              </label>\n              <textarea\n                value={notes}\n                onChange={(e) => setNotes(e.target.value)}\n                rows={2}\n                placeholder=\"Any internal notes about this payment…\"\n                className=\"w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none\"\n              />\n            </div>\n          </div>\n        )}\n\n        {dialog.type === 'approve' && (\n          <div>\n            <label className=\"text-xs font-medium text-foreground block mb-1\">\n              Internal notes (optional)\n            </label>\n            <textarea\n              value={notes}\n              onChange={(e) => setNotes(e.target.value)}\n              rows={3}\n              placeholder=\"e.g. Verified bank details, approved for transfer…\"\n              className=\"w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none\"\n            />\n          </div>\n        )}\n\n        {dialog.type === 'reject' && (\n          <div>\n            <label className=\"text-xs font-medium text-foreground block mb-1\">\n              Reason for rejection <span className=\"text-destructive\">*</span>\n            </label>\n            <textarea\n              value={reason}\n              onChange={(e) => setReason(e.target.value)}\n              rows={3}\n              placeholder=\"e.g. Invalid bank details provided, please re-submit with correct IFSC…\"\n              className=\"w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none\"\n            />\n          </div>\n        )}\n\n        <div className=\"flex justify-end gap-2 pt-2\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={submitting}\n            className=\"rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground disabled:opacity-50\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => void handleSubmit()}\n            disabled={submitting || (dialog.type === 'reject' && !reason.trim())}\n            className={`rounded-md px-4 py-2 text-sm font-medium disabled:opacity-50 ${\n              dialog.type === 'reject'\n                ? 'bg-destructive text-destructive-foreground'\n                : 'bg-primary text-primary-foreground'\n            }`}\n          >\n            {submitting\n              ? 'Saving…'\n              : dialog.type === 'approve'\n                ? 'Approve'\n                : dialog.type === 'reject'\n                  ? 'Reject'\n                  : 'Confirm Payment'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const PayoutAdminPage: FC = () => {\n  const permissions = useBillingPermissions();\n  const { emit } = useBillingEventEmitter();\n  const { apiGatewayUrl, authToken, orgId } = useBilling();\n\n  const [summary, setSummary] = useState<PayoutAdminSummary | null>(null);\n  const [requests, setRequests] = useState<PayoutRequest[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n  const [activeTab, setActiveTab] = useState<Tab>('pending');\n  const [dialog, setDialog] = useState<ActionDialogState | null>(null);\n\n  const requestContext = useMemo(\n    () => ({ apiGatewayUrl, authToken, orgId }),\n    [apiGatewayUrl, authToken, orgId]\n  );\n\n  const loadData = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const [loadedSummary, loadedRequests] = await Promise.all([\n        fetchAdminPayoutSummary(requestContext),\n        fetchAdminPayoutRequests(requestContext),\n      ]);\n      setSummary(loadedSummary);\n      setRequests(loadedRequests);\n    } catch (loadError) {\n      setError(loadError instanceof Error ? loadError : new Error('Failed to load payout queue'));\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    void loadData();\n  }, [requestContext]);\n\n  if (!permissions.isBillingAdmin) {\n    return <AccessDenied message=\"You don't have permission to manage payouts.\" />;\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <ServerError\n        title=\"Payout queue unavailable\"\n        message={error.message}\n        onRetry={() => void loadData()}\n        showRetry\n      />\n    );\n  }\n\n  const pending = requests.filter((r) => r.status === 'REQUESTED');\n  const approved = requests.filter((r) => r.status === 'APPROVED' || r.status === 'PROCESSING');\n  const history = requests.filter((r) =>\n    ['PAID', 'REJECTED', 'FAILED', 'CANCELED'].includes(r.status)\n  );\n\n  const tabItems: { id: Tab; label: string; count: number }[] = [\n    { id: 'pending', label: 'Pending', count: pending.length },\n    { id: 'approved', label: 'Approved', count: approved.length },\n    { id: 'history', label: 'History', count: history.length },\n  ];\n\n  const visibleRequests =\n    activeTab === 'pending' ? pending : activeTab === 'approved' ? approved : history;\n\n  const openDialog = (type: ActionDialogState['type'], request: PayoutRequest) => {\n    setDialog({\n      type,\n      requestId: request.id,\n      amount: request.requestedAmount,\n      currency: request.currency,\n      accountLabel:\n        request.payoutAccount?.displayName ?? request.payoutAccount?.label ?? 'Unknown account',\n    });\n  };\n\n  const handleConfirm = async (data: {\n    notes?: string;\n    reason?: string;\n    externalReference?: string;\n  }) => {\n    if (!dialog) return;\n\n    try {\n      if (dialog.type === 'approve') {\n        await approvePayoutRequest(dialog.requestId, data.notes ?? null, requestContext);\n        emit('billing.payout.approved', {\n          route: '/billing/payouts',\n          entityId: dialog.requestId,\n          source: 'payout-admin',\n        });\n      } else if (dialog.type === 'reject') {\n        await rejectPayoutRequest(dialog.requestId, data.reason ?? '', requestContext);\n        emit('billing.payout.rejected', {\n          route: '/billing/payouts',\n          entityId: dialog.requestId,\n          source: 'payout-admin',\n          reason: data.reason,\n        });\n      } else if (dialog.type === 'mark_paid') {\n        await markPayoutPaid(\n          dialog.requestId,\n          data.externalReference ?? null,\n          data.notes ?? null,\n          requestContext\n        );\n        emit('billing.payout.processed', {\n          route: '/billing/payouts',\n          entityId: dialog.requestId,\n          source: 'payout-admin',\n        });\n      }\n      setDialog(null);\n      await loadData();\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Action failed'));\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title=\"Payout queue\"\n        description=\"Review withdrawal requests, verify bank details, and mark payments as paid once transferred.\"\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => void loadData()}\n            className=\"inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground\"\n          >\n            <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />\n            Refresh\n          </button>\n        }\n      />\n\n      {summary && !loading && <SummaryBar summary={summary} />}\n\n      {loading && (\n        <div className=\"grid gap-3 sm:grid-cols-3\">\n          {[1, 2, 3].map((i) => (\n            <div key={i} className=\"h-20 animate-pulse rounded-lg border border-border bg-card\" />\n          ))}\n        </div>\n      )}\n\n      {error && !isServerError(error) && (\n        <div className=\"rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive\">\n          {error.message}\n        </div>\n      )}\n\n      {/* Tabs */}\n      <div className=\"border-b border-border\">\n        <div className=\"flex gap-0\">\n          {tabItems.map((tab) => (\n            <button\n              key={tab.id}\n              type=\"button\"\n              onClick={() => setActiveTab(tab.id)}\n              className={`flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${\n                activeTab === tab.id\n                  ? 'border-primary text-foreground'\n                  : 'border-transparent text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {tab.label}\n              {tab.count > 0 && (\n                <span\n                  className={`rounded-full px-1.5 py-0.5 text-xs ${\n                    activeTab === tab.id\n                      ? 'bg-primary text-primary-foreground'\n                      : 'bg-muted text-muted-foreground'\n                  }`}\n                >\n                  {tab.count}\n                </span>\n              )}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* How to pay — shown only on the Approved tab */}\n      {activeTab === 'approved' && approved.length > 0 && (\n        <div className=\"rounded-lg border border-info-border bg-info-surface px-4 py-3 text-sm text-info-foreground\">\n          <strong>How to pay:</strong> Click the account row to expand bank/UPI details → transfer\n          the exact amount via your bank → click <strong>Mark as Paid</strong> and enter the UTR /\n          transaction reference number.\n        </div>\n      )}\n\n      {/* Request cards */}\n      {loading ? (\n        <div className=\"space-y-4\">\n          {[1, 2].map((i) => (\n            <div key={i} className=\"h-40 animate-pulse rounded-lg border border-border bg-card\" />\n          ))}\n        </div>\n      ) : visibleRequests.length === 0 ? (\n        <EmptyState\n          icon={<CheckCircle2 className=\"size-8\" />}\n          title={\n            activeTab === 'pending'\n              ? 'No pending requests'\n              : activeTab === 'approved'\n                ? 'No approved requests awaiting payment'\n                : 'No history yet'\n          }\n          description={\n            activeTab === 'pending'\n              ? 'New withdrawal requests will appear here.'\n              : activeTab === 'approved'\n                ? 'Approve pending requests first, then send payment and mark as paid.'\n                : 'Completed and rejected requests will appear here.'\n          }\n        />\n      ) : (\n        <div className=\"space-y-4\">\n          {visibleRequests.map((request) => (\n            <RequestCard\n              key={request.id}\n              request={request}\n              onApprove={(r) => openDialog('approve', r)}\n              onReject={(r) => openDialog('reject', r)}\n              onMarkPaid={(r) => openDialog('mark_paid', r)}\n            />\n          ))}\n        </div>\n      )}\n\n      {dialog && (\n        <ActionDialog dialog={dialog} onClose={() => setDialog(null)} onConfirm={handleConfirm} />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PayoutAdminPage.js","names":[],"sources":["../../../../../src/billing/modules/earnings/pages/PayoutAdminPage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type FC } from 'react';\nimport {\n  AlertTriangle,\n  Banknote,\n  CheckCircle2,\n  ChevronDown,\n  ChevronUp,\n  Clock,\n  CreditCard,\n  RefreshCw,\n  ReceiptText,\n  XCircle,\n} from 'lucide-react';\n\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { AccessDenied, EmptyState, PageHeader, ServerError } from '../../../shared/components';\nimport { formatCurrency, formatDateTime, isServerError } from '../../../shared/utils';\nimport {\n  approvePayoutRequest,\n  fetchAdminPayoutRequests,\n  fetchAdminPayoutSummary,\n  markPayoutPaid,\n  rejectPayoutRequest,\n  type PayoutAdminSummary,\n  type PayoutRequest,\n} from '../api';\n\ntype Tab = 'pending' | 'approved' | 'history';\n\ninterface ActionDialogState {\n  type: 'approve' | 'reject' | 'mark_paid';\n  requestId: string;\n  amount: number;\n  currency: string;\n  accountLabel: string;\n}\n\nconst STATUS_LABEL: Record<string, string> = {\n  REQUESTED: 'Requested',\n  APPROVED: 'Approved',\n  REJECTED: 'Rejected',\n  PROCESSING: 'Processing',\n  PAID: 'Paid',\n  FAILED: 'Failed',\n  CANCELED: 'Canceled',\n};\n\nconst STATUS_COLORS: Record<string, string> = {\n  REQUESTED: 'bg-status-warning-bg-subtle text-status-warning-text',\n  APPROVED: 'bg-status-info-bg-subtle text-status-info-text',\n  REJECTED: 'bg-status-error-bg-subtle text-status-error-text',\n  PROCESSING: 'bg-status-info-bg-subtle text-status-info-text',\n  PAID: 'bg-status-success-bg-subtle text-status-success-text',\n  FAILED: 'bg-status-error-bg-subtle text-status-error-text',\n  CANCELED: 'bg-bg-sunken text-text-muted',\n};\n\nfunction StatusBadge({ status }: { status: string }) {\n  return (\n    <span\n      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLORS[status] ?? 'bg-bg-sunken text-text-muted'}`}\n    >\n      {STATUS_LABEL[status] ?? status}\n    </span>\n  );\n}\n\nfunction AccountDetails({ account }: { account: NonNullable<PayoutRequest['payoutAccount']> }) {\n  const [expanded, setExpanded] = useState(false);\n  const details = account.accountDetails as Record<string, string | null> | null;\n\n  return (\n    <div className=\"rounded-md border border-border-subtle bg-bg-sunken/40 p-3 text-sm\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2 text-text-primary font-medium\">\n          <CreditCard className=\"size-4 text-text-muted\" />\n          {account.displayName ?? account.label}\n          <span className=\"text-xs text-text-muted font-normal\">\n            ({account.type === 'UPI' ? 'UPI' : 'Bank'} · {account.country ?? 'Unknown'} ·{' '}\n            {account.currency})\n          </span>\n        </div>\n        {details && (\n          <button\n            type=\"button\"\n            onClick={() => setExpanded((v) => !v)}\n            className=\"text-text-muted hover:text-text-primary\"\n          >\n            {expanded ? <ChevronUp className=\"size-4\" /> : <ChevronDown className=\"size-4\" />}\n          </button>\n        )}\n      </div>\n      {expanded && details && (\n        <div className=\"mt-2 grid gap-1 text-xs\">\n          {details.accountHolderName && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-text-muted w-32 shrink-0\">Account holder</span>\n              <span className=\"text-text-primary\">{details.accountHolderName}</span>\n            </div>\n          )}\n          {details.bankName && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-text-muted w-32 shrink-0\">Bank</span>\n              <span className=\"text-text-primary\">{details.bankName}</span>\n            </div>\n          )}\n          {account.accountLast4 && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-text-muted w-32 shrink-0\">Account (last 4)</span>\n              <span className=\"text-text-primary font-mono\">••••{account.accountLast4}</span>\n            </div>\n          )}\n          {details.ifsc && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-text-muted w-32 shrink-0\">IFSC</span>\n              <span className=\"text-text-primary font-mono\">{details.ifsc}</span>\n            </div>\n          )}\n          {details.routingNumberLast4 && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-text-muted w-32 shrink-0\">Routing (last 4)</span>\n              <span className=\"text-text-primary font-mono\">••••{details.routingNumberLast4}</span>\n            </div>\n          )}\n          {details.upiIdMasked && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-text-muted w-32 shrink-0\">UPI ID</span>\n              <span className=\"text-text-primary font-mono\">{details.upiIdMasked}</span>\n            </div>\n          )}\n          {details.swift && (\n            <div className=\"flex gap-2\">\n              <span className=\"text-text-muted w-32 shrink-0\">SWIFT</span>\n              <span className=\"text-text-primary font-mono\">{details.swift}</span>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction RequestCard({\n  request,\n  onApprove,\n  onReject,\n  onMarkPaid,\n}: {\n  request: PayoutRequest;\n  onApprove: (r: PayoutRequest) => void;\n  onReject: (r: PayoutRequest) => void;\n  onMarkPaid: (r: PayoutRequest) => void;\n}) {\n  const canApprove = request.status === 'REQUESTED' || request.status === 'REJECTED';\n  const canReject = request.status === 'REQUESTED' || request.status === 'APPROVED';\n  const canMarkPaid = request.status === 'APPROVED' || request.status === 'PROCESSING';\n\n  return (\n    <div className=\"rounded-card border border-border-subtle bg-bg-surface p-5 space-y-4 shadow-[var(--shadow-elevation-1)] transition-all duration-200 hover:shadow-[var(--shadow-elevation-2)]\">\n      {/* Header row */}\n      <div className=\"flex flex-wrap items-start justify-between gap-3\">\n        <div className=\"space-y-1\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-xl font-semibold text-text-primary\">\n              {formatCurrency(request.requestedAmount, request.currency)}\n            </span>\n            <StatusBadge status={request.status} />\n          </div>\n          <div className=\"text-xs text-text-muted space-x-2\">\n            <span>Requested {formatDateTime(request.createdAt)}</span>\n            {request.requesterUserId && (\n              <>\n                <span>·</span>\n                <span>by {request.requesterUserId}</span>\n              </>\n            )}\n            <span>·</span>\n            <span className=\"font-mono text-xs\">{request.id.slice(0, 8)}…</span>\n          </div>\n        </div>\n        <div className=\"flex flex-wrap gap-2\">\n          {canApprove && (\n            <button\n              type=\"button\"\n              onClick={() => onApprove(request)}\n              className=\"inline-flex items-center gap-1.5 rounded-button bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text\"\n            >\n              <CheckCircle2 className=\"size-3.5\" />\n              Approve\n            </button>\n          )}\n          {canMarkPaid && (\n            <button\n              type=\"button\"\n              onClick={() => onMarkPaid(request)}\n              className=\"inline-flex items-center gap-1.5 rounded-button bg-status-success-bg-subtle border border-status-success-border px-3 py-1.5 text-xs font-medium text-status-success-text transition-colors hover:bg-status-success-bg-subtle/70\"\n            >\n              <Banknote className=\"size-3.5\" />\n              Mark as Paid\n            </button>\n          )}\n          {canReject && (\n            <button\n              type=\"button\"\n              onClick={() => onReject(request)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-1.5 text-xs font-medium text-status-error-text\"\n            >\n              <XCircle className=\"size-3.5\" />\n              Reject\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Payout account */}\n      {request.payoutAccount && <AccountDetails account={request.payoutAccount} />}\n\n      {/* User notes */}\n      {request.userNotes && (\n        <div className=\"rounded-md bg-bg-sunken/40 border border-border-subtle px-3 py-2 text-sm\">\n          <span className=\"text-xs font-medium text-text-muted uppercase tracking-wide\">\n            User note\n          </span>\n          <p className=\"mt-1 text-text-primary\">{request.userNotes}</p>\n        </div>\n      )}\n\n      {/* Internal notes / failure / ref */}\n      {(request.internalNotes ?? request.failureReason ?? request.externalReference) && (\n        <div className=\"grid gap-1 text-xs text-text-muted\">\n          {request.externalReference && (\n            <div className=\"flex gap-2\">\n              <ReceiptText className=\"size-3.5 mt-px shrink-0\" />\n              <span>\n                Ref:{' '}\n                <span className=\"font-mono text-text-primary\">{request.externalReference}</span>\n              </span>\n            </div>\n          )}\n          {request.internalNotes && (\n            <div className=\"flex gap-2\">\n              <span className=\"shrink-0\">Internal note:</span>\n              <span className=\"text-text-primary\">{request.internalNotes}</span>\n            </div>\n          )}\n          {request.failureReason && (\n            <div className=\"flex gap-2 text-status-error-text\">\n              <AlertTriangle className=\"size-3.5 mt-px shrink-0\" />\n              <span>{request.failureReason}</span>\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Timestamps */}\n      {(request.paidAt ?? request.processedAt) && (\n        <div className=\"flex flex-wrap gap-4 text-xs text-text-muted\">\n          {request.processedAt && (\n            <span className=\"flex items-center gap-1\">\n              <Clock className=\"size-3\" />\n              Processed {formatDateTime(request.processedAt)}\n            </span>\n          )}\n          {request.paidAt && (\n            <span className=\"flex items-center gap-1\">\n              <CheckCircle2 className=\"size-3\" />\n              Paid {formatDateTime(request.paidAt)}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SummaryBar({ summary }: { summary: PayoutAdminSummary }) {\n  return (\n    <div className=\"grid gap-3 sm:grid-cols-3\">\n      <div className=\"rounded-card border border-border-subtle bg-bg-surface p-4 shadow-[var(--shadow-elevation-1)]\">\n        <div className=\"text-xs text-text-muted uppercase tracking-wide\">Pending payout</div>\n        <div className=\"mt-1 text-lg font-semibold text-text-primary\">\n          {formatCurrency(summary.totalRequestedAmount, 'USD')}\n        </div>\n        <div className=\"text-xs text-text-muted mt-0.5\">{summary.pendingCount} requests</div>\n      </div>\n      <div className=\"rounded-card border border-border-subtle bg-bg-surface p-4 shadow-[var(--shadow-elevation-1)]\">\n        <div className=\"text-xs text-text-muted uppercase tracking-wide\">Processing</div>\n        <div className=\"mt-1 text-lg font-semibold text-text-primary\">\n          {formatCurrency(summary.totalProcessingAmount, 'USD')}\n        </div>\n      </div>\n      <div className=\"rounded-card border border-border-subtle bg-bg-surface p-4 shadow-[var(--shadow-elevation-1)]\">\n        <div className=\"text-xs text-text-muted uppercase tracking-wide\">Total paid</div>\n        <div className=\"mt-1 text-lg font-semibold text-text-primary\">\n          {formatCurrency(summary.totalPaidAmount, 'USD')}\n        </div>\n        {summary.failedCount > 0 && (\n          <div className=\"text-xs text-status-error-text mt-0.5\">{summary.failedCount} failed</div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction ActionDialog({\n  dialog,\n  onClose,\n  onConfirm,\n}: {\n  dialog: ActionDialogState;\n  onClose: () => void;\n  onConfirm: (data: {\n    notes?: string;\n    reason?: string;\n    externalReference?: string;\n  }) => Promise<void>;\n}) {\n  const [notes, setNotes] = useState('');\n  const [reason, setReason] = useState('');\n  const [txnRef, setTxnRef] = useState('');\n  const [submitting, setSubmitting] = useState(false);\n\n  const handleSubmit = async () => {\n    if (dialog.type === 'reject' && !reason.trim()) return;\n    setSubmitting(true);\n    await onConfirm({\n      notes: notes.trim() || undefined,\n      reason: reason.trim() || undefined,\n      externalReference: txnRef.trim() || undefined,\n    });\n    setSubmitting(false);\n  };\n\n  const titles = {\n    approve: 'Approve withdrawal request',\n    reject: 'Reject withdrawal request',\n    mark_paid: 'Mark as paid',\n  };\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay p-4\">\n      <div className=\"w-full max-w-md rounded-card border border-border-subtle bg-bg-elevated p-6 shadow-[var(--shadow-elevation-4)] space-y-4\">\n        <div>\n          <h3 className=\"text-base font-semibold text-text-primary\">{titles[dialog.type]}</h3>\n          <p className=\"text-sm text-text-muted mt-1\">\n            {formatCurrency(dialog.amount, dialog.currency)} · {dialog.accountLabel}\n          </p>\n        </div>\n\n        {dialog.type === 'mark_paid' && (\n          <div className=\"space-y-3\">\n            <div>\n              <label className=\"text-xs font-medium text-text-primary block mb-1\">\n                Transaction reference / UTR number\n              </label>\n              <input\n                type=\"text\"\n                value={txnRef}\n                onChange={(e) => setTxnRef(e.target.value)}\n                placeholder=\"e.g. UTR123456789012, TXN_abc123\"\n                className=\"w-full rounded-input border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-ring\"\n              />\n              <p className=\"text-xs text-text-muted mt-1\">\n                Enter the bank reference number so the user can verify the transfer.\n              </p>\n            </div>\n            <div>\n              <label className=\"text-xs font-medium text-text-primary block mb-1\">\n                Internal notes (optional)\n              </label>\n              <textarea\n                value={notes}\n                onChange={(e) => setNotes(e.target.value)}\n                rows={2}\n                placeholder=\"Any internal notes about this payment…\"\n                className=\"w-full rounded-input border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-ring resize-none\"\n              />\n            </div>\n          </div>\n        )}\n\n        {dialog.type === 'approve' && (\n          <div>\n            <label className=\"text-xs font-medium text-text-primary block mb-1\">\n              Internal notes (optional)\n            </label>\n            <textarea\n              value={notes}\n              onChange={(e) => setNotes(e.target.value)}\n              rows={3}\n              placeholder=\"e.g. Verified bank details, approved for transfer…\"\n              className=\"w-full rounded-input border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-ring resize-none\"\n            />\n          </div>\n        )}\n\n        {dialog.type === 'reject' && (\n          <div>\n            <label className=\"text-xs font-medium text-text-primary block mb-1\">\n              Reason for rejection <span className=\"text-status-error-text\">*</span>\n            </label>\n            <textarea\n              value={reason}\n              onChange={(e) => setReason(e.target.value)}\n              rows={3}\n              placeholder=\"e.g. Invalid bank details provided, please re-submit with correct IFSC…\"\n              className=\"w-full rounded-input border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-ring resize-none\"\n            />\n          </div>\n        )}\n\n        <div className=\"flex justify-end gap-2 pt-2\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={submitting}\n            className=\"rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary disabled:opacity-50\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => void handleSubmit()}\n            disabled={submitting || (dialog.type === 'reject' && !reason.trim())}\n            className={`rounded-md px-4 py-2 text-sm font-medium disabled:opacity-50 ${\n              dialog.type === 'reject'\n                ? 'bg-action-danger-bg text-action-danger-text'\n                : 'bg-action-primary-bg text-action-primary-text'\n            }`}\n          >\n            {submitting\n              ? 'Saving…'\n              : dialog.type === 'approve'\n                ? 'Approve'\n                : dialog.type === 'reject'\n                  ? 'Reject'\n                  : 'Confirm Payment'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const PayoutAdminPage: FC = () => {\n  const permissions = useBillingPermissions();\n  const { emit } = useBillingEventEmitter();\n  const { apiGatewayUrl, authToken, orgId } = useBilling();\n\n  const [summary, setSummary] = useState<PayoutAdminSummary | null>(null);\n  const [requests, setRequests] = useState<PayoutRequest[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n  const [activeTab, setActiveTab] = useState<Tab>('pending');\n  const [dialog, setDialog] = useState<ActionDialogState | null>(null);\n\n  const requestContext = useMemo(\n    () => ({ apiGatewayUrl, authToken, orgId }),\n    [apiGatewayUrl, authToken, orgId]\n  );\n\n  const loadData = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const [loadedSummary, loadedRequests] = await Promise.all([\n        fetchAdminPayoutSummary(requestContext),\n        fetchAdminPayoutRequests(requestContext),\n      ]);\n      setSummary(loadedSummary);\n      setRequests(loadedRequests);\n    } catch (loadError) {\n      setError(loadError instanceof Error ? loadError : new Error('Failed to load payout queue'));\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    void loadData();\n  }, [requestContext]);\n\n  if (!permissions.isBillingAdmin) {\n    return <AccessDenied message=\"You don't have permission to manage payouts.\" />;\n  }\n\n  if (error && isServerError(error)) {\n    return (\n      <ServerError\n        title=\"Payout queue unavailable\"\n        message={error.message}\n        onRetry={() => void loadData()}\n        showRetry\n      />\n    );\n  }\n\n  const pending = requests.filter((r) => r.status === 'REQUESTED');\n  const approved = requests.filter((r) => r.status === 'APPROVED' || r.status === 'PROCESSING');\n  const history = requests.filter((r) =>\n    ['PAID', 'REJECTED', 'FAILED', 'CANCELED'].includes(r.status)\n  );\n\n  const tabItems: { id: Tab; label: string; count: number }[] = [\n    { id: 'pending', label: 'Pending', count: pending.length },\n    { id: 'approved', label: 'Approved', count: approved.length },\n    { id: 'history', label: 'History', count: history.length },\n  ];\n\n  const visibleRequests =\n    activeTab === 'pending' ? pending : activeTab === 'approved' ? approved : history;\n\n  const openDialog = (type: ActionDialogState['type'], request: PayoutRequest) => {\n    setDialog({\n      type,\n      requestId: request.id,\n      amount: request.requestedAmount,\n      currency: request.currency,\n      accountLabel:\n        request.payoutAccount?.displayName ?? request.payoutAccount?.label ?? 'Unknown account',\n    });\n  };\n\n  const handleConfirm = async (data: {\n    notes?: string;\n    reason?: string;\n    externalReference?: string;\n  }) => {\n    if (!dialog) return;\n\n    try {\n      if (dialog.type === 'approve') {\n        await approvePayoutRequest(dialog.requestId, data.notes ?? null, requestContext);\n        emit('billing.payout.approved', {\n          route: '/billing/payouts',\n          entityId: dialog.requestId,\n          source: 'payout-admin',\n        });\n      } else if (dialog.type === 'reject') {\n        await rejectPayoutRequest(dialog.requestId, data.reason ?? '', requestContext);\n        emit('billing.payout.rejected', {\n          route: '/billing/payouts',\n          entityId: dialog.requestId,\n          source: 'payout-admin',\n          reason: data.reason,\n        });\n      } else if (dialog.type === 'mark_paid') {\n        await markPayoutPaid(\n          dialog.requestId,\n          data.externalReference ?? null,\n          data.notes ?? null,\n          requestContext\n        );\n        emit('billing.payout.processed', {\n          route: '/billing/payouts',\n          entityId: dialog.requestId,\n          source: 'payout-admin',\n        });\n      }\n      setDialog(null);\n      await loadData();\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Action failed'));\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title=\"Payout queue\"\n        description=\"Review withdrawal requests, verify bank details, and mark payments as paid once transferred.\"\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => void loadData()}\n            className=\"inline-flex items-center gap-2 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary\"\n          >\n            <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />\n            Refresh\n          </button>\n        }\n      />\n\n      {summary && !loading && <SummaryBar summary={summary} />}\n\n      {loading && (\n        <div className=\"grid gap-3 sm:grid-cols-3\">\n          {[1, 2, 3].map((i) => (\n            <div\n              key={i}\n              className=\"h-20 animate-pulse rounded-lg border border-border-subtle bg-bg-surface\"\n            />\n          ))}\n        </div>\n      )}\n\n      {error && !isServerError(error) && (\n        <div className=\"rounded-lg border border-status-error-border bg-status-error-bg-subtle p-4 text-sm text-status-error-text\">\n          {error.message}\n        </div>\n      )}\n\n      {/* Tabs */}\n      <div className=\"border-b border-border-subtle\">\n        <div className=\"flex gap-0\">\n          {tabItems.map((tab) => (\n            <button\n              key={tab.id}\n              type=\"button\"\n              onClick={() => setActiveTab(tab.id)}\n              className={`flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${\n                activeTab === tab.id\n                  ? 'border-action-primary-bg text-text-primary'\n                  : 'border-transparent text-text-muted hover:text-text-primary'\n              }`}\n            >\n              {tab.label}\n              {tab.count > 0 && (\n                <span\n                  className={`rounded-full px-1.5 py-0.5 text-xs ${\n                    activeTab === tab.id\n                      ? 'bg-action-primary-bg text-action-primary-text'\n                      : 'bg-bg-sunken text-text-muted'\n                  }`}\n                >\n                  {tab.count}\n                </span>\n              )}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* How to pay — shown only on the Approved tab */}\n      {activeTab === 'approved' && approved.length > 0 && (\n        <div className=\"rounded-card border border-status-info-border bg-status-info-bg-subtle px-4 py-3 text-sm text-status-info-text\">\n          <strong>How to pay:</strong> Click the account row to expand bank/UPI details → transfer\n          the exact amount via your bank → click <strong>Mark as Paid</strong> and enter the UTR /\n          transaction reference number.\n        </div>\n      )}\n\n      {/* Request cards */}\n      {loading ? (\n        <div className=\"space-y-4\">\n          {[1, 2].map((i) => (\n            <div\n              key={i}\n              className=\"h-40 animate-pulse rounded-lg border border-border-subtle bg-bg-surface\"\n            />\n          ))}\n        </div>\n      ) : visibleRequests.length === 0 ? (\n        <EmptyState\n          icon={<CheckCircle2 className=\"size-8\" />}\n          title={\n            activeTab === 'pending'\n              ? 'No pending requests'\n              : activeTab === 'approved'\n                ? 'No approved requests awaiting payment'\n                : 'No history yet'\n          }\n          description={\n            activeTab === 'pending'\n              ? 'New withdrawal requests will appear here.'\n              : activeTab === 'approved'\n                ? 'Approve pending requests first, then send payment and mark as paid.'\n                : 'Completed and rejected requests will appear here.'\n          }\n        />\n      ) : (\n        <div className=\"space-y-4\">\n          {visibleRequests.map((request) => (\n            <RequestCard\n              key={request.id}\n              request={request}\n              onApprove={(r) => openDialog('approve', r)}\n              onReject={(r) => openDialog('reject', r)}\n              onMarkPaid={(r) => openDialog('mark_paid', r)}\n            />\n          ))}\n        </div>\n      )}\n\n      {dialog && (\n        <ActionDialog dialog={dialog} onClose={() => setDialog(null)} onConfirm={handleConfirm} />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/plans/pages/PlanAssignFreePage.js

@@ -54,7 +54,7 @@ var u = () => {
 				actions: /* @__PURE__ */ s("button", {
 					type: "button",
 					onClick: () => f("/plans"),
-					className: "px-3 py-2 text-sm border border-border rounded-md text-foreground hover:bg-muted transition-colors",
+					className: "px-3 py-2 text-sm border border-border-subtle rounded-md text-text-primary hover:bg-bg-sunken transition-colors",
 					children: "← Back to Plans"
 				})
 			}),
@@ -81,12 +81,12 @@ var u = () => {
 			}),
 			/* @__PURE__ */ c("form", {
 				onSubmit: O,
-				className: "border border-border rounded-lg bg-card overflow-hidden",
+				className: "border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]",
 				children: [
 					/* @__PURE__ */ s("div", {
-						className: "p-4 border-b border-border bg-muted/30",
+						className: "p-4 border-b border-border-subtle bg-bg-sunken/30",
 						children: /* @__PURE__ */ s("h2", {
-							className: "font-semibold text-foreground",
+							className: "font-semibold text-text-primary",
 							children: "Assignment Details"
 						})
 					}),
@@ -96,7 +96,7 @@ var u = () => {
 							/* @__PURE__ */ c("div", { children: [
 								/* @__PURE__ */ c("label", {
 									htmlFor: "secret",
-									className: "block text-sm font-medium text-foreground mb-1",
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: ["Team Secret ", /* @__PURE__ */ s("span", {
 										className: "text-status-error-text",
 										children: "*"
@@ -108,19 +108,19 @@ var u = () => {
 									value: m,
 									onChange: (e) => h(e.target.value),
 									autoComplete: "off",
-									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary font-mono",
+									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] font-mono",
 									placeholder: "Enter PLAN_ASSIGN_SECRET",
 									required: !0
 								}),
 								/* @__PURE__ */ s("p", {
-									className: "text-xs text-muted-foreground mt-1",
+									className: "text-xs text-text-muted mt-1",
 									children: "The secret key shared within the team. Never expose this to users."
 								})
 							] }),
 							/* @__PURE__ */ c("div", { children: [
 								/* @__PURE__ */ c("label", {
 									htmlFor: "billingAccountId",
-									className: "block text-sm font-medium text-foreground mb-1",
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: ["Billing Account ID ", /* @__PURE__ */ s("span", {
 										className: "text-status-error-text",
 										children: "*"
@@ -131,12 +131,12 @@ var u = () => {
 									type: "text",
 									value: g,
 									onChange: (e) => _(e.target.value),
-									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary font-mono text-sm",
+									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] font-mono text-sm",
 									placeholder: "e.g. ba_01jk3n2...",
 									required: !0
 								}),
 								/* @__PURE__ */ s("p", {
-									className: "text-xs text-muted-foreground mt-1",
+									className: "text-xs text-text-muted mt-1",
 									children: "Find this in the user's billing account settings or via the billing accounts list."
 								})
 							] }),
@@ -165,17 +165,17 @@ var u = () => {
 							/* @__PURE__ */ c("div", { children: [
 								/* @__PURE__ */ c("label", {
 									htmlFor: "planId",
-									className: "block text-sm font-medium text-foreground mb-1",
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: ["Plan ", /* @__PURE__ */ s("span", {
 										className: "text-status-error-text",
 										children: "*"
 									})]
 								}),
-								T ? /* @__PURE__ */ s("div", { className: "h-10 bg-muted animate-pulse rounded-md" }) : /* @__PURE__ */ c("select", {
+								T ? /* @__PURE__ */ s("div", { className: "h-10 bg-bg-sunken animate-pulse rounded-md" }) : /* @__PURE__ */ c("select", {
 									id: "planId",
 									value: v,
 									onChange: (e) => y(e.target.value),
-									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
+									className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 									required: !0,
 									children: [/* @__PURE__ */ s("option", {
 										value: "",
@@ -191,7 +191,7 @@ var u = () => {
 									}, e.id))]
 								}),
 								k && /* @__PURE__ */ c("p", {
-									className: "text-xs text-muted-foreground mt-1",
+									className: "text-xs text-text-muted mt-1",
 									children: [k.isPurchasable ? "Public plan" : "Internal / non-purchasable plan", k.productID ? ` · Product: ${k.productID}` : ""]
 								})
 							] })
@@ -206,14 +206,14 @@ var u = () => {
 						children: [/* @__PURE__ */ s("button", {
 							type: "submit",
 							disabled: D || !m || !g || !v,
-							className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+							className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 							children: D ? "Assigning…" : "Assign Plan for Free"
 						}), /* @__PURE__ */ s("button", {
 							type: "button",
 							onClick: () => {
 								h(""), _(""), y(""), x(""), C(null);
 							},
-							className: "px-4 py-2 text-sm border border-border rounded-md text-foreground hover:bg-muted transition-colors",
+							className: "px-4 py-2 text-sm border border-border-subtle rounded-md text-text-primary hover:bg-bg-sunken transition-colors",
 							children: "Clear"
 						})]
 					})

package/dist/billing/modules/plans/pages/PlanAssignFreePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlanAssignFreePage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanAssignFreePage.tsx"],"sourcesContent":["/**\n * Plans Module - Assign Plan Free (Admin only)\n *\n * Internal tool for assigning any plan to a billing account at no charge.\n * Protected by PLAN_ASSIGN_SECRET — only team members who know the secret\n * can use this page. Never expose to end users.\n *\n * Route: /billing/plans/assign-free\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useAssignPlanFreeMutation } from '../../../../generated/global-operations';\nimport { usePlans } from '../hooks';\n\nexport const PlanAssignFreePage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n\n  const [secret, setSecret] = useState('');\n  const [billingAccountId, setBillingAccountId] = useState('');\n  const [planId, setPlanId] = useState('');\n  const [workspaceId, setWorkspaceId] = useState('');\n  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);\n\n  // Fetch all plans (including non-purchasable internal ones) for the dropdown\n  const { plans, isLoading: isPlansLoading } = usePlans({ includeFree: true });\n\n  const [assignPlanFree, { loading: isAssigning }] = useAssignPlanFreeMutation();\n\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.assignFree.noPermission',\n          \"You don't have permission to access this page.\"\n        )}\n      />\n    );\n  }\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setResult(null);\n\n    if (!secret.trim() || !billingAccountId.trim() || !planId) {\n      setResult({ success: false, message: 'All fields are required.' });\n      return;\n    }\n\n    try {\n      const { data } = await assignPlanFree({\n        variables: {\n          secret: secret.trim(),\n          billingAccountId: billingAccountId.trim(),\n          planId,\n          ...(workspaceId.trim() ? { workspaceId: workspaceId.trim() } : {}),\n        },\n      });\n\n      if (data?.assignPlanFree) {\n        const sub = data.assignPlanFree;\n        setResult({\n          success: true,\n          message: `Plan assigned. Subscription ID: ${sub.id} · Status: ${sub.status} · Valid: ${new Date(sub.startDate).toLocaleDateString()} → ${new Date(sub.endDate).toLocaleDateString()}`,\n        });\n        // Clear sensitive fields\n        setSecret('');\n        setBillingAccountId('');\n        setPlanId('');\n        setWorkspaceId('');\n      }\n    } catch (err) {\n      const msg = err instanceof Error ? err.message : 'Failed to assign plan.';\n      setResult({ success: false, message: msg });\n    }\n  };\n\n  const selectedPlan = plans.find((p) => p.id === planId);\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-2xl\">\n      <PageHeader\n        title={tr('billing.assignFree.title', 'Assign Plan for Free')}\n        description={tr(\n          'billing.assignFree.description',\n          'Internally assign any plan to a billing account at no charge. Requires the team secret.'\n        )}\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-3 py-2 text-sm border border-border rounded-md text-foreground hover:bg-muted transition-colors\"\n          >\n            ← Back to Plans\n          </button>\n        }\n      />\n\n      {/* Warning banner */}\n      <div className=\"flex items-start gap-3 p-4 rounded-lg border border-status-warning-border bg-status-warning-bg/10\">\n        <svg\n          className=\"size-5 text-status-warning-text shrink-0 mt-0.5\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L3.072 16.5c-.77.833.192 2.5 1.732 2.5z\"\n          />\n        </svg>\n        <div>\n          <p className=\"text-sm font-medium text-status-warning-text\">Internal admin tool</p>\n          <p className=\"text-xs text-status-warning-text/80 mt-0.5\">\n            This bypasses all payment flows. The plan is assigned immediately with no charge. Use\n            only for enterprise deals or internal accounts.\n          </p>\n        </div>\n      </div>\n\n      <form\n        onSubmit={handleSubmit}\n        className=\"border border-border rounded-lg bg-card overflow-hidden\"\n      >\n        <div className=\"p-4 border-b border-border bg-muted/30\">\n          <h2 className=\"font-semibold text-foreground\">Assignment Details</h2>\n        </div>\n\n        <div className=\"p-4 space-y-4\">\n          {/* Secret */}\n          <div>\n            <label htmlFor=\"secret\" className=\"block text-sm font-medium text-foreground mb-1\">\n              Team Secret <span className=\"text-status-error-text\">*</span>\n            </label>\n            <input\n              id=\"secret\"\n              type=\"password\"\n              value={secret}\n              onChange={(e) => setSecret(e.target.value)}\n              autoComplete=\"off\"\n              className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary font-mono\"\n              placeholder=\"Enter PLAN_ASSIGN_SECRET\"\n              required\n            />\n            <p className=\"text-xs text-muted-foreground mt-1\">\n              The secret key shared within the team. Never expose this to users.\n            </p>\n          </div>\n\n          {/* Billing Account ID */}\n          <div>\n            <label\n              htmlFor=\"billingAccountId\"\n              className=\"block text-sm font-medium text-foreground mb-1\"\n            >\n              Billing Account ID <span className=\"text-status-error-text\">*</span>\n            </label>\n            <input\n              id=\"billingAccountId\"\n              type=\"text\"\n              value={billingAccountId}\n              onChange={(e) => setBillingAccountId(e.target.value)}\n              className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary font-mono text-sm\"\n              placeholder=\"e.g. ba_01jk3n2...\"\n              required\n            />\n            <p className=\"text-xs text-muted-foreground mt-1\">\n              Find this in the user's billing account settings or via the billing accounts list.\n            </p>\n          </div>\n\n          {/* Workspace ID (optional — auto-resolved from org if omitted) */}\n          <div>\n            <label htmlFor=\"workspaceId\" className=\"block text-sm font-medium text-foreground mb-1\">\n              Workspace ID <span className=\"text-muted-foreground font-normal\">(optional)</span>\n            </label>\n            <input\n              id=\"workspaceId\"\n              type=\"text\"\n              value={workspaceId}\n              onChange={(e) => setWorkspaceId(e.target.value)}\n              className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary font-mono text-sm\"\n              placeholder=\"e.g. ws_01jk3n2… (leave blank to auto-resolve)\"\n            />\n            <p className=\"text-xs text-muted-foreground mt-1\">\n              If blank, the first active workspace for this org is used automatically. Set\n              explicitly when the org has multiple workspaces.\n            </p>\n          </div>\n\n          {/* Plan selector */}\n          <div>\n            <label htmlFor=\"planId\" className=\"block text-sm font-medium text-foreground mb-1\">\n              Plan <span className=\"text-status-error-text\">*</span>\n            </label>\n            {isPlansLoading ? (\n              <div className=\"h-10 bg-muted animate-pulse rounded-md\" />\n            ) : (\n              <select\n                id=\"planId\"\n                value={planId}\n                onChange={(e) => setPlanId(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary\"\n                required\n              >\n                <option value=\"\" disabled>\n                  Select a plan…\n                </option>\n                {plans.map((plan) => (\n                  <option key={plan.id} value={plan.id}>\n                    {plan.name}\n                    {!plan.isPurchasable ? ' (internal)' : ''}\n                    {plan.price != null && plan.price > 0\n                      ? ` — ${plan.currency ?? 'USD'} ${plan.price}`\n                      : ''}\n                  </option>\n                ))}\n              </select>\n            )}\n            {selectedPlan && (\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                {selectedPlan.isPurchasable ? 'Public plan' : 'Internal / non-purchasable plan'}\n                {selectedPlan.productID ? ` · Product: ${selectedPlan.productID}` : ''}\n              </p>\n            )}\n          </div>\n        </div>\n\n        {/* Result banner */}\n        {result && (\n          <div\n            className={`mx-4 mb-4 p-3 rounded-lg border text-sm ${\n              result.success\n                ? 'border-status-success-border bg-status-success-bg/10 text-status-success-text'\n                : 'border-status-error-border bg-status-error-bg/10 text-status-error-text'\n            }`}\n          >\n            {result.message}\n          </div>\n        )}\n\n        <div className=\"px-4 pb-4 flex items-center gap-3\">\n          <button\n            type=\"submit\"\n            disabled={isAssigning || !secret || !billingAccountId || !planId}\n            className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isAssigning ? 'Assigning…' : 'Assign Plan for Free'}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setSecret('');\n              setBillingAccountId('');\n              setPlanId('');\n              setWorkspaceId('');\n              setResult(null);\n            }}\n            className=\"px-4 py-2 text-sm border border-border rounded-md text-foreground hover:bg-muted transition-colors\"\n          >\n            Clear\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PlanAssignFreePage.js","names":[],"sources":["../../../../../src/billing/modules/plans/pages/PlanAssignFreePage.tsx"],"sourcesContent":["/**\n * Plans Module - Assign Plan Free (Admin only)\n *\n * Internal tool for assigning any plan to a billing account at no charge.\n * Protected by PLAN_ASSIGN_SECRET — only team members who know the secret\n * can use this page. Never expose to end users.\n *\n * Route: /billing/plans/assign-free\n */\n\nimport { useState, type FC, type FormEvent } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { AccessDenied, PageHeader } from '../../../shared/components';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useAssignPlanFreeMutation } from '../../../../generated/global-operations';\nimport { usePlans } from '../hooks';\n\nexport const PlanAssignFreePage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n\n  const [secret, setSecret] = useState('');\n  const [billingAccountId, setBillingAccountId] = useState('');\n  const [planId, setPlanId] = useState('');\n  const [workspaceId, setWorkspaceId] = useState('');\n  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);\n\n  // Fetch all plans (including non-purchasable internal ones) for the dropdown\n  const { plans, isLoading: isPlansLoading } = usePlans({ includeFree: true });\n\n  const [assignPlanFree, { loading: isAssigning }] = useAssignPlanFreeMutation();\n\n  if (!permissions.canManagePlans) {\n    return (\n      <AccessDenied\n        message={tr(\n          'billing.assignFree.noPermission',\n          \"You don't have permission to access this page.\"\n        )}\n      />\n    );\n  }\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    setResult(null);\n\n    if (!secret.trim() || !billingAccountId.trim() || !planId) {\n      setResult({ success: false, message: 'All fields are required.' });\n      return;\n    }\n\n    try {\n      const { data } = await assignPlanFree({\n        variables: {\n          secret: secret.trim(),\n          billingAccountId: billingAccountId.trim(),\n          planId,\n          ...(workspaceId.trim() ? { workspaceId: workspaceId.trim() } : {}),\n        },\n      });\n\n      if (data?.assignPlanFree) {\n        const sub = data.assignPlanFree;\n        setResult({\n          success: true,\n          message: `Plan assigned. Subscription ID: ${sub.id} · Status: ${sub.status} · Valid: ${new Date(sub.startDate).toLocaleDateString()} → ${new Date(sub.endDate).toLocaleDateString()}`,\n        });\n        // Clear sensitive fields\n        setSecret('');\n        setBillingAccountId('');\n        setPlanId('');\n        setWorkspaceId('');\n      }\n    } catch (err) {\n      const msg = err instanceof Error ? err.message : 'Failed to assign plan.';\n      setResult({ success: false, message: msg });\n    }\n  };\n\n  const selectedPlan = plans.find((p) => p.id === planId);\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-2xl\">\n      <PageHeader\n        title={tr('billing.assignFree.title', 'Assign Plan for Free')}\n        description={tr(\n          'billing.assignFree.description',\n          'Internally assign any plan to a billing account at no charge. Requires the team secret.'\n        )}\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/plans')}\n            className=\"px-3 py-2 text-sm border border-border-subtle rounded-md text-text-primary hover:bg-bg-sunken transition-colors\"\n          >\n            ← Back to Plans\n          </button>\n        }\n      />\n\n      {/* Warning banner */}\n      <div className=\"flex items-start gap-3 p-4 rounded-lg border border-status-warning-border bg-status-warning-bg/10\">\n        <svg\n          className=\"size-5 text-status-warning-text shrink-0 mt-0.5\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L3.072 16.5c-.77.833.192 2.5 1.732 2.5z\"\n          />\n        </svg>\n        <div>\n          <p className=\"text-sm font-medium text-status-warning-text\">Internal admin tool</p>\n          <p className=\"text-xs text-status-warning-text/80 mt-0.5\">\n            This bypasses all payment flows. The plan is assigned immediately with no charge. Use\n            only for enterprise deals or internal accounts.\n          </p>\n        </div>\n      </div>\n\n      <form\n        onSubmit={handleSubmit}\n        className=\"border border-border-subtle rounded-card bg-bg-surface overflow-hidden shadow-[var(--shadow-elevation-1)]\"\n      >\n        <div className=\"p-4 border-b border-border-subtle bg-bg-sunken/30\">\n          <h2 className=\"font-semibold text-text-primary\">Assignment Details</h2>\n        </div>\n\n        <div className=\"p-4 space-y-4\">\n          {/* Secret */}\n          <div>\n            <label htmlFor=\"secret\" className=\"block text-sm font-medium text-text-primary mb-1\">\n              Team Secret <span className=\"text-status-error-text\">*</span>\n            </label>\n            <input\n              id=\"secret\"\n              type=\"password\"\n              value={secret}\n              onChange={(e) => setSecret(e.target.value)}\n              autoComplete=\"off\"\n              className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] font-mono\"\n              placeholder=\"Enter PLAN_ASSIGN_SECRET\"\n              required\n            />\n            <p className=\"text-xs text-text-muted mt-1\">\n              The secret key shared within the team. Never expose this to users.\n            </p>\n          </div>\n\n          {/* Billing Account ID */}\n          <div>\n            <label\n              htmlFor=\"billingAccountId\"\n              className=\"block text-sm font-medium text-text-primary mb-1\"\n            >\n              Billing Account ID <span className=\"text-status-error-text\">*</span>\n            </label>\n            <input\n              id=\"billingAccountId\"\n              type=\"text\"\n              value={billingAccountId}\n              onChange={(e) => setBillingAccountId(e.target.value)}\n              className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] font-mono text-sm\"\n              placeholder=\"e.g. ba_01jk3n2...\"\n              required\n            />\n            <p className=\"text-xs text-text-muted mt-1\">\n              Find this in the user's billing account settings or via the billing accounts list.\n            </p>\n          </div>\n\n          {/* Workspace ID (optional — auto-resolved from org if omitted) */}\n          <div>\n            <label htmlFor=\"workspaceId\" className=\"block text-sm font-medium text-foreground mb-1\">\n              Workspace ID <span className=\"text-muted-foreground font-normal\">(optional)</span>\n            </label>\n            <input\n              id=\"workspaceId\"\n              type=\"text\"\n              value={workspaceId}\n              onChange={(e) => setWorkspaceId(e.target.value)}\n              className=\"w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary font-mono text-sm\"\n              placeholder=\"e.g. ws_01jk3n2… (leave blank to auto-resolve)\"\n            />\n            <p className=\"text-xs text-muted-foreground mt-1\">\n              If blank, the first active workspace for this org is used automatically. Set\n              explicitly when the org has multiple workspaces.\n            </p>\n          </div>\n\n          {/* Plan selector */}\n          <div>\n            <label htmlFor=\"planId\" className=\"block text-sm font-medium text-text-primary mb-1\">\n              Plan <span className=\"text-status-error-text\">*</span>\n            </label>\n            {isPlansLoading ? (\n              <div className=\"h-10 bg-bg-sunken animate-pulse rounded-md\" />\n            ) : (\n              <select\n                id=\"planId\"\n                value={planId}\n                onChange={(e) => setPlanId(e.target.value)}\n                className=\"w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                required\n              >\n                <option value=\"\" disabled>\n                  Select a plan…\n                </option>\n                {plans.map((plan) => (\n                  <option key={plan.id} value={plan.id}>\n                    {plan.name}\n                    {!plan.isPurchasable ? ' (internal)' : ''}\n                    {plan.price != null && plan.price > 0\n                      ? ` — ${plan.currency ?? 'USD'} ${plan.price}`\n                      : ''}\n                  </option>\n                ))}\n              </select>\n            )}\n            {selectedPlan && (\n              <p className=\"text-xs text-text-muted mt-1\">\n                {selectedPlan.isPurchasable ? 'Public plan' : 'Internal / non-purchasable plan'}\n                {selectedPlan.productID ? ` · Product: ${selectedPlan.productID}` : ''}\n              </p>\n            )}\n          </div>\n        </div>\n\n        {/* Result banner */}\n        {result && (\n          <div\n            className={`mx-4 mb-4 p-3 rounded-lg border text-sm ${\n              result.success\n                ? 'border-status-success-border bg-status-success-bg/10 text-status-success-text'\n                : 'border-status-error-border bg-status-error-bg/10 text-status-error-text'\n            }`}\n          >\n            {result.message}\n          </div>\n        )}\n\n        <div className=\"px-4 pb-4 flex items-center gap-3\">\n          <button\n            type=\"submit\"\n            disabled={isAssigning || !secret || !billingAccountId || !planId}\n            className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isAssigning ? 'Assigning…' : 'Assign Plan for Free'}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setSecret('');\n              setBillingAccountId('');\n              setPlanId('');\n              setWorkspaceId('');\n              setResult(null);\n            }}\n            className=\"px-4 py-2 text-sm border border-border-subtle rounded-md text-text-primary hover:bg-bg-sunken transition-colors\"\n          >\n            Clear\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n"],"mappings":"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"}