@burdenoff/microfe-admin 2026.624.1 → 2026.626.1

package/dist/admin/pages/ReferralsPage.js

@@ -9,89 +9,96 @@ import { directActivityGraphqlRequest as o } from "../utils/directActivityGraphq
 import { useEffect as s, useMemo as c, useState as l } from "react";
 import { Activity as u, Link2 as d, RefreshCw as f, Users as p } from "lucide-react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { EmphasisPanel as g, PagePurpose as _ } from "@burdenoff/fe-libs/ui";
 //#region src/admin/pages/ReferralsPage.tsx
-function g() {
-	let { canViewDashboard: g, isLoading: _ } = t(), { apiGatewayUrl: v, authToken: y, currentUser: b } = e(), x = g || b?.role === "PLATFORM_SUPERADMIN", [S, C] = l(null), [w, T] = l([]), [E, D] = l(null), [O, k] = l([]), [A, j] = l(!0), [M, N] = l(null), P = c(() => ({
-		apiGatewayUrl: v,
-		authToken: y,
-		actorId: b?.id,
+function v() {
+	let { canViewDashboard: v, isLoading: y } = t(), { apiGatewayUrl: b, authToken: x, currentUser: S } = e(), C = v || S?.role === "PLATFORM_SUPERADMIN", [w, T] = l(null), [E, D] = l([]), [O, k] = l(null), [A, j] = l([]), [M, N] = l(!0), [P, F] = l(null), I = c(() => ({
+		apiGatewayUrl: b,
+		authToken: x,
+		actorId: S?.id,
 		actorType: "super_admin"
 	}), [
-		v,
-		y,
-		b?.id
-	]), F = async () => {
-		j(!0), N(null);
+		b,
+		x,
+		S?.id
+	]), L = async () => {
+		N(!0), F(null);
 		try {
 			let [e, t] = await Promise.all([o({
-				...P,
+				...I,
 				query: "query AdminAffiliateAnalytics {\n              adminAffiliateAnalytics {\n                totalCodes\n                totalVisits\n                totalJourneys\n                totalSignups\n                totalPaidConversions\n                totalStorePurchases\n                totalRevenueAmount\n                totalRewardAmount\n                topAffiliates {\n                  codeId\n                  codeValue\n                  ownerUserId\n                  visits\n                  signups\n                  paidConversions\n                  storePurchases\n                  revenueAmount\n                  rewardAmount\n                }\n              }\n            }"
 			}), o({
-				...P,
+				...I,
 				query: "query AffiliateJourneys {\n              affiliateJourneys(limit: 25, offset: 0) {\n                items {\n                  id\n                  codeValue\n                  identifiedUserId\n                  productSlug\n                  currentPath\n                  geographyCountry\n                  mode\n                  status\n                  lastVisitedAt\n                }\n              }\n            }"
 			})]);
-			C(e.adminAffiliateAnalytics), T(t.affiliateJourneys.items);
+			T(e.adminAffiliateAnalytics), D(t.affiliateJourneys.items);
 		} catch (e) {
-			N(e instanceof Error ? e.message : "Failed to load referrals dashboard");
+			F(e instanceof Error ? e.message : "Failed to load referrals dashboard");
 		} finally {
-			j(!1);
+			N(!1);
 		}
 	};
 	s(() => {
-		F();
-	}, [P]), s(() => {
-		if (!E) {
-			k([]);
+		L();
+	}, [I]), s(() => {
+		if (!O) {
+			j([]);
 			return;
 		}
 		o({
-			...P,
+			...I,
 			query: "query AffiliateJourneyEvents($journeyId: ID!) {\n          affiliateJourneyEvents(journeyId: $journeyId) {\n            id\n            type\n            valueAmount\n            currency\n            occurredAt\n          }\n        }",
-			variables: { journeyId: E }
-		}).then((e) => k(e.affiliateJourneyEvents)).catch((e) => {
-			N(e instanceof Error ? e.message : "Failed to load journey events");
+			variables: { journeyId: O }
+		}).then((e) => j(e.affiliateJourneyEvents)).catch((e) => {
+			F(e instanceof Error ? e.message : "Failed to load journey events");
 		});
-	}, [P, E]);
-	let I = S ? [
+	}, [I, O]);
+	let R = w ? [
 		{
-			title: "Codes",
-			value: S.totalCodes,
-			icon: /* @__PURE__ */ m(d, { className: "h-5 w-5" })
+			title: "Signups",
+			value: w.totalSignups,
+			icon: /* @__PURE__ */ m(p, { className: "h-5 w-5" }),
+			hero: !0
 		},
 		{
-			title: "Visits",
-			value: S.totalVisits,
-			icon: /* @__PURE__ */ m(u, { className: "h-5 w-5" })
+			title: "Codes",
+			value: w.totalCodes,
+			icon: /* @__PURE__ */ m(d, { className: "h-5 w-5" }),
+			hero: !1
 		},
 		{
-			title: "Signups",
-			value: S.totalSignups,
-			icon: /* @__PURE__ */ m(p, { className: "h-5 w-5" })
+			title: "Visits",
+			value: w.totalVisits,
+			icon: /* @__PURE__ */ m(u, { className: "h-5 w-5" }),
+			hero: !1
 		},
 		{
 			title: "Paid conversions",
-			value: S.totalPaidConversions + S.totalStorePurchases,
-			icon: /* @__PURE__ */ m(p, { className: "h-5 w-5" })
+			value: w.totalPaidConversions + w.totalStorePurchases,
+			icon: /* @__PURE__ */ m(p, { className: "h-5 w-5" }),
+			hero: !1
 		}
 	] : [];
 	return /* @__PURE__ */ m(a, {
-		allowed: x,
-		isLoading: _,
+		allowed: C,
+		isLoading: y,
 		pageTitle: "Referrals",
 		denyMessage: "You don't have permission to view referral analytics.",
 		children: /* @__PURE__ */ m(r, {
 			title: "Referrals",
+			gradientWord: "Referrals",
 			description: "Inspect top affiliates, journey drilldowns, conversions, and revenue attribution.",
 			actions: /* @__PURE__ */ h("button", {
 				type: "button",
-				onClick: () => void F(),
+				onClick: () => void L(),
 				className: "inline-flex items-center gap-2 rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary",
 				children: [/* @__PURE__ */ m(f, { className: "h-4 w-4" }), "Refresh"]
 			}),
 			children: /* @__PURE__ */ h("div", {
 				className: "space-y-6",
 				children: [
-					A ? /* @__PURE__ */ m("div", {
+					/* @__PURE__ */ m(_, { children: "See how your referral and affiliate program is performing. This page attributes visits, signups, paid conversions and revenue back to each affiliate code, and lets you drill into an individual visitor's journey to understand what drove a conversion." }),
+					M ? /* @__PURE__ */ m("div", {
 						className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4",
 						children: [
 							1,
@@ -99,9 +106,21 @@ function g() {
 							3,
 							4
 						].map((e) => /* @__PURE__ */ m("div", { className: "h-28 animate-pulse rounded-lg border border-border-subtle bg-bg-surface" }, e))
-					}) : S ? /* @__PURE__ */ m("div", {
+					}) : w ? /* @__PURE__ */ m("div", {
 						className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4",
-						children: I.map((e) => /* @__PURE__ */ h("div", {
+						children: R.map((e) => e.hero ? /* @__PURE__ */ h(g, {
+							className: "p-4",
+							children: [/* @__PURE__ */ h("div", {
+								className: "mb-3 flex items-center justify-between text-text-secondary",
+								children: [/* @__PURE__ */ m("span", {
+									className: "text-sm font-medium",
+									children: e.title
+								}), e.icon]
+							}), /* @__PURE__ */ m("p", {
+								className: "text-2xl font-semibold text-text-primary",
+								children: e.value
+							})]
+						}, e.title) : /* @__PURE__ */ h("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
 							children: [/* @__PURE__ */ h("div", {
 								className: "mb-3 flex items-center justify-between text-text-secondary",
@@ -115,9 +134,9 @@ function g() {
 							})]
 						}, e.title))
 					}) : null,
-					M ? /* @__PURE__ */ m("div", {
+					P ? /* @__PURE__ */ m("div", {
 						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-status-error-text",
-						children: M
+						children: P
 					}) : null,
 					/* @__PURE__ */ h("div", {
 						className: "grid gap-6 xl:grid-cols-[1.15fr,1.85fr]",
@@ -126,9 +145,9 @@ function g() {
 							children: [/* @__PURE__ */ m("h2", {
 								className: "mb-4 text-lg font-semibold text-text-primary",
 								children: "Top affiliates"
-							}), S?.topAffiliates.length ? /* @__PURE__ */ m("div", {
+							}), w?.topAffiliates.length ? /* @__PURE__ */ m("div", {
 								className: "space-y-3",
-								children: S.topAffiliates.map((e) => /* @__PURE__ */ m("div", {
+								children: w.topAffiliates.map((e) => /* @__PURE__ */ m("div", {
 									className: "rounded-lg border border-border-subtle bg-bg-surface p-3",
 									children: /* @__PURE__ */ h("div", {
 										className: "flex items-center justify-between gap-3",
@@ -151,6 +170,7 @@ function g() {
 									})
 								}, e.codeId))
 							}) : /* @__PURE__ */ m(n, {
+								illustration: "empty-data",
 								icon: /* @__PURE__ */ m(d, { className: "h-8 w-8" }),
 								title: "No affiliate performance yet",
 								description: "Top-performing affiliate codes will appear here once journeys are recorded."
@@ -162,7 +182,7 @@ function g() {
 								children: [/* @__PURE__ */ m("h2", {
 									className: "mb-4 text-lg font-semibold text-text-primary",
 									children: "Recent journeys"
-								}), w.length ? /* @__PURE__ */ m("div", {
+								}), E.length ? /* @__PURE__ */ m("div", {
 									className: "overflow-x-auto",
 									children: /* @__PURE__ */ h("table", {
 										className: "min-w-full text-sm",
@@ -194,9 +214,9 @@ function g() {
 													children: "Visited"
 												})
 											]
-										}) }), /* @__PURE__ */ m("tbody", { children: w.map((e) => /* @__PURE__ */ h("tr", {
+										}) }), /* @__PURE__ */ m("tbody", { children: E.map((e) => /* @__PURE__ */ h("tr", {
 											className: "cursor-pointer border-b border-border-subtle/70 text-text-primary",
-											onClick: () => D(e.id),
+											onClick: () => k(e.id),
 											children: [
 												/* @__PURE__ */ m("td", {
 													className: "px-3 py-2 font-medium",
@@ -226,6 +246,7 @@ function g() {
 										}, e.id)) })]
 									})
 								}) : /* @__PURE__ */ m(n, {
+									illustration: "empty-search",
 									icon: /* @__PURE__ */ m(u, { className: "h-8 w-8" }),
 									title: "No journeys found",
 									description: "Journey-level drilldowns will appear once referral traffic flows through product touchpoints."
@@ -235,9 +256,9 @@ function g() {
 								children: [/* @__PURE__ */ m("h2", {
 									className: "mb-4 text-lg font-semibold text-text-primary",
 									children: "Journey events"
-								}), O.length ? /* @__PURE__ */ m("div", {
+								}), A.length ? /* @__PURE__ */ m("div", {
 									className: "space-y-3",
-									children: O.map((e) => /* @__PURE__ */ m("div", {
+									children: A.map((e) => /* @__PURE__ */ m("div", {
 										className: "rounded-lg border border-border-subtle bg-bg-surface p-3",
 										children: /* @__PURE__ */ h("div", {
 											className: "flex items-center justify-between gap-3",
@@ -254,6 +275,7 @@ function g() {
 										})
 									}, e.id))
 								}) : /* @__PURE__ */ m(n, {
+									illustration: "empty-generic",
 									icon: /* @__PURE__ */ m(u, { className: "h-8 w-8" }),
 									title: "Select a journey",
 									description: "Choose a journey from the table above to inspect its critical events."
@@ -267,6 +289,6 @@ function g() {
 	});
 }
 //#endregion
-export { g as ReferralsPage };
+export { v as ReferralsPage };
 
 //# sourceMappingURL=ReferralsPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReferralsPage.js","names":[],"sources":["../../../src/admin/pages/ReferralsPage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Activity, Link2, RefreshCw, Users } from 'lucide-react';\n\nimport { PageLayout, EmptyState, PermissionGuard } from '../components';\nimport { useAdminPermissions } from '../hooks/useAdminPermissions';\nimport { useAdmin } from '../providers/AdminProvider';\nimport { directActivityGraphqlRequest } from '../utils/directActivityGraphql';\nimport { formatRelativeTime } from '../utils/formatters';\n\ntype ReferralSummary = {\n  totalCodes: number;\n  totalVisits: number;\n  totalJourneys: number;\n  totalSignups: number;\n  totalPaidConversions: number;\n  totalStorePurchases: number;\n  totalRevenueAmount: number;\n  totalRewardAmount: number;\n  topAffiliates: Array<{\n    codeId: string;\n    codeValue: string;\n    ownerUserId: string;\n    visits: number;\n    signups: number;\n    paidConversions: number;\n    storePurchases: number;\n    revenueAmount: number;\n    rewardAmount: number;\n  }>;\n};\n\ntype ReferralJourney = {\n  id: string;\n  codeValue: string;\n  identifiedUserId?: string | null;\n  productSlug: string;\n  currentPath?: string | null;\n  geographyCountry?: string | null;\n  mode?: string | null;\n  status: string;\n  lastVisitedAt: string;\n};\n\ntype ReferralEvent = {\n  id: string;\n  type: string;\n  valueAmount?: number | null;\n  currency?: string | null;\n  occurredAt: string;\n};\n\nexport function ReferralsPage() {\n  const { canViewDashboard, isLoading: permissionsLoading } = useAdminPermissions();\n  const { apiGatewayUrl, authToken, currentUser } = useAdmin();\n  const canViewReferrals = canViewDashboard || currentUser?.role === 'PLATFORM_SUPERADMIN';\n\n  const [summary, setSummary] = useState<ReferralSummary | null>(null);\n  const [journeys, setJourneys] = useState<ReferralJourney[]>([]);\n  const [selectedJourneyId, setSelectedJourneyId] = useState<string | null>(null);\n  const [selectedJourneyEvents, setSelectedJourneyEvents] = useState<ReferralEvent[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  const requestContext = useMemo(\n    () => ({\n      apiGatewayUrl,\n      authToken,\n      actorId: currentUser?.id,\n      actorType: 'super_admin' as const,\n    }),\n    [apiGatewayUrl, authToken, currentUser?.id]\n  );\n\n  const loadData = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const [summaryData, journeyData] = await Promise.all([\n        directActivityGraphqlRequest<{ adminAffiliateAnalytics: ReferralSummary }>({\n          ...requestContext,\n          query: `query AdminAffiliateAnalytics {\n              adminAffiliateAnalytics {\n                totalCodes\n                totalVisits\n                totalJourneys\n                totalSignups\n                totalPaidConversions\n                totalStorePurchases\n                totalRevenueAmount\n                totalRewardAmount\n                topAffiliates {\n                  codeId\n                  codeValue\n                  ownerUserId\n                  visits\n                  signups\n                  paidConversions\n                  storePurchases\n                  revenueAmount\n                  rewardAmount\n                }\n              }\n            }`,\n        }),\n        directActivityGraphqlRequest<{ affiliateJourneys: { items: ReferralJourney[] } }>({\n          ...requestContext,\n          query: `query AffiliateJourneys {\n              affiliateJourneys(limit: 25, offset: 0) {\n                items {\n                  id\n                  codeValue\n                  identifiedUserId\n                  productSlug\n                  currentPath\n                  geographyCountry\n                  mode\n                  status\n                  lastVisitedAt\n                }\n              }\n            }`,\n        }),\n      ]);\n\n      setSummary(summaryData.adminAffiliateAnalytics);\n      setJourneys(journeyData.affiliateJourneys.items);\n    } catch (loadError) {\n      setError(\n        loadError instanceof Error ? loadError.message : 'Failed to load referrals dashboard'\n      );\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    void loadData();\n  }, [requestContext]);\n\n  useEffect(() => {\n    if (!selectedJourneyId) {\n      setSelectedJourneyEvents([]);\n      return;\n    }\n\n    void directActivityGraphqlRequest<\n      { affiliateJourneyEvents: ReferralEvent[] },\n      { journeyId: string }\n    >({\n      ...requestContext,\n      query: `query AffiliateJourneyEvents($journeyId: ID!) {\n          affiliateJourneyEvents(journeyId: $journeyId) {\n            id\n            type\n            valueAmount\n            currency\n            occurredAt\n          }\n        }`,\n      variables: { journeyId: selectedJourneyId },\n    })\n      .then((response) => setSelectedJourneyEvents(response.affiliateJourneyEvents))\n      .catch((loadError) => {\n        setError(loadError instanceof Error ? loadError.message : 'Failed to load journey events');\n      });\n  }, [requestContext, selectedJourneyId]);\n\n  const cards = summary\n    ? [\n        { title: 'Codes', value: summary.totalCodes, icon: <Link2 className=\"h-5 w-5\" /> },\n        { title: 'Visits', value: summary.totalVisits, icon: <Activity className=\"h-5 w-5\" /> },\n        { title: 'Signups', value: summary.totalSignups, icon: <Users className=\"h-5 w-5\" /> },\n        {\n          title: 'Paid conversions',\n          value: summary.totalPaidConversions + summary.totalStorePurchases,\n          icon: <Users className=\"h-5 w-5\" />,\n        },\n      ]\n    : [];\n\n  return (\n    <PermissionGuard\n      allowed={canViewReferrals}\n      isLoading={permissionsLoading}\n      pageTitle=\"Referrals\"\n      denyMessage=\"You don't have permission to view referral analytics.\"\n    >\n      <PageLayout\n        title=\"Referrals\"\n        description=\"Inspect top affiliates, journey drilldowns, conversions, and revenue attribution.\"\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => void loadData()}\n            className=\"inline-flex items-center gap-2 rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary\"\n          >\n            <RefreshCw className=\"h-4 w-4\" />\n            Refresh\n          </button>\n        }\n      >\n        <div className=\"space-y-6\">\n          {loading ? (\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {[1, 2, 3, 4].map((item) => (\n                <div\n                  key={item}\n                  className=\"h-28 animate-pulse rounded-lg border border-border-subtle bg-bg-surface\"\n                />\n              ))}\n            </div>\n          ) : summary ? (\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {cards.map((card) => (\n                <div key={card.title} className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n                  <div className=\"mb-3 flex items-center justify-between text-text-secondary\">\n                    <span className=\"text-sm font-medium\">{card.title}</span>\n                    {card.icon}\n                  </div>\n                  <p className=\"text-2xl font-semibold text-text-primary\">{card.value}</p>\n                </div>\n              ))}\n            </div>\n          ) : null}\n\n          {error ? (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-status-error-text\">\n              {error}\n            </div>\n          ) : null}\n\n          <div className=\"grid gap-6 xl:grid-cols-[1.15fr,1.85fr]\">\n            <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n              <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Top affiliates</h2>\n              {summary?.topAffiliates.length ? (\n                <div className=\"space-y-3\">\n                  {summary.topAffiliates.map((affiliate) => (\n                    <div\n                      key={affiliate.codeId}\n                      className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\"\n                    >\n                      <div className=\"flex items-center justify-between gap-3\">\n                        <div>\n                          <p className=\"text-sm font-semibold text-text-primary\">\n                            {affiliate.codeValue}\n                          </p>\n                          <p className=\"text-xs text-text-secondary\">\n                            Owner: {affiliate.ownerUserId}\n                          </p>\n                        </div>\n                        <div className=\"text-right\">\n                          <p className=\"text-sm font-semibold text-text-primary\">\n                            {affiliate.visits} visits\n                          </p>\n                          <p className=\"text-xs text-text-secondary\">\n                            {affiliate.paidConversions + affiliate.storePurchases} conversions\n                          </p>\n                        </div>\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <EmptyState\n                  icon={<Link2 className=\"h-8 w-8\" />}\n                  title=\"No affiliate performance yet\"\n                  description=\"Top-performing affiliate codes will appear here once journeys are recorded.\"\n                />\n              )}\n            </section>\n\n            <section className=\"space-y-4\">\n              <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n                <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Recent journeys</h2>\n                {journeys.length ? (\n                  <div className=\"overflow-x-auto\">\n                    <table className=\"min-w-full text-sm\">\n                      <thead>\n                        <tr className=\"border-b border-border-subtle text-left text-text-secondary\">\n                          <th className=\"px-3 py-2\">Code</th>\n                          <th className=\"px-3 py-2\">Product</th>\n                          <th className=\"px-3 py-2\">Path</th>\n                          <th className=\"px-3 py-2\">Country</th>\n                          <th className=\"px-3 py-2\">Status</th>\n                          <th className=\"px-3 py-2\">Visited</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        {journeys.map((journey) => (\n                          <tr\n                            key={journey.id}\n                            className=\"cursor-pointer border-b border-border-subtle/70 text-text-primary\"\n                            onClick={() => setSelectedJourneyId(journey.id)}\n                          >\n                            <td className=\"px-3 py-2 font-medium\">{journey.codeValue}</td>\n                            <td className=\"px-3 py-2\">{journey.productSlug}</td>\n                            <td className=\"px-3 py-2\">{journey.currentPath || '-'}</td>\n                            <td className=\"px-3 py-2\">{journey.geographyCountry || '-'}</td>\n                            <td className=\"px-3 py-2\">{journey.status}</td>\n                            <td className=\"px-3 py-2\">\n                              {formatRelativeTime(journey.lastVisitedAt)}\n                            </td>\n                          </tr>\n                        ))}\n                      </tbody>\n                    </table>\n                  </div>\n                ) : (\n                  <EmptyState\n                    icon={<Activity className=\"h-8 w-8\" />}\n                    title=\"No journeys found\"\n                    description=\"Journey-level drilldowns will appear once referral traffic flows through product touchpoints.\"\n                  />\n                )}\n              </div>\n\n              <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n                <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Journey events</h2>\n                {selectedJourneyEvents.length ? (\n                  <div className=\"space-y-3\">\n                    {selectedJourneyEvents.map((event) => (\n                      <div\n                        key={event.id}\n                        className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\"\n                      >\n                        <div className=\"flex items-center justify-between gap-3\">\n                          <div>\n                            <p className=\"text-sm font-semibold text-text-primary\">{event.type}</p>\n                            <p className=\"text-xs text-text-secondary\">\n                              {formatRelativeTime(event.occurredAt)}\n                            </p>\n                          </div>\n                          <p className=\"text-sm font-medium text-text-primary\">\n                            {event.valueAmount\n                              ? `${event.valueAmount} ${event.currency || 'USD'}`\n                              : '—'}\n                          </p>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <EmptyState\n                    icon={<Activity className=\"h-8 w-8\" />}\n                    title=\"Select a journey\"\n                    description=\"Choose a journey from the table above to inspect its critical events.\"\n                  />\n                )}\n              </div>\n            </section>\n          </div>\n        </div>\n      </PageLayout>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ReferralsPage.js","names":[],"sources":["../../../src/admin/pages/ReferralsPage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Activity, Link2, RefreshCw, Users } from 'lucide-react';\n\nimport { PageLayout, EmptyState, PermissionGuard } from '../components';\nimport { PagePurpose, EmphasisPanel } from '@burdenoff/fe-libs/ui';\nimport { useAdminPermissions } from '../hooks/useAdminPermissions';\nimport { useAdmin } from '../providers/AdminProvider';\nimport { directActivityGraphqlRequest } from '../utils/directActivityGraphql';\nimport { formatRelativeTime } from '../utils/formatters';\n\ntype ReferralSummary = {\n  totalCodes: number;\n  totalVisits: number;\n  totalJourneys: number;\n  totalSignups: number;\n  totalPaidConversions: number;\n  totalStorePurchases: number;\n  totalRevenueAmount: number;\n  totalRewardAmount: number;\n  topAffiliates: Array<{\n    codeId: string;\n    codeValue: string;\n    ownerUserId: string;\n    visits: number;\n    signups: number;\n    paidConversions: number;\n    storePurchases: number;\n    revenueAmount: number;\n    rewardAmount: number;\n  }>;\n};\n\ntype ReferralJourney = {\n  id: string;\n  codeValue: string;\n  identifiedUserId?: string | null;\n  productSlug: string;\n  currentPath?: string | null;\n  geographyCountry?: string | null;\n  mode?: string | null;\n  status: string;\n  lastVisitedAt: string;\n};\n\ntype ReferralEvent = {\n  id: string;\n  type: string;\n  valueAmount?: number | null;\n  currency?: string | null;\n  occurredAt: string;\n};\n\nexport function ReferralsPage() {\n  const { canViewDashboard, isLoading: permissionsLoading } = useAdminPermissions();\n  const { apiGatewayUrl, authToken, currentUser } = useAdmin();\n  const canViewReferrals = canViewDashboard || currentUser?.role === 'PLATFORM_SUPERADMIN';\n\n  const [summary, setSummary] = useState<ReferralSummary | null>(null);\n  const [journeys, setJourneys] = useState<ReferralJourney[]>([]);\n  const [selectedJourneyId, setSelectedJourneyId] = useState<string | null>(null);\n  const [selectedJourneyEvents, setSelectedJourneyEvents] = useState<ReferralEvent[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  const requestContext = useMemo(\n    () => ({\n      apiGatewayUrl,\n      authToken,\n      actorId: currentUser?.id,\n      actorType: 'super_admin' as const,\n    }),\n    [apiGatewayUrl, authToken, currentUser?.id]\n  );\n\n  const loadData = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const [summaryData, journeyData] = await Promise.all([\n        directActivityGraphqlRequest<{ adminAffiliateAnalytics: ReferralSummary }>({\n          ...requestContext,\n          query: `query AdminAffiliateAnalytics {\n              adminAffiliateAnalytics {\n                totalCodes\n                totalVisits\n                totalJourneys\n                totalSignups\n                totalPaidConversions\n                totalStorePurchases\n                totalRevenueAmount\n                totalRewardAmount\n                topAffiliates {\n                  codeId\n                  codeValue\n                  ownerUserId\n                  visits\n                  signups\n                  paidConversions\n                  storePurchases\n                  revenueAmount\n                  rewardAmount\n                }\n              }\n            }`,\n        }),\n        directActivityGraphqlRequest<{ affiliateJourneys: { items: ReferralJourney[] } }>({\n          ...requestContext,\n          query: `query AffiliateJourneys {\n              affiliateJourneys(limit: 25, offset: 0) {\n                items {\n                  id\n                  codeValue\n                  identifiedUserId\n                  productSlug\n                  currentPath\n                  geographyCountry\n                  mode\n                  status\n                  lastVisitedAt\n                }\n              }\n            }`,\n        }),\n      ]);\n\n      setSummary(summaryData.adminAffiliateAnalytics);\n      setJourneys(journeyData.affiliateJourneys.items);\n    } catch (loadError) {\n      setError(\n        loadError instanceof Error ? loadError.message : 'Failed to load referrals dashboard'\n      );\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    void loadData();\n  }, [requestContext]);\n\n  useEffect(() => {\n    if (!selectedJourneyId) {\n      setSelectedJourneyEvents([]);\n      return;\n    }\n\n    void directActivityGraphqlRequest<\n      { affiliateJourneyEvents: ReferralEvent[] },\n      { journeyId: string }\n    >({\n      ...requestContext,\n      query: `query AffiliateJourneyEvents($journeyId: ID!) {\n          affiliateJourneyEvents(journeyId: $journeyId) {\n            id\n            type\n            valueAmount\n            currency\n            occurredAt\n          }\n        }`,\n      variables: { journeyId: selectedJourneyId },\n    })\n      .then((response) => setSelectedJourneyEvents(response.affiliateJourneyEvents))\n      .catch((loadError) => {\n        setError(loadError instanceof Error ? loadError.message : 'Failed to load journey events');\n      });\n  }, [requestContext, selectedJourneyId]);\n\n  const cards = summary\n    ? [\n        // The signups total is the headline outcome — flagged as the single hero.\n        {\n          title: 'Signups',\n          value: summary.totalSignups,\n          icon: <Users className=\"h-5 w-5\" />,\n          hero: true,\n        },\n        { title: 'Codes', value: summary.totalCodes, icon: <Link2 className=\"h-5 w-5\" />, hero: false },\n        { title: 'Visits', value: summary.totalVisits, icon: <Activity className=\"h-5 w-5\" />, hero: false },\n        {\n          title: 'Paid conversions',\n          value: summary.totalPaidConversions + summary.totalStorePurchases,\n          icon: <Users className=\"h-5 w-5\" />,\n          hero: false,\n        },\n      ]\n    : [];\n\n  return (\n    <PermissionGuard\n      allowed={canViewReferrals}\n      isLoading={permissionsLoading}\n      pageTitle=\"Referrals\"\n      denyMessage=\"You don't have permission to view referral analytics.\"\n    >\n      <PageLayout\n        title=\"Referrals\"\n        gradientWord=\"Referrals\"\n        description=\"Inspect top affiliates, journey drilldowns, conversions, and revenue attribution.\"\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => void loadData()}\n            className=\"inline-flex items-center gap-2 rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm font-medium text-text-primary\"\n          >\n            <RefreshCw className=\"h-4 w-4\" />\n            Refresh\n          </button>\n        }\n      >\n        <div className=\"space-y-6\">\n          <PagePurpose>\n            See how your referral and affiliate program is performing. This page attributes\n            visits, signups, paid conversions and revenue back to each affiliate code, and lets you\n            drill into an individual visitor&apos;s journey to understand what drove a conversion.\n          </PagePurpose>\n\n          {loading ? (\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {[1, 2, 3, 4].map((item) => (\n                <div\n                  key={item}\n                  className=\"h-28 animate-pulse rounded-lg border border-border-subtle bg-bg-surface\"\n                />\n              ))}\n            </div>\n          ) : summary ? (\n            <div className=\"grid gap-4 md:grid-cols-2 xl:grid-cols-4\">\n              {cards.map((card) =>\n                card.hero ? (\n                  <EmphasisPanel key={card.title} className=\"p-4\">\n                    <div className=\"mb-3 flex items-center justify-between text-text-secondary\">\n                      <span className=\"text-sm font-medium\">{card.title}</span>\n                      {card.icon}\n                    </div>\n                    <p className=\"text-2xl font-semibold text-text-primary\">{card.value}</p>\n                  </EmphasisPanel>\n                ) : (\n                  <div\n                    key={card.title}\n                    className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\"\n                  >\n                    <div className=\"mb-3 flex items-center justify-between text-text-secondary\">\n                      <span className=\"text-sm font-medium\">{card.title}</span>\n                      {card.icon}\n                    </div>\n                    <p className=\"text-2xl font-semibold text-text-primary\">{card.value}</p>\n                  </div>\n                )\n              )}\n            </div>\n          ) : null}\n\n          {error ? (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-status-error-text\">\n              {error}\n            </div>\n          ) : null}\n\n          <div className=\"grid gap-6 xl:grid-cols-[1.15fr,1.85fr]\">\n            <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n              <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Top affiliates</h2>\n              {summary?.topAffiliates.length ? (\n                <div className=\"space-y-3\">\n                  {summary.topAffiliates.map((affiliate) => (\n                    <div\n                      key={affiliate.codeId}\n                      className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\"\n                    >\n                      <div className=\"flex items-center justify-between gap-3\">\n                        <div>\n                          <p className=\"text-sm font-semibold text-text-primary\">\n                            {affiliate.codeValue}\n                          </p>\n                          <p className=\"text-xs text-text-secondary\">\n                            Owner: {affiliate.ownerUserId}\n                          </p>\n                        </div>\n                        <div className=\"text-right\">\n                          <p className=\"text-sm font-semibold text-text-primary\">\n                            {affiliate.visits} visits\n                          </p>\n                          <p className=\"text-xs text-text-secondary\">\n                            {affiliate.paidConversions + affiliate.storePurchases} conversions\n                          </p>\n                        </div>\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <EmptyState\n                  illustration=\"empty-data\"\n                  icon={<Link2 className=\"h-8 w-8\" />}\n                  title=\"No affiliate performance yet\"\n                  description=\"Top-performing affiliate codes will appear here once journeys are recorded.\"\n                />\n              )}\n            </section>\n\n            <section className=\"space-y-4\">\n              <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n                <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Recent journeys</h2>\n                {journeys.length ? (\n                  <div className=\"overflow-x-auto\">\n                    <table className=\"min-w-full text-sm\">\n                      <thead>\n                        <tr className=\"border-b border-border-subtle text-left text-text-secondary\">\n                          <th className=\"px-3 py-2\">Code</th>\n                          <th className=\"px-3 py-2\">Product</th>\n                          <th className=\"px-3 py-2\">Path</th>\n                          <th className=\"px-3 py-2\">Country</th>\n                          <th className=\"px-3 py-2\">Status</th>\n                          <th className=\"px-3 py-2\">Visited</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        {journeys.map((journey) => (\n                          <tr\n                            key={journey.id}\n                            className=\"cursor-pointer border-b border-border-subtle/70 text-text-primary\"\n                            onClick={() => setSelectedJourneyId(journey.id)}\n                          >\n                            <td className=\"px-3 py-2 font-medium\">{journey.codeValue}</td>\n                            <td className=\"px-3 py-2\">{journey.productSlug}</td>\n                            <td className=\"px-3 py-2\">{journey.currentPath || '-'}</td>\n                            <td className=\"px-3 py-2\">{journey.geographyCountry || '-'}</td>\n                            <td className=\"px-3 py-2\">{journey.status}</td>\n                            <td className=\"px-3 py-2\">\n                              {formatRelativeTime(journey.lastVisitedAt)}\n                            </td>\n                          </tr>\n                        ))}\n                      </tbody>\n                    </table>\n                  </div>\n                ) : (\n                  <EmptyState\n                    illustration=\"empty-search\"\n                    icon={<Activity className=\"h-8 w-8\" />}\n                    title=\"No journeys found\"\n                    description=\"Journey-level drilldowns will appear once referral traffic flows through product touchpoints.\"\n                  />\n                )}\n              </div>\n\n              <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n                <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">Journey events</h2>\n                {selectedJourneyEvents.length ? (\n                  <div className=\"space-y-3\">\n                    {selectedJourneyEvents.map((event) => (\n                      <div\n                        key={event.id}\n                        className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\"\n                      >\n                        <div className=\"flex items-center justify-between gap-3\">\n                          <div>\n                            <p className=\"text-sm font-semibold text-text-primary\">{event.type}</p>\n                            <p className=\"text-xs text-text-secondary\">\n                              {formatRelativeTime(event.occurredAt)}\n                            </p>\n                          </div>\n                          <p className=\"text-sm font-medium text-text-primary\">\n                            {event.valueAmount\n                              ? `${event.valueAmount} ${event.currency || 'USD'}`\n                              : '—'}\n                          </p>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <EmptyState\n                    illustration=\"empty-generic\"\n                    icon={<Activity className=\"h-8 w-8\" />}\n                    title=\"Select a journey\"\n                    description=\"Choose a journey from the table above to inspect its critical events.\"\n                  />\n                )}\n              </div>\n            </section>\n          </div>\n        </div>\n      </PageLayout>\n    </PermissionGuard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAoDA,SAAgB,IAAgB;CAC9B,IAAM,EAAE,qBAAkB,WAAW,MAAuB,GAAqB,EAC3E,EAAE,kBAAe,cAAW,mBAAgB,GAAU,EACtD,IAAmB,KAAoB,GAAa,SAAS,uBAE7D,CAAC,GAAS,KAAc,EAAiC,KAAK,EAC9D,CAAC,GAAU,KAAe,EAA4B,EAAE,CAAC,EACzD,CAAC,GAAmB,KAAwB,EAAwB,KAAK,EACzE,CAAC,GAAuB,KAA4B,EAA0B,EAAE,CAAC,EACjF,CAAC,GAAS,KAAc,EAAS,GAAK,EACtC,CAAC,GAAO,KAAY,EAAwB,KAAK,EAEjD,IAAiB,SACd;EACL;EACA;EACA,SAAS,GAAa;EACtB,WAAW;EACZ,GACD;EAAC;EAAe;EAAW,GAAa;EAAG,CAC5C,EAEK,IAAW,YAAY;AAE3B,EADA,EAAW,GAAK,EAChB,EAAS,KAAK;AACd,MAAI;GACF,IAAM,CAAC,GAAa,KAAe,MAAM,QAAQ,IAAI,CACnD,EAA2E;IACzE,GAAG;IACH,OAAO;IAuBR,CAAC,EACF,EAAkF;IAChF,GAAG;IACH,OAAO;IAeR,CAAC,CACH,CAAC;AAGF,GADA,EAAW,EAAY,wBAAwB,EAC/C,EAAY,EAAY,kBAAkB,MAAM;WACzC,GAAW;AAClB,KACE,aAAqB,QAAQ,EAAU,UAAU,qCAClD;YACO;AACR,KAAW,GAAM;;;AAQrB,CAJA,QAAgB;AACT,KAAU;IACd,CAAC,EAAe,CAAC,EAEpB,QAAgB;AACd,MAAI,CAAC,GAAmB;AACtB,KAAyB,EAAE,CAAC;AAC5B;;AAGG,IAGH;GACA,GAAG;GACH,OAAO;GASP,WAAW,EAAE,WAAW,GAAmB;GAC5C,CAAC,CACC,MAAM,MAAa,EAAyB,EAAS,uBAAuB,CAAC,CAC7E,OAAO,MAAc;AACpB,KAAS,aAAqB,QAAQ,EAAU,UAAU,gCAAgC;IAC1F;IACH,CAAC,GAAgB,EAAkB,CAAC;CAEvC,IAAM,IAAQ,IACV;EAEE;GACE,OAAO;GACP,OAAO,EAAQ;GACf,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;GACnC,MAAM;GACP;EACD;GAAE,OAAO;GAAS,OAAO,EAAQ;GAAY,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;GAAE,MAAM;GAAO;EAC/F;GAAE,OAAO;GAAU,OAAO,EAAQ;GAAa,MAAM,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;GAAE,MAAM;GAAO;EACpG;GACE,OAAO;GACP,OAAO,EAAQ,uBAAuB,EAAQ;GAC9C,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;GACnC,MAAM;GACP;EACF,GACD,EAAE;AAEN,QACE,kBAAC,GAAD;EACE,SAAS;EACT,WAAW;EACX,WAAU;EACV,aAAY;YAEZ,kBAAC,GAAD;GACE,OAAM;GACN,cAAa;GACb,aAAY;GACZ,SACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,KAAK,GAAU;IAC9B,WAAU;cAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,UAE1B;;aAGX,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD,EAAA,UAAa,6PAIC,CAAA;KAEb,IACC,kBAAC,OAAD;MAAK,WAAU;gBACZ;OAAC;OAAG;OAAG;OAAG;OAAE,CAAC,KAAK,MACjB,kBAAC,OAAD,EAEE,WAAU,2EACV,EAFK,EAEL,CACF;MACE,CAAA,GACJ,IACF,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAM,KAAK,MACV,EAAK,OACH,kBAAC,GAAD;OAAgC,WAAU;iBAA1C,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAuB,EAAK;SAAa,CAAA,EACxD,EAAK,KACF;WACN,kBAAC,KAAD;QAAG,WAAU;kBAA4C,EAAK;QAAU,CAAA,CAC1D;SANI,EAAK,MAMT,GAEhB,kBAAC,OAAD;OAEE,WAAU;iBAFZ,CAIE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAuB,EAAK;SAAa,CAAA,EACxD,EAAK,KACF;WACN,kBAAC,KAAD;QAAG,WAAU;kBAA4C,EAAK;QAAU,CAAA,CACpE;SARC,EAAK,MAQN,CAET;MACG,CAAA,GACJ;KAEH,IACC,kBAAC,OAAD;MAAK,WAAU;gBACZ;MACG,CAAA,GACJ;KAEJ,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,WAAD;OAAS,WAAU;iBAAnB,CACE,kBAAC,MAAD;QAAI,WAAU;kBAA+C;QAAmB,CAAA,EAC/E,GAAS,cAAc,SACtB,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAQ,cAAc,KAAK,MAC1B,kBAAC,OAAD;SAEE,WAAU;mBAEV,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAU;WACT,CAAA,EACJ,kBAAC,KAAD;WAAG,WAAU;qBAAb,CAA2C,WACjC,EAAU,YAChB;aACA,EAAA,CAAA,EACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,KAAD;YAAG,WAAU;sBAAb,CACG,EAAU,QAAO,UAChB;eACJ,kBAAC,KAAD;YAAG,WAAU;sBAAb,CACG,EAAU,kBAAkB,EAAU,gBAAe,eACpD;cACA;aACF;;SACF,EArBC,EAAU,OAqBX,CACN;QACE,CAAA,GAEN,kBAAC,GAAD;QACE,cAAa;QACb,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;QACnC,OAAM;QACN,aAAY;QACZ,CAAA,CAEI;UAEV,kBAAC,WAAD;OAAS,WAAU;iBAAnB,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA+C;SAAoB,CAAA,EAChF,EAAS,SACR,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD;WAAI,WAAU;qBAAd;YACE,kBAAC,MAAD;aAAI,WAAU;uBAAY;aAAS,CAAA;YACnC,kBAAC,MAAD;aAAI,WAAU;uBAAY;aAAY,CAAA;YACtC,kBAAC,MAAD;aAAI,WAAU;uBAAY;aAAS,CAAA;YACnC,kBAAC,MAAD;aAAI,WAAU;uBAAY;aAAY,CAAA;YACtC,kBAAC,MAAD;aAAI,WAAU;uBAAY;aAAW,CAAA;YACrC,kBAAC,MAAD;aAAI,WAAU;uBAAY;aAAY,CAAA;YACnC;cACC,CAAA,EACR,kBAAC,SAAD,EAAA,UACG,EAAS,KAAK,MACb,kBAAC,MAAD;WAEE,WAAU;WACV,eAAe,EAAqB,EAAQ,GAAG;qBAHjD;YAKE,kBAAC,MAAD;aAAI,WAAU;uBAAyB,EAAQ;aAAe,CAAA;YAC9D,kBAAC,MAAD;aAAI,WAAU;uBAAa,EAAQ;aAAiB,CAAA;YACpD,kBAAC,MAAD;aAAI,WAAU;uBAAa,EAAQ,eAAe;aAAS,CAAA;YAC3D,kBAAC,MAAD;aAAI,WAAU;uBAAa,EAAQ,oBAAoB;aAAS,CAAA;YAChE,kBAAC,MAAD;aAAI,WAAU;uBAAa,EAAQ;aAAY,CAAA;YAC/C,kBAAC,MAAD;aAAI,WAAU;uBACX,EAAmB,EAAQ,cAAc;aACvC,CAAA;YACF;aAZE,EAAQ,GAYV,CACL,EACI,CAAA,CACF;;SACJ,CAAA,GAEN,kBAAC,GAAD;SACE,cAAa;SACb,MAAM,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;SACtC,OAAM;SACN,aAAY;SACZ,CAAA,CAEA;WAEN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA+C;SAAmB,CAAA,EAC/E,EAAsB,SACrB,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAsB,KAAK,MAC1B,kBAAC,OAAD;UAEE,WAAU;oBAEV,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;YAAG,WAAU;sBAA2C,EAAM;YAAS,CAAA,EACvE,kBAAC,KAAD;YAAG,WAAU;sBACV,EAAmB,EAAM,WAAW;YACnC,CAAA,CACA,EAAA,CAAA,EACN,kBAAC,KAAD;YAAG,WAAU;sBACV,EAAM,cACH,GAAG,EAAM,YAAY,GAAG,EAAM,YAAY,UAC1C;YACF,CAAA,CACA;;UACF,EAhBC,EAAM,GAgBP,CACN;SACE,CAAA,GAEN,kBAAC,GAAD;SACE,cAAa;SACb,MAAM,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;SACtC,OAAM;SACN,aAAY;SACZ,CAAA,CAEA;UACE;SACN;;KACF;;GACK,CAAA;EACG,CAAA"}

package/dist/admin/pages/RolesPermissionsPage.js

@@ -7,15 +7,17 @@ import { useGetResourceTypesQuery as s, useListRolesQuery as c } from "../../gen
 import { useMemo as l, useState as u } from "react";
 import { Pencil as d, Plus as f, Search as p, Shield as m, Trash2 as h } from "lucide-react";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { EmphasisPanel as v, PagePurpose as y } from "@burdenoff/fe-libs/ui";
 //#region src/admin/pages/RolesPermissionsPage.tsx
-function v() {
-	let [v, y] = u(""), { data: b, loading: x, error: S } = c({ variables: { scopeId: "global" } }), { data: C } = s(), w = l(() => b?.roles ?? [], [b]), T = l(() => {
-		if (!v.trim()) return w;
-		let e = v.toLowerCase();
-		return w.filter((t) => t.name.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e));
-	}, [w, v]);
+function b() {
+	let [b, x] = u(""), { data: S, loading: C, error: w } = c({ variables: { scopeId: "global" } }), { data: T } = s(), E = l(() => S?.roles ?? [], [S]), D = l(() => {
+		if (!b.trim()) return E;
+		let e = b.toLowerCase();
+		return E.filter((t) => t.name.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e));
+	}, [E, b]);
 	return /* @__PURE__ */ g(i, {
 		title: "Roles & Permissions",
+		gradientWord: "Permissions",
 		description: "Manage platform roles and global permissions",
 		actions: /* @__PURE__ */ _(t, {
 			size: "sm",
@@ -23,123 +25,142 @@ function v() {
 		}),
 		children: /* @__PURE__ */ _("div", {
 			className: "space-y-4",
-			children: [/* @__PURE__ */ _("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ _("div", {
-					className: "relative flex-1 max-w-sm",
-					children: [/* @__PURE__ */ g(p, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ g(r, {
-						placeholder: "Search roles...",
-						className: "pl-9",
-						value: v,
-						onChange: (e) => y(e.target.value)
-					})]
-				}), /* @__PURE__ */ g("div", {
-					className: "flex items-center gap-2",
-					children: /* @__PURE__ */ _(e, {
-						variant: "outline",
-						className: "h-8",
-						children: [C?.resourceTypes?.length ?? 0, " Resource Types"]
-					})
-				})]
-			}), S ? /* @__PURE__ */ g(n, {
-				icon: /* @__PURE__ */ g(m, { className: "h-8 w-8 text-status-error-text" }),
-				title: "Error loading roles",
-				description: S.message
-			}) : /* @__PURE__ */ g(a, {
-				columns: [
-					{
-						key: "name",
-						header: "Role Name",
-						render: (t) => /* @__PURE__ */ _("div", {
-							className: "flex flex-col text-left",
-							children: [/* @__PURE__ */ _("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ g("span", {
-									className: "font-semibold text-text-primary",
-									children: t.name
-								}), t.isSystem && /* @__PURE__ */ g(e, {
-									variant: "secondary",
-									className: "h-4 px-1 text-[10px]",
-									children: "System"
-								})]
-							}), t.description && /* @__PURE__ */ g("span", {
-								className: "mt-0.5 line-clamp-1 text-xs text-text-secondary",
-								children: t.description
-							})]
+			children: [
+				/* @__PURE__ */ g(y, { children: "Roles bundle together the permissions a person can hold across the platform. Use this page to review what each role can do, create new roles for different kinds of operators, and keep least-privilege access tidy as your team grows." }),
+				/* @__PURE__ */ _(v, {
+					className: "flex items-center gap-4 p-5",
+					children: [/* @__PURE__ */ g("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__ */ g(m, { className: "h-6 w-6" })
+					}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("div", {
+						className: "text-3xl font-bold tabular-nums text-text-primary",
+						children: E.length
+					}), /* @__PURE__ */ g("p", {
+						className: "text-sm text-text-secondary",
+						children: "roles defined platform-wide"
+					})] })]
+				}),
+				/* @__PURE__ */ _("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ _("div", {
+						className: "relative flex-1 max-w-sm",
+						children: [/* @__PURE__ */ g(p, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ g(r, {
+							placeholder: "Search roles...",
+							className: "pl-9",
+							value: b,
+							onChange: (e) => x(e.target.value)
+						})]
+					}), /* @__PURE__ */ g("div", {
+						className: "flex items-center gap-2",
+						children: /* @__PURE__ */ _(e, {
+							variant: "outline",
+							className: "h-8",
+							children: [T?.resourceTypes?.length ?? 0, " Resource Types"]
 						})
-					},
-					{
-						key: "priority",
-						header: "Priority",
-						align: "center",
-						width: "80px",
-						render: (e) => /* @__PURE__ */ g("span", {
-							className: "rounded bg-bg-sunken px-2 py-0.5 text-xs font-medium",
-							children: e.priority
-						})
-					},
-					{
-						key: "permissions",
-						header: "Default Permissions",
-						render: (t) => /* @__PURE__ */ g("div", {
-							className: "flex max-w-md flex-wrap gap-1 text-left",
-							children: t.defaultPermissions && t.defaultPermissions.length > 0 ? t.defaultPermissions.map((t) => /* @__PURE__ */ _(e, {
-								variant: "outline",
-								className: "bg-bg-surface/50 px-1 py-0 font-normal text-[10px]",
-								children: [/* @__PURE__ */ _("span", {
-									className: "mr-1 text-text-secondary",
-									children: [t.resourceType, ":"]
-								}), /* @__PURE__ */ g("span", {
-									className: "font-medium",
-									children: t.level
+					})]
+				}),
+				w ? /* @__PURE__ */ g(n, {
+					illustration: "empty-generic",
+					icon: /* @__PURE__ */ g(m, { className: "h-8 w-8 text-status-error-text" }),
+					title: "Error loading roles",
+					description: w.message
+				}) : /* @__PURE__ */ g(a, {
+					columns: [
+						{
+							key: "name",
+							header: "Role Name",
+							render: (t) => /* @__PURE__ */ _("div", {
+								className: "flex flex-col text-left",
+								children: [/* @__PURE__ */ _("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ g("span", {
+										className: "font-semibold text-text-primary",
+										children: t.name
+									}), t.isSystem && /* @__PURE__ */ g(e, {
+										variant: "secondary",
+										className: "h-4 px-1 text-[10px]",
+										children: "System"
+									})]
+								}), t.description && /* @__PURE__ */ g("span", {
+									className: "mt-0.5 line-clamp-1 text-xs text-text-secondary",
+									children: t.description
 								})]
-							}, t.id)) : /* @__PURE__ */ g("span", {
-								className: "text-xs italic text-text-secondary",
-								children: "No permissions defined"
 							})
-						})
-					},
-					{
-						key: "actions",
-						header: "",
-						align: "right",
-						width: "50px",
-						render: (e) => /* @__PURE__ */ g(o, { actions: [{
-							key: "edit",
-							label: "Edit Role",
-							icon: /* @__PURE__ */ g(d, { className: "h-4 w-4" }),
-							onClick: () => console.log("Edit", e.id),
-							disabled: e.isSystem
-						}, {
-							key: "delete",
-							label: "Delete Role",
-							icon: /* @__PURE__ */ g(h, { className: "h-4 w-4" }),
-							onClick: () => console.log("Delete", e.id),
-							destructive: !0,
-							disabled: e.isSystem,
-							separator: !0
-						}] })
-					}
-				],
-				data: T,
-				keyExtractor: (e) => e.id,
-				loading: x,
-				emptyState: /* @__PURE__ */ g(n, {
-					icon: /* @__PURE__ */ g(m, { className: "h-8 w-8" }),
-					title: "No roles found",
-					description: v ? `No roles match "${v}"` : "Roles and permissions will appear here when they are created",
-					action: v ? /* @__PURE__ */ g(t, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => y(""),
-						children: "Clear Search"
-					}) : void 0
+						},
+						{
+							key: "priority",
+							header: "Priority",
+							align: "center",
+							width: "80px",
+							render: (e) => /* @__PURE__ */ g("span", {
+								className: "rounded bg-bg-sunken px-2 py-0.5 text-xs font-medium",
+								children: e.priority
+							})
+						},
+						{
+							key: "permissions",
+							header: "Default Permissions",
+							render: (t) => /* @__PURE__ */ g("div", {
+								className: "flex max-w-md flex-wrap gap-1 text-left",
+								children: t.defaultPermissions && t.defaultPermissions.length > 0 ? t.defaultPermissions.map((t) => /* @__PURE__ */ _(e, {
+									variant: "outline",
+									className: "bg-bg-surface/50 px-1 py-0 font-normal text-[10px]",
+									children: [/* @__PURE__ */ _("span", {
+										className: "mr-1 text-text-secondary",
+										children: [t.resourceType, ":"]
+									}), /* @__PURE__ */ g("span", {
+										className: "font-medium",
+										children: t.level
+									})]
+								}, t.id)) : /* @__PURE__ */ g("span", {
+									className: "text-xs italic text-text-secondary",
+									children: "No permissions defined"
+								})
+							})
+						},
+						{
+							key: "actions",
+							header: "",
+							align: "right",
+							width: "50px",
+							render: (e) => /* @__PURE__ */ g(o, { actions: [{
+								key: "edit",
+								label: "Edit Role",
+								icon: /* @__PURE__ */ g(d, { className: "h-4 w-4" }),
+								onClick: () => console.log("Edit", e.id),
+								disabled: e.isSystem
+							}, {
+								key: "delete",
+								label: "Delete Role",
+								icon: /* @__PURE__ */ g(h, { className: "h-4 w-4" }),
+								onClick: () => console.log("Delete", e.id),
+								destructive: !0,
+								disabled: e.isSystem,
+								separator: !0
+							}] })
+						}
+					],
+					data: D,
+					keyExtractor: (e) => e.id,
+					loading: C,
+					emptyState: /* @__PURE__ */ g(n, {
+						illustration: "empty-people",
+						icon: /* @__PURE__ */ g(m, { className: "h-8 w-8" }),
+						title: "No roles found",
+						description: b ? `No roles match "${b}"` : "Roles and permissions will appear here when they are created",
+						action: b ? /* @__PURE__ */ g(t, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => x(""),
+							children: "Clear Search"
+						}) : void 0
+					})
 				})
-			})]
+			]
 		})
 	});
 }
 //#endregion
-export { v as RolesPermissionsPage };
+export { b as RolesPermissionsPage };
 
 //# sourceMappingURL=RolesPermissionsPage.js.map