@medusajs/dashboard 0.0.1

package/src/v2-routes/inventory/inventory-detail/components/inventory-item-attributes/attributes-section.tsx

@@ -0,0 +1,49 @@
+import { Container, Heading } from "@medusajs/ui"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { InventoryNext } from "@medusajs/types"
+import { PencilSquare } from "@medusajs/icons"
+import { SectionRow } from "../../../../../components/common/section"
+import { getFormattedCountry } from "../../../../../lib/addresses"
+import { useTranslation } from "react-i18next"
+
+type InventoryItemAttributeSectionProps = {
+  inventoryItem: InventoryNext.InventoryItemDTO
+}
+
+export const InventoryItemAttributeSection = ({
+  inventoryItem,
+}: InventoryItemAttributeSectionProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("products.attributes")}</Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "attributes",
+                  icon: <PencilSquare />,
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <SectionRow title={t("fields.height")} value={inventoryItem.height} />
+      <SectionRow title={t("fields.width")} value={inventoryItem.width} />
+      <SectionRow title={t("fields.length")} value={inventoryItem.length} />
+      <SectionRow title={t("fields.weight")} value={inventoryItem.weight} />
+      <SectionRow title={t("fields.midCode")} value={inventoryItem.mid_code} />
+      <SectionRow title={t("fields.hsCode")} value={inventoryItem.hs_code} />
+      <SectionRow
+        title={t("fields.countryOfOrigin")}
+        value={getFormattedCountry(inventoryItem.origin_country)}
+      />
+    </Container>
+  )
+}

package/src/v2-routes/inventory/inventory-detail/components/inventory-item-general-section.tsx

@@ -0,0 +1,80 @@
+import { Container, Heading } from "@medusajs/ui"
+import { ProductVariantDTO } from "@medusajs/types"
+
+import { ActionMenu } from "../../../../components/common/action-menu"
+import { InventoryItemRes } from "../../../../types/api-responses"
+import { PencilSquare } from "@medusajs/icons"
+import { SectionRow } from "../../../../components/common/section"
+import { useTranslation } from "react-i18next"
+
+type InventoryItemGeneralSectionProps = {
+  inventoryItem: InventoryItemRes["inventory_item"] & {
+    variant: ProductVariantDTO | ProductVariantDTO[]
+  }
+}
+export const InventoryItemGeneralSection = ({
+  inventoryItem,
+}: InventoryItemGeneralSectionProps) => {
+  const { t } = useTranslation()
+
+  const variantArray = inventoryItem.variant
+    ? Array.isArray(inventoryItem.variant)
+      ? inventoryItem.variant
+      : [inventoryItem.variant]
+    : []
+
+  const variantTitles = variantArray.map((variant) => variant.title)
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{inventoryItem.title ?? inventoryItem.sku}</Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  icon: <PencilSquare />,
+                  label: t("actions.edit"),
+                  to: "edit",
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <SectionRow title={t("fields.sku")} value={inventoryItem.sku ?? "-"} />
+      <SectionRow
+        title={t("inventory.associatedVariants")}
+        value={variantTitles?.length ? variantTitles.join(", ") : "-"}
+      />
+      <SectionRow
+        title={t("fields.inStock")}
+        value={getQuantityFormat(
+          inventoryItem.stocked_quantity,
+          inventoryItem.location_levels?.length
+        )}
+      />
+
+      <SectionRow
+        title={t("inventory.reserved")}
+        value={getQuantityFormat(
+          inventoryItem.reserved_quantity,
+          inventoryItem.location_levels?.length
+        )}
+      />
+      <SectionRow
+        title={t("inventory.available")}
+        value={getQuantityFormat(
+          inventoryItem.stocked_quantity - inventoryItem.reserved_quantity,
+          inventoryItem.location_levels?.length
+        )}
+      />
+    </Container>
+  )
+}
+
+const getQuantityFormat = (quantity: number, locations: number) => {
+  return `${quantity ?? "-"}
+   ${quantity ? `across ${locations} locations` : ""}`
+}

package/src/v2-routes/inventory/inventory-detail/components/inventory-item-location-levels.tsx

@@ -0,0 +1,27 @@
+import { Button, Container, Heading } from "@medusajs/ui"
+
+import { InventoryItemRes } from "../../../../types/api-responses"
+import { ItemLocationListTable } from "./location-levels-table/location-list-table"
+import { Link } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+
+type InventoryItemLocationLevelsSectionProps = {
+  inventoryItem: InventoryItemRes["inventory_item"]
+}
+export const InventoryItemLocationLevelsSection = ({
+  inventoryItem,
+}: InventoryItemLocationLevelsSectionProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{t("inventory.locationLevels")}</Heading>
+        <Button size="small" variant="secondary" asChild>
+          <Link to="locations">{t("inventory.manageLocations")}</Link>
+        </Button>
+      </div>
+      <ItemLocationListTable inventory_item_id={inventoryItem.id} />
+    </Container>
+  )
+}

package/src/v2-routes/inventory/inventory-detail/components/inventory-item-reservations.tsx

@@ -0,0 +1,27 @@
+import { Button, Container, Heading } from "@medusajs/ui"
+
+import { InventoryItemRes } from "../../../../types/api-responses"
+import { Link } from "react-router-dom"
+import { ReservationItemTable } from "./reservations-table/reservation-list-table"
+import { useTranslation } from "react-i18next"
+
+type InventoryItemLocationLevelsSectionProps = {
+  inventoryItem: InventoryItemRes["inventory_item"]
+}
+export const InventoryItemReservationsSection = ({
+  inventoryItem,
+}: InventoryItemLocationLevelsSectionProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{t("reservations.domain")}</Heading>
+        <Button size="small" variant="secondary" asChild>
+          <Link to="/reservations/create">{t("actions.create")}</Link>
+        </Button>
+      </div>
+      <ReservationItemTable inventoryItem={inventoryItem} />
+    </Container>
+  )
+}

package/src/v2-routes/inventory/inventory-detail/components/location-levels-table/location-actions.tsx

@@ -0,0 +1,60 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { InventoryNext } from "@medusajs/types"
+import { useDeleteInventoryItemLevel } from "../../../../../hooks/api/inventory"
+import { usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+export const LocationActions = ({
+  level,
+}: {
+  level: InventoryNext.InventoryLevelDTO
+}) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const { mutateAsync } = useDeleteInventoryItemLevel(
+    level.inventory_item_id,
+    level.location_id
+  )
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("inventory.deleteWarning"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync()
+  }
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              icon: <PencilSquare />,
+              label: t("actions.edit"),
+              to: `locations/${level.location_id}`,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              icon: <Trash />,
+              label: t("actions.delete"),
+              onClick: handleDelete,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}

package/src/v2-routes/inventory/inventory-detail/components/location-levels-table/location-list-table.tsx

@@ -0,0 +1,55 @@
+import { DataTable } from "../../../../../components/table/data-table"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useInventoryItemLevels } from "../../../../../hooks/api/inventory"
+import { useLocationLevelTableQuery } from "./use-location-list-table-query"
+import { useLocationListTableColumns } from "./use-location-list-table-columns"
+
+const PAGE_SIZE = 20
+
+export const ItemLocationListTable = ({
+  inventory_item_id,
+}: {
+  inventory_item_id: string
+}) => {
+  const { searchParams, raw } = useLocationLevelTableQuery({
+    pageSize: PAGE_SIZE,
+  })
+
+  const {
+    inventory_levels,
+    count,
+    isPending: isLoading,
+    isError,
+    error,
+  } = useInventoryItemLevels(inventory_item_id, {
+    ...searchParams,
+    fields: "*stock_locations",
+  })
+
+  const columns = useLocationListTableColumns()
+
+  const { table } = useDataTable({
+    data: inventory_levels ?? [],
+    columns,
+    count,
+    enablePagination: true,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <DataTable
+      table={table}
+      columns={columns}
+      pageSize={PAGE_SIZE}
+      count={count}
+      isLoading={isLoading}
+      pagination
+      queryObject={raw}
+    />
+  )
+}

package/src/v2-routes/inventory/inventory-detail/components/location-levels-table/use-location-list-table-columns.tsx

@@ -0,0 +1,97 @@
+import { InventoryNext, StockLocationDTO } from "@medusajs/types"
+
+import { LocationActions } from "./location-actions"
+import { PlaceholderCell } from "../../../../../components/table/table-cells/common/placeholder-cell"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+/**
+ * Adds missing properties to the InventoryLevelDTO type.
+ */
+interface ExtendedLocationLevel extends InventoryNext.InventoryLevelDTO {
+  stock_locations: StockLocationDTO[]
+  reserved_quantity: number
+  stocked_quantity: number
+  available_quantity: number
+}
+
+const columnHelper = createColumnHelper<ExtendedLocationLevel>()
+
+export const useLocationListTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("stock_locations.0.name", {
+        header: t("fields.location"),
+        cell: ({ getValue }) => {
+          const locationName = getValue()
+
+          if (!locationName) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <span className="truncate">{locationName.toString()}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("reserved_quantity", {
+        header: t("inventory.reserved"),
+        cell: ({ getValue }) => {
+          const quantity = getValue()
+
+          if (Number.isNaN(quantity)) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <span className="truncate">{quantity}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("stocked_quantity", {
+        header: t("fields.inStock"),
+        cell: ({ getValue }) => {
+          const stockedQuantity = getValue()
+
+          if (Number.isNaN(stockedQuantity)) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <span className="truncate">{stockedQuantity}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("available_quantity", {
+        header: t("inventory.available"),
+        cell: ({ getValue }) => {
+          const availableQuantity = getValue()
+
+          if (Number.isNaN(availableQuantity)) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <span className="truncate">{availableQuantity}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => <LocationActions level={row.original} />,
+      }),
+    ],
+    [t]
+  )
+}

package/src/v2-routes/inventory/inventory-detail/components/location-levels-table/use-location-list-table-query.tsx

@@ -0,0 +1,44 @@
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+
+export const useLocationLevelTableQuery = ({
+  pageSize = 20,
+  prefix,
+}: {
+  pageSize?: number
+  prefix?: string
+}) => {
+  const raw = useQueryParams(
+    [
+      "id",
+      "location_id",
+      "stocked_quantity",
+      "reserved_quantity",
+      "incoming_quantity",
+      "available_quantity",
+      "*stock_locations",
+    ],
+    prefix
+  )
+
+  const { reserved_quantity, stocked_quantity, available_quantity, ...params } =
+    raw
+
+  const searchParams = {
+    limit: pageSize,
+    reserved_quantity: reserved_quantity
+      ? JSON.parse(reserved_quantity)
+      : undefined,
+    stocked_quantity: stocked_quantity
+      ? JSON.parse(stocked_quantity)
+      : undefined,
+    available_quantity: available_quantity
+      ? JSON.parse(available_quantity)
+      : undefined,
+    ...params,
+  }
+
+  return {
+    searchParams,
+    raw,
+  }
+}

package/src/v2-routes/inventory/inventory-detail/components/manage-locations/components/location-item.tsx

@@ -0,0 +1,42 @@
+import { Checkbox, Text, clx } from "@medusajs/ui"
+
+import { StockLocationDTO } from "@medusajs/types"
+
+type LocationItemProps = {
+  selected: boolean
+  onSelect: (selected: boolean) => void
+  location: StockLocationDTO
+}
+
+export const LocationItem = ({
+  selected,
+  onSelect,
+  location,
+}: LocationItemProps) => {
+  return (
+    <div
+      className={clx("flex w-full gap-x-2 rounded-lg border px-2 py-2", {
+        "border-ui-border-interactive ": selected,
+      })}
+      onClick={() => onSelect(!selected)}
+    >
+      <div className="h-5 w-5">
+        <Checkbox checked={selected} />
+      </div>
+      <div className="flex w-full flex-col">
+        <Text size="small" leading="compact" weight="plus">
+          {location.name}
+        </Text>
+        <Text size="small" leading="compact" className="text-ui-fg-subtle">
+          {[
+            location.address?.address_1,
+            location.address?.city,
+            location.address?.country_code,
+          ]
+            .filter((el) => !!el)
+            .join(", ")}
+        </Text>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,193 @@
+import * as zod from "zod"
+
+import { Button, Text, toast } from "@medusajs/ui"
+import {
+  RouteDrawer,
+  useRouteModal,
+} from "../../../../../../components/route-modal"
+import { useBatchInventoryItemLevels } from "../../../../../../hooks/api/inventory"
+import { useFieldArray, useForm } from "react-hook-form"
+
+import { InventoryItemRes } from "../../../../../../types/api-responses"
+import { LocationItem } from "./location-item"
+import { StockLocationDTO } from "@medusajs/types"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+type EditInventoryItemAttributeFormProps = {
+  item: InventoryItemRes["inventory_item"]
+  locations: StockLocationDTO[]
+}
+
+const EditInventoryItemAttributesSchema = z.object({
+  locations: z.array(
+    z.object({
+      id: z.string(),
+      location_id: z.string(),
+      selected: z.boolean(),
+    })
+  ),
+})
+
+const getDefaultValues = (
+  allLocations: StockLocationDTO[],
+  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 = new Set(
+    item.location_levels?.map((l) => l.location_id) ?? []
+  )
+
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  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 { mutateAsync } = useBatchInventoryItemLevels(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
+        }
+
+        if (location.selected) {
+          acc[0].push(location.location_id)
+        } else {
+          acc[1].push(location.location_id)
+        }
+        return acc
+      },
+      [[], []] as [string[], string[]]
+    )
+
+    if (selectedLocations.length === 0 && unselectedLocations.length === 0) {
+      return handleSuccess()
+    }
+
+    try {
+      await mutateAsync({
+        creates: selectedLocations.map((location_id) => ({
+          location_id,
+        })),
+        deletes: unselectedLocations,
+      })
+
+      handleSuccess()
+
+      toast.success(t("general.success"), {
+        description: t("inventory.toast.update"),
+        dismissLabel: t("actions.close"),
+      })
+    } catch (e) {
+      toast.error(t("general.error"), {
+        description: e.message,
+        dismissLabel: t("actions.close"),
+      })
+    }
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <form
+        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>
+          <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: locationFields.filter((l) => l.selected).length,
+                  total: locations.length,
+                })}
+                {")"}
+              </Text>
+            </div>
+          </div>
+          {locationFields.map((location, idx) => {
+            return (
+              <LocationItem
+                selected={location.selected}
+                location={location as any}
+                onSelect={() =>
+                  updateField(idx, {
+                    ...location,
+                    selected: !location.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")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </form>
+    </RouteDrawer.Form>
+  )
+}

package/src/v2-routes/inventory/inventory-detail/components/manage-locations/index.ts

@@ -0,0 +1 @@
+export { ManageLocationsDrawer as Component } from "./manage-locations-drawer"