@alepha/ui 0.16.2 → 0.17.1

package/package.json

@@ -7,7 +7,7 @@
     "mantine"
   ],
   "author": "Nicolas Foures",
-  "version": "0.16.2",
+  "version": "0.17.1",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -22,6 +22,7 @@
     "styles.css"
   ],
   "dependencies": {
+    "@mantine/charts": "^8.3.14",
     "@mantine/core": "^8.3.14",
     "@mantine/dates": "^8.3.14",
     "@mantine/hooks": "^8.3.14",
@@ -30,13 +31,16 @@
     "@mantine/nprogress": "^8.3.14",
     "@mantine/spotlight": "^8.3.14",
     "@tabler/icons-react": "^3.36.1",
-    "dayjs": "^1.11.19"
+    "dayjs": "^1.11.19",
+    "react-is": "^19.2.4",
+    "recharts": "^3.7.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.14",
+    "@biomejs/biome": "^2.3.15",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
-    "alepha": "0.16.2",
+    "@types/react-is": "^19.2.0",
+    "alepha": "0.17.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
@@ -44,7 +48,7 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "alepha": "0.16.2",
+    "alepha": "0.17.1",
     "react": "*",
     "react-dom": "*"
   },

package/src/admin/AdminRouter.ts

@@ -2,10 +2,12 @@ import type { DashboardShellProps, SidebarNode } from "@alepha/ui";
 import { AuthRouter } from "@alepha/ui/auth";
 import {
   IconBell,
+  IconClock,
   IconDevices,
   IconFile,
   IconHistory,
   IconKey,
+  IconListDetails,
   IconPlus,
   IconSettings,
   IconTerminal2,
@@ -82,8 +84,17 @@ export class AdminRouter {
             can: () => this.notificationCtrl.findNotifications.can(),
           },
           {
-            ...this.router.node(this.adminJobs.name),
-            can: () => this.jobCtrl.getJobs.can(),
+            ...this.router.node(this.adminJobDashboard.name),
+            href: undefined,
+            can: () => this.jobCtrl.getRegistry.can(),
+            children: [
+              {
+                ...this.router.node(this.adminJobDashboard.name),
+                label: "Dashboard",
+              },
+              { ...this.router.node(this.adminJobRegistry.name) },
+              { ...this.router.node(this.adminJobExecutions.name) },
+            ],
           },
           {
             ...this.router.node(this.adminAudits.name),
@@ -276,14 +287,34 @@ export class AdminRouter {
   // Jobs
   // ─────────────────────────────────────────────────────────────────────────────
 
-  public readonly adminJobs = $page({
+  public readonly adminJobDashboard = $page({
     icon: IconTerminal2,
     parent: this.adminLayout,
     path: "/jobs",
     label: "Jobs",
     description: "Monitor and manage background jobs and scheduled tasks.",
-    lazy: () => import("./components/jobs/AdminJobs.tsx"),
-    can: () => this.jobCtrl.getJobs.can(),
+    lazy: () => import("./components/jobs/AdminJobDashboard.tsx"),
+    can: () => this.jobCtrl.getRegistry.can(),
+  });
+
+  public readonly adminJobRegistry = $page({
+    icon: IconListDetails,
+    parent: this.adminLayout,
+    path: "/jobs/registry",
+    label: "Registry",
+    description: "View all registered job definitions.",
+    lazy: () => import("./components/jobs/AdminJobRegistry.tsx"),
+    can: () => this.jobCtrl.getRegistry.can(),
+  });
+
+  public readonly adminJobExecutions = $page({
+    icon: IconClock,
+    parent: this.adminLayout,
+    path: "/jobs/executions",
+    label: "Executions",
+    description: "Browse and filter job execution history.",
+    lazy: () => import("./components/jobs/AdminJobExecutions.tsx"),
+    can: () => this.jobCtrl.findExecutions.can(),
   });
 
   // ─────────────────────────────────────────────────────────────────────────────

package/src/admin/components/audits/AdminAudits.tsx

@@ -1,5 +1,5 @@
 import { DataTable, Flex, Text } from "@alepha/ui";
-import { Badge, Group, Stack, Tooltip } from "@mantine/core";
+import { Badge, Tooltip } from "@mantine/core";
 import {
   IconAlertTriangle,
   IconCheck,
@@ -155,20 +155,20 @@ const AdminAudits = (props: AdminAuditsProps) => {
               item.userId ? (
                 <Tooltip
                   label={
-                    <Stack gap={2}>
+                    <Flex direction="column" gap={2}>
                       <Text size="xs">{item.userEmail || "No email"}</Text>
                       <Text size="xs" c="dimmed">
                         {item.userRealm || "default"}
                       </Text>
-                    </Stack>
+                    </Flex>
                   }
                 >
-                  <Group gap={4}>
+                  <Flex gap={4}>
                     <IconUser size={12} />
                     <Text size="xs" lineClamp={1} maw={100}>
                       {item.userEmail?.split("@")[0] || item.userId.slice(0, 8)}
                     </Text>
-                  </Group>
+                  </Flex>
                 </Tooltip>
               ) : (
                 <Text size="xs" c="dimmed">

package/src/admin/components/jobs/AdminJobDashboard.tsx

@@ -0,0 +1,455 @@
+import { ActionButton, Flex, Text, useToast } from "@alepha/ui";
+import { AreaChart, BarChart, DonutChart } from "@mantine/charts";
+import { Badge, Paper, SimpleGrid, Table, ThemeIcon } from "@mantine/core";
+import {
+  IconAlertTriangle,
+  IconCircleCheck,
+  IconCircleX,
+  IconClock,
+  IconPlayerPlay,
+  IconRefresh,
+  IconTerminal2,
+} from "@tabler/icons-react";
+import type {
+  AdminJobController,
+  JobActivityPoint,
+  JobFailure,
+  JobQueueDepth,
+  JobStats,
+} from "alepha/api/jobs";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { useCallback, useEffect, useState } from "react";
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+const formatDuration = (
+  start: Date | string,
+  end?: Date | string | null,
+): string => {
+  const startTime = new Date(start).getTime();
+  const endTime = end ? new Date(end).getTime() : Date.now();
+  const duration = endTime - startTime;
+
+  if (duration < 1000) return `${duration}ms`;
+  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;
+  if (duration < 3600000)
+    return `${Math.floor(duration / 60000)}m ${Math.floor((duration % 60000) / 1000)}s`;
+  return `${Math.floor(duration / 3600000)}h ${Math.floor((duration % 3600000) / 60000)}m`;
+};
+
+const getStatusColor = (status: string) => {
+  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: string, size = 14) => {
+  switch (status) {
+    case "completed":
+      return <IconCircleCheck size={size} />;
+    case "failed":
+    case "dead":
+      return <IconCircleX size={size} />;
+    case "running":
+      return <IconPlayerPlay size={size} />;
+    case "cancelled":
+      return <IconAlertTriangle size={size} />;
+    default:
+      return <IconClock size={size} />;
+  }
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface RecentExecution {
+  id: string;
+  jobName: string;
+  status: string;
+  startedAt?: string;
+  completedAt?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+const AdminJobDashboard = () => {
+  const client = useClient<AdminJobController>();
+  const { l } = useI18n();
+  const toast = useToast();
+
+  const [stats, setStats] = useState<JobStats | null>(null);
+  const [recent, setRecent] = useState<RecentExecution[]>([]);
+  const [failures, setFailures] = useState<JobFailure[]>([]);
+  const [activity, setActivity] = useState<JobActivityPoint[]>([]);
+  const [queueDepth, setQueueDepth] = useState<JobQueueDepth[]>([]);
+
+  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 as RecentExecution[]);
+      setFailures(failureData);
+      setActivity(activityData);
+      setQueueDepth(queueData);
+    } catch {
+      toast.danger("Failed to load dashboard data");
+    }
+  }, [client, toast]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // Prepare chart data
+  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 (
+    <Flex flex={1} direction="column" gap="md" p="md">
+      <Flex justify="space-between" align="center">
+        <Text size="lg" fw={600}>
+          Jobs Dashboard
+        </Text>
+        <ActionButton
+          tooltip="Refresh"
+          variant="light"
+          size="sm"
+          icon={IconRefresh}
+          onClick={loadData}
+        />
+      </Flex>
+
+      {/* Stats Cards */}
+      {stats && (
+        <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="md">
+          <Paper p="md" radius="md" withBorder>
+            <Flex justify="space-between">
+              <Flex direction="column">
+                <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+                  Registered
+                </Text>
+                <Text size="xl" fw={700} ff="monospace">
+                  {stats.registered}
+                </Text>
+              </Flex>
+              <ThemeIcon size="lg" radius="md" variant="light" color="blue">
+                <IconTerminal2 size={20} />
+              </ThemeIcon>
+            </Flex>
+          </Paper>
+
+          <Paper p="md" radius="md" withBorder>
+            <Flex justify="space-between">
+              <Flex direction="column">
+                <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+                  Running
+                </Text>
+                <Text
+                  size="xl"
+                  fw={700}
+                  ff="monospace"
+                  c={stats.running > 0 ? "blue" : undefined}
+                >
+                  {stats.running}
+                </Text>
+              </Flex>
+              <ThemeIcon
+                size="lg"
+                radius="md"
+                variant="light"
+                color={stats.running > 0 ? "blue" : "gray"}
+              >
+                <IconPlayerPlay size={20} />
+              </ThemeIcon>
+            </Flex>
+          </Paper>
+
+          <Paper p="md" radius="md" withBorder>
+            <Flex justify="space-between">
+              <Flex direction="column">
+                <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+                  Completed 24h
+                </Text>
+                <Text size="xl" fw={700} ff="monospace" c="teal">
+                  {stats.completed24h}
+                </Text>
+              </Flex>
+              <ThemeIcon size="lg" radius="md" variant="light" color="teal">
+                <IconCircleCheck size={20} />
+              </ThemeIcon>
+            </Flex>
+          </Paper>
+
+          <Paper p="md" radius="md" withBorder>
+            <Flex justify="space-between">
+              <Flex direction="column">
+                <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+                  Failed 24h
+                </Text>
+                <Text
+                  size="xl"
+                  fw={700}
+                  ff="monospace"
+                  c={stats.failed24h > 0 ? "red" : undefined}
+                >
+                  {stats.failed24h}
+                </Text>
+              </Flex>
+              <ThemeIcon
+                size="lg"
+                radius="md"
+                variant="light"
+                color={stats.failed24h > 0 ? "red" : "gray"}
+              >
+                <IconAlertTriangle size={20} />
+              </ThemeIcon>
+            </Flex>
+          </Paper>
+        </SimpleGrid>
+      )}
+
+      {/* Charts Row */}
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
+        {/* Activity Timeline */}
+        <Paper p="md" radius="md" withBorder>
+          <Text size="sm" fw={600} mb="sm">
+            Activity (14d)
+          </Text>
+          {activityChartData.length > 0 ? (
+            <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
+              withTooltip
+              withDots={false}
+            />
+          ) : (
+            <Flex h={220} align="center" justify="center">
+              <Text size="sm" c="dimmed">
+                No activity data
+              </Text>
+            </Flex>
+          )}
+        </Paper>
+
+        {/* Current Status Donut */}
+        <Paper p="md" radius="md" withBorder>
+          <Text size="sm" fw={600} mb="sm">
+            Active Executions
+          </Text>
+          {statusDonutData.length > 0 ? (
+            <DonutChart
+              h={220}
+              data={statusDonutData}
+              withTooltip
+              tooltipDataSource="segment"
+              chartLabel={String(
+                statusDonutData.reduce((sum, d) => sum + d.value, 0),
+              )}
+            />
+          ) : (
+            <Flex h={220} align="center" justify="center">
+              <Text size="sm" c="dimmed">
+                No active executions
+              </Text>
+            </Flex>
+          )}
+        </Paper>
+      </SimpleGrid>
+
+      {/* Queue Depth Chart */}
+      {queueChartData.length > 0 && (
+        <Paper p="md" radius="md" withBorder>
+          <Text size="sm" fw={600} mb="sm">
+            Queue Depth by Job
+          </Text>
+          <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
+            withLegend
+          />
+        </Paper>
+      )}
+
+      {/* Recent Activity + Top Failures side by side */}
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
+        {/* Recent Activity */}
+        <Paper p="md" radius="md" withBorder>
+          <Text size="sm" fw={600} mb="sm">
+            Recent Executions
+          </Text>
+          <Table highlightOnHover>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Job</Table.Th>
+                <Table.Th>Status</Table.Th>
+                <Table.Th>Duration</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {recent.map((exec) => (
+                <Table.Tr key={exec.id}>
+                  <Table.Td>
+                    <Text size="xs" fw={500} ff="monospace" lineClamp={1}>
+                      {exec.jobName}
+                    </Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge
+                      size="xs"
+                      variant="light"
+                      color={getStatusColor(exec.status)}
+                      leftSection={getStatusIcon(exec.status, 10)}
+                    >
+                      {exec.status}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="xs" c="dimmed" ff="monospace">
+                      {exec.startedAt &&
+                      (exec.completedAt || exec.status === "running")
+                        ? formatDuration(exec.startedAt, exec.completedAt)
+                        : "—"}
+                    </Text>
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+              {recent.length === 0 && (
+                <Table.Tr>
+                  <Table.Td colSpan={3}>
+                    <Text size="sm" c="dimmed" ta="center">
+                      No recent executions
+                    </Text>
+                  </Table.Td>
+                </Table.Tr>
+              )}
+            </Table.Tbody>
+          </Table>
+        </Paper>
+
+        {/* Top Failures (7d) */}
+        <Paper p="md" radius="md" withBorder>
+          <Text size="sm" fw={600} mb="sm">
+            Top Failures (7d)
+          </Text>
+          {failures.length > 0 ? (
+            <Table>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th>Job</Table.Th>
+                  <Table.Th>Count</Table.Th>
+                  <Table.Th>Last Error</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {failures.map((f) => (
+                  <Table.Tr key={f.jobName}>
+                    <Table.Td>
+                      <Text size="xs" fw={500} ff="monospace" lineClamp={1}>
+                        {f.jobName}
+                      </Text>
+                    </Table.Td>
+                    <Table.Td>
+                      <Badge size="xs" variant="light" color="red">
+                        {f.failures}
+                      </Badge>
+                    </Table.Td>
+                    <Table.Td>
+                      <Text
+                        size="xs"
+                        c="dimmed"
+                        lineClamp={1}
+                        style={{ maxWidth: 200 }}
+                      >
+                        {f.lastError ?? "—"}
+                      </Text>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          ) : (
+            <Flex h={100} align="center" justify="center">
+              <Text size="sm" c="dimmed">
+                No failures in the last 7 days
+              </Text>
+            </Flex>
+          )}
+        </Paper>
+      </SimpleGrid>
+    </Flex>
+  );
+};
+
+export default AdminJobDashboard;