diff --git a/packages/admin-next/admin-shared/src/extensions/widgets/constants.ts b/packages/admin-next/admin-shared/src/extensions/widgets/constants.ts index 73e83f675896e..9a3a4ab313b25 100644 --- a/packages/admin-next/admin-shared/src/extensions/widgets/constants.ts +++ b/packages/admin-next/admin-shared/src/extensions/widgets/constants.ts @@ -189,6 +189,15 @@ const RETURN_REASON_INJECTION_ZONES = [ "return_reason.list.after", ] as const +const INVENTORY_ITEM_INJECTION_ZONES = [ + "inventory_item.details.before", + "inventory_item.details.after", + "inventory_item.details.side.before", + "inventory_item.details.side.after", + "inventory_item.list.before", + "inventory_item.list.after", +] as const + /** * All valid injection zones in the admin panel. An injection zone is a specific place * in the admin panel where a plugin can inject custom widgets. @@ -220,4 +229,5 @@ export const INJECTION_ZONES = [ ...PRODUCT_TYPE_INJECTION_ZONES, ...PRODUCT_TAG_INJECTION_ZONES, ...RETURN_REASON_INJECTION_ZONES, + ...INVENTORY_ITEM_INJECTION_ZONES, ] as const diff --git a/packages/admin-next/dashboard/src/components/table/table-cells/common/text-cell/text-cell.tsx b/packages/admin-next/dashboard/src/components/table/table-cells/common/text-cell/text-cell.tsx index a8694cce148d0..2804ef110cc2b 100644 --- a/packages/admin-next/dashboard/src/components/table/table-cells/common/text-cell/text-cell.tsx +++ b/packages/admin-next/dashboard/src/components/table/table-cells/common/text-cell/text-cell.tsx @@ -1,28 +1,48 @@ +import { clx } from "@medusajs/ui" +import { ConditionalTooltip } from "../../../../common/conditional-tooltip" import { PlaceholderCell } from "../placeholder-cell" type CellProps = { text?: string | number + align?: "left" | "center" | "right" + maxWidth?: number } type HeaderProps = { text: string + align?: "left" | "center" | "right" } -export const TextCell = ({ text }: CellProps) => { +export const TextCell = ({ text, align = "left", maxWidth = 220 }: CellProps) => { if (!text) { return } + const stringLength = text.toString().length + return ( -
+ 20}> +
{text}
+
) } -export const TextHeader = ({ text }: HeaderProps) => { +export const TextHeader = ({ text, align = "left" }: HeaderProps) => { return ( -
+
{text}
) diff --git a/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-variants/variants-section.tsx b/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-variants/variants-section.tsx index c26e2c00d634f..2e219bb2ceb47 100644 --- a/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-variants/variants-section.tsx +++ b/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-variants/variants-section.tsx @@ -1,7 +1,7 @@ -import { Container, Heading, IconButton } from "@medusajs/ui" +import { TriangleRightMini } from "@medusajs/icons" +import { Container, Heading } from "@medusajs/ui" import { useTranslation } from "react-i18next" -import { ArrowUpRightOnBox } from "@medusajs/icons" -import { useNavigate } from "react-router-dom" +import { Link } from "react-router-dom" import { ProductVariantDTO } from "@medusajs/types" import { Thumbnail } from "../../../../../components/common/thumbnail" @@ -14,7 +14,6 @@ export const InventoryItemVariantsSection = ({ variants, }: InventoryItemVariantsSectionProps) => { const { t } = useTranslation() - const navigate = useNavigate() if (!variants?.length) { return null @@ -27,38 +26,46 @@ export const InventoryItemVariantsSection = ({
- {variants.map((variant) => ( -
-
-
- -
-
- - {variant.title} - - - {variant.options.map((o) => o.value).join(" ⋅ ")} - + {variants.map((variant) => { + const link = variant.product + ? `/products/${variant.product.id}/variants/${variant.id}` + : null + + const Inner = ( +
+
+
+ +
+
+ + {variant.title} + + + {variant.options.map((o) => o.value).join(" ⋅ ")} + +
+
+ +
- - navigate( - `/products/${variant.product.id}/variants/${variant.id}` - ) - } - > - -
-
- ))} + ) + + if (!link) { + return
{Inner}
+ } + + return ( + + {Inner} + + ) + })}
) diff --git a/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/reservations-table/use-reservation-list-table-columns.tsx b/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/reservations-table/use-reservation-list-table-columns.tsx index 997c2806cbea2..4e9ffd4125f51 100644 --- a/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/reservations-table/use-reservation-list-table-columns.tsx +++ b/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/reservations-table/use-reservation-list-table-columns.tsx @@ -1,10 +1,11 @@ import { HttpTypes } from "@medusajs/types" -import { PlaceholderCell } from "../../../../../components/table/table-cells/common/placeholder-cell" -import { ReservationActions } from "./reservation-actions" import { createColumnHelper } from "@tanstack/react-table" import { useMemo } from "react" import { useTranslation } from "react-i18next" import { CreatedAtCell } from "../../../../../components/table/table-cells/common/created-at-cell" +import { PlaceholderCell } from "../../../../../components/table/table-cells/common/placeholder-cell" +import { TextCell, TextHeader } from "../../../../../components/table/table-cells/common/text-cell" +import { ReservationActions } from "./reservation-actions" /** * Adds missing properties to the InventoryItemDTO type. @@ -22,17 +23,16 @@ export const useReservationTableColumn = ({ sku }: { sku: string }) => { return useMemo( () => [ columnHelper.display({ - header: t("fields.sku"), + id: "sku", + header: () => , cell: () => { return ( -
- {sku} -
+ ) }, }), columnHelper.accessor("line_item.order_id", { - header: t("inventory.reservation.orderID"), + header: () => , cell: ({ getValue }) => { const orderId = getValue() @@ -41,14 +41,12 @@ export const useReservationTableColumn = ({ sku }: { sku: string }) => { } return ( -
- {orderId} -
+ ) }, }), columnHelper.accessor("description", { - header: t("fields.description"), + header: () => , cell: ({ getValue }) => { const description = getValue() @@ -57,14 +55,12 @@ export const useReservationTableColumn = ({ sku }: { sku: string }) => { } return ( -
- {description} -
+ ) }, }), columnHelper.accessor("location.name", { - header: t("inventory.reservation.location"), + header: () => , cell: ({ getValue }) => { const location = getValue() @@ -73,16 +69,20 @@ export const useReservationTableColumn = ({ sku }: { sku: string }) => { } return ( -
- {location} -
+ ) }, }), columnHelper.accessor("created_at", { - header: t("fields.createdAt"), + header: () => , cell: ({ getValue }) => , }), + columnHelper.accessor("quantity", { + header: () => , + cell: ({ getValue }) => { + return + }, + }), columnHelper.display({ id: "actions", cell: ({ row }) => , diff --git a/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx b/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx index 8929e48aaa489..f5d5ea406d1af 100644 --- a/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx +++ b/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/inventory-detail.tsx @@ -1,14 +1,20 @@ -import { Outlet, json, useLoaderData, useParams } from "react-router-dom" +import { useLoaderData, useParams } from "react-router-dom" +import { TwoColumnPageSkeleton } from "../../../components/common/skeleton" +import { TwoColumnPage } from "../../../components/layout/pages" +import { useInventoryItem } from "../../../hooks/api/inventory" import { InventoryItemAttributeSection } from "./components/inventory-item-attributes/attributes-section" import { InventoryItemGeneralSection } from "./components/inventory-item-general-section" import { InventoryItemLocationLevelsSection } from "./components/inventory-item-location-levels" import { InventoryItemReservationsSection } from "./components/inventory-item-reservations" -import { JsonViewSection } from "../../../components/common/json-view-section" -import { useInventoryItem } from "../../../hooks/api/inventory" import { InventoryItemVariantsSection } from "./components/inventory-item-variants/variants-section" import { inventoryItemLoader } from "./loader" +import after from "virtual:medusa/widgets/inventory_item/details/after" +import before from "virtual:medusa/widgets/inventory_item/details/before" +import sideAfter from "virtual:medusa/widgets/inventory_item/details/side/after" +import sideBefore from "virtual:medusa/widgets/inventory_item/details/side/before" + export const InventoryDetail = () => { const { id } = useParams() @@ -31,37 +37,45 @@ export const InventoryDetail = () => { } ) - if (isLoading) { - return
Loading...
+ if (isLoading || !inventory_item) { + return ( + + ) } - if (isError || !inventory_item) { - if (error) { - throw error - } - throw json("An unknown error occurred", 500) + if (isError) { + throw error } return ( -
-
-
- - - -
- -
- -
-
- - -
- -
-
-
-
+ + + + + + + + + + + ) }