@medusajs/dashboard 0.0.1

package/src/v2-routes/reservations/reservation-list/components/reservation-list-table/reservation-list-table.tsx

@@ -0,0 +1,62 @@
+import { Button, Container, Heading } from "@medusajs/ui"
+
+import { DataTable } from "../../../../../components/table/data-table"
+import { Link } from "react-router-dom"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useReservationItems } from "../../../../../hooks/api/reservations"
+import { useReservationTableColumns } from "./use-reservation-table-columns"
+import { useReservationTableFilters } from "./use-reservation-table-filters"
+import { useReservationTableQuery } from "./use-reservation-table-query"
+import { useTranslation } from "react-i18next"
+
+const PAGE_SIZE = 20
+
+export const ReservationListTable = () => {
+  const { t } = useTranslation()
+
+  const { searchParams } = useReservationTableQuery({
+    pageSize: PAGE_SIZE,
+  })
+  const { reservations, count, isPending, isError, error } =
+    useReservationItems({
+      ...searchParams,
+    })
+
+  const filters = useReservationTableFilters()
+  const columns = useReservationTableColumns()
+
+  const { table } = useDataTable({
+    data: reservations || [],
+    columns,
+    count,
+    enablePagination: true,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{t("reservations.domain")}</Heading>
+        <Button variant="secondary" size="small" asChild>
+          <Link to="create">{t("actions.create")}</Link>
+        </Button>
+      </div>
+      <DataTable
+        table={table}
+        columns={columns}
+        pageSize={PAGE_SIZE}
+        count={count}
+        isLoading={isPending}
+        filters={filters}
+        pagination
+        navigateTo={(row) => row.id}
+        search={false}
+      />
+    </Container>
+  )
+}

package/src/v2-routes/reservations/reservation-list/components/reservation-list-table/use-reservation-table-columns.tsx

@@ -0,0 +1,104 @@
+import { ExtendedReservationItem } from "@medusajs/medusa"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { InlineLink } from "../../../../../components/common/inline-link"
+import { DateCell } from "../../../../../components/table/table-cells/common/date-cell"
+import { PlaceholderCell } from "../../../../../components/table/table-cells/common/placeholder-cell"
+import { ReservationActions } from "./reservation-actions"
+
+const columnHelper = createColumnHelper<ExtendedReservationItem>()
+
+export const useReservationTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("inventory_item", {
+        header: t("fields.sku"),
+        cell: ({ getValue }) => {
+          const inventoryItem = getValue()
+
+          if (!inventoryItem || !inventoryItem.sku) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <span className="truncate">{inventoryItem.sku}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("line_item", {
+        header: t("fields.order"),
+        cell: ({ getValue }) => {
+          const inventoryItem = getValue()
+
+          if (!inventoryItem || !inventoryItem.order?.display_id) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <InlineLink to={`/orders/${inventoryItem.order.id}`}>
+                <span className="truncate">
+                  #{inventoryItem.order.display_id}
+                </span>
+              </InlineLink>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("description", {
+        header: t("fields.description"),
+        cell: ({ getValue }) => {
+          const description = getValue()
+
+          if (!description) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <span className="truncate">{description}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("created_at", {
+        header: t("fields.created"),
+        cell: ({ getValue }) => {
+          const created = getValue()
+
+          return <DateCell date={created} />
+        },
+      }),
+      columnHelper.accessor("quantity", {
+        header: () => (
+          <div className="flex size-full items-center justify-end overflow-hidden text-right">
+            <span className="truncate">{t("fields.quantity")}</span>
+          </div>
+        ),
+        cell: ({ getValue }) => {
+          const quantity = getValue()
+
+          return (
+            <div className="flex size-full items-center justify-end overflow-hidden text-right">
+              <span className="truncate">{quantity}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          const reservation = row.original
+
+          return <ReservationActions reservation={reservation} />
+        },
+      }),
+    ],
+    [t]
+  )
+}

package/src/v2-routes/reservations/reservation-list/components/reservation-list-table/use-reservation-table-filters.tsx

@@ -0,0 +1,35 @@
+import { Filter } from "../../../../../components/table/data-table"
+import { useStockLocations } from "../../../../../hooks/api/stock-locations"
+import { useTranslation } from "react-i18next"
+
+export const useReservationTableFilters = () => {
+  const { t } = useTranslation()
+  const { stock_locations } = useStockLocations({
+    limit: 1000,
+  })
+
+  const filters: Filter[] = []
+
+  if (stock_locations) {
+    const stockLocationFilter: Filter = {
+      type: "select",
+      options: stock_locations.map((s) => ({
+        label: s.name,
+        value: s.id,
+      })),
+      key: "location_id",
+      searchable: true,
+      label: t("fields.location"),
+    }
+
+    filters.push(stockLocationFilter)
+  }
+
+  filters.push({
+    type: "date",
+    key: "created_at",
+    label: t("fields.createdAt"),
+  })
+
+  return filters
+}

package/src/v2-routes/reservations/reservation-list/components/reservation-list-table/use-reservation-table-query.tsx

@@ -0,0 +1,32 @@
+import { AdminGetReservationsParams } from "@medusajs/medusa"
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+
+export const useReservationTableQuery = ({
+  pageSize = 20,
+  prefix,
+}: {
+  pageSize?: number
+  prefix?: string
+}) => {
+  const raw = useQueryParams(
+    ["location_id", "offset", "created_at", "quantity", "updated_at", "order"],
+    prefix
+  )
+
+  const { location_id, created_at, updated_at, quantity, offset, ...rest } = raw
+
+  const searchParams: AdminGetReservationsParams = {
+    limit: pageSize,
+    offset: offset ? parseInt(offset) : undefined,
+    location_id: location_id,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    quantity: quantity ? JSON.parse(quantity) : undefined,
+    ...rest,
+  }
+
+  return {
+    searchParams,
+    raw,
+  }
+}

package/src/v2-routes/reservations/reservation-list/constants.ts

@@ -0,0 +1 @@
+export const reservationListExpand = "line_item"

package/src/v2-routes/reservations/reservation-list/create-reservation/components/create-reservation-form/create-reservation-form.tsx

@@ -0,0 +1,286 @@
+import * as zod from "zod"
+
+import { Button, Heading, Input, Text, Textarea, toast } from "@medusajs/ui"
+import {
+  RouteFocusModal,
+  useRouteModal,
+} from "../../../../../../components/route-modal"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { InventoryNext } from "@medusajs/types"
+import React from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { Form } from "../../../../../../components/common/form"
+import { Combobox } from "../../../../../../components/inputs/combobox"
+import { useInventoryItems } from "../../../../../../hooks/api/inventory"
+import { useCreateReservationItem } from "../../../../../../hooks/api/reservations"
+import { useStockLocations } from "../../../../../../hooks/api/stock-locations"
+import { InventoryItemRes } from "../../../../../../types/api-responses"
+
+export const CreateReservationSchema = zod.object({
+  inventory_item_id: zod.string().min(1),
+  location_id: zod.string().min(1),
+  quantity: zod.number().min(1),
+  description: zod.string().optional(),
+})
+
+const AttributeGridRow = ({
+  title,
+  value,
+}: {
+  title: string
+  value: string | number
+}) => {
+  return (
+    <div className="grid grid-cols-2 divide-x">
+      <Text className="px-2 py-1.5" size="small" leading="compact">
+        {title}
+      </Text>
+      <Text className="px-2 py-1.5" size="small" leading="compact">
+        {value}
+      </Text>
+    </div>
+  )
+}
+
+export const CreateReservationForm = () => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+  const [inventorySearch, setInventorySearch] = React.useState<string | null>(
+    null
+  )
+
+  const form = useForm<zod.infer<typeof CreateReservationSchema>>({
+    defaultValues: {
+      inventory_item_id: "",
+      location_id: "",
+      quantity: 0,
+      description: "",
+    },
+    resolver: zodResolver(CreateReservationSchema),
+  })
+
+  const { inventory_items } = useInventoryItems(
+    {
+      q: inventorySearch,
+    },
+    {
+      enabled: !!inventorySearch,
+    }
+  )
+
+  const inventoryItemId = form.watch("inventory_item_id")
+  const selectedInventoryItem = inventory_items?.find(
+    (it) => it.id === inventoryItemId
+  ) as InventoryItemRes["inventory_item"] | undefined
+
+  const locationId = form.watch("location_id")
+  const selectedLocationLevel = selectedInventoryItem?.location_levels?.find(
+    (it) => it.location_id === locationId
+  )
+
+  const quantity = form.watch("quantity")
+
+  const { stock_locations } = useStockLocations(
+    {
+      id:
+        selectedInventoryItem?.location_levels?.map(
+          (level: InventoryNext.InventoryLevelDTO) => level.location_id
+        ) ?? [],
+    },
+    {
+      enabled: !!selectedInventoryItem,
+    }
+  )
+
+  const { mutateAsync, isPending } = useCreateReservationItem()
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(data, {
+      onSuccess: ({ reservation }) => {
+        toast.success(t("general.success"), {
+          dismissLabel: t("actions.close"),
+          description: t("inventory.reservation.successToast"),
+        })
+        handleSuccess(`/reservations/${reservation.id}`)
+      },
+    })
+  })
+
+  return (
+    <RouteFocusModal.Form form={form}>
+      <form onSubmit={handleSubmit}>
+        <RouteFocusModal.Header>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteFocusModal.Close asChild>
+              <Button variant="secondary" size="small">
+                {t("actions.cancel")}
+              </Button>
+            </RouteFocusModal.Close>
+            <Button
+              type="submit"
+              variant="primary"
+              size="small"
+              isLoading={isPending}
+            >
+              {t("actions.reservation")}
+            </Button>
+          </div>
+        </RouteFocusModal.Header>
+        <RouteFocusModal.Body className="flex flex-col items-center pt-[72px]">
+          <div className="flex w-full max-w-[720px] flex-col gap-y-8">
+            <Heading>{t("inventory.reservation.create")}</Heading>
+            <div className="grid grid-cols-2 gap-4">
+              <Form.Field
+                key={"inventory_item_id"}
+                control={form.control}
+                name={"inventory_item_id"}
+                render={({ field: { value, onChange, ...field } }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>
+                        {t("inventory.reservation.itemToReserve")}
+                      </Form.Label>
+                      <Form.Control>
+                        <Combobox
+                          onSearchValueChange={(value: string) =>
+                            setInventorySearch(value)
+                          }
+                          value={value}
+                          onChange={(v) => {
+                            onChange(v)
+                          }}
+                          {...field}
+                          options={(inventory_items ?? []).map(
+                            (inventoryItem) => ({
+                              label: inventoryItem.title ?? inventoryItem.sku!,
+                              value: inventoryItem.id,
+                            })
+                          )}
+                        />
+                      </Form.Control>
+                    </Form.Item>
+                  )
+                }}
+              />
+              <Form.Field
+                key={"location_id"}
+                control={form.control}
+                name={"location_id"}
+                render={({ field: { value, onChange, ...field } }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>{t("fields.location")}</Form.Label>
+                      <Form.Control>
+                        <Combobox
+                          disabled={!!selectedInventoryItem}
+                          value={value}
+                          onChange={(v) => {
+                            onChange(v)
+                          }}
+                          {...field}
+                          options={(stock_locations ?? []).map(
+                            (stockLocation) => ({
+                              label: stockLocation.name,
+                              value: stockLocation.id,
+                            })
+                          )}
+                        />
+                      </Form.Control>
+                    </Form.Item>
+                  )
+                }}
+              />
+            </div>
+            <div className="text-ui-fg-subtle shadow-elevation-card-rest grid grid-rows-4 divide-y rounded-lg border">
+              <AttributeGridRow
+                title={t("fields.title")}
+                value={
+                  selectedInventoryItem?.title ??
+                  selectedInventoryItem?.sku ??
+                  "-"
+                }
+              />
+              <AttributeGridRow
+                title={t("fields.sku")}
+                value={selectedInventoryItem?.sku ?? "-"}
+              />
+              <AttributeGridRow
+                title={t("fields.inStock")}
+                value={selectedLocationLevel?.stocked_quantity ?? "-"}
+              />
+              <AttributeGridRow
+                title={t("inventory.available")}
+                value={
+                  selectedLocationLevel
+                    ? selectedLocationLevel.available_quantity - quantity
+                    : "-"
+                }
+              />
+            </div>
+            <div className="w-full lg:w-1/2">
+              <Form.Field
+                control={form.control}
+                name="quantity"
+                render={({ field: { onChange, value, ...field } }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>{t("fields.quantity")}</Form.Label>
+                      <Form.Control>
+                        <Input
+                          type="number"
+                          placeholder={t(
+                            "inventory.reservation.quantityPlaceholder"
+                          )}
+                          min={0}
+                          max={
+                            selectedLocationLevel
+                              ? selectedLocationLevel.available_quantity
+                              : 0
+                          }
+                          value={value || ""}
+                          onChange={(e) => {
+                            const value = e.target.value
+
+                            if (value === "") {
+                              onChange(null)
+                            } else {
+                              onChange(parseFloat(value))
+                            }
+                          }}
+                          {...field}
+                        />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+            </div>
+            <Form.Field
+              control={form.control}
+              name="description"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label optional>{t("fields.description")}</Form.Label>
+                    <Form.Control>
+                      <Textarea
+                        {...field}
+                        placeholder={t(
+                          "inventory.reservation.descriptionPlaceholder"
+                        )}
+                      />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+          </div>
+        </RouteFocusModal.Body>
+      </form>
+    </RouteFocusModal.Form>
+  )
+}

package/src/v2-routes/reservations/reservation-list/create-reservation/components/create-reservation-form/index.ts

@@ -0,0 +1 @@
+export * from "./create-reservation-form"

package/src/v2-routes/reservations/reservation-list/create-reservation/create-reservation-modal.tsx

@@ -0,0 +1,10 @@
+import { CreateReservationForm } from "./components/create-reservation-form"
+import { RouteFocusModal } from "../../../../components/route-modal"
+
+export const CreateReservationModal = () => {
+  return (
+    <RouteFocusModal>
+      <CreateReservationForm />
+    </RouteFocusModal>
+  )
+}

package/src/v2-routes/reservations/reservation-list/create-reservation/index.ts

@@ -0,0 +1 @@
+export { CreateReservationModal as Component } from "./create-reservation-modal"

package/src/v2-routes/reservations/reservation-list/index.ts

@@ -0,0 +1 @@
+export { ReservationList as Component } from "./reservation-list"

package/src/v2-routes/reservations/reservation-list/reservation-list.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom"
+import { ReservationListTable } from "./components/reservation-list-table"
+
+export const ReservationList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <ReservationListTable />
+      <Outlet />
+    </div>
+  )
+}