@cosmicdrift/kumiko-bundled-features 0.130.0 → 0.130.2

package/src/audit/web/audit-log-screen.tsx

@@ -1,10 +1,16 @@
 // @runtime client
-// Paginated tenant-scoped audit log (event store).
+// Paginated tenant-scoped audit log (event store). Rows link to the
+// audit-log-detail screen; the screen title lives in the shell breadcrumb.
 
-import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
+import {
+  type DataTableSort,
+  useDispatcher,
+  useNav,
+  usePrimitives,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
-import { AuditQueries } from "../constants";
+import { AUDIT_LOG_DETAIL_SCREEN_ID, AuditQueries } from "../constants";
 
 type AuditRow = {
   readonly id: string;
@@ -38,12 +44,13 @@ const EMPTY_FILTERS: Filters = { eventType: "", aggregateType: "", from: "", to:
 
 export function AuditLogScreen(): ReactNode {
   const t = useTranslation();
-  const { Banner, Button, Card, DataTable, Field, Heading, Input, Text } = usePrimitives();
+  const { Banner, Button, DataTable, Field, Input, Text } = usePrimitives();
   const dispatcher = useDispatcher();
+  const nav = useNav();
   const [state, setState] = useState<State>({ kind: "loading" });
   const [before, setBefore] = useState<string | undefined>(undefined);
   const [filters, setFilters] = useState<Filters>(EMPTY_FILTERS);
-  const [detailId, setDetailId] = useState<string | null>(null);
+  const [sort, setSort] = useState<DataTableSort | null>(null);
 
   const load = useCallback(
     async (cursor?: string): Promise<void> => {
@@ -71,139 +78,130 @@ export function AuditLogScreen(): ReactNode {
     void load(before);
   }, [load, before]);
 
-  const detailRow = state.kind === "ready" ? state.rows.find((r) => r.id === detailId) : undefined;
-
   if (state.kind === "loading") {
     return (
-      <FormScreenShell testId="audit-log-screen">
+      <div className="p-6" data-testid="audit-log-screen">
         <Text variant="small">{t("audit.log.loading")}</Text>
-      </FormScreenShell>
+      </div>
     );
   }
 
   if (state.kind === "error") {
     return (
-      <FormScreenShell testId="audit-log-screen">
+      <div className="p-6" data-testid="audit-log-screen">
         <Banner variant="error">{state.message}</Banner>
-      </FormScreenShell>
+      </div>
     );
   }
 
+  const openDetail = (id: string): void =>
+    nav.navigate({ screenId: AUDIT_LOG_DETAIL_SCREEN_ID, entityId: id });
+
   return (
-    <FormScreenShell testId="audit-log-screen" className="flex max-w-5xl flex-col gap-6">
-      <Heading variant="page">{t("audit.log.title")}</Heading>
-
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <Field id="audit-filter-event" label={t("audit.log.filter.eventType")}>
-          <Input
-            kind="text"
-            id="audit-filter-event"
-            name="audit-filter-event"
-            value={filters.eventType}
-            onChange={(v: string) => setFilters((f) => ({ ...f, eventType: v }))}
-          />
-        </Field>
-        <Field id="audit-filter-aggregate" label={t("audit.log.filter.aggregateType")}>
-          <Input
-            kind="text"
-            id="audit-filter-aggregate"
-            name="audit-filter-aggregate"
-            value={filters.aggregateType}
-            onChange={(v) => setFilters((f) => ({ ...f, aggregateType: v }))}
-          />
-        </Field>
-        <Field id="audit-filter-from" label={t("audit.log.filter.from")}>
-          <Input
-            kind="date"
-            id="audit-filter-from"
-            name="audit-filter-from"
-            value={filters.from}
-            onChange={(v) => setFilters((f) => ({ ...f, from: v ?? "" }))}
-          />
-        </Field>
-        <Field id="audit-filter-to" label={t("audit.log.filter.to")}>
-          <Input
-            kind="date"
-            id="audit-filter-to"
-            name="audit-filter-to"
-            value={filters.to}
-            onChange={(v) => setFilters((f) => ({ ...f, to: v ?? "" }))}
-          />
-        </Field>
-      </div>
-      <div className="flex gap-2">
-        <Button
-          type="button"
-          variant="primary"
-          onClick={() => {
-            setBefore(undefined);
-            void load(undefined);
-          }}
-          testId="audit-log-apply-filters"
-        >
-          {t("audit.log.filter.apply")}
-        </Button>
-        <Button
-          type="button"
-          variant="secondary"
-          onClick={() => {
-            setFilters(EMPTY_FILTERS);
-            setBefore(undefined);
-          }}
-          testId="audit-log-reset-filters"
-        >
-          {t("audit.log.filter.reset")}
-        </Button>
+    <div className="w-full" data-testid="audit-log-screen">
+      <div className="flex flex-col gap-4 px-6 pt-6">
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <Field id="audit-filter-event" label={t("audit.log.filter.eventType")}>
+            <Input
+              kind="text"
+              id="audit-filter-event"
+              name="audit-filter-event"
+              value={filters.eventType}
+              onChange={(v: string) => setFilters((f) => ({ ...f, eventType: v }))}
+            />
+          </Field>
+          <Field id="audit-filter-aggregate" label={t("audit.log.filter.aggregateType")}>
+            <Input
+              kind="text"
+              id="audit-filter-aggregate"
+              name="audit-filter-aggregate"
+              value={filters.aggregateType}
+              onChange={(v) => setFilters((f) => ({ ...f, aggregateType: v }))}
+            />
+          </Field>
+          <Field id="audit-filter-from" label={t("audit.log.filter.from")}>
+            <Input
+              kind="date"
+              id="audit-filter-from"
+              name="audit-filter-from"
+              value={filters.from}
+              onChange={(v) => setFilters((f) => ({ ...f, from: v ?? "" }))}
+            />
+          </Field>
+          <Field id="audit-filter-to" label={t("audit.log.filter.to")}>
+            <Input
+              kind="date"
+              id="audit-filter-to"
+              name="audit-filter-to"
+              value={filters.to}
+              onChange={(v) => setFilters((f) => ({ ...f, to: v ?? "" }))}
+            />
+          </Field>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="primary"
+            onClick={() => {
+              setBefore(undefined);
+              void load(undefined);
+            }}
+            testId="audit-log-apply-filters"
+          >
+            {t("audit.log.filter.apply")}
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              setFilters(EMPTY_FILTERS);
+              setBefore(undefined);
+            }}
+            testId="audit-log-reset-filters"
+          >
+            {t("audit.log.filter.reset")}
+          </Button>
+        </div>
       </div>
 
-      <Card options={{ padded: false }}>
-        <DataTable
-          testId="audit-log-table"
-          columns={[
-            { field: "when", label: t("audit.log.col.when"), type: "string", sortable: false },
-            { field: "type", label: t("audit.log.col.type"), type: "string", sortable: false },
-            {
-              field: "aggregate",
-              label: t("audit.log.col.aggregate"),
-              type: "string",
-              sortable: false,
-            },
-            { field: "actor", label: t("audit.log.col.actor"), type: "string", sortable: false },
-          ]}
-          rows={state.rows.map((row) => ({
-            id: row.id,
-            values: {
-              when: formatWhen(row.createdAt),
-              type: row.type,
-              aggregate: `${row.aggregateType} / ${row.aggregateId}`,
-              actor: row.createdBy,
-            },
-          }))}
-          rowActions={[
-            {
-              id: "details",
-              label: t("audit.log.details"),
-              style: "secondary",
-              onTrigger: (row) => setDetailId(row.id),
-            },
-          ]}
-          rowActionMode="inline"
-          emptyState={<Text variant="small">{t("audit.log.empty")}</Text>}
-        />
-      </Card>
-
-      {detailRow !== undefined && (
-        <Card slots={{ title: t("audit.log.detail.title") }} options={{ padded: true }}>
-          <pre className="max-h-96 overflow-auto whitespace-pre-wrap break-all text-xs">
-            {JSON.stringify(detailRow.payload, null, 2)}
-          </pre>
-          <Button type="button" variant="secondary" onClick={() => setDetailId(null)}>
-            {t("audit.log.detail.close")}
-          </Button>
-        </Card>
-      )}
+      <DataTable
+        testId="audit-log-table"
+        columns={[
+          { field: "when", label: t("audit.log.col.when"), type: "string", sortable: true },
+          { field: "type", label: t("audit.log.col.type"), type: "string", sortable: true },
+          {
+            field: "aggregate",
+            label: t("audit.log.col.aggregate"),
+            type: "string",
+            sortable: false,
+          },
+          { field: "actor", label: t("audit.log.col.actor"), type: "string", sortable: false },
+        ]}
+        sort={sort}
+        onSortChange={setSort}
+        rows={sortAudit(state.rows, sort).map((row) => ({
+          id: row.id,
+          values: {
+            when: formatWhen(row.createdAt),
+            type: row.type,
+            aggregate: `${row.aggregateType} / ${row.aggregateId}`,
+            actor: row.createdBy,
+          },
+        }))}
+        onRowClick={(row) => openDetail(row.id)}
+        rowActions={[
+          {
+            id: "details",
+            label: t("audit.log.details"),
+            style: "secondary",
+            onTrigger: (row) => openDetail(row.id),
+          },
+        ]}
+        rowActionMode="inline"
+        emptyState={<Text variant="small">{t("audit.log.empty")}</Text>}
+      />
 
-      <div className="flex gap-2">
+      <div className="flex gap-2 px-6 pb-6">
         {before !== undefined && (
           <Button
             type="button"
@@ -225,10 +223,29 @@ export function AuditLogScreen(): ReactNode {
           </Button>
         )}
       </div>
-    </FormScreenShell>
+    </div>
   );
 }
 
+// Client-sort over the loaded page (≤50 rows). createdAt is an ISO string, so
+// lexicographic compare is chronological. Cross-page order stays cursor-based.
+const SORT_ACCESSORS: Record<string, (r: AuditRow) => string> = {
+  when: (r) => r.createdAt,
+  type: (r) => r.type,
+};
+
+function sortAudit(rows: readonly AuditRow[], sort: DataTableSort | null): readonly AuditRow[] {
+  if (sort === null) return rows;
+  const accessor = SORT_ACCESSORS[sort.field];
+  if (accessor === undefined) return rows;
+  const factor = sort.dir === "asc" ? 1 : -1;
+  return [...rows].sort((a, b) => {
+    const av = accessor(a);
+    const bv = accessor(b);
+    return av < bv ? -factor : av > bv ? factor : 0;
+  });
+}
+
 function formatWhen(value: string): string {
   try {
     return new Date(value).toLocaleString();

package/src/audit/web/client-plugin.tsx

@@ -1,7 +1,8 @@
 // @runtime client
 import { mergeTranslations, type TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
 import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
-import { AUDIT_FEATURE, AUDIT_LOG_SCREEN_ID } from "../constants";
+import { AUDIT_FEATURE, AUDIT_LOG_DETAIL_SCREEN_ID, AUDIT_LOG_SCREEN_ID } from "../constants";
+import { AuditLogDetailScreen } from "./audit-log-detail-screen";
 import { AuditLogScreen } from "./audit-log-screen";
 import { defaultTranslations } from "./i18n";
 
@@ -15,6 +16,7 @@ export function auditClient(options?: AuditClientOptions): ClientFeatureDefiniti
     translations: mergeTranslations(defaultTranslations, options?.translations ?? {}),
     components: {
       [AUDIT_LOG_SCREEN_ID]: AuditLogScreen,
+      [AUDIT_LOG_DETAIL_SCREEN_ID]: AuditLogDetailScreen,
     },
   };
 }

package/src/audit/web/index.ts

@@ -1,4 +1,5 @@
 // @runtime client
 
+export { AuditLogDetailScreen } from "./audit-log-detail-screen";
 export { AuditLogScreen } from "./audit-log-screen";
 export { type AuditClientOptions, auditClient } from "./client-plugin";

package/src/jobs/feature.ts

@@ -198,6 +198,7 @@ export function createJobsFeature(): FeatureDefinition {
       id: JOB_RUN_DETAIL_SCREEN_ID,
       type: "custom",
       renderer: { react: { __component: "JobRunDetailScreen" } },
+      listScreenId: JOB_RUNS_SCREEN_ID,
       access: systemAdminAccess,
     });
     r.nav({

package/src/jobs/i18n.ts

@@ -21,13 +21,14 @@ export const JOBS_I18N: Readonly<Record<string, LocalizedString>> = {
   "jobs.runs.col.status": { de: "Status", en: "Status" },
   "jobs.runs.col.started": { de: "Gestartet", en: "Started" },
   "jobs.runs.col.duration": { de: "Dauer (ms)", en: "Duration (ms)" },
-  "jobs.detail.title": { de: "Job-Lauf", en: "Job run" },
   "jobs.detail.loading": { de: "Lade Details…", en: "Loading details…" },
   "jobs.detail.missing": { de: "Lauf nicht gefunden.", en: "Run not found." },
-  "jobs.detail.back": { de: "← Zurück zur Liste", en: "← Back to list" },
   "jobs.detail.field.job": { de: "Job", en: "Job" },
   "jobs.detail.field.status": { de: "Status", en: "Status" },
   "jobs.detail.field.id": { de: "Run-ID", en: "Run ID" },
+  "jobs.detail.field.started": { de: "Gestartet", en: "Started" },
+  "jobs.detail.field.finished": { de: "Beendet", en: "Finished" },
+  "jobs.detail.field.duration": { de: "Dauer (ms)", en: "Duration (ms)" },
   "jobs.detail.field.error": { de: "Fehler", en: "Error" },
   "jobs.detail.logs": { de: "Logs", en: "Logs" },
   "jobs.detail.logs.empty": { de: "Keine Log-Zeilen.", en: "No log lines." },

package/src/jobs/web/job-run-detail-screen.tsx

@@ -31,7 +31,7 @@ type State =
 
 export function JobRunDetailScreen(): ReactNode {
   const t = useTranslation();
-  const { Banner, Button, Card, Heading, Text } = usePrimitives();
+  const { Banner, Button, Card, Text } = usePrimitives();
   const dispatcher = useDispatcher();
   const nav = useNav();
   const runId = nav.route?.entityId;
@@ -102,23 +102,28 @@ export function JobRunDetailScreen(): ReactNode {
 
   return (
     <FormScreenShell testId="job-run-detail-screen" className="flex flex-col gap-6">
-      <Button
-        type="button"
-        variant="secondary"
-        onClick={() => nav.navigate({ screenId: JOB_RUNS_SCREEN_ID })}
-        testId="job-run-back"
-      >
-        {t("jobs.detail.back")}
-      </Button>
-
-      <Heading variant="page">{t("jobs.detail.title")}</Heading>
-
       <Card slots={{ title: run.jobName }}>
         <dl className="grid gap-3 text-sm">
           <div>
             <dt className="font-medium">{t("jobs.detail.field.status")}</dt>
             <dd data-testid="job-run-status">{run.status}</dd>
           </div>
+          <div>
+            <dt className="font-medium">{t("jobs.detail.field.started")}</dt>
+            <dd data-testid="job-run-started">{formatWhen(run.startedAt)}</dd>
+          </div>
+          {run.finishedAt !== undefined && run.finishedAt !== null && (
+            <div>
+              <dt className="font-medium">{t("jobs.detail.field.finished")}</dt>
+              <dd data-testid="job-run-finished">{formatWhen(run.finishedAt)}</dd>
+            </div>
+          )}
+          {run.duration !== undefined && run.duration !== null && (
+            <div>
+              <dt className="font-medium">{t("jobs.detail.field.duration")}</dt>
+              <dd data-testid="job-run-duration">{run.duration}</dd>
+            </div>
+          )}
           <div>
             <dt className="font-medium">{t("jobs.detail.field.id")}</dt>
             <dd>
@@ -167,3 +172,11 @@ export function JobRunDetailScreen(): ReactNode {
     </FormScreenShell>
   );
 }
+
+function formatWhen(value: string): string {
+  try {
+    return new Date(value).toLocaleString();
+  } catch {
+    return value;
+  }
+}

package/src/jobs/web/job-runs-screen.tsx

@@ -1,8 +1,13 @@
 // @runtime client
 // SystemAdmin job-run list with link to detail screen.
 
-import { useDispatcher, useNav, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
+import {
+  type DataTableSort,
+  useDispatcher,
+  useNav,
+  usePrimitives,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import { JOB_RUN_DETAIL_SCREEN_ID, JobQueries } from "../constants";
 
@@ -33,11 +38,12 @@ const STATUS_FILTER_OPTIONS = [
 
 export function JobRunsScreen(): ReactNode {
   const t = useTranslation();
-  const { Banner, Card, DataTable, Field, Heading, Input, Text } = usePrimitives();
+  const { Banner, DataTable, Field, Input, Text } = usePrimitives();
   const dispatcher = useDispatcher();
   const nav = useNav();
   const [state, setState] = useState<State>({ kind: "loading" });
   const [statusFilter, setStatusFilter] = useState("");
+  const [sort, setSort] = useState<DataTableSort | null>(null);
 
   const filterOptions = STATUS_FILTER_OPTIONS.map((opt) => ({
     value: opt.value,
@@ -65,80 +71,90 @@ export function JobRunsScreen(): ReactNode {
 
   if (state.kind === "loading") {
     return (
-      <FormScreenShell testId="job-runs-screen">
+      <div className="p-6" data-testid="job-runs-screen">
         <Text variant="small">{t("jobs.runs.loading")}</Text>
-      </FormScreenShell>
+      </div>
     );
   }
 
   if (state.kind === "error") {
     return (
-      <FormScreenShell testId="job-runs-screen">
+      <div className="p-6" data-testid="job-runs-screen">
         <Banner variant="error">{state.message}</Banner>
-      </FormScreenShell>
+      </div>
     );
   }
 
+  const openDetail = (id: string): void =>
+    nav.navigate({ screenId: JOB_RUN_DETAIL_SCREEN_ID, entityId: id });
+
   return (
-    <FormScreenShell testId="job-runs-screen" className="flex max-w-5xl flex-col gap-6">
-      <Heading variant="page">{t("jobs.runs.title")}</Heading>
-
-      <Field id="job-runs-status-filter" label={t("jobs.runs.filter.status")}>
-        <Input
-          kind="select"
-          id="job-runs-status-filter"
-          name="job-runs-status-filter"
-          value={statusFilter}
-          onChange={setStatusFilter}
-          options={filterOptions}
-        />
-      </Field>
-
-      <Card options={{ padded: false }}>
-        <DataTable
-          testId="job-runs-table"
-          columns={[
-            { field: "job", label: t("jobs.runs.col.job"), type: "string", sortable: true },
-            { field: "status", label: t("jobs.runs.col.status"), type: "string", sortable: true },
-            {
-              field: "started",
-              label: t("jobs.runs.col.started"),
-              type: "string",
-              sortable: true,
-            },
-            {
-              field: "duration",
-              label: t("jobs.runs.col.duration"),
-              type: "string",
-              sortable: false,
-            },
-          ]}
-          rows={state.rows.map((row) => ({
-            id: row.id,
-            values: {
-              job: row.jobName,
-              status: row.status,
-              started: formatWhen(row.startedAt),
-              duration: row.duration ?? "—",
-            },
-          }))}
-          rowActions={[
-            {
-              id: "open",
-              label: t("jobs.runs.open"),
-              style: "secondary",
-              onTrigger: (row) =>
-                nav.navigate({ screenId: JOB_RUN_DETAIL_SCREEN_ID, entityId: row.id }),
-            },
-          ]}
-          rowActionMode="inline"
-          emptyState={<Text variant="small">{t("jobs.runs.empty")}</Text>}
-        />
-      </Card>
-    </FormScreenShell>
+    <DataTable
+      testId="job-runs-table"
+      columns={[
+        { field: "job", label: t("jobs.runs.col.job"), type: "string", sortable: true },
+        { field: "status", label: t("jobs.runs.col.status"), type: "string", sortable: true },
+        { field: "started", label: t("jobs.runs.col.started"), type: "string", sortable: true },
+        { field: "duration", label: t("jobs.runs.col.duration"), type: "string", sortable: false },
+      ]}
+      sort={sort}
+      onSortChange={setSort}
+      rows={sortJobRuns(state.rows, sort).map((row) => ({
+        id: row.id,
+        values: {
+          job: row.jobName,
+          status: row.status,
+          started: formatWhen(row.startedAt),
+          duration: row.duration ?? "—",
+        },
+      }))}
+      onRowClick={(row) => openDetail(row.id)}
+      toolbarStart={
+        <Field id="job-runs-status-filter" label={t("jobs.runs.filter.status")}>
+          <Input
+            kind="select"
+            id="job-runs-status-filter"
+            name="job-runs-status-filter"
+            value={statusFilter}
+            onChange={setStatusFilter}
+            options={filterOptions}
+          />
+        </Field>
+      }
+      rowActions={[
+        {
+          id: "open",
+          label: t("jobs.runs.open"),
+          style: "secondary",
+          onTrigger: (row) => openDetail(row.id),
+        },
+      ]}
+      rowActionMode="inline"
+      emptyState={<Text variant="small">{t("jobs.runs.empty")}</Text>}
+    />
   );
 }
 
+// Client-sort over the loaded page (≤50 rows). startedAt is an ISO string, so
+// lexicographic compare is chronological — no Date parsing needed.
+const SORT_ACCESSORS: Record<string, (r: JobRunRow) => string | number> = {
+  job: (r) => r.jobName,
+  status: (r) => r.status,
+  started: (r) => r.startedAt,
+};
+
+function sortJobRuns(rows: readonly JobRunRow[], sort: DataTableSort | null): readonly JobRunRow[] {
+  if (sort === null) return rows;
+  const accessor = SORT_ACCESSORS[sort.field];
+  if (accessor === undefined) return rows;
+  const factor = sort.dir === "asc" ? 1 : -1;
+  return [...rows].sort((a, b) => {
+    const av = accessor(a);
+    const bv = accessor(b);
+    return av < bv ? -factor : av > bv ? factor : 0;
+  });
+}
+
 function formatWhen(value: string): string {
   try {
     return new Date(value).toLocaleString();