@burdenoff/microfe-organization 2026.624.2 → 2026.625.2

package/dist/organization-management/modules/members/components/BulkInviteForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkInviteForm.js","names":[],"sources":["../../../../../src/organization-management/modules/members/components/BulkInviteForm.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { CheckCircle2, Download, Loader2, Send, Upload, XCircle } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { ResponsiveTable, type ResponsiveTableColumn } from '@burdenoff/fe-libs/ui';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport {\n  type BulkInviteRow,\n  downloadTemplate,\n  formatInviteError,\n  parseBulkInviteCsv,\n} from '../utils/bulkInviteCsv';\n\ninterface BulkInviteFormProps {\n  organizationId: string;\n  inviteMember: (input: {\n    organizationId: string;\n    email: string;\n    message?: string;\n  }) => Promise<unknown>;\n  onCancel: () => void;\n  loading?: boolean;\n}\n\ntype RowStatus =\n  | { kind: 'idle' }\n  | { kind: 'sending' }\n  | { kind: 'invited' }\n  | { kind: 'failed'; message: string };\n\ninterface PreviewRow extends BulkInviteRow {\n  status: RowStatus;\n}\n\n/**\n * Bulk-invite via CSV upload. Sequentially fires the per-row invite\n * mutation (concurrency 1) so we don't hammer the gateway and so per-row\n * errors are deterministic. Reuses the same mutation as single-invite,\n * which keeps backend behaviour (refetch, OTel events) identical.\n */\nexport function BulkInviteForm({\n  organizationId,\n  inviteMember,\n  onCancel,\n  loading,\n}: BulkInviteFormProps) {\n  const tr = useTr();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [rows, setRows] = useState<PreviewRow[]>([]);\n  const [fileName, setFileName] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [dragActive, setDragActive] = useState(false);\n\n  const handleFile = useCallback(\n    (file: File) => {\n      const reader = new FileReader();\n      reader.onload = () => {\n        const text = typeof reader.result === 'string' ? reader.result : '';\n        const parsed = parseBulkInviteCsv(text);\n        setRows(parsed.map((r) => ({ ...r, status: { kind: 'idle' } })));\n        setFileName(file.name);\n      };\n      reader.onerror = () => {\n        toast.error(tr('members.bulkInvite.readError', 'Failed to read CSV file.'));\n      };\n      reader.readAsText(file);\n    },\n    [tr]\n  );\n\n  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    if (file) handleFile(file);\n    // Reset so re-uploading the same file fires onChange again\n    e.target.value = '';\n  };\n\n  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setDragActive(false);\n    const file = e.dataTransfer.files?.[0];\n    if (file) handleFile(file);\n  };\n\n  const summary = useMemo(() => {\n    const total = rows.length;\n    const withErrors = rows.filter((r) => r.errors.length > 0).length;\n    const sendable = rows.filter((r) => r.errors.length === 0).length;\n    const invited = rows.filter((r) => r.status.kind === 'invited').length;\n    const failed = rows.filter((r) => r.status.kind === 'failed').length;\n    return { total, withErrors, sendable, invited, failed };\n  }, [rows]);\n\n  const handleSend = async () => {\n    if (summary.sendable === 0 || isSubmitting) return;\n    setIsSubmitting(true);\n\n    const sendableIndices = rows\n      .map((r, idx) => ({ r, idx }))\n      .filter(({ r }) => r.errors.length === 0 && r.status.kind !== 'invited');\n\n    for (const { idx } of sendableIndices) {\n      setRows((prev) =>\n        prev.map((row, i) => (i === idx ? { ...row, status: { kind: 'sending' } } : row))\n      );\n      const row = rows[idx];\n      try {\n        await inviteMember({\n          organizationId,\n          email: row.email,\n          message: row.message,\n        });\n        setRows((prev) =>\n          prev.map((r, i) => (i === idx ? { ...r, status: { kind: 'invited' } } : r))\n        );\n      } catch (err) {\n        const message = formatInviteError(err, tr);\n        setRows((prev) =>\n          prev.map((r, i) => (i === idx ? { ...r, status: { kind: 'failed', message } } : r))\n        );\n      }\n    }\n\n    setIsSubmitting(false);\n    setRows((prev) => {\n      const invited = prev.filter((r) => r.status.kind === 'invited').length;\n      const failed = prev.filter((r) => r.status.kind === 'failed').length;\n      toast.success(\n        `${tr('members.bulkInvite.summaryInvited', 'Invited')} ${invited} ${tr('members.bulkInvite.summaryOf', 'of')} ${prev.length}. ${failed} ${tr('members.bulkInvite.summaryFailed', 'failed')}.`\n      );\n      return prev;\n    });\n  };\n\n  const hasRows = rows.length > 0;\n  const canSubmit = summary.sendable > 0 && !isSubmitting && !loading;\n\n  const renderRowStatus = (row: PreviewRow) => {\n    const hasParseErrors = row.errors.length > 0;\n    if (hasParseErrors) {\n      return (\n        <span className=\"inline-flex items-center gap-1 text-[var(--color-status-error-text)]\">\n          <XCircle size={14} aria-hidden=\"true\" />\n          {row.errors.join(' ')}\n        </span>\n      );\n    }\n    if (row.status.kind === 'sending') {\n      return (\n        <span className=\"inline-flex items-center gap-1 text-[var(--color-text-secondary)]\">\n          <Loader2 size={14} className=\"animate-spin\" aria-hidden=\"true\" />\n          {tr('members.bulkInvite.statusSending', 'Sending...')}\n        </span>\n      );\n    }\n    if (row.status.kind === 'invited') {\n      return (\n        <span className=\"inline-flex items-center gap-1 text-[var(--color-status-success-text)]\">\n          <CheckCircle2 size={14} aria-hidden=\"true\" />\n          {tr('members.bulkInvite.statusInvited', 'Invited')}\n        </span>\n      );\n    }\n    if (row.status.kind === 'failed') {\n      return (\n        <span className=\"inline-flex items-center gap-1 text-[var(--color-status-error-text)]\">\n          <XCircle size={14} aria-hidden=\"true\" />\n          {row.status.message}\n        </span>\n      );\n    }\n    return (\n      <span className=\"text-[var(--color-text-secondary)]\">\n        {tr('members.bulkInvite.statusReady', 'Ready')}\n      </span>\n    );\n  };\n\n  const previewColumns: ResponsiveTableColumn<PreviewRow>[] = [\n    {\n      key: 'rowNumber',\n      header: '#',\n      priority: 'secondary',\n      cell: (row) => (\n        <span className=\"text-xs tabular-nums text-[var(--color-text-secondary)]\">\n          {row.rowNumber}\n        </span>\n      ),\n    },\n    {\n      key: 'email',\n      header: tr('members.bulkInvite.colEmail', 'Email'),\n      priority: 'primary',\n      cell: (row) =>\n        row.email || (\n          <span className=\"italic text-[var(--color-text-muted)]\">\n            {tr('members.bulkInvite.empty', '(empty)')}\n          </span>\n        ),\n    },\n    {\n      key: 'role',\n      header: tr('members.bulkInvite.colRole', 'Role'),\n      priority: 'secondary',\n      cell: (row) =>\n        row.role || <span className=\"text-[var(--color-text-muted)]\">MEMBER</span>,\n    },\n    {\n      key: 'status',\n      header: tr('members.bulkInvite.colStatus', 'Status'),\n      priority: 'secondary',\n      cell: (row) => renderRowStatus(row),\n    },\n  ];\n\n  return (\n    <div className=\"space-y-5\">\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p className=\"text-sm text-[var(--color-text-muted)]\">\n          {tr(\n            'members.bulkInvite.description',\n            'Upload a CSV with one row per person. Required column: email. Optional: role, message.'\n          )}\n        </p>\n        <button\n          type=\"button\"\n          onClick={downloadTemplate}\n          className=\"inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border border-[var(--color-border-default)] px-3 py-2 text-sm text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)]\"\n        >\n          <Download size={16} aria-hidden=\"true\" />\n          {tr('members.bulkInvite.downloadTemplate', 'Download template')}\n        </button>\n      </div>\n\n      <div\n        onDragOver={(e) => {\n          e.preventDefault();\n          setDragActive(true);\n        }}\n        onDragLeave={() => setDragActive(false)}\n        onDrop={onDrop}\n        className={`flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-8 transition-colors ${\n          dragActive\n            ? 'border-[var(--color-action-primary-bg)] bg-[var(--color-status-info-bgSubtle)]'\n            : 'border-[var(--color-border-default)] bg-[var(--color-bg-canvas)]'\n        }`}\n      >\n        <Upload size={28} className=\"text-[var(--color-text-secondary)]\" aria-hidden=\"true\" />\n        <div className=\"text-center\">\n          <p className=\"text-sm font-medium text-[var(--color-text-primary)]\">\n            {fileName\n              ? fileName\n              : tr('members.bulkInvite.dropHere', 'Drop a CSV file here or click to browse')}\n          </p>\n          <p className=\"mt-1 text-xs text-[var(--color-text-muted)]\">\n            {tr('members.bulkInvite.csvOnly', 'CSV files only. Max 1000 rows recommended.')}\n          </p>\n        </div>\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          accept=\".csv,text/csv\"\n          onChange={onFileChange}\n          className=\"hidden\"\n          aria-label={tr('members.bulkInvite.fileInputLabel', 'Choose CSV file')}\n        />\n        <button\n          type=\"button\"\n          onClick={() => fileInputRef.current?.click()}\n          className=\"inline-flex min-h-10 items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-4 py-2 text-sm text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90\"\n        >\n          {tr('members.bulkInvite.chooseFile', 'Choose file')}\n        </button>\n      </div>\n\n      {hasRows && (\n        <>\n          <div className=\"flex flex-wrap gap-4 text-xs text-[var(--color-text-secondary)]\">\n            <span>\n              {tr('members.bulkInvite.statsTotal', 'Total rows')}: {summary.total}\n            </span>\n            <span>\n              {tr('members.bulkInvite.statsValid', 'Ready')}: {summary.sendable}\n            </span>\n            {summary.withErrors > 0 && (\n              <span className=\"text-[var(--color-status-error-text)]\">\n                {tr('members.bulkInvite.statsErrors', 'With errors')}: {summary.withErrors}\n              </span>\n            )}\n            {summary.invited > 0 && (\n              <span className=\"text-[var(--color-status-success-text)]\">\n                {tr('members.bulkInvite.statsInvited', 'Invited')}: {summary.invited}\n              </span>\n            )}\n            {summary.failed > 0 && (\n              <span className=\"text-[var(--color-status-error-text)]\">\n                {tr('members.bulkInvite.statsFailed', 'Failed')}: {summary.failed}\n              </span>\n            )}\n          </div>\n\n          <div className=\"rounded-xl border border-[var(--color-border-default)] p-2\">\n            <ResponsiveTable\n              columns={previewColumns}\n              data={rows}\n              rowKey={(row) => `${row.rowNumber}-${row.email}`}\n            />\n          </div>\n        </>\n      )}\n\n      <div className=\"flex flex-col gap-3 border-t border-[var(--color-border-default)] pt-4 sm:flex-row\">\n        <button\n          type=\"button\"\n          onClick={handleSend}\n          disabled={!canSubmit}\n          className=\"inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-6 py-2.5 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[200px]\"\n        >\n          {isSubmitting ? (\n            <Loader2 size={16} className=\"animate-spin\" aria-hidden=\"true\" />\n          ) : (\n            <Send size={16} aria-hidden=\"true\" />\n          )}\n          {tr('members.bulkInvite.send', 'Send')} {summary.sendable}{' '}\n          {tr('members.bulkInvite.sendSuffix', 'invites')}\n        </button>\n        <button\n          type=\"button\"\n          onClick={onCancel}\n          disabled={isSubmitting}\n          className=\"rounded-lg border border-[var(--color-border-default)] bg-transparent px-6 py-2.5 font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)] disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[140px]\"\n        >\n          {tr('common.cancel', 'Cancel')}\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"BulkInviteForm.js","names":[],"sources":["../../../../../src/organization-management/modules/members/components/BulkInviteForm.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { CheckCircle2, Download, Loader2, Send, Upload, XCircle } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { ResponsiveTable, type ResponsiveTableColumn } from '@burdenoff/fe-libs/ui';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport {\n  type BulkInviteRow,\n  downloadTemplate,\n  formatInviteError,\n  parseBulkInviteCsv,\n} from '../utils/bulkInviteCsv';\n\ninterface BulkInviteFormProps {\n  organizationId: string;\n  inviteMember: (input: {\n    organizationId: string;\n    email: string;\n    message?: string;\n  }) => Promise<unknown>;\n  onCancel: () => void;\n  loading?: boolean;\n}\n\ntype RowStatus =\n  | { kind: 'idle' }\n  | { kind: 'sending' }\n  | { kind: 'invited' }\n  | { kind: 'failed'; message: string };\n\ninterface PreviewRow extends BulkInviteRow {\n  status: RowStatus;\n}\n\n/**\n * Bulk-invite via CSV upload. Sequentially fires the per-row invite\n * mutation (concurrency 1) so we don't hammer the gateway and so per-row\n * errors are deterministic. Reuses the same mutation as single-invite,\n * which keeps backend behaviour (refetch, OTel events) identical.\n */\nexport function BulkInviteForm({\n  organizationId,\n  inviteMember,\n  onCancel,\n  loading,\n}: BulkInviteFormProps) {\n  const tr = useTr();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [rows, setRows] = useState<PreviewRow[]>([]);\n  const [fileName, setFileName] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [dragActive, setDragActive] = useState(false);\n\n  const handleFile = useCallback(\n    (file: File) => {\n      const reader = new FileReader();\n      reader.onload = () => {\n        const text = typeof reader.result === 'string' ? reader.result : '';\n        const parsed = parseBulkInviteCsv(text);\n        setRows(parsed.map((r) => ({ ...r, status: { kind: 'idle' } })));\n        setFileName(file.name);\n      };\n      reader.onerror = () => {\n        toast.error(tr('members.bulkInvite.readError', 'Failed to read CSV file.'));\n      };\n      reader.readAsText(file);\n    },\n    [tr]\n  );\n\n  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    if (file) handleFile(file);\n    // Reset so re-uploading the same file fires onChange again\n    e.target.value = '';\n  };\n\n  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setDragActive(false);\n    const file = e.dataTransfer.files?.[0];\n    if (file) handleFile(file);\n  };\n\n  const summary = useMemo(() => {\n    const total = rows.length;\n    const withErrors = rows.filter((r) => r.errors.length > 0).length;\n    const sendable = rows.filter((r) => r.errors.length === 0).length;\n    const invited = rows.filter((r) => r.status.kind === 'invited').length;\n    const failed = rows.filter((r) => r.status.kind === 'failed').length;\n    return { total, withErrors, sendable, invited, failed };\n  }, [rows]);\n\n  const handleSend = async () => {\n    if (summary.sendable === 0 || isSubmitting) return;\n    setIsSubmitting(true);\n\n    const sendableIndices = rows\n      .map((r, idx) => ({ r, idx }))\n      .filter(({ r }) => r.errors.length === 0 && r.status.kind !== 'invited');\n\n    for (const { idx } of sendableIndices) {\n      setRows((prev) =>\n        prev.map((row, i) => (i === idx ? { ...row, status: { kind: 'sending' } } : row))\n      );\n      const row = rows[idx];\n      try {\n        await inviteMember({\n          organizationId,\n          email: row.email,\n          message: row.message,\n        });\n        setRows((prev) =>\n          prev.map((r, i) => (i === idx ? { ...r, status: { kind: 'invited' } } : r))\n        );\n      } catch (err) {\n        const message = formatInviteError(err, tr);\n        setRows((prev) =>\n          prev.map((r, i) => (i === idx ? { ...r, status: { kind: 'failed', message } } : r))\n        );\n      }\n    }\n\n    setIsSubmitting(false);\n    setRows((prev) => {\n      const invited = prev.filter((r) => r.status.kind === 'invited').length;\n      const failed = prev.filter((r) => r.status.kind === 'failed').length;\n      toast.success(\n        `${tr('members.bulkInvite.summaryInvited', 'Invited')} ${invited} ${tr('members.bulkInvite.summaryOf', 'of')} ${prev.length}. ${failed} ${tr('members.bulkInvite.summaryFailed', 'failed')}.`\n      );\n      return prev;\n    });\n  };\n\n  const hasRows = rows.length > 0;\n  const canSubmit = summary.sendable > 0 && !isSubmitting && !loading;\n\n  const renderRowStatus = (row: PreviewRow) => {\n    const hasParseErrors = row.errors.length > 0;\n    if (hasParseErrors) {\n      return (\n        <span className=\"inline-flex items-center gap-1 text-[var(--color-status-error-text)]\">\n          <XCircle size={14} aria-hidden=\"true\" />\n          {row.errors.join(' ')}\n        </span>\n      );\n    }\n    if (row.status.kind === 'sending') {\n      return (\n        <span className=\"inline-flex items-center gap-1 text-[var(--color-text-secondary)]\">\n          <Loader2 size={14} className=\"animate-spin\" aria-hidden=\"true\" />\n          {tr('members.bulkInvite.statusSending', 'Sending...')}\n        </span>\n      );\n    }\n    if (row.status.kind === 'invited') {\n      return (\n        <span className=\"inline-flex items-center gap-1 text-[var(--color-status-success-text)]\">\n          <CheckCircle2 size={14} aria-hidden=\"true\" />\n          {tr('members.bulkInvite.statusInvited', 'Invited')}\n        </span>\n      );\n    }\n    if (row.status.kind === 'failed') {\n      return (\n        <span className=\"inline-flex items-center gap-1 text-[var(--color-status-error-text)]\">\n          <XCircle size={14} aria-hidden=\"true\" />\n          {row.status.message}\n        </span>\n      );\n    }\n    return (\n      <span className=\"text-[var(--color-text-secondary)]\">\n        {tr('members.bulkInvite.statusReady', 'Ready')}\n      </span>\n    );\n  };\n\n  const previewColumns: ResponsiveTableColumn<PreviewRow>[] = [\n    {\n      key: 'rowNumber',\n      header: '#',\n      priority: 'secondary',\n      cell: (row) => (\n        <span className=\"text-xs tabular-nums text-[var(--color-text-secondary)]\">\n          {row.rowNumber}\n        </span>\n      ),\n    },\n    {\n      key: 'email',\n      header: tr('members.bulkInvite.colEmail', 'Email'),\n      priority: 'primary',\n      cell: (row) =>\n        row.email || (\n          <span className=\"italic text-[var(--color-text-muted)]\">\n            {tr('members.bulkInvite.empty', '(empty)')}\n          </span>\n        ),\n    },\n    {\n      key: 'role',\n      header: tr('members.bulkInvite.colRole', 'Role'),\n      priority: 'secondary',\n      cell: (row) => row.role || <span className=\"text-[var(--color-text-muted)]\">MEMBER</span>,\n    },\n    {\n      key: 'status',\n      header: tr('members.bulkInvite.colStatus', 'Status'),\n      priority: 'secondary',\n      cell: (row) => renderRowStatus(row),\n    },\n  ];\n\n  return (\n    <div className=\"space-y-5\">\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <p className=\"text-sm text-[var(--color-text-muted)]\">\n          {tr(\n            'members.bulkInvite.description',\n            'Upload a CSV with one row per person. Required column: email. Optional: role, message.'\n          )}\n        </p>\n        <button\n          type=\"button\"\n          onClick={downloadTemplate}\n          className=\"inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border border-[var(--color-border-default)] px-3 py-2 text-sm text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-bg-subtle)]\"\n        >\n          <Download size={16} aria-hidden=\"true\" />\n          {tr('members.bulkInvite.downloadTemplate', 'Download template')}\n        </button>\n      </div>\n\n      <div\n        onDragOver={(e) => {\n          e.preventDefault();\n          setDragActive(true);\n        }}\n        onDragLeave={() => setDragActive(false)}\n        onDrop={onDrop}\n        className={`flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-8 transition-colors ${\n          dragActive\n            ? 'border-[var(--color-action-primary-bg)] bg-[var(--color-status-info-bgSubtle)]'\n            : 'border-[var(--color-border-default)] bg-[var(--color-bg-canvas)]'\n        }`}\n      >\n        <Upload size={28} className=\"text-[var(--color-text-secondary)]\" aria-hidden=\"true\" />\n        <div className=\"text-center\">\n          <p className=\"text-sm font-medium text-[var(--color-text-primary)]\">\n            {fileName\n              ? fileName\n              : tr('members.bulkInvite.dropHere', 'Drop a CSV file here or click to browse')}\n          </p>\n          <p className=\"mt-1 text-xs text-[var(--color-text-muted)]\">\n            {tr('members.bulkInvite.csvOnly', 'CSV files only. Max 1000 rows recommended.')}\n          </p>\n        </div>\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          accept=\".csv,text/csv\"\n          onChange={onFileChange}\n          className=\"hidden\"\n          aria-label={tr('members.bulkInvite.fileInputLabel', 'Choose CSV file')}\n        />\n        <button\n          type=\"button\"\n          onClick={() => fileInputRef.current?.click()}\n          className=\"inline-flex min-h-10 items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-4 py-2 text-sm text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90\"\n        >\n          {tr('members.bulkInvite.chooseFile', 'Choose file')}\n        </button>\n      </div>\n\n      {hasRows && (\n        <>\n          <div className=\"flex flex-wrap gap-4 text-xs text-[var(--color-text-secondary)]\">\n            <span>\n              {tr('members.bulkInvite.statsTotal', 'Total rows')}: {summary.total}\n            </span>\n            <span>\n              {tr('members.bulkInvite.statsValid', 'Ready')}: {summary.sendable}\n            </span>\n            {summary.withErrors > 0 && (\n              <span className=\"text-[var(--color-status-error-text)]\">\n                {tr('members.bulkInvite.statsErrors', 'With errors')}: {summary.withErrors}\n              </span>\n            )}\n            {summary.invited > 0 && (\n              <span className=\"text-[var(--color-status-success-text)]\">\n                {tr('members.bulkInvite.statsInvited', 'Invited')}: {summary.invited}\n              </span>\n            )}\n            {summary.failed > 0 && (\n              <span className=\"text-[var(--color-status-error-text)]\">\n                {tr('members.bulkInvite.statsFailed', 'Failed')}: {summary.failed}\n              </span>\n            )}\n          </div>\n\n          <div className=\"rounded-xl border border-[var(--color-border-default)] p-2\">\n            <ResponsiveTable\n              columns={previewColumns}\n              data={rows}\n              rowKey={(row) => `${row.rowNumber}-${row.email}`}\n            />\n          </div>\n        </>\n      )}\n\n      <div className=\"flex flex-col gap-3 border-t border-[var(--color-border-default)] pt-4 sm:flex-row\">\n        <button\n          type=\"button\"\n          onClick={handleSend}\n          disabled={!canSubmit}\n          className=\"inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-6 py-2.5 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[200px]\"\n        >\n          {isSubmitting ? (\n            <Loader2 size={16} className=\"animate-spin\" aria-hidden=\"true\" />\n          ) : (\n            <Send size={16} aria-hidden=\"true\" />\n          )}\n          {tr('members.bulkInvite.send', 'Send')} {summary.sendable}{' '}\n          {tr('members.bulkInvite.sendSuffix', 'invites')}\n        </button>\n        <button\n          type=\"button\"\n          onClick={onCancel}\n          disabled={isSubmitting}\n          className=\"rounded-lg border border-[var(--color-border-default)] bg-transparent px-6 py-2.5 font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)] disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[140px]\"\n        >\n          {tr('common.cancel', 'Cancel')}\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/organization-management/modules/members/pages/InviteMemberPage.js

@@ -9,108 +9,114 @@ import { BulkInviteForm as s } from "../components/BulkInviteForm.js";
 import { PendingInvitesList as c } from "../components/PendingInvitesList.js";
 import { useState as l } from "react";
 import { ArrowLeft as u, UserPlus as d } from "lucide-react";
-import { usePermissions as f } from "@burdenoff/fe-libs/shared/providers/shell";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useParams as h } from "react-router-dom";
+import { GlassCard as f, ShowMore as p } from "@burdenoff/fe-libs/ui";
+import { usePermissions as m } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useParams as _ } from "react-router-dom";
 //#region src/organization-management/modules/members/pages/InviteMemberPage.tsx
-function g() {
-	let g = r(), { organizationId: _ } = h(), { navigate: v, basePath: y = "/organizations" } = e(), { hasPermission: b, isLoading: x } = f(), { inviteMember: S, loading: C, error: w } = n(), [T, E] = l("single"), D = async (e) => {
-		await S(e), t.success(`${g("members.invite.success", "Invitation sent to")} ${e.email}`);
-	}, O = () => {
-		v(`${y}/${_}/members`);
+function v() {
+	let v = r(), { organizationId: y } = _(), { navigate: b, basePath: x = "/organizations" } = e(), { hasPermission: S, isLoading: C } = m(), { inviteMember: w, loading: T, error: E } = n(), [D, O] = l("single"), k = async (e) => {
+		await w(e), t.success(`${v("members.invite.success", "Invitation sent to")} ${e.email}`);
+	}, A = () => {
+		b(`${x}/${y}/members`);
 	};
-	return x ? /* @__PURE__ */ p("div", {
+	return C ? /* @__PURE__ */ h("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
-		children: /* @__PURE__ */ p(i, { message: g("common.loadingPermissions", "Loading permissions...") })
-	}) : b(a.MEMBER_INVITE) ? /* @__PURE__ */ p("div", {
+		children: /* @__PURE__ */ h(i, { message: v("common.loadingPermissions", "Loading permissions...") })
+	}) : S(a.MEMBER_INVITE) ? /* @__PURE__ */ h("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
-		children: /* @__PURE__ */ m("div", {
+		children: /* @__PURE__ */ g("div", {
 			className: "mx-auto max-w-3xl space-y-8",
 			children: [
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ g("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ p("button", {
+					children: [/* @__PURE__ */ h("button", {
 						type: "button",
-						onClick: O,
+						onClick: A,
 						className: "rounded-lg p-2 transition-colors hover:bg-[var(--color-bg-subtle)]",
-						"aria-label": g("members.invite.backToMembers", "Back to members"),
-						children: /* @__PURE__ */ p(u, {
+						"aria-label": v("members.invite.backToMembers", "Back to members"),
+						children: /* @__PURE__ */ h(u, {
 							size: 20,
 							className: "text-[var(--color-text-secondary)]"
 						})
-					}), /* @__PURE__ */ m("div", {
+					}), /* @__PURE__ */ g("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ p(d, {
+						children: [/* @__PURE__ */ h(d, {
 							size: 24,
 							className: "text-[var(--color-text-primary)]"
-						}), /* @__PURE__ */ p("h1", {
+						}), /* @__PURE__ */ h("h1", {
 							className: "text-2xl font-bold text-[var(--color-text-primary)]",
-							children: g("members.invite.title", "Invite Member")
+							children: v("members.invite.title", "Invite Member")
 						})]
 					})]
 				}),
-				/* @__PURE__ */ p("div", {
+				/* @__PURE__ */ h("div", {
 					className: "inline-flex rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-1",
 					role: "tablist",
-					"aria-label": g("members.invite.modeToggle", "Invite mode"),
+					"aria-label": v("members.invite.modeToggle", "Invite mode"),
 					children: ["single", "bulk"].map((e) => {
-						let t = T === e, n = e === "single" ? g("members.invite.modeSingle", "Single") : g("members.invite.modeBulk", "Bulk (CSV)");
-						return /* @__PURE__ */ p("button", {
+						let t = D === e, n = e === "single" ? v("members.invite.modeSingle", "Single") : v("members.invite.modeBulk", "Bulk (CSV)");
+						return /* @__PURE__ */ h("button", {
 							type: "button",
 							role: "tab",
 							"aria-selected": t,
-							onClick: () => E(e),
+							onClick: () => O(e),
 							className: `min-h-9 rounded-md px-4 py-1.5 text-sm font-medium transition-colors ${t ? "bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)]" : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"}`,
 							children: n
 						}, e);
 					})
 				}),
-				/* @__PURE__ */ m("div", {
-					className: "bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)] p-6",
+				/* @__PURE__ */ g(f, {
+					treatment: "plain",
+					className: "border-border-seam p-6",
 					children: [
-						/* @__PURE__ */ p("h2", {
+						/* @__PURE__ */ h("h2", {
 							className: "text-lg font-semibold text-[var(--color-text-primary)] mb-4",
-							children: T === "single" ? g("members.invite.send", "Send Invite") : g("members.bulkInvite.title", "Bulk Invite from CSV")
+							children: D === "single" ? v("members.invite.send", "Send Invite") : v("members.bulkInvite.title", "Bulk Invite from CSV")
 						}),
-						/* @__PURE__ */ p("p", {
+						/* @__PURE__ */ h("p", {
 							className: "text-sm text-[var(--color-text-muted)] mb-6",
-							children: T === "single" ? g("members.invite.description", "Enter the email address of the person you want to invite. They will receive an email notification and can accept or decline from their account.") : g("members.bulkInvite.pageDescription", "Upload a CSV to invite many people at once. Download the template below to see the expected format.")
+							children: D === "single" ? v("members.invite.description", "Enter the email address of the person you want to invite. They will receive an email notification and can accept or decline from their account.") : v("members.bulkInvite.pageDescription", "Upload a CSV to invite many people at once. Download the template below to see the expected format.")
 						}),
-						T === "single" && w && /* @__PURE__ */ p("div", {
+						D === "single" && E && /* @__PURE__ */ h("div", {
 							className: "mb-4 rounded-lg border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] p-3",
-							children: /* @__PURE__ */ p("p", {
+							children: /* @__PURE__ */ h("p", {
 								className: "text-sm text-[var(--color-status-error-text)]",
-								children: w.message.includes("CONFLICT") ? g("members.invite.error.conflict", "An invite already exists for this email address.") : w.message.includes("already a member") ? g("members.invite.error.alreadyMember", "This user is already a member of the organization.") : w.message
+								children: E.message.includes("CONFLICT") ? v("members.invite.error.conflict", "An invite already exists for this email address.") : E.message.includes("already a member") ? v("members.invite.error.alreadyMember", "This user is already a member of the organization.") : E.message
 							})
 						}),
-						T === "single" ? /* @__PURE__ */ p(o, {
-							organizationId: _,
-							onSubmit: D,
-							onCancel: O,
-							loading: C
-						}) : /* @__PURE__ */ p(s, {
-							organizationId: _,
-							inviteMember: S,
-							onCancel: O,
-							loading: C
+						D === "single" ? /* @__PURE__ */ h(o, {
+							organizationId: y,
+							onSubmit: k,
+							onCancel: A,
+							loading: T
+						}) : /* @__PURE__ */ h(s, {
+							organizationId: y,
+							inviteMember: w,
+							onCancel: A,
+							loading: T
 						})
 					]
 				}),
-				/* @__PURE__ */ p("div", {
-					className: "bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)] p-6",
-					children: /* @__PURE__ */ p(c, { organizationId: _ })
+				/* @__PURE__ */ h(f, {
+					treatment: "plain",
+					className: "border-border-seam p-6",
+					children: /* @__PURE__ */ h(p, {
+						collapsedHeight: 260,
+						children: /* @__PURE__ */ h(c, { organizationId: y })
+					})
 				})
 			]
 		})
-	}) : /* @__PURE__ */ p("div", {
+	}) : /* @__PURE__ */ h("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
-		children: /* @__PURE__ */ p("div", {
+		children: /* @__PURE__ */ h("div", {
 			className: "p-8 text-center text-[var(--color-text-secondary)]",
-			children: g("members.invite.noPermission", "You don't have permission to invite members.")
+			children: v("members.invite.noPermission", "You don't have permission to invite members.")
 		})
 	});
 }
 //#endregion
-export { g as InviteMemberPage };
+export { v as InviteMemberPage };
 
 //# sourceMappingURL=InviteMemberPage.js.map

package/dist/organization-management/modules/members/pages/InviteMemberPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InviteMemberPage.js","names":[],"sources":["../../../../../src/organization-management/modules/members/pages/InviteMemberPage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, UserPlus } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useOrgConsole } from '../../../providers/OrgConsoleProvider';\nimport { useInviteMember } from '../hooks/useInvites';\nimport { InviteMemberForm } from '../components/InviteMemberForm';\nimport { BulkInviteForm } from '../components/BulkInviteForm';\nimport { PendingInvitesList } from '../components/PendingInvitesList';\nimport { LoadingState } from '../../../shared/components/feedback/LoadingState';\nimport { PERMISSIONS } from '../../../constants/permissions';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ntype InviteMode = 'single' | 'bulk';\n\n/**\n * Invite Member Page\n * Email-based invite form with pending invites list below\n */\nexport function InviteMemberPage() {\n  const tr = useTr();\n  const { organizationId } = useParams<{ organizationId: string }>();\n  const { navigate, basePath = '/organizations' } = useOrgConsole();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const { inviteMember, loading, error } = useInviteMember();\n  const [mode, setMode] = useState<InviteMode>('single');\n\n  const handleSubmit = async (data: {\n    organizationId: string;\n    email: string;\n    message?: string;\n  }) => {\n    await inviteMember(data);\n    toast.success(`${tr('members.invite.success', 'Invitation sent to')} ${data.email}`);\n  };\n\n  const handleCancel = () => {\n    navigate(`${basePath}/${organizationId}/members`);\n  };\n\n  if (permissionsLoading) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n        <LoadingState message={tr('common.loadingPermissions', 'Loading permissions...')} />\n      </div>\n    );\n  }\n\n  if (!hasPermission(PERMISSIONS.MEMBER_INVITE)) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n        <div className=\"p-8 text-center text-[var(--color-text-secondary)]\">\n          {tr('members.invite.noPermission', \"You don't have permission to invite members.\")}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6\">\n      <div className=\"mx-auto max-w-3xl space-y-8\">\n        {/* Header */}\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            className=\"rounded-lg p-2 transition-colors hover:bg-[var(--color-bg-subtle)]\"\n            aria-label={tr('members.invite.backToMembers', 'Back to members')}\n          >\n            <ArrowLeft size={20} className=\"text-[var(--color-text-secondary)]\" />\n          </button>\n          <div className=\"flex items-center gap-2\">\n            <UserPlus size={24} className=\"text-[var(--color-text-primary)]\" />\n            <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n              {tr('members.invite.title', 'Invite Member')}\n            </h1>\n          </div>\n        </div>\n\n        {/* Mode toggle */}\n        <div\n          className=\"inline-flex rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-1\"\n          role=\"tablist\"\n          aria-label={tr('members.invite.modeToggle', 'Invite mode')}\n        >\n          {(['single', 'bulk'] as const).map((m) => {\n            const isActive = mode === m;\n            const label =\n              m === 'single'\n                ? tr('members.invite.modeSingle', 'Single')\n                : tr('members.invite.modeBulk', 'Bulk (CSV)');\n            return (\n              <button\n                key={m}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isActive}\n                onClick={() => setMode(m)}\n                className={`min-h-9 rounded-md px-4 py-1.5 text-sm font-medium transition-colors ${\n                  isActive\n                    ? 'bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)]'\n                    : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'\n                }`}\n              >\n                {label}\n              </button>\n            );\n          })}\n        </div>\n\n        {/* Invite Form Card */}\n        <div className=\"bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)] p-6\">\n          <h2 className=\"text-lg font-semibold text-[var(--color-text-primary)] mb-4\">\n            {mode === 'single'\n              ? tr('members.invite.send', 'Send Invite')\n              : tr('members.bulkInvite.title', 'Bulk Invite from CSV')}\n          </h2>\n          <p className=\"text-sm text-[var(--color-text-muted)] mb-6\">\n            {mode === 'single'\n              ? tr(\n                  'members.invite.description',\n                  'Enter the email address of the person you want to invite. They will receive an email notification and can accept or decline from their account.'\n                )\n              : tr(\n                  'members.bulkInvite.pageDescription',\n                  'Upload a CSV to invite many people at once. Download the template below to see the expected format.'\n                )}\n          </p>\n\n          {mode === 'single' && error && (\n            <div className=\"mb-4 rounded-lg border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] p-3\">\n              <p className=\"text-sm text-[var(--color-status-error-text)]\">\n                {error.message.includes('CONFLICT')\n                  ? tr(\n                      'members.invite.error.conflict',\n                      'An invite already exists for this email address.'\n                    )\n                  : error.message.includes('already a member')\n                    ? tr(\n                        'members.invite.error.alreadyMember',\n                        'This user is already a member of the organization.'\n                      )\n                    : error.message}\n              </p>\n            </div>\n          )}\n\n          {mode === 'single' ? (\n            <InviteMemberForm\n              organizationId={organizationId!}\n              onSubmit={handleSubmit}\n              onCancel={handleCancel}\n              loading={loading}\n            />\n          ) : (\n            <BulkInviteForm\n              organizationId={organizationId!}\n              inviteMember={inviteMember}\n              onCancel={handleCancel}\n              loading={loading}\n            />\n          )}\n        </div>\n\n        {/* Pending Invites */}\n        <div className=\"bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)] p-6\">\n          <PendingInvitesList organizationId={organizationId!} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,SAAgB,IAAmB;CACjC,IAAM,IAAK,GAAO,EACZ,EAAE,sBAAmB,GAAuC,EAC5D,EAAE,aAAU,cAAW,qBAAqB,GAAe,EAC3D,EAAE,kBAAe,WAAW,MAAuB,GAAgB,EACnE,EAAE,iBAAc,YAAS,aAAU,GAAiB,EACpD,CAAC,GAAM,KAAW,EAAqB,SAAS,EAEhD,IAAe,OAAO,MAItB;AAEJ,EADA,MAAM,EAAa,EAAK,EACxB,EAAM,QAAQ,GAAG,EAAG,0BAA0B,qBAAqB,CAAC,GAAG,EAAK,QAAQ;IAGhF,UAAqB;AACzB,IAAS,GAAG,EAAS,GAAG,EAAe,UAAU;;AAqBnD,QAlBI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAc,SAAS,EAAG,6BAA6B,yBAAyB,EAAI,CAAA;EAChF,CAAA,GAIL,EAAc,EAAY,cAAc,GAW3C,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;MACV,cAAY,EAAG,gCAAgC,kBAAkB;gBAEjE,kBAAC,GAAD;OAAW,MAAM;OAAI,WAAU;OAAuC,CAAA;MAC/D,CAAA,EACT,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OAAU,MAAM;OAAI,WAAU;OAAqC,CAAA,EACnE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAG,wBAAwB,gBAAgB;OACzC,CAAA,CACD;QACF;;IAGN,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,cAAY,EAAG,6BAA6B,cAAc;eAExD,CAAC,UAAU,OAAO,CAAW,KAAK,MAAM;MACxC,IAAM,IAAW,MAAS,GACpB,IACJ,MAAM,WACF,EAAG,6BAA6B,SAAS,GACzC,EAAG,2BAA2B,aAAa;AACjD,aACE,kBAAC,UAAD;OAEE,MAAK;OACL,MAAK;OACL,iBAAe;OACf,eAAe,EAAQ,EAAE;OACzB,WAAW,wEACT,IACI,gFACA;iBAGL;OACM,EAZF,EAYE;OAEX;KACE,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,MAAD;OAAI,WAAU;iBACX,MAAS,WACN,EAAG,uBAAuB,cAAc,GACxC,EAAG,4BAA4B,uBAAuB;OACvD,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBACV,MAAS,WACN,EACE,8BACA,kJACD,GACD,EACE,sCACA,sGACD;OACH,CAAA;MAEH,MAAS,YAAY,KACpB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAM,QAAQ,SAAS,WAAW,GAC/B,EACE,iCACA,mDACD,GACD,EAAM,QAAQ,SAAS,mBAAmB,GACxC,EACE,sCACA,qDACD,GACD,EAAM;QACV,CAAA;OACA,CAAA;MAGP,MAAS,WACR,kBAAC,GAAD;OACkB;OAChB,UAAU;OACV,UAAU;OACD;OACT,CAAA,GAEF,kBAAC,GAAD;OACkB;OACF;OACd,UAAU;OACD;OACT,CAAA;MAEA;;IAGN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAoC,mBAAmB,CAAA;KACnD,CAAA;IACF;;EACF,CAAA,GAvHJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAG,+BAA+B,+CAA+C;GAC9E,CAAA;EACF,CAAA"}
+{"version":3,"file":"InviteMemberPage.js","names":[],"sources":["../../../../../src/organization-management/modules/members/pages/InviteMemberPage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { ArrowLeft, UserPlus } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { GlassCard, ShowMore } from '@burdenoff/fe-libs/ui';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useOrgConsole } from '../../../providers/OrgConsoleProvider';\nimport { useInviteMember } from '../hooks/useInvites';\nimport { InviteMemberForm } from '../components/InviteMemberForm';\nimport { BulkInviteForm } from '../components/BulkInviteForm';\nimport { PendingInvitesList } from '../components/PendingInvitesList';\nimport { LoadingState } from '../../../shared/components/feedback/LoadingState';\nimport { PERMISSIONS } from '../../../constants/permissions';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ntype InviteMode = 'single' | 'bulk';\n\n/**\n * Invite Member Page\n * Email-based invite form with pending invites list below\n */\nexport function InviteMemberPage() {\n  const tr = useTr();\n  const { organizationId } = useParams<{ organizationId: string }>();\n  const { navigate, basePath = '/organizations' } = useOrgConsole();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const { inviteMember, loading, error } = useInviteMember();\n  const [mode, setMode] = useState<InviteMode>('single');\n\n  const handleSubmit = async (data: {\n    organizationId: string;\n    email: string;\n    message?: string;\n  }) => {\n    await inviteMember(data);\n    toast.success(`${tr('members.invite.success', 'Invitation sent to')} ${data.email}`);\n  };\n\n  const handleCancel = () => {\n    navigate(`${basePath}/${organizationId}/members`);\n  };\n\n  if (permissionsLoading) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n        <LoadingState message={tr('common.loadingPermissions', 'Loading permissions...')} />\n      </div>\n    );\n  }\n\n  if (!hasPermission(PERMISSIONS.MEMBER_INVITE)) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n        <div className=\"p-8 text-center text-[var(--color-text-secondary)]\">\n          {tr('members.invite.noPermission', \"You don't have permission to invite members.\")}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6\">\n      <div className=\"mx-auto max-w-3xl space-y-8\">\n        {/* Header */}\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            className=\"rounded-lg p-2 transition-colors hover:bg-[var(--color-bg-subtle)]\"\n            aria-label={tr('members.invite.backToMembers', 'Back to members')}\n          >\n            <ArrowLeft size={20} className=\"text-[var(--color-text-secondary)]\" />\n          </button>\n          <div className=\"flex items-center gap-2\">\n            <UserPlus size={24} className=\"text-[var(--color-text-primary)]\" />\n            <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n              {tr('members.invite.title', 'Invite Member')}\n            </h1>\n          </div>\n        </div>\n\n        {/* Mode toggle */}\n        <div\n          className=\"inline-flex rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-1\"\n          role=\"tablist\"\n          aria-label={tr('members.invite.modeToggle', 'Invite mode')}\n        >\n          {(['single', 'bulk'] as const).map((m) => {\n            const isActive = mode === m;\n            const label =\n              m === 'single'\n                ? tr('members.invite.modeSingle', 'Single')\n                : tr('members.invite.modeBulk', 'Bulk (CSV)');\n            return (\n              <button\n                key={m}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isActive}\n                onClick={() => setMode(m)}\n                className={`min-h-9 rounded-md px-4 py-1.5 text-sm font-medium transition-colors ${\n                  isActive\n                    ? 'bg-[var(--color-action-primary-bg)] text-[var(--color-action-primary-text)]'\n                    : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'\n                }`}\n              >\n                {label}\n              </button>\n            );\n          })}\n        </div>\n\n        {/* Invite Form Card */}\n        <GlassCard treatment=\"plain\" className=\"border-border-seam p-6\">\n          <h2 className=\"text-lg font-semibold text-[var(--color-text-primary)] mb-4\">\n            {mode === 'single'\n              ? tr('members.invite.send', 'Send Invite')\n              : tr('members.bulkInvite.title', 'Bulk Invite from CSV')}\n          </h2>\n          <p className=\"text-sm text-[var(--color-text-muted)] mb-6\">\n            {mode === 'single'\n              ? tr(\n                  'members.invite.description',\n                  'Enter the email address of the person you want to invite. They will receive an email notification and can accept or decline from their account.'\n                )\n              : tr(\n                  'members.bulkInvite.pageDescription',\n                  'Upload a CSV to invite many people at once. Download the template below to see the expected format.'\n                )}\n          </p>\n\n          {mode === 'single' && error && (\n            <div className=\"mb-4 rounded-lg border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] p-3\">\n              <p className=\"text-sm text-[var(--color-status-error-text)]\">\n                {error.message.includes('CONFLICT')\n                  ? tr(\n                      'members.invite.error.conflict',\n                      'An invite already exists for this email address.'\n                    )\n                  : error.message.includes('already a member')\n                    ? tr(\n                        'members.invite.error.alreadyMember',\n                        'This user is already a member of the organization.'\n                      )\n                    : error.message}\n              </p>\n            </div>\n          )}\n\n          {mode === 'single' ? (\n            <InviteMemberForm\n              organizationId={organizationId!}\n              onSubmit={handleSubmit}\n              onCancel={handleCancel}\n              loading={loading}\n            />\n          ) : (\n            <BulkInviteForm\n              organizationId={organizationId!}\n              inviteMember={inviteMember}\n              onCancel={handleCancel}\n              loading={loading}\n            />\n          )}\n        </GlassCard>\n\n        {/* Pending Invites */}\n        <GlassCard treatment=\"plain\" className=\"border-border-seam p-6\">\n          <ShowMore collapsedHeight={260}>\n            <PendingInvitesList organizationId={organizationId!} />\n          </ShowMore>\n        </GlassCard>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,SAAgB,IAAmB;CACjC,IAAM,IAAK,GAAO,EACZ,EAAE,sBAAmB,GAAuC,EAC5D,EAAE,aAAU,cAAW,qBAAqB,GAAe,EAC3D,EAAE,kBAAe,WAAW,MAAuB,GAAgB,EACnE,EAAE,iBAAc,YAAS,aAAU,GAAiB,EACpD,CAAC,GAAM,KAAW,EAAqB,SAAS,EAEhD,IAAe,OAAO,MAItB;AAEJ,EADA,MAAM,EAAa,EAAK,EACxB,EAAM,QAAQ,GAAG,EAAG,0BAA0B,qBAAqB,CAAC,GAAG,EAAK,QAAQ;IAGhF,UAAqB;AACzB,IAAS,GAAG,EAAS,GAAG,EAAe,UAAU;;AAqBnD,QAlBI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAc,SAAS,EAAG,6BAA6B,yBAAyB,EAAI,CAAA;EAChF,CAAA,GAIL,EAAc,EAAY,cAAc,GAW3C,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;MACV,cAAY,EAAG,gCAAgC,kBAAkB;gBAEjE,kBAAC,GAAD;OAAW,MAAM;OAAI,WAAU;OAAuC,CAAA;MAC/D,CAAA,EACT,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OAAU,MAAM;OAAI,WAAU;OAAqC,CAAA,EACnE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAG,wBAAwB,gBAAgB;OACzC,CAAA,CACD;QACF;;IAGN,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,cAAY,EAAG,6BAA6B,cAAc;eAExD,CAAC,UAAU,OAAO,CAAW,KAAK,MAAM;MACxC,IAAM,IAAW,MAAS,GACpB,IACJ,MAAM,WACF,EAAG,6BAA6B,SAAS,GACzC,EAAG,2BAA2B,aAAa;AACjD,aACE,kBAAC,UAAD;OAEE,MAAK;OACL,MAAK;OACL,iBAAe;OACf,eAAe,EAAQ,EAAE;OACzB,WAAW,wEACT,IACI,gFACA;iBAGL;OACM,EAZF,EAYE;OAEX;KACE,CAAA;IAGN,kBAAC,GAAD;KAAW,WAAU;KAAQ,WAAU;eAAvC;MACE,kBAAC,MAAD;OAAI,WAAU;iBACX,MAAS,WACN,EAAG,uBAAuB,cAAc,GACxC,EAAG,4BAA4B,uBAAuB;OACvD,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBACV,MAAS,WACN,EACE,8BACA,kJACD,GACD,EACE,sCACA,sGACD;OACH,CAAA;MAEH,MAAS,YAAY,KACpB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAM,QAAQ,SAAS,WAAW,GAC/B,EACE,iCACA,mDACD,GACD,EAAM,QAAQ,SAAS,mBAAmB,GACxC,EACE,sCACA,qDACD,GACD,EAAM;QACV,CAAA;OACA,CAAA;MAGP,MAAS,WACR,kBAAC,GAAD;OACkB;OAChB,UAAU;OACV,UAAU;OACD;OACT,CAAA,GAEF,kBAAC,GAAD;OACkB;OACF;OACd,UAAU;OACD;OACT,CAAA;MAEM;;IAGZ,kBAAC,GAAD;KAAW,WAAU;KAAQ,WAAU;eACrC,kBAAC,GAAD;MAAU,iBAAiB;gBACzB,kBAAC,GAAD,EAAoC,mBAAmB,CAAA;MAC9C,CAAA;KACD,CAAA;IACR;;EACF,CAAA,GAzHJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAG,+BAA+B,+CAA+C;GAC9E,CAAA;EACF,CAAA"}

package/dist/organization-management/modules/members/pages/InvitePeoplePage.js

@@ -8,78 +8,80 @@ import { useOrganizationPageView as o } from "../../../hooks/useOrganizationPage
 import { useOrgsWithPermission as s } from "../../organizations/hooks/useOrgsWithPermission.js";
 import { useEffect as c, useMemo as l, useState as u } from "react";
 import { Building as d, ChevronRight as f, UserPlus as p } from "lucide-react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { GlassCard as m } from "@burdenoff/fe-libs/ui";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/organization-management/modules/members/pages/InvitePeoplePage.tsx
-function g() {
+function _() {
 	o("organizations.invite-people");
-	let g = n(), { navigate: _, basePath: v = "/organizations" } = e(), { organizations: y, loading: b, error: x } = t(100, 0), { allowedIds: S, loading: C, isError: w } = s(l(() => y.map((e) => e.id), [y]), "member", "create"), T = l(() => y.filter((e) => S.has(e.id)), [y, S]), [E, D] = u(!1);
+	let _ = n(), { navigate: v, basePath: y = "/organizations" } = e(), { organizations: b, loading: x, error: S } = t(100, 0), { allowedIds: C, loading: w, isError: T } = s(l(() => b.map((e) => e.id), [b]), "member", "create"), E = l(() => b.filter((e) => C.has(e.id)), [b, C]), [D, O] = u(!1);
 	return c(() => {
-		E || b || C || T.length === 1 && (D(!0), _(`${v}/${T[0].id}/members/invite`));
+		D || x || w || E.length === 1 && (O(!0), v(`${y}/${E[0].id}/members/invite`));
 	}, [
+		D,
+		x,
+		w,
 		E,
-		b,
-		C,
-		T,
-		_,
-		v
-	]), b || C ? /* @__PURE__ */ m("div", {
+		v,
+		y
+	]), x || w ? /* @__PURE__ */ h("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
-		children: /* @__PURE__ */ m(r, { message: g("common.loading", "Loading...") })
-	}) : x || w ? /* @__PURE__ */ m("div", {
+		children: /* @__PURE__ */ h(r, { message: _("common.loading", "Loading...") })
+	}) : S || T ? /* @__PURE__ */ h("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
-		children: /* @__PURE__ */ m(i, { message: x?.message || g("members.invitePeople.error", "Failed to load organizations for invite.") })
-	}) : /* @__PURE__ */ m("div", {
+		children: /* @__PURE__ */ h(i, { message: S?.message || _("members.invitePeople.error", "Failed to load organizations for invite.") })
+	}) : /* @__PURE__ */ h("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-200",
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ g("div", {
 			className: "mx-auto max-w-3xl space-y-6",
-			children: [/* @__PURE__ */ h("div", {
+			children: [/* @__PURE__ */ g("div", {
 				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ m(p, {
+				children: [/* @__PURE__ */ h(p, {
 					size: 24,
 					className: "text-[var(--color-text-primary)]",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
+				}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h1", {
 					className: "text-2xl font-bold text-[var(--color-text-primary)]",
-					children: g("members.invitePeople.title", "Invite People")
-				}), /* @__PURE__ */ m("p", {
+					children: _("members.invitePeople.title", "Invite People")
+				}), /* @__PURE__ */ h("p", {
 					className: "mt-1 text-sm text-[var(--color-text-secondary)]",
-					children: g("members.invitePeople.subtitle", "Pick an organization to send an invite into. You can also invite from any organization or workspace detail page.")
+					children: _("members.invitePeople.subtitle", "Pick an organization to send an invite into. You can also invite from any organization or workspace detail page.")
 				})] })]
-			}), T.length === 0 ? /* @__PURE__ */ m("div", {
-				className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-6",
-				children: /* @__PURE__ */ m(a, {
-					icon: /* @__PURE__ */ m(p, {
+			}), E.length === 0 ? /* @__PURE__ */ h(m, {
+				treatment: "plain",
+				className: "border-border-seam p-6",
+				children: /* @__PURE__ */ h(a, {
+					icon: /* @__PURE__ */ h(p, {
 						size: 40,
 						"aria-hidden": "true"
 					}),
-					title: g("members.invitePeople.emptyTitle", "No organizations where you can invite"),
-					description: g("members.invitePeople.emptyDescription", "You don't currently have permission to invite members into any organization. Ask an organization admin to grant you invite access.")
+					title: _("members.invitePeople.emptyTitle", "No organizations where you can invite"),
+					description: _("members.invitePeople.emptyDescription", "You don't currently have permission to invite members into any organization. Ask an organization admin to grant you invite access.")
 				})
-			}) : /* @__PURE__ */ m("ul", {
-				className: "divide-y divide-[var(--color-border-default)] rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-[var(--shadow-elevation-1)]",
-				children: T.map((e) => /* @__PURE__ */ m("li", { children: /* @__PURE__ */ h("button", {
+			}) : /* @__PURE__ */ h("ul", {
+				className: "divide-y divide-[var(--color-border-seam)] overflow-hidden rounded-card border border-border-seam bg-bg-surface shadow-elevation-1",
+				children: E.map((e) => /* @__PURE__ */ h("li", { children: /* @__PURE__ */ g("button", {
 					type: "button",
-					onClick: () => _(`${v}/${e.id}/members/invite`),
+					onClick: () => v(`${y}/${e.id}/members/invite`),
 					className: "flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition-colors hover:bg-[var(--color-bg-subtle)]",
-					children: [/* @__PURE__ */ h("div", {
+					children: [/* @__PURE__ */ g("div", {
 						className: "flex min-w-0 items-center gap-3",
-						children: [/* @__PURE__ */ m("div", {
+						children: [/* @__PURE__ */ h("div", {
 							className: "flex size-10 items-center justify-center rounded-lg bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)]",
-							children: /* @__PURE__ */ m(d, {
+							children: /* @__PURE__ */ h(d, {
 								size: 20,
 								"aria-hidden": "true"
 							})
-						}), /* @__PURE__ */ h("div", {
+						}), /* @__PURE__ */ g("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ m("p", {
+							children: [/* @__PURE__ */ h("p", {
 								className: "truncate text-sm font-semibold text-[var(--color-text-primary)]",
 								children: e.name
-							}), /* @__PURE__ */ h("p", {
+							}), /* @__PURE__ */ g("p", {
 								className: "truncate font-mono text-xs text-[var(--color-text-secondary)]",
 								children: ["/", e.slug]
 							})]
 						})]
-					}), /* @__PURE__ */ m(f, {
+					}), /* @__PURE__ */ h(f, {
 						size: 18,
 						className: "shrink-0 text-[var(--color-text-secondary)]",
 						"aria-hidden": "true"
@@ -90,6 +92,6 @@ function g() {
 	});
 }
 //#endregion
-export { g as InvitePeoplePage };
+export { _ as InvitePeoplePage };
 
 //# sourceMappingURL=InvitePeoplePage.js.map

package/dist/organization-management/modules/members/pages/InvitePeoplePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InvitePeoplePage.js","names":[],"sources":["../../../../../src/organization-management/modules/members/pages/InvitePeoplePage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Building, ChevronRight, UserPlus } from 'lucide-react';\nimport { useOrgConsole } from '../../../providers/OrgConsoleProvider';\nimport { useMyOrganizations } from '../../organizations/hooks/useOrganizations';\nimport { useOrgsWithPermission } from '../../organizations/hooks/useOrgsWithPermission';\nimport { LoadingState } from '../../../shared/components/feedback/LoadingState';\nimport { ErrorState } from '../../../shared/components/feedback/ErrorState';\nimport { EmptyState } from '../../../shared/components/feedback/EmptyState';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport { useOrganizationPageView } from '../../../hooks/useOrganizationPageView';\n\n/**\n * InvitePeoplePage\n *\n * Globally-reachable entry point (sidebar nav item) for inviting users.\n * Lists the orgs the current user can invite into, then deep-links into\n * each org's existing `members/invite` page so the invite flow itself\n * remains a single source of truth.\n *\n * If the user has exactly one org with invite permission, redirect\n * straight to that org's invite page — saves a click for the common case.\n */\nexport function InvitePeoplePage() {\n  useOrganizationPageView('organizations.invite-people');\n  const tr = useTr();\n  const { navigate, basePath = '/organizations' } = useOrgConsole();\n  const { organizations, loading, error } = useMyOrganizations(100, 0);\n\n  const orgIds = useMemo(() => organizations.map((o) => o.id), [organizations]);\n  const {\n    allowedIds,\n    loading: permLoading,\n    isError: permError,\n  } = useOrgsWithPermission(orgIds, 'member', 'create');\n\n  const invitable = useMemo(\n    () => organizations.filter((o) => allowedIds.has(o.id)),\n    [organizations, allowedIds]\n  );\n\n  const [autoRedirected, setAutoRedirected] = useState(false);\n  useEffect(() => {\n    if (autoRedirected) return;\n    if (loading || permLoading) return;\n    if (invitable.length === 1) {\n      setAutoRedirected(true);\n      navigate(`${basePath}/${invitable[0].id}/members/invite`);\n    }\n  }, [autoRedirected, loading, permLoading, invitable, navigate, basePath]);\n\n  if (loading || permLoading) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n        <LoadingState message={tr('common.loading', 'Loading...')} />\n      </div>\n    );\n  }\n\n  if (error || permError) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n        <ErrorState\n          message={\n            error?.message ||\n            tr('members.invitePeople.error', 'Failed to load organizations for invite.')\n          }\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-200\">\n      <div className=\"mx-auto max-w-3xl space-y-6\">\n        <div className=\"flex items-center gap-3\">\n          <UserPlus size={24} className=\"text-[var(--color-text-primary)]\" aria-hidden=\"true\" />\n          <div>\n            <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n              {tr('members.invitePeople.title', 'Invite People')}\n            </h1>\n            <p className=\"mt-1 text-sm text-[var(--color-text-secondary)]\">\n              {tr(\n                'members.invitePeople.subtitle',\n                'Pick an organization to send an invite into. You can also invite from any organization or workspace detail page.'\n              )}\n            </p>\n          </div>\n        </div>\n\n        {invitable.length === 0 ? (\n          <div className=\"rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-6\">\n            <EmptyState\n              icon={<UserPlus size={40} aria-hidden=\"true\" />}\n              title={tr('members.invitePeople.emptyTitle', 'No organizations where you can invite')}\n              description={tr(\n                'members.invitePeople.emptyDescription',\n                \"You don't currently have permission to invite members into any organization. Ask an organization admin to grant you invite access.\"\n              )}\n            />\n          </div>\n        ) : (\n          <ul className=\"divide-y divide-[var(--color-border-default)] rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-[var(--shadow-elevation-1)]\">\n            {invitable.map((org) => (\n              <li key={org.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => navigate(`${basePath}/${org.id}/members/invite`)}\n                  className=\"flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition-colors hover:bg-[var(--color-bg-subtle)]\"\n                >\n                  <div className=\"flex min-w-0 items-center gap-3\">\n                    <div className=\"flex size-10 items-center justify-center rounded-lg bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)]\">\n                      <Building size={20} aria-hidden=\"true\" />\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"truncate text-sm font-semibold text-[var(--color-text-primary)]\">\n                        {org.name}\n                      </p>\n                      <p className=\"truncate font-mono text-xs text-[var(--color-text-secondary)]\">\n                        /{org.slug}\n                      </p>\n                    </div>\n                  </div>\n                  <ChevronRight\n                    size={18}\n                    className=\"shrink-0 text-[var(--color-text-secondary)]\"\n                    aria-hidden=\"true\"\n                  />\n                </button>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAsBA,SAAgB,IAAmB;AACjC,GAAwB,8BAA8B;CACtD,IAAM,IAAK,GAAO,EACZ,EAAE,aAAU,cAAW,qBAAqB,GAAe,EAC3D,EAAE,kBAAe,YAAS,aAAU,EAAmB,KAAK,EAAE,EAG9D,EACJ,eACA,SAAS,GACT,SAAS,MACP,EALW,QAAc,EAAc,KAAK,MAAM,EAAE,GAAG,EAAE,CAAC,EAAc,CAAC,EAK3C,UAAU,SAAS,EAE/C,IAAY,QACV,EAAc,QAAQ,MAAM,EAAW,IAAI,EAAE,GAAG,CAAC,EACvD,CAAC,GAAe,EAAW,CAC5B,EAEK,CAAC,GAAgB,KAAqB,EAAS,GAAM;AA+B3D,QA9BA,QAAgB;AACV,OACA,KAAW,KACX,EAAU,WAAW,MACvB,EAAkB,GAAK,EACvB,EAAS,GAAG,EAAS,GAAG,EAAU,GAAG,GAAG,iBAAiB;IAE1D;EAAC;EAAgB;EAAS;EAAa;EAAW;EAAU;EAAS,CAAC,EAErE,KAAW,IAEX,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAc,SAAS,EAAG,kBAAkB,aAAa,EAAI,CAAA;EACzD,CAAA,GAIN,KAAS,IAET,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EACE,SACE,GAAO,WACP,EAAG,8BAA8B,2CAA2C,EAE9E,CAAA;EACE,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAU,MAAM;KAAI,WAAU;KAAmC,eAAY;KAAS,CAAA,EACtF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,gBAAgB;KAC/C,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,iCACA,mHACD;KACC,CAAA,CACA,EAAA,CAAA,CACF;OAEL,EAAU,WAAW,IACpB,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,MAAM,kBAAC,GAAD;MAAU,MAAM;MAAI,eAAY;MAAS,CAAA;KAC/C,OAAO,EAAG,mCAAmC,wCAAwC;KACrF,aAAa,EACX,yCACA,qIACD;KACD,CAAA;IACE,CAAA,GAEN,kBAAC,MAAD;IAAI,WAAU;cACX,EAAU,KAAK,MACd,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAS,GAAG,EAAS,GAAG,EAAI,GAAG,iBAAiB;KAC/D,WAAU;eAHZ,CAKE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QAAU,MAAM;QAAI,eAAY;QAAS,CAAA;OACrC,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAI;QACH,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAb,CAA6E,KACzE,EAAI,KACJ;UACA;SACF;SACN,kBAAC,GAAD;MACE,MAAM;MACN,WAAU;MACV,eAAY;MACZ,CAAA,CACK;QACN,EAzBI,EAAI,GAyBR,CACL;IACC,CAAA,CAEH;;EACF,CAAA"}
+{"version":3,"file":"InvitePeoplePage.js","names":[],"sources":["../../../../../src/organization-management/modules/members/pages/InvitePeoplePage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Building, ChevronRight, UserPlus } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { useOrgConsole } from '../../../providers/OrgConsoleProvider';\nimport { useMyOrganizations } from '../../organizations/hooks/useOrganizations';\nimport { useOrgsWithPermission } from '../../organizations/hooks/useOrgsWithPermission';\nimport { LoadingState } from '../../../shared/components/feedback/LoadingState';\nimport { ErrorState } from '../../../shared/components/feedback/ErrorState';\nimport { EmptyState } from '../../../shared/components/feedback/EmptyState';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport { useOrganizationPageView } from '../../../hooks/useOrganizationPageView';\n\n/**\n * InvitePeoplePage\n *\n * Globally-reachable entry point (sidebar nav item) for inviting users.\n * Lists the orgs the current user can invite into, then deep-links into\n * each org's existing `members/invite` page so the invite flow itself\n * remains a single source of truth.\n *\n * If the user has exactly one org with invite permission, redirect\n * straight to that org's invite page — saves a click for the common case.\n */\nexport function InvitePeoplePage() {\n  useOrganizationPageView('organizations.invite-people');\n  const tr = useTr();\n  const { navigate, basePath = '/organizations' } = useOrgConsole();\n  const { organizations, loading, error } = useMyOrganizations(100, 0);\n\n  const orgIds = useMemo(() => organizations.map((o) => o.id), [organizations]);\n  const {\n    allowedIds,\n    loading: permLoading,\n    isError: permError,\n  } = useOrgsWithPermission(orgIds, 'member', 'create');\n\n  const invitable = useMemo(\n    () => organizations.filter((o) => allowedIds.has(o.id)),\n    [organizations, allowedIds]\n  );\n\n  const [autoRedirected, setAutoRedirected] = useState(false);\n  useEffect(() => {\n    if (autoRedirected) return;\n    if (loading || permLoading) return;\n    if (invitable.length === 1) {\n      setAutoRedirected(true);\n      navigate(`${basePath}/${invitable[0].id}/members/invite`);\n    }\n  }, [autoRedirected, loading, permLoading, invitable, navigate, basePath]);\n\n  if (loading || permLoading) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n        <LoadingState message={tr('common.loading', 'Loading...')} />\n      </div>\n    );\n  }\n\n  if (error || permError) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n        <ErrorState\n          message={\n            error?.message ||\n            tr('members.invitePeople.error', 'Failed to load organizations for invite.')\n          }\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-200\">\n      <div className=\"mx-auto max-w-3xl space-y-6\">\n        <div className=\"flex items-center gap-3\">\n          <UserPlus size={24} className=\"text-[var(--color-text-primary)]\" aria-hidden=\"true\" />\n          <div>\n            <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n              {tr('members.invitePeople.title', 'Invite People')}\n            </h1>\n            <p className=\"mt-1 text-sm text-[var(--color-text-secondary)]\">\n              {tr(\n                'members.invitePeople.subtitle',\n                'Pick an organization to send an invite into. You can also invite from any organization or workspace detail page.'\n              )}\n            </p>\n          </div>\n        </div>\n\n        {invitable.length === 0 ? (\n          <GlassCard treatment=\"plain\" className=\"border-border-seam p-6\">\n            <EmptyState\n              icon={<UserPlus size={40} aria-hidden=\"true\" />}\n              title={tr('members.invitePeople.emptyTitle', 'No organizations where you can invite')}\n              description={tr(\n                'members.invitePeople.emptyDescription',\n                \"You don't currently have permission to invite members into any organization. Ask an organization admin to grant you invite access.\"\n              )}\n            />\n          </GlassCard>\n        ) : (\n          <ul className=\"divide-y divide-[var(--color-border-seam)] overflow-hidden rounded-card border border-border-seam bg-bg-surface shadow-elevation-1\">\n            {invitable.map((org) => (\n              <li key={org.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => navigate(`${basePath}/${org.id}/members/invite`)}\n                  className=\"flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition-colors hover:bg-[var(--color-bg-subtle)]\"\n                >\n                  <div className=\"flex min-w-0 items-center gap-3\">\n                    <div className=\"flex size-10 items-center justify-center rounded-lg bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)]\">\n                      <Building size={20} aria-hidden=\"true\" />\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"truncate text-sm font-semibold text-[var(--color-text-primary)]\">\n                        {org.name}\n                      </p>\n                      <p className=\"truncate font-mono text-xs text-[var(--color-text-secondary)]\">\n                        /{org.slug}\n                      </p>\n                    </div>\n                  </div>\n                  <ChevronRight\n                    size={18}\n                    className=\"shrink-0 text-[var(--color-text-secondary)]\"\n                    aria-hidden=\"true\"\n                  />\n                </button>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAuBA,SAAgB,IAAmB;AACjC,GAAwB,8BAA8B;CACtD,IAAM,IAAK,GAAO,EACZ,EAAE,aAAU,cAAW,qBAAqB,GAAe,EAC3D,EAAE,kBAAe,YAAS,aAAU,EAAmB,KAAK,EAAE,EAG9D,EACJ,eACA,SAAS,GACT,SAAS,MACP,EALW,QAAc,EAAc,KAAK,MAAM,EAAE,GAAG,EAAE,CAAC,EAAc,CAAC,EAK3C,UAAU,SAAS,EAE/C,IAAY,QACV,EAAc,QAAQ,MAAM,EAAW,IAAI,EAAE,GAAG,CAAC,EACvD,CAAC,GAAe,EAAW,CAC5B,EAEK,CAAC,GAAgB,KAAqB,EAAS,GAAM;AA+B3D,QA9BA,QAAgB;AACV,OACA,KAAW,KACX,EAAU,WAAW,MACvB,EAAkB,GAAK,EACvB,EAAS,GAAG,EAAS,GAAG,EAAU,GAAG,GAAG,iBAAiB;IAE1D;EAAC;EAAgB;EAAS;EAAa;EAAW;EAAU;EAAS,CAAC,EAErE,KAAW,IAEX,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EAAc,SAAS,EAAG,kBAAkB,aAAa,EAAI,CAAA;EACzD,CAAA,GAIN,KAAS,IAET,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD,EACE,SACE,GAAO,WACP,EAAG,8BAA8B,2CAA2C,EAE9E,CAAA;EACE,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAU,MAAM;KAAI,WAAU;KAAmC,eAAY;KAAS,CAAA,EACtF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,gBAAgB;KAC/C,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,iCACA,mHACD;KACC,CAAA,CACA,EAAA,CAAA,CACF;OAEL,EAAU,WAAW,IACpB,kBAAC,GAAD;IAAW,WAAU;IAAQ,WAAU;cACrC,kBAAC,GAAD;KACE,MAAM,kBAAC,GAAD;MAAU,MAAM;MAAI,eAAY;MAAS,CAAA;KAC/C,OAAO,EAAG,mCAAmC,wCAAwC;KACrF,aAAa,EACX,yCACA,qIACD;KACD,CAAA;IACQ,CAAA,GAEZ,kBAAC,MAAD;IAAI,WAAU;cACX,EAAU,KAAK,MACd,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAS,GAAG,EAAS,GAAG,EAAI,GAAG,iBAAiB;KAC/D,WAAU;eAHZ,CAKE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QAAU,MAAM;QAAI,eAAY;QAAS,CAAA;OACrC,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAI;QACH,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAb,CAA6E,KACzE,EAAI,KACJ;UACA;SACF;SACN,kBAAC,GAAD;MACE,MAAM;MACN,WAAU;MACV,eAAY;MACZ,CAAA,CACK;QACN,EAzBI,EAAI,GAyBR,CACL;IACC,CAAA,CAEH;;EACF,CAAA"}