@alepha/ui 0.16.2 → 0.17.1

package/dist/admin/AdminJobDashboard-CrPxp0W1.js

@@ -0,0 +1,485 @@
+import { ActionButton, Flex, Text, useToast } from "@alepha/ui";
+import { IconAlertTriangle, IconCircleCheck, IconCircleX, IconClock, IconPlayerPlay, IconRefresh, IconTerminal2 } from "@tabler/icons-react";
+import { Badge, Paper, SimpleGrid, Table, ThemeIcon } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { AreaChart, BarChart, DonutChart } from "@mantine/charts";
+import { useCallback, useEffect, useState } from "react";
+
+//#region ../../src/admin/components/jobs/AdminJobDashboard.tsx
+const formatDuration = (start, end) => {
+	const startTime = new Date(start).getTime();
+	const duration = (end ? new Date(end).getTime() : Date.now()) - startTime;
+	if (duration < 1e3) return `${duration}ms`;
+	if (duration < 6e4) return `${(duration / 1e3).toFixed(1)}s`;
+	if (duration < 36e5) return `${Math.floor(duration / 6e4)}m ${Math.floor(duration % 6e4 / 1e3)}s`;
+	return `${Math.floor(duration / 36e5)}h ${Math.floor(duration % 36e5 / 6e4)}m`;
+};
+const getStatusColor = (status) => {
+	switch (status) {
+		case "completed": return "teal";
+		case "running": return "blue";
+		case "failed":
+		case "dead": return "red";
+		case "cancelled": return "orange";
+		case "scheduled": return "violet";
+		case "retrying": return "yellow";
+		case "pending": return "gray";
+		default: return "gray";
+	}
+};
+const getStatusIcon = (status, size = 14) => {
+	switch (status) {
+		case "completed": return /* @__PURE__ */ jsx(IconCircleCheck, { size });
+		case "failed":
+		case "dead": return /* @__PURE__ */ jsx(IconCircleX, { size });
+		case "running": return /* @__PURE__ */ jsx(IconPlayerPlay, { size });
+		case "cancelled": return /* @__PURE__ */ jsx(IconAlertTriangle, { size });
+		default: return /* @__PURE__ */ jsx(IconClock, { size });
+	}
+};
+const AdminJobDashboard = () => {
+	const client = useClient();
+	const { l } = useI18n();
+	const toast = useToast();
+	const [stats, setStats] = useState(null);
+	const [recent, setRecent] = useState([]);
+	const [failures, setFailures] = useState([]);
+	const [activity, setActivity] = useState([]);
+	const [queueDepth, setQueueDepth] = useState([]);
+	const loadData = useCallback(async () => {
+		try {
+			const [statsData, recentData, failureData, activityData, queueData] = await Promise.all([
+				client.getJobStats(),
+				client.findExecutions({ query: {
+					sort: "-createdAt",
+					size: 10
+				} }),
+				client.getTopFailures(),
+				client.getActivity({ query: { days: 14 } }),
+				client.getQueueDepth()
+			]);
+			setStats(statsData);
+			setRecent(recentData.content);
+			setFailures(failureData);
+			setActivity(activityData);
+			setQueueDepth(queueData);
+		} catch {
+			toast.danger("Failed to load dashboard data");
+		}
+	}, [client, toast]);
+	useEffect(() => {
+		loadData();
+	}, [loadData]);
+	const activityChartData = activity.map((point) => ({
+		date: new Date(point.date).toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric"
+		}),
+		completed: point.completed,
+		failed: point.failed
+	}));
+	const queueChartData = queueDepth.filter((q) => q.pending + q.running + q.scheduled + q.retrying + q.dead > 0).map((q) => ({
+		job: q.jobName.length > 20 ? `...${q.jobName.slice(q.jobName.length - 18)}` : q.jobName,
+		pending: q.pending,
+		running: q.running,
+		scheduled: q.scheduled,
+		retrying: q.retrying,
+		dead: q.dead
+	}));
+	const statusDonutData = stats ? [
+		{
+			name: "Running",
+			value: stats.running,
+			color: "blue"
+		},
+		{
+			name: "Pending",
+			value: stats.pending,
+			color: "gray"
+		},
+		{
+			name: "Scheduled",
+			value: stats.scheduled,
+			color: "violet"
+		},
+		{
+			name: "Retrying",
+			value: stats.retrying,
+			color: "yellow"
+		},
+		{
+			name: "Dead",
+			value: stats.dead,
+			color: "red"
+		}
+	].filter((d) => d.value > 0) : [];
+	return /* @__PURE__ */ jsxs(Flex, {
+		flex: 1,
+		direction: "column",
+		gap: "md",
+		p: "md",
+		children: [
+			/* @__PURE__ */ jsxs(Flex, {
+				justify: "space-between",
+				align: "center",
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "lg",
+					fw: 600,
+					children: "Jobs Dashboard"
+				}), /* @__PURE__ */ jsx(ActionButton, {
+					tooltip: "Refresh",
+					variant: "light",
+					size: "sm",
+					icon: IconRefresh,
+					onClick: loadData
+				})]
+			}),
+			stats && /* @__PURE__ */ jsxs(SimpleGrid, {
+				cols: {
+					base: 2,
+					sm: 4
+				},
+				spacing: "md",
+				children: [
+					/* @__PURE__ */ jsx(Paper, {
+						p: "md",
+						radius: "md",
+						withBorder: true,
+						children: /* @__PURE__ */ jsxs(Flex, {
+							justify: "space-between",
+							children: [/* @__PURE__ */ jsxs(Flex, {
+								direction: "column",
+								children: [/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "Registered"
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xl",
+									fw: 700,
+									ff: "monospace",
+									children: stats.registered
+								})]
+							}), /* @__PURE__ */ jsx(ThemeIcon, {
+								size: "lg",
+								radius: "md",
+								variant: "light",
+								color: "blue",
+								children: /* @__PURE__ */ jsx(IconTerminal2, { size: 20 })
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx(Paper, {
+						p: "md",
+						radius: "md",
+						withBorder: true,
+						children: /* @__PURE__ */ jsxs(Flex, {
+							justify: "space-between",
+							children: [/* @__PURE__ */ jsxs(Flex, {
+								direction: "column",
+								children: [/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "Running"
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xl",
+									fw: 700,
+									ff: "monospace",
+									c: stats.running > 0 ? "blue" : void 0,
+									children: stats.running
+								})]
+							}), /* @__PURE__ */ jsx(ThemeIcon, {
+								size: "lg",
+								radius: "md",
+								variant: "light",
+								color: stats.running > 0 ? "blue" : "gray",
+								children: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 20 })
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx(Paper, {
+						p: "md",
+						radius: "md",
+						withBorder: true,
+						children: /* @__PURE__ */ jsxs(Flex, {
+							justify: "space-between",
+							children: [/* @__PURE__ */ jsxs(Flex, {
+								direction: "column",
+								children: [/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "Completed 24h"
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xl",
+									fw: 700,
+									ff: "monospace",
+									c: "teal",
+									children: stats.completed24h
+								})]
+							}), /* @__PURE__ */ jsx(ThemeIcon, {
+								size: "lg",
+								radius: "md",
+								variant: "light",
+								color: "teal",
+								children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 20 })
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx(Paper, {
+						p: "md",
+						radius: "md",
+						withBorder: true,
+						children: /* @__PURE__ */ jsxs(Flex, {
+							justify: "space-between",
+							children: [/* @__PURE__ */ jsxs(Flex, {
+								direction: "column",
+								children: [/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									tt: "uppercase",
+									fw: 600,
+									children: "Failed 24h"
+								}), /* @__PURE__ */ jsx(Text, {
+									size: "xl",
+									fw: 700,
+									ff: "monospace",
+									c: stats.failed24h > 0 ? "red" : void 0,
+									children: stats.failed24h
+								})]
+							}), /* @__PURE__ */ jsx(ThemeIcon, {
+								size: "lg",
+								radius: "md",
+								variant: "light",
+								color: stats.failed24h > 0 ? "red" : "gray",
+								children: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 20 })
+							})]
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(SimpleGrid, {
+				cols: {
+					base: 1,
+					md: 2
+				},
+				spacing: "md",
+				children: [/* @__PURE__ */ jsxs(Paper, {
+					p: "md",
+					radius: "md",
+					withBorder: true,
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						fw: 600,
+						mb: "sm",
+						children: "Activity (14d)"
+					}), activityChartData.length > 0 ? /* @__PURE__ */ jsx(AreaChart, {
+						h: 220,
+						data: activityChartData,
+						dataKey: "date",
+						series: [{
+							name: "completed",
+							label: "Completed",
+							color: "teal.6"
+						}, {
+							name: "failed",
+							label: "Failed",
+							color: "red.6"
+						}],
+						curveType: "monotone",
+						withGradient: true,
+						withTooltip: true,
+						withDots: false
+					}) : /* @__PURE__ */ jsx(Flex, {
+						h: 220,
+						align: "center",
+						justify: "center",
+						children: /* @__PURE__ */ jsx(Text, {
+							size: "sm",
+							c: "dimmed",
+							children: "No activity data"
+						})
+					})]
+				}), /* @__PURE__ */ jsxs(Paper, {
+					p: "md",
+					radius: "md",
+					withBorder: true,
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						fw: 600,
+						mb: "sm",
+						children: "Active Executions"
+					}), statusDonutData.length > 0 ? /* @__PURE__ */ jsx(DonutChart, {
+						h: 220,
+						data: statusDonutData,
+						withTooltip: true,
+						tooltipDataSource: "segment",
+						chartLabel: String(statusDonutData.reduce((sum, d) => sum + d.value, 0))
+					}) : /* @__PURE__ */ jsx(Flex, {
+						h: 220,
+						align: "center",
+						justify: "center",
+						children: /* @__PURE__ */ jsx(Text, {
+							size: "sm",
+							c: "dimmed",
+							children: "No active executions"
+						})
+					})]
+				})]
+			}),
+			queueChartData.length > 0 && /* @__PURE__ */ jsxs(Paper, {
+				p: "md",
+				radius: "md",
+				withBorder: true,
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					fw: 600,
+					mb: "sm",
+					children: "Queue Depth by Job"
+				}), /* @__PURE__ */ jsx(BarChart, {
+					h: 200,
+					data: queueChartData,
+					dataKey: "job",
+					type: "stacked",
+					series: [
+						{
+							name: "running",
+							label: "Running",
+							color: "blue.6"
+						},
+						{
+							name: "pending",
+							label: "Pending",
+							color: "gray.5"
+						},
+						{
+							name: "scheduled",
+							label: "Scheduled",
+							color: "violet.5"
+						},
+						{
+							name: "retrying",
+							label: "Retrying",
+							color: "yellow.5"
+						},
+						{
+							name: "dead",
+							label: "Dead",
+							color: "red.6"
+						}
+					],
+					withTooltip: true,
+					withLegend: true
+				})]
+			}),
+			/* @__PURE__ */ jsxs(SimpleGrid, {
+				cols: {
+					base: 1,
+					md: 2
+				},
+				spacing: "md",
+				children: [/* @__PURE__ */ jsxs(Paper, {
+					p: "md",
+					radius: "md",
+					withBorder: true,
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						fw: 600,
+						mb: "sm",
+						children: "Recent Executions"
+					}), /* @__PURE__ */ jsxs(Table, {
+						highlightOnHover: true,
+						children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+							/* @__PURE__ */ jsx(Table.Th, { children: "Job" }),
+							/* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
+							/* @__PURE__ */ jsx(Table.Th, { children: "Duration" })
+						] }) }), /* @__PURE__ */ jsxs(Table.Tbody, { children: [recent.map((exec) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+							/* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, {
+								size: "xs",
+								fw: 500,
+								ff: "monospace",
+								lineClamp: 1,
+								children: exec.jobName
+							}) }),
+							/* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, {
+								size: "xs",
+								variant: "light",
+								color: getStatusColor(exec.status),
+								leftSection: getStatusIcon(exec.status, 10),
+								children: exec.status
+							}) }),
+							/* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, {
+								size: "xs",
+								c: "dimmed",
+								ff: "monospace",
+								children: exec.startedAt && (exec.completedAt || exec.status === "running") ? formatDuration(exec.startedAt, exec.completedAt) : "—"
+							}) })
+						] }, exec.id)), recent.length === 0 && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+							colSpan: 3,
+							children: /* @__PURE__ */ jsx(Text, {
+								size: "sm",
+								c: "dimmed",
+								ta: "center",
+								children: "No recent executions"
+							})
+						}) })] })]
+					})]
+				}), /* @__PURE__ */ jsxs(Paper, {
+					p: "md",
+					radius: "md",
+					withBorder: true,
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						fw: 600,
+						mb: "sm",
+						children: "Top Failures (7d)"
+					}), failures.length > 0 ? /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+						/* @__PURE__ */ jsx(Table.Th, { children: "Job" }),
+						/* @__PURE__ */ jsx(Table.Th, { children: "Count" }),
+						/* @__PURE__ */ jsx(Table.Th, { children: "Last Error" })
+					] }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: failures.map((f) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+						/* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, {
+							size: "xs",
+							fw: 500,
+							ff: "monospace",
+							lineClamp: 1,
+							children: f.jobName
+						}) }),
+						/* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, {
+							size: "xs",
+							variant: "light",
+							color: "red",
+							children: f.failures
+						}) }),
+						/* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, {
+							size: "xs",
+							c: "dimmed",
+							lineClamp: 1,
+							style: { maxWidth: 200 },
+							children: f.lastError ?? "—"
+						}) })
+					] }, f.jobName)) })] }) : /* @__PURE__ */ jsx(Flex, {
+						h: 100,
+						align: "center",
+						justify: "center",
+						children: /* @__PURE__ */ jsx(Text, {
+							size: "sm",
+							c: "dimmed",
+							children: "No failures in the last 7 days"
+						})
+					})]
+				})]
+			})
+		]
+	});
+};
+
+//#endregion
+export { AdminJobDashboard as default };
+//# sourceMappingURL=AdminJobDashboard-CrPxp0W1.js.map

package/dist/admin/AdminJobDashboard-CrPxp0W1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminJobDashboard-CrPxp0W1.js","names":[],"sources":["../../src/admin/components/jobs/AdminJobDashboard.tsx"],"sourcesContent":["import { ActionButton, Flex, Text, useToast } from \"@alepha/ui\";\nimport { AreaChart, BarChart, DonutChart } from \"@mantine/charts\";\nimport { Badge, Paper, SimpleGrid, Table, ThemeIcon } from \"@mantine/core\";\nimport {\n  IconAlertTriangle,\n  IconCircleCheck,\n  IconCircleX,\n  IconClock,\n  IconPlayerPlay,\n  IconRefresh,\n  IconTerminal2,\n} from \"@tabler/icons-react\";\nimport type {\n  AdminJobController,\n  JobActivityPoint,\n  JobFailure,\n  JobQueueDepth,\n  JobStats,\n} from \"alepha/api/jobs\";\nimport { useClient } from \"alepha/react\";\nimport { useI18n } from \"alepha/react/i18n\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst formatDuration = (\n  start: Date | string,\n  end?: Date | string | null,\n): string => {\n  const startTime = new Date(start).getTime();\n  const endTime = end ? new Date(end).getTime() : Date.now();\n  const duration = endTime - startTime;\n\n  if (duration < 1000) return `${duration}ms`;\n  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;\n  if (duration < 3600000)\n    return `${Math.floor(duration / 60000)}m ${Math.floor((duration % 60000) / 1000)}s`;\n  return `${Math.floor(duration / 3600000)}h ${Math.floor((duration % 3600000) / 60000)}m`;\n};\n\nconst getStatusColor = (status: string) => {\n  switch (status) {\n    case \"completed\":\n      return \"teal\";\n    case \"running\":\n      return \"blue\";\n    case \"failed\":\n    case \"dead\":\n      return \"red\";\n    case \"cancelled\":\n      return \"orange\";\n    case \"scheduled\":\n      return \"violet\";\n    case \"retrying\":\n      return \"yellow\";\n    case \"pending\":\n      return \"gray\";\n    default:\n      return \"gray\";\n  }\n};\n\nconst getStatusIcon = (status: string, size = 14) => {\n  switch (status) {\n    case \"completed\":\n      return <IconCircleCheck size={size} />;\n    case \"failed\":\n    case \"dead\":\n      return <IconCircleX size={size} />;\n    case \"running\":\n      return <IconPlayerPlay size={size} />;\n    case \"cancelled\":\n      return <IconAlertTriangle size={size} />;\n    default:\n      return <IconClock size={size} />;\n  }\n};\n\n// ─────────────────────────────────────────────────────────────────────────────\n\ninterface RecentExecution {\n  id: string;\n  jobName: string;\n  status: string;\n  startedAt?: string;\n  completedAt?: string;\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst AdminJobDashboard = () => {\n  const client = useClient<AdminJobController>();\n  const { l } = useI18n();\n  const toast = useToast();\n\n  const [stats, setStats] = useState<JobStats | null>(null);\n  const [recent, setRecent] = useState<RecentExecution[]>([]);\n  const [failures, setFailures] = useState<JobFailure[]>([]);\n  const [activity, setActivity] = useState<JobActivityPoint[]>([]);\n  const [queueDepth, setQueueDepth] = useState<JobQueueDepth[]>([]);\n\n  const loadData = useCallback(async () => {\n    try {\n      const [statsData, recentData, failureData, activityData, queueData] =\n        await Promise.all([\n          client.getJobStats(),\n          client.findExecutions({ query: { sort: \"-createdAt\", size: 10 } }),\n          client.getTopFailures(),\n          client.getActivity({ query: { days: 14 } }),\n          client.getQueueDepth(),\n        ]);\n      setStats(statsData);\n      setRecent(recentData.content as RecentExecution[]);\n      setFailures(failureData);\n      setActivity(activityData);\n      setQueueDepth(queueData);\n    } catch {\n      toast.danger(\"Failed to load dashboard data\");\n    }\n  }, [client, toast]);\n\n  useEffect(() => {\n    loadData();\n  }, [loadData]);\n\n  // Prepare chart data\n  const activityChartData = activity.map((point) => ({\n    date: new Date(point.date).toLocaleDateString(\"en-US\", {\n      month: \"short\",\n      day: \"numeric\",\n    }),\n    completed: point.completed,\n    failed: point.failed,\n  }));\n\n  const queueChartData = queueDepth\n    .filter(\n      (q) => q.pending + q.running + q.scheduled + q.retrying + q.dead > 0,\n    )\n    .map((q) => ({\n      job:\n        q.jobName.length > 20\n          ? `...${q.jobName.slice(q.jobName.length - 18)}`\n          : q.jobName,\n      pending: q.pending,\n      running: q.running,\n      scheduled: q.scheduled,\n      retrying: q.retrying,\n      dead: q.dead,\n    }));\n\n  const statusDonutData = stats\n    ? [\n        { name: \"Running\", value: stats.running, color: \"blue\" },\n        { name: \"Pending\", value: stats.pending, color: \"gray\" },\n        { name: \"Scheduled\", value: stats.scheduled, color: \"violet\" },\n        { name: \"Retrying\", value: stats.retrying, color: \"yellow\" },\n        { name: \"Dead\", value: stats.dead, color: \"red\" },\n      ].filter((d) => d.value > 0)\n    : [];\n\n  return (\n    <Flex flex={1} direction=\"column\" gap=\"md\" p=\"md\">\n      <Flex justify=\"space-between\" align=\"center\">\n        <Text size=\"lg\" fw={600}>\n          Jobs Dashboard\n        </Text>\n        <ActionButton\n          tooltip=\"Refresh\"\n          variant=\"light\"\n          size=\"sm\"\n          icon={IconRefresh}\n          onClick={loadData}\n        />\n      </Flex>\n\n      {/* Stats Cards */}\n      {stats && (\n        <SimpleGrid cols={{ base: 2, sm: 4 }} spacing=\"md\">\n          <Paper p=\"md\" radius=\"md\" withBorder>\n            <Flex justify=\"space-between\">\n              <Flex direction=\"column\">\n                <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                  Registered\n                </Text>\n                <Text size=\"xl\" fw={700} ff=\"monospace\">\n                  {stats.registered}\n                </Text>\n              </Flex>\n              <ThemeIcon size=\"lg\" radius=\"md\" variant=\"light\" color=\"blue\">\n                <IconTerminal2 size={20} />\n              </ThemeIcon>\n            </Flex>\n          </Paper>\n\n          <Paper p=\"md\" radius=\"md\" withBorder>\n            <Flex justify=\"space-between\">\n              <Flex direction=\"column\">\n                <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                  Running\n                </Text>\n                <Text\n                  size=\"xl\"\n                  fw={700}\n                  ff=\"monospace\"\n                  c={stats.running > 0 ? \"blue\" : undefined}\n                >\n                  {stats.running}\n                </Text>\n              </Flex>\n              <ThemeIcon\n                size=\"lg\"\n                radius=\"md\"\n                variant=\"light\"\n                color={stats.running > 0 ? \"blue\" : \"gray\"}\n              >\n                <IconPlayerPlay size={20} />\n              </ThemeIcon>\n            </Flex>\n          </Paper>\n\n          <Paper p=\"md\" radius=\"md\" withBorder>\n            <Flex justify=\"space-between\">\n              <Flex direction=\"column\">\n                <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                  Completed 24h\n                </Text>\n                <Text size=\"xl\" fw={700} ff=\"monospace\" c=\"teal\">\n                  {stats.completed24h}\n                </Text>\n              </Flex>\n              <ThemeIcon size=\"lg\" radius=\"md\" variant=\"light\" color=\"teal\">\n                <IconCircleCheck size={20} />\n              </ThemeIcon>\n            </Flex>\n          </Paper>\n\n          <Paper p=\"md\" radius=\"md\" withBorder>\n            <Flex justify=\"space-between\">\n              <Flex direction=\"column\">\n                <Text size=\"xs\" c=\"dimmed\" tt=\"uppercase\" fw={600}>\n                  Failed 24h\n                </Text>\n                <Text\n                  size=\"xl\"\n                  fw={700}\n                  ff=\"monospace\"\n                  c={stats.failed24h > 0 ? \"red\" : undefined}\n                >\n                  {stats.failed24h}\n                </Text>\n              </Flex>\n              <ThemeIcon\n                size=\"lg\"\n                radius=\"md\"\n                variant=\"light\"\n                color={stats.failed24h > 0 ? \"red\" : \"gray\"}\n              >\n                <IconAlertTriangle size={20} />\n              </ThemeIcon>\n            </Flex>\n          </Paper>\n        </SimpleGrid>\n      )}\n\n      {/* Charts Row */}\n      <SimpleGrid cols={{ base: 1, md: 2 }} spacing=\"md\">\n        {/* Activity Timeline */}\n        <Paper p=\"md\" radius=\"md\" withBorder>\n          <Text size=\"sm\" fw={600} mb=\"sm\">\n            Activity (14d)\n          </Text>\n          {activityChartData.length > 0 ? (\n            <AreaChart\n              h={220}\n              data={activityChartData}\n              dataKey=\"date\"\n              series={[\n                { name: \"completed\", label: \"Completed\", color: \"teal.6\" },\n                { name: \"failed\", label: \"Failed\", color: \"red.6\" },\n              ]}\n              curveType=\"monotone\"\n              withGradient\n              withTooltip\n              withDots={false}\n            />\n          ) : (\n            <Flex h={220} align=\"center\" justify=\"center\">\n              <Text size=\"sm\" c=\"dimmed\">\n                No activity data\n              </Text>\n            </Flex>\n          )}\n        </Paper>\n\n        {/* Current Status Donut */}\n        <Paper p=\"md\" radius=\"md\" withBorder>\n          <Text size=\"sm\" fw={600} mb=\"sm\">\n            Active Executions\n          </Text>\n          {statusDonutData.length > 0 ? (\n            <DonutChart\n              h={220}\n              data={statusDonutData}\n              withTooltip\n              tooltipDataSource=\"segment\"\n              chartLabel={String(\n                statusDonutData.reduce((sum, d) => sum + d.value, 0),\n              )}\n            />\n          ) : (\n            <Flex h={220} align=\"center\" justify=\"center\">\n              <Text size=\"sm\" c=\"dimmed\">\n                No active executions\n              </Text>\n            </Flex>\n          )}\n        </Paper>\n      </SimpleGrid>\n\n      {/* Queue Depth Chart */}\n      {queueChartData.length > 0 && (\n        <Paper p=\"md\" radius=\"md\" withBorder>\n          <Text size=\"sm\" fw={600} mb=\"sm\">\n            Queue Depth by Job\n          </Text>\n          <BarChart\n            h={200}\n            data={queueChartData}\n            dataKey=\"job\"\n            type=\"stacked\"\n            series={[\n              { name: \"running\", label: \"Running\", color: \"blue.6\" },\n              { name: \"pending\", label: \"Pending\", color: \"gray.5\" },\n              { name: \"scheduled\", label: \"Scheduled\", color: \"violet.5\" },\n              { name: \"retrying\", label: \"Retrying\", color: \"yellow.5\" },\n              { name: \"dead\", label: \"Dead\", color: \"red.6\" },\n            ]}\n            withTooltip\n            withLegend\n          />\n        </Paper>\n      )}\n\n      {/* Recent Activity + Top Failures side by side */}\n      <SimpleGrid cols={{ base: 1, md: 2 }} spacing=\"md\">\n        {/* Recent Activity */}\n        <Paper p=\"md\" radius=\"md\" withBorder>\n          <Text size=\"sm\" fw={600} mb=\"sm\">\n            Recent Executions\n          </Text>\n          <Table highlightOnHover>\n            <Table.Thead>\n              <Table.Tr>\n                <Table.Th>Job</Table.Th>\n                <Table.Th>Status</Table.Th>\n                <Table.Th>Duration</Table.Th>\n              </Table.Tr>\n            </Table.Thead>\n            <Table.Tbody>\n              {recent.map((exec) => (\n                <Table.Tr key={exec.id}>\n                  <Table.Td>\n                    <Text size=\"xs\" fw={500} ff=\"monospace\" lineClamp={1}>\n                      {exec.jobName}\n                    </Text>\n                  </Table.Td>\n                  <Table.Td>\n                    <Badge\n                      size=\"xs\"\n                      variant=\"light\"\n                      color={getStatusColor(exec.status)}\n                      leftSection={getStatusIcon(exec.status, 10)}\n                    >\n                      {exec.status}\n                    </Badge>\n                  </Table.Td>\n                  <Table.Td>\n                    <Text size=\"xs\" c=\"dimmed\" ff=\"monospace\">\n                      {exec.startedAt &&\n                      (exec.completedAt || exec.status === \"running\")\n                        ? formatDuration(exec.startedAt, exec.completedAt)\n                        : \"—\"}\n                    </Text>\n                  </Table.Td>\n                </Table.Tr>\n              ))}\n              {recent.length === 0 && (\n                <Table.Tr>\n                  <Table.Td colSpan={3}>\n                    <Text size=\"sm\" c=\"dimmed\" ta=\"center\">\n                      No recent executions\n                    </Text>\n                  </Table.Td>\n                </Table.Tr>\n              )}\n            </Table.Tbody>\n          </Table>\n        </Paper>\n\n        {/* Top Failures (7d) */}\n        <Paper p=\"md\" radius=\"md\" withBorder>\n          <Text size=\"sm\" fw={600} mb=\"sm\">\n            Top Failures (7d)\n          </Text>\n          {failures.length > 0 ? (\n            <Table>\n              <Table.Thead>\n                <Table.Tr>\n                  <Table.Th>Job</Table.Th>\n                  <Table.Th>Count</Table.Th>\n                  <Table.Th>Last Error</Table.Th>\n                </Table.Tr>\n              </Table.Thead>\n              <Table.Tbody>\n                {failures.map((f) => (\n                  <Table.Tr key={f.jobName}>\n                    <Table.Td>\n                      <Text size=\"xs\" fw={500} ff=\"monospace\" lineClamp={1}>\n                        {f.jobName}\n                      </Text>\n                    </Table.Td>\n                    <Table.Td>\n                      <Badge size=\"xs\" variant=\"light\" color=\"red\">\n                        {f.failures}\n                      </Badge>\n                    </Table.Td>\n                    <Table.Td>\n                      <Text\n                        size=\"xs\"\n                        c=\"dimmed\"\n                        lineClamp={1}\n                        style={{ maxWidth: 200 }}\n                      >\n                        {f.lastError ?? \"—\"}\n                      </Text>\n                    </Table.Td>\n                  </Table.Tr>\n                ))}\n              </Table.Tbody>\n            </Table>\n          ) : (\n            <Flex h={100} align=\"center\" justify=\"center\">\n              <Text size=\"sm\" c=\"dimmed\">\n                No failures in the last 7 days\n              </Text>\n            </Flex>\n          )}\n        </Paper>\n      </SimpleGrid>\n    </Flex>\n  );\n};\n\nexport default AdminJobDashboard;\n"],"mappings":"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"}