@burdenoff/microfe-admin 2026.608.1 → 2026.624.1

package/dist/admin/pages/ContentPagesPage.js

@@ -0,0 +1,661 @@
+import { useToast as e } from "../components/Toast.js";
+import { useAdminPermissions as t } from "../hooks/useAdminPermissions.js";
+import { Badge as n, Button as r, EmptyState as i, Input as a } from "../components/ui.js";
+import { PageLayout as ee } from "../components/PageLayout.js";
+import { formatDate as te } from "../utils/formatters.js";
+import { DataTable as ne, Pagination as re } from "../components/DataTable.js";
+import { FormRow as o, FormSection as s, FormSheet as ie, FormSheetFooter as ae } from "../components/FormSheet.js";
+import { DeleteConfirmDialog as oe } from "../components/ConfirmDialog.js";
+import { RowActions as se, createRowActions as ce } from "../components/RowActions.js";
+import { PermissionGuard as le } from "../components/PermissionGuard.js";
+import "../components/index.js";
+import { useCallback as c, useEffect as l, useRef as ue, useState as u } from "react";
+import { FileText as de, Plus as fe, Search as pe } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { gql as p } from "@apollo/client";
+import { useApolloClient as me } from "@apollo/client/react";
+//#region src/admin/pages/ContentPagesPage.tsx
+var m = 20, h = [
+	{
+		value: "blog",
+		label: "Blog",
+		category: "Blog"
+	},
+	{
+		value: "case-study",
+		label: "Case Study",
+		category: "Case Study"
+	},
+	{
+		value: "changelog",
+		label: "Changelog",
+		category: "Changelog"
+	}
+], he = {
+	blog: "default",
+	"case-study": "secondary",
+	changelog: "outline"
+}, g = p`
+  query AdminContentListProducts($limit: Int, $offset: Int) {
+    platformProducts(limit: $limit, offset: $offset) {
+      items {
+        id
+        name
+        slug
+      }
+    }
+  }
+`, ge = p`
+  query AdminContentPages(
+    $productId: String
+    $filter: ContentPageFilterInput
+    $limit: Int
+    $offset: Int
+  ) {
+    contentPages(productId: $productId, filter: $filter, limit: $limit, offset: $offset) {
+      items {
+        id
+        productId
+        slug
+        title
+        content
+        contentFormat
+        tags
+        category
+        excerpt
+        thumbnail
+        author
+        publishedAt
+        readingTime
+        featured
+        isPublished
+        visibility
+        updatedAt
+      }
+      total
+    }
+  }
+`, _e = p`
+  mutation AdminCreateContentPage($input: CreateContentPageInput!) {
+    createContentPage(input: $input) {
+      id
+      slug
+    }
+  }
+`, ve = p`
+  mutation AdminUpdateContentPage($id: ID!, $input: UpdateContentPageInput!) {
+    updateContentPage(id: $id, input: $input) {
+      id
+      slug
+    }
+  }
+`, ye = p`
+  mutation AdminDeleteContentPage($id: ID!) {
+    deleteContentPage(id: $id)
+  }
+`, _ = {
+	productId: "",
+	type: "blog",
+	slug: "",
+	title: "",
+	excerpt: "",
+	content: "",
+	author: "",
+	publishedAt: "",
+	thumbnail: "",
+	readingTime: "",
+	featured: !1,
+	isPublished: !0
+};
+function v(e) {
+	return e.includes("changelog") ? "changelog" : e.includes("case-study") ? "case-study" : "blog";
+}
+var y = "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";
+function b() {
+	let { canViewProducts: p, canManageProducts: b, isLoading: x } = t(), S = me(), C = e(), [w, be] = u([]), [T, E] = u(""), [D, xe] = u(""), [O, Se] = u(""), [k, A] = u(""), [j, M] = u(1), N = ue(0);
+	l(() => {
+		let e = setTimeout(() => {
+			A(O), M(1);
+		}, 300);
+		return () => clearTimeout(e);
+	}, [O]);
+	let [P, Ce] = u([]), [F, we] = u(0), [Te, I] = u(!1), [L, R] = u(null), [Ee, z] = u(!1), [B, V] = u(null), [H, U] = u(_), [De, W] = u(!1), [G, K] = u(null), [q, J] = u(!1), Y = x || !p;
+	l(() => {
+		if (Y) return;
+		let e = !0;
+		return S.query({
+			query: g,
+			variables: {
+				limit: 100,
+				offset: 0
+			},
+			fetchPolicy: "network-only"
+		}).then((t) => {
+			if (!e) return;
+			let n = t.data?.platformProducts?.items ?? [];
+			be(n), E((e) => e || n[0]?.id || "");
+		}).catch((t) => {
+			e && R(t instanceof Error ? t.message : "Failed to load products");
+		}), () => {
+			e = !1;
+		};
+	}, [S, Y]);
+	let X = c(async () => {
+		if (Y || !T) return;
+		let e = ++N.current;
+		I(!0);
+		try {
+			let t = await S.query({
+				query: ge,
+				variables: {
+					productId: T,
+					filter: {
+						...k ? { search: k } : {},
+						...D ? { tag: D } : {}
+					},
+					limit: m,
+					offset: (j - 1) * m
+				},
+				fetchPolicy: "network-only"
+			});
+			if (e !== N.current) return;
+			Ce(t.data?.contentPages?.items ?? []), we(t.data?.contentPages?.total ?? 0), R(null);
+		} catch (t) {
+			if (e !== N.current) return;
+			R(t instanceof Error ? t.message : "Failed to load content pages");
+		} finally {
+			e === N.current && I(!1);
+		}
+	}, [
+		S,
+		Y,
+		T,
+		k,
+		D,
+		j
+	]);
+	l(() => {
+		X();
+	}, [X]);
+	let Z = Math.ceil(F / m), Oe = c(() => {
+		V(null), U({
+			..._,
+			productId: T,
+			type: D || "blog"
+		}), z(!0);
+	}, [T, D]), ke = c((e) => {
+		V(e), U({
+			productId: e.productId ?? "",
+			type: v(e.tags),
+			slug: e.slug,
+			title: e.title,
+			excerpt: e.excerpt ?? "",
+			content: e.content,
+			author: e.author ?? "",
+			publishedAt: e.publishedAt ? e.publishedAt.slice(0, 10) : "",
+			thumbnail: e.thumbnail ?? "",
+			readingTime: e.readingTime == null ? "" : String(e.readingTime),
+			featured: e.featured,
+			isPublished: e.isPublished
+		}), z(!0);
+	}, []), Ae = c(async () => {
+		let e = [
+			!H.title.trim() && "Title",
+			!H.slug.trim() && "Slug",
+			!H.content.trim() && "Content"
+		].filter(Boolean);
+		if (e.length) {
+			C.error(`${e.join(", ")} ${e.length > 1 ? "are" : "is"} required`);
+			return;
+		}
+		let t = H.thumbnail.trim();
+		if (t && !/^(https?:\/\/|\/\/|\/)/i.test(t)) {
+			C.error("Thumbnail must be an http(s) URL or an absolute path");
+			return;
+		}
+		W(!0);
+		let n = h.find((e) => e.value === H.type), r = B ? null : void 0, i = {
+			title: H.title.trim(),
+			content: H.content,
+			contentFormat: "markdown",
+			excerpt: H.excerpt.trim() || r,
+			author: H.author.trim() || r,
+			publishedAt: H.publishedAt ? new Date(H.publishedAt).toISOString() : r,
+			thumbnail: H.thumbnail.trim() || r,
+			readingTime: H.readingTime === "" ? r : Number(H.readingTime),
+			featured: H.featured,
+			isPublished: H.isPublished
+		};
+		try {
+			B ? (await S.mutate({
+				mutation: ve,
+				variables: {
+					id: B.id,
+					input: i
+				}
+			}), C.success("Content page updated")) : (await S.mutate({
+				mutation: _e,
+				variables: { input: {
+					...i,
+					visibility: "PUBLIC",
+					tags: [H.type],
+					category: n.category,
+					productId: H.productId || void 0,
+					slug: H.slug.trim().replace(/-+/g, "-").replace(/^-+|-+$/g, "")
+				} }
+			}), C.success("Content page created")), z(!1), await X();
+		} catch (e) {
+			C.error(e instanceof Error ? e.message : "Failed to save content page");
+		} finally {
+			W(!1);
+		}
+	}, [
+		H,
+		B,
+		S,
+		C,
+		X
+	]), je = c(async () => {
+		if (!(!G || q)) {
+			J(!0);
+			try {
+				await S.mutate({
+					mutation: ye,
+					variables: { id: G.id }
+				}), C.success("Content page deleted"), K(null), P.length === 1 && j > 1 ? M((e) => e - 1) : await X();
+			} catch (e) {
+				C.error(e instanceof Error ? e.message : "Failed to delete content page");
+			} finally {
+				J(!1);
+			}
+		}
+	}, [
+		G,
+		q,
+		S,
+		C,
+		X,
+		P.length,
+		j
+	]), Me = [
+		{
+			key: "title",
+			header: "Title",
+			render: (e) => /* @__PURE__ */ f("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ d("div", {
+					className: "font-medium text-foreground",
+					children: e.title
+				}), /* @__PURE__ */ d("div", {
+					className: "truncate text-xs text-muted-foreground",
+					children: e.slug
+				})]
+			})
+		},
+		{
+			key: "type",
+			header: "Type",
+			width: "120px",
+			render: (e) => {
+				let t = h.find((t) => e.tags.includes(t.value));
+				return /* @__PURE__ */ d(n, {
+					variant: t ? he[t.value] : "outline",
+					className: "text-xs capitalize",
+					children: t?.label ?? "Other"
+				});
+			}
+		},
+		{
+			key: "status",
+			header: "Status",
+			width: "110px",
+			render: (e) => /* @__PURE__ */ f("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ d(n, {
+					variant: e.isPublished ? "default" : "outline",
+					className: "text-xs",
+					children: e.isPublished ? "Published" : "Draft"
+				}), e.featured && /* @__PURE__ */ d(n, {
+					variant: "secondary",
+					className: "text-xs",
+					children: "Featured"
+				})]
+			})
+		},
+		{
+			key: "updatedAt",
+			header: "Updated",
+			width: "110px",
+			render: (e) => te(e.updatedAt)
+		},
+		{
+			key: "actions",
+			header: "",
+			width: "60px",
+			align: "right",
+			render: (e) => /* @__PURE__ */ d(se, { actions: ce({
+				onEdit: b ? () => ke(e) : void 0,
+				onDelete: b ? () => K(e) : void 0
+			}) })
+		}
+	], Q = "content-page-form", $ = !!B && !h.some((e) => B.tags.includes(e.value));
+	return /* @__PURE__ */ f(le, {
+		allowed: p,
+		isLoading: x,
+		pageTitle: "Content",
+		denyMessage: "You don't have permission to manage content pages.",
+		children: [
+			/* @__PURE__ */ d(ee, {
+				title: "Content",
+				description: `Blog posts, case studies, and changelog entries${F ? ` · ${F} total` : ""}`,
+				actions: /* @__PURE__ */ f(r, {
+					onClick: Oe,
+					disabled: !b || !T,
+					children: [/* @__PURE__ */ d(fe, { className: "mr-2 h-4 w-4" }), "New Content"]
+				}),
+				children: /* @__PURE__ */ f("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ f("div", {
+							className: "flex flex-wrap items-center gap-3",
+							children: [
+								/* @__PURE__ */ f("select", {
+									"aria-label": "Filter by product",
+									className: `${y} max-w-xs`,
+									value: T,
+									onChange: (e) => {
+										M(1), E(e.target.value);
+									},
+									children: [w.length === 0 && /* @__PURE__ */ d("option", {
+										value: "",
+										children: "Loading products…"
+									}), w.map((e) => /* @__PURE__ */ d("option", {
+										value: e.id,
+										children: e.name
+									}, e.id))]
+								}),
+								/* @__PURE__ */ f("select", {
+									"aria-label": "Filter by content type",
+									className: `${y} max-w-[180px]`,
+									value: D,
+									onChange: (e) => {
+										M(1), xe(e.target.value);
+									},
+									children: [/* @__PURE__ */ d("option", {
+										value: "",
+										children: "All types"
+									}), h.map((e) => /* @__PURE__ */ d("option", {
+										value: e.value,
+										children: e.label
+									}, e.value))]
+								}),
+								/* @__PURE__ */ f("div", {
+									className: "relative max-w-sm flex-1",
+									children: [/* @__PURE__ */ d(pe, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ d(a, {
+										placeholder: "Search content...",
+										value: O,
+										onChange: (e) => Se(e.target.value),
+										className: "pl-9"
+									})]
+								})
+							]
+						}),
+						L && /* @__PURE__ */ d("div", {
+							className: "rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive",
+							children: L
+						}),
+						/* @__PURE__ */ d(ne, {
+							columns: Me,
+							data: P,
+							keyExtractor: (e) => e.id,
+							loading: Te,
+							emptyState: /* @__PURE__ */ d(i, {
+								icon: /* @__PURE__ */ d(de, { className: "h-8 w-8" }),
+								title: "No content yet",
+								description: "Create a blog post, case study, or changelog entry to get started."
+							})
+						}),
+						F > m && /* @__PURE__ */ d(re, {
+							page: j,
+							totalPages: Z,
+							totalItems: F,
+							pageSize: m,
+							onPageChange: M
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ d(ie, {
+				open: Ee,
+				onClose: () => z(!1),
+				title: B ? "Edit content" : "New content",
+				footer: /* @__PURE__ */ d(ae, {
+					formId: Q,
+					isSubmitting: De,
+					submitLabel: B ? "Save changes" : "Create",
+					onCancel: () => z(!1)
+				}),
+				children: /* @__PURE__ */ f("form", {
+					id: Q,
+					onSubmit: (e) => {
+						e.preventDefault(), Ae();
+					},
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ f(s, {
+							title: "Basics",
+							children: [
+								/* @__PURE__ */ f(o, {
+									cols: 2,
+									children: [/* @__PURE__ */ f("label", {
+										className: "space-y-1.5",
+										children: [/* @__PURE__ */ d("span", {
+											className: "text-sm font-medium",
+											children: "Type"
+										}), /* @__PURE__ */ f("select", {
+											className: y,
+											value: $ ? "__other" : H.type,
+											disabled: !!B,
+											onChange: (e) => U((t) => ({
+												...t,
+												type: e.target.value
+											})),
+											children: [$ && /* @__PURE__ */ d("option", {
+												value: "__other",
+												children: "Other"
+											}), h.map((e) => /* @__PURE__ */ d("option", {
+												value: e.value,
+												children: e.label
+											}, e.value))]
+										})]
+									}), /* @__PURE__ */ f("label", {
+										className: "space-y-1.5",
+										children: [/* @__PURE__ */ d("span", {
+											className: "text-sm font-medium",
+											children: "Product"
+										}), /* @__PURE__ */ d("select", {
+											className: y,
+											value: H.productId,
+											disabled: !!B,
+											onChange: (e) => U((t) => ({
+												...t,
+												productId: e.target.value
+											})),
+											children: w.map((e) => /* @__PURE__ */ d("option", {
+												value: e.id,
+												children: e.name
+											}, e.id))
+										})]
+									})]
+								}),
+								/* @__PURE__ */ f(o, {
+									cols: 2,
+									children: [/* @__PURE__ */ f("label", {
+										className: "space-y-1.5",
+										children: [/* @__PURE__ */ d("span", {
+											className: "text-sm font-medium",
+											children: "Title"
+										}), /* @__PURE__ */ d(a, {
+											value: H.title,
+											onChange: (e) => U((t) => ({
+												...t,
+												title: e.target.value
+											})),
+											placeholder: "A clear, descriptive title"
+										})]
+									}), /* @__PURE__ */ f("label", {
+										className: "space-y-1.5",
+										children: [/* @__PURE__ */ d("span", {
+											className: "text-sm font-medium",
+											children: "Slug"
+										}), /* @__PURE__ */ d(a, {
+											value: H.slug,
+											disabled: !!B,
+											onChange: (e) => U((t) => ({
+												...t,
+												slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]+/g, "-")
+											})),
+											placeholder: "url-friendly-slug"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ f("label", {
+									className: "block space-y-1.5",
+									children: [/* @__PURE__ */ d("span", {
+										className: "text-sm font-medium",
+										children: "Excerpt"
+									}), /* @__PURE__ */ d("textarea", {
+										className: `${y} h-16 py-2`,
+										value: H.excerpt,
+										onChange: (e) => U((t) => ({
+											...t,
+											excerpt: e.target.value
+										})),
+										placeholder: "Short summary shown in cards and previews"
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ d(s, {
+							title: "Content",
+							description: "Markdown supported (headings, lists, links, bold).",
+							children: /* @__PURE__ */ d("textarea", {
+								"aria-label": "Content",
+								className: `${y} h-64 py-2 font-mono text-xs`,
+								value: H.content,
+								onChange: (e) => U((t) => ({
+									...t,
+									content: e.target.value
+								})),
+								placeholder: "## Heading\n\nWrite your content in markdown..."
+							})
+						}),
+						/* @__PURE__ */ f(s, {
+							title: "Meta",
+							children: [
+								/* @__PURE__ */ f(o, {
+									cols: 3,
+									children: [
+										/* @__PURE__ */ f("label", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ d("span", {
+												className: "text-sm font-medium",
+												children: "Author"
+											}), /* @__PURE__ */ d(a, {
+												value: H.author,
+												onChange: (e) => U((t) => ({
+													...t,
+													author: e.target.value
+												})),
+												placeholder: "The Team"
+											})]
+										}),
+										/* @__PURE__ */ f("label", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ d("span", {
+												className: "text-sm font-medium",
+												children: "Published date"
+											}), /* @__PURE__ */ d(a, {
+												type: "date",
+												value: H.publishedAt,
+												onChange: (e) => U((t) => ({
+													...t,
+													publishedAt: e.target.value
+												}))
+											})]
+										}),
+										/* @__PURE__ */ f("label", {
+											className: "space-y-1.5",
+											children: [/* @__PURE__ */ d("span", {
+												className: "text-sm font-medium",
+												children: "Reading time (min)"
+											}), /* @__PURE__ */ d(a, {
+												type: "number",
+												min: 0,
+												value: H.readingTime,
+												onChange: (e) => U((t) => ({
+													...t,
+													readingTime: e.target.value
+												}))
+											})]
+										})
+									]
+								}),
+								/* @__PURE__ */ f("label", {
+									className: "block space-y-1.5",
+									children: [/* @__PURE__ */ d("span", {
+										className: "text-sm font-medium",
+										children: "Thumbnail URL"
+									}), /* @__PURE__ */ d(a, {
+										value: H.thumbnail,
+										onChange: (e) => U((t) => ({
+											...t,
+											thumbnail: e.target.value
+										})),
+										placeholder: "https://…/image.png"
+									})]
+								}),
+								/* @__PURE__ */ f("div", {
+									className: "flex items-center gap-6 pt-1",
+									children: [/* @__PURE__ */ f("label", {
+										className: "flex items-center gap-2 text-sm",
+										children: [/* @__PURE__ */ d("input", {
+											type: "checkbox",
+											checked: H.featured,
+											onChange: (e) => U((t) => ({
+												...t,
+												featured: e.target.checked
+											}))
+										}), "Featured"]
+									}), /* @__PURE__ */ f("label", {
+										className: "flex items-center gap-2 text-sm",
+										children: [/* @__PURE__ */ d("input", {
+											type: "checkbox",
+											checked: H.isPublished,
+											onChange: (e) => U((t) => ({
+												...t,
+												isPublished: e.target.checked
+											}))
+										}), "Published"]
+									})]
+								})
+							]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ d(oe, {
+				open: !!G,
+				onClose: () => K(null),
+				onConfirm: je,
+				itemName: G?.title ?? "this content page",
+				itemType: "content page",
+				loading: q
+			})
+		]
+	});
+}
+//#endregion
+export { b as ContentPagesPage };
+
+//# sourceMappingURL=ContentPagesPage.js.map