@burdenoff/microfe-devportal 2026.510.110

package/dist/devportal/pages/WebhooksPage.js

@@ -0,0 +1,454 @@
+import { useDevportal as e } from "../providers/DevportalProvider.js";
+import { cn as t } from "../utils/cn.js";
+import { EmptyState as n } from "../components/EmptyState.js";
+import { PageLayout as r } from "../components/PageLayout.js";
+import { StatusBadge as i } from "../components/StatusBadge.js";
+import { AppListItem as a } from "../components/AppCard.js";
+import { DataTable as o } from "../components/DataTable.js";
+import { useGetApplicationsQuery as s, useGetWebhooksQuery as c } from "../../generated/global-operations.js";
+import { PermissionGuard as l } from "../components/PermissionGuard.js";
+import "../components/index.js";
+import { DEVPORTAL_PERMISSIONS as u } from "../constants/permissions.js";
+import { getErrorMessage as d } from "../hooks/useGraphQL.js";
+import { useDevportalPermission as f } from "../hooks/usePermission.js";
+import "../hooks/index.js";
+import { useState as p } from "react";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as h, AlertTriangle as g, AppWindow as _, CheckCircle as v, Loader2 as y, PauseCircle as b, Plus as x, Search as S, Webhook as C, XCircle as w } from "lucide-react";
+import { useParams as T } from "react-router-dom";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region src/devportal/pages/WebhooksPage.tsx
+function O(e) {
+	return {
+		id: e.id,
+		applicationId: e.applicationId,
+		name: e.name,
+		description: e.description ?? void 0,
+		url: e.url,
+		secret: e.secret ?? void 0,
+		events: e.events ?? [],
+		isActive: e.isActive,
+		status: e.status,
+		maxRetries: e.maxRetries ?? 3,
+		retryDelay: e.retryDelay ?? 60,
+		retryEnabled: e.retryEnabled ?? !0,
+		lastTriggeredAt: e.lastTriggeredAt ?? void 0,
+		lastSuccessAt: e.lastSuccessAt ?? void 0,
+		lastFailureAt: e.lastFailureAt ?? void 0,
+		lastFailureReason: e.lastFailureReason ?? void 0,
+		failureCount: e.failureCount ?? 0,
+		successCount: e.successCount ?? 0,
+		createdAt: e.createdAt,
+		updatedAt: e.updatedAt
+	};
+}
+var k = () => {
+	let { appId: k } = T(), { navigate: j, basePath: M } = e(), { t: ee } = m(), N = (e, t) => {
+		let n = ee(e);
+		return n === e ? t : n;
+	}, P = f(u.WEBHOOK_CREATE), [F, I] = p(""), [L, R] = p(""), { data: z, loading: B, error: V, refetch: H } = s({
+		variables: { limit: 100 },
+		skip: !!k,
+		fetchPolicy: "cache-and-network"
+	}), { data: U, loading: W, error: G, refetch: K } = c({
+		variables: { applicationId: k || "" },
+		skip: !k,
+		fetchPolicy: "cache-and-network"
+	}), q = U?.webhooks?.map(O) ?? [], J = z?.applications?.edges?.map((e) => e.node) ?? [], Y = (e) => {
+		j?.(`${M}${e}`);
+	}, X = q.filter((e) => {
+		let t = !F || e.name.toLowerCase().includes(F.toLowerCase()) || e.url.toLowerCase().includes(F.toLowerCase()), n = !L || e.status === L;
+		return t && n;
+	}), Z = (e) => {
+		switch (e) {
+			case "ACTIVE": return /* @__PURE__ */ E(v, {
+				size: 16,
+				className: "text-status-success-text"
+			});
+			case "PAUSED": return /* @__PURE__ */ E(b, {
+				size: 16,
+				className: "text-status-warning-text"
+			});
+			case "FAILED": return /* @__PURE__ */ E(w, {
+				size: 16,
+				className: "text-status-error-text"
+			});
+			case "DISABLED": return /* @__PURE__ */ E(g, {
+				size: 16,
+				className: "text-text-tertiary"
+			});
+			default: return null;
+		}
+	}, Q = (e) => {
+		let t = e.successCount + e.failureCount;
+		return t === 0 ? 100 : Math.round(e.successCount / t * 100);
+	};
+	if (!k) {
+		let e = J.filter((e) => {
+			if (!F) return !0;
+			let t = F.toLowerCase();
+			return e.name.toLowerCase().includes(t) || (e.slug ?? "").toLowerCase().includes(t);
+		});
+		return /* @__PURE__ */ E(l, {
+			permission: u.WEBHOOK_READ,
+			children: /* @__PURE__ */ E(r, {
+				title: N("devportal.webhooks", "Webhooks"),
+				description: N("devportal.manageWebhooksApps", "Manage webhooks for your applications"),
+				children: /* @__PURE__ */ D("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ E("div", {
+						className: "max-w-md",
+						children: /* @__PURE__ */ D("div", {
+							className: "relative",
+							children: [/* @__PURE__ */ E(S, {
+								size: 16,
+								className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+							}), /* @__PURE__ */ E("input", {
+								type: "text",
+								placeholder: "Search applications...",
+								value: F,
+								onChange: (e) => I(e.target.value),
+								className: "w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+							})]
+						})
+					}), B ? /* @__PURE__ */ E("div", {
+						className: "flex items-center justify-center py-12 text-muted-foreground",
+						children: /* @__PURE__ */ E(y, { className: "h-8 w-8 animate-spin" })
+					}) : V ? /* @__PURE__ */ D("div", {
+						className: "rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center",
+						children: [
+							/* @__PURE__ */ E(h, { className: "mx-auto h-8 w-8 text-destructive" }),
+							/* @__PURE__ */ E("h3", {
+								className: "mt-2 font-medium text-destructive",
+								children: "Failed to load applications"
+							}),
+							/* @__PURE__ */ E("p", {
+								className: "mt-1 text-sm text-muted-foreground",
+								children: d(V)
+							}),
+							/* @__PURE__ */ E("button", {
+								onClick: () => H(),
+								className: "mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+								children: "Try Again"
+							})
+						]
+					}) : e.length > 0 ? /* @__PURE__ */ E("div", {
+						className: "space-y-2",
+						children: e.map((e) => /* @__PURE__ */ E(a, {
+							app: e,
+							onClick: () => Y(`/apps/${e.id}/webhooks`)
+						}, e.id))
+					}) : /* @__PURE__ */ E(n, {
+						icon: /* @__PURE__ */ E(_, { size: 32 }),
+						title: "No applications available",
+						description: F ? "No applications matched your search." : "Create an application before configuring webhooks.",
+						action: /* @__PURE__ */ D("button", {
+							onClick: () => Y("/apps/new"),
+							className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+							children: [/* @__PURE__ */ E(x, { size: 16 }), "Create Application"]
+						})
+					})]
+				})
+			})
+		});
+	}
+	if (W && !U) return /* @__PURE__ */ E(r, {
+		title: N("devportal.webhooks", "Webhooks"),
+		description: N("devportal.manageWebhooksApp", "Manage webhooks for this application"),
+		backLink: `/apps/${k}`,
+		backLabel: N("devportal.backToApplication", "Back to Application"),
+		children: /* @__PURE__ */ D("div", {
+			className: "flex items-center justify-center py-12",
+			children: [/* @__PURE__ */ E(y, { className: "h-8 w-8 animate-spin text-muted-foreground" }), /* @__PURE__ */ E("span", {
+				className: "ml-2 text-muted-foreground",
+				children: N("devportal.loadingWebhooks", "Loading webhooks...")
+			})]
+		})
+	});
+	if (G) return /* @__PURE__ */ E(r, {
+		title: N("devportal.webhooks", "Webhooks"),
+		description: N("devportal.manageWebhooksApp", "Manage webhooks for this application"),
+		backLink: `/apps/${k}`,
+		backLabel: N("devportal.backToApplication", "Back to Application"),
+		children: /* @__PURE__ */ D("div", {
+			className: "rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center",
+			children: [
+				/* @__PURE__ */ E(h, { className: "mx-auto h-8 w-8 text-destructive" }),
+				/* @__PURE__ */ E("h3", {
+					className: "mt-2 font-medium text-destructive",
+					children: N("devportal.failedToLoadWebhooks", "Failed to load webhooks")
+				}),
+				/* @__PURE__ */ E("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: d(G)
+				}),
+				/* @__PURE__ */ E("button", {
+					onClick: () => K(),
+					className: "mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+					children: N("devportal.tryAgain", "Try Again")
+				})
+			]
+		})
+	});
+	let te = [
+		{
+			key: "name",
+			header: "Webhook",
+			render: (e) => /* @__PURE__ */ D("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ E("div", {
+					className: t("flex h-10 w-10 items-center justify-center rounded-lg", e.status === "ACTIVE" ? "bg-status-success-bg-subtle text-status-success-text" : e.status === "FAILED" ? "bg-status-error-bg-subtle text-status-error-text" : e.status === "PAUSED" ? "bg-status-warning-bg-subtle text-status-warning-text" : "bg-bg-sunken text-text-tertiary"),
+					children: /* @__PURE__ */ E(C, { size: 20 })
+				}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+					className: "font-medium",
+					children: e.name
+				}), /* @__PURE__ */ E("p", {
+					className: "text-xs text-muted-foreground truncate max-w-xs",
+					children: e.url
+				})] })]
+			})
+		},
+		{
+			key: "events",
+			header: "Events",
+			render: (e) => /* @__PURE__ */ D("div", {
+				className: "flex flex-wrap gap-1",
+				children: [e.events.slice(0, 2).map((e) => /* @__PURE__ */ E("span", {
+					className: "inline-flex rounded bg-muted px-1.5 py-0.5 text-xs",
+					children: e.split(".")[0]
+				}, e)), e.events.length > 2 && /* @__PURE__ */ D("span", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						"+",
+						e.events.length - 2,
+						" more"
+					]
+				})]
+			})
+		},
+		{
+			key: "status",
+			header: "Status",
+			render: (e) => /* @__PURE__ */ D("div", {
+				className: "flex items-center gap-2",
+				children: [Z(e.status), /* @__PURE__ */ E(i, {
+					status: e.status,
+					type: "webhook"
+				})]
+			})
+		},
+		{
+			key: "successRate",
+			header: "Success Rate",
+			render: (e) => {
+				let n = Q(e);
+				return /* @__PURE__ */ D("div", {
+					className: "w-24",
+					children: [/* @__PURE__ */ E("div", {
+						className: "flex items-center justify-between text-xs mb-1",
+						children: /* @__PURE__ */ D("span", {
+							className: t(n >= 95 ? "text-status-success-text" : n >= 80 ? "text-status-warning-text" : "text-status-error-text"),
+							children: [n, "%"]
+						})
+					}), /* @__PURE__ */ E("div", {
+						className: "h-1.5 rounded-full bg-muted",
+						children: /* @__PURE__ */ E("div", {
+							className: t("h-full rounded-full transition-all", n >= 95 ? "bg-status-success-bg-subtle" : n >= 80 ? "bg-status-warning-bg-subtle" : "bg-status-error-bg-subtle"),
+							style: { width: `${n}%` }
+						})
+					})]
+				});
+			}
+		},
+		{
+			key: "deliveries",
+			header: "Deliveries",
+			render: (e) => /* @__PURE__ */ D("div", {
+				className: "text-sm",
+				children: [
+					/* @__PURE__ */ E("span", {
+						className: "text-status-success-text",
+						children: e.successCount.toLocaleString()
+					}),
+					/* @__PURE__ */ E("span", {
+						className: "text-muted-foreground",
+						children: " / "
+					}),
+					/* @__PURE__ */ E("span", {
+						className: "text-status-error-text",
+						children: e.failureCount.toLocaleString()
+					})
+				]
+			})
+		},
+		{
+			key: "lastTriggered",
+			header: "Last Triggered",
+			render: (e) => /* @__PURE__ */ E("span", {
+				className: "text-sm text-muted-foreground",
+				children: e.lastTriggeredAt ? A(e.lastTriggeredAt) : "Never"
+			})
+		}
+	], $ = {
+		total: q.length,
+		active: q.filter((e) => e.status === "ACTIVE").length,
+		failed: q.filter((e) => e.status === "FAILED").length,
+		paused: q.filter((e) => e.status === "PAUSED").length
+	};
+	return /* @__PURE__ */ E(l, {
+		permission: u.WEBHOOK_READ,
+		children: /* @__PURE__ */ D(r, {
+			title: N("devportal.webhooks", "Webhooks"),
+			description: N("devportal.manageWebhooksApp", "Manage webhooks for this application"),
+			backLink: `/apps/${k}`,
+			backLabel: N("devportal.backToApplication", "Back to Application"),
+			actions: /* @__PURE__ */ D("button", {
+				onClick: () => Y(`/apps/${k}/webhooks/new`),
+				disabled: !P.allowed,
+				"aria-disabled": !P.allowed,
+				title: P.allowed ? void 0 : N("devportal.common.noPermission", "You do not have permission to perform this action"),
+				className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+				children: [/* @__PURE__ */ E(x, {
+					size: 16,
+					"aria-hidden": "true"
+				}), N("devportal.createWebhook", "Create Webhook")]
+			}),
+			children: [
+				/* @__PURE__ */ E("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+					children: /* @__PURE__ */ D("div", {
+						className: "flex flex-1 items-center gap-4",
+						children: [/* @__PURE__ */ D("div", {
+							className: "relative flex-1 max-w-md",
+							children: [/* @__PURE__ */ E(S, {
+								size: 16,
+								className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+							}), /* @__PURE__ */ E("input", {
+								type: "text",
+								placeholder: "Search by name or URL...",
+								value: F,
+								onChange: (e) => I(e.target.value),
+								className: "w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+							})]
+						}), /* @__PURE__ */ D("select", {
+							value: L,
+							onChange: (e) => R(e.target.value),
+							className: "rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
+							children: [
+								/* @__PURE__ */ E("option", {
+									value: "",
+									children: "All Status"
+								}),
+								/* @__PURE__ */ E("option", {
+									value: "ACTIVE",
+									children: "Active"
+								}),
+								/* @__PURE__ */ E("option", {
+									value: "PAUSED",
+									children: "Paused"
+								}),
+								/* @__PURE__ */ E("option", {
+									value: "FAILED",
+									children: "Failed"
+								}),
+								/* @__PURE__ */ E("option", {
+									value: "DISABLED",
+									children: "Disabled"
+								})
+							]
+						})]
+					})
+				}),
+				/* @__PURE__ */ D("div", {
+					className: "grid grid-cols-2 gap-4 sm:grid-cols-4",
+					children: [
+						/* @__PURE__ */ D("div", {
+							className: "rounded-lg border bg-card p-4",
+							children: [/* @__PURE__ */ D("div", {
+								className: "flex items-center gap-2 text-muted-foreground",
+								children: [/* @__PURE__ */ E(C, { size: 16 }), /* @__PURE__ */ E("span", {
+									className: "text-sm",
+									children: "Total Webhooks"
+								})]
+							}), /* @__PURE__ */ E("p", {
+								className: "mt-1 text-2xl font-semibold",
+								children: $.total
+							})]
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "rounded-lg border bg-card p-4",
+							children: [/* @__PURE__ */ D("div", {
+								className: "flex items-center gap-2 text-status-success-text",
+								children: [/* @__PURE__ */ E(v, { size: 16 }), /* @__PURE__ */ E("span", {
+									className: "text-sm",
+									children: "Active"
+								})]
+							}), /* @__PURE__ */ E("p", {
+								className: "mt-1 text-2xl font-semibold",
+								children: $.active
+							})]
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "rounded-lg border bg-card p-4",
+							children: [/* @__PURE__ */ D("div", {
+								className: "flex items-center gap-2 text-status-warning-text",
+								children: [/* @__PURE__ */ E(b, { size: 16 }), /* @__PURE__ */ E("span", {
+									className: "text-sm",
+									children: "Paused"
+								})]
+							}), /* @__PURE__ */ E("p", {
+								className: "mt-1 text-2xl font-semibold",
+								children: $.paused
+							})]
+						}),
+						/* @__PURE__ */ D("div", {
+							className: "rounded-lg border bg-card p-4",
+							children: [/* @__PURE__ */ D("div", {
+								className: "flex items-center gap-2 text-status-error-text",
+								children: [/* @__PURE__ */ E(w, { size: 16 }), /* @__PURE__ */ E("span", {
+									className: "text-sm",
+									children: "Failed"
+								})]
+							}), /* @__PURE__ */ E("p", {
+								className: "mt-1 text-2xl font-semibold",
+								children: $.failed
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ D("p", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						X.length,
+						" webhook",
+						X.length === 1 ? "" : "s",
+						" found"
+					]
+				}),
+				X.length > 0 ? /* @__PURE__ */ E(o, {
+					data: X,
+					columns: te,
+					keyField: "id",
+					onRowClick: (e) => Y(`/apps/${k}/webhooks/${e.id}`)
+				}) : /* @__PURE__ */ E(n, {
+					icon: /* @__PURE__ */ E(C, { size: 32 }),
+					title: N("devportal.noWebhooksFound", "No webhooks found"),
+					description: F || L ? N("devportal.tryAdjustingFilters", "Try adjusting your filters") : N("devportal.createFirstWebhook", "Create your first webhook to receive real-time event notifications"),
+					action: !F && !L ? /* @__PURE__ */ D("button", {
+						onClick: () => Y(`/apps/${k}/webhooks/new`),
+						className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+						children: [/* @__PURE__ */ E(x, { size: 16 }), N("devportal.createWebhook", "Create Webhook")]
+					}) : void 0
+				})
+			]
+		})
+	});
+};
+function A(e) {
+	let t = new Date(e), n = (/* @__PURE__ */ new Date()).getTime() - t.getTime(), r = Math.floor(n / 6e4), i = Math.floor(r / 60), a = Math.floor(i / 24);
+	return r < 1 ? "Just now" : r < 60 ? `${r}m ago` : i < 24 ? `${i}h ago` : a < 7 ? `${a}d ago` : t.toLocaleDateString();
+}
+//#endregion
+export { k as WebhooksPage };
+
+//# sourceMappingURL=WebhooksPage.js.map

package/dist/devportal/pages/WebhooksPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebhooksPage.js","names":[],"sources":["../../../src/devportal/pages/WebhooksPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n  Plus,\n  Search,\n  Webhook,\n  CheckCircle,\n  XCircle,\n  PauseCircle,\n  AlertTriangle,\n  Loader2,\n  AlertCircle,\n  AppWindow,\n} from \"lucide-react\";\nimport { useParams } from \"react-router-dom\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { DataTable } from \"../components/DataTable\";\nimport { StatusBadge } from \"../components/StatusBadge\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { AppListItem } from \"../components/AppCard\";\nimport { PermissionGuard } from \"../components\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type {\n  Application,\n  Webhook as WebhookType,\n  WebhookStatus,\n} from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport {\n  useGetApplicationsQuery,\n  useGetWebhooksQuery,\n  getErrorMessage,\n  useDevportalPermission,\n  type ApplicationFieldsFragment,\n  type DevportalWebhookFieldsFragment,\n} from \"../hooks\";\n\n/**\n * Map GraphQL webhook to local Webhook type\n */\nfunction mapWebhook(webhook: DevportalWebhookFieldsFragment): WebhookType {\n  return {\n    id: webhook.id,\n    applicationId: webhook.applicationId,\n    name: webhook.name,\n    description: webhook.description ?? undefined,\n    url: webhook.url,\n    secret: webhook.secret ?? undefined,\n    events: webhook.events ?? [],\n    isActive: webhook.isActive,\n    status: webhook.status as WebhookStatus,\n    maxRetries: webhook.maxRetries ?? 3,\n    retryDelay: webhook.retryDelay ?? 60,\n    retryEnabled: webhook.retryEnabled ?? true,\n    lastTriggeredAt: webhook.lastTriggeredAt ?? undefined,\n    lastSuccessAt: webhook.lastSuccessAt ?? undefined,\n    lastFailureAt: webhook.lastFailureAt ?? undefined,\n    lastFailureReason: webhook.lastFailureReason ?? undefined,\n    failureCount: webhook.failureCount ?? 0,\n    successCount: webhook.successCount ?? 0,\n    createdAt: webhook.createdAt,\n    updatedAt: webhook.updatedAt,\n  };\n}\n\n/**\n * Webhooks listing page\n *\n * Displays webhooks for a specific application.\n * Uses GraphQL to fetch real data from the DevPortal backend.\n */\nexport const WebhooksPage: FC = () => {\n  const { appId } = useParams<{ appId: string }>();\n  const { navigate, basePath } = useDevportal();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const createPerm = useDevportalPermission(\n    DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE,\n  );\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [statusFilter, setStatusFilter] = useState<WebhookStatus | \"\">(\"\");\n\n  const {\n    data: appsData,\n    loading: appsLoading,\n    error: appsError,\n    refetch: refetchApps,\n  } = useGetApplicationsQuery({\n    variables: { limit: 100 },\n    skip: !!appId,\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  // Fetch webhooks from GraphQL API (only if we have an applicationId)\n  const { data, loading, error, refetch } = useGetWebhooksQuery({\n    variables: {\n      applicationId: appId || \"\",\n    },\n    skip: !appId,\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const webhooks = data?.webhooks?.map(mapWebhook) ?? [];\n  const applications: Application[] =\n    appsData?.applications?.edges?.map(\n      (edge: { node: ApplicationFieldsFragment }) => edge.node as Application,\n    ) ?? [];\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  // Filter webhooks\n  const filteredWebhooks = webhooks.filter((webhook: WebhookType) => {\n    const matchesSearch =\n      !searchQuery ||\n      webhook.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      webhook.url.toLowerCase().includes(searchQuery.toLowerCase());\n    const matchesStatus = !statusFilter || webhook.status === statusFilter;\n    return matchesSearch && matchesStatus;\n  });\n\n  const getStatusIcon = (status: WebhookStatus) => {\n    switch (status) {\n      case \"ACTIVE\":\n        return <CheckCircle size={16} className=\"text-status-success-text\" />;\n      case \"PAUSED\":\n        return <PauseCircle size={16} className=\"text-status-warning-text\" />;\n      case \"FAILED\":\n        return <XCircle size={16} className=\"text-status-error-text\" />;\n      case \"DISABLED\":\n        return <AlertTriangle size={16} className=\"text-text-tertiary\" />;\n      default:\n        return null;\n    }\n  };\n\n  const calculateSuccessRate = (webhook: WebhookType): number => {\n    const total = webhook.successCount + webhook.failureCount;\n    if (total === 0) return 100;\n    return Math.round((webhook.successCount / total) * 100);\n  };\n\n  // If no applicationId, show prompt to select an application\n  if (!appId) {\n    const filteredApplications = applications.filter((application) => {\n      if (!searchQuery) return true;\n\n      const normalizedQuery = searchQuery.toLowerCase();\n      return (\n        application.name.toLowerCase().includes(normalizedQuery) ||\n        (application.slug ?? \"\").toLowerCase().includes(normalizedQuery)\n      );\n    });\n\n    return (\n      <PermissionGuard permission={DEVPORTAL_PERMISSIONS.WEBHOOK_READ}>\n        <PageLayout\n          title={tr(\"devportal.webhooks\", \"Webhooks\")}\n          description={tr(\n            \"devportal.manageWebhooksApps\",\n            \"Manage webhooks for your applications\",\n          )}\n        >\n          <div className=\"space-y-4\">\n            <div className=\"max-w-md\">\n              <div className=\"relative\">\n                <Search\n                  size={16}\n                  className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\"\n                />\n                <input\n                  type=\"text\"\n                  placeholder=\"Search applications...\"\n                  value={searchQuery}\n                  onChange={(event) => setSearchQuery(event.target.value)}\n                  className=\"w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n                />\n              </div>\n            </div>\n\n            {appsLoading ? (\n              <div className=\"flex items-center justify-center py-12 text-muted-foreground\">\n                <Loader2 className=\"h-8 w-8 animate-spin\" />\n              </div>\n            ) : appsError ? (\n              <div className=\"rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center\">\n                <AlertCircle className=\"mx-auto h-8 w-8 text-destructive\" />\n                <h3 className=\"mt-2 font-medium text-destructive\">\n                  Failed to load applications\n                </h3>\n                <p className=\"mt-1 text-sm text-muted-foreground\">\n                  {getErrorMessage(appsError)}\n                </p>\n                <button\n                  onClick={() => refetchApps()}\n                  className=\"mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n                >\n                  Try Again\n                </button>\n              </div>\n            ) : filteredApplications.length > 0 ? (\n              <div className=\"space-y-2\">\n                {filteredApplications.map((application) => (\n                  <AppListItem\n                    key={application.id}\n                    app={application}\n                    onClick={() =>\n                      handleNavigate(`/apps/${application.id}/webhooks`)\n                    }\n                  />\n                ))}\n              </div>\n            ) : (\n              <EmptyState\n                icon={<AppWindow size={32} />}\n                title=\"No applications available\"\n                description={\n                  searchQuery\n                    ? \"No applications matched your search.\"\n                    : \"Create an application before configuring webhooks.\"\n                }\n                action={\n                  <button\n                    onClick={() => handleNavigate(\"/apps/new\")}\n                    className=\"inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n                  >\n                    <Plus size={16} />\n                    Create Application\n                  </button>\n                }\n              />\n            )}\n          </div>\n        </PageLayout>\n      </PermissionGuard>\n    );\n  }\n\n  // Loading state\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.webhooks\", \"Webhooks\")}\n        description={tr(\n          \"devportal.manageWebhooksApp\",\n          \"Manage webhooks for this application\",\n        )}\n        backLink={`/apps/${appId}`}\n        backLabel={tr(\"devportal.backToApplication\", \"Back to Application\")}\n      >\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"h-8 w-8 animate-spin text-muted-foreground\" />\n          <span className=\"ml-2 text-muted-foreground\">\n            {tr(\"devportal.loadingWebhooks\", \"Loading webhooks...\")}\n          </span>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.webhooks\", \"Webhooks\")}\n        description={tr(\n          \"devportal.manageWebhooksApp\",\n          \"Manage webhooks for this application\",\n        )}\n        backLink={`/apps/${appId}`}\n        backLabel={tr(\"devportal.backToApplication\", \"Back to Application\")}\n      >\n        <div className=\"rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center\">\n          <AlertCircle className=\"mx-auto h-8 w-8 text-destructive\" />\n          <h3 className=\"mt-2 font-medium text-destructive\">\n            {tr(\"devportal.failedToLoadWebhooks\", \"Failed to load webhooks\")}\n          </h3>\n          <p className=\"mt-1 text-sm text-muted-foreground\">\n            {getErrorMessage(error)}\n          </p>\n          <button\n            onClick={() => refetch()}\n            className=\"mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n          >\n            {tr(\"devportal.tryAgain\", \"Try Again\")}\n          </button>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const columns = [\n    {\n      key: \"name\",\n      header: \"Webhook\",\n      render: (webhook: WebhookType) => (\n        <div className=\"flex items-center gap-3\">\n          <div\n            className={cn(\n              \"flex h-10 w-10 items-center justify-center rounded-lg\",\n              webhook.status === \"ACTIVE\"\n                ? \"bg-status-success-bg-subtle text-status-success-text\"\n                : webhook.status === \"FAILED\"\n                  ? \"bg-status-error-bg-subtle text-status-error-text\"\n                  : webhook.status === \"PAUSED\"\n                    ? \"bg-status-warning-bg-subtle text-status-warning-text\"\n                    : \"bg-bg-sunken text-text-tertiary\",\n            )}\n          >\n            <Webhook size={20} />\n          </div>\n          <div>\n            <p className=\"font-medium\">{webhook.name}</p>\n            <p className=\"text-xs text-muted-foreground truncate max-w-xs\">\n              {webhook.url}\n            </p>\n          </div>\n        </div>\n      ),\n    },\n    {\n      key: \"events\",\n      header: \"Events\",\n      render: (webhook: WebhookType) => (\n        <div className=\"flex flex-wrap gap-1\">\n          {webhook.events.slice(0, 2).map((event) => (\n            <span\n              key={event}\n              className=\"inline-flex rounded bg-muted px-1.5 py-0.5 text-xs\"\n            >\n              {event.split(\".\")[0]}\n            </span>\n          ))}\n          {webhook.events.length > 2 && (\n            <span className=\"text-xs text-muted-foreground\">\n              +{webhook.events.length - 2} more\n            </span>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: \"status\",\n      header: \"Status\",\n      render: (webhook: WebhookType) => (\n        <div className=\"flex items-center gap-2\">\n          {getStatusIcon(webhook.status)}\n          <StatusBadge status={webhook.status} type=\"webhook\" />\n        </div>\n      ),\n    },\n    {\n      key: \"successRate\",\n      header: \"Success Rate\",\n      render: (webhook: WebhookType) => {\n        const rate = calculateSuccessRate(webhook);\n        return (\n          <div className=\"w-24\">\n            <div className=\"flex items-center justify-between text-xs mb-1\">\n              <span\n                className={cn(\n                  rate >= 95\n                    ? \"text-status-success-text\"\n                    : rate >= 80\n                      ? \"text-status-warning-text\"\n                      : \"text-status-error-text\",\n                )}\n              >\n                {rate}%\n              </span>\n            </div>\n            <div className=\"h-1.5 rounded-full bg-muted\">\n              <div\n                className={cn(\n                  \"h-full rounded-full transition-all\",\n                  rate >= 95\n                    ? \"bg-status-success-bg-subtle\"\n                    : rate >= 80\n                      ? \"bg-status-warning-bg-subtle\"\n                      : \"bg-status-error-bg-subtle\",\n                )}\n                style={{ width: `${rate}%` }}\n              />\n            </div>\n          </div>\n        );\n      },\n    },\n    {\n      key: \"deliveries\",\n      header: \"Deliveries\",\n      render: (webhook: WebhookType) => (\n        <div className=\"text-sm\">\n          <span className=\"text-status-success-text\">\n            {webhook.successCount.toLocaleString()}\n          </span>\n          <span className=\"text-muted-foreground\"> / </span>\n          <span className=\"text-status-error-text\">\n            {webhook.failureCount.toLocaleString()}\n          </span>\n        </div>\n      ),\n    },\n    {\n      key: \"lastTriggered\",\n      header: \"Last Triggered\",\n      render: (webhook: WebhookType) => (\n        <span className=\"text-sm text-muted-foreground\">\n          {webhook.lastTriggeredAt\n            ? formatRelativeTime(webhook.lastTriggeredAt)\n            : \"Never\"}\n        </span>\n      ),\n    },\n  ];\n\n  // Stats calculation\n  const stats = {\n    total: webhooks.length,\n    active: webhooks.filter((w: WebhookType) => w.status === \"ACTIVE\").length,\n    failed: webhooks.filter((w: WebhookType) => w.status === \"FAILED\").length,\n    paused: webhooks.filter((w: WebhookType) => w.status === \"PAUSED\").length,\n  };\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.WEBHOOK_READ}>\n      <PageLayout\n        title={tr(\"devportal.webhooks\", \"Webhooks\")}\n        description={tr(\n          \"devportal.manageWebhooksApp\",\n          \"Manage webhooks for this application\",\n        )}\n        backLink={`/apps/${appId}`}\n        backLabel={tr(\"devportal.backToApplication\", \"Back to Application\")}\n        actions={\n          <button\n            onClick={() => handleNavigate(`/apps/${appId}/webhooks/new`)}\n            disabled={!createPerm.allowed}\n            aria-disabled={!createPerm.allowed}\n            title={\n              !createPerm.allowed\n                ? tr(\n                    \"devportal.common.noPermission\",\n                    \"You do not have permission to perform this action\",\n                  )\n                : undefined\n            }\n            className=\"inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n          >\n            <Plus size={16} aria-hidden=\"true\" />\n            {tr(\"devportal.createWebhook\", \"Create Webhook\")}\n          </button>\n        }\n      >\n        {/* Filters */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex flex-1 items-center gap-4\">\n            {/* Search */}\n            <div className=\"relative flex-1 max-w-md\">\n              <Search\n                size={16}\n                className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\"\n              />\n              <input\n                type=\"text\"\n                placeholder=\"Search by name or URL...\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className=\"w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n              />\n            </div>\n\n            {/* Status Filter */}\n            <select\n              value={statusFilter}\n              onChange={(e) =>\n                setStatusFilter(e.target.value as WebhookStatus | \"\")\n              }\n              className=\"rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n            >\n              <option value=\"\">All Status</option>\n              <option value=\"ACTIVE\">Active</option>\n              <option value=\"PAUSED\">Paused</option>\n              <option value=\"FAILED\">Failed</option>\n              <option value=\"DISABLED\">Disabled</option>\n            </select>\n          </div>\n        </div>\n\n        {/* Summary Stats */}\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-muted-foreground\">\n              <Webhook size={16} />\n              <span className=\"text-sm\">Total Webhooks</span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.total}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-status-success-text\">\n              <CheckCircle size={16} />\n              <span className=\"text-sm\">Active</span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.active}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-status-warning-text\">\n              <PauseCircle size={16} />\n              <span className=\"text-sm\">Paused</span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.paused}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-status-error-text\">\n              <XCircle size={16} />\n              <span className=\"text-sm\">Failed</span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.failed}</p>\n          </div>\n        </div>\n\n        {/* Results count */}\n        <p className=\"text-sm text-muted-foreground\">\n          {filteredWebhooks.length} webhook\n          {filteredWebhooks.length !== 1 ? \"s\" : \"\"} found\n        </p>\n\n        {/* Webhooks Table */}\n        {filteredWebhooks.length > 0 ? (\n          <DataTable\n            data={filteredWebhooks}\n            columns={columns}\n            keyField=\"id\"\n            onRowClick={(webhook) =>\n              handleNavigate(`/apps/${appId}/webhooks/${webhook.id}`)\n            }\n          />\n        ) : (\n          <EmptyState\n            icon={<Webhook size={32} />}\n            title={tr(\"devportal.noWebhooksFound\", \"No webhooks found\")}\n            description={\n              searchQuery || statusFilter\n                ? tr(\n                    \"devportal.tryAdjustingFilters\",\n                    \"Try adjusting your filters\",\n                  )\n                : tr(\n                    \"devportal.createFirstWebhook\",\n                    \"Create your first webhook to receive real-time event notifications\",\n                  )\n            }\n            action={\n              !searchQuery && !statusFilter ? (\n                <button\n                  onClick={() => handleNavigate(`/apps/${appId}/webhooks/new`)}\n                  className=\"inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n                >\n                  <Plus size={16} />\n                  {tr(\"devportal.createWebhook\", \"Create Webhook\")}\n                </button>\n              ) : undefined\n            }\n          />\n        )}\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n\nfunction formatRelativeTime(dateString: string): string {\n  const date = new Date(dateString);\n  const now = new Date();\n  const diffMs = now.getTime() - date.getTime();\n  const diffMins = Math.floor(diffMs / 60000);\n  const diffHours = Math.floor(diffMins / 60);\n  const diffDays = Math.floor(diffHours / 24);\n\n  if (diffMins < 1) return \"Just now\";\n  if (diffMins < 60) return `${diffMins}m ago`;\n  if (diffHours < 24) return `${diffHours}h ago`;\n  if (diffDays < 7) return `${diffDays}d ago`;\n  return date.toLocaleDateString();\n}\n"],"mappings":"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"}

package/dist/devportal/providers/DevportalProvider.d.ts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren } from 'react';
+import { DevportalRootProps } from '../types';
+
+/**
+ * Hook to access Developer Portal context
+ */
+export declare const useDevportal: () => DevportalRootProps;
+/**
+ * Provider component for Developer Portal microfrontend
+ * Sets up routing, context, and React Query client
+ */
+export declare const DevportalProvider: FC<PropsWithChildren<DevportalRootProps>>;
+//# sourceMappingURL=DevportalProvider.d.ts.map

package/dist/devportal/providers/DevportalProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevportalProvider.d.ts","sourceRoot":"","sources":["../../../src/devportal/providers/DevportalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AASnD;;GAEG;AACH,eAAO,MAAM,YAAY,0BAMxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAuEvE,CAAC"}

package/dist/devportal/providers/DevportalProvider.js

@@ -0,0 +1,44 @@
+import { createContext as e, useContext as t, useMemo as n } from "react";
+import { BrowserRouter as r } from "react-router-dom";
+import { QueryClient as i, QueryClientProvider as a } from "@tanstack/react-query";
+import { PermissionProvider as o } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/devportal/providers/DevportalProvider.tsx
+var c = e(null), l = () => {
+	let e = t(c);
+	if (!e) throw Error("useDevportal must be used within DevportalProvider");
+	return e;
+}, u = ({ children: e, basePath: t, navigate: l, currentUser: u, tenantId: d, workspaceId: f, apiGatewayUrl: p, authToken: m, registerNavItems: h, registerFooterItems: g, onApplicationSelect: _, onOrganizationSelect: v }) => {
+	let y = {
+		basePath: t,
+		navigate: l,
+		currentUser: u,
+		tenantId: d,
+		workspaceId: f,
+		apiGatewayUrl: p,
+		authToken: m,
+		registerNavItems: h,
+		registerFooterItems: g,
+		onApplicationSelect: _,
+		onOrganizationSelect: v
+	}, b = n(() => new i({ defaultOptions: { queries: {
+		retry: 1,
+		refetchOnWindowFocus: !1,
+		staleTime: 300 * 1e3
+	} } }), []), x = !!t, S = /* @__PURE__ */ s(a, {
+		client: b,
+		children: /* @__PURE__ */ s(c.Provider, {
+			value: y,
+			children: x ? /* @__PURE__ */ s(o, {
+				scopeId: d ?? null,
+				gateway: "global",
+				children: e
+			}) : e
+		})
+	});
+	return x ? S : /* @__PURE__ */ s(r, { children: S });
+};
+//#endregion
+export { u as DevportalProvider, l as useDevportal };
+
+//# sourceMappingURL=DevportalProvider.js.map

package/dist/devportal/providers/DevportalProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevportalProvider.js","names":[],"sources":["../../../src/devportal/providers/DevportalProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { PermissionProvider } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { DevportalRootProps } from \"../types\";\n\n/**\n * Context value for Developer Portal microfrontend\n */\ntype DevportalContextValue = DevportalRootProps;\n\nconst DevportalContext = createContext<DevportalContextValue | null>(null);\n\n/**\n * Hook to access Developer Portal context\n */\nexport const useDevportal = () => {\n  const context = useContext(DevportalContext);\n  if (!context) {\n    throw new Error(\"useDevportal must be used within DevportalProvider\");\n  }\n  return context;\n};\n\n/**\n * Provider component for Developer Portal microfrontend\n * Sets up routing, context, and React Query client\n */\nexport const DevportalProvider: FC<PropsWithChildren<DevportalRootProps>> = ({\n  children,\n  basePath,\n  navigate,\n  currentUser,\n  tenantId,\n  workspaceId,\n  apiGatewayUrl,\n  authToken,\n  registerNavItems,\n  registerFooterItems,\n  onApplicationSelect,\n  onOrganizationSelect,\n}) => {\n  const contextValue: DevportalContextValue = {\n    basePath,\n    navigate,\n    currentUser,\n    tenantId,\n    workspaceId,\n    apiGatewayUrl,\n    authToken,\n    registerNavItems,\n    registerFooterItems,\n    onApplicationSelect,\n    onOrganizationSelect,\n  };\n\n  // Create QueryClient instance (memoized to avoid recreation on re-renders)\n  const queryClient = useMemo(\n    () =>\n      new QueryClient({\n        defaultOptions: {\n          queries: {\n            retry: 1,\n            refetchOnWindowFocus: false,\n            staleTime: 5 * 60 * 1000, // 5 minutes\n          },\n        },\n      }),\n    [],\n  );\n\n  // PermissionProvider requires the shell's AuthProvider — only mount it in integrated mode.\n  // In standalone/dev mode (MemoryRouter path), there's no AuthProvider, so we skip it\n  // and pages will use a fallback that allows access (dev-only behaviour).\n  const isIntegrated = !!basePath;\n\n  // Wrap content with QueryClientProvider\n  const content = (\n    <QueryClientProvider client={queryClient}>\n      <DevportalContext.Provider value={contextValue}>\n        {isIntegrated ? (\n          <PermissionProvider scopeId={tenantId ?? null} gateway=\"global\">\n            {children}\n          </PermissionProvider>\n        ) : (\n          children\n        )}\n      </DevportalContext.Provider>\n    </QueryClientProvider>\n  );\n\n  // When integrated into a shell (basePath provided), the shell already has a router\n  // so we don't create another one. When standalone (no basePath), use BrowserRouter.\n  if (isIntegrated) {\n    return content;\n  }\n\n  // Standalone mode: create BrowserRouter for independent operation\n  return <BrowserRouter>{content}</BrowserRouter>;\n};\n"],"mappings":";;;;;;AAYA,IAAM,IAAmB,EAA4C,KAAK,EAK7D,UAAqB;CAChC,IAAM,IAAU,EAAW,EAAiB;AAC5C,KAAI,CAAC,EACH,OAAU,MAAM,qDAAqD;AAEvE,QAAO;GAOI,KAAgE,EAC3E,aACA,aACA,aACA,gBACA,aACA,gBACA,kBACA,cACA,qBACA,wBACA,wBACA,8BACI;CACJ,IAAM,IAAsC;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,EAGK,IAAc,QAEhB,IAAI,EAAY,EACd,gBAAgB,EACd,SAAS;EACP,OAAO;EACP,sBAAsB;EACtB,WAAW,MAAS;EACrB,EACF,EACF,CAAC,EACJ,EAAE,CACH,EAKK,IAAe,CAAC,CAAC,GAGjB,IACJ,kBAAC,GAAD;EAAqB,QAAQ;YAC3B,kBAAC,EAAiB,UAAlB;GAA2B,OAAO;aAC/B,IACC,kBAAC,GAAD;IAAoB,SAAS,KAAY;IAAM,SAAQ;IACpD;IACkB,CAAA,GAErB;GAEwB,CAAA;EACR,CAAA;AAUxB,QALI,IACK,IAIF,kBAAC,GAAD,EAAA,UAAgB,GAAwB,CAAA"}

package/dist/devportal/store/devportalStore.d.ts

@@ -0,0 +1,60 @@
+import { Application, DeveloperOrganization, OAuthClient, ApiKey, Webhook, ApplicationFilter, AppUserDelegation, AuthApp, AuthApiKey } from '../types';
+
+/**
+ * Developer Portal store state
+ */
+interface DevportalState {
+    selectedOrganization: DeveloperOrganization | null;
+    selectedApplication: Application | null;
+    selectedOAuthClient: OAuthClient | null;
+    selectedApiKey: ApiKey | null;
+    selectedWebhook: Webhook | null;
+    organizations: DeveloperOrganization[];
+    applications: Application[];
+    authApps: AuthApp[];
+    currentAuthApp: AuthApp | null;
+    authApiKeys: AuthApiKey[];
+    delegations: AppUserDelegation[];
+    grantedDelegations: AppUserDelegation[];
+    applicationFilter: ApplicationFilter;
+    isCreatingApp: boolean;
+    isCreatingOrg: boolean;
+    isCreatingOAuthClient: boolean;
+    isCreatingApiKey: boolean;
+    isCreatingWebhook: boolean;
+    sidebarCollapsed: boolean;
+    setSelectedOrganization: (org: DeveloperOrganization | null) => void;
+    setSelectedApplication: (app: Application | null) => void;
+    setSelectedOAuthClient: (client: OAuthClient | null) => void;
+    setSelectedApiKey: (key: ApiKey | null) => void;
+    setSelectedWebhook: (webhook: Webhook | null) => void;
+    setOrganizations: (orgs: DeveloperOrganization[]) => void;
+    setApplications: (apps: Application[]) => void;
+    setApplicationFilter: (filter: Partial<ApplicationFilter>) => void;
+    resetApplicationFilter: () => void;
+    setIsCreatingApp: (value: boolean) => void;
+    setIsCreatingOrg: (value: boolean) => void;
+    setIsCreatingOAuthClient: (value: boolean) => void;
+    setIsCreatingApiKey: (value: boolean) => void;
+    setIsCreatingWebhook: (value: boolean) => void;
+    setSidebarCollapsed: (collapsed: boolean) => void;
+    toggleSidebar: () => void;
+    setAuthApps: (apps: AuthApp[]) => void;
+    setCurrentAuthApp: (app: AuthApp | null) => void;
+    addAuthApp: (app: AuthApp) => void;
+    updateAuthApp: (app: AuthApp) => void;
+    removeAuthApp: (appId: string) => void;
+    setAuthApiKeys: (keys: AuthApiKey[]) => void;
+    removeAuthApiKey: (keyId: string) => void;
+    setDelegations: (delegations: AppUserDelegation[]) => void;
+    setGrantedDelegations: (delegations: AppUserDelegation[]) => void;
+    addDelegation: (delegation: AppUserDelegation) => void;
+    removeDelegation: (delegationId: string) => void;
+    reset: () => void;
+}
+/**
+ * Developer Portal Zustand store
+ */
+export declare const useDevportalStore: import('zustand').UseBoundStore<import('zustand').StoreApi<DevportalState>>;
+export {};
+//# sourceMappingURL=devportalStore.d.ts.map