@medusajs/dashboard 0.0.1

package/src/routes/gift-cards/gift-card-list/components/gift-card-list-table/use-gift-card-table-columns.tsx

@@ -0,0 +1,136 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { GiftCard } from "@medusajs/medusa"
+import { Badge, usePrompt } from "@medusajs/ui"
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { useAdminDeleteGiftCard } from "medusa-react"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { DateCell } from "../../../../../components/table/table-cells/common/date-cell"
+import { MoneyAmountCell } from "../../../../../components/table/table-cells/common/money-amount-cell"
+import { StatusCell } from "../../../../../components/table/table-cells/common/status-cell"
+import { DisplayIdCell } from "../../../../../components/table/table-cells/order/display-id-cell"
+
+const columnHelper = createColumnHelper<GiftCard>()
+
+export const useGiftCardTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("code", {
+        header: t("fields.code"),
+        cell: ({ getValue }) => {
+          return (
+            <Badge size="2xsmall" className="overflow-hidden truncate">
+              {getValue()}
+            </Badge>
+          )
+        },
+      }),
+      columnHelper.accessor("order", {
+        header: t("fields.order"),
+        cell: ({ getValue }) => {
+          const order = getValue()
+          return <DisplayIdCell displayId={order?.display_id} />
+        },
+      }),
+      columnHelper.accessor("region", {
+        header: t("fields.region"),
+        cell: ({ row }) => {
+          return row.original.region.name
+        },
+      }),
+      columnHelper.accessor("is_disabled", {
+        header: t("fields.status"),
+        cell: ({ getValue }) => {
+          const isDisabled = getValue()
+
+          return (
+            <StatusCell color={isDisabled ? "red" : "green"}>
+              {isDisabled ? t("general.disabled") : t("general.enabled")}
+            </StatusCell>
+          )
+        },
+      }),
+      columnHelper.accessor("created_at", {
+        header: t("fields.dateIssued"),
+        cell: ({ getValue }) => {
+          return <DateCell date={getValue()} />
+        },
+      }),
+      columnHelper.accessor("value", {
+        header: t("giftCards.initialBalance"),
+        cell: ({ getValue, row }) => {
+          const currencyCode = row.original.region.currency_code
+          const value = getValue()
+
+          return <MoneyAmountCell amount={value} currencyCode={currencyCode} />
+        },
+      }),
+      columnHelper.accessor("balance", {
+        header: t("giftCards.currentBalance"),
+        cell: ({ getValue, row }) => {
+          const currencyCode = row.original.region.currency_code
+          const value = getValue()
+
+          return <MoneyAmountCell amount={value} currencyCode={currencyCode} />
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => <GiftCardActions giftCard={row.original} />,
+      }),
+    ],
+    [t]
+  ) as ColumnDef<GiftCard>[]
+}
+
+const GiftCardActions = ({ giftCard }: { giftCard: GiftCard }) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = useAdminDeleteGiftCard(giftCard.id)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("giftCards.deleteGiftCardWarning", {
+        code: giftCard.code,
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync()
+  }
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              icon: <PencilSquare />,
+              label: t("actions.edit"),
+              to: `/gift-cards/${giftCard.id}/edit`,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              icon: <Trash />,
+              label: t("actions.delete"),
+              onClick: handleDelete,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}

package/src/routes/gift-cards/gift-card-list/components/gift-card-list-table/use-gift-card-table-filters.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../../../components/table/data-table"
+
+export const useGiftCardTableFilters = () => {
+  const { t } = useTranslation()
+
+  let filters: Filter[] = []
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  filters = [...filters, ...dateFilters]
+
+  return filters
+}

package/src/routes/gift-cards/gift-card-list/components/gift-card-list-table/use-gift-card-table-query.tsx

@@ -0,0 +1,19 @@
+import { AdminGetGiftCardsParams } from "@medusajs/medusa"
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+
+export const useGiftCardTableQuery = ({ pageSize }: { pageSize: number }) => {
+  const queryObject = useQueryParams(["offset", "q"])
+
+  const { offset, q } = queryObject
+
+  const searchParams: AdminGetGiftCardsParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}

package/src/routes/gift-cards/gift-card-list/gift-card-list.tsx

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

package/src/routes/gift-cards/gift-card-list/index.ts

@@ -0,0 +1 @@
+export { GiftCardList as Component } from "./gift-card-list"

package/src/routes/home/home.tsx

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+export const Home = () => {
+  const navigate = useNavigate();
+
+  // Currently, the home page simply redirects to the orders page
+  useEffect(() => {
+    navigate("/orders", { replace: true });
+  }, [navigate]);
+
+  return <div />;
+};

package/src/routes/home/index.ts

@@ -0,0 +1 @@
+export { Home as Component } from "./home";

package/src/routes/inventory/inventory-list/components/inventory-list-table/index.ts

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

package/src/routes/inventory/inventory-list/components/inventory-list-table/inventory-actions.tsx

@@ -0,0 +1,52 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { InventoryItemDTO } from "@medusajs/types"
+import { usePrompt } from "@medusajs/ui"
+import { useAdminDeleteInventoryItem } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+
+export const InventoryActions = ({ item }: { item: InventoryItemDTO }) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const { mutateAsync } = useAdminDeleteInventoryItem(item.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: `${item.id}/edit`,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              icon: <Trash />,
+              label: t("actions.delete"),
+              onClick: handleDelete,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}

package/src/routes/inventory/inventory-list/components/inventory-list-table/inventory-list-table.tsx

@@ -0,0 +1,64 @@
+import { Container, Heading } from "@medusajs/ui"
+import { useAdminInventoryItems } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { DataTable } from "../../../../../components/table/data-table"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useInventoryTableColumns } from "./use-inventory-table-columns"
+import { useInventoryTableFilters } from "./use-inventory-table-filters"
+import { useInventoryTableQuery } from "./use-inventory-table-query"
+
+const PAGE_SIZE = 20
+
+export const InventoryListTable = () => {
+  const { t } = useTranslation()
+
+  const { searchParams, raw } = useInventoryTableQuery({
+    pageSize: PAGE_SIZE,
+  })
+  const { inventory_items, count, isLoading, isError, error } =
+    useAdminInventoryItems(
+      {
+        ...searchParams,
+      },
+      {
+        keepPreviousData: true,
+      }
+    )
+
+  const filters = useInventoryTableFilters()
+  const columns = useInventoryTableColumns()
+
+  const { table } = useDataTable({
+    data: inventory_items || [],
+    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("inventory.domain")}</Heading>
+      </div>
+      <DataTable
+        table={table}
+        columns={columns}
+        pageSize={PAGE_SIZE}
+        count={count}
+        isLoading={isLoading}
+        pagination
+        search
+        filters={filters}
+        queryObject={raw}
+        orderBy={["title", "sku", "stocked_quantity", "reserved_quantity"]}
+        navigateTo={(row) => `${row.id}`}
+      />
+    </Container>
+  )
+}

package/src/routes/inventory/inventory-list/components/inventory-list-table/use-inventory-table-columns.tsx

@@ -0,0 +1,118 @@
+import { ProductVariant } from "@medusajs/medusa"
+import { InventoryItemDTO } from "@medusajs/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { PlaceholderCell } from "../../../../../components/table/table-cells/common/placeholder-cell"
+import { InventoryActions } from "./inventory-actions"
+
+/**
+ * Adds missing properties to the InventoryItemDTO type.
+ */
+interface ExtendedInventoryItem extends InventoryItemDTO {
+  variants?: ProductVariant[] | null
+  stocked_quantity?: number
+  reserved_quantity?: number
+}
+
+const columnHelper = createColumnHelper<ExtendedInventoryItem>()
+
+export const useInventoryTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("title", {
+        header: t("fields.title"),
+        cell: ({ getValue }) => {
+          const title = getValue()
+
+          if (!title) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <span className="truncate">{title}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("sku", {
+        header: t("fields.sku"),
+        cell: ({ getValue }) => {
+          const sku = getValue()
+
+          if (!sku) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <span className="truncate">{sku}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("variants", {
+        header: t("fields.variant"),
+        cell: ({ getValue }) => {
+          const variants = getValue()
+
+          if (!variants || variants.length === 0) {
+            return <PlaceholderCell />
+          }
+
+          /**
+           * There is always only one variant despite it being an array,
+           * so we can safely access the first element.
+           */
+          const variant = variants[0]
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <span className="truncate">{variant.title}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("reserved_quantity", {
+        header: t("inventory.reserved"),
+        cell: ({ getValue }) => {
+          const quantity = getValue()
+
+          if (!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 quantity = getValue()
+
+          if (!quantity) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex size-full items-center overflow-hidden">
+              <span className="truncate">{quantity}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => <InventoryActions item={row.original} />,
+      }),
+    ],
+    [t]
+  )
+}

package/src/routes/inventory/inventory-list/components/inventory-list-table/use-inventory-table-filters.tsx

@@ -0,0 +1,82 @@
+import { useAdminStockLocations } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../../../components/table/data-table"
+
+export const useInventoryTableFilters = () => {
+  const { t } = useTranslation()
+  const { stock_locations } = useAdminStockLocations({
+    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: "string",
+    key: "material",
+    label: t("fields.material"),
+  })
+
+  filters.push({
+    type: "string",
+    key: "sku",
+    label: t("fields.sku"),
+  })
+
+  filters.push({
+    type: "string",
+    key: "mid_code",
+    label: t("fields.midCode"),
+  })
+
+  filters.push({
+    type: "number",
+    key: "height",
+    label: t("fields.height"),
+  })
+
+  filters.push({
+    type: "number",
+    key: "width",
+    label: t("fields.width"),
+  })
+
+  filters.push({
+    type: "number",
+    key: "length",
+    label: t("fields.length"),
+  })
+
+  filters.push({
+    type: "number",
+    key: "weight",
+    label: t("fields.weight"),
+  })
+
+  filters.push({
+    type: "select",
+    options: [
+      { label: t("fields.true"), value: "true" },
+      { label: t("fields.false"), value: "false" },
+    ],
+    key: "requires_shipping",
+    multiple: false,
+    label: t("fields.requiresShipping"),
+  })
+
+  return filters
+}

package/src/routes/inventory/inventory-list/components/inventory-list-table/use-inventory-table-query.tsx

@@ -0,0 +1,57 @@
+import { AdminGetInventoryItemsParams } from "@medusajs/medusa"
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+
+export const useInventoryTableQuery = ({
+  pageSize = 20,
+  prefix,
+}: {
+  pageSize?: number
+  prefix?: string
+}) => {
+  const raw = useQueryParams(
+    [
+      "location_id",
+      "q",
+      "order",
+      "requires_shipping",
+      "offset",
+      "sku",
+      "material",
+      "mid_code",
+      "order",
+      "weight",
+      "width",
+      "length",
+      "height",
+    ],
+    prefix
+  )
+
+  const {
+    offset,
+    weight,
+    width,
+    length,
+    height,
+    requires_shipping,
+    ...params
+  } = raw
+
+  const searchParams: AdminGetInventoryItemsParams = {
+    limit: pageSize,
+    offset: offset ? parseInt(offset) : undefined,
+    weight: weight ? JSON.parse(weight) : undefined,
+    width: width ? JSON.parse(width) : undefined,
+    length: length ? JSON.parse(length) : undefined,
+    height: height ? JSON.parse(height) : undefined,
+    requires_shipping: requires_shipping
+      ? JSON.parse(requires_shipping)
+      : undefined,
+    ...params,
+  }
+
+  return {
+    searchParams,
+    raw,
+  }
+}

package/src/routes/inventory/inventory-list/index.ts

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

package/src/routes/inventory/inventory-list/inventory-list.tsx

@@ -0,0 +1,9 @@
+import { InventoryListTable } from "./components/inventory-list-table"
+
+export const InventoryList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <InventoryListTable />
+    </div>
+  )
+}

package/src/routes/invite/index.ts

@@ -0,0 +1 @@
+export { Invite as Component } from "./invite"