feat(admin-sdk,admin-bundler,admin-shared,medusa): Restructure admin packages (#8988)

**What**
- Renames /admin-next -> /admin
- Renames @medusajs/admin-sdk -> @medusajs/admin-bundler
- Creates a new package called @medusajs/admin-sdk that will hold all tooling relevant to creating admin extensions. This is currently `defineRouteConfig` and `defineWidgetConfig`, but will eventually also export methods for adding custom fields, register translation, etc. 
  - cc: @shahednasser we should update the examples in the docs so these functions are imported from `@medusajs/admin-sdk`. People will also need to install the package in their project, as it's no longer a transient dependency.
  - cc: @olivermrbl we might want to publish a changelog when this is merged, as it is a breaking change, and will require people to import the `defineXConfig` from the new package instead of `@medusajs/admin-shared`.
- Updates CODEOWNERS so /admin packages does not require a review from the UI team.

packages/admin/dashboard/src/hooks/table/columns-v2/use-promotion-table-columns.tsx

@@ -0,0 +1,49 @@
+import { PromotionDTO } from "@medusajs/types"
+import { ColumnDef, 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<PromotionDTO>()
+
+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.campaign")} />,
+        cell: ({ row }) => {
+          const text = row.original.is_automatic
+            ? "Automatic"
+            : "Promotion Code"
+
+          return <TextCell text={text} />
+        },
+      }),
+
+      columnHelper.display({
+        id: "status",
+        header: () => <TextHeader text={t("fields.status")} />,
+        cell: ({ row }) => <StatusCell promotion={row.original} />,
+      }),
+    ],
+    []
+  ) as ColumnDef<PromotionDTO>[]
+}

packages/admin/dashboard/src/hooks/table/columns/index.ts

@@ -0,0 +1,13 @@
+export * from "./use-campaign-table-columns"
+export * from "./use-collection-table-columns"
+export * from "./use-customer-group-table-columns"
+export * from "./use-customer-table-columns"
+export * from "./use-order-table-columns"
+export * from "./use-product-table-columns"
+export * from "./use-product-tag-table-columns"
+export * from "./use-product-type-table-columns"
+export * from "./use-region-table-columns"
+export * from "./use-return-reason-table-columns"
+export * from "./use-sales-channel-table-columns"
+export * from "./use-tax-rates-table-columns"
+

packages/admin/dashboard/src/hooks/table/columns/use-campaign-table-columns.tsx

@@ -0,0 +1,73 @@
+import { createColumnHelper } from "@tanstack/react-table"
+
+import { AdminCampaign } 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<AdminCampaign>()
+
+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]
+  )
+}

packages/admin/dashboard/src/hooks/table/columns/use-collection-table-columns.tsx

@@ -0,0 +1,33 @@
+import { HttpTypes } from "@medusajs/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { TextCell } from "../../../components/table/table-cells/common/text-cell"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminCollection>()
+
+export const useCollectionTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("title", {
+        header: t("fields.title"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("handle", {
+        header: t("fields.handle"),
+        cell: ({ getValue }) => <TextCell text={`/${getValue()}`} />,
+      }),
+      columnHelper.accessor("products", {
+        header: t("fields.products"),
+        cell: ({ getValue }) => {
+          const count = getValue()?.length || undefined
+
+          return <TextCell text={count} />
+        },
+      }),
+    ],
+    [t]
+  )
+}

packages/admin/dashboard/src/hooks/table/columns/use-customer-group-table-columns.tsx

@@ -0,0 +1,33 @@
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+
+import { useTranslation } from "react-i18next"
+import {
+  TextCell,
+  TextHeader,
+} from "../../../components/table/table-cells/common/text-cell"
+import { HttpTypes } from "@medusajs/types"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminCustomerGroup>()
+
+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]
+  )
+}

packages/admin/dashboard/src/hooks/table/columns/use-customer-table-columns.tsx

@@ -0,0 +1,51 @@
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+
+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"
+import { HttpTypes } from "@medusajs/types"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminCustomer>()
+
+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()} />,
+      }),
+    ],
+    []
+  )
+}

packages/admin/dashboard/src/hooks/table/columns/use-fulfillment-provider-table-columns.tsx

@@ -0,0 +1,25 @@
+import { HttpTypes } from "@medusajs/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import {
+  TextCell,
+  TextHeader,
+} from "../../../components/table/table-cells/common/text-cell"
+import { formatProvider } from "../../../lib/format-provider"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminFulfillmentProvider>()
+
+export const useFulfillmentProviderTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("id", {
+        header: () => <TextHeader text={"Provider"} />,
+        cell: ({ getValue }) => <TextCell text={formatProvider(getValue())} />,
+      }),
+    ],
+    [t]
+  )
+}

packages/admin/dashboard/src/hooks/table/columns/use-order-table-columns.tsx

@@ -0,0 +1,146 @@
+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"
+import { HttpTypes } from "@medusajs/types"
+
+// 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 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<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>[]
+}

packages/admin/dashboard/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 "@medusajs/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} />,
+      }),
+    ],
+    []
+  )
+}

packages/admin/dashboard/src/hooks/table/columns/use-product-tag-table-columns.tsx

@@ -0,0 +1,35 @@
+import { HttpTypes } from "@medusajs/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]
+  )
+}

packages/admin/dashboard/src/hooks/table/columns/use-product-type-table-columns.tsx

@@ -0,0 +1,36 @@
+import { HttpTypes } from "@medusajs/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]
+  )
+}

packages/admin/dashboard/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 "@medusajs/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()} />
+        ),
+      }),
+    ],
+    []
+  )
+}

packages/admin/dashboard/src/hooks/table/columns/use-return-reason-table-columns.tsx

@@ -0,0 +1,30 @@
+import { HttpTypes } from "@medusajs/types"
+import { Badge } from "@medusajs/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="flex h-full w-full flex-col justify-center py-4">
+              <span className="truncate font-medium">{label}</span>
+              <span className="truncate">
+                {description ? description : "-"}
+              </span>
+            </div>
+          )
+        },
+      }),
+    ],
+    []
+  )
+}

packages/admin/dashboard/src/hooks/table/columns/use-sales-channel-table-columns.tsx

@@ -0,0 +1,47 @@
+import { createColumnHelper } from "@tanstack/react-table"
+
+import { HttpTypes } 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<HttpTypes.AdminSalesChannel>()
+
+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]
+  )
+}

packages/admin/dashboard/src/hooks/table/columns/use-tax-rates-table-columns.tsx

@@ -0,0 +1,55 @@
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+import { TaxRateResponse } from "@medusajs/types"
+import {
+  TextCell,
+  TextHeader,
+} from "../../../components/table/table-cells/common/text-cell"
+
+import {
+  TypeCell,
+  TypeHeader,
+} from "../../../components/table/table-cells/taxes/type-cell"
+
+const columnHelper = createColumnHelper<TaxRateResponse>()
+
+export const useTaxRateTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "name",
+        header: () => <TextHeader text={t("fields.name")} />,
+        cell: ({ row }) => <TextCell text={row.original.name} />,
+      }),
+      columnHelper.display({
+        id: "province",
+        header: () => <TextHeader text={t("fields.province")} />,
+        cell: ({ row }) => (
+          <TextCell text={row.original.tax_region.province_code} />
+        ),
+      }),
+      columnHelper.display({
+        id: "rate",
+        header: () => <TextHeader text={t("fields.rate")} />,
+        cell: ({ row }) => <TextCell text={`${row.original.rate} %`} />,
+      }),
+      columnHelper.display({
+        id: "is_combinable",
+        header: () => <TypeHeader text={t("fields.type")} />,
+        cell: ({ row }) => (
+          <TypeCell is_combinable={row.original.is_combinable} />
+        ),
+      }),
+      columnHelper.display({
+        id: "code",
+        header: () => <TextHeader text={t("fields.code")} />,
+        cell: ({ row }) => <TextCell text={row.original.code || "-"} />,
+      }),
+    ],
+    []
+  )
+}

packages/admin/dashboard/src/hooks/table/filters-v2/use-promotion-table-filters.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const usePromotionTableFilters = () => {
+  const { t } = useTranslation()
+
+  let filters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at", type: "date" },
+    { label: t("fields.updatedAt"), key: "updated_at", type: "date" },
+  ]
+
+  return filters
+}

packages/admin/dashboard/src/hooks/table/filters/index.ts

@@ -0,0 +1,13 @@
+export * from "./use-collection-table-filters"
+export * from "./use-customer-group-table-filters"
+export * from "./use-customer-table-filters"
+export * from "./use-date-table-filters"
+export * from "./use-order-table-filters"
+export * from "./use-product-table-filters"
+export * from "./use-product-tag-table-filters"
+export * from "./use-product-type-table-filters"
+export * from "./use-promotion-table-filters"
+export * from "./use-region-table-filters"
+export * from "./use-sales-channel-table-filters"
+export * from "./use-shipping-option-table-filters"
+export * from "./use-tax-rate-table-filters"

packages/admin/dashboard/src/hooks/table/filters/use-collection-table-filters.tsx

@@ -0,0 +1,7 @@
+import { useDateTableFilters } from "./use-date-table-filters"
+
+export const useCollectionTableFilters = () => {
+  const dateFilters = useDateTableFilters()
+
+  return dateFilters
+}

packages/admin/dashboard/src/hooks/table/filters/use-customer-group-table-filters.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const useCustomerGroupTableFilters = () => {
+  const { t } = useTranslation()
+
+  let filters: Filter[] = []
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  filters = [...filters, ...dateFilters]
+
+  return filters
+}

packages/admin/dashboard/src/hooks/table/filters/use-customer-table-filters.tsx

@@ -0,0 +1,68 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+import { useCustomerGroups } from "../../api/customer-groups"
+
+const excludeableFields = ["groups"] as const
+
+export const useCustomerTableFilters = (
+  exclude?: (typeof excludeableFields)[number][]
+) => {
+  const { t } = useTranslation()
+
+  const isGroupsExcluded = exclude?.includes("groups")
+
+  const { customer_groups } = useCustomerGroups(
+    {
+      limit: 1000,
+    },
+    {
+      enabled: !isGroupsExcluded,
+    }
+  )
+
+  let filters: Filter[] = []
+
+  if (customer_groups && !isGroupsExcluded) {
+    const customerGroupFilter: Filter = {
+      key: "groups",
+      label: t("customers.groups.label"),
+      type: "select",
+      multiple: true,
+      options: customer_groups.map((s) => ({
+        label: s.name,
+        value: s.id,
+      })),
+    }
+
+    filters = [...filters, customerGroupFilter]
+  }
+
+  const hasAccountFilter: Filter = {
+    key: "has_account",
+    label: t("fields.account"),
+    type: "select",
+    options: [
+      {
+        label: t("customers.registered"),
+        value: "true",
+      },
+      {
+        label: t("customers.guest"),
+        value: "false",
+      },
+    ],
+  }
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  filters = [...filters, hasAccountFilter, ...dateFilters]
+
+  return filters
+}

packages/admin/dashboard/src/hooks/table/filters/use-date-table-filters.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const useDateTableFilters = () => {
+  const { t } = useTranslation()
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  return dateFilters
+}

packages/admin/dashboard/src/hooks/table/filters/use-order-table-filters.tsx

@@ -0,0 +1,154 @@
+import { useTranslation } from "react-i18next"
+
+import type { Filter } from "../../../components/table/data-table"
+import { useRegions } from "../../api/regions"
+import { useSalesChannels } from "../../api/sales-channels"
+
+export const useOrderTableFilters = (): Filter[] => {
+  const { t } = useTranslation()
+
+  const { regions } = useRegions({
+    limit: 1000,
+    fields: "id,name",
+  })
+
+  const { sales_channels } = useSalesChannels({
+    limit: 1000,
+    fields: "id,name",
+  })
+
+  let filters: Filter[] = []
+
+  if (regions) {
+    const regionFilter: Filter = {
+      key: "region_id",
+      label: t("fields.region"),
+      type: "select",
+      options: regions.map((r) => ({
+        label: r.name,
+        value: r.id,
+      })),
+      multiple: true,
+      searchable: true,
+    }
+
+    filters = [...filters, regionFilter]
+  }
+
+  if (sales_channels) {
+    const salesChannelFilter: Filter = {
+      key: "sales_channel_id",
+      label: t("fields.salesChannel"),
+      type: "select",
+      multiple: true,
+      searchable: true,
+      options: sales_channels.map((s) => ({
+        label: s.name,
+        value: s.id,
+      })),
+    }
+
+    filters = [...filters, salesChannelFilter]
+  }
+
+  const paymentStatusFilter: Filter = {
+    key: "payment_status",
+    label: t("orders.payment.statusLabel"),
+    type: "select",
+    multiple: true,
+    options: [
+      {
+        label: t("orders.payment.status.notPaid"),
+        value: "not_paid",
+      },
+      {
+        label: t("orders.payment.status.awaiting"),
+        value: "awaiting",
+      },
+      {
+        label: t("orders.payment.status.captured"),
+        value: "captured",
+      },
+      {
+        label: t("orders.payment.status.refunded"),
+        value: "refunded",
+      },
+      {
+        label: t("orders.payment.status.partiallyRefunded"),
+        value: "partially_refunded",
+      },
+      {
+        label: t("orders.payment.status.canceled"),
+        value: "canceled",
+      },
+      {
+        label: t("orders.payment.status.requiresAction"),
+        value: "requires_action",
+      },
+    ],
+  }
+
+  const fulfillmentStatusFilter: Filter = {
+    key: "fulfillment_status",
+    label: t("orders.fulfillment.statusLabel"),
+    type: "select",
+    multiple: true,
+    options: [
+      {
+        label: t("orders.fulfillment.status.notFulfilled"),
+        value: "not_fulfilled",
+      },
+      {
+        label: t("orders.fulfillment.status.fulfilled"),
+        value: "fulfilled",
+      },
+      {
+        label: t("orders.fulfillment.status.partiallyFulfilled"),
+        value: "partially_fulfilled",
+      },
+      {
+        label: t("orders.fulfillment.status.returned"),
+        value: "returned",
+      },
+      {
+        label: t("orders.fulfillment.status.partiallyReturned"),
+        value: "partially_returned",
+      },
+      {
+        label: t("orders.fulfillment.status.shipped"),
+        value: "shipped",
+      },
+      {
+        label: t("orders.fulfillment.status.partiallyShipped"),
+        value: "partially_shipped",
+      },
+      {
+        label: t("orders.fulfillment.status.canceled"),
+        value: "canceled",
+      },
+      {
+        label: t("orders.fulfillment.status.requiresAction"),
+        value: "requires_action",
+      },
+    ],
+  }
+
+  const dateFilters: Filter[] = [
+    { label: "Created At", key: "created_at" },
+    { label: "Updated At", key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  filters = [
+    ...filters,
+    // TODO: enable when Payment, Fulfillments <> Orders are linked
+    // paymentStatusFilter,
+    // fulfillmentStatusFilter,
+    ...dateFilters,
+  ]
+
+  return filters
+}

packages/admin/dashboard/src/hooks/table/filters/use-product-table-filters.tsx

@@ -0,0 +1,209 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+import { useProductTags } from "../../api"
+import { useProductTypes } from "../../api/product-types"
+import { useSalesChannels } from "../../api/sales-channels"
+
+const excludeableFields = [
+  "sales_channel_id",
+  "collections",
+  "categories",
+  "product_types",
+  "product_tags",
+] as const
+
+export const useProductTableFilters = (
+  exclude?: (typeof excludeableFields)[number][]
+) => {
+  const { t } = useTranslation()
+
+  const isProductTypeExcluded = exclude?.includes("product_types")
+
+  const { product_types } = useProductTypes(
+    {
+      limit: 1000,
+      offset: 0,
+    },
+    {
+      enabled: !isProductTypeExcluded,
+    }
+  )
+
+  const isProductTagExcluded = exclude?.includes("product_tags")
+
+  const { product_tags } = useProductTags({
+    limit: 1000,
+    offset: 0,
+  })
+
+  // const { product_tags } = useAdminProductTags({
+  //   limit: 1000,
+  //   offset: 0,
+  // })
+
+  const isSalesChannelExcluded = exclude?.includes("sales_channel_id")
+
+  const { sales_channels } = useSalesChannels(
+    {
+      limit: 1000,
+      fields: "id,name",
+    },
+    {
+      enabled: !isSalesChannelExcluded,
+    }
+  )
+
+  const isCategoryExcluded = exclude?.includes("categories")
+
+  // const { product_categories } = useAdminProductCategories({
+  //   limit: 1000,
+  //   offset: 0,
+  //   fields: "id,name",
+  //   expand: "",
+  // }, {
+  //  enabled: !isCategoryExcluded,
+  // })
+
+  const isCollectionExcluded = exclude?.includes("collections")
+
+  // const { collections } = useAdminCollections(
+  //   {
+  //     limit: 1000,
+  //     offset: 0,
+  //   },
+  //   {
+  //     enabled: !isCollectionExcluded,
+  //   }
+  // )
+
+  let filters: Filter[] = []
+
+  if (product_types && !isProductTypeExcluded) {
+    const typeFilter: Filter = {
+      key: "type_id",
+      label: t("fields.type"),
+      type: "select",
+      multiple: true,
+      options: product_types.map((t) => ({
+        label: t.value,
+        value: t.id,
+      })),
+    }
+
+    filters = [...filters, typeFilter]
+  }
+
+  if (product_tags && !isProductTagExcluded) {
+    const tagFilter: Filter = {
+      key: "tag_id",
+      label: t("fields.tag"),
+      type: "select",
+      multiple: true,
+      options: product_tags.map((t) => ({
+        label: t.value,
+        value: t.id,
+      })),
+    }
+
+    filters = [...filters, tagFilter]
+  }
+
+  if (sales_channels) {
+    const salesChannelFilter: Filter = {
+      key: "sales_channel_id",
+      label: t("fields.salesChannel"),
+      type: "select",
+      multiple: true,
+      options: sales_channels.map((s) => ({
+        label: s.name,
+        value: s.id,
+      })),
+    }
+
+    filters = [...filters, salesChannelFilter]
+  }
+
+  // if (product_categories) {
+  //   const categoryFilter: Filter = {
+  //     key: "category_id",
+  //     label: t("fields.category"),
+  //     type: "select",
+  //     multiple: true,
+  //     options: product_categories.map((c) => ({
+  //       label: c.name,
+  //       value: c.id,
+  //     })),
+  //   }
+
+  //   filters = [...filters, categoryFilter]
+  // }
+
+  // if (collections) {
+  //   const collectionFilter: Filter = {
+  //     key: "collection_id",
+  //     label: t("fields.collection"),
+  //     type: "select",
+  //     multiple: true,
+  //     options: collections.map((c) => ({
+  //       label: c.title,
+  //       value: c.id,
+  //     })),
+  //   }
+
+  //   filters = [...filters, collectionFilter]
+  // }
+
+  // const giftCardFilter: Filter = {
+  //   key: "is_giftcard",
+  //   label: t("fields.giftCard"),
+  //   type: "select",
+  //   options: [
+  //     {
+  //       label: t("fields.true"),
+  //       value: "true",
+  //     },
+  //     {
+  //       label: t("fields.false"),
+  //       value: "false",
+  //     },
+  //   ],
+  // }
+
+  const statusFilter: Filter = {
+    key: "status",
+    label: t("fields.status"),
+    type: "select",
+    multiple: true,
+    options: [
+      {
+        label: t("products.productStatus.draft"),
+        value: "draft",
+      },
+      {
+        label: t("products.productStatus.proposed"),
+        value: "proposed",
+      },
+      {
+        label: t("products.productStatus.published"),
+        value: "published",
+      },
+      {
+        label: t("products.productStatus.rejected"),
+        value: "rejected",
+      },
+    ],
+  }
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  filters = [...filters, statusFilter, ...dateFilters]
+
+  return filters
+}

packages/admin/dashboard/src/hooks/table/filters/use-product-tag-table-filters.tsx

@@ -0,0 +1,7 @@
+import { useDateTableFilters } from "./use-date-table-filters"
+
+export const useProductTagTableFilters = () => {
+  const dateFilters = useDateTableFilters()
+
+  return dateFilters
+}

packages/admin/dashboard/src/hooks/table/filters/use-product-type-table-filters.tsx

@@ -0,0 +1,7 @@
+import { useDateTableFilters } from "./use-date-table-filters"
+
+export const useProductTypeTableFilters = () => {
+  const dateFilters = useDateTableFilters()
+
+  return dateFilters
+}

packages/admin/dashboard/src/hooks/table/filters/use-promotion-table-filters.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const usePromotionTableFilters = () => {
+  const { t } = useTranslation()
+
+  let filters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at", type: "date" },
+    { label: t("fields.updatedAt"), key: "updated_at", type: "date" },
+  ]
+
+  return filters
+}

packages/admin/dashboard/src/hooks/table/filters/use-region-table-filters.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const useRegionTableFilters = () => {
+  const { t } = useTranslation()
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  const filters = [...dateFilters]
+
+  return filters
+}

packages/admin/dashboard/src/hooks/table/filters/use-sales-channel-table-filters.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const useSalesChannelTableFilters = () => {
+  const { t } = useTranslation()
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  return dateFilters
+}

packages/admin/dashboard/src/hooks/table/filters/use-shipping-option-table-filters.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const useShippingOptionTableFilters = () => {
+  const { t } = useTranslation()
+
+  const isReturnFilter: Filter = {
+    key: "is_return",
+    label: t("fields.type"),
+    type: "select",
+    options: [
+      { label: t("regions.return"), value: "true" },
+      { label: t("regions.outbound"), value: "false" },
+    ],
+  }
+
+  const isAdminFilter: Filter = {
+    key: "admin_only",
+    label: t("fields.availability"),
+    type: "select",
+    options: [
+      { label: t("general.admin"), value: "true" },
+      { label: t("general.store"), value: "false" },
+    ],
+  }
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  const filters = [isReturnFilter, isAdminFilter, ...dateFilters]
+
+  return filters
+}

packages/admin/dashboard/src/hooks/table/filters/use-tax-rate-table-filters.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const useTaxRateTableFilters = () => {
+  const { t } = useTranslation()
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  const filters = [...dateFilters]
+
+  return filters
+}

packages/admin/dashboard/src/hooks/table/query-v2/use-promotion-table-query.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UsePromotionTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const usePromotionTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UsePromotionTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, created_at, updated_at } = queryObject
+
+  const searchParams: HttpTypes.AdminGetPromotionsParams = {
+    limit: pageSize,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    offset: offset ? Number(offset) : 0,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/index.ts

@@ -0,0 +1,15 @@
+export * from "./use-campaign-table-query"
+export * from "./use-collection-table-query"
+export * from "./use-customer-group-table-query"
+export * from "./use-customer-table-query"
+export * from "./use-order-table-query"
+export * from "./use-product-table-query"
+export * from "./use-product-tag-table-query"
+export * from "./use-product-type-table-query"
+export * from "./use-region-table-query"
+export * from "./use-return-reason-table-query"
+export * from "./use-sales-channel-table-query"
+export * from "./use-shipping-option-table-query"
+export * from "./use-tax-rate-table-query"
+export * from "./use-tax-region-table-query"
+export * from "./use-user-invite-table-query"

packages/admin/dashboard/src/hooks/table/query/use-campaign-table-query.tsx

@@ -0,0 +1,31 @@
+import { useQueryParams } from "../../use-query-params"
+
+type UseCampaignTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useCampaignTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseCampaignTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-collection-table-query.tsx

@@ -0,0 +1,33 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseCollectionTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useCollectionTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseCollectionTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, created_at, updated_at, q, order } = queryObject
+
+  const searchParams: HttpTypes.AdminCollectionListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-customer-group-table-query.tsx

@@ -0,0 +1,33 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseCustomerGroupTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useCustomerGroupTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseCustomerGroupTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "has_account", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, created_at, updated_at, q, order } = queryObject
+
+  const searchParams: HttpTypes.AdminGetCustomerGroupsParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-customer-table-query.tsx

@@ -0,0 +1,44 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseCustomerTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useCustomerTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseCustomerTableQueryProps) => {
+  const queryObject = useQueryParams(
+    [
+      "offset",
+      "q",
+      "has_account",
+      "groups",
+      "order",
+      "created_at",
+      "updated_at",
+    ],
+    prefix
+  )
+
+  const { offset, groups, created_at, updated_at, has_account, q, order } =
+    queryObject
+
+  const searchParams: HttpTypes.AdminCustomerFilters = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    groups: groups?.split(","),
+    has_account: has_account ? has_account === "true" : undefined,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-fulfillment-providers-table-query.tsx

@@ -0,0 +1,31 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseFulfillmentProviderTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useFulfillmentProvidersTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseFulfillmentProviderTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "stock_location_id"],
+    prefix
+  )
+
+  const { offset, q, stock_location_id } = queryObject
+
+  const searchParams: HttpTypes.AdminFulfillmentProviderListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    stock_location_id,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-order-table-query.tsx

@@ -0,0 +1,57 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseOrderTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useOrderTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseOrderTableQueryProps) => {
+  const queryObject = useQueryParams(
+    [
+      "offset",
+      "q",
+      "created_at",
+      "updated_at",
+      "region_id",
+      "sales_channel_id",
+      "payment_status",
+      "fulfillment_status",
+      "order",
+    ],
+    prefix
+  )
+
+  const {
+    offset,
+    sales_channel_id,
+    created_at,
+    updated_at,
+    fulfillment_status,
+    payment_status,
+    region_id,
+    q,
+    order,
+  } = queryObject
+
+  const searchParams: HttpTypes.AdminOrderFilters = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    sales_channel_id: sales_channel_id?.split(","),
+    fulfillment_status: fulfillment_status?.split(","),
+    payment_status: payment_status?.split(","),
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    region_id: region_id?.split(","),
+    order: order ? order : "-display_id",
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-product-table-query.tsx

@@ -0,0 +1,67 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseProductTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useProductTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseProductTableQueryProps) => {
+  const queryObject = useQueryParams(
+    [
+      "offset",
+      "order",
+      "q",
+      "created_at",
+      "updated_at",
+      "sales_channel_id",
+      "category_id",
+      "collection_id",
+      "is_giftcard",
+      "tag_id",
+      "type_id",
+      "status",
+      "id",
+    ],
+    prefix
+  )
+
+  const {
+    offset,
+    sales_channel_id,
+    created_at,
+    updated_at,
+    category_id,
+    collection_id,
+    tag_id,
+    type_id,
+    is_giftcard,
+    status,
+    order,
+    q,
+  } = queryObject
+
+  const searchParams: HttpTypes.AdminProductListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    sales_channel_id: sales_channel_id?.split(","),
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    category_id: category_id?.split(","),
+    collection_id: collection_id?.split(","),
+    is_giftcard: is_giftcard ? is_giftcard === "true" : undefined,
+    order: order,
+    tag_id: tag_id ? tag_id.split(",") : undefined,
+    type_id: type_id?.split(","),
+    status: status?.split(",") as HttpTypes.AdminProductStatus[],
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-product-tag-table-query.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseProductTagTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useProductTagTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseProductTagTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+  const searchParams: HttpTypes.AdminProductTagListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-product-type-table-query.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseProductTypeTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useProductTypeTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseProductTypeTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+  const searchParams: HttpTypes.AdminProductTypeListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-region-table-query.tsx

@@ -0,0 +1,33 @@
+import { FindParams, HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseRegionTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useRegionTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseRegionTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+
+  const searchParams: FindParams & HttpTypes.AdminRegionFilters = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-return-reason-table-query.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseReturnReasonTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useReturnReasonTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseReturnReasonTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+  const searchParams: HttpTypes.AdminReturnReasonListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-sales-channel-table-query.tsx

@@ -0,0 +1,38 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseSalesChannelTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useSalesChannelTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseSalesChannelTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at", "is_disabled"],
+    prefix
+  )
+
+  const { offset, created_at, updated_at, is_disabled, ...rest } = queryObject
+
+  const searchParams: HttpTypes.AdminSalesChannelListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    is_disabled:
+      is_disabled === "true"
+        ? true
+        : is_disabled === "false"
+        ? false
+        : undefined,
+    ...rest,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-shipping-option-table-query.tsx

@@ -0,0 +1,49 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseShippingOptionTableQueryProps = {
+  regionId: string
+  isReturn?: boolean
+  pageSize?: number
+  prefix?: string
+}
+
+export const useShippingOptionTableQuery = ({
+  regionId,
+  pageSize = 10,
+  prefix,
+}: UseShippingOptionTableQueryProps) => {
+  const queryObject = useQueryParams(
+    [
+      "offset",
+      "q",
+      "order",
+      "admin_only",
+      "is_return",
+      "created_at",
+      "updated_at",
+    ],
+    prefix
+  )
+
+  const { offset, order, q, admin_only, is_return, created_at, updated_at } =
+    queryObject
+
+  const searchParams: HttpTypes.AdminShippingOptionListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    // TODO: We don't allow region_id in the API yet
+    // region_id: regionId,
+    is_return: is_return ? is_return === "true" : undefined,
+    admin_only: admin_only ? admin_only === "true" : undefined,
+    q,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-tax-rate-table-query.tsx

@@ -0,0 +1,33 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseTaxRateTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useTaxRateTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseTaxRateTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+
+  const searchParams: HttpTypes.AdminTaxRateListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-tax-region-table-query.tsx

@@ -0,0 +1,32 @@
+import { useQueryParams } from "../../use-query-params"
+
+type UseTaxRegionTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useTaxRegionTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseTaxRegionTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

packages/admin/dashboard/src/hooks/table/query/use-user-invite-table-query.tsx

@@ -0,0 +1,32 @@
+import { useQueryParams } from "../../use-query-params"
+
+type UseUserInviteTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useUserInviteTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseUserInviteTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, created_at, updated_at, q, order } = queryObject
+
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}