@acmekit/dashboard 2.13.35 → 2.13.37

package/dist/workflow-execution-list-DETG4MRT.mjs

@@ -0,0 +1,347 @@
+import {
+  DateCell
+} from "./chunk-QZOY6YYT.mjs";
+import {
+  getTransactionState,
+  getTransactionStateColor
+} from "./chunk-RPAL6FHW.mjs";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-YLPAZ2DP.mjs";
+import {
+  useQueryParams
+} from "./chunk-C76H5USB.mjs";
+import "./chunk-DFFLVEZ5.mjs";
+import "./chunk-535OVBXR.mjs";
+import {
+  SingleColumnPage
+} from "./chunk-22YYMH6M.mjs";
+import {
+  useExtension
+} from "./chunk-C5P5PL3E.mjs";
+import {
+  useWorkflowExecutions
+} from "./chunk-LKWTBYYC.mjs";
+import "./chunk-ITNQKZQQ.mjs";
+import "./chunk-S4DMV3ZT.mjs";
+import "./chunk-774WSTCC.mjs";
+import "./chunk-DTY37DDZ.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-list-table.tsx
+import { Container, Heading, Text as Text2 } from "@acmekit/ui";
+import { keepPreviousData } from "@tanstack/react-query";
+import { useTranslation as useTranslation3 } from "react-i18next";
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-columns.tsx
+import { Badge, Copy, Text, clx as clx2 } from "@acmekit/ui";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+// src/components/data-table/components/data-table-status-cell/data-table-status-cell.tsx
+import { clx } from "@acmekit/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataTableStatusCell = ({
+  color,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "txt-compact-small text-ui-fg-subtle flex h-full w-full items-center gap-x-2 overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "presentation",
+        className: "flex h-5 w-2 items-center justify-center",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clx(
+              "h-2 w-2 rounded-sm shadow-[0px_0px_0px_1px_rgba(0,0,0,0.12)_inset]",
+              {
+                "bg-ui-tag-neutral-icon": color === "grey",
+                "bg-ui-tag-green-icon": color === "green",
+                "bg-ui-tag-red-icon": color === "red",
+                "bg-ui-tag-blue-icon": color === "blue",
+                "bg-ui-tag-orange-icon": color === "orange",
+                "bg-ui-tag-purple-icon": color === "purple"
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children })
+  ] });
+};
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-columns.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var columnHelper = createColumnHelper();
+var useWorkflowExecutionTableColumns = () => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      columnHelper.accessor("workflow_id", {
+        header: t("workflowExecutions.workflowIdLabel"),
+        cell: ({ getValue }) => {
+          const workflowId = getValue();
+          return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", className: "truncate", children: workflowId }),
+            /* @__PURE__ */ jsx2(Copy, { content: workflowId, className: "text-ui-fg-muted" })
+          ] });
+        }
+      }),
+      columnHelper.accessor("state", {
+        header: t("fields.state"),
+        cell: ({ getValue }) => {
+          const state = getValue();
+          const color = getTransactionStateColor(state);
+          const translatedState = getTransactionState(t, state);
+          return /* @__PURE__ */ jsx2(DataTableStatusCell, { color, children: /* @__PURE__ */ jsx2("span", { className: "capitalize", children: translatedState }) });
+        }
+      }),
+      columnHelper.accessor("execution", {
+        header: t("workflowExecutions.progressLabel"),
+        cell: ({ getValue }) => {
+          const steps = getValue()?.steps;
+          if (!steps) {
+            return /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-subtle whitespace-nowrap", children: t("workflowExecutions.stepsCompletedLabel", {
+              completed: 0,
+              count: 0
+            }) });
+          }
+          const actionableSteps = Object.values(steps).filter(
+            (step) => step.id !== ROOT_PREFIX
+          );
+          const completedSteps = actionableSteps.filter(
+            (step) => step.invoke.state === "done" /* DONE */
+          );
+          return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-x-[3px]", children: actionableSteps.map((step) => /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: clx2(
+                  "bg-ui-bg-switch-off shadow-details-switch-background h-3 w-1.5 rounded-full",
+                  {
+                    "bg-ui-fg-muted": step.invoke.state === "done" /* DONE */
+                  }
+                ),
+                "data-completed": step.invoke.state === "done" /* DONE */
+              },
+              step.id
+            )) }),
+            /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-subtle whitespace-nowrap", children: t("workflowExecutions.stepsCompletedLabel", {
+              completed: completedSteps.length,
+              count: actionableSteps.length
+            }) })
+          ] });
+        }
+      }),
+      columnHelper.display({
+        id: "duration",
+        header: t("fields.duration"),
+        cell: ({ row }) => {
+          const createdAt = row.original.created_at;
+          const updatedAt = row.original.updated_at;
+          const state = row.original.state;
+          if (!createdAt) {
+            return /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
+          }
+          const start = new Date(createdAt);
+          const end = updatedAt && ["done", "failed", "reverted"].includes(state) ? new Date(updatedAt) : /* @__PURE__ */ new Date();
+          if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            return /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
+          }
+          const ms = end.getTime() - start.getTime();
+          if (ms < 0) {
+            return /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "-" });
+          }
+          const seconds = Math.floor(ms / 1e3);
+          const minutes = Math.floor(seconds / 60);
+          const hours = Math.floor(minutes / 60);
+          let label;
+          if (hours > 0) {
+            label = `${hours}h ${minutes % 60}m`;
+          } else if (minutes > 0) {
+            label = `${minutes}m ${seconds % 60}s`;
+          } else if (seconds > 0) {
+            label = `${seconds}s`;
+          } else if (ms > 0) {
+            label = "<1s";
+          } else {
+            label = "0s";
+          }
+          return /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: label });
+        }
+      }),
+      columnHelper.accessor("created_at", {
+        header: t("fields.createdAt"),
+        cell: ({ getValue }) => {
+          const date = getValue();
+          return /* @__PURE__ */ jsx2(DateCell, { date });
+        }
+      }),
+      columnHelper.accessor("updated_at", {
+        header: t("fields.updatedAt"),
+        cell: ({ getValue }) => {
+          const date = getValue();
+          return /* @__PURE__ */ jsx2(DateCell, { date });
+        }
+      })
+    ],
+    [t]
+  );
+};
+var ROOT_PREFIX = "_root";
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-filters.tsx
+import { useTranslation as useTranslation2 } from "react-i18next";
+var useWorkflowExecutionTableFilters = () => {
+  const { t } = useTranslation2();
+  const stateFilter = {
+    key: "state",
+    label: t("fields.status"),
+    type: "select",
+    multiple: true,
+    options: [
+      {
+        label: t("workflowExecutions.state.done"),
+        value: "done"
+      },
+      {
+        label: t("workflowExecutions.state.failed"),
+        value: "failed"
+      },
+      {
+        label: t("workflowExecutions.state.reverted"),
+        value: "reverted"
+      },
+      {
+        label: t("workflowExecutions.state.invoking"),
+        value: "invoking"
+      },
+      {
+        label: t("workflowExecutions.transaction.state.waitingToCompensate"),
+        value: "waiting_to_compensate"
+      },
+      {
+        label: t("workflowExecutions.state.compensating"),
+        value: "compensating"
+      },
+      {
+        label: t("workflowExecutions.state.notStarted"),
+        value: "not_started"
+      }
+    ]
+  };
+  const dateFilters = [
+    { key: "created_at", label: t("fields.createdAt"), type: "date" },
+    { key: "updated_at", label: t("fields.updatedAt"), type: "date" }
+  ];
+  return [stateFilter, ...dateFilters];
+};
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-query.tsx
+var useWorkflowExecutionTableQuery = ({
+  pageSize = 20,
+  prefix
+}) => {
+  const raw = useQueryParams(
+    ["q", "offset", "order", "state", "created_at", "updated_at"],
+    prefix
+  );
+  const { offset, order, state, created_at, updated_at, ...rest } = raw;
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? parseInt(offset) : 0,
+    order: order ?? "-created_at",
+    state: state ? state.split(",") : void 0,
+    created_at: created_at ? JSON.parse(created_at) : void 0,
+    updated_at: updated_at ? JSON.parse(updated_at) : void 0,
+    ...rest
+  };
+  return {
+    searchParams,
+    raw
+  };
+};
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-list-table.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var WorkflowExecutionListTable = () => {
+  const { t } = useTranslation3();
+  const { searchParams, raw } = useWorkflowExecutionTableQuery({
+    pageSize: PAGE_SIZE
+  });
+  const { workflow_executions, count, isLoading, isError, error } = useWorkflowExecutions(
+    {
+      ...searchParams
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  const columns = useWorkflowExecutionTableColumns();
+  const filters = useWorkflowExecutionTableFilters();
+  const { table } = useDataTable({
+    data: workflow_executions || [],
+    columns,
+    count,
+    pageSize: PAGE_SIZE,
+    enablePagination: true,
+    getRowId: (row) => row.id
+  });
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs3(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx3(Heading, { children: t("workflowExecutions.domain") }),
+      /* @__PURE__ */ jsx3(Text2, { className: "text-ui-fg-subtle", size: "small", children: t(`workflowExecutions.subtitle`) })
+    ] }) }),
+    /* @__PURE__ */ jsx3(
+      _DataTable,
+      {
+        table,
+        columns,
+        filters,
+        count,
+        isLoading,
+        orderBy: [
+          { key: "created_at", label: t("fields.createdAt") },
+          { key: "updated_at", label: t("fields.updatedAt") }
+        ],
+        pageSize: PAGE_SIZE,
+        navigateTo: (row) => `${row.id}`,
+        search: true,
+        pagination: true,
+        queryObject: raw,
+        noRecords: {
+          message: t("workflowExecutions.list.noRecordsMessage")
+        }
+      }
+    )
+  ] });
+};
+
+// src/routes/workflow-executions/workflow-execution-list/workflow-execution-list.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var WorkflowExcecutionList = () => {
+  const { getWidgets } = useExtension();
+  return /* @__PURE__ */ jsx4(
+    SingleColumnPage,
+    {
+      widgets: {
+        after: getWidgets("workflow.list.after"),
+        before: getWidgets("workflow.list.before")
+      },
+      hasOutlet: false,
+      children: /* @__PURE__ */ jsx4(WorkflowExecutionListTable, {})
+    }
+  );
+};
+export {
+  WorkflowExcecutionList as Component
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acmekit/dashboard",
-  "version": "2.13.35",
+  "version": "2.13.37",
   "scripts": {
     "generate:static": "node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "../../../node_modules/.bin/vite",
@@ -39,10 +39,10 @@
     "dist"
   ],
   "dependencies": {
-    "@acmekit/admin-shared": "2.13.35",
-    "@acmekit/icons": "2.13.35",
-    "@acmekit/js-sdk": "2.13.35",
-    "@acmekit/ui": "4.1.31",
+    "@acmekit/admin-shared": "2.13.37",
+    "@acmekit/icons": "2.13.37",
+    "@acmekit/js-sdk": "2.13.37",
+    "@acmekit/ui": "4.1.33",
     "@ariakit/react": "^0.4.15",
     "@babel/runtime": "^7.26.10",
     "@dnd-kit/core": "^6.1.0",
@@ -80,10 +80,10 @@
     "zod": "3.25.76"
   },
   "devDependencies": {
-    "@acmekit/admin-shared": "2.13.35",
-    "@acmekit/admin-vite-plugin": "2.13.35",
-    "@acmekit/types": "2.13.35",
-    "@acmekit/ui-preset": "2.13.35"
+    "@acmekit/admin-shared": "2.13.37",
+    "@acmekit/admin-vite-plugin": "2.13.37",
+    "@acmekit/types": "2.13.37",
+    "@acmekit/ui-preset": "2.13.37"
   },
   "packageManager": "yarn@3.2.1"
 }

package/src/components/layout/main-layout/main-layout.tsx

@@ -1,5 +1,4 @@
 import {
-  Bolt,
   ChevronDownMini,
   CogSixTooth,
   EllipsisHorizontal,
@@ -129,33 +128,7 @@ const Header = () => {
 }
 
 const useCoreRoutes = (): Omit<INavItem, "pathname">[] => {
-  const { t } = useTranslation()
-
-  return [
-    {
-      icon: <Bolt />,
-      label: t("workflowExecutions.domain"),
-      to: "/settings/workflows",
-      items: [
-        {
-          label: t("workflowExecutions.tabs.executions"),
-          to: "/settings/workflows",
-        },
-        {
-          label: t("workflowExecutions.tabs.definitions"),
-          to: "/settings/workflows/definitions",
-        },
-        {
-          label: t("workflowExecutions.tabs.scheduled"),
-          to: "/settings/workflows/scheduled",
-        },
-        {
-          label: t("workflowExecutions.tabs.analytics"),
-          to: "/settings/workflows/analytics",
-        },
-      ],
-    },
-  ]
+  return []
 }
 
 const Searchbar = () => {

package/src/dashboard-app/routes/get-route.map.tsx

@@ -186,15 +186,6 @@ const defaultSettingsRouteChildren: RouteObject[] = [
         path: "",
         lazy: () =>
           import("../../routes/workflow-executions/workflow-execution-list"),
-        children: [
-          {
-            path: "run",
-            lazy: () =>
-              import(
-                "../../routes/workflow-executions/workflow-execution-run/workflow-execution-run"
-              ),
-          },
-        ],
       },
       {
         path: ":id",
@@ -212,68 +203,6 @@ const defaultSettingsRouteChildren: RouteObject[] = [
             },
           }
         },
-        children: [
-          {
-            path: "rerun",
-            lazy: () =>
-              import(
-                "../../routes/workflow-executions/workflow-execution-rerun/workflow-execution-rerun"
-              ),
-          },
-          {
-            path: "complete-step",
-            lazy: () =>
-              import(
-                "../../routes/workflow-executions/workflow-execution-complete-step/workflow-execution-complete-step"
-              ),
-          },
-        ],
-      },
-      {
-        path: "definitions",
-        element: <Outlet />,
-        handle: {
-          breadcrumb: () => t("workflowExecutions.definitions.domain"),
-        },
-        children: [
-          {
-            path: "",
-            lazy: () =>
-              import(
-                "../../routes/workflow-definitions/workflow-definition-list/workflow-definition-list"
-              ),
-          },
-          {
-            path: ":id",
-            lazy: () =>
-              import(
-                "../../routes/workflow-definitions/workflow-definition-detail/workflow-definition-detail"
-              ),
-            children: [
-              {
-                path: "run",
-                lazy: () =>
-                  import(
-                    "../../routes/workflow-executions/workflow-execution-run/workflow-execution-run"
-                  ),
-              },
-            ],
-          },
-        ],
-      },
-      {
-        path: "analytics",
-        lazy: () =>
-          import(
-            "../../routes/workflow-analytics/workflow-analytics"
-          ),
-      },
-      {
-        path: "scheduled",
-        lazy: () =>
-          import(
-            "../../routes/workflow-scheduled/workflow-scheduled-list"
-          ),
       },
     ],
   },

package/src/hooks/api/workflow-executions.tsx

@@ -1,12 +1,5 @@
-import {
-  QueryKey,
-  UseMutationOptions,
-  UseQueryOptions,
-  useMutation,
-  useQuery,
-} from "@tanstack/react-query"
+import { QueryKey, UseQueryOptions, useQuery } from "@tanstack/react-query"
 import { sdk } from "../../lib/client"
-import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
 import { HttpTypes } from "@acmekit/types"
 import { FetchError } from "@acmekit/js-sdk"
@@ -57,140 +50,3 @@ export const useWorkflowExecution = (
 
   return { ...data, ...rest }
 }
-
-export const useRunWorkflow = (
-  workflowId: string,
-  options?: UseMutationOptions<
-    Record<string, unknown>,
-    FetchError,
-    { input?: Record<string, unknown>; transaction_id?: string }
-  >
-) => {
-  return useMutation({
-    mutationFn: (payload) =>
-      sdk.admin.workflowExecution.run(workflowId, payload),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({
-        queryKey: workflowExecutionsQueryKeys.lists(),
-      })
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
-export const useCancelWorkflowExecution = (
-  workflowId: string,
-  transactionId: string,
-  options?: UseMutationOptions<
-    Record<string, unknown>,
-    FetchError,
-    { reason?: string } | void
-  >
-) => {
-  return useMutation({
-    mutationFn: (payload) =>
-      sdk.admin.workflowExecution.cancel(
-        workflowId,
-        transactionId,
-        (payload as { reason?: string }) || {}
-      ),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({
-        queryKey: workflowExecutionsQueryKeys.lists(),
-      })
-      queryClient.invalidateQueries({
-        queryKey: workflowExecutionsQueryKeys.details(),
-      })
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
-export const useRetryStep = (
-  workflowId: string,
-  transactionId: string,
-  options?: UseMutationOptions<
-    Record<string, unknown>,
-    FetchError,
-    { step_id: string; action?: string }
-  >
-) => {
-  return useMutation({
-    mutationFn: (payload) =>
-      sdk.admin.workflowExecution.retryStep(
-        workflowId,
-        transactionId,
-        payload
-      ),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({
-        queryKey: workflowExecutionsQueryKeys.lists(),
-      })
-      queryClient.invalidateQueries({
-        queryKey: workflowExecutionsQueryKeys.details(),
-      })
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
-export const useSetStepSuccess = (
-  workflowId: string,
-  options?: UseMutationOptions<
-    Record<string, unknown>,
-    FetchError,
-    {
-      transaction_id: string
-      step_id: string
-      response?: Record<string, unknown>
-      action?: string
-    }
-  >
-) => {
-  return useMutation({
-    mutationFn: (payload) =>
-      sdk.admin.workflowExecution.setStepSuccess(workflowId, payload),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({
-        queryKey: workflowExecutionsQueryKeys.lists(),
-      })
-      queryClient.invalidateQueries({
-        queryKey: workflowExecutionsQueryKeys.details(),
-      })
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}
-
-export const useSetStepFailure = (
-  workflowId: string,
-  options?: UseMutationOptions<
-    Record<string, unknown>,
-    FetchError,
-    {
-      transaction_id: string
-      step_id: string
-      response?: Record<string, unknown>
-      action?: string
-    }
-  >
-) => {
-  return useMutation({
-    mutationFn: (payload) =>
-      sdk.admin.workflowExecution.setStepFailure(workflowId, payload),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({
-        queryKey: workflowExecutionsQueryKeys.lists(),
-      })
-      queryClient.invalidateQueries({
-        queryKey: workflowExecutionsQueryKeys.details(),
-      })
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}