@burdenoff/microfe-admin 2026.626.1 → 2026.720.1

package/dist/admin/pages/ContentPagesPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentPagesPage.js","names":[],"sources":["../../../src/admin/pages/ContentPagesPage.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useRef } from 'react';\nimport { gql } from '@apollo/client';\nimport { useApolloClient } from '@apollo/client/react';\nimport { FileText, Search, Plus } from 'lucide-react';\nimport { useAdminPermissions } from '../hooks/useAdminPermissions';\nimport {\n  PageLayout,\n  Input,\n  DataTable,\n  Pagination,\n  EmptyState,\n  Badge,\n  Button,\n  PermissionGuard,\n  FormSheet,\n  FormSheetFooter,\n  FormSection,\n  FormRow,\n  DeleteConfirmDialog,\n  useToast,\n  createRowActions,\n  RowActions,\n} from '../components';\nimport { formatDate } from '../utils/formatters';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\n\nconst PAGE_SIZE = 20;\n\n// Content \"type\" is stored on the ProductContentPage `tags` array (one tag per\n// type, matching the website SDK filters: BlogListPage → \"blog\",\n// CaseStudiesListPage → \"case-study\", ChangelogPage → \"changelog\").\nconst CONTENT_TYPES = [\n  { value: 'blog', label: 'Blog', category: 'Blog' },\n  { value: 'case-study', label: 'Case Study', category: 'Case Study' },\n  { value: 'changelog', label: 'Changelog', category: 'Changelog' },\n] as const;\n\ntype ContentType = (typeof CONTENT_TYPES)[number]['value'];\n\nconst TYPE_VARIANT: Record<ContentType, 'default' | 'secondary' | 'outline'> = {\n  blog: 'default',\n  'case-study': 'secondary',\n  changelog: 'outline',\n};\n\n// ---------------------------------------------------------------------------\n// GraphQL\n// ---------------------------------------------------------------------------\n\nconst LIST_PRODUCTS = gql`\n  query AdminContentListProducts($limit: Int, $offset: Int) {\n    platformProducts(limit: $limit, offset: $offset) {\n      items {\n        id\n        name\n        slug\n      }\n    }\n  }\n`;\n\nconst LIST_CONTENT_PAGES = gql`\n  query AdminContentPages(\n    $productId: String\n    $filter: ContentPageFilterInput\n    $limit: Int\n    $offset: Int\n  ) {\n    contentPages(productId: $productId, filter: $filter, limit: $limit, offset: $offset) {\n      items {\n        id\n        productId\n        slug\n        title\n        content\n        contentFormat\n        tags\n        category\n        excerpt\n        thumbnail\n        author\n        publishedAt\n        readingTime\n        featured\n        isPublished\n        visibility\n        updatedAt\n      }\n      total\n    }\n  }\n`;\n\nconst CREATE_CONTENT_PAGE = gql`\n  mutation AdminCreateContentPage($input: CreateContentPageInput!) {\n    createContentPage(input: $input) {\n      id\n      slug\n    }\n  }\n`;\n\nconst UPDATE_CONTENT_PAGE = gql`\n  mutation AdminUpdateContentPage($id: ID!, $input: UpdateContentPageInput!) {\n    updateContentPage(id: $id, input: $input) {\n      id\n      slug\n    }\n  }\n`;\n\nconst DELETE_CONTENT_PAGE = gql`\n  mutation AdminDeleteContentPage($id: ID!) {\n    deleteContentPage(id: $id)\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ninterface ProductOption {\n  id: string;\n  name: string;\n  slug: string;\n}\n\ninterface ContentPageItem {\n  id: string;\n  productId: string | null;\n  slug: string;\n  title: string;\n  content: string;\n  contentFormat: string | null;\n  tags: string[];\n  category: string | null;\n  excerpt: string | null;\n  thumbnail: string | null;\n  author: string | null;\n  publishedAt: string | null;\n  readingTime: number | null;\n  featured: boolean;\n  isPublished: boolean;\n  visibility: string;\n  updatedAt: string;\n}\n\ninterface FormState {\n  productId: string;\n  type: ContentType;\n  slug: string;\n  title: string;\n  excerpt: string;\n  content: string;\n  author: string;\n  publishedAt: string;\n  thumbnail: string;\n  readingTime: string;\n  featured: boolean;\n  isPublished: boolean;\n}\n\nconst EMPTY_FORM: FormState = {\n  productId: '',\n  type: 'blog',\n  slug: '',\n  title: '',\n  excerpt: '',\n  content: '',\n  author: '',\n  publishedAt: '',\n  thumbnail: '',\n  readingTime: '',\n  featured: false,\n  isPublished: true,\n};\n\nfunction typeOf(tags: string[]): ContentType {\n  if (tags.includes('changelog')) return 'changelog';\n  if (tags.includes('case-study')) return 'case-study';\n  return 'blog';\n}\n\nconst inputClass =\n  'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50';\n\n// ---------------------------------------------------------------------------\n// Page\n// ---------------------------------------------------------------------------\n\nexport function ContentPagesPage() {\n  const {\n    canViewProducts,\n    canManageProducts,\n    isLoading: permissionsLoading,\n  } = useAdminPermissions();\n  const apolloClient = useApolloClient();\n  const toast = useToast();\n\n  const [products, setProducts] = useState<ProductOption[]>([]);\n  const [productId, setProductId] = useState('');\n  const [typeFilter, setTypeFilter] = useState<'' | ContentType>('');\n  const [searchInput, setSearchInput] = useState('');\n  const [search, setSearch] = useState(''); // debounced value that actually drives the query\n  const [page, setPage] = useState(1);\n\n  // Monotonic request id so a slow earlier fetch can't overwrite a newer one.\n  const fetchId = useRef(0);\n\n  // Debounce the search box: only the settled value triggers a fetch, and a\n  // new search resets to page 1.\n  useEffect(() => {\n    const t = setTimeout(() => {\n      setSearch(searchInput);\n      setPage(1);\n    }, 300);\n    return () => clearTimeout(t);\n  }, [searchInput]);\n\n  const [items, setItems] = useState<ContentPageItem[]>([]);\n  const [total, setTotal] = useState(0);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const [sheetOpen, setSheetOpen] = useState(false);\n  const [editing, setEditing] = useState<ContentPageItem | null>(null);\n  const [form, setForm] = useState<FormState>(EMPTY_FORM);\n  const [submitting, setSubmitting] = useState(false);\n  const [deleteTarget, setDeleteTarget] = useState<ContentPageItem | null>(null);\n  const [deleting, setDeleting] = useState(false);\n\n  const skip = permissionsLoading || !canViewProducts;\n\n  // Load product list for the selector. Capped at 100 — the platform has well\n  // under that many products, and this drives a simple filter dropdown, not an\n  // exhaustive picker. Revisit with pagination/search if the catalogue grows.\n  useEffect(() => {\n    if (skip) return;\n    // Guard against setting state after unmount if the user navigates away\n    // before this resolves.\n    let active = true;\n    apolloClient\n      .query<{ platformProducts: { items: ProductOption[] } }>({\n        query: LIST_PRODUCTS,\n        variables: { limit: 100, offset: 0 },\n        fetchPolicy: 'network-only',\n      })\n      .then((res) => {\n        if (!active) return;\n        const list = res.data?.platformProducts?.items ?? [];\n        setProducts(list);\n        setProductId((prev) => prev || list[0]?.id || '');\n      })\n      .catch((e) => {\n        if (!active) return;\n        setError(e instanceof Error ? e.message : 'Failed to load products');\n      });\n    return () => {\n      active = false;\n    };\n  }, [apolloClient, skip]);\n\n  const fetchPages = useCallback(async () => {\n    if (skip || !productId) return;\n    const id = ++fetchId.current;\n    setLoading(true);\n    try {\n      const res = await apolloClient.query<{\n        contentPages: { items: ContentPageItem[]; total: number };\n      }>({\n        query: LIST_CONTENT_PAGES,\n        variables: {\n          productId,\n          filter: {\n            ...(search ? { search } : {}),\n            ...(typeFilter ? { tag: typeFilter } : {}),\n          },\n          limit: PAGE_SIZE,\n          offset: (page - 1) * PAGE_SIZE,\n        },\n        fetchPolicy: 'network-only',\n      });\n      if (id !== fetchId.current) return; // a newer fetch superseded this one\n      setItems(res.data?.contentPages?.items ?? []);\n      setTotal(res.data?.contentPages?.total ?? 0);\n      setError(null);\n    } catch (e) {\n      if (id !== fetchId.current) return;\n      setError(e instanceof Error ? e.message : 'Failed to load content pages');\n    } finally {\n      if (id === fetchId.current) setLoading(false);\n    }\n  }, [apolloClient, skip, productId, search, typeFilter, page]);\n\n  useEffect(() => {\n    fetchPages();\n  }, [fetchPages]);\n\n  const totalPages = Math.ceil(total / PAGE_SIZE);\n\n  const openCreate = useCallback(() => {\n    setEditing(null);\n    setForm({ ...EMPTY_FORM, productId, type: typeFilter || 'blog' });\n    setSheetOpen(true);\n  }, [productId, typeFilter]);\n\n  const openEdit = useCallback((item: ContentPageItem) => {\n    setEditing(item);\n    setForm({\n      productId: item.productId ?? '',\n      type: typeOf(item.tags),\n      slug: item.slug,\n      title: item.title,\n      excerpt: item.excerpt ?? '',\n      content: item.content,\n      author: item.author ?? '',\n      publishedAt: item.publishedAt ? item.publishedAt.slice(0, 10) : '',\n      thumbnail: item.thumbnail ?? '',\n      readingTime: item.readingTime != null ? String(item.readingTime) : '',\n      featured: item.featured,\n      isPublished: item.isPublished,\n    });\n    setSheetOpen(true);\n  }, []);\n\n  const handleSubmit = useCallback(async () => {\n    const missing = [\n      !form.title.trim() && 'Title',\n      !form.slug.trim() && 'Slug',\n      !form.content.trim() && 'Content',\n    ].filter(Boolean);\n    if (missing.length) {\n      toast.error(`${missing.join(', ')} ${missing.length > 1 ? 'are' : 'is'} required`);\n      return;\n    }\n    // The thumbnail is rendered as an <img src> on the public sites. Only accept\n    // http(s) URLs, protocol-relative (`//…`) or site-absolute (`/…`) paths so a\n    // `javascript:`/`data:` scheme can't be stored and later become an XSS vector.\n    const thumb = form.thumbnail.trim();\n    if (thumb && !/^(https?:\\/\\/|\\/\\/|\\/)/i.test(thumb)) {\n      toast.error('Thumbnail must be an http(s) URL or an absolute path');\n      return;\n    }\n    setSubmitting(true);\n    const typeMeta = CONTENT_TYPES.find((t) => t.value === form.type)!;\n    // On EDIT, an emptied optional field must send `null` so the backend clears\n    // the previous value (an omitted/`undefined` field is dropped by JSON\n    // serialization and leaves the old value untouched). On CREATE we omit.\n    const empty = editing ? null : undefined;\n    // tags/category are NOT in the shared (update) payload: the type selector is\n    // locked on edit, so an edit must NOT overwrite the row's tags/category.\n    // That preserves pages whose tags aren't one of blog/case-study/changelog\n    // (e.g. legal/privacy) which can surface in the \"All types\" list — editing\n    // their title/content must not silently retag them as a blog post.\n    const shared = {\n      title: form.title.trim(),\n      content: form.content,\n      contentFormat: 'markdown',\n      excerpt: form.excerpt.trim() || empty,\n      author: form.author.trim() || empty,\n      publishedAt: form.publishedAt ? new Date(form.publishedAt).toISOString() : empty,\n      thumbnail: form.thumbnail.trim() || empty,\n      readingTime: form.readingTime !== '' ? Number(form.readingTime) : empty,\n      featured: form.featured,\n      isPublished: form.isPublished,\n      // NOTE: `visibility` is intentionally NOT in the shared (update) payload.\n      // The form has no visibility control, so an edit must not clobber a page\n      // whose visibility was set to INTERNAL/AUTHENTICATED elsewhere back to\n      // PUBLIC. It is only defaulted on CREATE below.\n    };\n    try {\n      if (editing) {\n        await apolloClient.mutate({\n          mutation: UPDATE_CONTENT_PAGE,\n          variables: { id: editing.id, input: shared },\n        });\n        toast.success('Content page updated');\n      } else {\n        await apolloClient.mutate({\n          mutation: CREATE_CONTENT_PAGE,\n          variables: {\n            input: {\n              ...shared,\n              visibility: 'PUBLIC',\n              tags: [form.type],\n              category: typeMeta.category,\n              productId: form.productId || undefined,\n              // Collapse internal hyphen runs (a `--` can arise from adjacent\n              // invalid chars) and trim leading/trailing hyphens — done once on\n              // submit so it never fights the user mid-typing.\n              slug: form.slug\n                .trim()\n                .replace(/-+/g, '-')\n                .replace(/^-+|-+$/g, ''),\n            },\n          },\n        });\n        toast.success('Content page created');\n      }\n      setSheetOpen(false);\n      await fetchPages();\n    } catch (e) {\n      toast.error(e instanceof Error ? e.message : 'Failed to save content page');\n    } finally {\n      setSubmitting(false);\n    }\n  }, [form, editing, apolloClient, toast, fetchPages]);\n\n  const handleDelete = useCallback(async () => {\n    // Guard against a double-click firing two DELETE mutations for the same row\n    // (the second would NOT_FOUND once the first commits).\n    if (!deleteTarget || deleting) return;\n    setDeleting(true);\n    try {\n      await apolloClient.mutate({\n        mutation: DELETE_CONTENT_PAGE,\n        variables: { id: deleteTarget.id },\n      });\n      toast.success('Content page deleted');\n      setDeleteTarget(null);\n      // If we just removed the last row on a non-first page, step back a page —\n      // the page-change effect refetches at the correct offset. Otherwise the\n      // stale offset would land past the new total and strand an empty table.\n      if (items.length === 1 && page > 1) {\n        setPage((p) => p - 1);\n      } else {\n        await fetchPages();\n      }\n    } catch (e) {\n      toast.error(e instanceof Error ? e.message : 'Failed to delete content page');\n    } finally {\n      setDeleting(false);\n    }\n  }, [deleteTarget, deleting, apolloClient, toast, fetchPages, items.length, page]);\n\n  const columns = [\n    {\n      key: 'title',\n      header: 'Title',\n      render: (p: ContentPageItem) => (\n        <div className=\"min-w-0\">\n          <div className=\"font-medium text-foreground\">{p.title}</div>\n          <div className=\"truncate text-xs text-muted-foreground\">{p.slug}</div>\n        </div>\n      ),\n    },\n    {\n      key: 'type',\n      header: 'Type',\n      width: '120px',\n      render: (p: ContentPageItem) => {\n        // Don't fall back to \"Blog\" for tags outside our set (e.g. legal/privacy\n        // pages that surface in the \"All types\" list) — label those \"Other\".\n        const known = CONTENT_TYPES.find((x) => p.tags.includes(x.value));\n        return (\n          <Badge\n            variant={known ? TYPE_VARIANT[known.value] : 'outline'}\n            className=\"text-xs capitalize\"\n          >\n            {known?.label ?? 'Other'}\n          </Badge>\n        );\n      },\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      width: '110px',\n      render: (p: ContentPageItem) => (\n        <div className=\"flex items-center gap-1\">\n          <Badge variant={p.isPublished ? 'default' : 'outline'} className=\"text-xs\">\n            {p.isPublished ? 'Published' : 'Draft'}\n          </Badge>\n          {p.featured && (\n            <Badge variant=\"secondary\" className=\"text-xs\">\n              Featured\n            </Badge>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: 'updatedAt',\n      header: 'Updated',\n      width: '110px',\n      render: (p: ContentPageItem) => formatDate(p.updatedAt),\n    },\n    {\n      key: 'actions',\n      header: '',\n      width: '60px',\n      align: 'right' as const,\n      render: (p: ContentPageItem) => (\n        <RowActions\n          actions={createRowActions({\n            onEdit: canManageProducts ? () => openEdit(p) : undefined,\n            onDelete: canManageProducts ? () => setDeleteTarget(p) : undefined,\n          })}\n        />\n      ),\n    },\n  ];\n\n  const formId = 'content-page-form';\n\n  // True when editing a page whose tags don't map to a managed content type —\n  // used to show a disabled \"Other\" in the (edit-locked) type selector.\n  const editingUnmanagedType =\n    !!editing && !CONTENT_TYPES.some((t) => editing.tags.includes(t.value));\n\n  return (\n    <PermissionGuard\n      allowed={canViewProducts}\n      isLoading={permissionsLoading}\n      pageTitle=\"Content\"\n      denyMessage=\"You don't have permission to manage content pages.\"\n    >\n      <PageLayout\n        title=\"Content\"\n        gradientWord=\"Content\"\n        description={`Blog posts, case studies, and changelog entries${\n          total ? ` · ${total} total` : ''\n        }`}\n        actions={\n          <Button onClick={openCreate} disabled={!canManageProducts || !productId}>\n            <Plus className=\"mr-2 h-4 w-4\" />\n            New Content\n          </Button>\n        }\n      >\n        <div className=\"space-y-4\">\n          <PagePurpose>\n            Manage the marketing and product content that powers each product&apos;s public site —\n            blog posts, case studies and changelog entries. Pick a product, then draft, edit and\n            publish the stories that show up on its website.\n          </PagePurpose>\n\n          {/* Emphasis: how many content entries exist for the selected product. */}\n          <EmphasisPanel className=\"flex items-center gap-4 p-5\">\n            <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/15 text-action-primary-bg\">\n              <FileText className=\"h-6 w-6\" />\n            </div>\n            <div>\n              <div className=\"text-3xl font-bold tabular-nums text-text-primary\">{total}</div>\n              <p className=\"text-sm text-text-secondary\">content entries for this product</p>\n            </div>\n          </EmphasisPanel>\n\n          {/* Filters */}\n          <div className=\"flex flex-wrap items-center gap-3\">\n            <select\n              aria-label=\"Filter by product\"\n              className={`${inputClass} max-w-xs`}\n              value={productId}\n              onChange={(e) => {\n                setPage(1);\n                setProductId(e.target.value);\n              }}\n            >\n              {products.length === 0 && <option value=\"\">Loading products…</option>}\n              {products.map((p) => (\n                <option key={p.id} value={p.id}>\n                  {p.name}\n                </option>\n              ))}\n            </select>\n\n            <select\n              aria-label=\"Filter by content type\"\n              className={`${inputClass} max-w-[180px]`}\n              value={typeFilter}\n              onChange={(e) => {\n                setPage(1);\n                setTypeFilter(e.target.value as '' | ContentType);\n              }}\n            >\n              <option value=\"\">All types</option>\n              {CONTENT_TYPES.map((t) => (\n                <option key={t.value} value={t.value}>\n                  {t.label}\n                </option>\n              ))}\n            </select>\n\n            <div className=\"relative max-w-sm flex-1\">\n              <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\n              <Input\n                placeholder=\"Search content...\"\n                value={searchInput}\n                onChange={(e) => setSearchInput(e.target.value)}\n                className=\"pl-9\"\n              />\n            </div>\n          </div>\n\n          {error && (\n            <div className=\"rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive\">\n              {error}\n            </div>\n          )}\n\n          <DataTable\n            columns={columns}\n            data={items}\n            keyExtractor={(p) => p.id}\n            loading={loading}\n            emptyState={\n              <EmptyState\n                illustration=\"empty-files\"\n                icon={<FileText className=\"h-8 w-8\" />}\n                title=\"No content yet\"\n                description=\"Create a blog post, case study, or changelog entry to get started.\"\n              />\n            }\n          />\n\n          {total > PAGE_SIZE && (\n            <Pagination\n              page={page}\n              totalPages={totalPages}\n              totalItems={total}\n              pageSize={PAGE_SIZE}\n              onPageChange={setPage}\n            />\n          )}\n        </div>\n      </PageLayout>\n\n      {/* Create / Edit sheet */}\n      <FormSheet\n        open={sheetOpen}\n        onClose={() => setSheetOpen(false)}\n        title={editing ? 'Edit content' : 'New content'}\n        footer={\n          <FormSheetFooter\n            formId={formId}\n            isSubmitting={submitting}\n            submitLabel={editing ? 'Save changes' : 'Create'}\n            onCancel={() => setSheetOpen(false)}\n          />\n        }\n      >\n        <form\n          id={formId}\n          onSubmit={(e) => {\n            e.preventDefault();\n            handleSubmit();\n          }}\n          className=\"space-y-6\"\n        >\n          <FormSection title=\"Basics\">\n            <FormRow cols={2}>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Type</span>\n                <select\n                  className={inputClass}\n                  // When editing a page whose tags fall outside the managed set\n                  // (e.g. legal/privacy), show a disabled \"Other\" rather than\n                  // mislabelling it as the typeOf() fallback \"Blog\". The control\n                  // is disabled on edit and tags are never written on update, so\n                  // this is display-only.\n                  value={editingUnmanagedType ? '__other' : form.type}\n                  disabled={!!editing}\n                  onChange={(e) => setForm((f) => ({ ...f, type: e.target.value as ContentType }))}\n                >\n                  {editingUnmanagedType && <option value=\"__other\">Other</option>}\n                  {CONTENT_TYPES.map((t) => (\n                    <option key={t.value} value={t.value}>\n                      {t.label}\n                    </option>\n                  ))}\n                </select>\n              </label>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Product</span>\n                <select\n                  className={inputClass}\n                  value={form.productId}\n                  disabled={!!editing}\n                  onChange={(e) => setForm((f) => ({ ...f, productId: e.target.value }))}\n                >\n                  {products.map((p) => (\n                    <option key={p.id} value={p.id}>\n                      {p.name}\n                    </option>\n                  ))}\n                </select>\n              </label>\n            </FormRow>\n            <FormRow cols={2}>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Title</span>\n                <Input\n                  value={form.title}\n                  onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}\n                  placeholder=\"A clear, descriptive title\"\n                />\n              </label>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Slug</span>\n                <Input\n                  value={form.slug}\n                  disabled={!!editing}\n                  onChange={(e) =>\n                    setForm((f) => ({\n                      ...f,\n                      // Don't strip leading/trailing hyphens here — that breaks\n                      // typing \"my-slug\" (the hyphen would vanish mid-type).\n                      // Leading/trailing hyphens are trimmed on submit instead.\n                      slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]+/g, '-'),\n                    }))\n                  }\n                  placeholder=\"url-friendly-slug\"\n                />\n              </label>\n            </FormRow>\n            <label className=\"block space-y-1.5\">\n              <span className=\"text-sm font-medium\">Excerpt</span>\n              <textarea\n                className={`${inputClass} h-16 py-2`}\n                value={form.excerpt}\n                onChange={(e) => setForm((f) => ({ ...f, excerpt: e.target.value }))}\n                placeholder=\"Short summary shown in cards and previews\"\n              />\n            </label>\n          </FormSection>\n\n          <FormSection\n            title=\"Content\"\n            description=\"Markdown supported (headings, lists, links, bold).\"\n          >\n            <textarea\n              aria-label=\"Content\"\n              className={`${inputClass} h-64 py-2 font-mono text-xs`}\n              value={form.content}\n              onChange={(e) => setForm((f) => ({ ...f, content: e.target.value }))}\n              placeholder={'## Heading\\n\\nWrite your content in markdown...'}\n            />\n          </FormSection>\n\n          <FormSection title=\"Meta\">\n            <FormRow cols={3}>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Author</span>\n                <Input\n                  value={form.author}\n                  onChange={(e) => setForm((f) => ({ ...f, author: e.target.value }))}\n                  placeholder=\"The Team\"\n                />\n              </label>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Published date</span>\n                <Input\n                  type=\"date\"\n                  value={form.publishedAt}\n                  onChange={(e) => setForm((f) => ({ ...f, publishedAt: e.target.value }))}\n                />\n              </label>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Reading time (min)</span>\n                <Input\n                  type=\"number\"\n                  min={0}\n                  value={form.readingTime}\n                  onChange={(e) => setForm((f) => ({ ...f, readingTime: e.target.value }))}\n                />\n              </label>\n            </FormRow>\n            <label className=\"block space-y-1.5\">\n              <span className=\"text-sm font-medium\">Thumbnail URL</span>\n              <Input\n                value={form.thumbnail}\n                onChange={(e) => setForm((f) => ({ ...f, thumbnail: e.target.value }))}\n                placeholder=\"https://…/image.png\"\n              />\n            </label>\n            <div className=\"flex items-center gap-6 pt-1\">\n              <label className=\"flex items-center gap-2 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  checked={form.featured}\n                  onChange={(e) => setForm((f) => ({ ...f, featured: e.target.checked }))}\n                />\n                Featured\n              </label>\n              <label className=\"flex items-center gap-2 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  checked={form.isPublished}\n                  onChange={(e) => setForm((f) => ({ ...f, isPublished: e.target.checked }))}\n                />\n                Published\n              </label>\n            </div>\n          </FormSection>\n        </form>\n      </FormSheet>\n\n      <DeleteConfirmDialog\n        open={!!deleteTarget}\n        onClose={() => setDeleteTarget(null)}\n        onConfirm={handleDelete}\n        itemName={deleteTarget?.title ?? 'this content page'}\n        itemType=\"content page\"\n        loading={deleting}\n      />\n    </PermissionGuard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,IAAM,IAAY,IAKZ,IAAgB;CACpB;EAAE,OAAO;EAAQ,OAAO;EAAQ,UAAU;EAAQ;CAClD;EAAE,OAAO;EAAc,OAAO;EAAc,UAAU;EAAc;CACpE;EAAE,OAAO;EAAa,OAAO;EAAa,UAAU;EAAa;CAClE,EAIK,KAAyE;CAC7E,MAAM;CACN,cAAc;CACd,WAAW;CACZ,EAMK,KAAgB,CAAG;;;;;;;;;;GAYnB,KAAqB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCxB,KAAsB,CAAG;;;;;;;GASzB,IAAsB,CAAG;;;;;;;GASzB,KAAsB,CAAG;;;;GAmDzB,IAAwB;CAC5B,WAAW;CACX,MAAM;CACN,MAAM;CACN,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,aAAa;CACb,WAAW;CACX,aAAa;CACb,UAAU;CACV,aAAa;CACd;AAED,SAAS,GAAO,GAA6B;AAG3C,QAFI,EAAK,SAAS,YAAY,GAAS,cACnC,EAAK,SAAS,aAAa,GAAS,eACjC;;AAGT,IAAM,IACJ;AAMF,SAAgB,IAAmB;CACjC,IAAM,EACJ,oBACA,sBACA,WAAW,MACT,GAAqB,EACnB,IAAe,IAAiB,EAChC,IAAQ,GAAU,EAElB,CAAC,GAAU,MAAe,EAA0B,EAAE,CAAC,EACvD,CAAC,GAAW,KAAgB,EAAS,GAAG,EACxC,CAAC,GAAY,MAAiB,EAA2B,GAAG,EAC5D,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAQ,MAAa,EAAS,GAAG,EAClC,CAAC,GAAM,KAAW,EAAS,EAAE,EAG7B,IAAU,GAAO,EAAE;AAIzB,SAAgB;EACd,IAAM,IAAI,iBAAiB;AAEzB,GADA,GAAU,EAAY,EACtB,EAAQ,EAAE;KACT,IAAI;AACP,eAAa,aAAa,EAAE;IAC3B,CAAC,EAAY,CAAC;CAEjB,IAAM,CAAC,GAAO,MAAY,EAA4B,EAAE,CAAC,EACnD,CAAC,GAAO,MAAY,EAAS,EAAE,EAC/B,CAAC,IAAS,KAAc,EAAS,GAAM,EACvC,CAAC,GAAO,KAAY,EAAwB,KAAK,EAEjD,CAAC,IAAW,KAAgB,EAAS,GAAM,EAC3C,CAAC,GAAS,KAAc,EAAiC,KAAK,EAC9D,CAAC,GAAM,KAAW,EAAoB,EAAW,EACjD,CAAC,IAAY,KAAiB,EAAS,GAAM,EAC7C,CAAC,GAAc,KAAmB,EAAiC,KAAK,EACxE,CAAC,GAAU,KAAe,EAAS,GAAM,EAEzC,IAAO,KAAsB,CAAC;AAKpC,SAAgB;AACd,MAAI,EAAM;EAGV,IAAI,IAAS;AAiBb,SAhBA,EACG,MAAwD;GACvD,OAAO;GACP,WAAW;IAAE,OAAO;IAAK,QAAQ;IAAG;GACpC,aAAa;GACd,CAAC,CACD,MAAM,MAAQ;AACb,OAAI,CAAC,EAAQ;GACb,IAAM,IAAO,EAAI,MAAM,kBAAkB,SAAS,EAAE;AAEpD,GADA,GAAY,EAAK,EACjB,GAAc,MAAS,KAAQ,EAAK,IAAI,MAAM,GAAG;IACjD,CACD,OAAO,MAAM;AACP,QACL,EAAS,aAAa,QAAQ,EAAE,UAAU,0BAA0B;IACpE,QACS;AACX,OAAS;;IAEV,CAAC,GAAc,EAAK,CAAC;CAExB,IAAM,IAAa,EAAY,YAAY;AACzC,MAAI,KAAQ,CAAC,EAAW;EACxB,IAAM,IAAK,EAAE,EAAQ;AACrB,IAAW,GAAK;AAChB,MAAI;GACF,IAAM,IAAM,MAAM,EAAa,MAE5B;IACD,OAAO;IACP,WAAW;KACT;KACA,QAAQ;MACN,GAAI,IAAS,EAAE,WAAQ,GAAG,EAAE;MAC5B,GAAI,IAAa,EAAE,KAAK,GAAY,GAAG,EAAE;MAC1C;KACD,OAAO;KACP,SAAS,IAAO,KAAK;KACtB;IACD,aAAa;IACd,CAAC;AACF,OAAI,MAAO,EAAQ,QAAS;AAG5B,GAFA,GAAS,EAAI,MAAM,cAAc,SAAS,EAAE,CAAC,EAC7C,GAAS,EAAI,MAAM,cAAc,SAAS,EAAE,EAC5C,EAAS,KAAK;WACP,GAAG;AACV,OAAI,MAAO,EAAQ,QAAS;AAC5B,KAAS,aAAa,QAAQ,EAAE,UAAU,+BAA+B;YACjE;AACR,GAAI,MAAO,EAAQ,WAAS,EAAW,GAAM;;IAE9C;EAAC;EAAc;EAAM;EAAW;EAAQ;EAAY;EAAK,CAAC;AAE7D,SAAgB;AACd,KAAY;IACX,CAAC,EAAW,CAAC;CAEhB,IAAM,KAAa,KAAK,KAAK,IAAQ,EAAU,EAEzC,KAAa,QAAkB;AAGnC,EAFA,EAAW,KAAK,EAChB,EAAQ;GAAE,GAAG;GAAY;GAAW,MAAM,KAAc;GAAQ,CAAC,EACjE,EAAa,GAAK;IACjB,CAAC,GAAW,EAAW,CAAC,EAErB,KAAW,GAAa,MAA0B;AAgBtD,EAfA,EAAW,EAAK,EAChB,EAAQ;GACN,WAAW,EAAK,aAAa;GAC7B,MAAM,GAAO,EAAK,KAAK;GACvB,MAAM,EAAK;GACX,OAAO,EAAK;GACZ,SAAS,EAAK,WAAW;GACzB,SAAS,EAAK;GACd,QAAQ,EAAK,UAAU;GACvB,aAAa,EAAK,cAAc,EAAK,YAAY,MAAM,GAAG,GAAG,GAAG;GAChE,WAAW,EAAK,aAAa;GAC7B,aAAa,EAAK,eAAe,OAAkC,KAA3B,OAAO,EAAK,YAAY;GAChE,UAAU,EAAK;GACf,aAAa,EAAK;GACnB,CAAC,EACF,EAAa,GAAK;IACjB,EAAE,CAAC,EAEA,KAAe,EAAY,YAAY;EAC3C,IAAM,IAAU;GACd,CAAC,EAAK,MAAM,MAAM,IAAI;GACtB,CAAC,EAAK,KAAK,MAAM,IAAI;GACrB,CAAC,EAAK,QAAQ,MAAM,IAAI;GACzB,CAAC,OAAO,QAAQ;AACjB,MAAI,EAAQ,QAAQ;AAClB,KAAM,MAAM,GAAG,EAAQ,KAAK,KAAK,CAAC,GAAG,EAAQ,SAAS,IAAI,QAAQ,KAAK,WAAW;AAClF;;EAKF,IAAM,IAAQ,EAAK,UAAU,MAAM;AACnC,MAAI,KAAS,CAAC,0BAA0B,KAAK,EAAM,EAAE;AACnD,KAAM,MAAM,uDAAuD;AACnE;;AAEF,IAAc,GAAK;EACnB,IAAM,IAAW,EAAc,MAAM,MAAM,EAAE,UAAU,EAAK,KAAK,EAI3D,IAAQ,IAAU,OAAO,KAAA,GAMzB,IAAS;GACb,OAAO,EAAK,MAAM,MAAM;GACxB,SAAS,EAAK;GACd,eAAe;GACf,SAAS,EAAK,QAAQ,MAAM,IAAI;GAChC,QAAQ,EAAK,OAAO,MAAM,IAAI;GAC9B,aAAa,EAAK,cAAc,IAAI,KAAK,EAAK,YAAY,CAAC,aAAa,GAAG;GAC3E,WAAW,EAAK,UAAU,MAAM,IAAI;GACpC,aAAa,EAAK,gBAAgB,KAAgC,IAA3B,OAAO,EAAK,YAAY;GAC/D,UAAU,EAAK;GACf,aAAa,EAAK;GAKnB;AACD,MAAI;AA8BF,GA7BI,KACF,MAAM,EAAa,OAAO;IACxB,UAAU;IACV,WAAW;KAAE,IAAI,EAAQ;KAAI,OAAO;KAAQ;IAC7C,CAAC,EACF,EAAM,QAAQ,uBAAuB,KAErC,MAAM,EAAa,OAAO;IACxB,UAAU;IACV,WAAW,EACT,OAAO;KACL,GAAG;KACH,YAAY;KACZ,MAAM,CAAC,EAAK,KAAK;KACjB,UAAU,EAAS;KACnB,WAAW,EAAK,aAAa,KAAA;KAI7B,MAAM,EAAK,KACR,MAAM,CACN,QAAQ,OAAO,IAAI,CACnB,QAAQ,YAAY,GAAG;KAC3B,EACF;IACF,CAAC,EACF,EAAM,QAAQ,uBAAuB,GAEvC,EAAa,GAAM,EACnB,MAAM,GAAY;WACX,GAAG;AACV,KAAM,MAAM,aAAa,QAAQ,EAAE,UAAU,8BAA8B;YACnE;AACR,KAAc,GAAM;;IAErB;EAAC;EAAM;EAAS;EAAc;EAAO;EAAW,CAAC,EAE9C,KAAe,EAAY,YAAY;AAGvC,SAAC,KAAgB,IACrB;KAAY,GAAK;AACjB,OAAI;AAUF,IATA,MAAM,EAAa,OAAO;KACxB,UAAU;KACV,WAAW,EAAE,IAAI,EAAa,IAAI;KACnC,CAAC,EACF,EAAM,QAAQ,uBAAuB,EACrC,EAAgB,KAAK,EAIjB,EAAM,WAAW,KAAK,IAAO,IAC/B,GAAS,MAAM,IAAI,EAAE,GAErB,MAAM,GAAY;YAEb,GAAG;AACV,MAAM,MAAM,aAAa,QAAQ,EAAE,UAAU,gCAAgC;aACrE;AACR,MAAY,GAAM;;;IAEnB;EAAC;EAAc;EAAU;EAAc;EAAO;EAAY,EAAM;EAAQ;EAAK,CAAC,EAE3E,KAAU;EACd;GACE,KAAK;GACL,QAAQ;GACR,SAAS,MACP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAA+B,EAAE;KAAY,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAA0C,EAAE;KAAW,CAAA,CAClE;;GAET;EACD;GACE,KAAK;GACL,QAAQ;GACR,OAAO;GACP,SAAS,MAAuB;IAG9B,IAAM,IAAQ,EAAc,MAAM,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,CAAC;AACjE,WACE,kBAAC,GAAD;KACE,SAAS,IAAQ,GAAa,EAAM,SAAS;KAC7C,WAAU;eAET,GAAO,SAAS;KACX,CAAA;;GAGb;EACD;GACE,KAAK;GACL,QAAQ;GACR,OAAO;GACP,SAAS,MACP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAO,SAAS,EAAE,cAAc,YAAY;KAAW,WAAU;eAC9D,EAAE,cAAc,cAAc;KACzB,CAAA,EACP,EAAE,YACD,kBAAC,GAAD;KAAO,SAAQ;KAAY,WAAU;eAAU;KAEvC,CAAA,CAEN;;GAET;EACD;GACE,KAAK;GACL,QAAQ;GACR,OAAO;GACP,SAAS,MAAuB,EAAW,EAAE,UAAU;GACxD;EACD;GACE,KAAK;GACL,QAAQ;GACR,OAAO;GACP,OAAO;GACP,SAAS,MACP,kBAAC,IAAD,EACE,SAAS,GAAiB;IACxB,QAAQ,UAA0B,GAAS,EAAE,GAAG,KAAA;IAChD,UAAU,UAA0B,EAAgB,EAAE,GAAG,KAAA;IAC1D,CAAC,EACF,CAAA;GAEL;EACF,EAEK,IAAS,qBAIT,IACJ,CAAC,CAAC,KAAW,CAAC,EAAc,MAAM,MAAM,EAAQ,KAAK,SAAS,EAAE,MAAM,CAAC;AAEzE,QACE,kBAAC,IAAD;EACE,SAAS;EACT,WAAW;EACX,WAAU;EACV,aAAY;YAJd;GAME,kBAAC,IAAD;IACE,OAAM;IACN,cAAa;IACb,aAAa,kDACX,IAAQ,MAAM,EAAM,UAAU;IAEhC,SACE,kBAAC,GAAD;KAAQ,SAAS;KAAY,UAAU,CAAC,KAAqB,CAAC;eAA9D,CACE,kBAAC,IAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,cAE1B;;cAGX,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,IAAD,EAAA,UAAa,2NAIC,CAAA;MAGd,kBAAC,IAAD;OAAe,WAAU;iBAAzB,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;QAC5B,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAqD;QAAY,CAAA,EAChF,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAoC,CAAA,CAC3E,EAAA,CAAA,CACQ;;MAGhB,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,UAAD;SACE,cAAW;SACX,WAAW,GAAG,EAAW;SACzB,OAAO;SACP,WAAW,MAAM;AAEf,UADA,EAAQ,EAAE,EACV,EAAa,EAAE,OAAO,MAAM;;mBANhC,CASG,EAAS,WAAW,KAAK,kBAAC,UAAD;UAAQ,OAAM;oBAAG;UAA0B,CAAA,EACpE,EAAS,KAAK,MACb,kBAAC,UAAD;UAAmB,OAAO,EAAE;oBACzB,EAAE;UACI,EAFI,EAAE,GAEN,CACT,CACK;;QAET,kBAAC,UAAD;SACE,cAAW;SACX,WAAW,GAAG,EAAW;SACzB,OAAO;SACP,WAAW,MAAM;AAEf,UADA,EAAQ,EAAE,EACV,GAAc,EAAE,OAAO,MAA0B;;mBANrD,CASE,kBAAC,UAAD;UAAQ,OAAM;oBAAG;UAAkB,CAAA,EAClC,EAAc,KAAK,MAClB,kBAAC,UAAD;UAAsB,OAAO,EAAE;oBAC5B,EAAE;UACI,EAFI,EAAE,MAEN,CACT,CACK;;QAET,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,IAAD,EAAQ,WAAU,0EAA2E,CAAA,EAC7F,kBAAC,GAAD;UACE,aAAY;UACZ,OAAO;UACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;UAC/C,WAAU;UACV,CAAA,CACE;;QACF;;MAEL,KACC,kBAAC,OAAD;OAAK,WAAU;iBACZ;OACG,CAAA;MAGR,kBAAC,IAAD;OACW;OACT,MAAM;OACN,eAAe,MAAM,EAAE;OACd;OACT,YACE,kBAAC,GAAD;QACE,cAAa;QACb,MAAM,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;QACtC,OAAM;QACN,aAAY;QACZ,CAAA;OAEJ,CAAA;MAED,IAAQ,KACP,kBAAC,IAAD;OACQ;OACM;OACZ,YAAY;OACZ,UAAU;OACV,cAAc;OACd,CAAA;MAEA;;IACK,CAAA;GAGb,kBAAC,IAAD;IACE,MAAM;IACN,eAAe,EAAa,GAAM;IAClC,OAAO,IAAU,iBAAiB;IAClC,QACE,kBAAC,IAAD;KACU;KACR,cAAc;KACd,aAAa,IAAU,iBAAiB;KACxC,gBAAgB,EAAa,GAAM;KACnC,CAAA;cAGJ,kBAAC,QAAD;KACE,IAAI;KACJ,WAAW,MAAM;AAEf,MADA,EAAE,gBAAgB,EAClB,IAAc;;KAEhB,WAAU;eANZ;MAQE,kBAAC,GAAD;OAAa,OAAM;iBAAnB;QACE,kBAAC,GAAD;SAAS,MAAM;mBAAf,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAW,CAAA,EACjD,kBAAC,UAAD;WACE,WAAW;WAMX,OAAO,IAAuB,YAAY,EAAK;WAC/C,UAAU,CAAC,CAAC;WACZ,WAAW,MAAM,GAAS,OAAO;YAAE,GAAG;YAAG,MAAM,EAAE,OAAO;YAAsB,EAAE;qBATlF,CAWG,KAAwB,kBAAC,UAAD;YAAQ,OAAM;sBAAU;YAAc,CAAA,EAC9D,EAAc,KAAK,MAClB,kBAAC,UAAD;YAAsB,OAAO,EAAE;sBAC5B,EAAE;YACI,EAFI,EAAE,MAEN,CACT,CACK;aACH;aACR,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAc,CAAA,EACpD,kBAAC,UAAD;WACE,WAAW;WACX,OAAO,EAAK;WACZ,UAAU,CAAC,CAAC;WACZ,WAAW,MAAM,GAAS,OAAO;YAAE,GAAG;YAAG,WAAW,EAAE,OAAO;YAAO,EAAE;qBAErE,EAAS,KAAK,MACb,kBAAC,UAAD;YAAmB,OAAO,EAAE;sBACzB,EAAE;YACI,EAFI,EAAE,GAEN,CACT;WACK,CAAA,CACH;YACA;;QACV,kBAAC,GAAD;SAAS,MAAM;mBAAf,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAY,CAAA,EAClD,kBAAC,GAAD;WACE,OAAO,EAAK;WACZ,WAAW,MAAM,GAAS,OAAO;YAAE,GAAG;YAAG,OAAO,EAAE,OAAO;YAAO,EAAE;WAClE,aAAY;WACZ,CAAA,CACI;aACR,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAW,CAAA,EACjD,kBAAC,GAAD;WACE,OAAO,EAAK;WACZ,UAAU,CAAC,CAAC;WACZ,WAAW,MACT,GAAS,OAAO;YACd,GAAG;YAIH,MAAM,EAAE,OAAO,MAAM,aAAa,CAAC,QAAQ,gBAAgB,IAAI;YAChE,EAAE;WAEL,aAAY;WACZ,CAAA,CACI;YACA;;QACV,kBAAC,SAAD;SAAO,WAAU;mBAAjB,CACE,kBAAC,QAAD;UAAM,WAAU;oBAAsB;UAAc,CAAA,EACpD,kBAAC,YAAD;UACE,WAAW,GAAG,EAAW;UACzB,OAAO,EAAK;UACZ,WAAW,MAAM,GAAS,OAAO;WAAE,GAAG;WAAG,SAAS,EAAE,OAAO;WAAO,EAAE;UACpE,aAAY;UACZ,CAAA,CACI;;QACI;;MAEd,kBAAC,GAAD;OACE,OAAM;OACN,aAAY;iBAEZ,kBAAC,YAAD;QACE,cAAW;QACX,WAAW,GAAG,EAAW;QACzB,OAAO,EAAK;QACZ,WAAW,MAAM,GAAS,OAAO;SAAE,GAAG;SAAG,SAAS,EAAE,OAAO;SAAO,EAAE;QACpE,aAAa;QACb,CAAA;OACU,CAAA;MAEd,kBAAC,GAAD;OAAa,OAAM;iBAAnB;QACE,kBAAC,GAAD;SAAS,MAAM;mBAAf;UACE,kBAAC,SAAD;WAAO,WAAU;qBAAjB,CACE,kBAAC,QAAD;YAAM,WAAU;sBAAsB;YAAa,CAAA,EACnD,kBAAC,GAAD;YACE,OAAO,EAAK;YACZ,WAAW,MAAM,GAAS,OAAO;aAAE,GAAG;aAAG,QAAQ,EAAE,OAAO;aAAO,EAAE;YACnE,aAAY;YACZ,CAAA,CACI;;UACR,kBAAC,SAAD;WAAO,WAAU;qBAAjB,CACE,kBAAC,QAAD;YAAM,WAAU;sBAAsB;YAAqB,CAAA,EAC3D,kBAAC,GAAD;YACE,MAAK;YACL,OAAO,EAAK;YACZ,WAAW,MAAM,GAAS,OAAO;aAAE,GAAG;aAAG,aAAa,EAAE,OAAO;aAAO,EAAE;YACxE,CAAA,CACI;;UACR,kBAAC,SAAD;WAAO,WAAU;qBAAjB,CACE,kBAAC,QAAD;YAAM,WAAU;sBAAsB;YAAyB,CAAA,EAC/D,kBAAC,GAAD;YACE,MAAK;YACL,KAAK;YACL,OAAO,EAAK;YACZ,WAAW,MAAM,GAAS,OAAO;aAAE,GAAG;aAAG,aAAa,EAAE,OAAO;aAAO,EAAE;YACxE,CAAA,CACI;;UACA;;QACV,kBAAC,SAAD;SAAO,WAAU;mBAAjB,CACE,kBAAC,QAAD;UAAM,WAAU;oBAAsB;UAAoB,CAAA,EAC1D,kBAAC,GAAD;UACE,OAAO,EAAK;UACZ,WAAW,MAAM,GAAS,OAAO;WAAE,GAAG;WAAG,WAAW,EAAE,OAAO;WAAO,EAAE;UACtE,aAAY;UACZ,CAAA,CACI;;QACR,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,SAAD;WACE,MAAK;WACL,SAAS,EAAK;WACd,WAAW,MAAM,GAAS,OAAO;YAAE,GAAG;YAAG,UAAU,EAAE,OAAO;YAAS,EAAE;WACvE,CAAA,EAAA,WAEI;aACR,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,SAAD;WACE,MAAK;WACL,SAAS,EAAK;WACd,WAAW,MAAM,GAAS,OAAO;YAAE,GAAG;YAAG,aAAa,EAAE,OAAO;YAAS,EAAE;WAC1E,CAAA,EAAA,YAEI;YACJ;;QACM;;MACT;;IACG,CAAA;GAEZ,kBAAC,IAAD;IACE,MAAM,CAAC,CAAC;IACR,eAAe,EAAgB,KAAK;IACpC,WAAW;IACX,UAAU,GAAc,SAAS;IACjC,UAAS;IACT,SAAS;IACT,CAAA;GACc"}
+{"version":3,"file":"ContentPagesPage.js","names":[],"sources":["../../../src/admin/pages/ContentPagesPage.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useRef } from 'react';\nimport { gql } from '@apollo/client';\nimport { useApolloClient } from '@apollo/client/react';\nimport { FileText, Search, Plus } from 'lucide-react';\nimport { useAdminPermissions } from '../hooks/useAdminPermissions';\nimport {\n  PageLayout,\n  Input,\n  DataTable,\n  Pagination,\n  EmptyState,\n  Badge,\n  Button,\n  PermissionGuard,\n  FormSheet,\n  FormSheetFooter,\n  FormSection,\n  FormRow,\n  DeleteConfirmDialog,\n  useToast,\n  createRowActions,\n  RowActions,\n  MarkdownEditor,\n} from '../components';\nimport { formatDate } from '../utils/formatters';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\n\nconst PAGE_SIZE = 20;\n\n// Content \"type\" is stored on the ProductContentPage `tags` array (one tag per\n// type, matching the website SDK filters: BlogListPage → \"blog\",\n// CaseStudiesListPage → \"case-study\", ChangelogPage → \"changelog\").\nconst CONTENT_TYPES = [\n  { value: 'blog', label: 'Blog', category: 'Blog' },\n  { value: 'case-study', label: 'Case Study', category: 'Case Study' },\n  { value: 'changelog', label: 'Changelog', category: 'Changelog' },\n] as const;\n\ntype ContentType = (typeof CONTENT_TYPES)[number]['value'];\n\nconst TYPE_VARIANT: Record<ContentType, 'default' | 'secondary' | 'outline'> = {\n  blog: 'default',\n  'case-study': 'secondary',\n  changelog: 'outline',\n};\n\n// ---------------------------------------------------------------------------\n// GraphQL\n// ---------------------------------------------------------------------------\n\nconst LIST_PRODUCTS = gql`\n  query AdminContentListProducts($limit: Int, $offset: Int) {\n    platformProducts(limit: $limit, offset: $offset) {\n      items {\n        id\n        name\n        slug\n      }\n    }\n  }\n`;\n\nconst LIST_CONTENT_PAGES = gql`\n  query AdminContentPages(\n    $productId: String\n    $filter: ContentPageFilterInput\n    $limit: Int\n    $offset: Int\n  ) {\n    contentPages(productId: $productId, filter: $filter, limit: $limit, offset: $offset) {\n      items {\n        id\n        productId\n        slug\n        title\n        content\n        contentFormat\n        tags\n        category\n        excerpt\n        thumbnail\n        author\n        publishedAt\n        readingTime\n        featured\n        isPublished\n        visibility\n        updatedAt\n      }\n      total\n    }\n  }\n`;\n\nconst CREATE_CONTENT_PAGE = gql`\n  mutation AdminCreateContentPage($input: CreateContentPageInput!) {\n    createContentPage(input: $input) {\n      id\n      slug\n    }\n  }\n`;\n\nconst UPDATE_CONTENT_PAGE = gql`\n  mutation AdminUpdateContentPage($id: ID!, $input: UpdateContentPageInput!) {\n    updateContentPage(id: $id, input: $input) {\n      id\n      slug\n    }\n  }\n`;\n\nconst DELETE_CONTENT_PAGE = gql`\n  mutation AdminDeleteContentPage($id: ID!) {\n    deleteContentPage(id: $id)\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ninterface ProductOption {\n  id: string;\n  name: string;\n  slug: string;\n}\n\ninterface ContentPageItem {\n  id: string;\n  productId: string | null;\n  slug: string;\n  title: string;\n  content: string;\n  contentFormat: string | null;\n  tags: string[];\n  category: string | null;\n  excerpt: string | null;\n  thumbnail: string | null;\n  author: string | null;\n  publishedAt: string | null;\n  readingTime: number | null;\n  featured: boolean;\n  isPublished: boolean;\n  visibility: string;\n  updatedAt: string;\n}\n\ninterface FormState {\n  productId: string;\n  type: ContentType;\n  slug: string;\n  title: string;\n  excerpt: string;\n  content: string;\n  author: string;\n  publishedAt: string;\n  thumbnail: string;\n  readingTime: string;\n  featured: boolean;\n  isPublished: boolean;\n}\n\nconst EMPTY_FORM: FormState = {\n  productId: '',\n  type: 'blog',\n  slug: '',\n  title: '',\n  excerpt: '',\n  content: '',\n  author: '',\n  publishedAt: '',\n  thumbnail: '',\n  readingTime: '',\n  featured: false,\n  isPublished: true,\n};\n\nfunction typeOf(tags: string[]): ContentType {\n  if (tags.includes('changelog')) return 'changelog';\n  if (tags.includes('case-study')) return 'case-study';\n  return 'blog';\n}\n\nconst inputClass =\n  'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50';\n\n// ---------------------------------------------------------------------------\n// Page\n// ---------------------------------------------------------------------------\n\nexport function ContentPagesPage() {\n  const {\n    canViewProducts,\n    canManageProducts,\n    isLoading: permissionsLoading,\n  } = useAdminPermissions();\n  const apolloClient = useApolloClient();\n  const toast = useToast();\n\n  const [products, setProducts] = useState<ProductOption[]>([]);\n  const [productId, setProductId] = useState('');\n  const [typeFilter, setTypeFilter] = useState<'' | ContentType>('');\n  const [searchInput, setSearchInput] = useState('');\n  const [search, setSearch] = useState(''); // debounced value that actually drives the query\n  const [page, setPage] = useState(1);\n\n  // Monotonic request id so a slow earlier fetch can't overwrite a newer one.\n  const fetchId = useRef(0);\n\n  // Debounce the search box: only the settled value triggers a fetch, and a\n  // new search resets to page 1.\n  useEffect(() => {\n    const t = setTimeout(() => {\n      setSearch(searchInput);\n      setPage(1);\n    }, 300);\n    return () => clearTimeout(t);\n  }, [searchInput]);\n\n  const [items, setItems] = useState<ContentPageItem[]>([]);\n  const [total, setTotal] = useState(0);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const [sheetOpen, setSheetOpen] = useState(false);\n  const [editing, setEditing] = useState<ContentPageItem | null>(null);\n  const [form, setForm] = useState<FormState>(EMPTY_FORM);\n  const [submitting, setSubmitting] = useState(false);\n  const [deleteTarget, setDeleteTarget] = useState<ContentPageItem | null>(null);\n  const [deleting, setDeleting] = useState(false);\n\n  const skip = permissionsLoading || !canViewProducts;\n\n  // Load product list for the selector. Capped at 100 — the platform has well\n  // under that many products, and this drives a simple filter dropdown, not an\n  // exhaustive picker. Revisit with pagination/search if the catalogue grows.\n  useEffect(() => {\n    if (skip) return;\n    // Guard against setting state after unmount if the user navigates away\n    // before this resolves.\n    let active = true;\n    apolloClient\n      .query<{ platformProducts: { items: ProductOption[] } }>({\n        query: LIST_PRODUCTS,\n        variables: { limit: 100, offset: 0 },\n        fetchPolicy: 'network-only',\n      })\n      .then((res) => {\n        if (!active) return;\n        const list = res.data?.platformProducts?.items ?? [];\n        setProducts(list);\n        setProductId((prev) => prev || list[0]?.id || '');\n      })\n      .catch((e) => {\n        if (!active) return;\n        setError(e instanceof Error ? e.message : 'Failed to load products');\n      });\n    return () => {\n      active = false;\n    };\n  }, [apolloClient, skip]);\n\n  const fetchPages = useCallback(async () => {\n    if (skip || !productId) return;\n    const id = ++fetchId.current;\n    setLoading(true);\n    try {\n      const res = await apolloClient.query<{\n        contentPages: { items: ContentPageItem[]; total: number };\n      }>({\n        query: LIST_CONTENT_PAGES,\n        variables: {\n          productId,\n          filter: {\n            ...(search ? { search } : {}),\n            ...(typeFilter ? { tag: typeFilter } : {}),\n          },\n          limit: PAGE_SIZE,\n          offset: (page - 1) * PAGE_SIZE,\n        },\n        fetchPolicy: 'network-only',\n      });\n      if (id !== fetchId.current) return; // a newer fetch superseded this one\n      setItems(res.data?.contentPages?.items ?? []);\n      setTotal(res.data?.contentPages?.total ?? 0);\n      setError(null);\n    } catch (e) {\n      if (id !== fetchId.current) return;\n      setError(e instanceof Error ? e.message : 'Failed to load content pages');\n    } finally {\n      if (id === fetchId.current) setLoading(false);\n    }\n  }, [apolloClient, skip, productId, search, typeFilter, page]);\n\n  useEffect(() => {\n    fetchPages();\n  }, [fetchPages]);\n\n  const totalPages = Math.ceil(total / PAGE_SIZE);\n\n  const openCreate = useCallback(() => {\n    setEditing(null);\n    setForm({ ...EMPTY_FORM, productId, type: typeFilter || 'blog' });\n    setSheetOpen(true);\n  }, [productId, typeFilter]);\n\n  const openEdit = useCallback((item: ContentPageItem) => {\n    setEditing(item);\n    setForm({\n      productId: item.productId ?? '',\n      type: typeOf(item.tags),\n      slug: item.slug,\n      title: item.title,\n      excerpt: item.excerpt ?? '',\n      content: item.content,\n      author: item.author ?? '',\n      publishedAt: item.publishedAt ? item.publishedAt.slice(0, 10) : '',\n      thumbnail: item.thumbnail ?? '',\n      readingTime: item.readingTime != null ? String(item.readingTime) : '',\n      featured: item.featured,\n      isPublished: item.isPublished,\n    });\n    setSheetOpen(true);\n  }, []);\n\n  const handleSubmit = useCallback(async () => {\n    const missing = [\n      !form.title.trim() && 'Title',\n      !form.slug.trim() && 'Slug',\n      !form.content.trim() && 'Content',\n    ].filter(Boolean);\n    if (missing.length) {\n      toast.error(`${missing.join(', ')} ${missing.length > 1 ? 'are' : 'is'} required`);\n      return;\n    }\n    // The thumbnail is rendered as an <img src> on the public sites. Only accept\n    // http(s) URLs, protocol-relative (`//…`) or site-absolute (`/…`) paths so a\n    // `javascript:`/`data:` scheme can't be stored and later become an XSS vector.\n    const thumb = form.thumbnail.trim();\n    if (thumb && !/^(https?:\\/\\/|\\/\\/|\\/)/i.test(thumb)) {\n      toast.error('Thumbnail must be an http(s) URL or an absolute path');\n      return;\n    }\n    setSubmitting(true);\n    const typeMeta = CONTENT_TYPES.find((t) => t.value === form.type)!;\n    // On EDIT, an emptied optional field must send `null` so the backend clears\n    // the previous value (an omitted/`undefined` field is dropped by JSON\n    // serialization and leaves the old value untouched). On CREATE we omit.\n    const empty = editing ? null : undefined;\n    // tags/category are NOT in the shared (update) payload: the type selector is\n    // locked on edit, so an edit must NOT overwrite the row's tags/category.\n    // That preserves pages whose tags aren't one of blog/case-study/changelog\n    // (e.g. legal/privacy) which can surface in the \"All types\" list — editing\n    // their title/content must not silently retag them as a blog post.\n    const shared = {\n      title: form.title.trim(),\n      content: form.content,\n      contentFormat: 'markdown',\n      excerpt: form.excerpt.trim() || empty,\n      author: form.author.trim() || empty,\n      publishedAt: form.publishedAt ? new Date(form.publishedAt).toISOString() : empty,\n      thumbnail: form.thumbnail.trim() || empty,\n      readingTime: form.readingTime !== '' ? Number(form.readingTime) : empty,\n      featured: form.featured,\n      isPublished: form.isPublished,\n      // NOTE: `visibility` is intentionally NOT in the shared (update) payload.\n      // The form has no visibility control, so an edit must not clobber a page\n      // whose visibility was set to INTERNAL/AUTHENTICATED elsewhere back to\n      // PUBLIC. It is only defaulted on CREATE below.\n    };\n    try {\n      if (editing) {\n        await apolloClient.mutate({\n          mutation: UPDATE_CONTENT_PAGE,\n          variables: { id: editing.id, input: shared },\n        });\n        toast.success('Content page updated');\n      } else {\n        await apolloClient.mutate({\n          mutation: CREATE_CONTENT_PAGE,\n          variables: {\n            input: {\n              ...shared,\n              visibility: 'PUBLIC',\n              tags: [form.type],\n              category: typeMeta.category,\n              productId: form.productId || undefined,\n              // Collapse internal hyphen runs (a `--` can arise from adjacent\n              // invalid chars) and trim leading/trailing hyphens — done once on\n              // submit so it never fights the user mid-typing.\n              slug: form.slug\n                .trim()\n                .replace(/-+/g, '-')\n                .replace(/^-+|-+$/g, ''),\n            },\n          },\n        });\n        toast.success('Content page created');\n      }\n      setSheetOpen(false);\n      await fetchPages();\n    } catch (e) {\n      toast.error(e instanceof Error ? e.message : 'Failed to save content page');\n    } finally {\n      setSubmitting(false);\n    }\n  }, [form, editing, apolloClient, toast, fetchPages]);\n\n  const handleDelete = useCallback(async () => {\n    // Guard against a double-click firing two DELETE mutations for the same row\n    // (the second would NOT_FOUND once the first commits).\n    if (!deleteTarget || deleting) return;\n    setDeleting(true);\n    try {\n      await apolloClient.mutate({\n        mutation: DELETE_CONTENT_PAGE,\n        variables: { id: deleteTarget.id },\n      });\n      toast.success('Content page deleted');\n      setDeleteTarget(null);\n      // If we just removed the last row on a non-first page, step back a page —\n      // the page-change effect refetches at the correct offset. Otherwise the\n      // stale offset would land past the new total and strand an empty table.\n      if (items.length === 1 && page > 1) {\n        setPage((p) => p - 1);\n      } else {\n        await fetchPages();\n      }\n    } catch (e) {\n      toast.error(e instanceof Error ? e.message : 'Failed to delete content page');\n    } finally {\n      setDeleting(false);\n    }\n  }, [deleteTarget, deleting, apolloClient, toast, fetchPages, items.length, page]);\n\n  const columns = [\n    {\n      key: 'title',\n      header: 'Title',\n      render: (p: ContentPageItem) => (\n        <div className=\"min-w-0\">\n          <div className=\"font-medium text-foreground\">{p.title}</div>\n          <div className=\"truncate text-xs text-muted-foreground\">{p.slug}</div>\n        </div>\n      ),\n    },\n    {\n      key: 'type',\n      header: 'Type',\n      width: '120px',\n      render: (p: ContentPageItem) => {\n        // Don't fall back to \"Blog\" for tags outside our set (e.g. legal/privacy\n        // pages that surface in the \"All types\" list) — label those \"Other\".\n        const known = CONTENT_TYPES.find((x) => p.tags.includes(x.value));\n        return (\n          <Badge\n            variant={known ? TYPE_VARIANT[known.value] : 'outline'}\n            className=\"text-xs capitalize\"\n          >\n            {known?.label ?? 'Other'}\n          </Badge>\n        );\n      },\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      width: '110px',\n      render: (p: ContentPageItem) => (\n        <div className=\"flex items-center gap-1\">\n          <Badge variant={p.isPublished ? 'default' : 'outline'} className=\"text-xs\">\n            {p.isPublished ? 'Published' : 'Draft'}\n          </Badge>\n          {p.featured && (\n            <Badge variant=\"secondary\" className=\"text-xs\">\n              Featured\n            </Badge>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: 'updatedAt',\n      header: 'Updated',\n      width: '110px',\n      render: (p: ContentPageItem) => formatDate(p.updatedAt),\n    },\n    {\n      key: 'actions',\n      header: '',\n      width: '60px',\n      align: 'right' as const,\n      render: (p: ContentPageItem) => (\n        <RowActions\n          actions={createRowActions({\n            onEdit: canManageProducts ? () => openEdit(p) : undefined,\n            onDelete: canManageProducts ? () => setDeleteTarget(p) : undefined,\n          })}\n        />\n      ),\n    },\n  ];\n\n  const formId = 'content-page-form';\n\n  // True when editing a page whose tags don't map to a managed content type —\n  // used to show a disabled \"Other\" in the (edit-locked) type selector.\n  const editingUnmanagedType =\n    !!editing && !CONTENT_TYPES.some((t) => editing.tags.includes(t.value));\n\n  return (\n    <PermissionGuard\n      allowed={canViewProducts}\n      isLoading={permissionsLoading}\n      pageTitle=\"Content\"\n      denyMessage=\"You don't have permission to manage content pages.\"\n    >\n      <PageLayout\n        title=\"Content\"\n        gradientWord=\"Content\"\n        description={`Blog posts, case studies, and changelog entries${\n          total ? ` · ${total} total` : ''\n        }`}\n        actions={\n          <Button onClick={openCreate} disabled={!canManageProducts || !productId}>\n            <Plus className=\"mr-2 h-4 w-4\" />\n            New Content\n          </Button>\n        }\n      >\n        <div className=\"space-y-4\">\n          <PagePurpose>\n            Manage the marketing and product content that powers each product&apos;s public site —\n            blog posts, case studies and changelog entries. Pick a product, then draft, edit and\n            publish the stories that show up on its website.\n          </PagePurpose>\n\n          {/* Emphasis: how many content entries exist for the selected product. */}\n          <EmphasisPanel className=\"flex items-center gap-4 p-5\">\n            <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/15 text-action-primary-bg\">\n              <FileText className=\"h-6 w-6\" />\n            </div>\n            <div>\n              <div className=\"text-3xl font-bold tabular-nums text-text-primary\">{total}</div>\n              <p className=\"text-sm text-text-secondary\">content entries for this product</p>\n            </div>\n          </EmphasisPanel>\n\n          {/* Filters */}\n          <div className=\"flex flex-wrap items-center gap-3\">\n            <select\n              aria-label=\"Filter by product\"\n              className={`${inputClass} max-w-xs`}\n              value={productId}\n              onChange={(e) => {\n                setPage(1);\n                setProductId(e.target.value);\n              }}\n            >\n              {products.length === 0 && <option value=\"\">Loading products…</option>}\n              {products.map((p) => (\n                <option key={p.id} value={p.id}>\n                  {p.name}\n                </option>\n              ))}\n            </select>\n\n            <select\n              aria-label=\"Filter by content type\"\n              className={`${inputClass} max-w-[180px]`}\n              value={typeFilter}\n              onChange={(e) => {\n                setPage(1);\n                setTypeFilter(e.target.value as '' | ContentType);\n              }}\n            >\n              <option value=\"\">All types</option>\n              {CONTENT_TYPES.map((t) => (\n                <option key={t.value} value={t.value}>\n                  {t.label}\n                </option>\n              ))}\n            </select>\n\n            <div className=\"relative max-w-sm flex-1\">\n              <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\n              <Input\n                placeholder=\"Search content...\"\n                value={searchInput}\n                onChange={(e) => setSearchInput(e.target.value)}\n                className=\"pl-9\"\n              />\n            </div>\n          </div>\n\n          {error && (\n            <div className=\"rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive\">\n              {error}\n            </div>\n          )}\n\n          <DataTable\n            columns={columns}\n            data={items}\n            keyExtractor={(p) => p.id}\n            loading={loading}\n            emptyState={\n              <EmptyState\n                illustration=\"empty-files\"\n                icon={<FileText className=\"h-8 w-8\" />}\n                title=\"No content yet\"\n                description=\"Create a blog post, case study, or changelog entry to get started.\"\n              />\n            }\n          />\n\n          {total > PAGE_SIZE && (\n            <Pagination\n              page={page}\n              totalPages={totalPages}\n              totalItems={total}\n              pageSize={PAGE_SIZE}\n              onPageChange={setPage}\n            />\n          )}\n        </div>\n      </PageLayout>\n\n      {/* Create / Edit sheet */}\n      <FormSheet\n        open={sheetOpen}\n        onClose={() => setSheetOpen(false)}\n        title={editing ? 'Edit content' : 'New content'}\n        footer={\n          <FormSheetFooter\n            formId={formId}\n            isSubmitting={submitting}\n            submitLabel={editing ? 'Save changes' : 'Create'}\n            onCancel={() => setSheetOpen(false)}\n          />\n        }\n      >\n        <form\n          id={formId}\n          onSubmit={(e) => {\n            e.preventDefault();\n            handleSubmit();\n          }}\n          className=\"space-y-6\"\n        >\n          <FormSection title=\"Basics\">\n            <FormRow cols={2}>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Type</span>\n                <select\n                  className={inputClass}\n                  // When editing a page whose tags fall outside the managed set\n                  // (e.g. legal/privacy), show a disabled \"Other\" rather than\n                  // mislabelling it as the typeOf() fallback \"Blog\". The control\n                  // is disabled on edit and tags are never written on update, so\n                  // this is display-only.\n                  value={editingUnmanagedType ? '__other' : form.type}\n                  disabled={!!editing}\n                  onChange={(e) => setForm((f) => ({ ...f, type: e.target.value as ContentType }))}\n                >\n                  {editingUnmanagedType && <option value=\"__other\">Other</option>}\n                  {CONTENT_TYPES.map((t) => (\n                    <option key={t.value} value={t.value}>\n                      {t.label}\n                    </option>\n                  ))}\n                </select>\n              </label>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Product</span>\n                <select\n                  className={inputClass}\n                  value={form.productId}\n                  disabled={!!editing}\n                  onChange={(e) => setForm((f) => ({ ...f, productId: e.target.value }))}\n                >\n                  {products.map((p) => (\n                    <option key={p.id} value={p.id}>\n                      {p.name}\n                    </option>\n                  ))}\n                </select>\n              </label>\n            </FormRow>\n            <FormRow cols={2}>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Title</span>\n                <Input\n                  value={form.title}\n                  onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}\n                  placeholder=\"A clear, descriptive title\"\n                />\n              </label>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Slug</span>\n                <Input\n                  value={form.slug}\n                  disabled={!!editing}\n                  onChange={(e) =>\n                    setForm((f) => ({\n                      ...f,\n                      // Don't strip leading/trailing hyphens here — that breaks\n                      // typing \"my-slug\" (the hyphen would vanish mid-type).\n                      // Leading/trailing hyphens are trimmed on submit instead.\n                      slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]+/g, '-'),\n                    }))\n                  }\n                  placeholder=\"url-friendly-slug\"\n                />\n              </label>\n            </FormRow>\n            <label className=\"block space-y-1.5\">\n              <span className=\"text-sm font-medium\">Excerpt</span>\n              <textarea\n                className={`${inputClass} h-16 py-2`}\n                value={form.excerpt}\n                onChange={(e) => setForm((f) => ({ ...f, excerpt: e.target.value }))}\n                placeholder=\"Short summary shown in cards and previews\"\n              />\n            </label>\n          </FormSection>\n\n          <FormSection\n            title=\"Content\"\n            description=\"Markdown supported (headings, lists, links, bold). Use the toolbar to insert common syntax.\"\n          >\n            <MarkdownEditor\n              aria-label=\"Content\"\n              value={form.content}\n              onChange={(value) => setForm((f) => ({ ...f, content: value }))}\n              placeholder={'## Heading\\n\\nWrite your content in markdown...'}\n            />\n          </FormSection>\n\n          <FormSection title=\"Meta\">\n            <FormRow cols={3}>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Author</span>\n                <Input\n                  value={form.author}\n                  onChange={(e) => setForm((f) => ({ ...f, author: e.target.value }))}\n                  placeholder=\"The Team\"\n                />\n              </label>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Published date</span>\n                <Input\n                  type=\"date\"\n                  value={form.publishedAt}\n                  onChange={(e) => setForm((f) => ({ ...f, publishedAt: e.target.value }))}\n                />\n              </label>\n              <label className=\"space-y-1.5\">\n                <span className=\"text-sm font-medium\">Reading time (min)</span>\n                <Input\n                  type=\"number\"\n                  min={0}\n                  value={form.readingTime}\n                  onChange={(e) => setForm((f) => ({ ...f, readingTime: e.target.value }))}\n                />\n              </label>\n            </FormRow>\n            <label className=\"block space-y-1.5\">\n              <span className=\"text-sm font-medium\">Thumbnail URL</span>\n              <Input\n                value={form.thumbnail}\n                onChange={(e) => setForm((f) => ({ ...f, thumbnail: e.target.value }))}\n                placeholder=\"https://…/image.png\"\n              />\n            </label>\n            <div className=\"flex items-center gap-6 pt-1\">\n              <label className=\"flex items-center gap-2 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  checked={form.featured}\n                  onChange={(e) => setForm((f) => ({ ...f, featured: e.target.checked }))}\n                />\n                Featured\n              </label>\n              <label className=\"flex items-center gap-2 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  checked={form.isPublished}\n                  onChange={(e) => setForm((f) => ({ ...f, isPublished: e.target.checked }))}\n                />\n                Published\n              </label>\n            </div>\n          </FormSection>\n        </form>\n      </FormSheet>\n\n      <DeleteConfirmDialog\n        open={!!deleteTarget}\n        onClose={() => setDeleteTarget(null)}\n        onConfirm={handleDelete}\n        itemName={deleteTarget?.title ?? 'this content page'}\n        itemType=\"content page\"\n        loading={deleting}\n      />\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}

package/dist/admin/pages/DashboardPage.js

@@ -14,11 +14,11 @@ import { useMemo as g } from "react";
 import { Briefcase as _, Building2 as v, FileText as y, HelpCircle as b, Layout as x, Plus as S, UserPlus as C, Users as w } from "lucide-react";
 import { useNavigate as T } from "react-router-dom";
 import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { NextSteps as O, PagePurpose as k } from "@burdenoff/fe-libs/ui";
-import { useI18n as A } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useI18n as O } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { NextSteps as k, PagePurpose as A } from "@burdenoff/fe-libs/ui";
 //#region src/admin/pages/DashboardPage.tsx
 function j() {
-	let { canViewDashboard: j, isLoading: M } = t(), { basePath: N = "" } = e(), P = T(), { t: F } = A(), I = (e, t, n) => s(F, e, t, n), L = M || !j, { data: R, loading: z } = p({
+	let { canViewDashboard: j, isLoading: M } = t(), { basePath: N = "" } = e(), P = T(), { t: F } = O(), I = (e, t, n) => s(F, e, t, n), L = M || !j, { data: R, loading: z } = p({
 		fetchPolicy: "cache-and-network",
 		skip: L
 	}), { data: B, loading: V } = f({
@@ -78,8 +78,8 @@ function j() {
 			children: /* @__PURE__ */ D("div", {
 				className: "space-y-6",
 				children: [
-					/* @__PURE__ */ E(k, { children: I("admin.dashboard.purpose", "Your control tower for the whole platform. See live tenant, organization, workspace and user counts at a glance, watch the most recent administrative activity, and jump straight into the day-to-day jobs — onboarding a tenant, inviting a user, or reviewing the audit trail.") }),
-					/* @__PURE__ */ E(O, {
+					/* @__PURE__ */ E(A, { children: I("admin.dashboard.purpose", "Your control tower for the whole platform. See live tenant, organization, workspace and user counts at a glance, watch the most recent administrative activity, and jump straight into the day-to-day jobs — onboarding a tenant, inviting a user, or reviewing the audit trail.") }),
+					/* @__PURE__ */ E(k, {
 						storageKey: "admin-dashboard",
 						steps: [
 							{

package/dist/admin/pages/FeatureFlagsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureFlagsPage.js","names":[],"sources":["../../../src/admin/pages/FeatureFlagsPage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { ToggleLeft, Search, Plus, Trash2 } from 'lucide-react';\nimport { PageLayout, Input, Button, EmptyState, DataTable, RowActions } from '../components';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport {\n  useListFeatureFlagsQuery,\n  useUpdateFeatureFlagMutation,\n  useDeleteFeatureFlagMutation,\n} from '../../generated/global-operations';\nimport { FeatureFlagStatus } from '../../generated/global-types';\n\nexport function FeatureFlagsPage() {\n  const [search, setSearch] = useState('');\n  const { data, loading, error, refetch } = useListFeatureFlagsQuery({\n    variables: {\n      filter: search ? { name: { contains: search } } : undefined,\n    },\n  });\n\n  const [updateFeatureFlag] = useUpdateFeatureFlagMutation();\n  const [deleteFeatureFlag] = useDeleteFeatureFlagMutation();\n\n  const flags = data?.featureFlags?.items || [];\n  const activeFlagCount = flags.filter(\n    (flag: { status: FeatureFlagStatus }) => flag.status === FeatureFlagStatus.Active\n  ).length;\n\n  const handleToggleStatus = async (id: string, currentStatus: FeatureFlagStatus) => {\n    const newStatus =\n      currentStatus === FeatureFlagStatus.Active\n        ? FeatureFlagStatus.Archived\n        : FeatureFlagStatus.Active;\n\n    try {\n      await updateFeatureFlag({\n        variables: {\n          id,\n          input: { status: newStatus },\n        },\n      });\n      refetch();\n    } catch (err) {\n      console.error('Failed to update status:', err);\n    }\n  };\n\n  const handleDelete = async (id: string) => {\n    if (confirm('Are you sure you want to delete this feature flag?')) {\n      try {\n        await deleteFeatureFlag({ variables: { id } });\n        refetch();\n      } catch (err) {\n        console.error('Failed to delete flag:', err);\n      }\n    }\n  };\n\n  const columns = [\n    {\n      key: 'name',\n      header: 'Name',\n      render: (flag: any) => (\n        <div className=\"flex flex-col text-left\">\n          <span className=\"font-medium\">{flag.name}</span>\n          <span className=\"text-xs text-text-secondary\">{flag.key}</span>\n        </div>\n      ),\n    },\n    {\n      key: 'flagType',\n      header: 'Type',\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      render: (flag: any) => {\n        const isActive = flag.status === FeatureFlagStatus.Active;\n        return (\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => handleToggleStatus(flag.id, flag.status)}\n            className={isActive ? 'border-primary text-primary' : 'text-text-secondary'}\n          >\n            {isActive ? 'Active' : 'Archived'}\n          </Button>\n        );\n      },\n    },\n    {\n      key: 'actions',\n      header: '',\n      align: 'right' as const,\n      render: (flag: any) => (\n        <RowActions\n          actions={[\n            {\n              key: 'delete',\n              label: 'Delete',\n              icon: <Trash2 className=\"h-4 w-4\" />,\n              onClick: () => handleDelete(flag.id),\n              destructive: true,\n            },\n          ]}\n        />\n      ),\n    },\n  ];\n\n  if (error) {\n    return (\n      <PageLayout title=\"Feature Flags\" description=\"Error loading feature flags\">\n        <div className=\"p-4 text-status-error-text\">Error: {error.message}</div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Feature Flags\"\n      gradientWord=\"Flags\"\n      description=\"Manage and monitor platform feature flags\"\n      actions={\n        <Button>\n          <Plus className=\"mr-2 h-4 w-4\" />\n          Create Feature Flag\n        </Button>\n      }\n    >\n      <div className=\"space-y-4\">\n        <PagePurpose>\n          Feature flags let you turn parts of the platform on or off without shipping new code.\n          Use this page to roll a feature out gradually, kill-switch something that&apos;s\n          misbehaving, or archive flags you no longer need.\n        </PagePurpose>\n\n        {/* Emphasis: how many flags are currently active. */}\n        <EmphasisPanel className=\"flex items-center gap-4 p-5\">\n          <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/15 text-action-primary-bg\">\n            <ToggleLeft className=\"h-6 w-6\" />\n          </div>\n          <div>\n            <div className=\"text-3xl font-bold tabular-nums text-text-primary\">\n              {activeFlagCount}\n            </div>\n            <p className=\"text-sm text-text-secondary\">active feature flags</p>\n          </div>\n        </EmphasisPanel>\n\n        <div className=\"flex items-center justify-between\">\n          <div className=\"relative max-w-sm flex-1\">\n            <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n            <Input\n              placeholder=\"Search feature flags...\"\n              className=\"pl-9\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n            />\n          </div>\n        </div>\n\n        <DataTable\n          columns={columns}\n          data={flags}\n          keyExtractor={(flag) => flag.id}\n          loading={loading}\n          emptyState={\n            <EmptyState\n              illustration=\"empty-data\"\n              icon={<ToggleLeft className=\"h-8 w-8\" />}\n              title=\"No feature flags found\"\n              description=\"Feature flags will appear here when they are created\"\n            />\n          }\n        />\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"FeatureFlagsPage.js","names":[],"sources":["../../../src/admin/pages/FeatureFlagsPage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { ToggleLeft, Search, Plus, Trash2 } from 'lucide-react';\nimport { PageLayout, Input, Button, EmptyState, DataTable, RowActions } from '../components';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport {\n  useListFeatureFlagsQuery,\n  useUpdateFeatureFlagMutation,\n  useDeleteFeatureFlagMutation,\n} from '../../generated/global-operations';\nimport { FeatureFlagStatus } from '../../generated/global-types';\n\nexport function FeatureFlagsPage() {\n  const [search, setSearch] = useState('');\n  const { data, loading, error, refetch } = useListFeatureFlagsQuery({\n    variables: {\n      filter: search ? { name: { contains: search } } : undefined,\n    },\n  });\n\n  const [updateFeatureFlag] = useUpdateFeatureFlagMutation();\n  const [deleteFeatureFlag] = useDeleteFeatureFlagMutation();\n\n  const flags = data?.featureFlags?.items || [];\n  const activeFlagCount = flags.filter(\n    (flag: { status: FeatureFlagStatus }) => flag.status === FeatureFlagStatus.Active\n  ).length;\n\n  const handleToggleStatus = async (id: string, currentStatus: FeatureFlagStatus) => {\n    const newStatus =\n      currentStatus === FeatureFlagStatus.Active\n        ? FeatureFlagStatus.Archived\n        : FeatureFlagStatus.Active;\n\n    try {\n      await updateFeatureFlag({\n        variables: {\n          id,\n          input: { status: newStatus },\n        },\n      });\n      refetch();\n    } catch (err) {\n      console.error('Failed to update status:', err);\n    }\n  };\n\n  const handleDelete = async (id: string) => {\n    if (confirm('Are you sure you want to delete this feature flag?')) {\n      try {\n        await deleteFeatureFlag({ variables: { id } });\n        refetch();\n      } catch (err) {\n        console.error('Failed to delete flag:', err);\n      }\n    }\n  };\n\n  const columns = [\n    {\n      key: 'name',\n      header: 'Name',\n      render: (flag: any) => (\n        <div className=\"flex flex-col text-left\">\n          <span className=\"font-medium\">{flag.name}</span>\n          <span className=\"text-xs text-text-secondary\">{flag.key}</span>\n        </div>\n      ),\n    },\n    {\n      key: 'flagType',\n      header: 'Type',\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      render: (flag: any) => {\n        const isActive = flag.status === FeatureFlagStatus.Active;\n        return (\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => handleToggleStatus(flag.id, flag.status)}\n            className={isActive ? 'border-primary text-primary' : 'text-text-secondary'}\n          >\n            {isActive ? 'Active' : 'Archived'}\n          </Button>\n        );\n      },\n    },\n    {\n      key: 'actions',\n      header: '',\n      align: 'right' as const,\n      render: (flag: any) => (\n        <RowActions\n          actions={[\n            {\n              key: 'delete',\n              label: 'Delete',\n              icon: <Trash2 className=\"h-4 w-4\" />,\n              onClick: () => handleDelete(flag.id),\n              destructive: true,\n            },\n          ]}\n        />\n      ),\n    },\n  ];\n\n  if (error) {\n    return (\n      <PageLayout title=\"Feature Flags\" description=\"Error loading feature flags\">\n        <div className=\"p-4 text-status-error-text\">Error: {error.message}</div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Feature Flags\"\n      gradientWord=\"Flags\"\n      description=\"Manage and monitor platform feature flags\"\n      actions={\n        <Button>\n          <Plus className=\"mr-2 h-4 w-4\" />\n          Create Feature Flag\n        </Button>\n      }\n    >\n      <div className=\"space-y-4\">\n        <PagePurpose>\n          Feature flags let you turn parts of the platform on or off without shipping new code. Use\n          this page to roll a feature out gradually, kill-switch something that&apos;s misbehaving,\n          or archive flags you no longer need.\n        </PagePurpose>\n\n        {/* Emphasis: how many flags are currently active. */}\n        <EmphasisPanel className=\"flex items-center gap-4 p-5\">\n          <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/15 text-action-primary-bg\">\n            <ToggleLeft className=\"h-6 w-6\" />\n          </div>\n          <div>\n            <div className=\"text-3xl font-bold tabular-nums text-text-primary\">\n              {activeFlagCount}\n            </div>\n            <p className=\"text-sm text-text-secondary\">active feature flags</p>\n          </div>\n        </EmphasisPanel>\n\n        <div className=\"flex items-center justify-between\">\n          <div className=\"relative max-w-sm flex-1\">\n            <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n            <Input\n              placeholder=\"Search feature flags...\"\n              className=\"pl-9\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n            />\n          </div>\n        </div>\n\n        <DataTable\n          columns={columns}\n          data={flags}\n          keyExtractor={(flag) => flag.id}\n          loading={loading}\n          emptyState={\n            <EmptyState\n              illustration=\"empty-data\"\n              icon={<ToggleLeft className=\"h-8 w-8\" />}\n              title=\"No feature flags found\"\n              description=\"Feature flags will appear here when they are created\"\n            />\n          }\n        />\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,IAAmB;CACjC,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,EAAE,SAAM,YAAS,UAAO,eAAY,EAAyB,EACjE,WAAW,EACT,QAAQ,IAAS,EAAE,MAAM,EAAE,UAAU,GAAQ,EAAE,GAAG,KAAA,GACnD,EACF,CAAC,EAEI,CAAC,KAAqB,GAA8B,EACpD,CAAC,KAAqB,GAA8B,EAEpD,IAAQ,GAAM,cAAc,SAAS,EAAE,EACvC,IAAkB,EAAM,QAC3B,MAAwC,EAAK,WAAW,EAAkB,OAC5E,CAAC,QAEI,IAAqB,OAAO,GAAY,MAAqC;EACjF,IAAM,IACJ,MAAkB,EAAkB,SAChC,EAAkB,WAClB,EAAkB;AAExB,MAAI;AAOF,GANA,MAAM,EAAkB,EACtB,WAAW;IACT;IACA,OAAO,EAAE,QAAQ,GAAW;IAC7B,EACF,CAAC,EACF,GAAS;WACF,GAAK;AACZ,WAAQ,MAAM,4BAA4B,EAAI;;IAI5C,IAAe,OAAO,MAAe;AACzC,MAAI,QAAQ,qDAAqD,CAC/D,KAAI;AAEF,GADA,MAAM,EAAkB,EAAE,WAAW,EAAE,OAAI,EAAE,CAAC,EAC9C,GAAS;WACF,GAAK;AACZ,WAAQ,MAAM,0BAA0B,EAAI;;;AAiElD,QARI,IAEA,kBAAC,GAAD;EAAY,OAAM;EAAgB,aAAY;YAC5C,kBAAC,OAAD;GAAK,WAAU;aAAf,CAA4C,WAAQ,EAAM,QAAc;;EAC7D,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,cAAa;EACb,aAAY;EACZ,SACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,sBAE1B,EAAA,CAAA;YAGX,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAA,UAAa,uNAIC,CAAA;IAGd,kBAAC,GAAD;KAAe,WAAU;eAAzB,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;MAC9B,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA,EACN,kBAAC,KAAD;MAAG,WAAU;gBAA8B;MAAwB,CAAA,CAC/D,EAAA,CAAA,CACQ;;IAEhB,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA,EAC3F,kBAAC,GAAD;OACE,aAAY;OACZ,WAAU;OACV,OAAO;OACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;OAC1C,CAAA,CACE;;KACF,CAAA;IAEN,kBAAC,GAAD;KACW,SAzGD;MACd;OACE,KAAK;OACL,QAAQ;OACR,SAAS,MACP,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAe,EAAK;SAAY,CAAA,EAChD,kBAAC,QAAD;SAAM,WAAU;mBAA+B,EAAK;SAAW,CAAA,CAC3D;;OAET;MACD;OACE,KAAK;OACL,QAAQ;OACT;MACD;OACE,KAAK;OACL,QAAQ;OACR,SAAS,MAAc;QACrB,IAAM,IAAW,EAAK,WAAW,EAAkB;AACnD,eACE,kBAAC,GAAD;SACE,SAAQ;SACR,MAAK;SACL,eAAe,EAAmB,EAAK,IAAI,EAAK,OAAO;SACvD,WAAW,IAAW,gCAAgC;mBAErD,IAAW,WAAW;SAChB,CAAA;;OAGd;MACD;OACE,KAAK;OACL,QAAQ;OACR,OAAO;OACP,SAAS,MACP,kBAAC,GAAD,EACE,SAAS,CACP;QACE,KAAK;QACL,OAAO;QACP,MAAM,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;QACpC,eAAe,EAAa,EAAK,GAAG;QACpC,aAAa;QACd,CACF,EACD,CAAA;OAEL;MACF;KAwDO,MAAM;KACN,eAAe,MAAS,EAAK;KACpB;KACT,YACE,kBAAC,GAAD;MACE,cAAa;MACb,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;MACxC,OAAM;MACN,aAAY;MACZ,CAAA;KAEJ,CAAA;IACE;;EACK,CAAA"}

package/dist/admin/pages/ReferralsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReferralsPage.js","names":[],"sources":["../../../src/admin/pages/ReferralsPage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Activity, Link2, RefreshCw, Users } from 'lucide-react';\n\nimport { PageLayout, EmptyState, PermissionGuard } from '../components';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport { useAdminPermissions } from '../hooks/useAdminPermissions';\nimport { useAdmin } from '../providers/AdminProvider';\nimport { directActivityGraphqlRequest } from '../utils/directActivityGraphql';\nimport { formatRelativeTime } from '../utils/formatters';\n\ntype ReferralSummary = {\n  totalCodes: number;\n  totalVisits: number;\n  totalJourneys: number;\n  totalSignups: number;\n  totalPaidConversions: number;\n  totalStorePurchases: number;\n  totalRevenueAmount: number;\n  totalRewardAmount: number;\n  topAffiliates: Array<{\n    codeId: string;\n    codeValue: string;\n    ownerUserId: string;\n    visits: number;\n    signups: number;\n    paidConversions: number;\n    storePurchases: number;\n    revenueAmount: number;\n    rewardAmount: number;\n  }>;\n};\n\ntype ReferralJourney = {\n  id: string;\n  codeValue: string;\n  identifiedUserId?: string | null;\n  productSlug: string;\n  currentPath?: string | null;\n  geographyCountry?: string | null;\n  mode?: string | null;\n  status: string;\n  lastVisitedAt: string;\n};\n\ntype ReferralEvent = {\n  id: string;\n  type: string;\n  valueAmount?: number | null;\n  currency?: string | null;\n  occurredAt: string;\n};\n\nexport function ReferralsPage() {\n  const { canViewDashboard, isLoading: permissionsLoading } = useAdminPermissions();\n  const { apiGatewayUrl, authToken, currentUser } = useAdmin();\n  const canViewReferrals = canViewDashboard || currentUser?.role === 'PLATFORM_SUPERADMIN';\n\n  const [summary, setSummary] = useState<ReferralSummary | null>(null);\n  const [journeys, setJourneys] = useState<ReferralJourney[]>([]);\n  const [selectedJourneyId, setSelectedJourneyId] = useState<string | null>(null);\n  const [selectedJourneyEvents, setSelectedJourneyEvents] = useState<ReferralEvent[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  const requestContext = useMemo(\n    () => ({\n      apiGatewayUrl,\n      authToken,\n      actorId: currentUser?.id,\n      actorType: 'super_admin' as const,\n    }),\n    [apiGatewayUrl, authToken, currentUser?.id]\n  );\n\n  const loadData = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const [summaryData, journeyData] = await Promise.all([\n        directActivityGraphqlRequest<{ adminAffiliateAnalytics: ReferralSummary }>({\n          ...requestContext,\n          query: `query AdminAffiliateAnalytics {\n              adminAffiliateAnalytics {\n                totalCodes\n                totalVisits\n                totalJourneys\n                totalSignups\n                totalPaidConversions\n                totalStorePurchases\n                totalRevenueAmount\n                totalRewardAmount\n                topAffiliates {\n                  codeId\n                  codeValue\n                  ownerUserId\n                  visits\n                  signups\n                  paidConversions\n                  storePurchases\n                  revenueAmount\n                  rewardAmount\n                }\n              }\n            }`,\n        }),\n        directActivityGraphqlRequest<{ affiliateJourneys: { items: ReferralJourney[] } }>({\n          ...requestContext,\n          query: `query AffiliateJourneys {\n              affiliateJourneys(limit: 25, offset: 0) {\n                items {\n                  id\n                  codeValue\n                  identifiedUserId\n                  productSlug\n                  currentPath\n                  geographyCountry\n                  mode\n                  status\n                  lastVisitedAt\n                }\n              }\n            }`,\n        }),\n      ]);\n\n      setSummary(summaryData.adminAffiliateAnalytics);\n      setJourneys(journeyData.affiliateJourneys.items);\n    } catch (loadError) {\n      setError(\n        loadError instanceof Error ? loadError.message : 'Failed to load referrals dashboard'\n      );\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    void loadData();\n  }, [requestContext]);\n\n  useEffect(() => {\n    if (!selectedJourneyId) {\n      setSelectedJourneyEvents([]);\n      return;\n    }\n\n    void directActivityGraphqlRequest<\n      { affiliateJourneyEvents: ReferralEvent[] },\n      { journeyId: string }\n    >({\n      ...requestContext,\n      query: `query AffiliateJourneyEvents($journeyId: ID!) {\n          affiliateJourneyEvents(journeyId: $journeyId) {\n            id\n            type\n            valueAmount\n            currency\n            occurredAt\n          }\n        }`,\n      variables: { journeyId: selectedJourneyId },\n    })\n      .then((response) => setSelectedJourneyEvents(response.affiliateJourneyEvents))\n      .catch((loadError) => {\n        setError(loadError instanceof Error ? loadError.message : 'Failed to load journey events');\n      });\n  }, [requestContext, selectedJourneyId]);\n\n  const cards = summary\n    ? [\n        // The signups total is the headline outcome — flagged as the single hero.\n        {\n          title: 'Signups',\n          value: summary.totalSignups,\n          icon: <Users className=\"h-5 w-5\" />,\n          hero: true,\n        },\n        { title: 'Codes', value: summary.totalCodes, icon: <Link2 className=\"h-5 w-5\" />, hero: false },\n        { title: 'Visits', value: summary.totalVisits, icon: <Activity className=\"h-5 w-5\" />, hero: false },\n        {\n          title: 'Paid conversions',\n          value: summary.totalPaidConversions + summary.totalStorePurchases,\n          icon: <Users className=\"h-5 w-5\" />,\n          hero: false,\n        },\n      ]\n    : [];\n\n  return (\n    <PermissionGuard\n      allowed={canViewReferrals}\n      isLoading={permissionsLoading}\n      pageTitle=\"Referrals\"\n      denyMessage=\"You don't have permission to view referral analytics.\"\n    >\n      <PageLayout\n        title=\"Referrals\"\n        gradientWord=\"Referrals\"\n        description=\"Inspect top affiliates, journey drilldowns, conversions, and revenue attribution.\"\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 bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary\"\n          >\n            <RefreshCw className=\"h-4 w-4\" />\n            Refresh\n          </button>\n        }\n      >\n        <div className=\"space-y-6\">\n          <PagePurpose>\n            See how your referral and affiliate program is performing. This page attributes\n            visits, signups, paid conversions and revenue back to each affiliate code, and lets you\n            drill into an individual visitor&apos;s journey to understand what drove a conversion.\n          </PagePurpose>\n\n          {loading ? (\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {[1, 2, 3, 4].map((item) => (\n                <div\n                  key={item}\n                  className=\"h-28 animate-pulse rounded-lg border border-border-subtle bg-bg-surface\"\n                />\n              ))}\n            </div>\n          ) : summary ? (\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {cards.map((card) =>\n                card.hero ? (\n                  <EmphasisPanel key={card.title} className=\"p-4\">\n                    <div className=\"mb-3 flex items-center justify-between text-text-secondary\">\n                      <span className=\"text-sm font-medium\">{card.title}</span>\n                      {card.icon}\n                    </div>\n                    <p className=\"text-2xl font-semibold text-text-primary\">{card.value}</p>\n                  </EmphasisPanel>\n                ) : (\n                  <div\n                    key={card.title}\n                    className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\"\n                  >\n                    <div className=\"mb-3 flex items-center justify-between text-text-secondary\">\n                      <span className=\"text-sm font-medium\">{card.title}</span>\n                      {card.icon}\n                    </div>\n                    <p className=\"text-2xl font-semibold text-text-primary\">{card.value}</p>\n                  </div>\n                )\n              )}\n            </div>\n          ) : null}\n\n          {error ? (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-status-error-text\">\n              {error}\n            </div>\n          ) : null}\n\n          <div className=\"grid gap-6 xl:grid-cols-[1.15fr,1.85fr]\">\n            <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n              <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Top affiliates</h2>\n              {summary?.topAffiliates.length ? (\n                <div className=\"space-y-3\">\n                  {summary.topAffiliates.map((affiliate) => (\n                    <div\n                      key={affiliate.codeId}\n                      className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\"\n                    >\n                      <div className=\"flex items-center justify-between gap-3\">\n                        <div>\n                          <p className=\"text-sm font-semibold text-text-primary\">\n                            {affiliate.codeValue}\n                          </p>\n                          <p className=\"text-xs text-text-secondary\">\n                            Owner: {affiliate.ownerUserId}\n                          </p>\n                        </div>\n                        <div className=\"text-right\">\n                          <p className=\"text-sm font-semibold text-text-primary\">\n                            {affiliate.visits} visits\n                          </p>\n                          <p className=\"text-xs text-text-secondary\">\n                            {affiliate.paidConversions + affiliate.storePurchases} conversions\n                          </p>\n                        </div>\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <EmptyState\n                  illustration=\"empty-data\"\n                  icon={<Link2 className=\"h-8 w-8\" />}\n                  title=\"No affiliate performance yet\"\n                  description=\"Top-performing affiliate codes will appear here once journeys are recorded.\"\n                />\n              )}\n            </section>\n\n            <section className=\"space-y-4\">\n              <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n                <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Recent journeys</h2>\n                {journeys.length ? (\n                  <div className=\"overflow-x-auto\">\n                    <table className=\"min-w-full text-sm\">\n                      <thead>\n                        <tr className=\"border-b border-border-subtle text-left text-text-secondary\">\n                          <th className=\"px-3 py-2\">Code</th>\n                          <th className=\"px-3 py-2\">Product</th>\n                          <th className=\"px-3 py-2\">Path</th>\n                          <th className=\"px-3 py-2\">Country</th>\n                          <th className=\"px-3 py-2\">Status</th>\n                          <th className=\"px-3 py-2\">Visited</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        {journeys.map((journey) => (\n                          <tr\n                            key={journey.id}\n                            className=\"cursor-pointer border-b border-border-subtle/70 text-text-primary\"\n                            onClick={() => setSelectedJourneyId(journey.id)}\n                          >\n                            <td className=\"px-3 py-2 font-medium\">{journey.codeValue}</td>\n                            <td className=\"px-3 py-2\">{journey.productSlug}</td>\n                            <td className=\"px-3 py-2\">{journey.currentPath || '-'}</td>\n                            <td className=\"px-3 py-2\">{journey.geographyCountry || '-'}</td>\n                            <td className=\"px-3 py-2\">{journey.status}</td>\n                            <td className=\"px-3 py-2\">\n                              {formatRelativeTime(journey.lastVisitedAt)}\n                            </td>\n                          </tr>\n                        ))}\n                      </tbody>\n                    </table>\n                  </div>\n                ) : (\n                  <EmptyState\n                    illustration=\"empty-search\"\n                    icon={<Activity className=\"h-8 w-8\" />}\n                    title=\"No journeys found\"\n                    description=\"Journey-level drilldowns will appear once referral traffic flows through product touchpoints.\"\n                  />\n                )}\n              </div>\n\n              <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n                <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Journey events</h2>\n                {selectedJourneyEvents.length ? (\n                  <div className=\"space-y-3\">\n                    {selectedJourneyEvents.map((event) => (\n                      <div\n                        key={event.id}\n                        className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\"\n                      >\n                        <div className=\"flex items-center justify-between gap-3\">\n                          <div>\n                            <p className=\"text-sm font-semibold text-text-primary\">{event.type}</p>\n                            <p className=\"text-xs text-text-secondary\">\n                              {formatRelativeTime(event.occurredAt)}\n                            </p>\n                          </div>\n                          <p className=\"text-sm font-medium text-text-primary\">\n                            {event.valueAmount\n                              ? `${event.valueAmount} ${event.currency || 'USD'}`\n                              : '—'}\n                          </p>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <EmptyState\n                    illustration=\"empty-generic\"\n                    icon={<Activity className=\"h-8 w-8\" />}\n                    title=\"Select a journey\"\n                    description=\"Choose a journey from the table above to inspect its critical events.\"\n                  />\n                )}\n              </div>\n            </section>\n          </div>\n        </div>\n      </PageLayout>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ReferralsPage.js","names":[],"sources":["../../../src/admin/pages/ReferralsPage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Activity, Link2, RefreshCw, Users } from 'lucide-react';\n\nimport { PageLayout, EmptyState, PermissionGuard } from '../components';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport { useAdminPermissions } from '../hooks/useAdminPermissions';\nimport { useAdmin } from '../providers/AdminProvider';\nimport { directActivityGraphqlRequest } from '../utils/directActivityGraphql';\nimport { formatRelativeTime } from '../utils/formatters';\n\ntype ReferralSummary = {\n  totalCodes: number;\n  totalVisits: number;\n  totalJourneys: number;\n  totalSignups: number;\n  totalPaidConversions: number;\n  totalStorePurchases: number;\n  totalRevenueAmount: number;\n  totalRewardAmount: number;\n  topAffiliates: Array<{\n    codeId: string;\n    codeValue: string;\n    ownerUserId: string;\n    visits: number;\n    signups: number;\n    paidConversions: number;\n    storePurchases: number;\n    revenueAmount: number;\n    rewardAmount: number;\n  }>;\n};\n\ntype ReferralJourney = {\n  id: string;\n  codeValue: string;\n  identifiedUserId?: string | null;\n  productSlug: string;\n  currentPath?: string | null;\n  geographyCountry?: string | null;\n  mode?: string | null;\n  status: string;\n  lastVisitedAt: string;\n};\n\ntype ReferralEvent = {\n  id: string;\n  type: string;\n  valueAmount?: number | null;\n  currency?: string | null;\n  occurredAt: string;\n};\n\nexport function ReferralsPage() {\n  const { canViewDashboard, isLoading: permissionsLoading } = useAdminPermissions();\n  const { apiGatewayUrl, authToken, currentUser } = useAdmin();\n  const canViewReferrals = canViewDashboard || currentUser?.role === 'PLATFORM_SUPERADMIN';\n\n  const [summary, setSummary] = useState<ReferralSummary | null>(null);\n  const [journeys, setJourneys] = useState<ReferralJourney[]>([]);\n  const [selectedJourneyId, setSelectedJourneyId] = useState<string | null>(null);\n  const [selectedJourneyEvents, setSelectedJourneyEvents] = useState<ReferralEvent[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  const requestContext = useMemo(\n    () => ({\n      apiGatewayUrl,\n      authToken,\n      actorId: currentUser?.id,\n      actorType: 'super_admin' as const,\n    }),\n    [apiGatewayUrl, authToken, currentUser?.id]\n  );\n\n  const loadData = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const [summaryData, journeyData] = await Promise.all([\n        directActivityGraphqlRequest<{ adminAffiliateAnalytics: ReferralSummary }>({\n          ...requestContext,\n          query: `query AdminAffiliateAnalytics {\n              adminAffiliateAnalytics {\n                totalCodes\n                totalVisits\n                totalJourneys\n                totalSignups\n                totalPaidConversions\n                totalStorePurchases\n                totalRevenueAmount\n                totalRewardAmount\n                topAffiliates {\n                  codeId\n                  codeValue\n                  ownerUserId\n                  visits\n                  signups\n                  paidConversions\n                  storePurchases\n                  revenueAmount\n                  rewardAmount\n                }\n              }\n            }`,\n        }),\n        directActivityGraphqlRequest<{ affiliateJourneys: { items: ReferralJourney[] } }>({\n          ...requestContext,\n          query: `query AffiliateJourneys {\n              affiliateJourneys(limit: 25, offset: 0) {\n                items {\n                  id\n                  codeValue\n                  identifiedUserId\n                  productSlug\n                  currentPath\n                  geographyCountry\n                  mode\n                  status\n                  lastVisitedAt\n                }\n              }\n            }`,\n        }),\n      ]);\n\n      setSummary(summaryData.adminAffiliateAnalytics);\n      setJourneys(journeyData.affiliateJourneys.items);\n    } catch (loadError) {\n      setError(\n        loadError instanceof Error ? loadError.message : 'Failed to load referrals dashboard'\n      );\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    void loadData();\n  }, [requestContext]);\n\n  useEffect(() => {\n    if (!selectedJourneyId) {\n      setSelectedJourneyEvents([]);\n      return;\n    }\n\n    void directActivityGraphqlRequest<\n      { affiliateJourneyEvents: ReferralEvent[] },\n      { journeyId: string }\n    >({\n      ...requestContext,\n      query: `query AffiliateJourneyEvents($journeyId: ID!) {\n          affiliateJourneyEvents(journeyId: $journeyId) {\n            id\n            type\n            valueAmount\n            currency\n            occurredAt\n          }\n        }`,\n      variables: { journeyId: selectedJourneyId },\n    })\n      .then((response) => setSelectedJourneyEvents(response.affiliateJourneyEvents))\n      .catch((loadError) => {\n        setError(loadError instanceof Error ? loadError.message : 'Failed to load journey events');\n      });\n  }, [requestContext, selectedJourneyId]);\n\n  const cards = summary\n    ? [\n        // The signups total is the headline outcome — flagged as the single hero.\n        {\n          title: 'Signups',\n          value: summary.totalSignups,\n          icon: <Users className=\"h-5 w-5\" />,\n          hero: true,\n        },\n        {\n          title: 'Codes',\n          value: summary.totalCodes,\n          icon: <Link2 className=\"h-5 w-5\" />,\n          hero: false,\n        },\n        {\n          title: 'Visits',\n          value: summary.totalVisits,\n          icon: <Activity className=\"h-5 w-5\" />,\n          hero: false,\n        },\n        {\n          title: 'Paid conversions',\n          value: summary.totalPaidConversions + summary.totalStorePurchases,\n          icon: <Users className=\"h-5 w-5\" />,\n          hero: false,\n        },\n      ]\n    : [];\n\n  return (\n    <PermissionGuard\n      allowed={canViewReferrals}\n      isLoading={permissionsLoading}\n      pageTitle=\"Referrals\"\n      denyMessage=\"You don't have permission to view referral analytics.\"\n    >\n      <PageLayout\n        title=\"Referrals\"\n        gradientWord=\"Referrals\"\n        description=\"Inspect top affiliates, journey drilldowns, conversions, and revenue attribution.\"\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 bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary\"\n          >\n            <RefreshCw className=\"h-4 w-4\" />\n            Refresh\n          </button>\n        }\n      >\n        <div className=\"space-y-6\">\n          <PagePurpose>\n            See how your referral and affiliate program is performing. This page attributes visits,\n            signups, paid conversions and revenue back to each affiliate code, and lets you drill\n            into an individual visitor&apos;s journey to understand what drove a conversion.\n          </PagePurpose>\n\n          {loading ? (\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {[1, 2, 3, 4].map((item) => (\n                <div\n                  key={item}\n                  className=\"h-28 animate-pulse rounded-lg border border-border-subtle bg-bg-surface\"\n                />\n              ))}\n            </div>\n          ) : summary ? (\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {cards.map((card) =>\n                card.hero ? (\n                  <EmphasisPanel key={card.title} className=\"p-4\">\n                    <div className=\"mb-3 flex items-center justify-between text-text-secondary\">\n                      <span className=\"text-sm font-medium\">{card.title}</span>\n                      {card.icon}\n                    </div>\n                    <p className=\"text-2xl font-semibold text-text-primary\">{card.value}</p>\n                  </EmphasisPanel>\n                ) : (\n                  <div\n                    key={card.title}\n                    className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\"\n                  >\n                    <div className=\"mb-3 flex items-center justify-between text-text-secondary\">\n                      <span className=\"text-sm font-medium\">{card.title}</span>\n                      {card.icon}\n                    </div>\n                    <p className=\"text-2xl font-semibold text-text-primary\">{card.value}</p>\n                  </div>\n                )\n              )}\n            </div>\n          ) : null}\n\n          {error ? (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-status-error-text\">\n              {error}\n            </div>\n          ) : null}\n\n          <div className=\"grid gap-6 xl:grid-cols-[1.15fr,1.85fr]\">\n            <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n              <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Top affiliates</h2>\n              {summary?.topAffiliates.length ? (\n                <div className=\"space-y-3\">\n                  {summary.topAffiliates.map((affiliate) => (\n                    <div\n                      key={affiliate.codeId}\n                      className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\"\n                    >\n                      <div className=\"flex items-center justify-between gap-3\">\n                        <div>\n                          <p className=\"text-sm font-semibold text-text-primary\">\n                            {affiliate.codeValue}\n                          </p>\n                          <p className=\"text-xs text-text-secondary\">\n                            Owner: {affiliate.ownerUserId}\n                          </p>\n                        </div>\n                        <div className=\"text-right\">\n                          <p className=\"text-sm font-semibold text-text-primary\">\n                            {affiliate.visits} visits\n                          </p>\n                          <p className=\"text-xs text-text-secondary\">\n                            {affiliate.paidConversions + affiliate.storePurchases} conversions\n                          </p>\n                        </div>\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <EmptyState\n                  illustration=\"empty-data\"\n                  icon={<Link2 className=\"h-8 w-8\" />}\n                  title=\"No affiliate performance yet\"\n                  description=\"Top-performing affiliate codes will appear here once journeys are recorded.\"\n                />\n              )}\n            </section>\n\n            <section className=\"space-y-4\">\n              <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n                <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Recent journeys</h2>\n                {journeys.length ? (\n                  <div className=\"overflow-x-auto\">\n                    <table className=\"min-w-full text-sm\">\n                      <thead>\n                        <tr className=\"border-b border-border-subtle text-left text-text-secondary\">\n                          <th className=\"px-3 py-2\">Code</th>\n                          <th className=\"px-3 py-2\">Product</th>\n                          <th className=\"px-3 py-2\">Path</th>\n                          <th className=\"px-3 py-2\">Country</th>\n                          <th className=\"px-3 py-2\">Status</th>\n                          <th className=\"px-3 py-2\">Visited</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        {journeys.map((journey) => (\n                          <tr\n                            key={journey.id}\n                            className=\"cursor-pointer border-b border-border-subtle/70 text-text-primary\"\n                            onClick={() => setSelectedJourneyId(journey.id)}\n                          >\n                            <td className=\"px-3 py-2 font-medium\">{journey.codeValue}</td>\n                            <td className=\"px-3 py-2\">{journey.productSlug}</td>\n                            <td className=\"px-3 py-2\">{journey.currentPath || '-'}</td>\n                            <td className=\"px-3 py-2\">{journey.geographyCountry || '-'}</td>\n                            <td className=\"px-3 py-2\">{journey.status}</td>\n                            <td className=\"px-3 py-2\">\n                              {formatRelativeTime(journey.lastVisitedAt)}\n                            </td>\n                          </tr>\n                        ))}\n                      </tbody>\n                    </table>\n                  </div>\n                ) : (\n                  <EmptyState\n                    illustration=\"empty-search\"\n                    icon={<Activity className=\"h-8 w-8\" />}\n                    title=\"No journeys found\"\n                    description=\"Journey-level drilldowns will appear once referral traffic flows through product touchpoints.\"\n                  />\n                )}\n              </div>\n\n              <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n                <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Journey events</h2>\n                {selectedJourneyEvents.length ? (\n                  <div className=\"space-y-3\">\n                    {selectedJourneyEvents.map((event) => (\n                      <div\n                        key={event.id}\n                        className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\"\n                      >\n                        <div className=\"flex items-center justify-between gap-3\">\n                          <div>\n                            <p className=\"text-sm font-semibold text-text-primary\">{event.type}</p>\n                            <p className=\"text-xs text-text-secondary\">\n                              {formatRelativeTime(event.occurredAt)}\n                            </p>\n                          </div>\n                          <p className=\"text-sm font-medium text-text-primary\">\n                            {event.valueAmount\n                              ? `${event.valueAmount} ${event.currency || 'USD'}`\n                              : '—'}\n                          </p>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <EmptyState\n                    illustration=\"empty-generic\"\n                    icon={<Activity className=\"h-8 w-8\" />}\n                    title=\"Select a journey\"\n                    description=\"Choose a journey from the table above to inspect its critical events.\"\n                  />\n                )}\n              </div>\n            </section>\n          </div>\n        </div>\n      </PageLayout>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}

package/dist/admin/pages/RolesPermissionsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"RolesPermissionsPage.js","names":[],"sources":["../../../src/admin/pages/RolesPermissionsPage.tsx"],"sourcesContent":["import { Shield, Search, Plus, Pencil, Trash2 } from 'lucide-react';\nimport { useState, useMemo } from 'react';\nimport { PageLayout, Input, Button, EmptyState, DataTable, Badge, RowActions } from '../components';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport { useListRolesQuery, useGetResourceTypesQuery } from '../../generated/global-operations';\n\nexport function RolesPermissionsPage() {\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const {\n    data: rolesData,\n    loading: rolesLoading,\n    error: rolesError,\n  } = useListRolesQuery({\n    variables: { scopeId: 'global' },\n  });\n\n  const { data: resourceTypesData } = useGetResourceTypesQuery();\n\n  const roles = useMemo(() => rolesData?.roles ?? [], [rolesData]);\n\n  const filteredRoles = useMemo(() => {\n    if (!searchQuery.trim()) return roles;\n    const query = searchQuery.toLowerCase();\n    return roles.filter(\n      (role: any) =>\n        role.name.toLowerCase().includes(query) || role.description?.toLowerCase().includes(query)\n    );\n  }, [roles, searchQuery]);\n\n  const columns = [\n    {\n      key: 'name',\n      header: 'Role Name',\n      render: (role: any) => (\n        <div className=\"flex flex-col text-left\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"font-semibold text-text-primary\">{role.name}</span>\n            {role.isSystem && (\n              <Badge variant=\"secondary\" className=\"h-4 px-1 text-[10px]\">\n                System\n              </Badge>\n            )}\n          </div>\n          {role.description && (\n            <span className=\"mt-0.5 line-clamp-1 text-xs text-text-secondary\">\n              {role.description}\n            </span>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: 'priority',\n      header: 'Priority',\n      align: 'center' as const,\n      width: '80px',\n      render: (role: any) => (\n        <span className=\"rounded bg-bg-sunken px-2 py-0.5 text-xs font-medium\">{role.priority}</span>\n      ),\n    },\n    {\n      key: 'permissions',\n      header: 'Default Permissions',\n      render: (role: any) => (\n        <div className=\"flex max-w-md flex-wrap gap-1 text-left\">\n          {role.defaultPermissions && role.defaultPermissions.length > 0 ? (\n            role.defaultPermissions.map((perm: any) => (\n              <Badge\n                key={perm.id}\n                variant=\"outline\"\n                className=\"bg-bg-surface/50 px-1 py-0 font-normal text-[10px]\"\n              >\n                <span className=\"mr-1 text-text-secondary\">{perm.resourceType}:</span>\n                <span className=\"font-medium\">{perm.level}</span>\n              </Badge>\n            ))\n          ) : (\n            <span className=\"text-xs italic text-text-secondary\">No permissions defined</span>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: 'actions',\n      header: '',\n      align: 'right' as const,\n      width: '50px',\n      render: (role: any) => (\n        <RowActions\n          actions={[\n            {\n              key: 'edit',\n              label: 'Edit Role',\n              icon: <Pencil className=\"h-4 w-4\" />,\n              onClick: () => console.log('Edit', role.id),\n              disabled: role.isSystem,\n            },\n            {\n              key: 'delete',\n              label: 'Delete Role',\n              icon: <Trash2 className=\"h-4 w-4\" />,\n              onClick: () => console.log('Delete', role.id),\n              destructive: true,\n              disabled: role.isSystem,\n              separator: true,\n            },\n          ]}\n        />\n      ),\n    },\n  ];\n\n  return (\n    <PageLayout\n      title=\"Roles & Permissions\"\n      gradientWord=\"Permissions\"\n      description=\"Manage platform roles and global permissions\"\n      actions={\n        <Button size=\"sm\">\n          <Plus className=\"mr-2 h-4 w-4\" />\n          Create Role\n        </Button>\n      }\n    >\n      <div className=\"space-y-4\">\n        <PagePurpose>\n          Roles bundle together the permissions a person can hold across the platform. Use this\n          page to review what each role can do, create new roles for different kinds of operators,\n          and keep least-privilege access tidy as your team grows.\n        </PagePurpose>\n\n        {/* Emphasis: how many roles are defined platform-wide. */}\n        <EmphasisPanel className=\"flex items-center gap-4 p-5\">\n          <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/15 text-action-primary-bg\">\n            <Shield className=\"h-6 w-6\" />\n          </div>\n          <div>\n            <div className=\"text-3xl font-bold tabular-nums text-text-primary\">{roles.length}</div>\n            <p className=\"text-sm text-text-secondary\">roles defined platform-wide</p>\n          </div>\n        </EmphasisPanel>\n\n        <div className=\"flex items-center justify-between\">\n          <div className=\"relative flex-1 max-w-sm\">\n            <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n            <Input\n              placeholder=\"Search roles...\"\n              className=\"pl-9\"\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n            />\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Badge variant=\"outline\" className=\"h-8\">\n              {resourceTypesData?.resourceTypes?.length ?? 0} Resource Types\n            </Badge>\n          </div>\n        </div>\n\n        {rolesError ? (\n          <EmptyState\n            illustration=\"empty-generic\"\n            icon={<Shield className=\"h-8 w-8 text-status-error-text\" />}\n            title=\"Error loading roles\"\n            description={rolesError.message}\n          />\n        ) : (\n          <DataTable\n            columns={columns}\n            data={filteredRoles}\n            keyExtractor={(role) => role.id}\n            loading={rolesLoading}\n            emptyState={\n              <EmptyState\n                illustration=\"empty-people\"\n                icon={<Shield className=\"h-8 w-8\" />}\n                title=\"No roles found\"\n                description={\n                  searchQuery\n                    ? `No roles match \"${searchQuery}\"`\n                    : 'Roles and permissions will appear here when they are created'\n                }\n                action={\n                  searchQuery ? (\n                    <Button variant=\"outline\" size=\"sm\" onClick={() => setSearchQuery('')}>\n                      Clear Search\n                    </Button>\n                  ) : undefined\n                }\n              />\n            }\n          />\n        )}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"RolesPermissionsPage.js","names":[],"sources":["../../../src/admin/pages/RolesPermissionsPage.tsx"],"sourcesContent":["import { Shield, Search, Plus, Pencil, Trash2 } from 'lucide-react';\nimport { useState, useMemo } from 'react';\nimport { PageLayout, Input, Button, EmptyState, DataTable, Badge, RowActions } from '../components';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport { useListRolesQuery, useGetResourceTypesQuery } from '../../generated/global-operations';\n\nexport function RolesPermissionsPage() {\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const {\n    data: rolesData,\n    loading: rolesLoading,\n    error: rolesError,\n  } = useListRolesQuery({\n    variables: { scopeId: 'global' },\n  });\n\n  const { data: resourceTypesData } = useGetResourceTypesQuery();\n\n  const roles = useMemo(() => rolesData?.roles ?? [], [rolesData]);\n\n  const filteredRoles = useMemo(() => {\n    if (!searchQuery.trim()) return roles;\n    const query = searchQuery.toLowerCase();\n    return roles.filter(\n      (role: any) =>\n        role.name.toLowerCase().includes(query) || role.description?.toLowerCase().includes(query)\n    );\n  }, [roles, searchQuery]);\n\n  const columns = [\n    {\n      key: 'name',\n      header: 'Role Name',\n      render: (role: any) => (\n        <div className=\"flex flex-col text-left\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"font-semibold text-text-primary\">{role.name}</span>\n            {role.isSystem && (\n              <Badge variant=\"secondary\" className=\"h-4 px-1 text-[10px]\">\n                System\n              </Badge>\n            )}\n          </div>\n          {role.description && (\n            <span className=\"mt-0.5 line-clamp-1 text-xs text-text-secondary\">\n              {role.description}\n            </span>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: 'priority',\n      header: 'Priority',\n      align: 'center' as const,\n      width: '80px',\n      render: (role: any) => (\n        <span className=\"rounded bg-bg-sunken px-2 py-0.5 text-xs font-medium\">\n          {role.priority}\n        </span>\n      ),\n    },\n    {\n      key: 'permissions',\n      header: 'Default Permissions',\n      render: (role: any) => (\n        <div className=\"flex max-w-md flex-wrap gap-1 text-left\">\n          {role.defaultPermissions && role.defaultPermissions.length > 0 ? (\n            role.defaultPermissions.map((perm: any) => (\n              <Badge\n                key={perm.id}\n                variant=\"outline\"\n                className=\"bg-bg-surface/50 px-1 py-0 font-normal text-[10px]\"\n              >\n                <span className=\"mr-1 text-text-secondary\">{perm.resourceType}:</span>\n                <span className=\"font-medium\">{perm.level}</span>\n              </Badge>\n            ))\n          ) : (\n            <span className=\"text-xs italic text-text-secondary\">No permissions defined</span>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: 'actions',\n      header: '',\n      align: 'right' as const,\n      width: '50px',\n      render: (role: any) => (\n        <RowActions\n          actions={[\n            {\n              key: 'edit',\n              label: 'Edit Role',\n              icon: <Pencil className=\"h-4 w-4\" />,\n              onClick: () => console.log('Edit', role.id),\n              disabled: role.isSystem,\n            },\n            {\n              key: 'delete',\n              label: 'Delete Role',\n              icon: <Trash2 className=\"h-4 w-4\" />,\n              onClick: () => console.log('Delete', role.id),\n              destructive: true,\n              disabled: role.isSystem,\n              separator: true,\n            },\n          ]}\n        />\n      ),\n    },\n  ];\n\n  return (\n    <PageLayout\n      title=\"Roles & Permissions\"\n      gradientWord=\"Permissions\"\n      description=\"Manage platform roles and global permissions\"\n      actions={\n        <Button size=\"sm\">\n          <Plus className=\"mr-2 h-4 w-4\" />\n          Create Role\n        </Button>\n      }\n    >\n      <div className=\"space-y-4\">\n        <PagePurpose>\n          Roles bundle together the permissions a person can hold across the platform. Use this page\n          to review what each role can do, create new roles for different kinds of operators, and\n          keep least-privilege access tidy as your team grows.\n        </PagePurpose>\n\n        {/* Emphasis: how many roles are defined platform-wide. */}\n        <EmphasisPanel className=\"flex items-center gap-4 p-5\">\n          <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-action-primary-bg/15 text-action-primary-bg\">\n            <Shield className=\"h-6 w-6\" />\n          </div>\n          <div>\n            <div className=\"text-3xl font-bold tabular-nums text-text-primary\">{roles.length}</div>\n            <p className=\"text-sm text-text-secondary\">roles defined platform-wide</p>\n          </div>\n        </EmphasisPanel>\n\n        <div className=\"flex items-center justify-between\">\n          <div className=\"relative flex-1 max-w-sm\">\n            <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n            <Input\n              placeholder=\"Search roles...\"\n              className=\"pl-9\"\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n            />\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Badge variant=\"outline\" className=\"h-8\">\n              {resourceTypesData?.resourceTypes?.length ?? 0} Resource Types\n            </Badge>\n          </div>\n        </div>\n\n        {rolesError ? (\n          <EmptyState\n            illustration=\"empty-generic\"\n            icon={<Shield className=\"h-8 w-8 text-status-error-text\" />}\n            title=\"Error loading roles\"\n            description={rolesError.message}\n          />\n        ) : (\n          <DataTable\n            columns={columns}\n            data={filteredRoles}\n            keyExtractor={(role) => role.id}\n            loading={rolesLoading}\n            emptyState={\n              <EmptyState\n                illustration=\"empty-people\"\n                icon={<Shield className=\"h-8 w-8\" />}\n                title=\"No roles found\"\n                description={\n                  searchQuery\n                    ? `No roles match \"${searchQuery}\"`\n                    : 'Roles and permissions will appear here when they are created'\n                }\n                action={\n                  searchQuery ? (\n                    <Button variant=\"outline\" size=\"sm\" onClick={() => setSearchQuery('')}>\n                      Clear Search\n                    </Button>\n                  ) : undefined\n                }\n              />\n            }\n          />\n        )}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/admin/pages/SREPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SREPage.js","names":[],"sources":["../../../src/admin/pages/SREPage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Activity,\n  Server,\n  Database,\n  Cpu,\n  HardDrive,\n  Wifi,\n  AlertTriangle,\n  CheckCircle2,\n  RefreshCw,\n  TrendingUp,\n} from 'lucide-react';\nimport { useAdminPermissions } from '../hooks/useAdminPermissions';\nimport {\n  PageLayout,\n  MetricCard,\n  MetricsGrid,\n  Card,\n  CardHeader,\n  CardTitle,\n  CardContent,\n  Badge,\n  Button,\n  EmptyState,\n  DataTable,\n  HealthStatusBadge,\n  DeploymentStatusBadge,\n  PermissionGuard,\n} from '../components';\nimport { formatRelativeTime } from '../utils/formatters';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\n\n/**\n * Service health entity\n */\ninterface ServiceHealth {\n  id: string;\n  name: string;\n  type: 'api' | 'worker' | 'database' | 'cache' | 'queue';\n  status: 'healthy' | 'degraded' | 'down';\n  uptime: number; // percentage\n  latency: number; // ms\n  errorRate: number; // percentage\n  lastChecked: string;\n  region: string;\n}\n\n/**\n * Incident entity\n */\ninterface Incident {\n  id: string;\n  title: string;\n  severity: 'critical' | 'major' | 'minor';\n  status: 'active' | 'investigating' | 'resolved';\n  affectedServices: string[];\n  startedAt: string;\n  resolvedAt?: string;\n}\n\n/**\n * Deployment entity\n */\ninterface Deployment {\n  id: string;\n  service: string;\n  version: string;\n  status: 'success' | 'failed' | 'in_progress' | 'rolled_back';\n  deployedAt: string;\n  deployedBy: string;\n  duration: number; // seconds\n}\n\n// Mock data\nconst mockServices: ServiceHealth[] = [\n  {\n    id: 's1',\n    name: 'wspace-public-gateway',\n    type: 'api',\n    status: 'healthy',\n    uptime: 99.99,\n    latency: 45,\n    errorRate: 0.01,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's2',\n    name: 'global-auth-svc',\n    type: 'api',\n    status: 'healthy',\n    uptime: 99.95,\n    latency: 32,\n    errorRate: 0.02,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's3',\n    name: 'wspace-tags-svc',\n    type: 'api',\n    status: 'healthy',\n    uptime: 99.98,\n    latency: 28,\n    errorRate: 0.01,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's4',\n    name: 'global-billing-svc',\n    type: 'api',\n    status: 'degraded',\n    uptime: 98.5,\n    latency: 250,\n    errorRate: 2.5,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's5',\n    name: 'wspace-calendar-svc',\n    type: 'api',\n    status: 'healthy',\n    uptime: 99.97,\n    latency: 35,\n    errorRate: 0.03,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's6',\n    name: 'postgresql-primary',\n    type: 'database',\n    status: 'healthy',\n    uptime: 99.999,\n    latency: 5,\n    errorRate: 0,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's7',\n    name: 'valkey-cluster',\n    type: 'cache',\n    status: 'healthy',\n    uptime: 99.99,\n    latency: 2,\n    errorRate: 0,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's8',\n    name: 'nats-cluster',\n    type: 'queue',\n    status: 'healthy',\n    uptime: 99.98,\n    latency: 8,\n    errorRate: 0.01,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's9',\n    name: 'temporal-worker',\n    type: 'worker',\n    status: 'healthy',\n    uptime: 99.95,\n    latency: 15,\n    errorRate: 0.05,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n];\n\nconst mockIncidents: Incident[] = [\n  {\n    id: 'inc-1',\n    title: 'Elevated latency on billing service',\n    severity: 'major',\n    status: 'investigating',\n    affectedServices: ['global-billing-svc'],\n    startedAt: new Date(Date.now() - 30 * 60 * 1000).toISOString(),\n  },\n  {\n    id: 'inc-2',\n    title: 'Intermittent database connection errors',\n    severity: 'minor',\n    status: 'resolved',\n    affectedServices: ['postgresql-primary'],\n    startedAt: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(),\n    resolvedAt: new Date(Date.now() - 3 * 60 * 60 * 1000).toISOString(),\n  },\n];\n\nconst mockDeployments: Deployment[] = [\n  {\n    id: 'd1',\n    service: 'wspace-tags-svc',\n    version: '2025.01.18.1',\n    status: 'success',\n    deployedAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),\n    deployedBy: 'fluxcd',\n    duration: 120,\n  },\n  {\n    id: 'd2',\n    service: 'global-auth-svc',\n    version: '2025.01.18.0',\n    status: 'success',\n    deployedAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(),\n    deployedBy: 'fluxcd',\n    duration: 95,\n  },\n  {\n    id: 'd3',\n    service: 'wspace-calendar-svc',\n    version: '2025.01.17.2',\n    status: 'rolled_back',\n    deployedAt: new Date(Date.now() - 12 * 60 * 60 * 1000).toISOString(),\n    deployedBy: 'fluxcd',\n    duration: 180,\n  },\n  {\n    id: 'd4',\n    service: 'global-billing-svc',\n    version: '2025.01.17.1',\n    status: 'success',\n    deployedAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),\n    deployedBy: 'fluxcd',\n    duration: 110,\n  },\n];\n\nconst typeIcons: Record<string, React.ReactNode> = {\n  api: <Server className=\"h-4 w-4\" />,\n  worker: <Cpu className=\"h-4 w-4\" />,\n  database: <Database className=\"h-4 w-4\" />,\n  cache: <HardDrive className=\"h-4 w-4\" />,\n  queue: <Wifi className=\"h-4 w-4\" />,\n};\n\nconst severityColors: Record<string, string> = {\n  critical: 'bg-status-error-bg text-status-error-text',\n  major: 'bg-status-warning-bg text-status-warning-text',\n  minor: 'bg-status-neutral-bg text-status-neutral-text',\n};\n\n/**\n * SRE Monitoring page\n */\nexport function SREPage() {\n  const { canViewSRE, isLoading: permissionsLoading } = useAdminPermissions();\n\n  const [refreshing, setRefreshing] = useState(false);\n\n  // Calculate metrics\n  const healthyServices = mockServices.filter((s) => s.status === 'healthy').length;\n  const degradedServices = mockServices.filter((s) => s.status === 'degraded').length;\n  // Note: downServices available for future use when we have down services\n  const _downServices = mockServices.filter((s) => s.status === 'down').length;\n  void _downServices;\n  const avgUptime = mockServices.reduce((sum, s) => sum + s.uptime, 0) / mockServices.length;\n  const avgLatency = mockServices.reduce((sum, s) => sum + s.latency, 0) / mockServices.length;\n  const activeIncidents = mockIncidents.filter((i) => i.status !== 'resolved').length;\n\n  const handleRefresh = () => {\n    setRefreshing(true);\n    setTimeout(() => setRefreshing(false), 1000);\n  };\n\n  const serviceColumns = [\n    {\n      key: 'name',\n      header: 'Service',\n      render: (service: ServiceHealth) => (\n        <div className=\"flex items-center gap-2\">\n          {typeIcons[service.type]}\n          <span className=\"font-medium\">{service.name}</span>\n        </div>\n      ),\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      width: '100px',\n      render: (service: ServiceHealth) => <HealthStatusBadge status={service.status} />,\n    },\n    {\n      key: 'uptime',\n      header: 'Uptime',\n      width: '100px',\n      align: 'right' as const,\n      render: (service: ServiceHealth) => (\n        <span\n          className={\n            service.uptime < 99 ? 'text-status-warning-text' : 'text-status-success-text'\n          }\n        >\n          {service.uptime.toFixed(2)}%\n        </span>\n      ),\n    },\n    {\n      key: 'latency',\n      header: 'Latency',\n      width: '100px',\n      align: 'right' as const,\n      render: (service: ServiceHealth) => (\n        <span className={service.latency > 100 ? 'text-status-warning-text' : ''}>\n          {service.latency}ms\n        </span>\n      ),\n    },\n    {\n      key: 'errorRate',\n      header: 'Error Rate',\n      width: '100px',\n      align: 'right' as const,\n      render: (service: ServiceHealth) => (\n        <span className={service.errorRate > 1 ? 'text-status-error-text' : ''}>\n          {service.errorRate.toFixed(2)}%\n        </span>\n      ),\n    },\n    {\n      key: 'region',\n      header: 'Region',\n      width: '120px',\n      render: (service: ServiceHealth) => (\n        <span className=\"text-text-secondary\">{service.region}</span>\n      ),\n    },\n  ];\n\n  const deploymentColumns = [\n    {\n      key: 'service',\n      header: 'Service',\n      render: (d: Deployment) => <span className=\"font-medium\">{d.service}</span>,\n    },\n    {\n      key: 'version',\n      header: 'Version',\n      width: '140px',\n      render: (d: Deployment) => (\n        <code className=\"text-xs bg-bg-sunken px-1.5 py-0.5 rounded\">{d.version}</code>\n      ),\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      width: '120px',\n      render: (d: Deployment) => <DeploymentStatusBadge status={d.status} />,\n    },\n    {\n      key: 'duration',\n      header: 'Duration',\n      width: '100px',\n      align: 'right' as const,\n      render: (d: Deployment) => `${d.duration}s`,\n    },\n    {\n      key: 'deployedAt',\n      header: 'Deployed',\n      width: '140px',\n      render: (d: Deployment) => (\n        <span className=\"text-text-secondary\">{formatRelativeTime(d.deployedAt)}</span>\n      ),\n    },\n  ];\n\n  return (\n    <PermissionGuard\n      allowed={canViewSRE}\n      isLoading={permissionsLoading}\n      pageTitle=\"SRE Monitoring\"\n      denyMessage=\"You don't have permission to view SRE monitoring.\"\n    >\n      <PageLayout\n        title=\"SRE Monitoring\"\n        gradientWord=\"Monitoring\"\n        description=\"Service health, incidents, and deployment monitoring\"\n        actions={\n          <Button variant=\"outline\" onClick={handleRefresh} disabled={refreshing}>\n            <RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />\n            Refresh\n          </Button>\n        }\n      >\n        <div className=\"space-y-6\">\n          <PagePurpose>\n            A live view of platform reliability. Watch the health, uptime and latency of every\n            service, keep an eye on active incidents, and catch a degraded component before it\n            turns into an outage your users notice.\n          </PagePurpose>\n\n          {/* Metrics */}\n          <MetricsGrid>\n            <MetricCard\n              title=\"Healthy Services\"\n              hero\n              value={healthyServices}\n              icon={<CheckCircle2 className=\"h-5 w-5 text-status-success-text\" />}\n              subtitle={`of ${mockServices.length} total`}\n            />\n            <MetricCard\n              title=\"Degraded\"\n              value={degradedServices}\n              icon={<AlertTriangle className=\"h-5 w-5 text-status-warning-text\" />}\n              priority={degradedServices > 0 ? 'high' : 'normal'}\n            />\n            <MetricCard\n              title=\"Avg Uptime\"\n              value={`${avgUptime.toFixed(2)}%`}\n              icon={<TrendingUp className=\"h-5 w-5\" />}\n            />\n            <MetricCard\n              title=\"Avg Latency\"\n              value={`${avgLatency.toFixed(0)}ms`}\n              icon={<Activity className=\"h-5 w-5\" />}\n            />\n          </MetricsGrid>\n\n          {/* Active Incidents */}\n          {activeIncidents > 0 && (\n            <Card className=\"border-status-warning-border bg-status-warning-bg\">\n              <CardHeader>\n                <CardTitle className=\"text-lg flex items-center gap-2 text-status-warning-text\">\n                  <AlertTriangle className=\"h-5 w-5\" />\n                  Active Incidents ({activeIncidents})\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div className=\"space-y-3\">\n                  {mockIncidents\n                    .filter((i) => i.status !== 'resolved')\n                    .map((incident) => (\n                      <div\n                        key={incident.id}\n                        className=\"flex items-start justify-between rounded-lg border border-border-subtle bg-bg-surface p-4\"\n                      >\n                        <div className=\"space-y-1\">\n                          <div className=\"flex items-center gap-2\">\n                            <Badge className={severityColors[incident.severity]}>\n                              {incident.severity.toUpperCase()}\n                            </Badge>\n                            <span className=\"font-medium\">{incident.title}</span>\n                          </div>\n                          <div className=\"flex items-center gap-4 text-sm text-text-secondary\">\n                            <span>Started {formatRelativeTime(incident.startedAt)}</span>\n                            <span>•</span>\n                            <span>Status: {incident.status}</span>\n                          </div>\n                          <div className=\"flex flex-wrap gap-1 mt-2\">\n                            {incident.affectedServices.map((svc) => (\n                              <Badge key={svc} variant=\"outline\" className=\"text-xs\">\n                                {svc}\n                              </Badge>\n                            ))}\n                          </div>\n                        </div>\n                        <Button size=\"sm\" variant=\"outline\">\n                          View\n                        </Button>\n                      </div>\n                    ))}\n                </div>\n              </CardContent>\n            </Card>\n          )}\n\n          {/* Service Health */}\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-lg flex items-center gap-2\">\n                <Server className=\"h-5 w-5\" />\n                Service Health\n              </CardTitle>\n            </CardHeader>\n            <CardContent>\n              <DataTable\n                columns={serviceColumns}\n                data={mockServices}\n                keyExtractor={(s) => s.id}\n                emptyState={\n                  <EmptyState\n                    illustration=\"empty-data\"\n                    icon={<Server className=\"h-8 w-8\" />}\n                    title=\"No services found\"\n                  />\n                }\n              />\n            </CardContent>\n          </Card>\n\n          {/* Recent Deployments */}\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-lg flex items-center gap-2\">\n                <RefreshCw className=\"h-5 w-5\" />\n                Recent Deployments\n              </CardTitle>\n            </CardHeader>\n            <CardContent>\n              <DataTable\n                columns={deploymentColumns}\n                data={mockDeployments}\n                keyExtractor={(d) => d.id}\n                emptyState={\n                  <EmptyState\n                    illustration=\"empty-data\"\n                    icon={<RefreshCw className=\"h-8 w-8\" />}\n                    title=\"No recent deployments\"\n                  />\n                }\n              />\n            </CardContent>\n          </Card>\n        </div>\n      </PageLayout>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SREPage.js","names":[],"sources":["../../../src/admin/pages/SREPage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Activity,\n  Server,\n  Database,\n  Cpu,\n  HardDrive,\n  Wifi,\n  AlertTriangle,\n  CheckCircle2,\n  RefreshCw,\n  TrendingUp,\n} from 'lucide-react';\nimport { useAdminPermissions } from '../hooks/useAdminPermissions';\nimport {\n  PageLayout,\n  MetricCard,\n  MetricsGrid,\n  Card,\n  CardHeader,\n  CardTitle,\n  CardContent,\n  Badge,\n  Button,\n  EmptyState,\n  DataTable,\n  HealthStatusBadge,\n  DeploymentStatusBadge,\n  PermissionGuard,\n} from '../components';\nimport { formatRelativeTime } from '../utils/formatters';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\n\n/**\n * Service health entity\n */\ninterface ServiceHealth {\n  id: string;\n  name: string;\n  type: 'api' | 'worker' | 'database' | 'cache' | 'queue';\n  status: 'healthy' | 'degraded' | 'down';\n  uptime: number; // percentage\n  latency: number; // ms\n  errorRate: number; // percentage\n  lastChecked: string;\n  region: string;\n}\n\n/**\n * Incident entity\n */\ninterface Incident {\n  id: string;\n  title: string;\n  severity: 'critical' | 'major' | 'minor';\n  status: 'active' | 'investigating' | 'resolved';\n  affectedServices: string[];\n  startedAt: string;\n  resolvedAt?: string;\n}\n\n/**\n * Deployment entity\n */\ninterface Deployment {\n  id: string;\n  service: string;\n  version: string;\n  status: 'success' | 'failed' | 'in_progress' | 'rolled_back';\n  deployedAt: string;\n  deployedBy: string;\n  duration: number; // seconds\n}\n\n// Mock data\nconst mockServices: ServiceHealth[] = [\n  {\n    id: 's1',\n    name: 'wspace-public-gateway',\n    type: 'api',\n    status: 'healthy',\n    uptime: 99.99,\n    latency: 45,\n    errorRate: 0.01,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's2',\n    name: 'global-auth-svc',\n    type: 'api',\n    status: 'healthy',\n    uptime: 99.95,\n    latency: 32,\n    errorRate: 0.02,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's3',\n    name: 'wspace-tags-svc',\n    type: 'api',\n    status: 'healthy',\n    uptime: 99.98,\n    latency: 28,\n    errorRate: 0.01,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's4',\n    name: 'global-billing-svc',\n    type: 'api',\n    status: 'degraded',\n    uptime: 98.5,\n    latency: 250,\n    errorRate: 2.5,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's5',\n    name: 'wspace-calendar-svc',\n    type: 'api',\n    status: 'healthy',\n    uptime: 99.97,\n    latency: 35,\n    errorRate: 0.03,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's6',\n    name: 'postgresql-primary',\n    type: 'database',\n    status: 'healthy',\n    uptime: 99.999,\n    latency: 5,\n    errorRate: 0,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's7',\n    name: 'valkey-cluster',\n    type: 'cache',\n    status: 'healthy',\n    uptime: 99.99,\n    latency: 2,\n    errorRate: 0,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's8',\n    name: 'nats-cluster',\n    type: 'queue',\n    status: 'healthy',\n    uptime: 99.98,\n    latency: 8,\n    errorRate: 0.01,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n  {\n    id: 's9',\n    name: 'temporal-worker',\n    type: 'worker',\n    status: 'healthy',\n    uptime: 99.95,\n    latency: 15,\n    errorRate: 0.05,\n    lastChecked: new Date().toISOString(),\n    region: 'ap-south-1',\n  },\n];\n\nconst mockIncidents: Incident[] = [\n  {\n    id: 'inc-1',\n    title: 'Elevated latency on billing service',\n    severity: 'major',\n    status: 'investigating',\n    affectedServices: ['global-billing-svc'],\n    startedAt: new Date(Date.now() - 30 * 60 * 1000).toISOString(),\n  },\n  {\n    id: 'inc-2',\n    title: 'Intermittent database connection errors',\n    severity: 'minor',\n    status: 'resolved',\n    affectedServices: ['postgresql-primary'],\n    startedAt: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(),\n    resolvedAt: new Date(Date.now() - 3 * 60 * 60 * 1000).toISOString(),\n  },\n];\n\nconst mockDeployments: Deployment[] = [\n  {\n    id: 'd1',\n    service: 'wspace-tags-svc',\n    version: '2025.01.18.1',\n    status: 'success',\n    deployedAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),\n    deployedBy: 'fluxcd',\n    duration: 120,\n  },\n  {\n    id: 'd2',\n    service: 'global-auth-svc',\n    version: '2025.01.18.0',\n    status: 'success',\n    deployedAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(),\n    deployedBy: 'fluxcd',\n    duration: 95,\n  },\n  {\n    id: 'd3',\n    service: 'wspace-calendar-svc',\n    version: '2025.01.17.2',\n    status: 'rolled_back',\n    deployedAt: new Date(Date.now() - 12 * 60 * 60 * 1000).toISOString(),\n    deployedBy: 'fluxcd',\n    duration: 180,\n  },\n  {\n    id: 'd4',\n    service: 'global-billing-svc',\n    version: '2025.01.17.1',\n    status: 'success',\n    deployedAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),\n    deployedBy: 'fluxcd',\n    duration: 110,\n  },\n];\n\nconst typeIcons: Record<string, React.ReactNode> = {\n  api: <Server className=\"h-4 w-4\" />,\n  worker: <Cpu className=\"h-4 w-4\" />,\n  database: <Database className=\"h-4 w-4\" />,\n  cache: <HardDrive className=\"h-4 w-4\" />,\n  queue: <Wifi className=\"h-4 w-4\" />,\n};\n\nconst severityColors: Record<string, string> = {\n  critical: 'bg-status-error-bg text-status-error-text',\n  major: 'bg-status-warning-bg text-status-warning-text',\n  minor: 'bg-status-neutral-bg text-status-neutral-text',\n};\n\n/**\n * SRE Monitoring page\n */\nexport function SREPage() {\n  const { canViewSRE, isLoading: permissionsLoading } = useAdminPermissions();\n\n  const [refreshing, setRefreshing] = useState(false);\n\n  // Calculate metrics\n  const healthyServices = mockServices.filter((s) => s.status === 'healthy').length;\n  const degradedServices = mockServices.filter((s) => s.status === 'degraded').length;\n  // Note: downServices available for future use when we have down services\n  const _downServices = mockServices.filter((s) => s.status === 'down').length;\n  void _downServices;\n  const avgUptime = mockServices.reduce((sum, s) => sum + s.uptime, 0) / mockServices.length;\n  const avgLatency = mockServices.reduce((sum, s) => sum + s.latency, 0) / mockServices.length;\n  const activeIncidents = mockIncidents.filter((i) => i.status !== 'resolved').length;\n\n  const handleRefresh = () => {\n    setRefreshing(true);\n    setTimeout(() => setRefreshing(false), 1000);\n  };\n\n  const serviceColumns = [\n    {\n      key: 'name',\n      header: 'Service',\n      render: (service: ServiceHealth) => (\n        <div className=\"flex items-center gap-2\">\n          {typeIcons[service.type]}\n          <span className=\"font-medium\">{service.name}</span>\n        </div>\n      ),\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      width: '100px',\n      render: (service: ServiceHealth) => <HealthStatusBadge status={service.status} />,\n    },\n    {\n      key: 'uptime',\n      header: 'Uptime',\n      width: '100px',\n      align: 'right' as const,\n      render: (service: ServiceHealth) => (\n        <span\n          className={service.uptime < 99 ? 'text-status-warning-text' : 'text-status-success-text'}\n        >\n          {service.uptime.toFixed(2)}%\n        </span>\n      ),\n    },\n    {\n      key: 'latency',\n      header: 'Latency',\n      width: '100px',\n      align: 'right' as const,\n      render: (service: ServiceHealth) => (\n        <span className={service.latency > 100 ? 'text-status-warning-text' : ''}>\n          {service.latency}ms\n        </span>\n      ),\n    },\n    {\n      key: 'errorRate',\n      header: 'Error Rate',\n      width: '100px',\n      align: 'right' as const,\n      render: (service: ServiceHealth) => (\n        <span className={service.errorRate > 1 ? 'text-status-error-text' : ''}>\n          {service.errorRate.toFixed(2)}%\n        </span>\n      ),\n    },\n    {\n      key: 'region',\n      header: 'Region',\n      width: '120px',\n      render: (service: ServiceHealth) => (\n        <span className=\"text-text-secondary\">{service.region}</span>\n      ),\n    },\n  ];\n\n  const deploymentColumns = [\n    {\n      key: 'service',\n      header: 'Service',\n      render: (d: Deployment) => <span className=\"font-medium\">{d.service}</span>,\n    },\n    {\n      key: 'version',\n      header: 'Version',\n      width: '140px',\n      render: (d: Deployment) => (\n        <code className=\"text-xs bg-bg-sunken px-1.5 py-0.5 rounded\">{d.version}</code>\n      ),\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      width: '120px',\n      render: (d: Deployment) => <DeploymentStatusBadge status={d.status} />,\n    },\n    {\n      key: 'duration',\n      header: 'Duration',\n      width: '100px',\n      align: 'right' as const,\n      render: (d: Deployment) => `${d.duration}s`,\n    },\n    {\n      key: 'deployedAt',\n      header: 'Deployed',\n      width: '140px',\n      render: (d: Deployment) => (\n        <span className=\"text-text-secondary\">{formatRelativeTime(d.deployedAt)}</span>\n      ),\n    },\n  ];\n\n  return (\n    <PermissionGuard\n      allowed={canViewSRE}\n      isLoading={permissionsLoading}\n      pageTitle=\"SRE Monitoring\"\n      denyMessage=\"You don't have permission to view SRE monitoring.\"\n    >\n      <PageLayout\n        title=\"SRE Monitoring\"\n        gradientWord=\"Monitoring\"\n        description=\"Service health, incidents, and deployment monitoring\"\n        actions={\n          <Button variant=\"outline\" onClick={handleRefresh} disabled={refreshing}>\n            <RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />\n            Refresh\n          </Button>\n        }\n      >\n        <div className=\"space-y-6\">\n          <PagePurpose>\n            A live view of platform reliability. Watch the health, uptime and latency of every\n            service, keep an eye on active incidents, and catch a degraded component before it turns\n            into an outage your users notice.\n          </PagePurpose>\n\n          {/* Metrics */}\n          <MetricsGrid>\n            <MetricCard\n              title=\"Healthy Services\"\n              hero\n              value={healthyServices}\n              icon={<CheckCircle2 className=\"h-5 w-5 text-status-success-text\" />}\n              subtitle={`of ${mockServices.length} total`}\n            />\n            <MetricCard\n              title=\"Degraded\"\n              value={degradedServices}\n              icon={<AlertTriangle className=\"h-5 w-5 text-status-warning-text\" />}\n              priority={degradedServices > 0 ? 'high' : 'normal'}\n            />\n            <MetricCard\n              title=\"Avg Uptime\"\n              value={`${avgUptime.toFixed(2)}%`}\n              icon={<TrendingUp className=\"h-5 w-5\" />}\n            />\n            <MetricCard\n              title=\"Avg Latency\"\n              value={`${avgLatency.toFixed(0)}ms`}\n              icon={<Activity className=\"h-5 w-5\" />}\n            />\n          </MetricsGrid>\n\n          {/* Active Incidents */}\n          {activeIncidents > 0 && (\n            <Card className=\"border-status-warning-border bg-status-warning-bg\">\n              <CardHeader>\n                <CardTitle className=\"text-lg flex items-center gap-2 text-status-warning-text\">\n                  <AlertTriangle className=\"h-5 w-5\" />\n                  Active Incidents ({activeIncidents})\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div className=\"space-y-3\">\n                  {mockIncidents\n                    .filter((i) => i.status !== 'resolved')\n                    .map((incident) => (\n                      <div\n                        key={incident.id}\n                        className=\"flex items-start justify-between rounded-lg border border-border-subtle bg-bg-surface p-4\"\n                      >\n                        <div className=\"space-y-1\">\n                          <div className=\"flex items-center gap-2\">\n                            <Badge className={severityColors[incident.severity]}>\n                              {incident.severity.toUpperCase()}\n                            </Badge>\n                            <span className=\"font-medium\">{incident.title}</span>\n                          </div>\n                          <div className=\"flex items-center gap-4 text-sm text-text-secondary\">\n                            <span>Started {formatRelativeTime(incident.startedAt)}</span>\n                            <span>•</span>\n                            <span>Status: {incident.status}</span>\n                          </div>\n                          <div className=\"flex flex-wrap gap-1 mt-2\">\n                            {incident.affectedServices.map((svc) => (\n                              <Badge key={svc} variant=\"outline\" className=\"text-xs\">\n                                {svc}\n                              </Badge>\n                            ))}\n                          </div>\n                        </div>\n                        <Button size=\"sm\" variant=\"outline\">\n                          View\n                        </Button>\n                      </div>\n                    ))}\n                </div>\n              </CardContent>\n            </Card>\n          )}\n\n          {/* Service Health */}\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-lg flex items-center gap-2\">\n                <Server className=\"h-5 w-5\" />\n                Service Health\n              </CardTitle>\n            </CardHeader>\n            <CardContent>\n              <DataTable\n                columns={serviceColumns}\n                data={mockServices}\n                keyExtractor={(s) => s.id}\n                emptyState={\n                  <EmptyState\n                    illustration=\"empty-data\"\n                    icon={<Server className=\"h-8 w-8\" />}\n                    title=\"No services found\"\n                  />\n                }\n              />\n            </CardContent>\n          </Card>\n\n          {/* Recent Deployments */}\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-lg flex items-center gap-2\">\n                <RefreshCw className=\"h-5 w-5\" />\n                Recent Deployments\n              </CardTitle>\n            </CardHeader>\n            <CardContent>\n              <DataTable\n                columns={deploymentColumns}\n                data={mockDeployments}\n                keyExtractor={(d) => d.id}\n                emptyState={\n                  <EmptyState\n                    illustration=\"empty-data\"\n                    icon={<RefreshCw className=\"h-8 w-8\" />}\n                    title=\"No recent deployments\"\n                  />\n                }\n              />\n            </CardContent>\n          </Card>\n        </div>\n      </PageLayout>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}