new Date().toISOString().slice(0, 10);
+
+const start_of_year = () => {
+ const now = new Date();
+ return `${now.getFullYear()}-01-01`;
+};
+
+const date_param = (value, end = false) =>
+ value ? `${value}T${end ? "23:59:59.999" : "00:00:00.000"}+0000` : null;
+
+const process_report_params = (form) => ({
+ periodUnit: form.period_unit.value,
+ processDefinitionKeyIn: form.process_definition_keys.value,
+ startedAfter: date_param(form.started_after.value),
+ startedBefore: date_param(form.started_before.value, true),
+});
+
+const task_report_params = (form) => ({
+ reportType: form.report_type.value,
+ periodUnit:
+ form.report_type.value === "duration" ? form.period_unit.value : null,
+ groupBy: form.report_type.value === "count" ? form.group_by.value : null,
+ completedAfter: date_param(form.completed_after.value),
+ completedBefore: date_param(form.completed_before.value, true),
+});
+
+const load_reports = (state, process_form, task_form) => {
+ void engine_rest.report.process_instance_duration(
+ state,
+ process_report_params(process_form),
+ );
+ void engine_rest.report.task(state, task_report_params(task_form));
+};
+
+const num = (value) => (value ?? 0).toLocaleString();
+
+const format_duration = (value) => {
+ if (value === null || value === undefined) return "-";
+ const total_seconds = Math.round(Number(value) / 1000),
+ days = Math.floor(total_seconds / 86400),
+ hours = Math.floor((total_seconds % 86400) / 3600),
+ minutes = Math.floor((total_seconds % 3600) / 60),
+ seconds = total_seconds % 60;
+
+ if (days > 0) return `${days}d ${hours}h`;
+ if (hours > 0) return `${hours}h ${minutes}m`;
+ if (minutes > 0) return `${minutes}m ${seconds}s`;
+ return `${seconds}s`;
+};
+
+const csv_escape = (value) => {
+ const text = value === null || value === undefined ? "" : String(value);
+ return /[",\n]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
+};
+
+const download_text = (filename, type, content) => {
+ const url = URL.createObjectURL(new Blob([content], { type })),
+ link = document.createElement("a");
+ link.href = url;
+ link.download = filename;
+ link.click();
+ URL.revokeObjectURL(url);
+};
+
+const export_json = (filename, rows) =>
+ download_text(
+ filename,
+ "application/json",
+ JSON.stringify(rows ?? [], null, 2),
+ );
+
+const export_csv = (filename, rows, columns) => {
+ const csv = [
+ columns.map(({ label }) => csv_escape(label)).join(","),
+ ...(rows ?? []).map((row) =>
+ columns.map(({ value }) => csv_escape(value(row))).join(","),
+ ),
+ ].join("\n");
+ download_text(filename, "text/csv", csv);
+};
+
+const ReportsPage = () => {
+ const state = useContext(AppState),
+ [t] = useTranslation(),
+ process_form = {
+ period_unit: useSignal("month"),
+ process_definition_keys: useSignal(""),
+ started_after: useSignal(start_of_year()),
+ started_before: useSignal(today()),
+ },
+ task_form = {
+ report_type: useSignal("count"),
+ period_unit: useSignal("month"),
+ group_by: useSignal("processDefinition"),
+ completed_after: useSignal(start_of_year()),
+ completed_before: useSignal(today()),
+ };
+
+ useEffect(() => {
+ load_reports(state, process_form, task_form);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+
+
{t("reports.title")}
+
{t("reports.subtitle")}
+
{t("reports.process.title")}
+
+
+
+ }
+ />
+
+ );
+};
+
+const TaskReport = ({ form }) => {
+ const state = useContext(AppState),
+ [t] = useTranslation(),
+ signal = state.api.report.task,
+ run = (event) => {
+ event.preventDefault();
+ void engine_rest.report.task(state, task_report_params(form));
+ };
+
+ return (
+
+
+ {t("reports.task.title")}
+
+
+
+
+ form.report_type.value === "duration" ? (
+
+ ) : (
+
+ )
+ }
+ />
+
+ );
+};
+
+const ExportButtons = ({ filename, signal, columns }) => {
+ const [t] = useTranslation(),
+ rows = signal.value?.data ?? [],
+ disabled = rows.length === 0;
+
+ return (
+
+
+
+
+ );
+};
+
+const DurationTable = ({ rows }) => {
+ const [t] = useTranslation();
+ if (rows.length === 0)
+ return {t("reports.no-results")}
;
+
+ return (
+
+
+
+ | {t("reports.period.title")} |
+ {t("reports.minimum")} |
+ {t("reports.average")} |
+ {t("reports.maximum")} |
+
+
+
+ {rows.map((row) => (
+
+ | {format_period(row, t)} |
+ {format_duration(row.minimum)} |
+ {format_duration(row.average)} |
+ {format_duration(row.maximum)} |
+
+ ))}
+
+
+ );
+};
+
+const TaskCountTable = ({ rows }) => {
+ const [t] = useTranslation();
+ if (rows.length === 0)
+ return {t("reports.no-results")}
;
+
+ return (
+
+
+
+ | {t("reports.task.group")} |
+ {t("reports.task.process-definition")} |
+ {t("common.key")} |
+ {t("reports.count")} |
+
+
+
+ {rows.map((row) => (
+
+ |
+ {row.taskName ??
+ row.taskDefinitionKey ??
+ row.processDefinitionName ??
+ "-"}
+ |
+ {row.processDefinitionName ?? row.processDefinitionId ?? "-"} |
+ {row.processDefinitionKey ?? "-"} |
+ {num(row.count)} |
+
+ ))}
+
+
+ );
+};
+
+const format_period = (row, t) => {
+ const unit = String(row.periodUnit ?? "").toLowerCase();
+ if (unit === "quarter")
+ return t("reports.period.quarter-value", { quarter: row.period });
+ return t("reports.period.month-value", { month: row.period });
+};
+
+const duration_columns = (t) => [
+ { label: t("reports.period.title"), value: (row) => format_period(row, t) },
+ { label: t("reports.minimum"), value: (row) => row.minimum },
+ { label: t("reports.average"), value: (row) => row.average },
+ { label: t("reports.maximum"), value: (row) => row.maximum },
+];
+
+const task_count_columns = (t) => [
+ {
+ label: t("reports.task.group"),
+ value: (row) => row.taskName ?? row.taskDefinitionKey ?? "",
+ },
+ {
+ label: t("reports.task.process-definition"),
+ value: (row) => row.processDefinitionName ?? row.processDefinitionId ?? "",
+ },
+ { label: t("common.key"), value: (row) => row.processDefinitionKey ?? "" },
+ { label: t("reports.count"), value: (row) => row.count },
+];
+
+export { ReportsPage };
diff --git a/src/pages/Reports.test.jsx b/src/pages/Reports.test.jsx
new file mode 100644
index 0000000..3ea6fea
--- /dev/null
+++ b/src/pages/Reports.test.jsx
@@ -0,0 +1,121 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { h } from "preact";
+import { render, cleanup, fireEvent, waitFor } from "@testing-library/preact";
+
+vi.mock("../api/engine_rest.jsx", async (importOriginal) => {
+ const actual = await importOriginal();
+ const spyify = (o) =>
+ Object.fromEntries(
+ Object.entries(o).map(([k, v]) => [
+ k,
+ typeof v === "function"
+ ? vi.fn()
+ : v && typeof v === "object"
+ ? spyify(v)
+ : v,
+ ]),
+ );
+ return { ...actual, default: spyify(actual.default) };
+});
+
+import { AppState } from "../state.js";
+import engine_rest from "../api/engine_rest.jsx";
+import { ReportsPage } from "./Reports.jsx";
+import { create_mock_state, signal_response } from "../test/helpers.js";
+
+const renderPage = (state) =>
+ render(h(AppState.Provider, { value: state }, h(ReportsPage, {})));
+
+const populate_reports = (state) => {
+ signal_response(state.api.report.process_duration, [
+ { period: 1, periodUnit: "MONTH", minimum: 1000, average: 2000, maximum: 3000 },
+ ]);
+ signal_response(state.api.report.task, [
+ {
+ taskName: "Approve invoice",
+ taskDefinitionKey: "approve",
+ processDefinitionId: "invoice:1",
+ processDefinitionKey: "invoice",
+ processDefinitionName: "Invoice",
+ count: 42,
+ },
+ ]);
+};
+
+describe("ReportsPage", () => {
+ let state;
+
+ beforeEach(() => {
+ state = create_mock_state();
+ });
+
+ afterEach(cleanup);
+
+ it("fetches process duration and task reports on mount", () => {
+ renderPage(state);
+
+ expect(engine_rest.report.process_instance_duration).toHaveBeenCalled();
+ expect(engine_rest.report.task).toHaveBeenCalled();
+ expect(engine_rest.report.process_instance_duration.mock.lastCall[0]).toBe(
+ state,
+ );
+ expect(engine_rest.report.task.mock.lastCall[0]).toBe(state);
+ expect(engine_rest.report.task.mock.lastCall[1]).toMatchObject({
+ reportType: "count",
+ groupBy: "processDefinition",
+ });
+ });
+
+ it("renders duration and completed task report rows", () => {
+ populate_reports(state);
+
+ const { getByText } = renderPage(state);
+
+ expect(getByText("1s")).toBeTruthy();
+ expect(getByText("2s")).toBeTruthy();
+ expect(getByText("3s")).toBeTruthy();
+ expect(getByText("Approve invoice")).toBeTruthy();
+ expect(getByText("Invoice")).toBeTruthy();
+ expect(getByText("42")).toBeTruthy();
+ });
+
+ it("runs the process duration report with filters", async () => {
+ populate_reports(state);
+
+ const { container, getAllByText } = renderPage(state);
+ const process_section = container.querySelector(".reports > section");
+ const inputs = process_section.querySelectorAll("input");
+ fireEvent.input(inputs[0], { target: { value: "invoice" } });
+ fireEvent.input(inputs[1], { target: { value: "2026-01-01" } });
+ fireEvent.input(inputs[2], { target: { value: "2026-06-16" } });
+ fireEvent.submit(getAllByText("reports.run")[0].closest("form"));
+
+ await waitFor(() =>
+ expect(engine_rest.report.process_instance_duration).toHaveBeenCalled(),
+ );
+ const params =
+ engine_rest.report.process_instance_duration.mock.lastCall[1];
+ expect(params).toMatchObject({
+ processDefinitionKeyIn: "invoice",
+ startedAfter: "2026-01-01T00:00:00.000+0000",
+ startedBefore: "2026-06-16T23:59:59.999+0000",
+ });
+ });
+
+ it("runs the task duration report with period aggregation", async () => {
+ populate_reports(state);
+
+ const { container, getAllByText } = renderPage(state);
+ const task_section = container.querySelectorAll(".reports > section")[1];
+ fireEvent.change(task_section.querySelector("select"), {
+ target: { value: "duration" },
+ });
+ fireEvent.submit(getAllByText("reports.run")[1].closest("form"));
+
+ await waitFor(() => expect(engine_rest.report.task).toHaveBeenCalled());
+ expect(engine_rest.report.task.mock.lastCall[1]).toMatchObject({
+ reportType: "duration",
+ periodUnit: "month",
+ });
+ });
+});
diff --git a/src/state.js b/src/state.js
index f63ad2e..c218711 100644
--- a/src/state.js
+++ b/src/state.js
@@ -84,6 +84,10 @@ const createAppState = () => {
update: signal(null),
saved_filters: signal(null),
},
+ report: {
+ process_duration: signal(null),
+ task: signal(null),
+ },
tenant: {
list: signal(null),
by_member: signal(null),
diff --git a/src/state.test.js b/src/state.test.js
index c6b9968..4327958 100644
--- a/src/state.test.js
+++ b/src/state.test.js
@@ -57,6 +57,8 @@ describe("state", () => {
expect(api.authorization.all.value).toBeNull();
expect(api.batch.list.value).toBeNull();
expect(api.batch.one.value).toBeNull();
+ expect(api.report.process_duration.value).toBeNull();
+ expect(api.report.task.value).toBeNull();
});
});
});