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

package/src/components/search/use-search-results.tsx

@@ -129,7 +129,7 @@ const useDynamicSearchResults = (
     {
       q: debouncedSearch,
       limit,
-      fields: "id,title,sku",
+      fields: "id,title,sku,product_id",
     },
     {
       enabled: isAreaEnabled(currentArea, "productVariant"),

package/src/components/table/configurable-data-table/configurable-data-table.tsx

@@ -0,0 +1,240 @@
+import { useState, ReactNode } from "react"
+import { Container, Button } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { DataTable } from "../../data-table"
+import { SaveViewDialog } from "../save-view-dialog"
+import { SaveViewDropdown } from "./save-view-dropdown"
+import { useTableConfiguration } from "../../../hooks/table/use-table-configuration"
+import { useConfigurableTableColumns } from "../../../hooks/table/columns/use-configurable-table-columns"
+import { getEntityAdapter } from "../../../lib/table/entity-adapters"
+import { TableAdapter } from "../../../lib/table/table-adapters"
+
+type DataTableActionProps = {
+  label: string
+  disabled?: boolean
+} & (
+    | {
+      to: string
+    }
+    | {
+      onClick: () => void
+    }
+  )
+
+
+export interface ConfigurableDataTableProps<TData> {
+  adapter: TableAdapter<TData>
+  heading?: string
+  subHeading?: string
+  pageSize?: number
+  queryPrefix?: string
+  layout?: "fill" | "auto"
+  actions?: DataTableActionProps[]
+}
+
+export function ConfigurableDataTable<TData>({
+  adapter,
+  heading,
+  subHeading,
+  pageSize: pageSizeProp,
+  queryPrefix: queryPrefixProp,
+  layout = "fill",
+  actions,
+}: ConfigurableDataTableProps<TData>) {
+  const { t } = useTranslation()
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false)
+  const [editingView, setEditingView] = useState<any>(null)
+
+  const entity = adapter.entity
+  const entityName = adapter.entityName
+  const filters = adapter.filters || []
+  const pageSize = pageSizeProp || adapter.pageSize || 20
+  const queryPrefix = queryPrefixProp || adapter.queryPrefix || ""
+
+  const {
+    activeView,
+    createView,
+    updateView,
+    isViewConfigEnabled,
+    visibleColumns,
+    columnOrder,
+    currentColumns,
+    setColumnOrder,
+    handleColumnVisibilityChange,
+    currentConfiguration,
+    hasConfigurationChanged,
+    handleClearConfiguration,
+    isLoadingColumns,
+    apiColumns,
+    requiredFields,
+    queryParams,
+  } = useTableConfiguration({
+    entity,
+    pageSize,
+    queryPrefix,
+    filters,
+  })
+
+  const parsedQueryParams = { ...queryParams }
+  filters.forEach(filter => {
+    const filterKey = filter.id
+    if (parsedQueryParams[filterKey] !== undefined) {
+      try {
+        parsedQueryParams[filterKey] = JSON.parse(parsedQueryParams[filterKey])
+      } catch {
+        // If parsing fails, keep the original value
+      }
+    }
+  })
+
+  const searchParams = {
+    ...parsedQueryParams,
+    fields: requiredFields,
+    limit: pageSize,
+    offset: parsedQueryParams.offset ? Number(parsedQueryParams.offset) : 0,
+  }
+
+  const fetchResult = adapter.useData(requiredFields, searchParams)
+
+  const columnAdapter = adapter.columnAdapter || getEntityAdapter(entity)
+  const generatedColumns = useConfigurableTableColumns(entity, apiColumns || [], columnAdapter)
+  const columns = (adapter.getColumns && apiColumns)
+    ? adapter.getColumns(apiColumns)
+    : generatedColumns
+
+  if (fetchResult.isError) {
+    throw fetchResult.error
+  }
+
+  const handleSaveAsDefault = async () => {
+    try {
+      if (activeView?.is_system_default) {
+        await updateView.mutateAsync({
+          name: activeView.name || null,
+          configuration: {
+            visible_columns: currentColumns.visible,
+            column_order: currentColumns.order,
+            filters: currentConfiguration.filters || {},
+            sorting: currentConfiguration.sorting || null,
+            search: currentConfiguration.search || "",
+          }
+        })
+      } else {
+        await createView.mutateAsync({
+          name: "Default",
+          is_system_default: true,
+          set_active: true,
+          configuration: {
+            visible_columns: currentColumns.visible,
+            column_order: currentColumns.order,
+            filters: currentConfiguration.filters || {},
+            sorting: currentConfiguration.sorting || null,
+            search: currentConfiguration.search || "",
+          }
+        })
+      }
+    } catch (_) {
+      // Error is handled by the hook
+    }
+  }
+
+  const handleUpdateExisting = async () => {
+    if (!activeView) return
+
+    try {
+      await updateView.mutateAsync({
+        name: activeView.name,
+        configuration: {
+          visible_columns: currentColumns.visible,
+          column_order: currentColumns.order,
+          filters: currentConfiguration.filters || {},
+          sorting: currentConfiguration.sorting || null,
+          search: currentConfiguration.search || "",
+        }
+      })
+    } catch (_) {
+      // Error is handled by the hook
+    }
+  }
+
+  const handleSaveAsNew = () => {
+    setSaveDialogOpen(true)
+    setEditingView(null)
+  }
+
+  // Filter bar content with save controls
+  const filterBarContent = hasConfigurationChanged ? (
+    <>
+      <Button
+        variant="secondary"
+        size="small"
+        type="button"
+        onClick={handleClearConfiguration}
+      >
+        {t("actions.clear")}
+      </Button>
+      <SaveViewDropdown
+        isDefaultView={activeView?.is_system_default || !activeView}
+        currentViewId={activeView?.id}
+        currentViewName={activeView?.name}
+        onSaveAsDefault={handleSaveAsDefault}
+        onUpdateExisting={handleUpdateExisting}
+        onSaveAsNew={handleSaveAsNew}
+      />
+    </>
+  ) : null
+
+  return (
+    <Container className="divide-y p-0">
+      <DataTable
+        data={fetchResult.data || []}
+        columns={columns}
+        filters={filters}
+        getRowId={adapter.getRowId || ((row: any) => row.id)}
+        rowCount={fetchResult.count}
+        enablePagination
+        enableSearch
+        pageSize={pageSize}
+        isLoading={fetchResult.isLoading || isLoadingColumns}
+        layout={layout}
+        heading={heading || entityName || (entity ? t(`${entity}.domain` as any) : "")}
+        subHeading={subHeading}
+        enableColumnVisibility={isViewConfigEnabled}
+        initialColumnVisibility={visibleColumns}
+        onColumnVisibilityChange={handleColumnVisibilityChange}
+        columnOrder={columnOrder}
+        onColumnOrderChange={setColumnOrder}
+        enableViewSelector={isViewConfigEnabled}
+        entity={entity}
+        currentColumns={currentColumns}
+        filterBarContent={filterBarContent}
+        rowHref={adapter.getRowHref as ((row: any) => string) | undefined}
+        emptyState={adapter.emptyState || {
+          empty: {
+            heading: t(`${entity}.list.noRecordsMessage` as any),
+          }
+        }}
+        prefix={queryPrefix}
+        actions={actions}
+        enableFilterMenu={false}
+      />
+
+      {saveDialogOpen && (
+        <SaveViewDialog
+          entity={entity}
+          currentColumns={currentColumns}
+          currentConfiguration={currentConfiguration}
+          editingView={editingView}
+          onClose={() => {
+            setSaveDialogOpen(false)
+            setEditingView(null)
+          }}
+          onSaved={() => {
+            setSaveDialogOpen(false)
+            setEditingView(null)
+          }}
+        />
+      )}
+    </Container>
+  )
+}

package/src/components/table/configurable-data-table/index.ts

@@ -0,0 +1,3 @@
+export { ConfigurableDataTable } from "./configurable-data-table"
+export type { ConfigurableDataTableProps } from "./configurable-data-table"
+export { SaveViewDropdown } from "./save-view-dropdown"

package/src/components/table/configurable-data-table/save-view-dropdown.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import { Button, DropdownMenu, usePrompt } from "@medusajs/ui"
+import { ChevronDownMini } from "@medusajs/icons"
+import { useTranslation } from "react-i18next"
+
+interface SaveViewDropdownProps {
+  isDefaultView: boolean
+  currentViewId?: string
+  currentViewName?: string
+  onSaveAsDefault: () => void
+  onUpdateExisting: () => void
+  onSaveAsNew: () => void
+}
+
+export const SaveViewDropdown: React.FC<SaveViewDropdownProps> = ({
+  isDefaultView,
+  currentViewId,
+  currentViewName,
+  onSaveAsDefault,
+  onUpdateExisting,
+  onSaveAsNew,
+}) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const handleSaveAsDefault = async () => {
+    const result = await prompt({
+      title: t("views.prompts.updateDefault.title"),
+      description: t("views.prompts.updateDefault.description"),
+      confirmText: t("views.prompts.updateDefault.confirmText"),
+      cancelText: t("views.prompts.updateDefault.cancelText"),
+    })
+
+    if (result) {
+      onSaveAsDefault()
+    }
+  }
+
+  const handleUpdateExisting = async () => {
+    const result = await prompt({
+      title: t("views.prompts.updateView.title"),
+      description: t("views.prompts.updateView.description", { name: currentViewName }),
+      confirmText: t("views.prompts.updateView.confirmText"),
+      cancelText: t("views.prompts.updateView.cancelText"),
+    })
+
+    if (result) {
+      onUpdateExisting()
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <Button
+          variant="secondary"
+          size="small"
+          type="button"
+        >
+          {t("views.save")}
+          <ChevronDownMini />
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="end">
+        {isDefaultView ? (
+          <>
+            <DropdownMenu.Item onClick={handleSaveAsDefault}>
+              {t("views.updateDefaultForEveryone")}
+            </DropdownMenu.Item>
+            <DropdownMenu.Item onClick={onSaveAsNew}>
+              {t("views.saveAsNew")}
+            </DropdownMenu.Item>
+          </>
+        ) : (
+          <>
+            <DropdownMenu.Item onClick={handleUpdateExisting}>
+              {t("views.updateViewName")}
+            </DropdownMenu.Item>
+            <DropdownMenu.Item onClick={onSaveAsNew}>
+              {t("views.saveAsNew")}
+            </DropdownMenu.Item>
+          </>
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}

package/src/components/table/data-table/data-table-filter/date-filter.tsx

@@ -1,6 +1,6 @@
 import { EllipseMiniSolid } from "@medusajs/icons"
 import { DatePicker, Text, clx } from "@medusajs/ui"
-import isEqual from "lodash/isEqual"
+import isEqual from "lodash.isequal"
 import { Popover as RadixPopover } from "radix-ui"
 import { useMemo, useState } from "react"
 
@@ -69,12 +69,19 @@ export const DateFilter = ({
 
   const handleCustomDateChange = (value: Date | null, pos: "start" | "end") => {
     const key = pos === "start" ? "$gte" : "$lte"
-    const dateValue = value ? value.toISOString() : undefined
+
+    let dateValue = value
+
+    // offset to the end of the day so the results include the selected end date
+    if (key === "$lte" && value) {
+      dateValue = new Date(value.getTime())
+      dateValue.setHours(23, 59, 59, 999)
+    }
 
     selectedParams.add(
       JSON.stringify({
         ...(currentDateComparison || {}),
-        [key]: dateValue,
+        [key]: dateValue?.toISOString(),
       })
     )
   }
@@ -306,5 +313,16 @@ const getDateFromComparison = (
   comparison: DateComparisonOperator | null,
   key: "$gte" | "$lte"
 ) => {
-  return comparison?.[key] ? new Date(comparison[key] as string) : undefined
+  if (!comparison?.[key]) {
+    return undefined
+  }
+
+  const compareDate = new Date(comparison[key] as string)
+
+  if (key === "$lte") {
+    // offset back to the display date
+    compareDate.setHours(0, 0, 0, 0)
+  }
+
+  return compareDate
 }

package/src/components/table/data-table/data-table-filter/number-filter.tsx

@@ -1,6 +1,6 @@
 import { EllipseMiniSolid } from "@medusajs/icons"
 import { Input, Label, clx } from "@medusajs/ui"
-import { debounce } from "lodash"
+import debounce from "lodash.debounce"
 import {
   Popover as RadixPopover,
   RadioGroup as RadixRadioGroup,

package/src/components/table/data-table/data-table-filter/string-filter.tsx

@@ -1,5 +1,5 @@
 import { Input, Label, clx } from "@medusajs/ui"
-import { debounce } from "lodash"
+import debounce from "lodash.debounce"
 import { Popover as RadixPopover } from "radix-ui"
 import { ChangeEvent, useCallback, useEffect, useState } from "react"
 import { useSelectedParams } from "../hooks"

package/src/components/table/data-table/data-table-order-by/data-table-order-by.tsx

@@ -4,6 +4,8 @@ import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"
 
+import { useDocumentDirection } from "../../../../hooks/use-document-direction"
+
 export type DataTableOrderByKey<TData> = {
   key: keyof TData
   label: string
@@ -54,6 +56,7 @@ export const DataTableOrderBy = <TData,>({
   }>(initState(searchParams, prefix))
   const param = prefix ? `${prefix}_order` : "order"
   const { t } = useTranslation()
+  const direction = useDocumentDirection()
 
   const handleDirChange = (dir: string) => {
     setState((prev) => ({
@@ -97,7 +100,7 @@ export const DataTableOrderBy = <TData,>({
   }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu dir={direction}>
       <DropdownMenu.Trigger asChild>
         <IconButton size="small">
           <DescendingSorting />

package/src/components/table/data-table/data-table-root/data-table-root.tsx

@@ -262,7 +262,7 @@ export const DataTableRoot = <TData,>({
                         <Table.Cell
                           key={cell.id}
                           className={clx({
-                            "!pl-0 !pr-0": shouldRenderAsLink,
+                            "!ps-0 !pe-0": shouldRenderAsLink,
                             "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-hover/row:bg-ui-bg-base-hover transition-fg group-has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyCell,
                             "bg-ui-bg-subtle group-hover/row:bg-ui-bg-subtle-hover":
@@ -288,9 +288,9 @@ export const DataTableRoot = <TData,>({
                             >
                               <div
                                 className={clx(
-                                  "flex size-full items-center pr-6",
+                                  "flex size-full items-center pe-6",
                                   {
-                                    "pl-6": isTabableLink && !hasLeftOffset,
+                                    "ps-6": isTabableLink && !hasLeftOffset,
                                   }
                                 )}
                               >

package/src/components/table/data-table/data-table-search/data-table-search.tsx

@@ -2,7 +2,7 @@ import { Input } from "@medusajs/ui"
 import { ChangeEvent, useCallback, useEffect } from "react"
 import { useTranslation } from "react-i18next"
 
-import { debounce } from "lodash"
+import debounce from "lodash.debounce"
 import { useSelectedParams } from "../hooks"
 
 type DataTableSearchProps = {

package/src/components/table/save-view-dialog/index.ts

@@ -0,0 +1 @@
+export * from "./save-view-dialog"

package/src/components/table/save-view-dialog/save-view-dialog.tsx

@@ -0,0 +1,163 @@
+import React, { useState } from "react"
+import {
+  Button,
+  Input,
+  Label,
+  Drawer,
+  Heading,
+  Text,
+} from "@medusajs/ui"
+import { useForm } from "react-hook-form"
+import { useViewConfigurations, useViewConfiguration } from "../../../hooks/use-view-configurations"
+import type { ViewConfiguration } from "../../../hooks/use-view-configurations"
+
+
+type SaveViewFormData = {
+  name: string
+}
+
+interface SaveViewDialogProps {
+  entity: string
+  currentColumns?: {
+    visible: string[]
+    order: string[]
+  }
+  currentConfiguration?: {
+    filters?: Record<string, unknown>
+    sorting?: { id: string; desc: boolean } | null
+    search?: string
+  }
+  editingView?: ViewConfiguration | null
+  onClose: () => void
+  onSaved: (view: ViewConfiguration) => void
+}
+
+export const SaveViewDialog: React.FC<SaveViewDialogProps> = ({
+  entity,
+  currentColumns,
+  currentConfiguration,
+  editingView,
+  onClose,
+  onSaved,
+}) => {
+  const { createView } = useViewConfigurations(entity)
+  const { updateView } = useViewConfiguration(entity, editingView?.id || '')
+  const [isLoading, setIsLoading] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SaveViewFormData>({
+    defaultValues: {
+      name: editingView?.name || "",
+    },
+  })
+
+  const onSubmit = async (data: SaveViewFormData) => {
+    if (!data.name.trim()) {
+      return
+    }
+
+    setIsLoading(true)
+    try {
+      if (editingView) {
+        // Update existing view
+        const result = await updateView.mutateAsync({
+          name: data.name.trim(),
+          configuration: {
+            visible_columns: currentColumns?.visible || editingView.configuration.visible_columns,
+            column_order: currentColumns?.order || editingView.configuration.column_order,
+            filters: currentConfiguration?.filters || editingView.configuration.filters || {},
+            sorting: currentConfiguration?.sorting || editingView.configuration.sorting || null,
+            search: currentConfiguration?.search || editingView.configuration.search || "",
+          },
+        })
+        onSaved(result.view_configuration)
+      } else {
+        // Create new view
+        const result = await createView.mutateAsync({
+          name: data.name.trim(),
+          set_active: true,
+          configuration: {
+            visible_columns: currentColumns?.visible || [],
+            column_order: currentColumns?.order || [],
+            filters: currentConfiguration?.filters || {},
+            sorting: currentConfiguration?.sorting || null,
+            search: currentConfiguration?.search || "",
+          },
+        })
+        onSaved(result.view_configuration)
+      }
+    } catch (error) {
+      // Error is handled by the hook
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Drawer open onOpenChange={onClose}>
+      <Drawer.Content className="flex flex-col">
+        <Drawer.Header>
+          <Drawer.Title asChild>
+            <Heading>
+              {editingView ? "Edit View Name" : "Save as New View"}
+            </Heading>
+          </Drawer.Title>
+          <Drawer.Description asChild>
+            <Text>
+              {editingView
+                ? "Change the name of your saved view"
+                : "Save your current configuration as a new view"}
+            </Text>
+          </Drawer.Description>
+        </Drawer.Header>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-1 flex-col">
+          <Drawer.Body className="flex-1">
+            <div className="flex flex-col gap-y-2">
+              <Label htmlFor="name" weight="plus">
+                View Name
+              </Label>
+              <Input
+                {...register("name", {
+                  required: "Name is required",
+                  validate: value => value.trim().length > 0 || "Name cannot be empty"
+                })}
+                type="text"
+                placeholder="Enter view name"
+                autoFocus
+              />
+              {errors.name && (
+                <span className="text-sm text-ui-fg-error">
+                  {errors.name.message}
+                </span>
+              )}
+            </div>
+          </Drawer.Body>
+
+          <Drawer.Footer>
+            <Drawer.Close asChild>
+              <Button
+                variant="secondary"
+                size="small"
+                type="button"
+              >
+                Cancel
+              </Button>
+            </Drawer.Close>
+            <Button
+              variant="primary"
+              size="small"
+              type="submit"
+              isLoading={isLoading}
+            >
+              {editingView ? "Update" : "Save"}
+            </Button>
+          </Drawer.Footer>
+        </form>
+      </Drawer.Content>
+    </Drawer>
+  )
+}

package/src/components/table/save-view-dropdown/index.ts

@@ -0,0 +1 @@
+export { SaveViewDropdown } from "./save-view-dropdown"