@alepha/ui 0.19.0 → 0.19.1

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

@@ -1,380 +0,0 @@
-import { ActionButton, Flex, StatCards, Text, useToast } from "@alepha/ui";
-import { AreaChart, BarChart, DonutChart } from "@mantine/charts";
-import { Paper, SegmentedControl, SimpleGrid, Table } from "@mantine/core";
-import {
-  IconAlertTriangle,
-  IconCircleCheck,
-  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 TIME_RANGES = [
-  { label: "24h", value: "1" },
-  { label: "7d", value: "7" },
-  { label: "14d", value: "14" },
-  { label: "30d", value: "30" },
-];
-
-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`;
-};
-
-// ─────────────────────────────────────────────────────────────────────────────
-
-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 [days, setDays] = useState("7");
-  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 daysNum = Number(days);
-
-  const loadData = useCallback(async () => {
-    try {
-      const [statsData, recentData, failureData, activityData, queueData] =
-        await Promise.all([
-          client.getJobStats({ query: { days: daysNum } }),
-          client.findJobExecutions({ query: { sort: "-createdAt", size: 10 } }),
-          client.getJobTopFailures({ query: { days: daysNum } }),
-          client.getJobActivity({ query: { days: daysNum } }),
-          client.getJobQueueDepth(),
-        ]);
-      setStats(statsData);
-      setRecent(recentData.content as RecentExecution[]);
-      setFailures(failureData);
-      setActivity(activityData);
-      setQueueDepth(queueData);
-    } catch {
-      toast.danger("Failed to load dashboard data");
-    }
-  }, [client, toast, daysNum]);
-
-  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)
-    : [];
-
-  const rangeLabel =
-    TIME_RANGES.find((r) => r.value === days)?.label ?? `${days}d`;
-
-  return (
-    <Flex flex={1} direction="column" gap="md" p="md">
-      <Flex justify="space-between" align="center">
-        <Text size="lg" fw={600}>
-          Jobs Dashboard
-        </Text>
-        <Flex
-          gap="sm"
-          align="center"
-          py="xs"
-          px="sm"
-          style={{
-            backgroundColor: "var(--mantine-color-body)",
-            borderRadius: "var(--mantine-radius-md)",
-            border: "1px solid var(--mantine-color-default-border)",
-          }}
-        >
-          <SegmentedControl
-            size="xs"
-            data={TIME_RANGES}
-            value={days}
-            onChange={setDays}
-          />
-          <ActionButton
-            tooltip="Refresh"
-            variant="minimal"
-            size="sm"
-            icon={IconRefresh}
-            onClick={loadData}
-          />
-        </Flex>
-      </Flex>
-
-      {/* Stats Cards */}
-      {stats && (
-        <StatCards
-          items={[
-            {
-              label: "Registered",
-              value: stats.registered,
-              icon: IconTerminal2,
-            },
-            {
-              label: "Running",
-              value: stats.running,
-              icon: IconPlayerPlay,
-            },
-            {
-              label: `Completed (${rangeLabel})`,
-              value: stats.completed,
-              icon: IconCircleCheck,
-            },
-            {
-              label: `Failed (${rangeLabel})`,
-              value: stats.failed,
-              icon: IconAlertTriangle,
-            },
-          ]}
-        />
-      )}
-
-      {/* 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 ({rangeLabel})
-          </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>
-                    <Text size="xs" ff="monospace">
-                      {exec.status}
-                    </Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" c="dimmed" ff="monospace">
-                      {exec.startedAt &&
-                      (exec.completedAt || exec.status === "running")
-                        ? formatDuration(exec.startedAt, exec.completedAt)
-                        : "\u2014"}
-                    </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 */}
-        <Paper p="md" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="sm">
-            Top Failures ({rangeLabel})
-          </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>
-                      <Text size="xs" fw={600} ff="monospace">
-                        {f.failures}
-                      </Text>
-                    </Table.Td>
-                    <Table.Td>
-                      <Text
-                        size="xs"
-                        c="dimmed"
-                        lineClamp={1}
-                        style={{ maxWidth: 200 }}
-                      >
-                        {f.lastError ?? "\u2014"}
-                      </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 {rangeLabel}
-              </Text>
-            </Flex>
-          )}
-        </Paper>
-      </SimpleGrid>
-    </Flex>
-  );
-};
-
-export default AdminJobDashboard;

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

@@ -1,301 +0,0 @@
-import type { DetailListItem } from "@alepha/ui";
-import {
-  DataTable,
-  DetailList,
-  Flex,
-  Text,
-  useDialog,
-  useToast,
-} from "@alepha/ui";
-import { Badge } from "@mantine/core";
-import {
-  IconCircleCheck,
-  IconCircleX,
-  IconPlayerPlay,
-} from "@tabler/icons-react";
-import { t } from "alepha";
-import type {
-  AdminJobController,
-  JobCronInfo,
-  JobFailure,
-  JobQueueDepth,
-  JobRegistration,
-} from "alepha/api/jobs";
-import { useClient } from "alepha/react";
-import { useI18n } from "alepha/react/i18n";
-import { useCallback, useEffect, useState } from "react";
-
-// ─────────────────────────────────────────────────────────────────────────────
-
-const registryFilters = t.object({
-  type: t.optional(t.enum(["cron", "push", "both"])),
-});
-
-// ─────────────────────────────────────────────────────────────────────────────
-
-const AdminJobRegistry = () => {
-  const client = useClient<AdminJobController>();
-  const { l } = useI18n();
-  const toast = useToast();
-  const dialog = useDialog();
-  const [refreshKey, setRefreshKey] = useState(0);
-
-  // Extra data for enriched panels
-  const [cronMap, setCronMap] = useState<Map<string, JobCronInfo>>(new Map());
-  const [queueMap, setQueueMap] = useState<Map<string, JobQueueDepth>>(
-    new Map(),
-  );
-  const [failureMap, setFailureMap] = useState<Map<string, JobFailure>>(
-    new Map(),
-  );
-
-  const loadExtraData = useCallback(async () => {
-    try {
-      const [cronData, queueData, failureData] = await Promise.all([
-        client.getCronJobs(),
-        client.getJobQueueDepth(),
-        client.getJobTopFailures(),
-      ]);
-      setCronMap(new Map(cronData.map((c) => [c.name, c])));
-      setQueueMap(new Map(queueData.map((q) => [q.jobName, q])));
-      setFailureMap(new Map(failureData.map((f) => [f.jobName, f])));
-    } catch {
-      // non-critical
-    }
-  }, [client]);
-
-  useEffect(() => {
-    loadExtraData();
-  }, [loadExtraData, refreshKey]);
-
-  const handleTriggerJob = useCallback(
-    async (name: string) => {
-      const confirmed = await dialog.confirm({
-        title: "Trigger Job",
-        message: `Are you sure you want to trigger "${name}" manually?`,
-        confirmLabel: "Trigger",
-        confirmColor: "blue",
-      });
-
-      if (!confirmed) return;
-
-      return client.triggerJob({ body: { name } }).then(() => {
-        toast.success(`Job "${name}" triggered`);
-        setRefreshKey((k) => k + 1);
-      });
-    },
-    [client, dialog, toast],
-  );
-
-  return (
-    <Flex p="md" flex={1} direction="column" gap="md">
-      <DataTable<JobRegistration, typeof registryFilters>
-        key={`registry-${refreshKey}`}
-        submitOnInit
-        typeFormProps={{
-          skipSubmitButton: true,
-          columns: 1,
-        }}
-        tableProps={{
-          horizontalSpacing: "sm",
-          verticalSpacing: "sm",
-        }}
-        onFilterChange={(_key, _value, form) => form.submit()}
-        filters={registryFilters}
-        items={async (filters) => {
-          const items = await client.getJobRegistry();
-          const filtered = filters.type
-            ? items.filter((i) => i.type === filters.type)
-            : items;
-          return { content: filtered };
-        }}
-        columns={{
-          name: {
-            label: "Name",
-            value: (item) => (
-              <Text size="sm" fw={500} ff="monospace">
-                {item.name}
-              </Text>
-            ),
-          },
-          type: {
-            label: "Type",
-            value: (item) => (
-              <Badge size="sm" variant="default">
-                {item.type}
-              </Badge>
-            ),
-          },
-          priority: {
-            label: "Priority",
-            value: (item) => (
-              <Text size="sm" tt="capitalize">
-                {item.priority}
-              </Text>
-            ),
-          },
-          concurrency: {
-            label: "Concurrency",
-            value: (item) => (
-              <Text size="sm" ff="monospace">
-                {item.concurrency}
-              </Text>
-            ),
-          },
-          queue: {
-            label: "Queue",
-            value: (item) => {
-              const q = queueMap.get(item.name);
-              if (
-                !q ||
-                q.pending + q.running + q.scheduled + q.retrying + q.dead === 0
-              ) {
-                return (
-                  <Text size="xs" c="dimmed">
-                    —
-                  </Text>
-                );
-              }
-              return (
-                <Flex gap={4}>
-                  {q.running > 0 && (
-                    <Badge size="xs" variant="default">
-                      {q.running} run
-                    </Badge>
-                  )}
-                  {q.pending > 0 && (
-                    <Badge size="xs" variant="default">
-                      {q.pending} pen
-                    </Badge>
-                  )}
-                  {q.retrying > 0 && (
-                    <Badge size="xs" variant="default">
-                      {q.retrying} retry
-                    </Badge>
-                  )}
-                  {q.dead > 0 && (
-                    <Badge size="xs" variant="default">
-                      {q.dead} dead
-                    </Badge>
-                  )}
-                </Flex>
-              );
-            },
-          },
-        }}
-        rowActions={(item) => [
-          {
-            label: "Trigger",
-            color: "blue",
-            icon: IconPlayerPlay,
-            onClick: () => handleTriggerJob(item.name),
-          },
-        ]}
-        panel={(item) => {
-          const cron = cronMap.get(item.name);
-          const failure = failureMap.get(item.name);
-
-          const detailItems: DetailListItem[] = [
-            {
-              label: "Cron",
-              value: item.cron ? (
-                <Text size="sm" ff="monospace">
-                  {item.cron}
-                </Text>
-              ) : undefined,
-              hidden: !item.cron,
-            },
-            {
-              label: "Timeout",
-              value: item.timeout,
-              hidden: !item.timeout,
-            },
-            {
-              label: "Retry",
-              value: item.retry
-                ? `${item.retry.retries}x${item.retry.hasBackoff ? " (backoff)" : ""}`
-                : undefined,
-              hidden: !item.retry,
-            },
-            {
-              label: "Batch",
-              value: item.batch
-                ? `${item.batch.size} / ${item.batch.window}`
-                : undefined,
-              hidden: !item.batch,
-            },
-            {
-              label: "Schema",
-              value: item.hasSchema ? "Yes" : "No",
-            },
-          ];
-
-          return (
-            <Flex direction="column" gap="sm" p="sm">
-              <DetailList items={detailItems} columns={3} />
-
-              {/* Last cron execution */}
-              {cron?.lastExecution && (
-                <Flex gap="lg" wrap="wrap" align="center">
-                  <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-                    Last Run
-                  </Text>
-                  <Flex align="center" gap={4}>
-                    {cron.lastExecution.status === "completed" ? (
-                      <IconCircleCheck
-                        size={14}
-                        color="var(--mantine-color-dimmed)"
-                      />
-                    ) : (
-                      <IconCircleX
-                        size={14}
-                        color="var(--mantine-color-dimmed)"
-                      />
-                    )}
-                    <Text size="xs" tt="capitalize">
-                      {cron.lastExecution.status}
-                    </Text>
-                  </Flex>
-                  {cron.lastExecution.startedAt && (
-                    <Text size="xs" c="dimmed">
-                      {l(cron.lastExecution.startedAt, { date: "fromNow" })}
-                    </Text>
-                  )}
-                  {cron.lastExecution.error && (
-                    <Text size="xs" c="dimmed" lineClamp={1}>
-                      {cron.lastExecution.error}
-                    </Text>
-                  )}
-                </Flex>
-              )}
-
-              {/* Failures */}
-              {failure && (
-                <Flex gap="lg" wrap="wrap" align="center">
-                  <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-                    Failures (7d)
-                  </Text>
-                  <Text size="xs" fw={500}>
-                    {failure.failures}
-                  </Text>
-                  {failure.lastError && (
-                    <Text
-                      size="xs"
-                      c="dimmed"
-                      lineClamp={1}
-                      style={{ maxWidth: 400 }}
-                    >
-                      {failure.lastError}
-                    </Text>
-                  )}
-                </Flex>
-              )}
-            </Flex>
-          );
-        }}
-      />
-    </Flex>
-  );
-};
-
-export default AdminJobRegistry;

package/src/core/components/Heading.tsx

@@ -1,19 +0,0 @@
-import type { ReactNode } from "react";
-import type { AlephaIntent } from "../interfaces/AlephaIntent.ts";
-
-export type HeadingProps = {
-  title: string | ReactNode;
-  description?: string | ReactNode;
-  icon?: ReactNode;
-  intent?: AlephaIntent;
-  loading?: boolean;
-  ellipsis?: boolean;
-  fill?: boolean;
-  tag?: string | ReactNode;
-};
-
-const Heading = (props: HeadingProps) => {
-  return <h1>Heading</h1>;
-};
-
-export default Heading;