feat(dashboard): add inventory kit info in order summary (#8990)

**What**
- display inventory kit if the items' variant has one

---

![Screenshot 2024-09-04 at 14 12 07](https://github.com/user-attachments/assets/79053e4f-6100-4ab6-a72a-45fabcaa49bf)

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

@@ -844,7 +844,8 @@
       "requestReturn": "Request return",
       "allocateItems": "Allocate items",
       "editOrder": "Edit order",
-      "editOrderContinue": "Continue order edit"
+      "editOrderContinue": "Continue order edit",
+      "inventoryKit": "Consists of {{count}}x inventory items"
     },
     "payment": {
       "title": "Payments",

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

@@ -1,4 +1,4 @@
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
@@ -10,6 +10,7 @@ import {
   DocumentText,
   ExclamationCircle,
   PencilSquare,
+  TriangleDownMini,
 } from "@medusajs/icons"
 import {
   AdminClaim,
@@ -386,6 +387,8 @@ const Item = ({
   const { t } = useTranslation()
   const isInventoryManaged = item.variant?.manage_inventory
 
+  const hasInventoryKit = (item.variant.inventory_items?.length || 0) > 1
+
   return (
     <>
       <div
@@ -452,6 +455,8 @@ const Item = ({
         </div>
       </div>
 
+      {hasInventoryKit && <InventoryKitBreakdown item={item} />}
+
       {returns.map((r) => (
         <ReturnBreakdown key={r.id} orderReturn={r} itemId={item.id} />
       ))}
@@ -575,6 +580,63 @@ const CostBreakdown = ({ order }: { order: AdminOrder }) => {
   )
 }
 
+const InventoryKitBreakdown = ({ item }: { item: AdminOrderLineItem }) => {
+  const { t } = useTranslation()
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  const inventory = item.variant.inventory_items
+
+  return (
+    <>
+      <div
+        onClick={() => setIsOpen((o) => !o)}
+        className="flex cursor-pointer items-center gap-2 border-t border-dashed px-6 py-4"
+      >
+        <TriangleDownMini
+          style={{
+            transform: `rotate(${isOpen ? 0 : -90}deg)`,
+          }}
+        />
+        <span className="text-ui-fg-muted txt-small select-none">
+          {t("orders.summary.inventoryKit", { count: inventory.length })}
+        </span>
+      </div>
+      {isOpen && (
+        <div className="flex flex-col gap-1 px-6 pb-4">
+          {inventory.map((i) => {
+            return (
+              <div
+                key={i.inventory.id}
+                className="flex items-center justify-between gap-x-2"
+              >
+                <div>
+                  <span className="txt-small text-ui-fg-subtle font-medium">
+                    {i.inventory.title}
+
+                    {i.inventory.sku && (
+                      <span className="text-ui-fg-subtle font-normal">
+                        {" "}
+                        ⋅ {i.inventory.sku}
+                      </span>
+                    )}
+                  </span>
+                </div>
+                <div className="relative flex-1">
+                  <div className="bottom-[calc(50% - 2px)] absolute h-[1px] w-full border-b border-dashed" />
+                </div>
+                <span className="txt-small text-ui-fg-muted">
+                  {i.required_quantity}x
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </>
+  )
+}
+
 const ReturnBreakdownWithDamages = ({
   orderReturn,
   itemId,

packages/admin/dashboard/src/routes/orders/order-detail/constants.ts

@@ -24,6 +24,8 @@ const DEFAULT_RELATIONS = [
   "*items.variant.product",
   "*items.variant.options",
   "+items.variant.manage_inventory",
+  "*items.variant.inventory_items.inventory",
+  "+items.variant.inventory_items.required_quantity",
   "+summary",
   "*shipping_address",
   "*billing_address",