@medusajs/dashboard 0.0.1

package/src/v2-routes/regions/region-list/components/region-list-table/region-list-table.tsx

@@ -0,0 +1,163 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { RegionDTO } from "@medusajs/types"
+import { Button, Container, Heading, usePrompt, toast } from "@medusajs/ui"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+import { keepPreviousData } from "@tanstack/react-query"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { DataTable } from "../../../../../components/table/data-table"
+import { useDeleteRegion, useRegions } from "../../../../../hooks/api/regions"
+import { useRegionTableColumns } from "../../../../../hooks/table/columns/use-region-table-columns"
+import { useRegionTableFilters } from "../../../../../hooks/table/filters/use-region-table-filters"
+import { useRegionTableQuery } from "../../../../../hooks/table/query/use-region-table-query"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+
+const PAGE_SIZE = 20
+
+export const RegionListTable = () => {
+  const { t } = useTranslation()
+
+  const { searchParams, raw } = useRegionTableQuery({ pageSize: PAGE_SIZE })
+  const {
+    regions,
+    count,
+    isPending: isLoading,
+    isError,
+    error,
+  } = useRegions(
+    {
+      ...searchParams,
+      fields: "*payment_providers",
+    },
+    {
+      placeholderData: keepPreviousData,
+    }
+  )
+
+  const filters = useRegionTableFilters()
+  const columns = useColumns()
+
+  const { table } = useDataTable({
+    data: (regions ?? []) as RegionDTO[],
+    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 level="h2">{t("regions.domain")}</Heading>
+        <Link to="/settings/regions/create">
+          <Button size="small" variant="secondary">
+            {t("actions.create")}
+          </Button>
+        </Link>
+      </div>
+
+      <DataTable
+        table={table}
+        columns={columns}
+        count={count}
+        pageSize={PAGE_SIZE}
+        isLoading={isLoading}
+        filters={filters}
+        orderBy={["name", "created_at", "updated_at"]}
+        navigateTo={(row) => `${row.original.id}`}
+        pagination
+        search
+        queryObject={raw}
+      />
+    </Container>
+  )
+}
+
+const RegionActions = ({ region }: { region: RegionDTO }) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = useDeleteRegion(region.id)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("regions.deleteRegionWarning", {
+        name: region.name,
+      }),
+      verificationText: region.name,
+      verificationInstruction: t("general.typeToConfirm"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    try {
+      await mutateAsync(undefined)
+      toast.success(t("general.success"), {
+        description: t("regions.toast.delete"),
+        dismissLabel: t("actions.close"),
+      })
+    } catch (e) {
+      toast.error(t("general.error"), {
+        description: e.message,
+        dismissLabel: t("actions.close"),
+      })
+    }
+  }
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              label: t("actions.edit"),
+              to: `/settings/regions/${region.id}/edit`,
+              icon: <PencilSquare />,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              label: t("actions.delete"),
+              onClick: handleDelete,
+              icon: <Trash />,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+const columnHelper = createColumnHelper<RegionDTO>()
+
+const useColumns = () => {
+  const base = useRegionTableColumns()
+
+  return useMemo(
+    () => [
+      ...base,
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return <RegionActions region={row.original} />
+        },
+      }),
+    ],
+    [base]
+  )
+}

package/src/v2-routes/regions/region-list/index.ts

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

package/src/v2-routes/regions/region-list/region-list.tsx

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

package/src/v2-routes/reservations/reservation-detail/components/edit-reservation/components/edit-reservation-form.tsx

@@ -0,0 +1,208 @@
+import * as zod from "zod"
+
+import { Button, Input, Select, Text, Textarea, toast } from "@medusajs/ui"
+import { InventoryNext, StockLocationDTO } from "@medusajs/types"
+import {
+  RouteDrawer,
+  useRouteModal,
+} from "../../../../../../components/route-modal"
+
+import { Form } from "../../../../../../components/common/form"
+import { InventoryItemRes } from "../../../../../../types/api-responses"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { useUpdateReservationItem } from "../../../../../../hooks/api/reservations"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+type EditReservationFormProps = {
+  reservation: InventoryNext.ReservationItemDTO
+  locations: StockLocationDTO[]
+  item: InventoryItemRes["inventory_item"]
+}
+
+const EditReservationSchema = z.object({
+  location_id: z.string(),
+  description: z.string().optional(),
+  quantity: z.number().min(1),
+})
+
+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>
+  )
+}
+
+const getDefaultValues = (reservation: InventoryNext.ReservationItemDTO) => {
+  return {
+    quantity: reservation.quantity,
+    location_id: reservation.location_id,
+    description: reservation.description ?? undefined,
+  }
+}
+
+export const EditReservationForm = ({
+  reservation,
+  item,
+  locations,
+}: EditReservationFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<zod.infer<typeof EditReservationSchema>>({
+    defaultValues: getDefaultValues(reservation),
+    resolver: zodResolver(EditReservationSchema),
+  })
+
+  const { mutateAsync } = useUpdateReservationItem(reservation.id)
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    mutateAsync(values as any, {
+      onSuccess: () => {
+        handleSuccess()
+        toast.success(t("general.success"), {
+          dismissLabel: t("actions.close"),
+          description: t("inventory.reservation.updateSuccessToast"),
+        })
+      },
+    })
+  })
+
+  const reservedQuantity = form.watch("quantity")
+  const locationId = form.watch("location_id")
+
+  const level = item.location_levels!.find(
+    (level: InventoryNext.InventoryLevelDTO) => level.location_id === locationId
+  )
+
+  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-8 overflow-auto">
+          <Form.Field
+            control={form.control}
+            name="location_id"
+            render={({ field: { onChange, value, ref, ...field } }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("inventory.reservation.location")}</Form.Label>
+                  <Form.Control>
+                    <Select
+                      value={value}
+                      onValueChange={(v) => {
+                        onChange(v)
+                      }}
+                      {...field}
+                    >
+                      <Select.Trigger ref={ref}>
+                        <Select.Value />
+                      </Select.Trigger>
+                      <Select.Content>
+                        {(locations || []).map((r) => (
+                          <Select.Item key={r.id} value={r.id}>
+                            {r.name}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select>
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <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={item.title ?? item.sku!}
+            />
+            <AttributeGridRow title={t("fields.sku")} value={item.sku!} />
+            <AttributeGridRow
+              title={t("fields.inStock")}
+              value={level!.stocked_quantity}
+            />
+            <AttributeGridRow
+              title={t("inventory.available")}
+              value={level!.stocked_quantity - reservedQuantity}
+            />
+          </div>
+          <Form.Field
+            control={form.control}
+            name="quantity"
+            render={({ field: { onChange, value, ...field } }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("inventory.reservation.reservedAmount")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Input
+                      type="number"
+                      min={0}
+                      max={level!.available_quantity + reservation.quantity}
+                      value={value || ""}
+                      onChange={(e) => {
+                        const value = e.target.value
+
+                        if (value === "") {
+                          onChange(null)
+                        } else {
+                          onChange(parseFloat(value))
+                        }
+                      }}
+                      {...field}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="description"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label optional>{t("fields.description")}</Form.Label>
+                  <Form.Control>
+                    <Textarea {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </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/reservations/reservation-detail/components/edit-reservation/components/index.tsx

@@ -0,0 +1 @@
+export { EditReservationForm as Component } from "./edit-reservation-form"

package/src/v2-routes/reservations/reservation-detail/components/edit-reservation/edit-reservation-modal.tsx

@@ -0,0 +1,53 @@
+import { EditReservationForm } from "./components/edit-reservation-form"
+import { Heading } from "@medusajs/ui"
+import { InventoryNext } from "@medusajs/types"
+import { RouteDrawer } from "../../../../../components/route-modal"
+import { useInventoryItem } from "../../../../../hooks/api/inventory"
+import { useParams } from "react-router-dom"
+import { useReservationItem } from "../../../../../hooks/api/reservations"
+import { useStockLocations } from "../../../../../hooks/api/stock-locations"
+import { useTranslation } from "react-i18next"
+
+export const ReservationEdit = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { reservation, isPending, isError, error } = useReservationItem(id!)
+  const { inventory_item: inventoryItem } = useInventoryItem(
+    reservation?.inventory_item_id!,
+    {
+      enabled: !!reservation,
+    }
+  )
+
+  const { stock_locations } = useStockLocations(
+    {
+      id: inventoryItem?.location_levels?.map(
+        (l: InventoryNext.InventoryLevelDTO) => l.location_id
+      ),
+    },
+    {
+      enabled: !!inventoryItem?.location_levels,
+    }
+  )
+
+  const ready = !isPending && reservation && inventoryItem && stock_locations
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("inventory.reservation.editItemDetails")}</Heading>
+      </RouteDrawer.Header>
+      {ready && (
+        <EditReservationForm
+          locations={stock_locations}
+          reservation={reservation}
+          item={inventoryItem}
+        />
+      )}
+    </RouteDrawer>
+  )
+}

package/src/v2-routes/reservations/reservation-detail/components/edit-reservation/index.ts

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

package/src/v2-routes/reservations/reservation-detail/components/reservation-general-section/index.ts

@@ -0,0 +1 @@
+export * from "./reservation-general-section"

package/src/v2-routes/reservations/reservation-detail/components/reservation-general-section/reservation-general-section.tsx

@@ -0,0 +1,89 @@
+import { AdminReservationResponse, StockLocationDTO } from "@medusajs/types"
+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 { useInventoryItem } from "../../../../../hooks/api/inventory"
+import { useStockLocation } from "../../../../../hooks/api/stock-locations"
+import { useTranslation } from "react-i18next"
+
+type ReservationGeneralSectionProps = {
+  reservation: AdminReservationResponse["reservation"]
+}
+
+export const ReservationGeneralSection = ({
+  reservation,
+}: ReservationGeneralSectionProps) => {
+  const { t } = useTranslation()
+
+  const { inventory_item: inventoryItem, isPending: isLoadingInventoryItem } =
+    useInventoryItem(reservation.inventory_item_id)
+
+  const { stock_location: location, isPending: isLoadingLocation } =
+    useStockLocation(reservation.location_id)
+
+  if (
+    isLoadingInventoryItem ||
+    !inventoryItem ||
+    isLoadingLocation ||
+    !location
+  ) {
+    return <div>Loading...</div>
+  }
+
+  const locationLevel = inventoryItem.location_levels!.find(
+    (l: InventoryNext.InventoryLevelDTO) =>
+      l.location_id === reservation.location_id
+  )
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>
+          {t("inventory.reservation.header", {
+            itemName: inventoryItem.title ?? inventoryItem.sku,
+          })}
+        </Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  icon: <PencilSquare />,
+                  label: t("actions.edit"),
+                  to: `edit`,
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <SectionRow
+        title={t("inventory.reservation.orderID")}
+        value={reservation.line_item_id} // TODO fetch order
+      />
+      <SectionRow
+        title={t("inventory.reservation.description")}
+        value={reservation.description}
+      />
+      <SectionRow
+        title={t("inventory.reservation.location")}
+        value={location?.name}
+      />
+      <SectionRow
+        title={t("inventory.reservation.inStockAtLocation")}
+        value={locationLevel?.stocked_quantity}
+      />
+      <SectionRow
+        title={t("inventory.reservation.availableAtLocation")}
+        value={locationLevel?.available_quantity}
+      />
+      <SectionRow
+        title={t("inventory.reservation.reservedAtLocation")}
+        value={reservation.quantity}
+      />
+    </Container>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { ReservationDetail as Component } from "./reservation-edit"
+export { reservationItemLoader as loader } from "./loader"

package/src/v2-routes/reservations/reservation-detail/loader.ts

@@ -0,0 +1,20 @@
+import { LoaderFunctionArgs } from "react-router-dom"
+import { ReservationItemRes } from "../../../types/api-responses"
+import { client } from "../../../lib/client"
+import { queryClient } from "../../../lib/medusa"
+import { reservationItemsQueryKeys } from "../../../hooks/api/reservations"
+
+const reservationDetailQuery = (id: string) => ({
+  queryKey: reservationItemsQueryKeys.detail(id),
+  queryFn: async () => client.reservations.retrieve(id),
+})
+
+export const reservationItemLoader = async ({ params }: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = reservationDetailQuery(id!)
+
+  return (
+    queryClient.getQueryData<ReservationItemRes>(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}

package/src/v2-routes/reservations/reservation-detail/reservation-edit.tsx

@@ -0,0 +1,53 @@
+import { Outlet, useLoaderData, useParams } from "react-router-dom"
+
+import { InventoryItemGeneralSection } from "../../inventory/inventory-detail/components/inventory-item-general-section"
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { ReservationGeneralSection } from "./components/reservation-general-section"
+import { reservationItemLoader } from "./loader"
+import { useReservationItem } from "../../../hooks/api/reservations"
+
+export const ReservationDetail = () => {
+  const { id } = useParams()
+
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<typeof reservationItemLoader>
+  >
+
+  const { reservation, isLoading, isError, error } = useReservationItem(
+    id!,
+    {},
+    {
+      initialData,
+    }
+  )
+
+  if (isLoading || !reservation) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <div className="flex flex-col gap-x-4 lg:flex-row lg:items-start">
+        <div className="flex w-full flex-col gap-y-2">
+          <ReservationGeneralSection reservation={reservation} />
+          <div className="hidden lg:block">
+            <JsonViewSection data={reservation} />
+          </div>
+        </div>
+        <div className="mt-2 flex w-full max-w-[100%] flex-col gap-y-2 lg:mt-0 lg:max-w-[400px]">
+          <InventoryItemGeneralSection
+            inventoryItem={reservation.inventory_item}
+          />
+          <div className="lg:hidden">
+            <JsonViewSection data={reservation} />
+          </div>
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1 @@
+export * from "./reservation-list-table"

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

@@ -0,0 +1,57 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { ExtendedReservationItem } from "@medusajs/medusa"
+import { useDeleteReservationItem } from "../../../../../hooks/api/reservations"
+import { usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+export const ReservationActions = ({
+  reservation,
+}: {
+  reservation: ExtendedReservationItem
+}) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const { mutateAsync } = useDeleteReservationItem(reservation.id)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("reservations.deleteWarning"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync()
+  }
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              label: t("actions.edit"),
+              to: `${reservation.id}/edit`,
+              icon: <PencilSquare />,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              label: t("actions.delete"),
+              onClick: handleDelete,
+              icon: <Trash />,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}