@acmekit/dashboard 2.13.1

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

@@ -0,0 +1,234 @@
+import { HttpTypes } from "@acmekit/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+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"
+import { TextCell, TextHeader } from "../../../components/table/table-cells/common/text-cell"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminOrder>()
+
+/**
+ * Hook to build columns dynamically based on API columns response
+ */
+export const useOrderDataTableColumns = (
+  apiColumns: HttpTypes.AdminOrderColumn[] | undefined,
+  visibleColumns: string[]
+) => {
+  const { t } = useTranslation()
+
+  return useMemo(() => {
+    if (!apiColumns || apiColumns.length === 0) {
+      // Return default columns if no API columns
+      return [
+        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: "country",
+          cell: ({ row }) => {
+            const country = row.original.shipping_address?.country
+            return <CountryCell country={country} />
+          },
+        }),
+      ]
+    }
+
+    // Build columns from API response
+    return apiColumns
+      .filter((col) => visibleColumns.includes(col.id))
+      .sort((a, b) => {
+        const aIndex = visibleColumns.indexOf(a.id)
+        const bIndex = visibleColumns.indexOf(b.id)
+        return aIndex - bIndex
+      })
+      .map((col) => {
+        // Handle special columns with custom cells
+        switch (col.id) {
+          case "display_id":
+            return columnHelper.accessor("display_id", {
+              header: () => <DisplayIdHeader />,
+              cell: ({ getValue }) => {
+                const id = getValue()
+                return <DisplayIdCell displayId={id!} />
+              },
+            })
+          
+          case "created_at":
+          case "updated_at":
+            return columnHelper.accessor(col.field as any, {
+              header: () => <DateHeader />,
+              cell: ({ getValue }) => {
+                const date = getValue() ? new Date(getValue() as string) : null
+                return date ? <DateCell date={date} /> : null
+              },
+            })
+          
+          case "email":
+            return columnHelper.accessor("email", {
+              header: () => <TextHeader text={col.name} />,
+              cell: ({ getValue }) => {
+                const email = getValue()
+                return <TextCell text={email || ""} />
+              },
+            })
+          
+          case "customer_display":
+            return columnHelper.accessor("customer", {
+              header: () => <CustomerHeader />,
+              cell: ({ getValue }) => {
+                const customer = getValue()
+                return <CustomerCell customer={customer} />
+              },
+            })
+          
+          case "sales_channel.name":
+            return columnHelper.accessor("sales_channel", {
+              header: () => <SalesChannelHeader />,
+              cell: ({ getValue }) => {
+                const channel = getValue()
+                return <SalesChannelCell channel={channel} />
+              },
+            })
+          
+          case "payment_status":
+            return columnHelper.accessor("payment_status", {
+              header: () => <PaymentStatusHeader />,
+              cell: ({ getValue }) => {
+                const status = getValue()
+                return <PaymentStatusCell status={status} />
+              },
+            })
+          
+          case "fulfillment_status":
+            return columnHelper.accessor("fulfillment_status", {
+              header: () => <FulfillmentStatusHeader />,
+              cell: ({ getValue }) => {
+                const status = getValue()
+                return <FulfillmentStatusCell status={status} />
+              },
+            })
+          
+          case "total":
+            return columnHelper.accessor("total", {
+              header: () => <TotalHeader />,
+              cell: ({ getValue, row }) => {
+                const total = getValue()
+                const currencyCode = row.original.currency_code
+                return <TotalCell currencyCode={currencyCode} total={total} />
+              },
+            })
+          
+          case "country":
+            return columnHelper.display({
+              id: "country",
+              cell: ({ row }) => {
+                const country = row.original.shipping_address?.country
+                return <CountryCell country={country} />
+              },
+            })
+          
+          default:
+            // Handle relationship fields (e.g., customer.email)
+            if (col.field.includes(".")) {
+              const [relation, field] = col.field.split(".")
+              return columnHelper.accessor((row: any) => {
+                const relationData = row[relation]
+                return relationData?.[field] || ""
+              }, {
+                id: col.id,
+                header: () => <TextHeader text={col.name} />,
+                cell: ({ getValue }) => {
+                  const value = getValue()
+                  return <TextCell text={value || ""} />
+                },
+              })
+            }
+            
+            // Default text column
+            return columnHelper.accessor(col.field as any, {
+              header: () => <TextHeader text={col.name} />,
+              cell: ({ getValue }) => {
+                const value = getValue()
+                return <TextCell text={value || ""} />
+              },
+            })
+        }
+      })
+  }, [apiColumns, visibleColumns, t])
+}

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

@@ -0,0 +1,162 @@
+import { HttpTypes } from "@acmekit/types"
+import {
+  ColumnDef,
+  ColumnDefBase,
+  createColumnHelper,
+} from "@tanstack/react-table"
+import { useMemo } from "react"
+import {
+  DateCell,
+  DateHeader,
+} from "../../../components/table/table-cells/common/date-cell"
+import { countries } from "../../../lib/data/countries"
+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<HttpTypes.AdminOrder>()
+
+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 isFullyRefunded = row.original.payment_status === "refunded"
+            const total = !isFullyRefunded
+              ? getValue()
+              : row.original.payment_collections?.reduce(
+                  (acc, payCol) => acc + (payCol.refunded_amount ?? 0),
+                  0
+                ) || 0
+            const currencyCode = row.original.currency_code
+
+            return (
+              <TotalCell
+                currencyCode={currencyCode}
+                total={total}
+                className={
+                  isFullyRefunded ? "text-ui-fg-muted line-through" : ""
+                }
+              />
+            )
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          const countryCode = row.original.shipping_address?.country_code
+          const country = countries.find((c) => c.iso_2 === countryCode)
+
+          return <CountryCell country={country} />
+        },
+      }),
+    ],
+    []
+  )
+
+  const isAccessorColumnDef = (
+    c: any
+  ): c is ColumnDef<HttpTypes.AdminOrder> & { accessorKey: string } => {
+    return c.accessorKey !== undefined
+  }
+
+  const isDisplayColumnDef = (
+    c: any
+  ): c is ColumnDef<HttpTypes.AdminOrder> & { id: string } => {
+    return c.id !== undefined
+  }
+
+  const shouldExclude = <TDef extends ColumnDefBase<HttpTypes.AdminOrder, 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<HttpTypes.AdminOrder>[]
+}

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 { HttpTypes } from "@acmekit/types"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminProduct>()
+
+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-product-tag-table-columns.tsx

@@ -0,0 +1,35 @@
+import { HttpTypes } from "@acmekit/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { DateCell } from "../../../components/table/table-cells/common/date-cell"
+import { TextCell } from "../../../components/table/table-cells/common/text-cell"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminProductTag>()
+
+export const useProductTagTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("value", {
+        header: () => t("fields.value"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("created_at", {
+        header: () => t("fields.createdAt"),
+
+        cell: ({ getValue }) => {
+          return <DateCell date={getValue()} />
+        },
+      }),
+      columnHelper.accessor("updated_at", {
+        header: () => t("fields.updatedAt"),
+        cell: ({ getValue }) => {
+          return <DateCell date={getValue()} />
+        },
+      }),
+    ],
+    [t]
+  )
+}

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

@@ -0,0 +1,36 @@
+import { HttpTypes } from "@acmekit/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+import { DateCell } from "../../../components/table/table-cells/common/date-cell"
+import { TextCell } from "../../../components/table/table-cells/common/text-cell"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminProductType>()
+
+export const useProductTypeTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("value", {
+        header: () => t("fields.value"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("created_at", {
+        header: () => t("fields.createdAt"),
+
+        cell: ({ getValue }) => {
+          return <DateCell date={getValue()} />
+        },
+      }),
+      columnHelper.accessor("updated_at", {
+        header: () => t("fields.updatedAt"),
+        cell: ({ getValue }) => {
+          return <DateCell date={getValue()} />
+        },
+      }),
+    ],
+    [t]
+  )
+}

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

@@ -0,0 +1,49 @@
+import { HttpTypes } from "@acmekit/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+import {
+  CodeCell,
+  CodeHeader,
+} from "../../../components/table/table-cells/common/code-cell"
+import {
+  TextCell,
+  TextHeader,
+} from "../../../components/table/table-cells/common/text-cell"
+import { StatusCell } from "../../../components/table/table-cells/promotion/status-cell"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminPromotion>()
+
+export const usePromotionTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "code",
+        header: () => <CodeHeader text={t("fields.code")} />,
+        cell: ({ row }) => <CodeCell code={row.original.code!} />,
+      }),
+
+      columnHelper.display({
+        id: "method",
+        header: () => <TextHeader text={t("promotions.fields.method")} />,
+        cell: ({ row }) => {
+          const text = row.original.is_automatic
+            ? t("promotions.form.method.automatic.title")
+            : t("promotions.form.method.code.title")
+
+          return <TextCell text={text} />
+        },
+      }),
+
+      columnHelper.display({
+        id: "status",
+        header: () => <TextHeader text={t("fields.status")} />,
+        cell: ({ row }) => <StatusCell promotion={row.original} />,
+      }),
+    ],
+    [t]
+  )
+}

package/src/hooks/table/columns/use-refund-reason-table-columns.tsx

@@ -0,0 +1,39 @@
+import { HttpTypes } from "@acmekit/types"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { createDataTableColumnHelper } from "@acmekit/ui"
+import { DescriptionCell } from "../../../components/table/table-cells/sales-channel/description-cell"
+
+const columnHelper = createDataTableColumnHelper<HttpTypes.AdminRefundReason>()
+
+export const useRefundReasonTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("label", {
+        header: () => t("fields.label"),
+        enableSorting: true,
+        sortLabel: t("fields.label"),
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc"),
+      }),
+      columnHelper.accessor("code", {
+        header: () => t("fields.code"),
+        enableSorting: true,
+        sortLabel: t("fields.code"),
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc"),
+      }),
+      columnHelper.accessor("description", {
+        header: () => t("fields.description"),
+        cell: ({ getValue }) => <DescriptionCell description={getValue()} />,
+        enableSorting: true,
+        sortLabel: t("fields.description"),
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc"),
+      }),
+    ],
+    [t]
+  )
+}

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 {
+  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"
+import { HttpTypes } from "@acmekit/types"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminRegion>()
+
+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-return-reason-table-columns.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@acmekit/types"
+import { Badge } from "@acmekit/ui"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminReturnReason>()
+
+export const useReturnReasonTableColumns = () => {
+  return useMemo(
+    () => [
+      columnHelper.accessor("value", {
+        cell: ({ getValue }) => <Badge size="2xsmall">{getValue()}</Badge>,
+      }),
+      columnHelper.accessor("label", {
+        cell: ({ row }) => {
+          const { label, description } = row.original
+          return (
+            <div className=" py-4">
+              <div className="flex h-full w-full flex-col justify-center">
+                <span className="truncate font-medium">{label}</span>
+                <span className="truncate">
+                  {description ? description : "-"}
+                </span>
+              </div>
+            </div>
+          )
+        },
+      }),
+    ],
+    []
+  )
+}