feat(dashboard,types): Translate all OrderBy filters (#9691)

Resolves CC-616

**Note**
- I have added some missing fields to a couple of types, to resolve TS errors in the dashboard.
- For the ApiKey types I have left the created_at, updated_at, etc. as type Date, as changing them to string, caused @medusajs/medusa to fail building. We need to clean up the types at a later time.

packages/admin/dashboard/src/components/table/data-table/data-table-order-by/data-table-order-by.tsx

@@ -4,8 +4,13 @@ import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"
 
+export type DataTableOrderByKey<TData> = {
+  key: keyof TData
+  label: string
+}
+
 type DataTableOrderByProps<TData> = {
-  keys: (keyof TData)[]
+  keys: DataTableOrderByKey<TData>[]
   prefix?: string
 }
 
@@ -38,18 +43,6 @@ const initState = (params: URLSearchParams, prefix?: string): SortState => {
   }
 }
 
-const formatKey = (key: string) => {
-  const words = key.split("_")
-  const formattedWords = words.map((word, index) => {
-    if (index === 0) {
-      return word.charAt(0).toUpperCase() + word.slice(1)
-    } else {
-      return word
-    }
-  })
-  return formattedWords.join(" ")
-}
-
 export const DataTableOrderBy = <TData,>({
   keys,
   prefix,
@@ -116,7 +109,7 @@ export const DataTableOrderBy = <TData,>({
           onValueChange={handleKeyChange}
         >
           {keys.map((key) => {
-            const stringKey = String(key)
+            const stringKey = String(key.key)
 
             return (
               <DropdownMenu.RadioItem
@@ -124,7 +117,7 @@ export const DataTableOrderBy = <TData,>({
                 value={stringKey}
                 onSelect={(event) => event.preventDefault()}
               >
-                {formatKey(stringKey)}
+                {key.label}
               </DropdownMenu.RadioItem>
             )
           })}

packages/admin/dashboard/src/components/table/data-table/data-table-query/data-table-query.tsx

@@ -1,21 +1,21 @@
 import { Filter } from ".."
 import { DataTableFilter } from "../data-table-filter"
-import { DataTableOrderBy } from "../data-table-order-by"
+import { DataTableOrderBy, DataTableOrderByKey } from "../data-table-order-by"
 import { DataTableSearch } from "../data-table-search"
 
-export interface DataTableQueryProps {
+export interface DataTableQueryProps<TData> {
   search?: boolean | "autofocus"
-  orderBy?: (string | number)[]
+  orderBy?: DataTableOrderByKey<TData>[]
   filters?: Filter[]
   prefix?: string
 }
 
-export const DataTableQuery = ({
+export const DataTableQuery = <TData,>({
   search,
   orderBy,
   filters,
   prefix,
-}: DataTableQueryProps) => {
+}: DataTableQueryProps<TData>) => {
   return (
     (search || orderBy || filters || prefix) && (
       <div className="flex items-start justify-between gap-x-4 px-6 py-4">

packages/admin/dashboard/src/components/table/data-table/data-table.tsx

@@ -7,7 +7,7 @@ import { DataTableRoot, DataTableRootProps } from "./data-table-root"
 
 interface DataTableProps<TData>
   extends Omit<DataTableRootProps<TData>, "noResults">,
-    DataTableQueryProps {
+    DataTableQueryProps<TData> {
   isLoading?: boolean
   pageSize: number
   queryObject?: Record<string, any>
@@ -16,7 +16,7 @@ interface DataTableProps<TData>
 
 // Maybe we should use the memoized version of DataTableRoot
 // const MemoizedDataTableRoot = memo(DataTableRoot) as typeof DataTableRoot
-const MemoizedDataTableQuery = memo(DataTableQuery)
+const MemoizedDataTableQuery = memo(DataTableQuery) as typeof DataTableQuery
 
 export const DataTable = <TData,>({
   table,

packages/admin/dashboard/src/components/table/table-cells/promotion/status-cell/status-cell.tsx

@@ -1,4 +1,4 @@
-import { PromotionDTO } from "@medusajs/types"
+import { HttpTypes } from "@medusajs/types"
 import { useTranslation } from "react-i18next"
 import {
   getPromotionStatus,
@@ -7,7 +7,7 @@ import {
 import { StatusCell as StatusCell_ } from "../../common/status-cell"
 
 type PromotionCellProps = {
-  promotion: PromotionDTO
+  promotion: HttpTypes.AdminPromotion
 }
 type StatusColors = "grey" | "orange" | "green" | "red"
 type StatusMap = Record<string, [StatusColors, string]>