@acmekit/dashboard 2.13.35 → 2.13.36

package/src/routes/workflow-analytics/workflow-analytics.tsx

@@ -1,167 +0,0 @@
-import {
-  Badge,
-  Container,
-  Heading,
-  Text,
-} from "@acmekit/ui"
-import { useTranslation } from "react-i18next"
-import { SingleColumnPage } from "../../components/layout/pages"
-import { useWorkflowMetrics } from "../../hooks/api/workflow-metrics"
-
-export const WorkflowAnalytics = () => {
-  const { t } = useTranslation()
-
-  const {
-    total_24h,
-    success_rate_24h,
-    avg_duration_ms_24h,
-    running_now,
-    per_workflow,
-    isPending: isLoading,
-  } = useWorkflowMetrics()
-
-  const formatDuration = (ms: number) => {
-    if (ms < 1000) return `${ms}ms`
-    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
-    const min = Math.floor(ms / 60000)
-    const sec = Math.round((ms % 60000) / 1000)
-    return `${min}m ${sec}s`
-  }
-
-  const formatRate = (rate: number) => `${(rate * 100).toFixed(1)}%`
-
-  return (
-    <SingleColumnPage widgets={{ before: [], after: [] }}>
-      <Container className="divide-y p-0">
-        <div className="px-6 py-4">
-          <Heading>{t("workflowExecutions.analytics.domain")}</Heading>
-          <Text className="text-ui-fg-subtle" size="small">
-            {t("workflowExecutions.analytics.subtitle")}
-          </Text>
-        </div>
-
-        <div className="grid grid-cols-4 gap-px bg-ui-border-base">
-          <MetricCard
-            label={t("workflowExecutions.analytics.executions24h")}
-            value={isLoading ? "-" : String(total_24h ?? 0)}
-            subtitle="Last 24h"
-          />
-          <MetricCard
-            label={t("workflowExecutions.analytics.successRate")}
-            value={isLoading ? "-" : formatRate(success_rate_24h ?? 0)}
-            subtitle="Last 24h"
-            color={
-              (success_rate_24h ?? 1) >= 0.9
-                ? "green"
-                : (success_rate_24h ?? 1) >= 0.7
-                  ? "orange"
-                  : "red"
-            }
-          />
-          <MetricCard
-            label={t("workflowExecutions.analytics.avgDuration")}
-            value={
-              isLoading ? "-" : formatDuration(avg_duration_ms_24h ?? 0)
-            }
-            subtitle="Last 24h"
-          />
-          <MetricCard
-            label={t("workflowExecutions.analytics.runningNow")}
-            value={isLoading ? "-" : String(running_now ?? 0)}
-            color={(running_now ?? 0) > 0 ? "blue" : undefined}
-          />
-        </div>
-      </Container>
-
-      {per_workflow && per_workflow.length > 0 && (
-        <Container className="divide-y p-0">
-          <div className="px-6 py-4">
-            <Heading level="h2">
-              {t("workflowExecutions.analytics.perWorkflowBreakdown")}
-            </Heading>
-          </div>
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-ui-border-base border-b">
-                  <th className="text-ui-fg-subtle txt-compact-small-plus px-6 py-2 text-left">
-                    Workflow
-                  </th>
-                  <th className="text-ui-fg-subtle txt-compact-small-plus px-6 py-2 text-right">
-                    Runs
-                  </th>
-                  <th className="text-ui-fg-subtle txt-compact-small-plus px-6 py-2 text-right">
-                    Success Rate
-                  </th>
-                  <th className="text-ui-fg-subtle txt-compact-small-plus px-6 py-2 text-right">
-                    Avg Duration
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {per_workflow.map((wf) => (
-                  <tr
-                    key={wf.workflow_id}
-                    className="border-ui-border-base border-b last:border-b-0"
-                  >
-                    <td className="px-6 py-3">
-                      <Badge size="2xsmall">{wf.workflow_id}</Badge>
-                    </td>
-                    <td className="txt-compact-small text-ui-fg-subtle px-6 py-3 text-right">
-                      {wf.runs}
-                    </td>
-                    <td className="txt-compact-small text-ui-fg-subtle px-6 py-3 text-right">
-                      {formatRate(wf.success_rate)}
-                    </td>
-                    <td className="txt-compact-small text-ui-fg-subtle px-6 py-3 text-right">
-                      {formatDuration(wf.avg_duration_ms)}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </Container>
-      )}
-    </SingleColumnPage>
-  )
-}
-
-const MetricCard = ({
-  label,
-  value,
-  subtitle,
-  color,
-}: {
-  label: string
-  value: string
-  subtitle?: string
-  color?: "green" | "orange" | "red" | "blue"
-}) => {
-  const colorClass = color
-    ? {
-        green: "text-ui-tag-green-icon",
-        orange: "text-ui-tag-orange-icon",
-        red: "text-ui-tag-red-icon",
-        blue: "text-ui-tag-blue-icon",
-      }[color]
-    : "text-ui-fg-base"
-
-  return (
-    <div className="bg-ui-bg-base flex flex-col gap-y-1 px-6 py-4">
-      <Text size="small" className="text-ui-fg-subtle">
-        {label}
-      </Text>
-      <Text size="xlarge" weight="plus" className={colorClass}>
-        {value}
-      </Text>
-      {subtitle && (
-        <Text size="xsmall" className="text-ui-fg-muted">
-          {subtitle}
-        </Text>
-      )}
-    </div>
-  )
-}
-
-export const Component = WorkflowAnalytics

package/src/routes/workflow-definitions/workflow-definition-detail/workflow-definition-detail.tsx

@@ -1,98 +0,0 @@
-import { ArrowPathMini } from "@acmekit/icons"
-import {
-  Badge,
-  Button,
-  Container,
-  Copy,
-  Heading,
-  Text,
-} from "@acmekit/ui"
-import { useTranslation } from "react-i18next"
-import { Link, useParams } from "react-router-dom"
-import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
-import { SingleColumnPage } from "../../../components/layout/pages"
-import { useWorkflowDefinition } from "../../../hooks/api/workflow-definitions"
-
-export const WorkflowDefinitionDetail = () => {
-  const { id } = useParams()
-  const { t } = useTranslation()
-
-  const {
-    workflow_definition: definition,
-    isPending: isLoading,
-    isError,
-    error,
-  } = useWorkflowDefinition(id!)
-
-  if (isLoading) {
-    return <SingleColumnPageSkeleton sections={2} showJSON />
-  }
-
-  if (isError) {
-    throw error
-  }
-
-  if (!definition) {
-    return <SingleColumnPageSkeleton sections={2} showJSON />
-  }
-
-  return (
-    <SingleColumnPage
-      widgets={{ before: [], after: [] }}
-      data={definition}
-      showJSON
-      hasOutlet
-    >
-      <Container className="divide-y p-0">
-        <div className="flex items-center justify-between px-6 py-4">
-          <div className="flex items-center gap-x-3">
-            <Copy content={definition.id} asChild>
-              <Badge size="2xsmall" className="cursor-pointer">
-                {definition.id}
-              </Badge>
-            </Copy>
-          </div>
-          <Button variant="secondary" size="small" asChild>
-            <Link to="run">
-              <ArrowPathMini className="mr-1" />
-              {t("workflowExecutions.actions.runWorkflow")}
-            </Link>
-          </Button>
-        </div>
-      </Container>
-
-      <Container className="divide-y p-0">
-        <div className="px-6 py-4">
-          <Heading level="h2">
-            {t("workflowExecutions.definitions.steps")}
-          </Heading>
-          <Text size="small" className="text-ui-fg-subtle mt-1">
-            {t("workflowExecutions.definitions.stepCount")}:{" "}
-            {definition.steps?.length || 0}
-          </Text>
-        </div>
-        <div className="divide-y">
-          {(definition.steps || []).map((step, idx) => (
-            <div
-              key={`${step.action}-${idx}`}
-              className="flex items-center justify-between px-6 py-3"
-              style={{ paddingLeft: `${1.5 + step.depth * 1.5}rem` }}
-            >
-              <div className="flex items-center gap-x-2">
-                <span className="text-ui-fg-muted txt-compact-xsmall">
-                  {step.depth > 0 ? "└" : "●"}
-                </span>
-                <Badge size="2xsmall">{step.action}</Badge>
-              </div>
-              <span className="text-ui-fg-muted txt-compact-xsmall">
-                {step.noCompensation ? "no compensation" : ""}
-              </span>
-            </div>
-          ))}
-        </div>
-      </Container>
-    </SingleColumnPage>
-  )
-}
-
-export const Component = WorkflowDefinitionDetail

package/src/routes/workflow-definitions/workflow-definition-list/components/workflow-definition-list-table/use-workflow-definition-table-columns.tsx

@@ -1,78 +0,0 @@
-import { Badge, Copy } from "@acmekit/ui"
-import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
-import { useMemo } from "react"
-import { useTranslation } from "react-i18next"
-
-type WorkflowDefinition = {
-  id: string
-  handler_count: number
-  steps: Array<{ action: string; depth: number; noCompensation: boolean }>
-  options: Record<string, unknown>
-}
-
-const columnHelper = createColumnHelper<WorkflowDefinition>()
-
-export const useWorkflowDefinitionTableColumns = (): ColumnDef<
-  WorkflowDefinition,
-  any
->[] => {
-  const { t } = useTranslation()
-
-  return useMemo(
-    () => [
-      columnHelper.accessor("id", {
-        header: t("workflowExecutions.definitions.name"),
-        cell: ({ getValue }) => {
-          const id = getValue()
-          return (
-            <div className="flex items-center gap-x-1">
-              <Badge size="2xsmall" className="truncate">
-                {id}
-              </Badge>
-              <Copy content={id} className="text-ui-fg-muted" />
-            </div>
-          )
-        },
-      }),
-      columnHelper.accessor("steps", {
-        header: t("workflowExecutions.definitions.stepCount"),
-        cell: ({ getValue }) => {
-          const steps = getValue()
-          return (
-            <span className="text-ui-fg-subtle txt-compact-small">
-              {steps?.length || 0} {t("workflowExecutions.definitions.steps")}
-            </span>
-          )
-        },
-      }),
-      columnHelper.accessor("handler_count", {
-        header: t("workflowExecutions.definitions.handlers"),
-        cell: ({ getValue }) => {
-          return (
-            <span className="text-ui-fg-subtle txt-compact-small">
-              {getValue() || 0}
-            </span>
-          )
-        },
-      }),
-      columnHelper.display({
-        id: "schedule",
-        header: t("workflowExecutions.scheduled.schedule"),
-        cell: ({ row }) => {
-          const schedule = (row.original.options as any)?.schedule
-          if (!schedule) {
-            return (
-              <span className="text-ui-fg-muted txt-compact-small">-</span>
-            )
-          }
-          return (
-            <Badge size="2xsmall" color="purple">
-              {String(schedule)}
-            </Badge>
-          )
-        },
-      }),
-    ],
-    [t]
-  )
-}

package/src/routes/workflow-definitions/workflow-definition-list/components/workflow-definition-list-table/workflow-definition-list-table.tsx

@@ -1,65 +0,0 @@
-import { Container, Heading, Text } from "@acmekit/ui"
-import { keepPreviousData } from "@tanstack/react-query"
-import { useTranslation } from "react-i18next"
-import { _DataTable } from "../../../../../components/table/data-table"
-import { useWorkflowDefinitions } from "../../../../../hooks/api/workflow-definitions"
-import { useDataTable } from "../../../../../hooks/use-data-table"
-import { useWorkflowDefinitionTableColumns } from "./use-workflow-definition-table-columns"
-
-const PAGE_SIZE = 20
-
-export const WorkflowDefinitionListTable = () => {
-  const { t } = useTranslation()
-
-  const {
-    workflow_definitions,
-    count,
-    isPending: isLoading,
-    isError,
-    error,
-  } = useWorkflowDefinitions(undefined, {
-    placeholderData: keepPreviousData,
-  })
-
-  const definitions = workflow_definitions || []
-
-  const columns = useWorkflowDefinitionTableColumns()
-
-  const { table } = useDataTable({
-    data: definitions,
-    columns,
-    count,
-    pageSize: PAGE_SIZE,
-    enablePagination: true,
-    getRowId: (row: any) => row.id,
-  })
-
-  if (isError) {
-    throw error
-  }
-
-  return (
-    <Container className="divide-y p-0">
-      <div className="flex items-center justify-between px-6 py-4">
-        <div>
-          <Heading>
-            {t("workflowExecutions.definitions.domain")}
-          </Heading>
-          <Text className="text-ui-fg-subtle" size="small">
-            {t("workflowExecutions.definitions.subtitle")}
-          </Text>
-        </div>
-      </div>
-      <_DataTable
-        table={table}
-        columns={columns}
-        count={count}
-        isLoading={isLoading}
-        pageSize={PAGE_SIZE}
-        navigateTo={(row: any) => row.id}
-        search
-        pagination
-      />
-    </Container>
-  )
-}

package/src/routes/workflow-definitions/workflow-definition-list/workflow-definition-list.tsx

@@ -1,15 +0,0 @@
-import { SingleColumnPage } from "../../../components/layout/pages"
-import { WorkflowDefinitionListTable } from "./components/workflow-definition-list-table/workflow-definition-list-table"
-
-export const WorkflowDefinitionList = () => {
-  return (
-    <SingleColumnPage
-      widgets={{ before: [], after: [] }}
-      hasOutlet
-    >
-      <WorkflowDefinitionListTable />
-    </SingleColumnPage>
-  )
-}
-
-export const Component = WorkflowDefinitionList

package/src/routes/workflow-executions/workflow-execution-complete-step/workflow-execution-complete-step.tsx

@@ -1,270 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Button, Heading, Select, Textarea, toast } from "@acmekit/ui"
-import { useForm } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-import { useParams } from "react-router-dom"
-import * as zod from "zod"
-
-import { Form } from "../../../components/common/form"
-import { RouteDrawer, useRouteModal } from "../../../components/modals"
-import { KeyboundForm } from "../../../components/utilities/keybound-form"
-import {
-  useSetStepFailure,
-  useSetStepSuccess,
-  useWorkflowExecution,
-} from "../../../hooks/api/workflow-executions"
-import { getWaitingSteps } from "../utils"
-
-const CompleteStepSchema = zod.object({
-  step_id: zod.string().min(1, "Step is required"),
-  outcome: zod.enum(["success", "failure"]),
-  response: zod.string().refine(
-    (val) => {
-      if (!val.trim()) return true
-      try {
-        JSON.parse(val)
-        return true
-      } catch {
-        return false
-      }
-    },
-    { message: "Must be valid JSON" }
-  ),
-})
-
-export const WorkflowExecutionCompleteStep = () => {
-  const { t } = useTranslation()
-  const { id } = useParams()
-  const { handleSuccess } = useRouteModal()
-
-  const {
-    workflow_execution,
-    isPending: isLoading,
-    isError,
-    error,
-  } = useWorkflowExecution(id!)
-
-  if (isError) {
-    throw error
-  }
-
-  if (isLoading || !workflow_execution) {
-    return (
-      <RouteDrawer>
-        <RouteDrawer.Header>
-          <Heading>{t("workflowExecutions.actions.completeStep")}</Heading>
-        </RouteDrawer.Header>
-      </RouteDrawer>
-    )
-  }
-
-  const waitingSteps = getWaitingSteps(workflow_execution)
-
-  return (
-    <RouteDrawer>
-      <RouteDrawer.Header>
-        <Heading>{t("workflowExecutions.actions.completeStep")}</Heading>
-      </RouteDrawer.Header>
-      <CompleteStepForm
-        workflowId={workflow_execution.workflow_id}
-        transactionId={workflow_execution.transaction_id}
-        waitingSteps={waitingSteps}
-        onSuccess={handleSuccess}
-      />
-    </RouteDrawer>
-  )
-}
-
-const CompleteStepForm = ({
-  workflowId,
-  transactionId,
-  waitingSteps,
-  onSuccess,
-}: {
-  workflowId: string
-  transactionId: string
-  waitingSteps: { stepId: string }[]
-  onSuccess: () => void
-}) => {
-  const { t } = useTranslation()
-
-  const form = useForm<zod.infer<typeof CompleteStepSchema>>({
-    defaultValues: {
-      step_id: waitingSteps[0]?.stepId || "",
-      outcome: "success",
-      response: "{}",
-    },
-    resolver: zodResolver(CompleteStepSchema),
-  })
-
-  const outcome = form.watch("outcome")
-
-  const { mutateAsync: setSuccess, isPending: isSettingSuccess } =
-    useSetStepSuccess(workflowId)
-  const { mutateAsync: setFailure, isPending: isSettingFailure } =
-    useSetStepFailure(workflowId)
-
-  const isPending = isSettingSuccess || isSettingFailure
-
-  const handleSubmit = form.handleSubmit(async (values) => {
-    const response = values.response.trim()
-      ? JSON.parse(values.response)
-      : {}
-
-    if (values.outcome === "success") {
-      await setSuccess(
-        { transaction_id: transactionId, step_id: values.step_id, response },
-        {
-          onSuccess: () => {
-            toast.success(
-              t("workflowExecutions.asyncStep.completedSuccess")
-            )
-            onSuccess()
-          },
-          onError: (err) => {
-            toast.error(err.message)
-          },
-        }
-      )
-    } else {
-      await setFailure(
-        { transaction_id: transactionId, step_id: values.step_id, response },
-        {
-          onSuccess: () => {
-            toast.success(
-              t("workflowExecutions.asyncStep.completedSuccess")
-            )
-            onSuccess()
-          },
-          onError: (err) => {
-            toast.error(err.message)
-          },
-        }
-      )
-    }
-  })
-
-  return (
-    <RouteDrawer.Form form={form}>
-      <KeyboundForm
-        onSubmit={handleSubmit}
-        className="flex flex-1 flex-col overflow-hidden"
-      >
-        <RouteDrawer.Body className="flex max-w-full flex-1 flex-col gap-y-4 overflow-y-auto">
-          <Form.Field
-            control={form.control}
-            name="step_id"
-            render={({ field }) => {
-              return (
-                <Form.Item>
-                  <Form.Label>
-                    {t("workflowExecutions.asyncStep.stepLabel")}
-                  </Form.Label>
-                  <Form.Control>
-                    <Select
-                      value={field.value}
-                      onValueChange={field.onChange}
-                    >
-                      <Select.Trigger>
-                        <Select.Value
-                          placeholder={t(
-                            "workflowExecutions.asyncStep.stepLabel"
-                          )}
-                        />
-                      </Select.Trigger>
-                      <Select.Content>
-                        {waitingSteps.map((step) => (
-                          <Select.Item
-                            key={step.stepId}
-                            value={step.stepId}
-                          >
-                            {step.stepId}
-                          </Select.Item>
-                        ))}
-                      </Select.Content>
-                    </Select>
-                  </Form.Control>
-                  <Form.ErrorMessage />
-                </Form.Item>
-              )
-            }}
-          />
-          <Form.Field
-            control={form.control}
-            name="outcome"
-            render={({ field }) => {
-              return (
-                <Form.Item>
-                  <Form.Label>
-                    {t("workflowExecutions.asyncStep.outcomeLabel")}
-                  </Form.Label>
-                  <Form.Control>
-                    <Select
-                      value={field.value}
-                      onValueChange={field.onChange}
-                    >
-                      <Select.Trigger>
-                        <Select.Value />
-                      </Select.Trigger>
-                      <Select.Content>
-                        <Select.Item value="success">
-                          {t("workflowExecutions.asyncStep.success")}
-                        </Select.Item>
-                        <Select.Item value="failure">
-                          {t("workflowExecutions.asyncStep.failure")}
-                        </Select.Item>
-                      </Select.Content>
-                    </Select>
-                  </Form.Control>
-                  <Form.ErrorMessage />
-                </Form.Item>
-              )
-            }}
-          />
-          <Form.Field
-            control={form.control}
-            name="response"
-            render={({ field }) => {
-              return (
-                <Form.Item>
-                  <Form.Label>
-                    {t("workflowExecutions.asyncStep.responsePayload")}
-                  </Form.Label>
-                  <Form.Control>
-                    <Textarea
-                      {...field}
-                      className="font-mono text-xs"
-                      rows={10}
-                    />
-                  </Form.Control>
-                  <Form.ErrorMessage />
-                </Form.Item>
-              )
-            }}
-          />
-        </RouteDrawer.Body>
-        <RouteDrawer.Footer>
-          <div className="flex items-center justify-end gap-x-2">
-            <RouteDrawer.Close asChild>
-              <Button size="small" variant="secondary">
-                {t("actions.cancel")}
-              </Button>
-            </RouteDrawer.Close>
-            <Button
-              size="small"
-              type="submit"
-              isLoading={isPending}
-              variant={outcome === "failure" ? "danger" : "primary"}
-            >
-              {outcome === "failure"
-                ? t("workflowExecutions.asyncStep.markFailure")
-                : t("workflowExecutions.asyncStep.markSuccess")}
-            </Button>
-          </div>
-        </RouteDrawer.Footer>
-      </KeyboundForm>
-    </RouteDrawer.Form>
-  )
-}
-
-export const Component = WorkflowExecutionCompleteStep

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-action-bar/index.ts

@@ -1 +0,0 @@
-export { WorkflowExecutionActionBar } from "./workflow-execution-action-bar"