feat(dashboard,medusa,ui): Manual gift cards + cleanup (#6380)

**Dashboard**
- Adds different views for managing manual/custom gift cards (not associated with a product gift card).
- Cleans up several table implementations to use new DataTable component.
- Minor cleanup of translation file.

**Medusa**
- Adds missing query params for list endpoints in the following admin domains: /customers, /customer-groups, /collections, and /gift-cards.

**UI**
- Adds new sizes for Badge component.

**Note for review**
Since this PR contains updates to the translation keys, it touches a lot of files. For the review the parts that are relevant are: the /gift-cards domain of admin, the table overview of collections, customers, and customer groups. And the changes to the list endpoints in the core.

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

@@ -13,10 +13,10 @@ import { NoResults } from "../../../common/empty-table-content"
 type BulkCommand = {
   label: string
   shortcut: string
-  action: (selection: Record<string, boolean>) => void
+  action: (selection: Record<string, boolean>) => Promise<void>
 }
 
-export interface DataTableRootProps<TData, TValue> {
+export interface DataTableRootProps<TData> {
   /**
    * The table instance to render
    */
@@ -24,7 +24,7 @@ export interface DataTableRootProps<TData, TValue> {
   /**
    * The columns to render
    */
-  columns: ColumnDef<TData, TValue>[]
+  columns: ColumnDef<TData, any>[]
   /**
    * Function to generate a link to navigate to when clicking on a row
    */
@@ -61,7 +61,7 @@ export interface DataTableRootProps<TData, TValue> {
 /**
  * Table component for rendering a table with pagination, filtering and ordering.
  */
-export const DataTableRoot = <TData, TValue>({
+export const DataTableRoot = <TData,>({
   table,
   columns,
   pagination,
@@ -69,7 +69,7 @@ export const DataTableRoot = <TData, TValue>({
   commands,
   count = 0,
   noResults = false,
-}: DataTableRootProps<TData, TValue>) => {
+}: DataTableRootProps<TData>) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [showStickyBorder, setShowStickyBorder] = useState(false)
@@ -94,6 +94,12 @@ export const DataTableRoot = <TData, TValue>({
     }
   }
 
+  const handleAction = async (action: BulkCommand["action"]) => {
+    await action(rowSelection).then(() => {
+      table.resetRowSelection()
+    })
+  }
+
   return (
     <div className="w-full">
       <div onScroll={handleHorizontalScroll} className="w-full overflow-x-auto">
@@ -159,6 +165,7 @@ export const DataTableRoot = <TData, TValue>({
                 return (
                   <Table.Row
                     key={row.id}
+                    data-selected={row.getIsSelected()}
                     className={clx(
                       "transition-fg group/row [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
                       "[&:has(td_a:focus-visible)_td]:bg-ui-bg-base-pressed",
@@ -188,7 +195,7 @@ export const DataTableRoot = <TData, TValue>({
                         <Table.Cell
                           key={cell.id}
                           className={clx("has-[a]:cursor-pointer", {
-                            "bg-ui-bg-base group-[:has(td_a:focus)]/row:bg-ui-bg-base-pressed group-hover/row:bg-ui-bg-base-hover transition-fg sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
+                            "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-[:has(td_a:focus)]/row:bg-ui-bg-base-pressed group-hover/row:bg-ui-bg-base-hover transition-fg sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyCell,
                             "after:bg-ui-border-base":
                               showStickyBorder && isStickyCell,
@@ -239,7 +246,7 @@ export const DataTableRoot = <TData, TValue>({
                   <CommandBar.Command
                     label={command.label}
                     shortcut={command.shortcut}
-                    action={() => command.action(rowSelection)}
+                    action={() => handleAction(command.action)}
                   />
                   {index < commands.length - 1 && <CommandBar.Seperator />}
                 </Fragment>

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

@@ -4,8 +4,8 @@ import { DataTableQuery, DataTableQueryProps } from "./data-table-query"
 import { DataTableRoot, DataTableRootProps } from "./data-table-root"
 import { DataTableSkeleton } from "./data-table-skeleton"
 
-interface DataTableProps<TData, TValue>
-  extends DataTableRootProps<TData, TValue>,
+interface DataTableProps<TData>
+  extends DataTableRootProps<TData>,
     DataTableQueryProps {
   isLoading?: boolean
   rowCount: number
@@ -15,7 +15,7 @@ interface DataTableProps<TData, TValue>
 const MemoizedDataTableRoot = memo(DataTableRoot) as typeof DataTableRoot
 const MemoizedDataTableQuery = memo(DataTableQuery)
 
-export const DataTable = <TData, TValue>({
+export const DataTable = <TData,>({
   table,
   columns,
   pagination,
@@ -29,7 +29,7 @@ export const DataTable = <TData, TValue>({
   queryObject = {},
   rowCount,
   isLoading = false,
-}: DataTableProps<TData, TValue>) => {
+}: DataTableProps<TData>) => {
   if (isLoading) {
     return (
       <DataTableSkeleton