feat(dashboard): manage inventory placeholder (#9190)

**What**
- add placeholder on variant details when inventor is not managed

---
![Screenshot 2024-09-19 at 10 35 55](https://github.com/user-attachments/assets/c731565d-5525-4537-b9a8-8bd6b74ca3bd)
---

CLOSES CC-127

packages/admin/dashboard/src/i18n/translations/en.json

@@ -546,6 +546,7 @@
       "inventory": {
         "notManaged": "Not managed",
         "manageItems": "Manage inventory items",
+        "notManagedDesc":"Inventory is not managed for this variant. Turn on ‘Manage Inventory’ to track the variant's inventory.",
         "manageKit": "Manage inventory kit",
         "navigateToItem": "Go to inventory item",
         "actions": {

packages/admin/dashboard/src/routes/orders/order-detail/components/order-active-edit-section/order-active-edit-section.tsx

@@ -33,7 +33,9 @@ function EditItem({
 
         <Thumbnail src={item.thumbnail} />
 
-        <span className="txt-small txt-subtile font-medium">{item.title}</span>
+        <span className="txt-small text-ui-fg-subtle font-medium">
+          {item.title}
+        </span>
 
         {item.variant_sku && " · "}
 

packages/admin/dashboard/src/routes/product-variants/product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx

@@ -2,24 +2,23 @@ import { useTranslation } from "react-i18next"
 
 import { Buildings, Component } from "@medusajs/icons"
 import { Container, Heading } from "@medusajs/ui"
-import { InventoryItemDTO } from "@medusajs/types"
+import { HttpTypes } from "@medusajs/types"
 
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { DataTable } from "../../../../../components/table/data-table"
 
 import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useInventoryTableColumns } from "./use-inventory-table-columns"
+import { LinkButton } from "../../../../../components/common/link-button"
 
 const PAGE_SIZE = 20
 
 type VariantInventorySectionProps = {
-  inventoryItems: InventoryItemDTO[]
+  inventoryItems: HttpTypes.AdminInventoryItem[]
-  manageInventory?: boolean
 }
 
 export function VariantInventorySection({
   inventoryItems,
-  manageInventory,
 }: VariantInventorySectionProps) {
   const { t } = useTranslation()
 
@@ -43,25 +42,23 @@ export function VariantInventorySection({
           <Heading level="h2">{t("fields.inventoryItems")}</Heading>
         </div>
         <div className="flex items-center gap-x-4">
-          {manageInventory && (
+          <ActionMenu
-            <ActionMenu
+            groups={[
-              groups={[
+              {
-                {
+                actions: [
-                  actions: [
+                  {
-                    {
+                    label: t(
-                      label: t(
+                      hasKit
-                        hasKit
+                        ? "products.variant.inventory.manageKit"
-                          ? "products.variant.inventory.manageKit"
+                        : "products.variant.inventory.manageItems"
-                          : "products.variant.inventory.manageItems"
+                    ),
-                      ),
+                    to: "manage-items",
-                      to: "manage-items",
+                    icon: hasKit ? <Component /> : <Buildings />,
-                      icon: hasKit ? <Component /> : <Buildings />,
+                  },
-                    },
+                ],
-                  ],
+              },
-                },
+            ]}
-              ]}
+          />
-            />
-          )}
         </div>
       </div>
 
@@ -75,3 +72,23 @@ export function VariantInventorySection({
     </Container>
   )
 }
+
+export function InventorySectionPlaceholder() {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div className="flex flex-col gap-1">
+          <Heading level="h2">{t("fields.inventoryItems")}</Heading>
+          <span className="txt-small text-ui-fg-subtle">
+            {t("products.variant.inventory.notManagedDesc")}
+          </span>
+        </div>
+        <div className="flex items-center gap-x-4">
+          <LinkButton to="edit">{t("products.variant.edit.header")}</LinkButton>
+        </div>
+      </div>
+    </Container>
+  )
+}

packages/admin/dashboard/src/routes/product-variants/product-variant-detail/product-variant-detail.tsx

@@ -6,7 +6,10 @@ import { useProductVariant } from "../../../hooks/api/products"
 import { variantLoader } from "./loader"
 import { VARIANT_DETAIL_FIELDS } from "./constants"
 import { VariantGeneralSection } from "./components/variant-general-section"
-import { VariantInventorySection } from "./components/variant-inventory-section"
+import {
+  InventorySectionPlaceholder,
+  VariantInventorySection,
+} from "./components/variant-inventory-section"
 import { VariantPricesSection } from "./components/variant-prices-section"
 
 export const ProductVariantDetail = () => {
@@ -37,16 +40,19 @@ export const ProductVariantDetail = () => {
       <div className="flex flex-col gap-x-4 gap-y-3 xl:flex-row xl:items-start">
         <div className="flex w-full flex-col gap-y-3">
           <VariantGeneralSection variant={variant} />
-          <VariantInventorySection
+          {!variant.manage_inventory ? (
-            inventoryItems={variant.inventory_items.map((i) => {
+            <InventorySectionPlaceholder />
-              return {
+          ) : (
-                ...i.inventory,
+            <VariantInventorySection
-                required_quantity: i.required_quantity,
+              inventoryItems={variant.inventory_items.map((i) => {
-                variant,
+                return {
-              }
+                  ...i.inventory,
-            })}
+                  required_quantity: i.required_quantity,
-            manageInventory={variant.manage_inventory}
+                  variant,
-          />
+                }
+              })}
+            />
+          )}
 
           <div className="hidden xl:block">
             <JsonViewSection data={variant} root="product" />