@burdenoff/microfe-devportal 2026.720.2 → 2026.720.4

package/dist/devportal/pages/ApplicationsPage.js

@@ -1,27 +1,46 @@
 import { useDevportal as e } from "../providers/DevportalProvider.js";
 import { EmptyState as t } from "../components/EmptyState.js";
-import { useDeactivateAppMutation as n, useDeleteApplicationMutation as r, useGetApplicationsQuery as ee } from "../../generated/global-operations.js";
-import { getErrorMessage as te } from "../hooks/useGraphQL.js";
-import { PageLayout as i } from "../components/PageLayout.js";
-import { APP_STATUS_COLORS as ne, APP_TYPE_LABELS as re } from "../utils/constants.js";
-import { SelectionCheckbox as ie } from "../components/SelectionCheckbox.js";
-import { AppCard as ae, AppListItem as oe } from "../components/AppCard.js";
-import { ConfirmDialog as a } from "../components/ConfirmDialog.js";
-import { PermissionGuard as o } from "../components/PermissionGuard.js";
+import { useDeactivateApplicationMutation as n, useGetApplicationsQuery as r } from "../../generated/global-operations.js";
+import { getErrorMessage as i } from "../hooks/useGraphQL.js";
+import { PageLayout as a } from "../components/PageLayout.js";
+import { APP_STATUS_COLORS as o, APP_TYPE_LABELS as s } from "../utils/constants.js";
+import { SelectionCheckbox as c } from "../components/SelectionCheckbox.js";
+import { AppCard as l } from "../components/AppCard.js";
+import { ConfirmDialog as ee } from "../components/ConfirmDialog.js";
+import { PermissionGuard as te } from "../components/PermissionGuard.js";
 import "../components/index.js";
-import { useDevportalPermission as s } from "../hooks/usePermission.js";
+import { useDevportalPermission as u } from "../hooks/usePermission.js";
 import "../hooks/index.js";
-import { DEVPORTAL_PERMISSIONS as c } from "../constants/permissions.js";
-import { useMemo as l, useState as u } from "react";
-import { useI18n as se } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as d, AppWindow as f, Archive as p, Grid as m, List as h, Loader2 as ce, Plus as g, Search as le, Trash2 as ue } from "lucide-react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { EmphasisPanel as de, GlassCard as y } from "@burdenoff/fe-libs/ui";
+import { DEVPORTAL_PERMISSIONS as d } from "../constants/permissions.js";
+import { useMemo as f, useState as p } from "react";
+import { useI18n as ne } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as re, AppWindow as m, Archive as ie, Grid as ae, List as h, Loader2 as g, Plus as _, Search as oe } from "lucide-react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { EmphasisPanel as se, GlassCard as b } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/pages/ApplicationsPage.tsx
-function b(e, t, n) {
+function ce(e, t, n) {
 	return `${e} ${t} application${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`;
 }
-function fe(e) {
+function le({ status: e }) {
+	return /* @__PURE__ */ v("span", {
+		className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${{
+			ACTIVE: "bg-status-success-bg-subtle text-status-success-text",
+			PUBLISHED: "bg-status-success-bg-subtle text-status-success-text",
+			DRAFT: "bg-bg-sunken text-text-secondary",
+			SUBMITTED: "bg-status-warning-bg-subtle text-status-warning-text",
+			IN_REVIEW: "bg-status-warning-bg-subtle text-status-warning-text",
+			APPROVED: "bg-status-success-bg-subtle text-status-success-text",
+			UNLISTED: "bg-status-warning-bg-subtle text-status-warning-text",
+			REJECTED: "bg-status-error-bg-subtle text-status-error-text",
+			SUSPENDED: "bg-status-error-bg-subtle text-status-error-text",
+			INACTIVE: "bg-bg-sunken text-text-muted",
+			REVOKED: "bg-status-error-bg-subtle text-status-error-text",
+			DEPRECATED: "bg-bg-sunken text-text-muted"
+		}[e] ?? "bg-bg-sunken text-text-secondary"}`,
+		children: e === "INACTIVE" || e === "REVOKED" ? "Deactivated" : e.replace(/_/g, " ")
+	});
+}
+function ue(e) {
 	let t = Array.isArray(e.screenshots) ? e.screenshots.length > 0 ? e.screenshots : void 0 : e.screenshots, n = e.pricingDetails && typeof e.pricingDetails == "object" ? e.pricingDetails : void 0;
 	return {
 		id: e.id,
@@ -68,345 +87,393 @@ function fe(e) {
 	};
 }
 var x = () => {
-	let { navigate: x, basePath: S, activeOrgId: C } = e(), { t: pe } = se(), w = (e, t) => {
-		let n = pe(e);
+	let { navigate: x, basePath: S, activeOrgId: C } = e(), { t: w } = ne(), T = (e, t) => {
+		let n = w(e);
 		return n === e ? t : n;
-	}, T = s(c.APP_CREATE), E = s(c.APP_DELETE), D = s(c.APP_UPDATE), [O, k] = u("grid"), [A, j] = u(""), [M, N] = u(""), [P, F] = u(""), [I, L] = u(/* @__PURE__ */ new Set()), [R, z] = u(null), [B, V] = u(null), { data: H, loading: me, error: U, refetch: W } = ee({
+	}, E = u(d.APP_CREATE), D = u(d.APP_UPDATE), [O, k] = p("list"), [A, de] = p(""), [j, M] = p(""), [N, fe] = p(""), [P, F] = p(/* @__PURE__ */ new Set()), [I, L] = p(null), [R, z] = p(null), { data: B, loading: pe, error: V, refetch: H } = r({
 		variables: {
 			limit: 50,
 			offset: 0,
-			status: M || void 0,
+			status: j || void 0,
 			organizationId: C ?? void 0
 		},
 		fetchPolicy: "cache-and-network"
-	}), G = l(() => H?.applications?.edges?.map((e) => fe(e.node)) ?? [], [H?.applications?.edges]), [he] = r(), [ge] = n(), K = (e) => {
+	}), U = f(() => B?.applications?.edges?.map((e) => ue(e.node)) ?? [], [B?.applications?.edges]), [me] = n(), W = (e) => {
 		x?.(`${S}${e}`);
-	}, q = G.filter((e) => {
-		let t = !C || e.developerOrganizationId === C, n = !A || e.name.toLowerCase().includes(A.toLowerCase()) || e.shortDescription?.toLowerCase().includes(A.toLowerCase()), r = !P || e.appType === P;
+	}, G = U.filter((e) => {
+		let t = !C || e.developerOrganizationId === C, n = !A || e.name.toLowerCase().includes(A.toLowerCase()) || e.shortDescription?.toLowerCase().includes(A.toLowerCase()), r = !N || e.appType === N;
 		return t && n && r;
-	}), J = l(() => ({
-		total: H?.applications?.totalCount ?? q.length,
-		active: q.filter((e) => e.status === "ACTIVE").length,
-		draft: q.filter((e) => e.status === "DRAFT").length,
-		published: q.filter((e) => e.status === "PUBLISHED").length
-	}), [q, H?.applications?.totalCount]), Y = l(() => G.filter((e) => I.has(e.id)), [G, I]), X = l(() => Y.filter((e) => e.status !== "INACTIVE" && e.status !== "REVOKED"), [Y]), Z = q.length > 0 && q.every((e) => I.has(e.id)), _e = q.some((e) => I.has(e.id)) && !Z, Q = (e, t) => {
-		L((n) => {
+	}), K = f(() => ({
+		total: B?.applications?.totalCount ?? G.length,
+		active: G.filter((e) => e.status === "ACTIVE").length,
+		draft: G.filter((e) => e.status === "DRAFT").length,
+		published: G.filter((e) => e.status === "PUBLISHED").length
+	}), [G, B?.applications?.totalCount]), q = f(() => U.filter((e) => P.has(e.id)), [U, P]), J = f(() => q.filter((e) => e.status !== "INACTIVE" && e.status !== "REVOKED"), [q]), Y = G.length > 0 && G.every((e) => P.has(e.id)), X = G.some((e) => P.has(e.id)) && !Y, Z = (e, t) => {
+		F((n) => {
 			let r = new Set(n);
 			return t ? r.add(e) : r.delete(e), r;
 		});
-	}, ve = (e) => {
-		L((t) => {
+	}, Q = (e) => {
+		F((t) => {
 			let n = new Set(t);
-			return q.forEach((t) => {
+			return G.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
-	}, $ = () => L(/* @__PURE__ */ new Set());
-	return me && !H ? /* @__PURE__ */ _(i, {
-		title: w("devportal.myApplications", "My Applications"),
-		description: w("devportal.manageYourApps", "Manage your developer applications"),
-		children: /* @__PURE__ */ v("div", {
+	}, $ = () => F(/* @__PURE__ */ new Set());
+	return pe && !B ? /* @__PURE__ */ v(a, {
+		title: T("devportal.myApplications", "My Applications"),
+		description: T("devportal.manageYourApps", "Manage your developer applications"),
+		children: /* @__PURE__ */ y("div", {
 			className: "flex items-center justify-center py-12",
-			children: [/* @__PURE__ */ _(ce, { className: "h-8 w-8 animate-spin text-text-secondary" }), /* @__PURE__ */ _("span", {
+			children: [/* @__PURE__ */ v(g, { className: "h-8 w-8 animate-spin text-text-secondary" }), /* @__PURE__ */ v("span", {
 				className: "ml-2 text-text-secondary",
-				children: w("devportal.loadingApplications", "Loading applications...")
+				children: T("devportal.loadingApplications", "Loading applications...")
 			})]
 		})
-	}) : U ? /* @__PURE__ */ _(i, {
-		title: w("devportal.myApplications", "My Applications"),
-		description: w("devportal.manageYourApps", "Manage your developer applications"),
-		children: /* @__PURE__ */ v("div", {
+	}) : V ? /* @__PURE__ */ v(a, {
+		title: T("devportal.myApplications", "My Applications"),
+		description: T("devportal.manageYourApps", "Manage your developer applications"),
+		children: /* @__PURE__ */ y("div", {
 			className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center",
 			children: [
-				/* @__PURE__ */ _(d, { className: "mx-auto h-8 w-8 text-status-error-text" }),
-				/* @__PURE__ */ _("h3", {
+				/* @__PURE__ */ v(re, { className: "mx-auto h-8 w-8 text-status-error-text" }),
+				/* @__PURE__ */ v("h3", {
 					className: "mt-2 font-medium text-status-error-text",
-					children: w("devportal.failedToLoadApplications", "Failed to load applications")
+					children: T("devportal.failedToLoadApplications", "Failed to load applications")
 				}),
-				/* @__PURE__ */ _("p", {
+				/* @__PURE__ */ v("p", {
 					className: "mt-1 text-sm text-text-secondary",
-					children: te(U)
+					children: i(V)
 				}),
-				/* @__PURE__ */ _("button", {
-					onClick: () => W(),
+				/* @__PURE__ */ v("button", {
+					onClick: () => H(),
 					className: "mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
-					children: w("devportal.tryAgain", "Try Again")
+					children: T("devportal.tryAgain", "Try Again")
 				})
 			]
 		})
-	}) : /* @__PURE__ */ _(o, {
+	}) : /* @__PURE__ */ v(te, {
 		authOnly: !0,
-		children: /* @__PURE__ */ v(i, {
-			title: w("devportal.myApplications", "My Applications"),
-			description: w("devportal.manageYourApps", "Manage your developer applications"),
-			purpose: w("devportal.applicationsPurpose", "Applications are the integrations you build on the platform — OAuth apps, store listings, and API consumers. Create one here to get client credentials, request scopes, and ship to the marketplace."),
-			actions: /* @__PURE__ */ v("button", {
-				onClick: () => K("/apps/new"),
-				disabled: !T.allowed,
-				"aria-disabled": !T.allowed,
-				title: T.allowed ? void 0 : w("devportal.common.noPermission", "You do not have permission to perform this action"),
+		children: /* @__PURE__ */ y(a, {
+			title: T("devportal.myApplications", "My Applications"),
+			description: T("devportal.manageYourApps", "Manage your developer applications"),
+			purpose: T("devportal.applicationsPurpose", "Applications are the integrations you build on the platform — OAuth apps, store listings, and API consumers. Create one here to get client credentials, request scopes, and ship to the marketplace."),
+			actions: /* @__PURE__ */ y("button", {
+				onClick: () => W("/apps/new"),
+				disabled: !E.allowed,
+				"aria-disabled": !E.allowed,
+				title: E.allowed ? void 0 : T("devportal.common.noPermission", "You do not have permission to perform this action"),
 				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/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__ */ _(g, {
+				children: [/* @__PURE__ */ v(_, {
 					size: 16,
 					"aria-hidden": "true"
-				}), w("devportal.createApp", "Create App")]
+				}), T("devportal.createApp", "Create App")]
 			}),
 			children: [
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ y("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ v("div", {
+					children: [/* @__PURE__ */ y("div", {
 						className: "flex flex-1 items-center gap-4",
 						children: [
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ y("div", {
 								className: "relative flex-1 max-w-md",
-								children: [/* @__PURE__ */ _(le, {
+								children: [/* @__PURE__ */ v(oe, {
 									size: 16,
 									className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
-								}), /* @__PURE__ */ _("input", {
+								}), /* @__PURE__ */ v("input", {
 									type: "text",
-									placeholder: w("devportal.searchApplications", "Search applications..."),
+									placeholder: T("devportal.searchApplications", "Search applications..."),
 									value: A,
-									onChange: (e) => j(e.target.value),
+									onChange: (e) => de(e.target.value),
 									className: "w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 								})]
 							}),
-							/* @__PURE__ */ v("select", {
-								value: M,
-								onChange: (e) => N(e.target.value),
+							/* @__PURE__ */ y("select", {
+								value: j,
+								onChange: (e) => M(e.target.value),
 								className: "rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
-								children: [/* @__PURE__ */ _("option", {
+								children: [/* @__PURE__ */ v("option", {
 									value: "",
-									children: w("devportal.allStatus", "All Status")
-								}), Object.keys(ne).map((e) => /* @__PURE__ */ _("option", {
+									children: T("devportal.allStatus", "All Status")
+								}), Object.keys(o).map((e) => /* @__PURE__ */ v("option", {
 									value: e,
 									children: e.replace(/_/g, " ")
 								}, e))]
 							}),
-							/* @__PURE__ */ v("select", {
-								value: P,
-								onChange: (e) => F(e.target.value),
+							/* @__PURE__ */ y("select", {
+								value: N,
+								onChange: (e) => fe(e.target.value),
 								className: "rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
-								children: [/* @__PURE__ */ _("option", {
+								children: [/* @__PURE__ */ v("option", {
 									value: "",
-									children: w("devportal.allTypes", "All Types")
-								}), Object.entries(re).map(([e, t]) => /* @__PURE__ */ _("option", {
+									children: T("devportal.allTypes", "All Types")
+								}), Object.entries(s).map(([e, t]) => /* @__PURE__ */ v("option", {
 									value: e,
 									children: t
 								}, e))]
 							})
 						]
-					}), /* @__PURE__ */ v("div", {
+					}), /* @__PURE__ */ y("div", {
 						className: "flex items-center gap-1 rounded-md border p-1",
-						children: [/* @__PURE__ */ _("button", {
+						children: [/* @__PURE__ */ v("button", {
 							onClick: () => k("grid"),
 							className: `rounded p-1.5 ${O === "grid" ? "bg-bg-sunken" : "hover:bg-bg-sunken/50"}`,
 							title: "Grid view",
-							children: /* @__PURE__ */ _(m, { size: 16 })
-						}), /* @__PURE__ */ _("button", {
+							children: /* @__PURE__ */ v(ae, { size: 16 })
+						}), /* @__PURE__ */ v("button", {
 							onClick: () => k("list"),
 							className: `rounded p-1.5 ${O === "list" ? "bg-bg-sunken" : "hover:bg-bg-sunken/50"}`,
-							title: "List view",
-							children: /* @__PURE__ */ _(h, { size: 16 })
+							title: "Table view",
+							children: /* @__PURE__ */ v(h, { size: 16 })
 						})]
 					})]
 				}),
-				/* @__PURE__ */ _(de, {
+				/* @__PURE__ */ v(se, {
 					className: "mt-4",
-					children: /* @__PURE__ */ v("div", {
+					children: /* @__PURE__ */ y("div", {
 						className: "grid grid-cols-2 gap-4 sm:grid-cols-4",
 						children: [
-							/* @__PURE__ */ v(y, {
+							/* @__PURE__ */ y(b, {
 								treatment: "metric",
 								className: "p-4",
-								children: [/* @__PURE__ */ _("p", {
+								children: [/* @__PURE__ */ v("p", {
 									className: "text-sm text-text-secondary",
-									children: w("devportal.totalApps", "Total Apps")
-								}), /* @__PURE__ */ _("p", {
+									children: T("devportal.totalApps", "Total Apps")
+								}), /* @__PURE__ */ v("p", {
 									className: "mt-1 text-2xl font-semibold tabular-nums",
-									children: J.total
+									children: K.total
 								})]
 							}),
-							/* @__PURE__ */ v(y, {
+							/* @__PURE__ */ y(b, {
 								treatment: "metric",
 								className: "p-4",
-								children: [/* @__PURE__ */ _("p", {
+								children: [/* @__PURE__ */ v("p", {
 									className: "text-sm text-status-success-text",
-									children: w("devportal.active", "Active")
-								}), /* @__PURE__ */ _("p", {
+									children: T("devportal.active", "Active")
+								}), /* @__PURE__ */ v("p", {
 									className: "mt-1 text-2xl font-semibold tabular-nums",
-									children: J.active
+									children: K.active
 								})]
 							}),
-							/* @__PURE__ */ v(y, {
+							/* @__PURE__ */ y(b, {
 								treatment: "metric",
 								className: "p-4",
-								children: [/* @__PURE__ */ _("p", {
+								children: [/* @__PURE__ */ v("p", {
 									className: "text-sm text-text-secondary",
-									children: w("devportal.published", "Published")
-								}), /* @__PURE__ */ _("p", {
+									children: T("devportal.published", "Published")
+								}), /* @__PURE__ */ v("p", {
 									className: "mt-1 text-2xl font-semibold tabular-nums",
-									children: J.published
+									children: K.published
 								})]
 							}),
-							/* @__PURE__ */ v(y, {
+							/* @__PURE__ */ y(b, {
 								treatment: "metric",
 								className: "p-4",
-								children: [/* @__PURE__ */ _("p", {
+								children: [/* @__PURE__ */ v("p", {
 									className: "text-sm text-text-secondary",
-									children: w("devportal.draft", "Draft")
-								}), /* @__PURE__ */ _("p", {
+									children: T("devportal.draft", "Draft")
+								}), /* @__PURE__ */ v("p", {
 									className: "mt-1 text-2xl font-semibold tabular-nums",
-									children: J.draft
+									children: K.draft
 								})]
 							})
 						]
 					})
 				}),
-				B && /* @__PURE__ */ _("div", {
-					className: `rounded-lg border px-4 py-3 text-sm ${B.type === "success" ? "border-border-subtle bg-status-success-bg-subtle text-status-success-text" : "border-status-error-border/40 bg-status-error-bg/10 text-status-error-text"}`,
-					children: /* @__PURE__ */ v("div", {
+				R && /* @__PURE__ */ v("div", {
+					className: `rounded-lg border px-4 py-3 text-sm ${R.type === "success" ? "border-border-subtle bg-status-success-bg-subtle text-status-success-text" : "border-status-error-border/40 bg-status-error-bg/10 text-status-error-text"}`,
+					children: /* @__PURE__ */ y("div", {
 						className: "flex items-center justify-between gap-3",
-						children: [/* @__PURE__ */ _("span", { children: B.message }), /* @__PURE__ */ _("button", {
-							onClick: () => V(null),
+						children: [/* @__PURE__ */ v("span", { children: R.message }), /* @__PURE__ */ v("button", {
+							onClick: () => z(null),
 							className: "text-xs font-medium underline underline-offset-2",
 							children: "Dismiss"
 						})]
 					})
 				}),
-				q.length > 0 && /* @__PURE__ */ _("div", {
+				G.length > 0 && /* @__PURE__ */ v("div", {
 					className: "rounded-card border border-border-seam bg-bg-surface p-4 shadow-[var(--shadow-pop)]",
-					children: /* @__PURE__ */ v("div", {
+					children: /* @__PURE__ */ y("div", {
 						className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
-						children: [/* @__PURE__ */ v("div", {
+						children: [/* @__PURE__ */ y("div", {
 							className: "flex flex-wrap items-center gap-3",
-							children: [/* @__PURE__ */ v("div", {
+							children: [/* @__PURE__ */ y("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ _(ie, {
-									checked: Z,
-									indeterminate: _e,
-									onChange: ve,
+								children: [/* @__PURE__ */ v(c, {
+									checked: Y,
+									indeterminate: X,
+									onChange: Q,
 									ariaLabel: "Select all visible applications"
-								}), /* @__PURE__ */ _("span", {
+								}), /* @__PURE__ */ v("span", {
 									className: "text-sm font-medium",
 									children: "Select all visible"
 								})]
-							}), I.size > 0 && /* @__PURE__ */ _("button", {
+							}), P.size > 0 && /* @__PURE__ */ v("button", {
 								onClick: $,
 								className: "text-sm text-text-secondary hover:text-text-primary",
 								children: "Clear selection"
 							})]
-						}), /* @__PURE__ */ v("div", {
+						}), /* @__PURE__ */ y("div", {
 							className: "flex flex-wrap items-center gap-2",
-							children: [
-								/* @__PURE__ */ v("span", {
-									className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
-									children: [I.size, " selected"]
-								}),
-								/* @__PURE__ */ v("button", {
-									onClick: () => z("deactivate"),
-									disabled: X.length === 0 || !D.allowed,
-									"aria-disabled": X.length === 0 || !D.allowed,
-									title: D.allowed ? void 0 : w("devportal.common.noPermission", "You do not have permission to perform this action"),
-									className: "inline-flex items-center gap-2 rounded-md border border-status-warning-bg px-3 py-2 text-sm font-medium text-status-warning-text transition-colors hover:bg-status-warning-bg-subtle disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
-									children: [
-										/* @__PURE__ */ _(p, {
-											size: 16,
-											"aria-hidden": "true"
-										}),
-										w("devportal.deactivateSelected", "Deactivate Selected"),
-										X.length > 0 ? ` (${X.length})` : ""
-									]
-								}),
-								/* @__PURE__ */ v("button", {
-									onClick: () => z("delete"),
-									disabled: Y.length === 0 || !E.allowed,
-									"aria-disabled": Y.length === 0 || !E.allowed,
-									title: E.allowed ? void 0 : w("devportal.common.noPermission", "You do not have permission to perform this action"),
-									className: "inline-flex items-center gap-2 rounded-md border border-status-error-bg px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
-									children: [
-										/* @__PURE__ */ _(ue, {
-											size: 16,
-											"aria-hidden": "true"
-										}),
-										w("devportal.deleteSelected", "Delete Selected"),
-										Y.length > 0 ? ` (${Y.length})` : ""
-									]
-								})
-							]
+							children: [/* @__PURE__ */ y("span", {
+								className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
+								children: [P.size, " selected"]
+							}), /* @__PURE__ */ y("button", {
+								onClick: () => L("deactivate"),
+								disabled: J.length === 0 || !D.allowed,
+								"aria-disabled": J.length === 0 || !D.allowed,
+								title: D.allowed ? void 0 : T("devportal.common.noPermission", "You do not have permission to perform this action"),
+								className: "inline-flex items-center gap-2 rounded-md border border-status-warning-bg px-3 py-2 text-sm font-medium text-status-warning-text transition-colors hover:bg-status-warning-bg-subtle disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+								children: [
+									/* @__PURE__ */ v(ie, {
+										size: 16,
+										"aria-hidden": "true"
+									}),
+									T("devportal.deactivateSelected", "Deactivate Selected"),
+									J.length > 0 ? ` (${J.length})` : ""
+								]
+							})]
 						})]
 					})
 				}),
-				/* @__PURE__ */ v("p", {
+				/* @__PURE__ */ y("p", {
 					className: "text-sm text-text-secondary",
 					children: [
-						q.length,
+						G.length,
 						" application",
-						q.length === 1 ? "" : "s",
+						G.length === 1 ? "" : "s",
 						" found"
 					]
 				}),
-				q.length > 0 ? O === "grid" ? /* @__PURE__ */ _("div", {
+				G.length > 0 ? O === "grid" ? /* @__PURE__ */ v("div", {
 					className: "grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-					children: q.map((e) => /* @__PURE__ */ _(ae, {
-						app: e,
-						selected: I.has(e.id),
-						onToggleSelect: (t) => Q(e.id, t)
-					}, e.id))
-				}) : /* @__PURE__ */ _("div", {
-					className: "space-y-2",
-					children: q.map((e) => /* @__PURE__ */ _(oe, {
+					children: G.map((e) => /* @__PURE__ */ v(l, {
 						app: e,
-						selected: I.has(e.id),
-						onToggleSelect: (t) => Q(e.id, t)
+						selected: P.has(e.id),
+						onToggleSelect: (t) => Z(e.id, t)
 					}, e.id))
-				}) : /* @__PURE__ */ _(t, {
-					illustration: A || M || P ? "empty-search" : "empty-data",
-					icon: /* @__PURE__ */ _(f, { size: 32 }),
-					title: w("devportal.noApplicationsFound", "No applications found"),
-					description: A || M || P ? w("devportal.tryAdjustingFilters", "Try adjusting your filters") : w("devportal.createFirstApp", "Create your first application to get started"),
-					action: !A && !M && !P ? /* @__PURE__ */ v("button", {
-						onClick: () => K("/apps/new"),
+				}) : /* @__PURE__ */ v("div", {
+					className: "overflow-x-auto rounded-lg border border-border-seam",
+					children: /* @__PURE__ */ y("table", {
+						className: "w-full text-sm",
+						children: [/* @__PURE__ */ v("thead", { children: /* @__PURE__ */ y("tr", {
+							className: "border-b border-border-seam bg-bg-sunken text-left",
+							children: [
+								/* @__PURE__ */ v("th", {
+									className: "w-10 px-4 py-3",
+									children: /* @__PURE__ */ v(c, {
+										checked: Y,
+										indeterminate: X,
+										onChange: Q,
+										ariaLabel: "Select all"
+									})
+								}),
+								/* @__PURE__ */ v("th", {
+									className: "px-4 py-3 font-medium text-text-secondary",
+									children: "Name"
+								}),
+								/* @__PURE__ */ v("th", {
+									className: "px-4 py-3 font-medium text-text-secondary",
+									children: "Status"
+								}),
+								/* @__PURE__ */ v("th", {
+									className: "px-4 py-3 font-medium text-text-secondary",
+									children: "Type"
+								}),
+								/* @__PURE__ */ v("th", {
+									className: "px-4 py-3 font-medium text-text-secondary",
+									children: "Created"
+								}),
+								/* @__PURE__ */ v("th", { className: "px-4 py-3 font-medium text-text-secondary" })
+							]
+						}) }), /* @__PURE__ */ v("tbody", {
+							className: "divide-y divide-border-seam",
+							children: G.map((e) => /* @__PURE__ */ y("tr", {
+								className: `hover:bg-bg-surface-hover transition-colors ${P.has(e.id) ? "bg-action-primary-bg/5" : ""}`,
+								children: [
+									/* @__PURE__ */ v("td", {
+										className: "w-10 px-4 py-3",
+										children: /* @__PURE__ */ v(c, {
+											checked: P.has(e.id),
+											onChange: (t) => Z(e.id, t),
+											ariaLabel: `Select ${e.name}`
+										})
+									}),
+									/* @__PURE__ */ v("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ y("button", {
+											onClick: () => W(`/apps/${e.id}`),
+											className: "group flex items-center gap-3 text-left",
+											children: [e.iconUrl ? /* @__PURE__ */ v("img", {
+												src: e.iconUrl,
+												alt: "",
+												className: "h-8 w-8 rounded object-cover"
+											}) : /* @__PURE__ */ v("div", {
+												className: "flex h-8 w-8 items-center justify-center rounded bg-bg-sunken text-text-secondary",
+												children: /* @__PURE__ */ v(m, { size: 14 })
+											}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+												className: "font-medium text-text-primary group-hover:text-action-primary-text transition-colors",
+												children: e.name
+											}), e.shortDescription && /* @__PURE__ */ v("p", {
+												className: "text-xs text-text-secondary line-clamp-1",
+												children: e.shortDescription
+											})] })]
+										})
+									}),
+									/* @__PURE__ */ v("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ v(le, { status: e.status })
+									}),
+									/* @__PURE__ */ v("td", {
+										className: "px-4 py-3 text-text-secondary",
+										children: s[e.appType] || e.appType
+									}),
+									/* @__PURE__ */ v("td", {
+										className: "px-4 py-3 text-text-secondary tabular-nums",
+										children: new Date(e.createdAt).toLocaleDateString()
+									}),
+									/* @__PURE__ */ v("td", {
+										className: "px-4 py-3 text-right",
+										children: /* @__PURE__ */ v("button", {
+											onClick: () => W(`/apps/${e.id}`),
+											className: "rounded-md px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors",
+											children: "View"
+										})
+									})
+								]
+							}, e.id))
+						})]
+					})
+				}) : /* @__PURE__ */ v(t, {
+					illustration: A || j || N ? "empty-search" : "empty-data",
+					icon: /* @__PURE__ */ v(m, { size: 32 }),
+					title: T("devportal.noApplicationsFound", "No applications found"),
+					description: A || j || N ? T("devportal.tryAdjustingFilters", "Try adjusting your filters") : T("devportal.createFirstApp", "Create your first application to get started"),
+					action: !A && !j && !N ? /* @__PURE__ */ y("button", {
+						onClick: () => W("/apps/new"),
 						className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
-						children: [/* @__PURE__ */ _(g, { size: 16 }), w("devportal.createApp", "Create App")]
+						children: [/* @__PURE__ */ v(_, { size: 16 }), T("devportal.createApp", "Create App")]
 					}) : void 0
 				}),
-				/* @__PURE__ */ _(a, {
-					open: R === "deactivate",
+				/* @__PURE__ */ v(ee, {
+					open: I === "deactivate",
 					onOpenChange: (e) => {
-						e || z(null);
+						e || L(null);
 					},
 					onConfirm: async () => {
-						if (X.length === 0) return;
-						let e = await Promise.allSettled(X.map((e) => ge({ variables: { id: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
-						V({
+						if (J.length === 0) return;
+						let e = await Promise.allSettled(J.map((e) => me({ variables: { id: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
+						z({
 							type: n === 0 ? "success" : "error",
-							message: b("Deactivated", t, n)
-						}), $(), z(null), await W();
+							message: ce("Deactivated", t, n)
+						}), $(), L(null), await H();
 					},
 					title: "Deactivate selected applications",
-					description: `Deactivate ${X.length} selected application${X.length === 1 ? "" : "s"}? Users and integrations may lose access until these apps are re-enabled.`,
+					description: `Deactivate ${J.length} selected application${J.length === 1 ? "" : "s"}? Users and integrations may lose access until these apps are re-enabled.`,
 					confirmLabel: "Deactivate",
 					cancelLabel: "Cancel",
 					variant: "warning"
-				}),
-				/* @__PURE__ */ _(a, {
-					open: R === "delete",
-					onOpenChange: (e) => {
-						e || z(null);
-					},
-					onConfirm: async () => {
-						if (Y.length === 0) return;
-						let e = await Promise.allSettled(Y.map((e) => he({ variables: { id: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
-						V({
-							type: n === 0 ? "success" : "error",
-							message: b("Deleted", t, n)
-						}), $(), z(null), await W();
-					},
-					title: "Delete selected applications",
-					description: `Delete ${Y.length} selected application${Y.length === 1 ? "" : "s"}? This cannot be undone.`,
-					confirmLabel: "Delete",
-					cancelLabel: "Cancel",
-					variant: "danger"
 				})
 			]
 		})