@medusajs/dashboard 2.10.4-snapshot-20250922195925 → 2.10.4-snapshot-20250925172615

package/src/routes/inventory/inventory-detail/components/manage-locations/components/manage-locations-form.tsx

@@ -1,111 +1,75 @@
-import * as zod from "zod"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { AdminInventoryItem, AdminStockLocation } from "@medusajs/types"
+import {
+  AdminInventoryItem,
+  AdminStockLocation,
+  HttpTypes,
+} from "@medusajs/types"
 import { Button, Text, toast } from "@medusajs/ui"
-import { useFieldArray, useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
-import { z } from "zod"
 import { RouteDrawer, useRouteModal } from "../../../../../../components/modals"
 import { useBatchInventoryItemLocationLevels } from "../../../../../../hooks/api/inventory"
+import { sdk } from "../../../../../../lib/client"
 
-import { useEffect, useMemo } from "react"
-import { KeyboundForm } from "../../../../../../components/utilities/keybound-form"
+import { useMemo, useState } from "react"
 import { LocationItem } from "./location-item"
+import { LocationSearchInput } from "./location-search-input"
+import { InfiniteList } from "../../../../../../components/common/infinite-list/infinite-list"
+import { useStockLocations } from "../../../../../../hooks/api/stock-locations"
 
 type EditInventoryItemAttributeFormProps = {
   item: AdminInventoryItem
   locations: AdminStockLocation[]
 }
 
-const EditInventoryItemAttributesSchema = z.object({
-  locations: z.array(
-    z.object({
-      id: z.string(),
-      location_id: z.string(),
-      selected: z.boolean(),
-    })
-  ),
-})
-
-const getDefaultValues = (
-  allLocations: AdminStockLocation[],
-  existingLevels: Set<string>
-) => {
-  return {
-    locations: allLocations.map((location) => ({
-      ...location,
-      location_id: location.id,
-      selected: existingLevels.has(location.id),
-    })),
-  }
-}
-
 export const ManageLocationsForm = ({
   item,
-  locations,
 }: EditInventoryItemAttributeFormProps) => {
   const existingLocationLevels = useMemo(
     () => new Set(item.location_levels?.map((l) => l.location_id) ?? []),
-    item.location_levels
+    [item.location_levels]
   )
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedLocationIds, setSelectedLocationIds] = useState<Set<string>>(
+    existingLocationLevels
+  )
 
-  const form = useForm<zod.infer<typeof EditInventoryItemAttributesSchema>>({
-    defaultValues: getDefaultValues(locations, existingLocationLevels),
-    resolver: zodResolver(EditInventoryItemAttributesSchema),
-  })
-
-  const { fields: locationFields, update: updateField } = useFieldArray({
-    control: form.control,
-    name: "locations",
-  })
+  const { count } = useStockLocations({ limit: 1, fields: "id" })
 
-  useEffect(() => {
-    form.setValue(
-      "locations",
-      getDefaultValues(locations, existingLocationLevels).locations
-    )
-  }, [existingLocationLevels, locations])
+  const handleLocationSelect = (locationId: string, selected: boolean) => {
+    setSelectedLocationIds((prev) => {
+      const newSet = new Set(prev)
+      if (selected) {
+        newSet.add(locationId)
+      } else {
+        newSet.delete(locationId)
+      }
+      return newSet
+    })
+  }
 
   const { mutateAsync } = useBatchInventoryItemLocationLevels(item.id)
 
-  const handleSubmit = form.handleSubmit(async ({ locations }) => {
-    // Changes in selected locations
-    const [selectedLocations, unselectedLocations] = locations.reduce(
-      (acc, location) => {
-        // If the location is not changed do nothing
-        if (
-          (!location.selected &&
-            !existingLocationLevels.has(location.location_id)) ||
-          (location.selected &&
-            existingLocationLevels.has(location.location_id))
-        ) {
-          return acc
-        }
+  const handleSubmit = async () => {
+    const toCreate = Array.from(selectedLocationIds).filter(
+      (id) => !existingLocationLevels.has(id)
+    )
 
-        if (location.selected) {
-          acc[0].push(location.location_id)
-        } else {
-          acc[1].push(location.location_id)
-        }
-        return acc
-      },
-      [[], []] as [string[], string[]]
+    const toDeleteLocations = Array.from(existingLocationLevels).filter(
+      (id) => !selectedLocationIds.has(id)
     )
 
-    if (selectedLocations.length === 0 && unselectedLocations.length === 0) {
-      return handleSuccess()
-    }
+    const toDelete = toDeleteLocations
+      .map((id) => item.location_levels?.find((l) => l.location_id === id)?.id)
+      .filter(Boolean) as unknown as string[]
 
     await mutateAsync(
       {
-        create: selectedLocations.map((location_id) => ({
+        create: toCreate.map((location_id) => ({
           location_id,
         })),
-        delete: unselectedLocations,
+        delete: toDelete,
       },
       {
         onSuccess: () => {
@@ -117,80 +81,103 @@ export const ManageLocationsForm = ({
         },
       }
     )
-  })
+  }
 
   return (
-    <RouteDrawer.Form form={form}>
-      <KeyboundForm
-        onSubmit={handleSubmit}
-        className="flex flex-1 flex-col overflow-hidden"
-      >
-        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
-          <div className="text-ui-fg-subtle shadow-elevation-card-rest grid grid-rows-2 divide-y rounded-lg border">
-            <div className="grid grid-cols-2 divide-x">
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {t("fields.title")}
-              </Text>
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {item.title ?? "-"}
-              </Text>
-            </div>
-            <div className="grid grid-cols-2 divide-x">
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {t("fields.sku")}
-              </Text>
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {item.sku}
-              </Text>
-            </div>
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
+        <div className="text-ui-fg-subtle shadow-elevation-card-rest grid grid-rows-2 divide-y rounded-lg border">
+          <div className="grid grid-cols-2 divide-x">
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {t("fields.title")}
+            </Text>
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {item.title ?? "-"}
+            </Text>
           </div>
-          <div className="flex flex-col">
-            <Text size="small" weight="plus" leading="compact">
-              {t("locations.domain")}
+          <div className="grid grid-cols-2 divide-x">
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {t("fields.sku")}
+            </Text>
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {item.sku}
             </Text>
-            <div className="text-ui-fg-subtle flex w-full justify-between">
-              <Text size="small" leading="compact">
-                {t("locations.selectLocations")}
-              </Text>
-              <Text size="small" leading="compact">
-                {"("}
-                {t("general.countOfTotalSelected", {
-                  count: locationFields.filter((l) => l.selected).length,
-                  total: locations.length,
-                })}
-                {")"}
-              </Text>
-            </div>
           </div>
-          {locationFields.map((location, idx) => {
-            return (
+        </div>
+        <div className="flex flex-col">
+          <Text size="small" weight="plus" leading="compact">
+            {t("locations.domain")}
+          </Text>
+          <div className="text-ui-fg-subtle flex w-full justify-between">
+            <Text size="small" leading="compact">
+              {t("locations.selectLocations")}
+            </Text>
+            <Text size="small" leading="compact">
+              {"("}
+              {t("general.countOfTotalSelected", {
+                count: selectedLocationIds.size,
+                total: count,
+              })}
+              {")"}
+            </Text>
+          </div>
+        </div>
+
+        <LocationSearchInput
+          onSearchChange={setSearchQuery}
+          placeholder={t("general.search")}
+        />
+
+        <div className="min-h-0 flex-1">
+          <InfiniteList<
+            HttpTypes.AdminStockLocationListResponse,
+            HttpTypes.AdminStockLocation,
+            HttpTypes.AdminStockLocationListParams
+          >
+            queryKey={["stock-locations", searchQuery]}
+            queryFn={async (params) => {
+              const response = await sdk.admin.stockLocation.list({
+                limit: params.limit,
+                offset: params.offset,
+                ...(searchQuery && { q: searchQuery }),
+              })
+              return response
+            }}
+            responseKey="stock_locations"
+            renderItem={(location) => (
               <LocationItem
-                selected={location.selected}
-                location={location as any}
-                onSelect={() =>
-                  updateField(idx, {
-                    ...location,
-                    selected: !location.selected,
-                  })
+                selected={selectedLocationIds.has(location.id)}
+                location={location}
+                onSelect={(selected) =>
+                  handleLocationSelect(location.id, selected)
                 }
-                key={location.id}
               />
-            )
-          })}
-        </RouteDrawer.Body>
-        <RouteDrawer.Footer>
-          <div className="flex items-center justify-end gap-x-2">
-            <RouteDrawer.Close asChild>
-              <Button variant="secondary" size="small">
-                {t("actions.cancel")}
-              </Button>
-            </RouteDrawer.Close>
-            <Button type="submit" size="small" isLoading={false}>
-              {t("actions.save")}
+            )}
+            renderEmpty={() => (
+              <div className="flex items-center justify-center py-8">
+                <Text size="small" className="text-ui-fg-subtle">
+                  {searchQuery
+                    ? t("locations.noLocationsFound")
+                    : t("locations.noLocationsFound")}
+                </Text>
+              </div>
+            )}
+            pageSize={20}
+          />
+        </div>
+      </RouteDrawer.Body>
+      <RouteDrawer.Footer>
+        <div className="flex items-center justify-end gap-x-2">
+          <RouteDrawer.Close asChild>
+            <Button variant="secondary" size="small">
+              {t("actions.cancel")}
             </Button>
-          </div>
-        </RouteDrawer.Footer>
-      </KeyboundForm>
-    </RouteDrawer.Form>
+          </RouteDrawer.Close>
+          <Button onClick={handleSubmit} size="small" isLoading={false}>
+            {t("actions.save")}
+          </Button>
+        </div>
+      </RouteDrawer.Footer>
+    </div>
   )
 }

package/src/routes/locations/location-edit/components/edit-location-form/edit-location-form.tsx

@@ -62,7 +62,7 @@ export const EditLocationForm = ({ location }: EditLocationFormProps) => {
       },
       {
         onSuccess: () => {
-          toast.success(t("stockLocations.edit.successToast"))
+          toast.success(t("stockLocations.edit.successToast", { name: name }))
           handleSuccess()
         },
         onError: (e) => {

package/src/routes/locations/location-list/index.ts

@@ -1,2 +1 @@
-export { shippingListLoader as loader } from "./loader"
 export { LocationList as Component } from "./location-list"

package/src/routes/locations/location-list/location-list.tsx

@@ -1,34 +1,46 @@
 import { ShoppingBag, TruckFast } from "@medusajs/icons"
 import { Container, Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
-import { useLoaderData } from "react-router-dom"
 
 import { useStockLocations } from "../../../hooks/api/stock-locations"
-import LocationListItem from "./components/location-list-item/location-list-item"
 import { LOCATION_LIST_FIELDS } from "./constants"
-import { shippingListLoader } from "./loader"
+import { useLocationListTableColumns } from "./use-location-list-table-columns"
+import { useLocationListTableQuery } from "./use-location-list-table-query"
 
+import { DataTable } from "../../../components/data-table"
 import { SidebarLink } from "../../../components/common/sidebar-link/sidebar-link"
 import { TwoColumnPage } from "../../../components/layout/pages"
 import { useExtension } from "../../../providers/extension-provider"
-import { LocationListHeader } from "./components/location-list-header"
+import { keepPreviousData } from "@tanstack/react-query"
+
+const PAGE_SIZE = 20
+const PREFIX = "loc"
 
 export function LocationList() {
-  const initialData = useLoaderData() as Awaited<
-    ReturnType<typeof shippingListLoader>
-  >
+  const { t } = useTranslation()
+
+  const searchParams = useLocationListTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX,
+  })
 
   const {
     stock_locations: stockLocations = [],
+    count,
     isError,
     error,
+    isLoading,
   } = useStockLocations(
     {
       fields: LOCATION_LIST_FIELDS,
+      ...searchParams,
     },
-    { initialData }
+    {
+      placeholderData: keepPreviousData,
+    }
   )
 
+  const columns = useLocationListTableColumns()
   const { getWidgets } = useExtension()
 
   if (isError) {
@@ -46,12 +58,38 @@ export function LocationList() {
       showJSON
     >
       <TwoColumnPage.Main>
-        <LocationListHeader />
-        <div className="flex flex-col gap-3 lg:col-span-2">
-          {stockLocations.map((location) => (
-            <LocationListItem key={location.id} location={location} />
-          ))}
-        </div>
+        <Container className="flex flex-col divide-y p-0">
+          <DataTable
+            data={stockLocations}
+            columns={columns}
+            rowCount={count}
+            pageSize={PAGE_SIZE}
+            getRowId={(row) => row.id}
+            heading={t("stockLocations.domain")}
+            subHeading={t("stockLocations.list.description")}
+            emptyState={{
+              empty: {
+                heading: t("stockLocations.list.noRecordsMessage"),
+                description: t("stockLocations.list.noRecordsMessageEmpty"),
+              },
+              filtered: {
+                heading: t("stockLocations.list.noRecordsMessage"),
+                description: t("stockLocations.list.noRecordsMessageFiltered"),
+              },
+            }}
+            actions={[
+              {
+                label: t("actions.create"),
+                to: "create",
+              },
+            ]}
+            isLoading={isLoading}
+            rowHref={(row) => `/settings/locations/${row.id}`}
+            enableSearch={true}
+            prefix={PREFIX}
+            layout="fill"
+          />
+        </Container>
       </TwoColumnPage.Main>
       <TwoColumnPage.Sidebar>
         <LinksSection />

package/src/routes/locations/location-list/use-location-list-table-columns.tsx

@@ -0,0 +1,185 @@
+import { HttpTypes } from "@medusajs/types"
+import { PencilSquare, Trash } from "@medusajs/icons"
+import {
+  createDataTableColumnHelper,
+  StatusBadge,
+  toast,
+  usePrompt,
+} from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useMemo } from "react"
+import { useNavigate } from "react-router-dom"
+import { FetchError } from "@medusajs/js-sdk"
+
+import { PlaceholderCell } from "../../../components/table/table-cells/common/placeholder-cell"
+import { getFormattedAddress } from "../../../lib/addresses"
+import { FulfillmentSetType } from "../common/constants"
+import { queryClient } from "../../../lib/query-client"
+import { stockLocationsQueryKeys } from "../../../hooks/api/stock-locations"
+import { ListSummary } from "../../../components/common/list-summary"
+import { sdk } from "../../../lib/client"
+
+const columnHelper = createDataTableColumnHelper<HttpTypes.AdminStockLocation>()
+
+export const useLocationListTableColumns = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const prompt = usePrompt()
+
+  const handleDelete = async (location: HttpTypes.AdminStockLocation) => {
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("stockLocations.delete.confirmation", {
+        name: location.name,
+      }),
+      confirmText: t("actions.remove"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    try {
+      await sdk.admin.stockLocation.delete(location.id)
+      queryClient.invalidateQueries({
+        queryKey: stockLocationsQueryKeys.lists(),
+      })
+
+      queryClient.invalidateQueries({
+        queryKey: stockLocationsQueryKeys.detail(location.id),
+      })
+
+      toast.success(
+        t("stockLocations.delete.successToast", {
+          name: location.name,
+        })
+      )
+    } catch (e) {
+      toast.error((e as FetchError).message)
+    }
+  }
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: ({ getValue }) => {
+          const name = getValue()
+          if (!name) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <span className="text-ui-fg-subtle text-small truncate">
+              {name}
+            </span>
+          )
+        },
+      }),
+      columnHelper.accessor("address", {
+        header: t("fields.address"),
+        cell: ({ getValue, row }) => {
+          const address = getValue()
+          const location = row.original
+
+          if (!address) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex flex-col">
+              <span className="text-ui-fg-subtle text-small truncate">
+                {getFormattedAddress({
+                  address: location.address as HttpTypes.AdminOrderAddress,
+                }).join(", ")}
+              </span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("fulfillment_sets", {
+        id: "shipping_fulfillment",
+        header: t("stockLocations.fulfillmentSets.shipping.header"),
+        cell: ({ getValue }) => {
+          const fulfillmentSets = getValue()
+          const shippingSet = fulfillmentSets?.find(
+            (f) => f.type === FulfillmentSetType.Shipping
+          )
+          const fulfillmentSetExists = !!shippingSet
+
+          return (
+            <StatusBadge color={fulfillmentSetExists ? "green" : "grey"}>
+              {t(
+                fulfillmentSetExists ? "statuses.enabled" : "statuses.disabled"
+              )}
+            </StatusBadge>
+          )
+        },
+      }),
+      columnHelper.accessor("fulfillment_sets", {
+        id: "pickup_fulfillment",
+        header: t("stockLocations.fulfillmentSets.pickup.header"),
+        cell: ({ getValue }) => {
+          const fulfillmentSets = getValue()
+          const pickupSet = fulfillmentSets?.find(
+            (f) => f.type === FulfillmentSetType.Pickup
+          )
+          const fulfillmentSetExists = !!pickupSet
+
+          return (
+            <StatusBadge color={fulfillmentSetExists ? "green" : "grey"}>
+              {t(
+                fulfillmentSetExists ? "statuses.enabled" : "statuses.disabled"
+              )}
+            </StatusBadge>
+          )
+        },
+      }),
+      columnHelper.accessor("sales_channels", {
+        header: t("stockLocations.salesChannels.label"),
+        cell: ({ getValue }) => {
+          const salesChannels = getValue()
+
+          if (!salesChannels?.length) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex items-center">
+              <ListSummary
+                inline
+                n={1}
+                list={salesChannels.map((s) => s.name)}
+              />
+            </div>
+          )
+        },
+      }),
+      columnHelper.action({
+        actions: (ctx) => {
+          const location = ctx.row.original
+          return [
+            [
+              {
+                icon: <PencilSquare />,
+                label: t("actions.edit"),
+                onClick: () => {
+                  navigate(`/settings/locations/${location.id}/edit`)
+                },
+              },
+            ],
+            [
+              {
+                icon: <Trash />,
+                label: t("actions.delete"),
+                onClick: () => handleDelete(location),
+              },
+            ],
+          ]
+        },
+      }),
+    ],
+    []
+  )
+}

package/src/routes/locations/location-list/use-location-list-table-query.tsx

@@ -0,0 +1,22 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../../hooks/use-query-params"
+
+export const useLocationListTableQuery = ({
+  pageSize = 20,
+  prefix,
+}: {
+  pageSize?: number
+  prefix?: string
+}) => {
+  const queryObject = useQueryParams(["order", "offset", "q"], prefix)
+
+  const { offset, ...rest } = queryObject
+
+  const searchParams: HttpTypes.AdminStockLocationListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    ...rest,
+  }
+
+  return searchParams
+}

package/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-option-details-form.tsx

@@ -12,6 +12,7 @@ import { sdk } from "../../../../../lib/client"
 import { formatProvider } from "../../../../../lib/format-provider"
 import { FulfillmentSetType, ShippingOptionPriceType, } from "../../../common/constants"
 import { CreateShippingOptionSchema } from "./schema"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type CreateShippingOptionDetailsFormProps = {
   form: UseFormReturn<CreateShippingOptionSchema>
@@ -33,7 +34,7 @@ export const CreateShippingOptionDetailsForm = ({
   type,
 }: CreateShippingOptionDetailsFormProps) => {
   const { t } = useTranslation()
-
+  const direction = useDocumentDirection()
   const isPickup = type === FulfillmentSetType.Pickup
 
   const shippingProfiles = useComboboxData({
@@ -105,6 +106,7 @@ export const CreateShippingOptionDetailsForm = ({
                   </Form.Label>
                   <Form.Control>
                     <RadioGroup
+                      dir={direction}
                       className="grid grid-cols-1 gap-4 md:grid-cols-2"
                       {...field}
                       onValueChange={field.onChange}
@@ -252,6 +254,7 @@ export const CreateShippingOptionDetailsForm = ({
                   </Form.Label>
                   <Form.Control>
                     <Select
+                      dir={direction}
                       {...field}
                       onValueChange={field.onChange}
                       disabled={!selectedProviderId}