@acmekit/dashboard 2.13.6 → 2.13.8

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

@@ -0,0 +1,175 @@
+import {
+  getTransactionState,
+  getTransactionStateColor
+} from "./chunk-RPAL6FHW.mjs";
+import {
+  StatusCell
+} from "./chunk-WILMJYUB.mjs";
+import {
+  useWorkflowExecutions
+} from "./chunk-LKWTBYYC.mjs";
+import {
+  SingleColumnPage
+} from "./chunk-22YYMH6M.mjs";
+import {
+  useExtension
+} from "./chunk-C5P5PL3E.mjs";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-7ZHDHEUH.mjs";
+import "./chunk-ITNQKZQQ.mjs";
+import {
+  useQueryParams
+} from "./chunk-C76H5USB.mjs";
+import "./chunk-DFFLVEZ5.mjs";
+import "./chunk-535OVBXR.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 } from "@acmekit/ui";
+import { keepPreviousData } from "@tanstack/react-query";
+import { useTranslation as useTranslation2 } from "react-i18next";
+
+// src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-columns.tsx
+import { Badge } from "@acmekit/ui";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { jsx } from "react/jsx-runtime";
+var columnHelper = createColumnHelper();
+var useWorkflowExecutionTableColumns = () => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      columnHelper.accessor("transaction_id", {
+        header: t("workflowExecutions.transactionIdLabel"),
+        cell: ({ getValue }) => /* @__PURE__ */ jsx(Badge, { size: "2xsmall", children: getValue() })
+      }),
+      columnHelper.accessor("state", {
+        header: t("fields.state"),
+        cell: ({ getValue }) => {
+          const state = getValue();
+          const color = getTransactionStateColor(state);
+          const translatedState = getTransactionState(t, state);
+          return /* @__PURE__ */ jsx(StatusCell, { color, children: /* @__PURE__ */ jsx("span", { className: "capitalize", children: translatedState }) });
+        }
+      }),
+      columnHelper.accessor("execution", {
+        header: t("workflowExecutions.progressLabel"),
+        cell: ({ getValue }) => {
+          const steps = getValue()?.steps;
+          if (!steps) {
+            return "0 of 0 steps";
+          }
+          const actionableSteps = Object.values(steps).filter(
+            (step) => step.id !== ROOT_PREFIX
+          );
+          const completedSteps = actionableSteps.filter(
+            (step) => step.invoke.state === "done" /* DONE */
+          );
+          return t("workflowExecutions.stepsCompletedLabel", {
+            completed: completedSteps.length,
+            count: actionableSteps.length
+          });
+        }
+      })
+    ],
+    [t]
+  );
+};
+var ROOT_PREFIX = "_root";
+
+// 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"], prefix);
+  const { offset, ...rest } = raw;
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? parseInt(offset) : 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 jsx2, jsxs } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var WorkflowExecutionListTable = () => {
+  const { t } = useTranslation2();
+  const { searchParams, raw } = useWorkflowExecutionTableQuery({
+    pageSize: PAGE_SIZE
+  });
+  const { workflow_executions, count, isLoading, isError, error } = useWorkflowExecutions(
+    {
+      ...searchParams
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  const columns = useWorkflowExecutionTableColumns();
+  const { table } = useDataTable({
+    data: workflow_executions || [],
+    columns,
+    count,
+    pageSize: PAGE_SIZE,
+    enablePagination: true,
+    getRowId: (row) => row.id
+  });
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx2(Heading, { children: t("workflowExecutions.domain") }),
+      /* @__PURE__ */ jsx2(Text, { className: "text-ui-fg-subtle", size: "small", children: t(`workflowExecutions.subtitle`) })
+    ] }) }),
+    /* @__PURE__ */ jsx2(
+      _DataTable,
+      {
+        table,
+        columns,
+        count,
+        isLoading,
+        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 jsx3 } from "react/jsx-runtime";
+var WorkflowExcecutionList = () => {
+  const { getWidgets } = useExtension();
+  return /* @__PURE__ */ jsx3(
+    SingleColumnPage,
+    {
+      widgets: {
+        after: getWidgets("workflow.list.after"),
+        before: getWidgets("workflow.list.before")
+      },
+      hasOutlet: false,
+      children: /* @__PURE__ */ jsx3(WorkflowExecutionListTable, {})
+    }
+  );
+};
+export {
+  WorkflowExcecutionList as Component
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acmekit/dashboard",
-  "version": "2.13.6",
+  "version": "2.13.8",
   "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.6",
-    "@acmekit/icons": "2.13.6",
-    "@acmekit/js-sdk": "2.13.6",
-    "@acmekit/ui": "4.1.6",
+    "@acmekit/admin-shared": "2.13.8",
+    "@acmekit/icons": "2.13.8",
+    "@acmekit/js-sdk": "2.13.8",
+    "@acmekit/ui": "4.1.8",
     "@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.6",
-    "@acmekit/admin-vite-plugin": "2.13.6",
-    "@acmekit/types": "2.13.6",
-    "@acmekit/ui-preset": "2.13.6"
+    "@acmekit/admin-shared": "2.13.8",
+    "@acmekit/admin-vite-plugin": "2.13.8",
+    "@acmekit/types": "2.13.8",
+    "@acmekit/ui-preset": "2.13.8"
   },
   "packageManager": "yarn@3.2.1"
 }

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

@@ -1,11 +1,12 @@
 import { ArrowUturnLeft, MinusMini } from "@acmekit/icons"
 import { clx, Divider, IconButton, Text } from "@acmekit/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
-import { useEffect, useState } from "react"
+import { Fragment, useEffect, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
 
 import { useExtension } from "../../../providers/extension-provider"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
 import { INavItem, NavItem } from "../nav-item"
 import { Shell } from "../shell"
 import { UserMenu } from "../user-menu"
@@ -18,6 +19,48 @@ export const SettingsLayout = () => {
   )
 }
 
+const useSettingRoutes = (): INavItem[] => {
+  const isTranslationsEnabled = useFeatureFlag("translation")
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      { label: t("store.domain"), to: "/settings/store" },
+      { label: t("users.domain"), to: "/settings/users" },
+      ...(isTranslationsEnabled
+        ? [{ label: t("translations.domain"), to: "/settings/translations" }]
+        : []),
+    ],
+    [t, isTranslationsEnabled]
+  )
+}
+
+const useDeveloperRoutes = (): INavItem[] => {
+  const { t } = useTranslation()
+  return useMemo(
+    () => [
+      {
+        label: t("apiKeyManagement.domain.publishable"),
+        to: "/settings/publishable-api-keys",
+      },
+      {
+        label: t("apiKeyManagement.domain.secret"),
+        to: "/settings/secret-api-keys",
+      },
+      { label: t("workflowExecutions.domain"), to: "/settings/workflows" },
+    ],
+    [t]
+  )
+}
+
+const useMyAccountRoutes = (): INavItem[] => {
+  const { t } = useTranslation()
+  return useMemo(
+    () => [{ label: t("profile.domain"), to: "/settings/profile" }],
+    [t]
+  )
+}
+
 /**
  * Ensure that the `from` prop is not another settings route, to avoid
  * the user getting stuck in a navigation loop.
@@ -26,7 +69,6 @@ const getSafeFromValue = (from: string) => {
   if (from.startsWith("/settings")) {
     return "/"
   }
-
   return from
 }
 
@@ -34,6 +76,9 @@ const SettingsSidebar = () => {
   const { getMenu } = useExtension()
   const extensionRoutes = getMenu("settingsExtensions")
   const { t } = useTranslation()
+  const routes = useSettingRoutes()
+  const developerRoutes = useDeveloperRoutes()
+  const myAccountRoutes = useMyAccountRoutes()
 
   return (
     <aside className="relative flex flex-1 flex-col justify-between overflow-y-auto">
@@ -45,11 +90,34 @@ const SettingsSidebar = () => {
       </div>
       <div className="flex flex-1 flex-col">
         <div className="flex flex-1 flex-col overflow-y-auto">
+          <RadixCollapsibleSection
+            label={t("app.nav.settings.general")}
+            items={routes}
+          />
+          <div className="flex items-center justify-center px-3">
+            <Divider variant="dashed" />
+          </div>
+          <RadixCollapsibleSection
+            label={t("app.nav.settings.developer")}
+            items={developerRoutes}
+          />
+          <div className="flex items-center justify-center px-3">
+            <Divider variant="dashed" />
+          </div>
+          <RadixCollapsibleSection
+            label={t("app.nav.settings.myAccount")}
+            items={myAccountRoutes}
+          />
           {extensionRoutes.length > 0 ? (
-            <RadixCollapsibleSection
-              label={t("app.nav.common.extensions")}
-              items={extensionRoutes}
-            />
+            <Fragment>
+              <div className="flex items-center justify-center px-3">
+                <Divider variant="dashed" />
+              </div>
+              <RadixCollapsibleSection
+                label={t("app.nav.common.extensions")}
+                items={extensionRoutes}
+              />
+            </Fragment>
           ) : null}
         </div>
         <div className="bg-ui-bg-subtle sticky bottom-0">

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

@@ -18,6 +18,230 @@ function mergeSettingsRouteChildren(
     .flatMap((r) => r.children ?? [])
 }
 
+/** Default framework settings routes (profile, store, users, api-keys, workflows, translations). */
+const defaultSettingsRouteChildren: RouteObject[] = [
+  {
+    path: "profile",
+    errorElement: <ErrorBoundary />,
+    lazy: () => import("../../routes/profile/profile-detail"),
+    handle: { breadcrumb: () => t("profile.domain") },
+    children: [
+      {
+        path: "edit",
+        lazy: () => import("../../routes/profile/profile-edit"),
+      },
+    ],
+  },
+  {
+    path: "store",
+    errorElement: <ErrorBoundary />,
+    lazy: () => import("../../routes/store/store-detail"),
+    handle: { breadcrumb: () => t("store.domain") },
+    children: [
+      { path: "edit", lazy: () => import("../../routes/store/store-edit") },
+      {
+        path: "metadata/edit",
+        lazy: () => import("../../routes/store/store-metadata"),
+      },
+    ],
+  },
+  {
+    path: "users",
+    errorElement: <ErrorBoundary />,
+    element: <Outlet />,
+    handle: { breadcrumb: () => t("users.domain") },
+    children: [
+      {
+        path: "",
+        lazy: () => import("../../routes/users/user-list"),
+        children: [
+          {
+            path: "invite",
+            lazy: () => import("../../routes/users/user-invite"),
+          },
+        ],
+      },
+      {
+        path: ":id",
+        lazy: async () => {
+          const { Component, Breadcrumb, loader } = await import(
+            "../../routes/users/user-detail"
+          )
+          return {
+            Component,
+            loader,
+            handle: {
+              breadcrumb: (match: unknown) => (
+                <Breadcrumb {...(match as object)} />
+              ),
+            },
+          }
+        },
+        children: [
+          { path: "edit", lazy: () => import("../../routes/users/user-edit") },
+          {
+            path: "metadata/edit",
+            lazy: () => import("../../routes/users/user-metadata"),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "publishable-api-keys",
+    element: <Outlet />,
+    handle: { breadcrumb: () => t("apiKeyManagement.domain.publishable") },
+    children: [
+      {
+        path: "",
+        element: <Outlet />,
+        children: [
+          {
+            path: "",
+            lazy: () =>
+              import("../../routes/api-key-management/api-key-management-list"),
+            children: [
+              {
+                path: "create",
+                lazy: () =>
+                  import(
+                    "../../routes/api-key-management/api-key-management-create"
+                  ),
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: ":id",
+        lazy: async () => {
+          const { Component, Breadcrumb, loader } = await import(
+            "../../routes/api-key-management/api-key-management-detail"
+          )
+          return {
+            Component,
+            loader,
+            handle: {
+              breadcrumb: (match: unknown) => (
+                <Breadcrumb {...(match as object)} />
+              ),
+            },
+          }
+        },
+        children: [
+          {
+            path: "edit",
+            lazy: () =>
+              import("../../routes/api-key-management/api-key-management-edit"),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "secret-api-keys",
+    element: <Outlet />,
+    handle: { breadcrumb: () => t("apiKeyManagement.domain.secret") },
+    children: [
+      {
+        path: "",
+        element: <Outlet />,
+        children: [
+          {
+            path: "",
+            lazy: () =>
+              import("../../routes/api-key-management/api-key-management-list"),
+            children: [
+              {
+                path: "create",
+                lazy: () =>
+                  import(
+                    "../../routes/api-key-management/api-key-management-create"
+                  ),
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: ":id",
+        lazy: async () => {
+          const { Component, Breadcrumb, loader } = await import(
+            "../../routes/api-key-management/api-key-management-detail"
+          )
+          return {
+            Component,
+            loader,
+            handle: {
+              breadcrumb: (match: unknown) => (
+                <Breadcrumb {...(match as object)} />
+              ),
+            },
+          }
+        },
+        children: [
+          {
+            path: "edit",
+            lazy: () =>
+              import("../../routes/api-key-management/api-key-management-edit"),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "workflows",
+    errorElement: <ErrorBoundary />,
+    element: <Outlet />,
+    handle: { breadcrumb: () => t("workflowExecutions.domain") },
+    children: [
+      {
+        path: "",
+        lazy: () =>
+          import("../../routes/workflow-executions/workflow-execution-list"),
+      },
+      {
+        path: ":id",
+        lazy: async () => {
+          const { Component, Breadcrumb, loader } = await import(
+            "../../routes/workflow-executions/workflow-execution-detail"
+          )
+          return {
+            Component,
+            loader,
+            handle: {
+              breadcrumb: (match: unknown) => (
+                <Breadcrumb {...(match as object)} />
+              ),
+            },
+          }
+        },
+      },
+    ],
+  },
+  {
+    path: "translations",
+    errorElement: <ErrorBoundary />,
+    handle: { breadcrumb: () => t("translations.domain") },
+    children: [
+      {
+        path: "",
+        lazy: () => import("../../routes/translations/translation-list"),
+        children: [
+          {
+            path: "settings",
+            lazy: () => import("../../routes/translations/settings"),
+          },
+        ],
+      },
+      {
+        path: "edit",
+        lazy: () => import("../../routes/translations/translations-edit"),
+      },
+    ],
+  },
+]
+
 export function getRouteMap({
   settingsRoutes,
   coreRoutes,
@@ -55,6 +279,7 @@ export function getRouteMap({
               errorElement: <ErrorBoundary />,
               lazy: () => import("../../routes/settings"),
             },
+            ...defaultSettingsRouteChildren,
             ...settingsPluginChildren,
           ],
         },

package/src/routes/login/login.tsx

@@ -23,7 +23,7 @@ export const Login = () => {
   const navigate = useNavigate()
   const { getWidgets } = useExtension()
 
-  const from = location.state?.from?.pathname || "/orders"
+  const from = location.state?.from?.pathname || "/"
 
   const form = useForm<z.infer<typeof LoginSchema>>({
     resolver: zodResolver(LoginSchema),