@acmekit/dashboard 2.13.21 → 2.13.23

package/src/i18n/translations/en.json

@@ -2965,6 +2965,13 @@
     "transactionIdLabel": "Transaction ID",
     "workflowIdLabel": "Workflow ID",
     "progressLabel": "Progress",
+    "metrics": {
+      "stepsSummary": "{{completed}} of {{total}} steps",
+      "failedSteps": "{{count}} failed",
+      "skippedSteps": "{{count}} skipped",
+      "compensatedYes": "Compensated",
+      "compensatedNo": "Not compensated"
+    },
     "stepsCompletedLabel_one": "{{completed}} of {{count}} step",
     "stepsCompletedLabel_other": "{{completed}} of {{count}} steps",
     "list": {
@@ -3180,6 +3187,7 @@
     "note": "Note",
     "automaticTaxes": "Automatic Taxes",
     "taxInclusivePricing": "Tax inclusive pricing",
+    "duration": "Duration",
     "currency": "Currency",
     "address": "Address",
     "address2": "Apartment, suite, etc.",

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-general-section/workflow-execution-general-section.tsx

@@ -1,16 +1,10 @@
-import {
-  Badge,
-  Container,
-  Copy,
-  Heading,
-  StatusBadge,
-  Text,
-  clx,
-} from "@acmekit/ui"
+import { Badge, Container, Copy, Heading, StatusBadge, Text, clx } from "@acmekit/ui"
 import { useTranslation } from "react-i18next"
 import { getTransactionState, getTransactionStateColor } from "../../../utils"
 import { HttpTypes } from "@acmekit/types"
 import { TransactionState, TransactionStepState } from "../../../types"
+import { useDate } from "../../../../../hooks/use-date"
+import { STEP_ERROR_STATES, STEP_SKIPPED_STATES } from "../../../constants"
 
 type WorkflowExecutionGeneralSectionProps = {
   execution: HttpTypes.AdminWorkflowExecution
@@ -20,6 +14,7 @@ export const WorkflowExecutionGeneralSection = ({
   execution,
 }: WorkflowExecutionGeneralSectionProps) => {
   const { t } = useTranslation()
+  const { getFullDate } = useDate()
 
   const cleanId = execution.id.replace("wf_exec_", "")
   const translatedState = getTransactionState(
@@ -30,6 +25,27 @@ export const WorkflowExecutionGeneralSection = ({
     execution.state as TransactionState
   )
 
+  const createdAt = execution.created_at
+  const updatedAt = execution.updated_at
+
+  const allSteps = Object.values(execution.execution?.steps || {}).filter(
+    (step) => step.id !== ROOT_PREFIX
+  )
+
+  const totalSteps = allSteps.length
+  const completedSteps = allSteps.filter(
+    (step) => step.invoke.state === TransactionStepState.DONE
+  ).length
+  const failedSteps = allSteps.filter((step) =>
+    STEP_ERROR_STATES.includes(step.invoke.state as HttpTypes.TransactionStepState)
+  ).length
+  const skippedSteps = allSteps.filter((step) =>
+    STEP_SKIPPED_STATES.includes(step.invoke.state as HttpTypes.TransactionStepState)
+  ).length
+  const compensatedSteps = allSteps.filter(
+    (step) => step.compensate.state === TransactionStepState.REVERTED
+  ).length
+
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
@@ -43,17 +59,26 @@ export const WorkflowExecutionGeneralSection = ({
         <Text size="small" leading="compact" weight="plus">
           {t("workflowExecutions.workflowIdLabel")}
         </Text>
-        <Badge size="2xsmall" className="w-fit">
-          {execution.workflow_id}
-        </Badge>
+        <div className="flex items-center gap-x-1">
+          <Badge size="2xsmall" className="w-fit">
+            {execution.workflow_id}
+          </Badge>
+          <Copy content={execution.workflow_id} className="text-ui-fg-muted" />
+        </div>
       </div>
       <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
         <Text size="small" leading="compact" weight="plus">
           {t("workflowExecutions.transactionIdLabel")}
         </Text>
-        <Badge size="2xsmall" className="w-fit">
-          {execution.transaction_id}
-        </Badge>
+        <div className="flex items-center gap-x-1">
+          <Badge size="2xsmall" className="w-fit">
+            {execution.transaction_id}
+          </Badge>
+          <Copy
+            content={execution.transaction_id}
+            className="text-ui-fg-muted"
+          />
+        </div>
       </div>
       <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
         <Text size="small" leading="compact" weight="plus">
@@ -61,6 +86,58 @@ export const WorkflowExecutionGeneralSection = ({
         </Text>
         <Progress steps={execution.execution?.steps} />
       </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.summary")}
+        </Text>
+        <div className="flex flex-col gap-y-1">
+          <Text size="small" leading="compact" className="text-ui-fg-subtle">
+            {t("workflowExecutions.metrics.stepsSummary", {
+              completed: completedSteps,
+              total: totalSteps,
+            })}
+          </Text>
+          {failedSteps > 0 && (
+            <Text size="small" leading="compact" className="text-ui-fg-subtle">
+              {t("workflowExecutions.metrics.failedSteps", {
+                count: failedSteps,
+              })}
+            </Text>
+          )}
+          {skippedSteps > 0 && (
+            <Text size="small" leading="compact" className="text-ui-fg-subtle">
+              {t("workflowExecutions.metrics.skippedSteps", {
+                count: skippedSteps,
+              })}
+            </Text>
+          )}
+          <Text size="small" leading="compact" className="text-ui-fg-subtle">
+            {compensatedSteps > 0
+              ? t("workflowExecutions.metrics.compensatedYes")
+              : t("workflowExecutions.metrics.compensatedNo")}
+          </Text>
+        </div>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.createdAt")}
+        </Text>
+        <Text size="small" leading="compact">
+          {createdAt
+            ? getFullDate({ date: createdAt, includeTime: true })
+            : "-"}
+        </Text>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.updatedAt")}
+        </Text>
+        <Text size="small" leading="compact">
+          {updatedAt
+            ? getFullDate({ date: updatedAt, includeTime: true })
+            : "-"}
+        </Text>
+      </div>
     </Container>
   )
 }
@@ -79,7 +156,7 @@ const Progress = ({
       <Text size="small" leading="compact" className="text-ui-fg-subtle">
         {t("workflowExecutions.stepsCompletedLabel", {
           completed: 0,
-          total: 0,
+          count: 0,
         })}
       </Text>
     )

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-columns.tsx

@@ -1,11 +1,12 @@
-import { Badge } from "@acmekit/ui"
+import { Badge, Copy, Text, clx } from "@acmekit/ui"
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import { StatusCell } from "../../../../../components/table/table-cells/common/status-cell"
+import { DateCell } from "../../../../../components/table/table-cells/common/date-cell/date-cell"
 import { TransactionStepState } from "../../../types"
 import { getTransactionState, getTransactionStateColor } from "../../../utils"
 import { HttpTypes } from "@acmekit/types"
+import { DataTableStatusCell } from "../../../../../components/data-table/components/data-table-status-cell/data-table-status-cell"
 
 const columnHelper =
   createColumnHelper<
@@ -20,9 +21,20 @@ export const useWorkflowExecutionTableColumns = (): ColumnDef<
 
   return useMemo(
     () => [
-      columnHelper.accessor("transaction_id", {
-        header: t("workflowExecutions.transactionIdLabel"),
-        cell: ({ getValue }) => <Badge size="2xsmall">{getValue()}</Badge>,
+      columnHelper.accessor("workflow_id", {
+        header: t("workflowExecutions.workflowIdLabel"),
+        cell: ({ getValue }) => {
+          const workflowId = getValue()
+
+          return (
+            <div className="flex items-center gap-x-1">
+              <Badge size="2xsmall" className="truncate">
+                {workflowId}
+              </Badge>
+              <Copy content={workflowId} className="text-ui-fg-muted" />
+            </div>
+          )
+        },
       }),
       columnHelper.accessor("state", {
         header: t("fields.state"),
@@ -33,9 +45,9 @@ export const useWorkflowExecutionTableColumns = (): ColumnDef<
           const translatedState = getTransactionState(t, state)
 
           return (
-            <StatusCell color={color}>
+            <DataTableStatusCell color={color}>
               <span className="capitalize">{translatedState}</span>
-            </StatusCell>
+            </DataTableStatusCell>
           )
         },
       }),
@@ -47,7 +59,14 @@ export const useWorkflowExecutionTableColumns = (): ColumnDef<
             | undefined
 
           if (!steps) {
-            return "0 of 0 steps"
+            return (
+              <span className="text-ui-fg-subtle whitespace-nowrap">
+                {t("workflowExecutions.stepsCompletedLabel", {
+                  completed: 0,
+                  count: 0,
+                })}
+              </span>
+            )
           }
 
           const actionableSteps = Object.values(steps).filter(
@@ -58,10 +77,113 @@ export const useWorkflowExecutionTableColumns = (): ColumnDef<
             (step) => step.invoke.state === TransactionStepState.DONE
           )
 
-          return t("workflowExecutions.stepsCompletedLabel", {
-            completed: completedSteps.length,
-            count: actionableSteps.length,
-          })
+          return (
+            <div className="flex items-center gap-x-2">
+              <div className="flex items-center gap-x-[3px]">
+                {actionableSteps.map((step) => (
+                  <div
+                    key={step.id}
+                    className={clx(
+                      "bg-ui-bg-switch-off shadow-details-switch-background h-3 w-1.5 rounded-full",
+                      {
+                        "bg-ui-fg-muted":
+                          step.invoke.state === TransactionStepState.DONE,
+                      }
+                    )}
+                    data-completed={
+                      step.invoke.state === TransactionStepState.DONE
+                    }
+                  />
+                ))}
+              </div>
+              <span className="text-ui-fg-subtle whitespace-nowrap">
+                {t("workflowExecutions.stepsCompletedLabel", {
+                  completed: completedSteps.length,
+                  count: actionableSteps.length,
+                })}
+              </span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "duration",
+        header: t("fields.duration"),
+        cell: ({ row }) => {
+          const createdAt = row.original.created_at as Date | string | undefined
+          const updatedAt = row.original.updated_at as Date | string | undefined
+          const state = row.original.state as HttpTypes.TransactionState
+
+          if (!createdAt) {
+            return (
+              <Text size="small" leading="compact" className="text-ui-fg-subtle">
+                {"-"}
+              </Text>
+            )
+          }
+
+          const start = new Date(createdAt)
+          const end =
+            updatedAt &&
+            ["done", "failed", "reverted"].includes(state as string)
+              ? new Date(updatedAt)
+              : new Date()
+
+          if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            return (
+              <Text size="small" leading="compact" className="text-ui-fg-subtle">
+                {"-"}
+              </Text>
+            )
+          }
+
+          const ms = end.getTime() - start.getTime()
+
+          if (ms < 0) {
+            return (
+              <Text size="small" leading="compact" className="text-ui-fg-subtle">
+                {"-"}
+              </Text>
+            )
+          }
+
+          const seconds = Math.floor(ms / 1000)
+          const minutes = Math.floor(seconds / 60)
+          const hours = Math.floor(minutes / 60)
+
+          let label: string
+
+          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 (
+            <Text size="small" leading="compact" className="text-ui-fg-subtle">
+              {label}
+            </Text>
+          )
+        },
+      }),
+      columnHelper.accessor("created_at", {
+        header: t("fields.createdAt"),
+        cell: ({ getValue }) => {
+          const date = getValue()
+          return <DateCell date={date} />
+        },
+      }),
+      columnHelper.accessor("updated_at", {
+        header: t("fields.updatedAt"),
+        cell: ({ getValue }) => {
+          const date = getValue()
+          return <DateCell date={date} />
         },
       }),
     ],

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-filters.tsx

@@ -0,0 +1,57 @@
+import { useTranslation } from "react-i18next"
+import type { Filter } from "../../../../../components/table/data-table"
+
+/**
+ * Filters for the workflow executions list table.
+ *
+ * This follows the same pattern as other legacy DataTable filter hooks
+ * (for example: useOrderTableFilters, useApiKeyManagementTableFilters).
+ */
+export const useWorkflowExecutionTableFilters = (): Filter[] => {
+  const { t } = useTranslation()
+
+  const stateFilter: Filter = {
+    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: Filter[] = [
+    { key: "created_at", label: t("fields.createdAt"), type: "date" },
+    { key: "updated_at", label: t("fields.updatedAt"), type: "date" },
+  ]
+
+  return [stateFilter, ...dateFilters]
+}
+

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-query.tsx

@@ -8,13 +8,20 @@ export const useWorkflowExecutionTableQuery = ({
   pageSize?: number
   prefix?: string
 }) => {
-  const raw = useQueryParams(["q", "offset"], prefix)
+  const raw = useQueryParams(
+    ["q", "offset", "order", "state", "created_at", "updated_at"],
+    prefix
+  )
 
-  const { offset, ...rest } = raw
+  const { offset, order, state, created_at, updated_at, ...rest } = raw
 
   const searchParams: HttpTypes.AdminGetWorkflowExecutionsParams = {
     limit: pageSize,
     offset: offset ? parseInt(offset) : 0,
+    order: order ?? "-created_at",
+    state: state ? state.split(",") : undefined,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
     ...rest,
   }
 

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-list-table.tsx

@@ -5,6 +5,7 @@ import { _DataTable } from "../../../../../components/table/data-table"
 import { useWorkflowExecutions } from "../../../../../hooks/api/workflow-executions"
 import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useWorkflowExecutionTableColumns } from "./use-workflow-execution-table-columns"
+import { useWorkflowExecutionTableFilters } from "./use-workflow-execution-table-filters"
 import { useWorkflowExecutionTableQuery } from "./use-workflow-execution-table-query"
 
 const PAGE_SIZE = 20
@@ -15,6 +16,7 @@ export const WorkflowExecutionListTable = () => {
   const { searchParams, raw } = useWorkflowExecutionTableQuery({
     pageSize: PAGE_SIZE,
   })
+
   const { workflow_executions, count, isLoading, isError, error } =
     useWorkflowExecutions(
       {
@@ -26,6 +28,7 @@ export const WorkflowExecutionListTable = () => {
     )
 
   const columns = useWorkflowExecutionTableColumns()
+  const filters = useWorkflowExecutionTableFilters()
 
   const { table } = useDataTable({
     data: workflow_executions || [],
@@ -53,8 +56,13 @@ export const WorkflowExecutionListTable = () => {
       <_DataTable
         table={table}
         columns={columns}
+        filters={filters}
         count={count}
         isLoading={isLoading}
+        orderBy={[
+          { key: "created_at", label: t("fields.createdAt") },
+          { key: "updated_at", label: t("fields.updatedAt") },
+        ]}
         pageSize={PAGE_SIZE}
         navigateTo={(row) => `${row.id}`}
         search

package/dist/chunk-WILMJYUB.mjs

@@ -1,35 +0,0 @@
-// src/components/table/table-cells/common/status-cell/status-cell.tsx
-import { clx } from "@acmekit/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-var StatusCell = ({ 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 })
-  ] });
-};
-
-export {
-  StatusCell
-};