udp-react-enterprise-component-library 26.5.0-beta.2 → 26.5.0-beta.21

package/dist/udp/pages/UdpQuestionFormOverviewPage/OverviewTab.mjs

@@ -0,0 +1,943 @@
+import { c } from "../../../reactCompilerRuntime.mjs";
+import { UdpCard } from "../../../UI/fluent-web-components/UdpCard.mjs";
+import { UdpFlexbox } from "../../../UI/fluent-web-components/UdpFlexbox.mjs";
+import { UdpSpinner } from "../../../UI/fluent-web-components/UdpSpinner.mjs";
+import { UdpText } from "../../../UI/fluent-web-components/UdpText.mjs";
+import { ClientSideUdpGrid } from "../../../UI/templates/newGrid/ClientSideUdpGrid.mjs";
+import { UdpAgBarChart } from "../../../UI/charts/ag/UdpAgBarChart.mjs";
+import { UdpAgLineChart } from "../../../UI/charts/ag/UdpAgLineChart.mjs";
+import { UdpAgAreaChart } from "../../../UI/charts/ag/UdpAgAreaChart.mjs";
+import { UdpAgDonutChart } from "../../../UI/charts/ag/UdpAgDonutChart.mjs";
+import React from "react";
+//#region src/udp/pages/UdpQuestionFormOverviewPage/OverviewTab.jsx
+const SUBMISSION_STATUS = {
+	IN_PROGRESS: 1,
+	SUBMITTED: 2,
+	CREATED: 3
+};
+const WEEKS_IN_SPARKLINE = 12;
+const TOP_SUBMITTERS_LIMIT = 6;
+const RECENT_SUBMISSIONS_LIMIT = 6;
+const SUBMITTER_NAME_MAX = 22;
+const kpiRowStyle = {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 16,
+	alignContent: "flex-start"
+};
+const kpiCardWrapStyle = {
+	flex: "1 1 200px",
+	minWidth: 0,
+	display: "flex"
+};
+const kpiBodyStyle = {
+	padding: "16px 16px 8px",
+	display: "flex",
+	flexDirection: "column",
+	gap: 6
+};
+const kpiHeaderRowStyle = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: 8
+};
+const mutedStyle = { color: "var(--colorNeutralForeground3)" };
+const SPARK_HEIGHT = 48;
+const analyticsRowStyle = {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 16,
+	alignItems: "stretch"
+};
+const analyticsCardWrapStyle = {
+	flex: "1 1 280px",
+	minWidth: 0
+};
+const CHART_HEIGHT = 240;
+const chartFrameStyle = {
+	padding: 16,
+	display: "flex",
+	flexDirection: "column",
+	gap: 12
+};
+const chartTitleStyle = { display: "block" };
+const chartSubStyle = {
+	display: "block",
+	color: "var(--colorNeutralForeground3)"
+};
+const emptyStateStyle = { color: "var(--colorNeutralForeground3)" };
+const startOfWeek = (input) => {
+	const d = new Date(input);
+	d.setHours(0, 0, 0, 0);
+	d.setDate(d.getDate() - d.getDay());
+	return d;
+};
+const countSubmissionsThisWeek = (submissions) => {
+	const sevenDaysAgo = Date.now() - 7 * 86400 * 1e3;
+	return submissions.filter((s) => {
+		const ts = s.formSubmission_InitialCreatedOn;
+		if (!ts) return false;
+		return new Date(ts).getTime() >= sevenDaysAgo;
+	}).length;
+};
+const weeklyCounts = (submissions) => {
+	const counts = new Array(WEEKS_IN_SPARKLINE).fill(0);
+	const thisWeekMs = startOfWeek(Date.now()).getTime();
+	const WEEK_MS = 7 * 86400 * 1e3;
+	for (const s of submissions) {
+		const ts = s.formSubmission_InitialCreatedOn || s.formSubmission_LastModifiedOn;
+		if (!ts) continue;
+		const back = Math.round((thisWeekMs - startOfWeek(ts).getTime()) / WEEK_MS);
+		if (back < 0 || back >= WEEKS_IN_SPARKLINE) continue;
+		const i = WEEKS_IN_SPARKLINE - 1 - back;
+		counts[i] += 1;
+	}
+	return counts;
+};
+const formatRelative = (value) => {
+	if (!value) return "—";
+	const then = new Date(value).getTime();
+	if (Number.isNaN(then)) return "—";
+	const diffSec = Math.round((Date.now() - then) / 1e3);
+	if (diffSec < 60) return "just now";
+	if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
+	if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
+	if (diffSec < 86400 * 30) return `${Math.floor(diffSec / 86400)}d ago`;
+	return new Date(value).toLocaleDateString();
+};
+const formatDateLong = (value) => value ? new Date(value).toLocaleDateString(void 0, {
+	year: "numeric",
+	month: "short",
+	day: "numeric"
+}) : "";
+const truncate = (s, max) => s && s.length > max ? `${s.slice(0, max - 1)}…` : s;
+const weekOverWeekChange = (series) => {
+	if (!series || series.length < 2) return null;
+	const cur = series[series.length - 1];
+	const prev = series[series.length - 2];
+	if (prev === 0) return null;
+	const pct = (cur - prev) / prev * 100;
+	if (!Number.isFinite(pct)) return null;
+	const rounded = Math.round(pct * 10) / 10;
+	return {
+		up: rounded >= 0,
+		text: `${rounded >= 0 ? "+" : ""}${rounded.toFixed(1)}%`
+	};
+};
+const STATUS_BADGE = {
+	[SUBMISSION_STATUS.SUBMITTED]: { label: "Submitted" },
+	[SUBMISSION_STATUS.IN_PROGRESS]: { label: "In progress" },
+	[SUBMISSION_STATUS.CREATED]: { label: "Created" }
+};
+const initials = (name) => String(name ?? "").split(/\s+/).filter(Boolean).map((p) => p[0]).join("").slice(0, 2).toUpperCase() || "—";
+const OverviewTab = (t0) => {
+	const $ = c(144);
+	const { submissions, versions, submissionsLoading, onOpenSubmission, onTabRequest } = t0;
+	const total = submissions.length;
+	let t1;
+	if ($[0] !== submissions) {
+		t1 = submissions.filter(_temp);
+		$[0] = submissions;
+		$[1] = t1;
+	} else t1 = $[1];
+	const submittedCount = t1.length;
+	let t2;
+	if ($[2] !== submissions) {
+		t2 = submissions.filter(_temp2);
+		$[2] = submissions;
+		$[3] = t2;
+	} else t2 = $[3];
+	const inProgressCount = t2.length;
+	let t3;
+	if ($[4] !== submissions) {
+		t3 = submissions.filter(_temp3);
+		$[4] = submissions;
+		$[5] = t3;
+	} else t3 = $[5];
+	const createdCount = t3.length;
+	let t4;
+	if ($[6] !== submissions) {
+		t4 = submissions.map(_temp4).filter(Boolean).sort().pop() ?? null;
+		$[6] = submissions;
+		$[7] = t4;
+	} else t4 = $[7];
+	const lastActivity = t4;
+	let t5;
+	if ($[8] !== submissions) {
+		t5 = countSubmissionsThisWeek(submissions);
+		$[8] = submissions;
+		$[9] = t5;
+	} else t5 = $[9];
+	const submissionsThisWeek = t5;
+	let t6;
+	if ($[10] !== submissions) {
+		t6 = new Set(submissions.map(_temp5));
+		$[10] = submissions;
+		$[11] = t6;
+	} else t6 = $[11];
+	const uniqueSubmitters = t6.size;
+	let t7;
+	if ($[12] !== createdCount || $[13] !== inProgressCount || $[14] !== lastActivity || $[15] !== submissionsThisWeek || $[16] !== submittedCount || $[17] !== total || $[18] !== uniqueSubmitters) {
+		t7 = {
+			total,
+			submittedCount,
+			inProgressCount,
+			createdCount,
+			lastActivity,
+			submissionsThisWeek,
+			uniqueSubmitters
+		};
+		$[12] = createdCount;
+		$[13] = inProgressCount;
+		$[14] = lastActivity;
+		$[15] = submissionsThisWeek;
+		$[16] = submittedCount;
+		$[17] = total;
+		$[18] = uniqueSubmitters;
+		$[19] = t7;
+	} else t7 = $[19];
+	const stats = t7;
+	let t8;
+	if ($[20] !== submissions) {
+		t8 = weeklyCounts(submissions);
+		$[20] = submissions;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== t8) {
+		t9 = { counts: t8 };
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	const weekly = t9;
+	let t10;
+	if ($[24] !== stats.submittedCount) {
+		t10 = {
+			label: "Submitted",
+			count: stats.submittedCount
+		};
+		$[24] = stats.submittedCount;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] !== stats.inProgressCount) {
+		t11 = {
+			label: "In progress",
+			count: stats.inProgressCount
+		};
+		$[26] = stats.inProgressCount;
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== stats.createdCount) {
+		t12 = {
+			label: "Created",
+			count: stats.createdCount
+		};
+		$[28] = stats.createdCount;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== t10 || $[31] !== t11 || $[32] !== t12) {
+		t13 = [
+			t10,
+			t11,
+			t12
+		];
+		$[30] = t10;
+		$[31] = t11;
+		$[32] = t12;
+		$[33] = t13;
+	} else t13 = $[33];
+	const statusDonutData = t13;
+	let t14;
+	if ($[34] !== submissions || $[35] !== versions) {
+		const byVersion = /* @__PURE__ */ new Map();
+		for (const s_4 of submissions) {
+			const v = s_4.formSubmission_FormVersion;
+			if (v == null) continue;
+			byVersion.set(v, (byVersion.get(v) || 0) + 1);
+		}
+		const versionSet = new Set([...versions.map(_temp6), ...byVersion.keys()]);
+		t14 = Array.from(versionSet).filter(_temp7).sort(_temp8).map((v_2) => ({
+			label: `v${v_2}`,
+			count: byVersion.get(v_2) ?? 0
+		}));
+		$[34] = submissions;
+		$[35] = versions;
+		$[36] = t14;
+	} else t14 = $[36];
+	const perVersion = t14;
+	let t15;
+	if ($[37] !== submissions) {
+		const byUser = /* @__PURE__ */ new Map();
+		for (const s_5 of submissions) {
+			const name = s_5.formSubmission_UserDisplayName || s_5.formSubmission_unityUserId || "— unknown —";
+			byUser.set(name, (byUser.get(name) || 0) + 1);
+		}
+		t15 = Array.from(byUser.entries()).map(_temp9).sort(_temp0).slice(0, TOP_SUBMITTERS_LIMIT);
+		$[37] = submissions;
+		$[38] = t15;
+	} else t15 = $[38];
+	const topSubmitters = t15;
+	let t16;
+	if ($[39] !== submissions) {
+		t16 = submissions.slice(0, RECENT_SUBMISSIONS_LIMIT);
+		$[39] = submissions;
+		$[40] = t16;
+	} else t16 = $[40];
+	const recentSubmissions = t16;
+	let t17;
+	if ($[41] !== weekly.counts) {
+		t17 = weekly.counts.map(_temp1);
+		$[41] = weekly.counts;
+		$[42] = t17;
+	} else t17 = $[42];
+	let t18;
+	let t19;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = [{
+			type: "area",
+			xKey: "x",
+			yKey: "y",
+			interpolation: { type: "smooth" }
+		}];
+		t19 = {
+			x: { type: "category" },
+			y: { type: "number" }
+		};
+		$[43] = t18;
+		$[44] = t19;
+	} else {
+		t18 = $[43];
+		t19 = $[44];
+	}
+	let t20;
+	if ($[45] !== t17) {
+		t20 = {
+			data: t17,
+			series: t18,
+			axes: t19
+		};
+		$[45] = t17;
+		$[46] = t20;
+	} else t20 = $[46];
+	const totalSparkOptions = t20;
+	let t21;
+	if ($[47] !== stats.total) {
+		t21 = stats.total.toLocaleString();
+		$[47] = stats.total;
+		$[48] = t21;
+	} else t21 = $[48];
+	let t22;
+	if ($[49] !== t21) {
+		t22 = {
+			text: t21,
+			fontSize: 28
+		};
+		$[49] = t21;
+		$[50] = t22;
+	} else t22 = $[50];
+	const t23 = stats.total === 1 ? "submission" : "submissions";
+	let t24;
+	if ($[51] !== t23) {
+		t24 = {
+			text: t23,
+			color: "var(--colorNeutralForeground3)"
+		};
+		$[51] = t23;
+		$[52] = t24;
+	} else t24 = $[52];
+	let t25;
+	if ($[53] !== t22 || $[54] !== t24) {
+		t25 = [{
+			type: "donut",
+			angleKey: "count",
+			legendItemKey: "label",
+			innerRadiusRatio: .7,
+			innerLabels: [t22, t24]
+		}];
+		$[53] = t22;
+		$[54] = t24;
+		$[55] = t25;
+	} else t25 = $[55];
+	let t26;
+	if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
+		t26 = {
+			enabled: true,
+			position: "bottom"
+		};
+		$[56] = t26;
+	} else t26 = $[56];
+	let t27;
+	if ($[57] !== statusDonutData || $[58] !== t25) {
+		t27 = {
+			data: statusDonutData,
+			series: t25,
+			legend: t26
+		};
+		$[57] = statusDonutData;
+		$[58] = t25;
+		$[59] = t27;
+	} else t27 = $[59];
+	const statusDonutOptions = t27;
+	let t28;
+	let t29;
+	let t30;
+	if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = [{
+			type: "bar",
+			xKey: "label",
+			yKey: "count"
+		}];
+		t29 = {
+			x: {
+				type: "category",
+				position: "bottom",
+				paddingInner: .4,
+				paddingOuter: .35
+			},
+			y: {
+				type: "number",
+				position: "left"
+			}
+		};
+		t30 = { enabled: false };
+		$[60] = t28;
+		$[61] = t29;
+		$[62] = t30;
+	} else {
+		t28 = $[60];
+		t29 = $[61];
+		t30 = $[62];
+	}
+	let t31;
+	if ($[63] !== perVersion) {
+		t31 = {
+			data: perVersion,
+			series: t28,
+			axes: t29,
+			legend: t30
+		};
+		$[63] = perVersion;
+		$[64] = t31;
+	} else t31 = $[64];
+	const byVersionOptions = t31;
+	let t32;
+	let t33;
+	let t34;
+	if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
+		t32 = [{
+			type: "bar",
+			direction: "horizontal",
+			xKey: "name",
+			yKey: "count"
+		}];
+		t33 = {
+			x: {
+				type: "category",
+				position: "left",
+				paddingInner: .4,
+				paddingOuter: .35
+			},
+			y: {
+				type: "number",
+				position: "bottom"
+			}
+		};
+		t34 = { enabled: false };
+		$[65] = t32;
+		$[66] = t33;
+		$[67] = t34;
+	} else {
+		t32 = $[65];
+		t33 = $[66];
+		t34 = $[67];
+	}
+	let t35;
+	if ($[68] !== topSubmitters) {
+		t35 = {
+			data: topSubmitters,
+			series: t32,
+			axes: t33,
+			legend: t34
+		};
+		$[68] = topSubmitters;
+		$[69] = t35;
+	} else t35 = $[69];
+	const topSubmittersOptions = t35;
+	let t36;
+	if ($[70] === Symbol.for("react.memo_cache_sentinel")) {
+		t36 = {
+			Submitted: "success",
+			"In progress": "warning",
+			Created: "info"
+		};
+		$[70] = t36;
+	} else t36 = $[70];
+	const recentStatusConfig = t36;
+	let t37;
+	let t38;
+	if ($[71] === Symbol.for("react.memo_cache_sentinel")) {
+		t37 = {
+			headerName: "Submitter",
+			field: "formSubmission_UserDisplayName",
+			flex: 1,
+			minWidth: 180,
+			cellRenderer: "avatarRenderer",
+			cellRendererParams: {
+				getName: _temp10,
+				getInitials: _temp11,
+				color: "colorful",
+				getValues: _temp12,
+				size: 24,
+				shape: "circular"
+			}
+		};
+		t38 = {
+			headerName: "Version",
+			field: "formSubmission_FormVersion",
+			width: 100,
+			valueFormatter: _temp13
+		};
+		$[71] = t37;
+		$[72] = t38;
+	} else {
+		t37 = $[71];
+		t38 = $[72];
+	}
+	let t39;
+	let t40;
+	if ($[73] === Symbol.for("react.memo_cache_sentinel")) {
+		t39 = {
+			headerName: "Status",
+			field: "formSubmission_Status",
+			width: 140,
+			cellRenderer: "statusRenderer",
+			cellRendererParams: {
+				statusMappingConfig: recentStatusConfig,
+				getStatusValue: _temp14
+			}
+		};
+		t40 = {
+			headerName: "When",
+			field: "formSubmission_LastModifiedOn",
+			width: 130,
+			valueFormatter: _temp15
+		};
+		$[73] = t39;
+		$[74] = t40;
+	} else {
+		t39 = $[73];
+		t40 = $[74];
+	}
+	let t41;
+	if ($[75] !== onOpenSubmission) {
+		t41 = [
+			t37,
+			t38,
+			t39,
+			t40,
+			{
+				field: "actions",
+				cellRenderer: "actionsRenderer",
+				cellRendererParams: { actionList: [{
+					id: 1,
+					iconName: "eye",
+					title: "Open submission",
+					handleOnClick: (_e, p_5) => onOpenSubmission?.(p_5?.data)
+				}] }
+			}
+		];
+		$[75] = onOpenSubmission;
+		$[76] = t41;
+	} else t41 = $[76];
+	const recentColumnDefs = t41;
+	let t42;
+	if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+		t42 = {
+			pagination: false,
+			suppressCellFocus: true,
+			defaultColDef: {
+				sortable: false,
+				resizable: false,
+				filter: false
+			}
+		};
+		$[77] = t42;
+	} else t42 = $[77];
+	const recentGridOptions = t42;
+	let t43;
+	if ($[78] !== onTabRequest) {
+		t43 = {
+			title: "Recent submissions",
+			secondaryActionButtons: [{
+				label: "View all",
+				iconName: "arrow-right",
+				onClick: () => onTabRequest?.("submissions")
+			}]
+		};
+		$[78] = onTabRequest;
+		$[79] = t43;
+	} else t43 = $[79];
+	const recentGridHeaderConfig = t43;
+	let t44;
+	if ($[80] !== stats.total) {
+		t44 = stats.total.toLocaleString();
+		$[80] = stats.total;
+		$[81] = t44;
+	} else t44 = $[81];
+	let t45;
+	if ($[82] !== weekly.counts) {
+		t45 = weekOverWeekChange(weekly.counts);
+		$[82] = weekly.counts;
+		$[83] = t45;
+	} else t45 = $[83];
+	let t46;
+	if ($[84] !== submissionsLoading || $[85] !== t44 || $[86] !== t45 || $[87] !== totalSparkOptions) {
+		t46 = {
+			key: "submissions",
+			label: "Total submissions",
+			value: t44,
+			change: t45,
+			sparkOptions: totalSparkOptions,
+			sparkType: "area",
+			loading: submissionsLoading
+		};
+		$[84] = submissionsLoading;
+		$[85] = t44;
+		$[86] = t45;
+		$[87] = totalSparkOptions;
+		$[88] = t46;
+	} else t46 = $[88];
+	let t47;
+	if ($[89] !== stats.uniqueSubmitters) {
+		t47 = stats.uniqueSubmitters.toLocaleString();
+		$[89] = stats.uniqueSubmitters;
+		$[90] = t47;
+	} else t47 = $[90];
+	let t48;
+	if ($[91] !== stats.total) {
+		t48 = stats.total.toLocaleString();
+		$[91] = stats.total;
+		$[92] = t48;
+	} else t48 = $[92];
+	const t49 = `across ${t48} submission${stats.total === 1 ? "" : "s"}`;
+	let t50;
+	if ($[93] !== submissionsLoading || $[94] !== t47 || $[95] !== t49) {
+		t50 = {
+			key: "uniqueSubmitters",
+			label: "Unique submitters",
+			value: t47,
+			sub: t49,
+			loading: submissionsLoading
+		};
+		$[93] = submissionsLoading;
+		$[94] = t47;
+		$[95] = t49;
+		$[96] = t50;
+	} else t50 = $[96];
+	let t51;
+	if ($[97] !== stats.lastActivity) {
+		t51 = formatRelative(stats.lastActivity);
+		$[97] = stats.lastActivity;
+		$[98] = t51;
+	} else t51 = $[98];
+	let t52;
+	if ($[99] !== stats.lastActivity) {
+		t52 = stats.lastActivity ? formatDateLong(stats.lastActivity) : "—";
+		$[99] = stats.lastActivity;
+		$[100] = t52;
+	} else t52 = $[100];
+	let t53;
+	if ($[101] !== submissionsLoading || $[102] !== t51 || $[103] !== t52) {
+		t53 = {
+			key: "activity",
+			label: "Last activity",
+			value: t51,
+			sub: t52,
+			loading: submissionsLoading
+		};
+		$[101] = submissionsLoading;
+		$[102] = t51;
+		$[103] = t52;
+		$[104] = t53;
+	} else t53 = $[104];
+	let t54;
+	if ($[105] !== t46 || $[106] !== t50 || $[107] !== t53) {
+		t54 = [
+			t46,
+			t50,
+			t53
+		];
+		$[105] = t46;
+		$[106] = t50;
+		$[107] = t53;
+		$[108] = t54;
+	} else t54 = $[108];
+	const kpis = t54;
+	const hasData = stats.total > 0;
+	let t55;
+	if ($[109] !== kpis) {
+		t55 = /* @__PURE__ */ React.createElement("div", { style: kpiRowStyle }, kpis.map(_temp16));
+		$[109] = kpis;
+		$[110] = t55;
+	} else t55 = $[110];
+	let t56;
+	if ($[111] === Symbol.for("react.memo_cache_sentinel")) {
+		t56 = /* @__PURE__ */ React.createElement(UdpText, {
+			variant: "subtitle2",
+			weight: "semibold",
+			block: true,
+			style: chartTitleStyle
+		}, "Status breakdown");
+		$[111] = t56;
+	} else t56 = $[111];
+	let t57;
+	if ($[112] !== stats.total) {
+		t57 = stats.total.toLocaleString();
+		$[112] = stats.total;
+		$[113] = t57;
+	} else t57 = $[113];
+	const t58 = stats.total === 1 ? "" : "s";
+	let t59;
+	if ($[114] !== t57 || $[115] !== t58) {
+		t59 = /* @__PURE__ */ React.createElement("div", null, t56, /* @__PURE__ */ React.createElement(UdpText, {
+			variant: "caption1",
+			block: true,
+			style: chartSubStyle
+		}, t57, " total submission", t58));
+		$[114] = t57;
+		$[115] = t58;
+		$[116] = t59;
+	} else t59 = $[116];
+	let t60;
+	if ($[117] !== hasData || $[118] !== statusDonutOptions) {
+		t60 = hasData ? /* @__PURE__ */ React.createElement("div", { style: {
+			height: CHART_HEIGHT,
+			position: "relative"
+		} }, /* @__PURE__ */ React.createElement(UdpAgDonutChart, {
+			shape: "rounded",
+			chartOptions: statusDonutOptions,
+			customHeight: "100%"
+		})) : /* @__PURE__ */ React.createElement(UdpText, {
+			variant: "caption1",
+			block: true,
+			style: emptyStateStyle
+		}, "No submissions yet.");
+		$[117] = hasData;
+		$[118] = statusDonutOptions;
+		$[119] = t60;
+	} else t60 = $[119];
+	let t61;
+	if ($[120] !== t59 || $[121] !== t60) {
+		t61 = /* @__PURE__ */ React.createElement("div", { style: analyticsCardWrapStyle }, /* @__PURE__ */ React.createElement(UdpCard, { variant: "outlined" }, /* @__PURE__ */ React.createElement("div", { style: chartFrameStyle }, t59, t60)));
+		$[120] = t59;
+		$[121] = t60;
+		$[122] = t61;
+	} else t61 = $[122];
+	let t62;
+	if ($[123] === Symbol.for("react.memo_cache_sentinel")) {
+		t62 = /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(UdpText, {
+			variant: "subtitle2",
+			weight: "semibold",
+			block: true,
+			style: chartTitleStyle
+		}, "Submissions by version"), /* @__PURE__ */ React.createElement(UdpText, {
+			variant: "caption1",
+			block: true,
+			style: chartSubStyle
+		}, "All versions"));
+		$[123] = t62;
+	} else t62 = $[123];
+	let t63;
+	if ($[124] !== byVersionOptions || $[125] !== hasData) {
+		t63 = /* @__PURE__ */ React.createElement("div", { style: analyticsCardWrapStyle }, /* @__PURE__ */ React.createElement(UdpCard, { variant: "outlined" }, /* @__PURE__ */ React.createElement("div", { style: chartFrameStyle }, t62, hasData ? /* @__PURE__ */ React.createElement("div", { style: {
+			height: CHART_HEIGHT,
+			position: "relative"
+		} }, /* @__PURE__ */ React.createElement(UdpAgBarChart, {
+			shape: "rounded",
+			chartOptions: byVersionOptions,
+			customHeight: "100%"
+		})) : /* @__PURE__ */ React.createElement(UdpText, {
+			variant: "caption1",
+			block: true,
+			style: emptyStateStyle
+		}, "No submissions yet."))));
+		$[124] = byVersionOptions;
+		$[125] = hasData;
+		$[126] = t63;
+	} else t63 = $[126];
+	let t64;
+	if ($[127] === Symbol.for("react.memo_cache_sentinel")) {
+		t64 = /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(UdpText, {
+			variant: "subtitle2",
+			weight: "semibold",
+			block: true,
+			style: chartTitleStyle
+		}, "Top submitters"), /* @__PURE__ */ React.createElement(UdpText, {
+			variant: "caption1",
+			block: true,
+			style: chartSubStyle
+		}, "Lifetime, all versions"));
+		$[127] = t64;
+	} else t64 = $[127];
+	let t65;
+	if ($[128] !== topSubmitters.length || $[129] !== topSubmittersOptions) {
+		t65 = /* @__PURE__ */ React.createElement("div", { style: analyticsCardWrapStyle }, /* @__PURE__ */ React.createElement(UdpCard, { variant: "outlined" }, /* @__PURE__ */ React.createElement("div", { style: chartFrameStyle }, t64, topSubmitters.length === 0 ? /* @__PURE__ */ React.createElement(UdpText, {
+			variant: "caption1",
+			block: true,
+			style: emptyStateStyle
+		}, "No submitters yet.") : /* @__PURE__ */ React.createElement("div", { style: {
+			height: CHART_HEIGHT,
+			position: "relative"
+		} }, /* @__PURE__ */ React.createElement(UdpAgBarChart, {
+			shape: "rounded",
+			chartOptions: topSubmittersOptions,
+			customHeight: "100%"
+		})))));
+		$[128] = topSubmitters.length;
+		$[129] = topSubmittersOptions;
+		$[130] = t65;
+	} else t65 = $[130];
+	let t66;
+	if ($[131] !== t61 || $[132] !== t63 || $[133] !== t65) {
+		t66 = /* @__PURE__ */ React.createElement("div", { style: analyticsRowStyle }, t61, t63, t65);
+		$[131] = t61;
+		$[132] = t63;
+		$[133] = t65;
+		$[134] = t66;
+	} else t66 = $[134];
+	let t67;
+	if ($[135] !== recentColumnDefs || $[136] !== recentGridHeaderConfig || $[137] !== recentSubmissions || $[138] !== submissionsLoading) {
+		t67 = /* @__PURE__ */ React.createElement(UdpCard, {
+			variant: "outlined",
+			bodyPadding: false
+		}, /* @__PURE__ */ React.createElement(ClientSideUdpGrid, {
+			rowData: recentSubmissions,
+			loading: submissionsLoading,
+			columnDefs: recentColumnDefs,
+			gridOptions: recentGridOptions,
+			gridHeaderConfig: recentGridHeaderConfig,
+			gridHeight: "280px"
+		}));
+		$[135] = recentColumnDefs;
+		$[136] = recentGridHeaderConfig;
+		$[137] = recentSubmissions;
+		$[138] = submissionsLoading;
+		$[139] = t67;
+	} else t67 = $[139];
+	let t68;
+	if ($[140] !== t55 || $[141] !== t66 || $[142] !== t67) {
+		t68 = /* @__PURE__ */ React.createElement(UdpFlexbox, {
+			direction: "column",
+			gap: "md",
+			wrap: "nowrap"
+		}, t55, t66, t67);
+		$[140] = t55;
+		$[141] = t66;
+		$[142] = t67;
+		$[143] = t68;
+	} else t68 = $[143];
+	return t68;
+};
+function _temp(s) {
+	return s.formSubmission_Status === SUBMISSION_STATUS.SUBMITTED;
+}
+function _temp2(s_0) {
+	return s_0.formSubmission_Status === SUBMISSION_STATUS.IN_PROGRESS;
+}
+function _temp3(s_1) {
+	return s_1.formSubmission_Status === SUBMISSION_STATUS.CREATED;
+}
+function _temp4(s_2) {
+	return s_2.formSubmission_LastModifiedOn || s_2.formSubmission_SubmittedOn || s_2.formSubmission_InitialCreatedOn;
+}
+function _temp5(s_3) {
+	return s_3.formSubmission_unityUserId || s_3.formSubmission_UserDisplayName || "— unknown —";
+}
+function _temp6(v_0) {
+	return v_0.version;
+}
+function _temp7(v_1) {
+	return v_1 != null;
+}
+function _temp8(a, b) {
+	return a - b;
+}
+function _temp9(t0) {
+	const [name_0, count] = t0;
+	return {
+		name: truncate(name_0, SUBMITTER_NAME_MAX),
+		count
+	};
+}
+function _temp0(a_0, b_0) {
+	return b_0.count - a_0.count;
+}
+function _temp1(y, i) {
+	return {
+		x: `${i}`,
+		y
+	};
+}
+function _temp10(p) {
+	return p?.data?.formSubmission_UserDisplayName ?? "—";
+}
+function _temp11(p_0) {
+	return initials(p_0?.data?.formSubmission_UserDisplayName);
+}
+function _temp12(p_1) {
+	return { title: p_1?.data?.formSubmission_UserDisplayName ?? "—" };
+}
+function _temp13(p_2) {
+	return `v${p_2.value ?? "—"}`;
+}
+function _temp14(p_3) {
+	return STATUS_BADGE[p_3?.data?.formSubmission_Status]?.label ?? "—";
+}
+function _temp15(p_4) {
+	return formatRelative(p_4?.data?.formSubmission_LastModifiedOn ?? p_4?.data?.formSubmission_SubmittedOn);
+}
+function _temp16(k) {
+	return /* @__PURE__ */ React.createElement("div", {
+		key: k.key,
+		style: kpiCardWrapStyle
+	}, /* @__PURE__ */ React.createElement(UdpCard, {
+		variant: "outlined",
+		bodyPadding: false,
+		height: "100%",
+		style: { overflow: "hidden" }
+	}, /* @__PURE__ */ React.createElement("div", { style: kpiBodyStyle }, /* @__PURE__ */ React.createElement("div", { style: kpiHeaderRowStyle }, /* @__PURE__ */ React.createElement(UdpText, {
+		variant: "caption1",
+		block: true,
+		style: mutedStyle
+	}, k.label), k.change && /* @__PURE__ */ React.createElement(UdpText, {
+		variant: "caption1",
+		weight: "semibold",
+		block: true,
+		style: { color: k.change.up ? "var(--colorPaletteGreenForeground1)" : "var(--colorPaletteRedForeground1)" }
+	}, k.change.text)), k.loading ? /* @__PURE__ */ React.createElement(UdpSpinner, { size: "small" }) : /* @__PURE__ */ React.createElement(UdpText, {
+		variant: "title2",
+		weight: "bold",
+		block: true
+	}, String(k.value)), !k.sparkOptions && k.sub && /* @__PURE__ */ React.createElement(UdpText, {
+		variant: "caption1",
+		block: true,
+		style: mutedStyle
+	}, k.sub)), k.sparkOptions && /* @__PURE__ */ React.createElement("div", { style: { height: SPARK_HEIGHT } }, k.sparkType === "area" ? /* @__PURE__ */ React.createElement(UdpAgAreaChart, {
+		chrome: "flush",
+		chartOptions: k.sparkOptions
+	}) : k.sparkType === "line" ? /* @__PURE__ */ React.createElement(UdpAgLineChart, {
+		chrome: "flush",
+		chartOptions: k.sparkOptions
+	}) : /* @__PURE__ */ React.createElement(UdpAgBarChart, {
+		chrome: "flush",
+		chartOptions: k.sparkOptions
+	}))));
+}
+//#endregion
+export { OverviewTab };
+
+//# sourceMappingURL=OverviewTab.mjs.map