@medusajs/dashboard 3.0.0-snapshot-20250410112222 → 3.0.0-snapshot-20251104011621

package/src/hooks/table/columns/use-column-state.ts

@@ -0,0 +1,209 @@
+import { useState, useCallback, useMemo, useEffect, useRef } from "react"
+import { HttpTypes } from "@medusajs/types"
+
+type ViewConfiguration =
+  HttpTypes.AdminViewConfigurationResponse["view_configuration"]
+
+interface ColumnState {
+  visibility: Record<string, boolean>
+  order: string[]
+}
+
+interface UseColumnStateReturn {
+  visibleColumns: Record<string, boolean>
+  columnOrder: string[]
+  columnState: ColumnState
+  currentColumns: {
+    visible: string[]
+    order: string[]
+  }
+  setVisibleColumns: (visibility: Record<string, boolean>) => void
+  setColumnOrder: (order: string[]) => void
+  handleColumnVisibilityChange: (visibility: Record<string, boolean>) => void
+  handleViewChange: (
+    view: ViewConfiguration | null,
+    apiColumns: HttpTypes.AdminColumn[]
+  ) => void
+  initializeColumns: (apiColumns: HttpTypes.AdminColumn[]) => void
+}
+
+export function useColumnState(
+  apiColumns: HttpTypes.AdminColumn[] | undefined,
+  activeView?: ViewConfiguration | null
+): UseColumnStateReturn {
+  // Initialize state lazily to avoid unnecessary re-renders
+  const [visibleColumns, setVisibleColumns] = useState<Record<string, boolean>>(
+    () => {
+      if (apiColumns?.length && activeView?.configuration) {
+        // If there's an active view, initialize with its configuration
+        const visibility: Record<string, boolean> = {}
+        apiColumns.forEach((column) => {
+          visibility[column.field] =
+            activeView.configuration.visible_columns?.includes(column.field) ||
+            false
+        })
+        return visibility
+      } else if (apiColumns?.length) {
+        return getInitialColumnVisibility(apiColumns)
+      }
+      return {}
+    }
+  )
+
+  const [columnOrder, setColumnOrder] = useState<string[]>(() => {
+    if (activeView?.configuration?.column_order) {
+      // If there's an active view, use its column order
+      return activeView.configuration.column_order
+    } else if (apiColumns?.length) {
+      return getInitialColumnOrder(apiColumns)
+    }
+    return []
+  })
+
+  const columnState = useMemo<ColumnState>(
+    () => ({
+      visibility: visibleColumns,
+      order: columnOrder,
+    }),
+    [visibleColumns, columnOrder]
+  )
+
+  const currentColumns = useMemo(() => {
+    const visible = Object.entries(visibleColumns)
+      .filter(([_, isVisible]) => isVisible)
+      .map(([field]) => field)
+
+    return {
+      visible,
+      order: columnOrder,
+    }
+  }, [visibleColumns, columnOrder])
+
+  const handleColumnVisibilityChange = useCallback(
+    (visibility: Record<string, boolean>) => {
+      setVisibleColumns(visibility)
+    },
+    []
+  )
+
+  const handleViewChange = useCallback(
+    (view: ViewConfiguration | null, apiColumns: HttpTypes.AdminColumn[]) => {
+      if (view?.configuration) {
+        // Apply view configuration
+        const newVisibility: Record<string, boolean> = {}
+        apiColumns.forEach((column) => {
+          newVisibility[column.field] =
+            view.configuration.visible_columns?.includes(column.field) || false
+        })
+        setVisibleColumns(newVisibility)
+        setColumnOrder(view.configuration.column_order || [])
+      } else {
+        // Reset to default visibility when no view is selected
+        setVisibleColumns(getInitialColumnVisibility(apiColumns))
+        setColumnOrder(getInitialColumnOrder(apiColumns))
+      }
+    },
+    []
+  )
+
+  const initializeColumns = useCallback(
+    (apiColumns: HttpTypes.AdminColumn[]) => {
+      // Only initialize if we don't already have column state
+      if (Object.keys(visibleColumns).length === 0) {
+        setVisibleColumns(getInitialColumnVisibility(apiColumns))
+      }
+      if (columnOrder.length === 0) {
+        setColumnOrder(getInitialColumnOrder(apiColumns))
+      }
+    },
+    []
+  )
+
+  // Track previous active view to detect changes
+  const prevActiveViewRef = useRef<ViewConfiguration | null | undefined>()
+
+  // Sync local state when active view changes
+  useEffect(() => {
+    if (apiColumns?.length) {
+      // Check if this is a different view or an update to the same view
+      const viewChanged = prevActiveViewRef.current?.id !== activeView?.id
+      const viewUpdated =
+        activeView &&
+        prevActiveViewRef.current?.id === activeView.id &&
+        prevActiveViewRef.current.updated_at !== activeView.updated_at
+
+      if (viewChanged || viewUpdated) {
+        if (activeView?.configuration) {
+          // Apply the active view's configuration
+          const newVisibility: Record<string, boolean> = {}
+          apiColumns.forEach((column) => {
+            newVisibility[column.field] =
+              activeView.configuration?.visible_columns?.includes(
+                column.field
+              ) || false
+          })
+          setVisibleColumns(newVisibility)
+          setColumnOrder(activeView.configuration?.column_order || [])
+        } else {
+          // No active view - reset to defaults
+          setVisibleColumns(getInitialColumnVisibility(apiColumns))
+          setColumnOrder(getInitialColumnOrder(apiColumns))
+        }
+      }
+    }
+
+    prevActiveViewRef.current = activeView
+  }, [activeView, apiColumns])
+
+  return {
+    visibleColumns,
+    columnOrder,
+    columnState,
+    currentColumns,
+    setVisibleColumns,
+    setColumnOrder,
+    handleColumnVisibilityChange,
+    handleViewChange,
+    initializeColumns,
+  }
+}
+
+// Utility functions
+
+const DEFAULT_COLUMN_ORDER = 500
+
+/**
+ * Gets the initial column visibility state from API columns
+ */
+function getInitialColumnVisibility(
+  apiColumns: HttpTypes.AdminColumn[]
+): Record<string, boolean> {
+  if (!apiColumns || apiColumns.length === 0) {
+    return {}
+  }
+
+  const visibility: Record<string, boolean> = {}
+
+  apiColumns.forEach((column) => {
+    visibility[column.field] = column.default_visible ?? true
+  })
+
+  return visibility
+}
+
+/**
+ * Gets the initial column order from API columns
+ */
+function getInitialColumnOrder(apiColumns: HttpTypes.AdminColumn[]): string[] {
+  if (!apiColumns || apiColumns.length === 0) {
+    return []
+  }
+
+  const sortedColumns = [...apiColumns].sort((a, b) => {
+    const orderA = a.default_order ?? DEFAULT_COLUMN_ORDER
+    const orderB = b.default_order ?? DEFAULT_COLUMN_ORDER
+    return orderA - orderB
+  })
+
+  return sortedColumns.map((col) => col.field)
+}

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

@@ -0,0 +1,109 @@
+import React, { useMemo } from "react"
+import { createDataTableColumnHelper } from "@medusajs/ui"
+import { HttpTypes } from "@medusajs/types"
+import { useTranslation } from "react-i18next"
+import { getCellRenderer, getColumnValue } from "../../../lib/table/cell-renderers"
+
+export interface ColumnAdapter<TData> {
+  getColumnAlignment?: (column: HttpTypes.AdminColumn) => "left" | "center" | "right"
+  getCustomAccessor?: (field: string, column: HttpTypes.AdminColumn) => any
+  transformCellValue?: (value: any, row: TData, column: HttpTypes.AdminColumn) => React.ReactNode
+}
+
+export function useConfigurableTableColumns<TData = any>(
+  entity: string,
+  apiColumns: HttpTypes.AdminColumn[] | undefined,
+  adapter?: ColumnAdapter<TData>
+) {
+  const columnHelper = createDataTableColumnHelper<TData>()
+  const { t } = useTranslation()
+
+  return useMemo(() => {
+    if (!apiColumns?.length) {
+      return []
+    }
+
+    return apiColumns.map(apiColumn => {
+      let renderType = apiColumn.computed?.type
+
+      if (!renderType) {
+        if (apiColumn.semantic_type === 'timestamp') {
+          renderType = 'timestamp'
+        } else if (apiColumn.field === 'display_id') {
+          renderType = 'display_id'
+        } else if (apiColumn.field === 'total') {
+          renderType = 'total'
+        } else if (apiColumn.semantic_type === 'currency') {
+          renderType = 'currency'
+        }
+      }
+
+      const renderer = getCellRenderer(
+        renderType,
+        apiColumn.data_type
+      )
+
+      const headerAlign = adapter?.getColumnAlignment
+        ? adapter.getColumnAlignment(apiColumn)
+        : getDefaultColumnAlignment(apiColumn)
+
+      const accessor = (row: TData) => getColumnValue(row, apiColumn)
+
+      return columnHelper.accessor(accessor, {
+        id: apiColumn.field,
+        header: () => apiColumn.name,
+        cell: ({ getValue, row }: { getValue: any, row: any }) => {
+          const value = getValue()
+
+          if (adapter?.transformCellValue) {
+            const transformed = adapter.transformCellValue(value, row.original, apiColumn)
+            if (transformed !== null) {
+              return transformed
+            }
+          }
+
+          return renderer(value, row.original, apiColumn, t)
+        },
+        meta: {
+          name: apiColumn.name,
+          column: apiColumn, // Store column metadata for future use
+        },
+        enableHiding: apiColumn.hideable,
+        enableSorting: false, // Disable sorting for all columns by default
+        headerAlign, // Pass the header alignment to the DataTable
+      } as any)
+    })
+  }, [entity, apiColumns, adapter, t])
+}
+
+function getDefaultColumnAlignment(column: HttpTypes.AdminColumn): "left" | "center" | "right" {
+  if (column.semantic_type === "currency" || column.data_type === "currency") {
+    return "right"
+  }
+
+  if (column.data_type === "number" && column.context !== "identifier") {
+    return "right"
+  }
+
+  if (
+    column.field.includes("total") ||
+    column.field.includes("amount") ||
+    column.field.includes("price") ||
+    column.field.includes("quantity") ||
+    column.field.includes("count")
+  ) {
+    return "right"
+  }
+
+  if (column.semantic_type === "status") {
+    return "center"
+  }
+
+  if (column.computed?.type === "country_code" ||
+    column.field === "country" ||
+    column.field.includes("country_code")) {
+    return "center"
+  }
+
+  return "left"
+}

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

@@ -0,0 +1,234 @@
+import { HttpTypes } from "@medusajs/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-refund-reason-table-columns.tsx

@@ -0,0 +1,39 @@
+import { HttpTypes } from "@medusajs/types"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { createDataTableColumnHelper } from "@medusajs/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-shipping-option-table-columns.tsx

@@ -0,0 +1,89 @@
+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"
+import { getFormattedShippingOptionLocationName } from "../../../lib/shipping-options"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminShippingOption>()
+
+export const useShippingOptionTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: () => t("fields.name"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("shipping_profile", {
+        header: () => t("fields.shippingProfile"),
+        cell: ({ row }) => (
+          <TextCell text={row.original.shipping_profile?.name || "N/A"} />
+        ),
+      }),
+      columnHelper.display({
+        id: "location",
+        header: () => t("fields.location"),
+        cell: ({ row }) => {
+          const locationName = getFormattedShippingOptionLocationName(
+            row.original
+          )
+
+          return <TextCell text={locationName} />
+        },
+      }),
+      columnHelper.display({
+        id: "service_zone",
+        header: () => t("fields.serviceZone"),
+        cell: ({ row }) => {
+          const serviceZoneName = row.original.service_zone?.name
+
+          return <TextCell text={serviceZoneName || "N/A"} />
+        },
+      }),
+      columnHelper.display({
+        id: "enabled_in_store",
+        header: () => t("fields.enabledInStore"),
+        cell: ({ row }) => {
+          let text = "N/A"
+          const val = row.original.rules?.find(
+            (r) => r.attribute === "enabled_in_store"
+          )
+
+          if (val) {
+            text = val.value === "true" ? "Yes" : "No"
+          }
+
+          return <TextCell text={text} />
+        },
+      }),
+      columnHelper.display({
+        id: "is_return",
+        header: () => t("fields.isReturn"),
+        cell: ({ row }) => {
+          let text = "N/A"
+          const val = row.original.rules?.find(
+            (r) => r.attribute === "is_return"
+          )
+
+          if (val) {
+            text = val.value === "true" ? "Yes" : "No"
+          }
+
+          return <TextCell text={text} />
+        },
+      }),
+      columnHelper.accessor("created_at", {
+        header: () => t("fields.createdAt"),
+
+        cell: ({ getValue }) => {
+          return <DateCell date={getValue()} />
+        },
+      }),
+    ],
+    [t]
+  )
+}