@medusajs/dashboard 0.0.1

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

@@ -0,0 +1,55 @@
+import { QueryKey, UseQueryOptions, useQuery } from "@tanstack/react-query"
+import { client } from "../../lib/client"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+import {
+  WorkflowExecutionListRes,
+  WorkflowExecutionRes,
+} from "../../types/api-responses"
+
+const WORKFLOW_EXECUTIONS_QUERY_KEY = "workflow_executions" as const
+const workflowExecutionsQueryKeys = queryKeysFactory(
+  WORKFLOW_EXECUTIONS_QUERY_KEY
+)
+
+export const useWorkflowExecutions = (
+  query?: Record<string, any>,
+  options?: Omit<
+    UseQueryOptions<
+      WorkflowExecutionListRes,
+      Error,
+      WorkflowExecutionListRes,
+      QueryKey
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => client.workflowExecutions.list(query),
+    queryKey: workflowExecutionsQueryKeys.list(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useWorkflowExecution = (
+  id: string,
+  query?: Record<string, any>,
+  options?: Omit<
+    UseQueryOptions<
+      WorkflowExecutionRes,
+      Error,
+      WorkflowExecutionRes,
+      QueryKey
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => client.workflowExecutions.retrieve(id, query),
+    queryKey: workflowExecutionsQueryKeys.detail(id),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}

package/src/hooks/table/columns/use-campaign-table-columns.tsx

@@ -0,0 +1,73 @@
+import { createColumnHelper } from "@tanstack/react-table"
+
+import { CampaignResponse } from "@medusajs/types"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { DateCell } from "../../../components/table/table-cells/common/date-cell"
+import {
+  TextCell,
+  TextHeader,
+} from "../../../components/table/table-cells/common/text-cell"
+import {
+  DescriptionCell,
+  DescriptionHeader,
+} from "../../../components/table/table-cells/sales-channel/description-cell"
+import {
+  NameCell,
+  NameHeader,
+} from "../../../components/table/table-cells/sales-channel/name-cell"
+
+const columnHelper = createColumnHelper<CampaignResponse>()
+
+export const useCampaignTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: () => <NameHeader />,
+        cell: ({ getValue }) => <NameCell name={getValue()} />,
+      }),
+      columnHelper.accessor("description", {
+        header: () => <DescriptionHeader />,
+        cell: ({ getValue }) => <DescriptionCell description={getValue()} />,
+      }),
+      columnHelper.accessor("campaign_identifier", {
+        header: () => <TextHeader text={t("campaigns.fields.identifier")} />,
+        cell: ({ getValue }) => {
+          const value = getValue()
+          return <TextCell text={value} />
+        },
+      }),
+      columnHelper.accessor("starts_at", {
+        header: () => <TextHeader text={t("campaigns.fields.start_date")} />,
+        cell: ({ getValue }) => {
+          const value = getValue()
+
+          if (!value) {
+            return
+          }
+
+          const date = new Date(value)
+
+          return <DateCell date={date} />
+        },
+      }),
+      columnHelper.accessor("ends_at", {
+        header: () => <TextHeader text={t("campaigns.fields.end_date")} />,
+        cell: ({ getValue }) => {
+          const value = getValue()
+
+          if (!value) {
+            return
+          }
+
+          const date = new Date(value)
+
+          return <DateCell date={date} />
+        },
+      }),
+    ],
+    [t]
+  )
+}

package/src/hooks/table/columns/use-category-table-columns.tsx

@@ -0,0 +1,114 @@
+import { TriangleRightMini } from "@medusajs/icons"
+import { AdminProductCategoryResponse } from "@medusajs/types"
+import { IconButton, Text, clx } from "@medusajs/ui"
+import { 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 {
+  TextCell,
+  TextHeader,
+} from "../../../components/table/table-cells/common/text-cell"
+import {
+  getCategoryPath,
+  getIsActiveProps,
+  getIsInternalProps,
+} from "../../../v2-routes/categories/common/utils"
+
+const columnHelper =
+  createColumnHelper<AdminProductCategoryResponse["product_category"]>()
+
+export const useCategoryTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: () => <TextHeader text={t("fields.name")} />,
+        cell: ({ getValue, row }) => {
+          const expandHandler = row.getToggleExpandedHandler()
+
+          if (row.original.parent_category !== undefined) {
+            const path = getCategoryPath(row.original)
+
+            return (
+              <div className="flex size-full items-center gap-1 overflow-hidden">
+                {path.map((chip, index) => (
+                  <div
+                    key={chip.id}
+                    className={clx("overflow-hidden", {
+                      "text-ui-fg-muted flex items-center gap-x-1":
+                        index !== path.length - 1,
+                    })}
+                  >
+                    <Text size="small" leading="compact" className="truncate">
+                      {chip.name}
+                    </Text>
+                    {index !== path.length - 1 && (
+                      <Text size="small" leading="compact">
+                        /
+                      </Text>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )
+          }
+
+          return (
+            <div className="flex size-full items-center gap-x-3 overflow-hidden">
+              <div className="flex size-7 items-center justify-center">
+                {row.getCanExpand() ? (
+                  <IconButton
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      e.preventDefault()
+
+                      expandHandler()
+                    }}
+                    size="small"
+                    variant="transparent"
+                    className="text-ui-fg-subtle"
+                  >
+                    <TriangleRightMini
+                      className={clx({
+                        "rotate-90 transition-transform will-change-transform":
+                          row.getIsExpanded(),
+                      })}
+                    />
+                  </IconButton>
+                ) : null}
+              </div>
+              <span className="truncate">{getValue()}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("handle", {
+        header: () => <TextHeader text={t("fields.handle")} />,
+        cell: ({ getValue }) => {
+          return <TextCell text={`/${getValue()}`} />
+        },
+      }),
+      columnHelper.accessor("is_active", {
+        header: () => <TextHeader text={t("fields.status")} />,
+        cell: ({ getValue }) => {
+          const { color, label } = getIsActiveProps(getValue(), t)
+
+          return <StatusCell color={color}>{label}</StatusCell>
+        },
+      }),
+      columnHelper.accessor("is_internal", {
+        header: () => <TextHeader text={t("categories.fields.visibility")} />,
+        cell: ({ getValue }) => {
+          const { color, label } = getIsInternalProps(getValue(), t)
+
+          return <StatusCell color={color}>{label}</StatusCell>
+        },
+      }),
+    ],
+    [t]
+  )
+}

package/src/hooks/table/columns/use-customer-group-table-columns.tsx

@@ -0,0 +1,34 @@
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+
+import { AdminCustomerGroupResponse } from "@medusajs/types"
+import { useTranslation } from "react-i18next"
+import {
+  TextCell,
+  TextHeader,
+} from "../../../components/table/table-cells/common/text-cell"
+
+const columnHelper =
+  createColumnHelper<AdminCustomerGroupResponse["customer_group"]>()
+
+export const useCustomerGroupTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: () => <TextHeader text={t("fields.name")} />,
+        cell: ({ getValue }) => <TextCell text={getValue() || "-"} />,
+      }),
+      columnHelper.accessor("customers", {
+        header: () => <TextHeader text={t("customers.domain")} />,
+        cell: ({ getValue }) => {
+          const count = getValue()?.length ?? 0
+
+          return <TextCell text={count} />
+        },
+      }),
+    ],
+    [t]
+  )
+}

package/src/hooks/table/columns/use-customer-table-columns.tsx

@@ -0,0 +1,51 @@
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+
+import { AdminCustomerResponse } from "@medusajs/types"
+import {
+  EmailCell,
+  EmailHeader,
+} from "../../../components/table/table-cells/common/email-cell"
+import {
+  NameCell,
+  NameHeader,
+} from "../../../components/table/table-cells/common/name-cell"
+import {
+  AccountCell,
+  AccountHeader,
+} from "../../../components/table/table-cells/customer/account-cell/account-cell"
+import {
+  FirstSeenCell,
+  FirstSeenHeader,
+} from "../../../components/table/table-cells/customer/first-seen-cell"
+
+const columnHelper = createColumnHelper<AdminCustomerResponse["customer"]>()
+
+export const useCustomerTableColumns = () => {
+  return useMemo(
+    () => [
+      columnHelper.accessor("email", {
+        header: () => <EmailHeader />,
+        cell: ({ getValue }) => <EmailCell email={getValue()} />,
+      }),
+      columnHelper.display({
+        id: "name",
+        header: () => <NameHeader />,
+        cell: ({
+          row: {
+            original: { first_name, last_name },
+          },
+        }) => <NameCell firstName={first_name} lastName={last_name} />,
+      }),
+      columnHelper.accessor("has_account", {
+        header: () => <AccountHeader />,
+        cell: ({ getValue }) => <AccountCell hasAccount={getValue()} />,
+      }),
+      columnHelper.accessor("created_at", {
+        header: () => <FirstSeenHeader />,
+        cell: ({ getValue }) => <FirstSeenCell createdAt={getValue()} />,
+      }),
+    ],
+    []
+  )
+}

package/src/hooks/table/columns/use-discount-table-columns.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from "react"
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+
+import type { Discount } from "@medusajs/medusa"
+
+import {
+  CodeCell,
+  CodeHeader,
+} from "../../../components/table/table-cells/discount/code-cell"
+import {
+  DescriptionHeader,
+  DescriptionCell,
+} from "../../../components/table/table-cells/discount/description-cell"
+import {
+  ValueCell,
+  ValueHeader,
+} from "../../../components/table/table-cells/discount/value-cell"
+import {
+  RedemptionCell,
+  RedemptionHeader,
+} from "../../../components/table/table-cells/discount/redemption-cell"
+import {
+  StatusHeader,
+  StatusCell,
+} from "../../../components/table/table-cells/discount/status-cell"
+
+const columnHelper = createColumnHelper<Discount>()
+
+export const useDiscountTableColumns = () => {
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "discount",
+        header: () => <CodeHeader />,
+        cell: ({ row }) => <CodeCell discount={row.original} />,
+      }),
+      columnHelper.accessor("rule.description", {
+        header: () => <DescriptionHeader />,
+        cell: ({ row }) => <DescriptionCell discount={row.original} />,
+      }),
+
+      columnHelper.accessor("rule.value", {
+        header: () => <ValueHeader />,
+        cell: ({ row }) => (
+          <ValueCell
+            rule={row.original.rule}
+            currencyCode={row.original.regions[0]?.currency_code}
+          />
+        ),
+      }),
+      columnHelper.display({
+        id: "status",
+        header: () => <StatusHeader />,
+        cell: ({ row }) => <StatusCell discount={row.original} />,
+      }),
+      columnHelper.accessor("usage_count", {
+        header: () => <RedemptionHeader />,
+        cell: ({ row }) => (
+          <RedemptionCell redemptions={row.original.usage_count} />
+        ),
+      }),
+    ],
+    []
+  ) as ColumnDef<Discount>[]
+}

package/src/hooks/table/columns/use-order-table-columns.tsx

@@ -0,0 +1,142 @@
+import { Order } from "@medusajs/medusa"
+import {
+  ColumnDef,
+  ColumnDefBase,
+  createColumnHelper,
+} from "@tanstack/react-table"
+import { useMemo } from "react"
+import {
+  DateCell,
+  DateHeader,
+} from "../../../components/table/table-cells/common/date-cell"
+import { CountryCell } from "../../../components/table/table-cells/order/country-cell"
+import {
+  CustomerCell,
+  CustomerHeader,
+} from "../../../components/table/table-cells/order/customer-cell"
+import {
+  DisplayIdCell,
+  DisplayIdHeader,
+} from "../../../components/table/table-cells/order/display-id-cell"
+import {
+  FulfillmentStatusCell,
+  FulfillmentStatusHeader,
+} from "../../../components/table/table-cells/order/fulfillment-status-cell"
+import {
+  PaymentStatusCell,
+  PaymentStatusHeader,
+} from "../../../components/table/table-cells/order/payment-status-cell"
+import {
+  SalesChannelCell,
+  SalesChannelHeader,
+} from "../../../components/table/table-cells/order/sales-channel-cell"
+import {
+  TotalCell,
+  TotalHeader,
+} from "../../../components/table/table-cells/order/total-cell"
+
+// We have to use any here, as the type of Order is so complex that it lags the TS server
+const columnHelper = createColumnHelper<Order>()
+
+type UseOrderTableColumnsProps = {
+  exclude?: string[]
+}
+
+export const useOrderTableColumns = (props: UseOrderTableColumnsProps) => {
+  const { exclude = [] } = props ?? {}
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("display_id", {
+        header: () => <DisplayIdHeader />,
+        cell: ({ getValue }) => {
+          const id = getValue()
+
+          return <DisplayIdCell displayId={id} />
+        },
+      }),
+      columnHelper.accessor("created_at", {
+        header: () => <DateHeader />,
+        cell: ({ getValue }) => {
+          const date = new Date(getValue())
+
+          return <DateCell date={date} />
+        },
+      }),
+      columnHelper.accessor("customer", {
+        header: () => <CustomerHeader />,
+        cell: ({ getValue }) => {
+          const customer = getValue()
+
+          return <CustomerCell customer={customer} />
+        },
+      }),
+      columnHelper.accessor("sales_channel", {
+        header: () => <SalesChannelHeader />,
+        cell: ({ getValue }) => {
+          const channel = getValue()
+
+          return <SalesChannelCell channel={channel} />
+        },
+      }),
+      columnHelper.accessor("payment_status", {
+        header: () => <PaymentStatusHeader />,
+        cell: ({ getValue }) => {
+          const status = getValue()
+
+          return <PaymentStatusCell status={status} />
+        },
+      }),
+      columnHelper.accessor("fulfillment_status", {
+        header: () => <FulfillmentStatusHeader />,
+        cell: ({ getValue }) => {
+          const status = getValue()
+
+          return <FulfillmentStatusCell status={status} />
+        },
+      }),
+      columnHelper.accessor("total", {
+        header: () => <TotalHeader />,
+        cell: ({ getValue, row }) => {
+          const total = getValue()
+          const currencyCode = row.original.currency_code
+
+          return <TotalCell currencyCode={currencyCode} total={total} />
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          const country = row.original.shipping_address?.country
+
+          return <CountryCell country={country} />
+        },
+      }),
+    ],
+    []
+  )
+
+  const isAccessorColumnDef = (
+    c: any
+  ): c is ColumnDef<Order> & { accessorKey: string } => {
+    return c.accessorKey !== undefined
+  }
+
+  const isDisplayColumnDef = (
+    c: any
+  ): c is ColumnDef<Order> & { id: string } => {
+    return c.id !== undefined
+  }
+
+  const shouldExclude = <TDef extends ColumnDefBase<Order, any>>(c: TDef) => {
+    if (isAccessorColumnDef(c)) {
+      return exclude.includes(c.accessorKey)
+    } else if (isDisplayColumnDef(c)) {
+      return exclude.includes(c.id)
+    }
+
+    return false
+  }
+
+  return columns.filter((c) => !shouldExclude(c)) as ColumnDef<Order>[]
+}

package/src/hooks/table/columns/use-product-table-columns.tsx

@@ -0,0 +1,59 @@
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+
+import {
+  CollectionCell,
+  CollectionHeader,
+} from "../../../components/table/table-cells/product/collection-cell/collection-cell"
+import {
+  ProductCell,
+  ProductHeader,
+} from "../../../components/table/table-cells/product/product-cell"
+import {
+  ProductStatusCell,
+  ProductStatusHeader,
+} from "../../../components/table/table-cells/product/product-status-cell"
+import {
+  SalesChannelHeader,
+  SalesChannelsCell,
+} from "../../../components/table/table-cells/product/sales-channels-cell"
+import {
+  VariantCell,
+  VariantHeader,
+} from "../../../components/table/table-cells/product/variant-cell"
+import { ExtendedProductDTO } from "../../../types/api-responses"
+
+const columnHelper = createColumnHelper<ExtendedProductDTO>()
+
+export const useProductTableColumns = () => {
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "product",
+        header: () => <ProductHeader />,
+        cell: ({ row }) => <ProductCell product={row.original} />,
+      }),
+      columnHelper.accessor("collection", {
+        header: () => <CollectionHeader />,
+        cell: ({ row }) => (
+          <CollectionCell collection={row.original.collection} />
+        ),
+      }),
+      columnHelper.accessor("sales_channels", {
+        header: () => <SalesChannelHeader />,
+        cell: ({ row }) => (
+          <SalesChannelsCell salesChannels={row.original.sales_channels} />
+        ),
+      }),
+      columnHelper.accessor("variants", {
+        header: () => <VariantHeader />,
+        cell: ({ row }) => <VariantCell variants={row.original.variants} />,
+      }),
+      columnHelper.accessor("status", {
+        header: () => <ProductStatusHeader />,
+        cell: ({ row }) => <ProductStatusCell status={row.original.status} />,
+      }),
+    ],
+    []
+  )
+}

package/src/hooks/table/columns/use-region-table-columns.tsx

@@ -0,0 +1,40 @@
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { RegionDTO } from "@medusajs/types"
+
+import {
+  CountriesCell,
+  CountriesHeader,
+} from "../../../components/table/table-cells/region/countries-cell"
+import {
+  PaymentProvidersCell,
+  PaymentProvidersHeader,
+} from "../../../components/table/table-cells/region/payment-providers-cell"
+import {
+  RegionCell,
+  RegionHeader,
+} from "../../../components/table/table-cells/region/region-cell"
+
+const columnHelper = createColumnHelper<RegionDTO>()
+
+export const useRegionTableColumns = () => {
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: () => <RegionHeader />,
+        cell: ({ getValue }) => <RegionCell name={getValue()} />,
+      }),
+      columnHelper.accessor("countries", {
+        header: () => <CountriesHeader />,
+        cell: ({ getValue }) => <CountriesCell countries={getValue()} />,
+      }),
+      columnHelper.accessor("payment_providers", {
+        header: () => <PaymentProvidersHeader />,
+        cell: ({ getValue }) => (
+          <PaymentProvidersCell paymentProviders={getValue()} />
+        ),
+      }),
+    ],
+    []
+  )
+}

package/src/hooks/table/columns/use-sales-channel-table-columns.tsx

@@ -0,0 +1,46 @@
+import { createColumnHelper } from "@tanstack/react-table"
+
+import { SalesChannelDTO } from "@medusajs/types"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { StatusCell } from "../../../components/table/table-cells/common/status-cell"
+import { TextHeader } from "../../../components/table/table-cells/common/text-cell"
+import {
+  DescriptionCell,
+  DescriptionHeader,
+} from "../../../components/table/table-cells/sales-channel/description-cell"
+import {
+  NameCell,
+  NameHeader,
+} from "../../../components/table/table-cells/sales-channel/name-cell"
+
+const columnHelper = createColumnHelper<SalesChannelDTO>()
+
+export const useSalesChannelTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: () => <NameHeader />,
+        cell: ({ getValue }) => <NameCell name={getValue()} />,
+      }),
+      columnHelper.accessor("description", {
+        header: () => <DescriptionHeader />,
+        cell: ({ getValue }) => <DescriptionCell description={getValue()} />,
+      }),
+      columnHelper.accessor("is_disabled", {
+        header: () => <TextHeader text={t("fields.status")} />,
+        cell: ({ getValue }) => {
+          const value = getValue()
+          return (
+            <StatusCell color={value ? "grey" : "green"}>
+              {value ? t("general.disabled") : t("general.enabled")}
+            </StatusCell>
+          )
+        },
+      }),
+    ],
+    [t]
+  )
+}