@burdenoff/microfe-admin 2026.625.1 → 2026.712.1

package/dist/admin/pages/FeatureFlagsPage.js

@@ -8,31 +8,32 @@ import { FeatureFlagStatus as l } from "../../generated/global-types.js";
 import { useState as u } from "react";
 import { Plus as d, Search as f, ToggleLeft as p, Trash2 as m } from "lucide-react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { EmphasisPanel as _, PagePurpose as v } from "@burdenoff/fe-libs/ui";
 //#region src/admin/pages/FeatureFlagsPage.tsx
-function _() {
-	let [_, v] = u(""), { data: y, loading: b, error: x, refetch: S } = s({ variables: { filter: _ ? { name: { contains: _ } } : void 0 } }), [C] = c(), [w] = o(), T = y?.featureFlags?.items || [], E = async (e, t) => {
+function y() {
+	let [y, b] = u(""), { data: x, loading: S, error: C, refetch: w } = s({ variables: { filter: y ? { name: { contains: y } } : void 0 } }), [T] = c(), [E] = o(), D = x?.featureFlags?.items || [], O = D.filter((e) => e.status === l.Active).length, k = async (e, t) => {
 		let n = t === l.Active ? l.Archived : l.Active;
 		try {
-			await C({ variables: {
+			await T({ variables: {
 				id: e,
 				input: { status: n }
-			} }), S();
+			} }), w();
 		} catch (e) {
 			console.error("Failed to update status:", e);
 		}
-	}, D = async (e) => {
+	}, A = async (e) => {
 		if (confirm("Are you sure you want to delete this feature flag?")) try {
-			await w({ variables: { id: e } }), S();
+			await E({ variables: { id: e } }), w();
 		} catch (e) {
 			console.error("Failed to delete flag:", e);
 		}
 	};
-	return x ? /* @__PURE__ */ h(r, {
+	return C ? /* @__PURE__ */ h(r, {
 		title: "Feature Flags",
 		description: "Error loading feature flags",
 		children: /* @__PURE__ */ g("div", {
 			className: "p-4 text-status-error-text",
-			children: ["Error: ", x.message]
+			children: ["Error: ", C.message]
 		})
 	}) : /* @__PURE__ */ h(r, {
 		title: "Feature Flags",
@@ -41,78 +42,95 @@ function _() {
 		actions: /* @__PURE__ */ g(e, { children: [/* @__PURE__ */ h(d, { className: "mr-2 h-4 w-4" }), "Create Feature Flag"] }),
 		children: /* @__PURE__ */ g("div", {
 			className: "space-y-4",
-			children: [/* @__PURE__ */ h("div", {
-				className: "flex items-center justify-between",
-				children: /* @__PURE__ */ g("div", {
-					className: "relative max-w-sm flex-1",
-					children: [/* @__PURE__ */ h(f, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ h(n, {
-						placeholder: "Search feature flags...",
-						className: "pl-9",
-						value: _,
-						onChange: (e) => v(e.target.value)
-					})]
-				})
-			}), /* @__PURE__ */ h(i, {
-				columns: [
-					{
-						key: "name",
-						header: "Name",
-						render: (e) => /* @__PURE__ */ g("div", {
-							className: "flex flex-col text-left",
-							children: [/* @__PURE__ */ h("span", {
-								className: "font-medium",
-								children: e.name
-							}), /* @__PURE__ */ h("span", {
-								className: "text-xs text-text-secondary",
-								children: e.key
-							})]
-						})
-					},
-					{
-						key: "flagType",
-						header: "Type"
-					},
-					{
-						key: "status",
-						header: "Status",
-						render: (t) => {
-							let n = t.status === l.Active;
-							return /* @__PURE__ */ h(e, {
-								variant: "outline",
-								size: "sm",
-								onClick: () => E(t.id, t.status),
-								className: n ? "border-primary text-primary" : "text-text-secondary",
-								children: n ? "Active" : "Archived"
-							});
+			children: [
+				/* @__PURE__ */ h(v, { children: "Feature flags let you turn parts of the platform on or off without shipping new code. Use this page to roll a feature out gradually, kill-switch something that's misbehaving, or archive flags you no longer need." }),
+				/* @__PURE__ */ g(_, {
+					className: "flex items-center gap-4 p-5",
+					children: [/* @__PURE__ */ h("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",
+						children: /* @__PURE__ */ h(p, { className: "h-6 w-6" })
+					}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("div", {
+						className: "text-3xl font-bold tabular-nums text-text-primary",
+						children: O
+					}), /* @__PURE__ */ h("p", {
+						className: "text-sm text-text-secondary",
+						children: "active feature flags"
+					})] })]
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "flex items-center justify-between",
+					children: /* @__PURE__ */ g("div", {
+						className: "relative max-w-sm flex-1",
+						children: [/* @__PURE__ */ h(f, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ h(n, {
+							placeholder: "Search feature flags...",
+							className: "pl-9",
+							value: y,
+							onChange: (e) => b(e.target.value)
+						})]
+					})
+				}),
+				/* @__PURE__ */ h(i, {
+					columns: [
+						{
+							key: "name",
+							header: "Name",
+							render: (e) => /* @__PURE__ */ g("div", {
+								className: "flex flex-col text-left",
+								children: [/* @__PURE__ */ h("span", {
+									className: "font-medium",
+									children: e.name
+								}), /* @__PURE__ */ h("span", {
+									className: "text-xs text-text-secondary",
+									children: e.key
+								})]
+							})
+						},
+						{
+							key: "flagType",
+							header: "Type"
+						},
+						{
+							key: "status",
+							header: "Status",
+							render: (t) => {
+								let n = t.status === l.Active;
+								return /* @__PURE__ */ h(e, {
+									variant: "outline",
+									size: "sm",
+									onClick: () => k(t.id, t.status),
+									className: n ? "border-primary text-primary" : "text-text-secondary",
+									children: n ? "Active" : "Archived"
+								});
+							}
+						},
+						{
+							key: "actions",
+							header: "",
+							align: "right",
+							render: (e) => /* @__PURE__ */ h(a, { actions: [{
+								key: "delete",
+								label: "Delete",
+								icon: /* @__PURE__ */ h(m, { className: "h-4 w-4" }),
+								onClick: () => A(e.id),
+								destructive: !0
+							}] })
 						}
-					},
-					{
-						key: "actions",
-						header: "",
-						align: "right",
-						render: (e) => /* @__PURE__ */ h(a, { actions: [{
-							key: "delete",
-							label: "Delete",
-							icon: /* @__PURE__ */ h(m, { className: "h-4 w-4" }),
-							onClick: () => D(e.id),
-							destructive: !0
-						}] })
-					}
-				],
-				data: T,
-				keyExtractor: (e) => e.id,
-				loading: b,
-				emptyState: /* @__PURE__ */ h(t, {
-					illustration: "empty-data",
-					icon: /* @__PURE__ */ h(p, { className: "h-8 w-8" }),
-					title: "No feature flags found",
-					description: "Feature flags will appear here when they are created"
+					],
+					data: D,
+					keyExtractor: (e) => e.id,
+					loading: S,
+					emptyState: /* @__PURE__ */ h(t, {
+						illustration: "empty-data",
+						icon: /* @__PURE__ */ h(p, { className: "h-8 w-8" }),
+						title: "No feature flags found",
+						description: "Feature flags will appear here when they are created"
+					})
 				})
-			})]
+			]
 		})
 	});
 }
 //#endregion
-export { _ as FeatureFlagsPage };
+export { y as FeatureFlagsPage };
 
 //# sourceMappingURL=FeatureFlagsPage.js.map

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 {\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\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        <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":";;;;;;;;;;;AAUA,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,EAEvC,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,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA,EAC3F,kBAAC,GAAD;MACE,aAAY;MACZ,WAAU;MACV,OAAO;MACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;MAC1C,CAAA,CACE;;IACF,CAAA,EAEN,kBAAC,GAAD;IACW,SAtFD;KACd;MACE,KAAK;MACL,QAAQ;MACR,SAAS,MACP,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBAAe,EAAK;QAAY,CAAA,EAChD,kBAAC,QAAD;QAAM,WAAU;kBAA+B,EAAK;QAAW,CAAA,CAC3D;;MAET;KACD;MACE,KAAK;MACL,QAAQ;MACT;KACD;MACE,KAAK;MACL,QAAQ;MACR,SAAS,MAAc;OACrB,IAAM,IAAW,EAAK,WAAW,EAAkB;AACnD,cACE,kBAAC,GAAD;QACE,SAAQ;QACR,MAAK;QACL,eAAe,EAAmB,EAAK,IAAI,EAAK,OAAO;QACvD,WAAW,IAAW,gCAAgC;kBAErD,IAAW,WAAW;QAChB,CAAA;;MAGd;KACD;MACE,KAAK;MACL,QAAQ;MACR,OAAO;MACP,SAAS,MACP,kBAAC,GAAD,EACE,SAAS,CACP;OACE,KAAK;OACL,OAAO;OACP,MAAM,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;OACpC,eAAe,EAAa,EAAK,GAAG;OACpC,aAAa;OACd,CACF,EACD,CAAA;MAEL;KACF;IAqCO,MAAM;IACN,eAAe,MAAS,EAAK;IACpB;IACT,YACE,kBAAC,GAAD;KACE,cAAa;KACb,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;KACxC,OAAM;KACN,aAAY;KACZ,CAAA;IAEJ,CAAA,CACE;;EACK,CAAA"}
+{"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":"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"}

package/dist/admin/pages/OrganizationsListPage.js

@@ -5,17 +5,18 @@ import { useListOrganizationsQuery as i, useUpdateOrganizationMutation as a } fr
 import { useState as o } from "react";
 import { Building as s, Loader2 as c, Plus as l, Search as u } from "lucide-react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { EmphasisPanel as p, PagePurpose as m } from "@burdenoff/fe-libs/ui";
 //#region src/admin/pages/OrganizationsListPage.tsx
-function p() {
-	let [p, m] = o(""), { data: h, loading: g, refetch: _ } = i({ variables: {
-		filter: p ? { search: p } : void 0,
+function h() {
+	let [h, g] = o(""), { data: _, loading: v, refetch: y } = i({ variables: {
+		filter: h ? { search: h } : void 0,
 		limit: 50
-	} }), [v] = a(), y = async (e, t) => {
-		await v({ variables: {
+	} }), [b] = a(), x = async (e, t) => {
+		await b({ variables: {
 			id: e,
 			input: { status: t === "ACTIVE" ? "INACTIVE" : "ACTIVE" }
-		} }), _();
-	}, b = h?.allOrganizations?.items || [];
+		} }), y();
+	}, S = _?.allOrganizations?.items || [];
 	return /* @__PURE__ */ d(r, {
 		title: "Organizations",
 		gradientWord: "Organizations",
@@ -23,92 +24,109 @@ function p() {
 		actions: /* @__PURE__ */ f(e, { children: [/* @__PURE__ */ d(l, { className: "mr-2 h-4 w-4" }), "Create Organization"] }),
 		children: /* @__PURE__ */ f("div", {
 			className: "space-y-4",
-			children: [/* @__PURE__ */ d("div", {
-				className: "flex items-center justify-between",
-				children: /* @__PURE__ */ f("div", {
-					className: "relative max-w-sm flex-1",
-					children: [/* @__PURE__ */ d(u, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ d(n, {
-						placeholder: "Search organizations...",
-						className: "pl-9",
-						value: p,
-						onChange: (e) => m(e.target.value)
-					})]
-				})
-			}), g ? /* @__PURE__ */ d("div", {
-				className: "flex h-64 items-center justify-center",
-				children: /* @__PURE__ */ d(c, { className: "h-8 w-8 animate-spin text-text-secondary" })
-			}) : b.length > 0 ? /* @__PURE__ */ d("div", {
-				className: "rounded-md border",
-				children: /* @__PURE__ */ f("table", {
-					className: "w-full text-sm",
-					children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ f("tr", {
-						className: "border-b bg-bg-sunken/50 text-left",
-						children: [
-							/* @__PURE__ */ d("th", {
-								className: "p-4 font-medium",
-								children: "Name"
-							}),
-							/* @__PURE__ */ d("th", {
-								className: "p-4 font-medium",
-								children: "Slug"
-							}),
-							/* @__PURE__ */ d("th", {
-								className: "p-4 font-medium",
-								children: "Status"
-							}),
-							/* @__PURE__ */ d("th", {
-								className: "p-4 font-medium",
-								children: "Created At"
-							}),
-							/* @__PURE__ */ d("th", {
-								className: "p-4 font-medium text-right",
-								children: "Actions"
-							})
-						]
-					}) }), /* @__PURE__ */ d("tbody", { children: b.map((t) => /* @__PURE__ */ f("tr", {
-						className: "border-b transition-colors hover:bg-bg-sunken/50",
-						children: [
-							/* @__PURE__ */ d("td", {
-								className: "p-4 font-medium",
-								children: t.name
-							}),
-							/* @__PURE__ */ d("td", {
-								className: "p-4 text-text-secondary",
-								children: t.slug
-							}),
-							/* @__PURE__ */ d("td", {
-								className: "p-4",
-								children: /* @__PURE__ */ d("span", {
-									className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${t.status === "ACTIVE" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`,
-									children: t.status
+			children: [
+				/* @__PURE__ */ d(m, { children: "Organizations group people and workspaces within a tenant — think of a company's departments or a customer's teams. Use this page to find an organization, review whether it is active, and toggle access on or off without touching the tenant itself." }),
+				/* @__PURE__ */ f(p, {
+					className: "flex items-center gap-4 p-5",
+					children: [/* @__PURE__ */ d("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",
+						children: /* @__PURE__ */ d(s, { className: "h-6 w-6" })
+					}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("div", {
+						className: "text-3xl font-bold tabular-nums text-text-primary",
+						children: _?.allOrganizations?.total ?? S.length
+					}), /* @__PURE__ */ d("p", {
+						className: "text-sm text-text-secondary",
+						children: "organizations on the platform"
+					})] })]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "flex items-center justify-between",
+					children: /* @__PURE__ */ f("div", {
+						className: "relative max-w-sm flex-1",
+						children: [/* @__PURE__ */ d(u, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ d(n, {
+							placeholder: "Search organizations...",
+							className: "pl-9",
+							value: h,
+							onChange: (e) => g(e.target.value)
+						})]
+					})
+				}),
+				v ? /* @__PURE__ */ d("div", {
+					className: "flex h-64 items-center justify-center",
+					children: /* @__PURE__ */ d(c, { className: "h-8 w-8 animate-spin text-text-secondary" })
+				}) : S.length > 0 ? /* @__PURE__ */ d("div", {
+					className: "rounded-md border",
+					children: /* @__PURE__ */ f("table", {
+						className: "w-full text-sm",
+						children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ f("tr", {
+							className: "border-b bg-bg-sunken/50 text-left",
+							children: [
+								/* @__PURE__ */ d("th", {
+									className: "p-4 font-medium",
+									children: "Name"
+								}),
+								/* @__PURE__ */ d("th", {
+									className: "p-4 font-medium",
+									children: "Slug"
+								}),
+								/* @__PURE__ */ d("th", {
+									className: "p-4 font-medium",
+									children: "Status"
+								}),
+								/* @__PURE__ */ d("th", {
+									className: "p-4 font-medium",
+									children: "Created At"
+								}),
+								/* @__PURE__ */ d("th", {
+									className: "p-4 font-medium text-right",
+									children: "Actions"
 								})
-							}),
-							/* @__PURE__ */ d("td", {
-								className: "p-4 text-text-secondary",
-								children: new Date(t.createdAt).toLocaleDateString()
-							}),
-							/* @__PURE__ */ d("td", {
-								className: "p-4 text-right",
-								children: /* @__PURE__ */ d(e, {
-									variant: "outline",
-									size: "sm",
-									onClick: () => y(t.id, t.status),
-									children: "Toggle Status"
+							]
+						}) }), /* @__PURE__ */ d("tbody", { children: S.map((t) => /* @__PURE__ */ f("tr", {
+							className: "border-b transition-colors hover:bg-bg-sunken/50",
+							children: [
+								/* @__PURE__ */ d("td", {
+									className: "p-4 font-medium",
+									children: t.name
+								}),
+								/* @__PURE__ */ d("td", {
+									className: "p-4 text-text-secondary",
+									children: t.slug
+								}),
+								/* @__PURE__ */ d("td", {
+									className: "p-4",
+									children: /* @__PURE__ */ d("span", {
+										className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${t.status === "ACTIVE" ? "bg-status-success-bg text-status-success-text border border-status-success-border" : "bg-status-error-bg text-status-error-text border border-status-error-border"}`,
+										children: t.status
+									})
+								}),
+								/* @__PURE__ */ d("td", {
+									className: "p-4 text-text-secondary",
+									children: new Date(t.createdAt).toLocaleDateString()
+								}),
+								/* @__PURE__ */ d("td", {
+									className: "p-4 text-right",
+									children: /* @__PURE__ */ d(e, {
+										variant: "outline",
+										size: "sm",
+										onClick: () => x(t.id, t.status),
+										children: "Toggle Status"
+									})
 								})
-							})
-						]
-					}, t.id)) })]
+							]
+						}, t.id)) })]
+					})
+				}) : /* @__PURE__ */ d(t, {
+					illustration: "empty-data",
+					icon: /* @__PURE__ */ d(s, { className: "h-8 w-8" }),
+					title: "No organizations found",
+					description: "Organizations will appear here when they are created"
 				})
-			}) : /* @__PURE__ */ d(t, {
-				illustration: "empty-data",
-				icon: /* @__PURE__ */ d(s, { className: "h-8 w-8" }),
-				title: "No organizations found",
-				description: "Organizations will appear here when they are created"
-			})]
+			]
 		})
 	});
 }
 //#endregion
-export { p as OrganizationsListPage };
+export { h as OrganizationsListPage };
 
 //# sourceMappingURL=OrganizationsListPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OrganizationsListPage.js","names":[],"sources":["../../../src/admin/pages/OrganizationsListPage.tsx"],"sourcesContent":["import { Building, Search, Plus, Loader2 } from 'lucide-react';\nimport { PageLayout, Input, Button, EmptyState } from '../components';\nimport {\n  useListOrganizationsQuery,\n  useUpdateOrganizationMutation,\n} from '../../generated/global-operations';\nimport { useState } from 'react';\n\nexport function OrganizationsListPage() {\n  const [searchTerm, setSearchTerm] = useState('');\n  const { data, loading, refetch } = useListOrganizationsQuery({\n    variables: {\n      filter: searchTerm ? { search: searchTerm } : undefined,\n      limit: 50,\n    },\n  });\n\n  const [updateOrganization] = useUpdateOrganizationMutation();\n\n  const handleToggleStatus = async (id: string, currentStatus: string) => {\n    const newStatus = currentStatus === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE';\n    await updateOrganization({\n      variables: {\n        id,\n        input: { status: newStatus },\n      },\n    });\n    refetch();\n  };\n\n  const organizations = data?.allOrganizations?.items || [];\n\n  return (\n    <PageLayout\n      title=\"Organizations\"\n      gradientWord=\"Organizations\"\n      description=\"Manage and monitor platform organizations\"\n      actions={\n        <Button>\n          <Plus className=\"mr-2 h-4 w-4\" />\n          Create Organization\n        </Button>\n      }\n    >\n      <div className=\"space-y-4\">\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 organizations...\"\n              className=\"pl-9\"\n              value={searchTerm}\n              onChange={(e) => setSearchTerm(e.target.value)}\n            />\n          </div>\n        </div>\n\n        {loading ? (\n          <div className=\"flex h-64 items-center justify-center\">\n            <Loader2 className=\"h-8 w-8 animate-spin text-text-secondary\" />\n          </div>\n        ) : organizations.length > 0 ? (\n          <div className=\"rounded-md border\">\n            <table className=\"w-full text-sm\">\n              <thead>\n                <tr className=\"border-b bg-bg-sunken/50 text-left\">\n                  <th className=\"p-4 font-medium\">Name</th>\n                  <th className=\"p-4 font-medium\">Slug</th>\n                  <th className=\"p-4 font-medium\">Status</th>\n                  <th className=\"p-4 font-medium\">Created At</th>\n                  <th className=\"p-4 font-medium text-right\">Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                {organizations.map((org: any) => (\n                  <tr key={org.id} className=\"border-b transition-colors hover:bg-bg-sunken/50\">\n                    <td className=\"p-4 font-medium\">{org.name}</td>\n                    <td className=\"p-4 text-text-secondary\">{org.slug}</td>\n                    <td className=\"p-4\">\n                      <span\n                        className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${\n                          org.status === 'ACTIVE'\n                            ? 'bg-green-100 text-green-800'\n                            : 'bg-red-100 text-red-800'\n                        }`}\n                      >\n                        {org.status}\n                      </span>\n                    </td>\n                    <td className=\"p-4 text-text-secondary\">\n                      {new Date(org.createdAt).toLocaleDateString()}\n                    </td>\n                    <td className=\"p-4 text-right\">\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        onClick={() => handleToggleStatus(org.id, org.status)}\n                      >\n                        Toggle Status\n                      </Button>\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        ) : (\n          <EmptyState\n            illustration=\"empty-data\"\n            icon={<Building className=\"h-8 w-8\" />}\n            title=\"No organizations found\"\n            description=\"Organizations will appear here when they are created\"\n          />\n        )}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,IAAwB;CACtC,IAAM,CAAC,GAAY,KAAiB,EAAS,GAAG,EAC1C,EAAE,SAAM,YAAS,eAAY,EAA0B,EAC3D,WAAW;EACT,QAAQ,IAAa,EAAE,QAAQ,GAAY,GAAG,KAAA;EAC9C,OAAO;EACR,EACF,CAAC,EAEI,CAAC,KAAsB,GAA+B,EAEtD,IAAqB,OAAO,GAAY,MAA0B;AAQtE,EANA,MAAM,EAAmB,EACvB,WAAW;GACT;GACA,OAAO,EAAE,QAJK,MAAkB,WAAW,aAAa,UAI5B;GAC7B,EACF,CAAC,EACF,GAAS;IAGL,IAAgB,GAAM,kBAAkB,SAAS,EAAE;AAEzD,QACE,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,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA,EAC3F,kBAAC,GAAD;MACE,aAAY;MACZ,WAAU;MACV,OAAO;MACP,WAAW,MAAM,EAAc,EAAE,OAAO,MAAM;MAC9C,CAAA,CACE;;IACF,CAAA,EAEL,IACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAS,WAAU,4CAA6C,CAAA;IAC5D,CAAA,GACJ,EAAc,SAAS,IACzB,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,SAAD;KAAO,WAAU;eAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD;MAAI,WAAU;gBAAd;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAkB;QAAS,CAAA;OACzC,kBAAC,MAAD;QAAI,WAAU;kBAAkB;QAAS,CAAA;OACzC,kBAAC,MAAD;QAAI,WAAU;kBAAkB;QAAW,CAAA;OAC3C,kBAAC,MAAD;QAAI,WAAU;kBAAkB;QAAe,CAAA;OAC/C,kBAAC,MAAD;QAAI,WAAU;kBAA6B;QAAY,CAAA;OACpD;SACC,CAAA,EACR,kBAAC,SAAD,EAAA,UACG,EAAc,KAAK,MAClB,kBAAC,MAAD;MAAiB,WAAU;gBAA3B;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAmB,EAAI;QAAU,CAAA;OAC/C,kBAAC,MAAD;QAAI,WAAU;kBAA2B,EAAI;QAAU,CAAA;OACvD,kBAAC,MAAD;QAAI,WAAU;kBACZ,kBAAC,QAAD;SACE,WAAW,6EACT,EAAI,WAAW,WACX,gCACA;mBAGL,EAAI;SACA,CAAA;QACJ,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBACX,IAAI,KAAK,EAAI,UAAU,CAAC,oBAAoB;QAC1C,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBACZ,kBAAC,GAAD;SACE,SAAQ;SACR,MAAK;SACL,eAAe,EAAmB,EAAI,IAAI,EAAI,OAAO;mBACtD;SAEQ,CAAA;QACN,CAAA;OACF;QA1BI,EAAI,GA0BR,CACL,EACI,CAAA,CACF;;IACJ,CAAA,GAEN,kBAAC,GAAD;IACE,cAAa;IACb,MAAM,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;IACtC,OAAM;IACN,aAAY;IACZ,CAAA,CAEA;;EACK,CAAA"}
+{"version":3,"file":"OrganizationsListPage.js","names":[],"sources":["../../../src/admin/pages/OrganizationsListPage.tsx"],"sourcesContent":["import { Building, Search, Plus, Loader2 } from 'lucide-react';\nimport { PageLayout, Input, Button, EmptyState } from '../components';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport {\n  useListOrganizationsQuery,\n  useUpdateOrganizationMutation,\n} from '../../generated/global-operations';\nimport { useState } from 'react';\n\nexport function OrganizationsListPage() {\n  const [searchTerm, setSearchTerm] = useState('');\n  const { data, loading, refetch } = useListOrganizationsQuery({\n    variables: {\n      filter: searchTerm ? { search: searchTerm } : undefined,\n      limit: 50,\n    },\n  });\n\n  const [updateOrganization] = useUpdateOrganizationMutation();\n\n  const handleToggleStatus = async (id: string, currentStatus: string) => {\n    const newStatus = currentStatus === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE';\n    await updateOrganization({\n      variables: {\n        id,\n        input: { status: newStatus },\n      },\n    });\n    refetch();\n  };\n\n  const organizations = data?.allOrganizations?.items || [];\n\n  return (\n    <PageLayout\n      title=\"Organizations\"\n      gradientWord=\"Organizations\"\n      description=\"Manage and monitor platform organizations\"\n      actions={\n        <Button>\n          <Plus className=\"mr-2 h-4 w-4\" />\n          Create Organization\n        </Button>\n      }\n    >\n      <div className=\"space-y-4\">\n        <PagePurpose>\n          Organizations group people and workspaces within a tenant — think of a company&apos;s\n          departments or a customer&apos;s teams. Use this page to find an organization, review\n          whether it is active, and toggle access on or off without touching the tenant itself.\n        </PagePurpose>\n\n        {/* Emphasis: how many organizations exist — the headline stat. */}\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            <Building className=\"h-6 w-6\" />\n          </div>\n          <div>\n            <div className=\"text-3xl font-bold tabular-nums text-text-primary\">\n              {data?.allOrganizations?.total ?? organizations.length}\n            </div>\n            <p className=\"text-sm text-text-secondary\">organizations on the platform</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 organizations...\"\n              className=\"pl-9\"\n              value={searchTerm}\n              onChange={(e) => setSearchTerm(e.target.value)}\n            />\n          </div>\n        </div>\n\n        {loading ? (\n          <div className=\"flex h-64 items-center justify-center\">\n            <Loader2 className=\"h-8 w-8 animate-spin text-text-secondary\" />\n          </div>\n        ) : organizations.length > 0 ? (\n          <div className=\"rounded-md border\">\n            <table className=\"w-full text-sm\">\n              <thead>\n                <tr className=\"border-b bg-bg-sunken/50 text-left\">\n                  <th className=\"p-4 font-medium\">Name</th>\n                  <th className=\"p-4 font-medium\">Slug</th>\n                  <th className=\"p-4 font-medium\">Status</th>\n                  <th className=\"p-4 font-medium\">Created At</th>\n                  <th className=\"p-4 font-medium text-right\">Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                {organizations.map((org: any) => (\n                  <tr key={org.id} className=\"border-b transition-colors hover:bg-bg-sunken/50\">\n                    <td className=\"p-4 font-medium\">{org.name}</td>\n                    <td className=\"p-4 text-text-secondary\">{org.slug}</td>\n                    <td className=\"p-4\">\n                      <span\n                        className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${\n                          org.status === 'ACTIVE'\n                            ? 'bg-status-success-bg text-status-success-text border border-status-success-border'\n                            : 'bg-status-error-bg text-status-error-text border border-status-error-border'\n                        }`}\n                      >\n                        {org.status}\n                      </span>\n                    </td>\n                    <td className=\"p-4 text-text-secondary\">\n                      {new Date(org.createdAt).toLocaleDateString()}\n                    </td>\n                    <td className=\"p-4 text-right\">\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        onClick={() => handleToggleStatus(org.id, org.status)}\n                      >\n                        Toggle Status\n                      </Button>\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        ) : (\n          <EmptyState\n            illustration=\"empty-data\"\n            icon={<Building className=\"h-8 w-8\" />}\n            title=\"No organizations found\"\n            description=\"Organizations will appear here when they are created\"\n          />\n        )}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}