@withpotter/components 0.13.0-next.101

package/dist/mobile/screens/product-detail-panels.js

@@ -0,0 +1,567 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  ChevronRight,
+  Image as ImageIcon,
+  Layers,
+  Tag,
+  Truck
+} from "lucide-react";
+import { useState } from "react";
+import { ProductPerformancePanel } from "@withpotter/components/analytics/product-performance-panel";
+import { productProfitability } from "@withpotter/lib/product-cost";
+function ProductDetailPanels({
+  product,
+  formatCurrency,
+  isOutOfStock,
+  isLowStock,
+  available,
+  canSeeProfitability,
+  assignedMemberNames
+}) {
+  const [galleryOpen, setGalleryOpen] = useState(false);
+  const heroImg = typeof product.image === "string" ? product.image : product.image?.url;
+  const gallery = product.gallery ?? [];
+  const totalImages = (heroImg ? 1 : 0) + gallery.length;
+  const variants = product.variants ?? [];
+  const compare = product.compareAtPrice;
+  const hasDiscount = typeof compare === "number" && typeof product.price === "number" && compare > product.price;
+  const discountPct = hasDiscount ? Math.round((compare - (product.price ?? 0)) / compare * 100) : 0;
+  const profitability = canSeeProfitability ? productProfitability(product.price, product.costPrice) : null;
+  const behaviorConfig = product.behaviors;
+  const bookableConfig = behaviorConfig?.bookable && typeof behaviorConfig.bookable === "object" ? behaviorConfig.bookable : null;
+  const bookingDetails = bookableConfig ? [
+    typeof bookableConfig.durationMinutes === "number" ? ["Duration", `${bookableConfig.durationMinutes} minutes`] : null,
+    typeof bookableConfig.advanceBookingDays === "number" ? ["Book up to", `${bookableConfig.advanceBookingDays} days ahead`] : null,
+    typeof bookableConfig.cancellationHours === "number" ? [
+      "Cancellation",
+      bookableConfig.cancellationHours === 0 ? "Any time" : `${bookableConfig.cancellationHours} hours before`
+    ] : null,
+    bookableConfig.location && typeof bookableConfig.location === "object" && "label" in bookableConfig.location ? ["Location", String(bookableConfig.location.label)] : null
+  ].filter((item) => Boolean(item)) : [];
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-32", children: [
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: "mt-6 overflow-hidden rounded-3xl border",
+        style: {
+          borderColor: "var(--mb-border)",
+          background: "var(--mb-card)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/3] w-full", children: heroImg ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: heroImg,
+              alt: product.title,
+              className: "h-full w-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex h-full w-full items-center justify-center px-6 text-center",
+              style: {
+                background: "var(--mb-elevated)"
+              },
+              children: /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  ImageIcon,
+                  {
+                    "aria-hidden": "true",
+                    className: "mx-auto mb-2 size-6",
+                    style: { color: "var(--mb-text-tertiary)" }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "text-sm font-medium",
+                    style: { color: "var(--mb-text-secondary)" },
+                    children: "No image added"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "mt-1 text-xs",
+                    style: { color: "var(--mb-text-tertiary)" },
+                    children: "Add a primary image from the editor."
+                  }
+                )
+              ] })
+            }
+          ) }),
+          gallery.length > 0 && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex gap-2 overflow-x-auto border-t p-3",
+              style: { borderColor: "var(--mb-border)" },
+              children: [
+                gallery.slice(0, 5).map((image, index) => /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: image.url,
+                    alt: image.alt || `${product.title} gallery image ${index + 1}`,
+                    className: "size-14 shrink-0 rounded-xl border object-cover",
+                    style: { borderColor: "var(--mb-border)" }
+                  },
+                  index
+                )),
+                gallery.length > 5 && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setGalleryOpen(true),
+                    className: "size-14 shrink-0 rounded-xl text-xs font-semibold",
+                    style: {
+                      background: "var(--mb-elevated)",
+                      color: "var(--mb-text-secondary)"
+                    },
+                    "aria-label": `View ${gallery.length - 5} more gallery images`,
+                    children: [
+                      "+",
+                      gallery.length - 5
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-2xs",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: product.category ?? product.type ?? "\u2014"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "min-w-0 text-2xl font-bold leading-tight tracking-tight",
+                  style: { color: "var(--mb-text)" },
+                  children: product.title
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "shrink-0 rounded-full px-2 py-0.5 text-3xs font-semibold uppercase tracking-wider",
+                  style: {
+                    background: product.isActive ? "color-mix(in srgb, var(--mb-good) 12%, transparent)" : "var(--mb-elevated)",
+                    color: product.isActive ? "var(--mb-good)" : "var(--mb-text-tertiary)"
+                  },
+                  children: product.isActive ? "Published" : "Draft"
+                }
+              )
+            ] }),
+            product.shortDescription || product.description ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "mt-1 line-clamp-2 text-xs",
+                style: { color: "var(--mb-text-secondary)" },
+                children: product.shortDescription ?? product.description
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-baseline gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-3xl font-bold tabular-nums",
+                  style: { color: "var(--mb-text)" },
+                  children: formatCurrency(product.price ?? 0)
+                }
+              ),
+              hasDiscount ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-xs line-through tabular-nums",
+                    style: { color: "var(--mb-text-tertiary)" },
+                    children: formatCurrency(compare)
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "rounded-full px-1.5 py-0.5 text-3xs font-semibold",
+                    style: {
+                      background: "color-mix(in srgb, var(--mb-bad) 12%, transparent)",
+                      color: "var(--mb-bad)"
+                    },
+                    children: [
+                      "\u2212",
+                      discountPct,
+                      "%"
+                    ]
+                  }
+                )
+              ] }) : null
+            ] })
+          ] })
+        ]
+      }
+    ),
+    galleryOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-[var(--z-modal)] flex items-center justify-center p-4",
+        style: {
+          background: "color-mix(in srgb, var(--mb-text) 70%, transparent)"
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Product gallery",
+        onClick: () => setGalleryOpen(false),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "max-h-[90vh] w-full max-w-md overflow-auto rounded-3xl p-4",
+            style: { background: "var(--mb-card)" },
+            onClick: (event) => event.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "text-sm font-semibold",
+                    style: { color: "var(--mb-text)" },
+                    children: "Gallery"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setGalleryOpen(false),
+                    className: "text-sm",
+                    style: { color: "var(--mb-text-secondary)" },
+                    children: "Close"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: gallery.map((image, index) => /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: image.url,
+                  alt: image.alt || `${product.title} gallery image ${index + 1}`,
+                  className: "aspect-square w-full rounded-xl object-cover"
+                },
+                index
+              )) })
+            ]
+          }
+        )
+      }
+    ),
+    assignedMemberNames?.length ? /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx(Caption, { children: "Assigned member" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "mt-2 rounded-2xl border p-4",
+          style: {
+            borderColor: "var(--mb-border)",
+            background: "var(--mb-card)"
+          },
+          children: /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-sm font-semibold",
+              style: { color: "var(--mb-text)" },
+              children: assignedMemberNames.join(", ")
+            }
+          )
+        }
+      )
+    ] }) : null,
+    bookingDetails.length ? /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx(Caption, { children: "Booking details" }),
+      /* @__PURE__ */ jsx(
+        "dl",
+        {
+          className: "mt-2 space-y-3 rounded-2xl border p-4",
+          style: {
+            borderColor: "var(--mb-border)",
+            background: "var(--mb-card)"
+          },
+          children: bookingDetails.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4", children: [
+            /* @__PURE__ */ jsx(
+              "dt",
+              {
+                className: "text-sm",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "dd",
+              {
+                className: "text-right text-sm font-semibold",
+                style: { color: "var(--mb-text)" },
+                children: value
+              }
+            )
+          ] }, label))
+        }
+      )
+    ] }) : null,
+    profitability ? /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx(Caption, { children: "Cost & profit" }),
+      /* @__PURE__ */ jsxs(
+        "dl",
+        {
+          className: "mt-2 grid grid-cols-2 gap-2 rounded-2xl border p-4",
+          style: {
+            borderColor: "var(--mb-border)",
+            background: "var(--mb-card)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              ProductMoneyFact,
+              {
+                label: "Cost price",
+                value: formatCurrency(Number(product.costPrice))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ProductMoneyFact,
+              {
+                label: "Gross profit",
+                value: formatCurrency(profitability.grossProfit)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ProductMoneyFact,
+              {
+                label: "Margin",
+                value: profitability.marginPercent === null ? "\u2014" : `${Math.round(profitability.marginPercent)}%`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ProductMoneyFact,
+              {
+                label: "Markup",
+                value: profitability.markupPercent === null ? "\u2014" : `${Math.round(profitability.markupPercent)}%`
+              }
+            )
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx("section", { className: "mt-6", children: /* @__PURE__ */ jsx(ProductPerformancePanel, { productId: product.id }) }),
+    variants.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx(Caption, { children: "Variants & stock" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: variants.map((variant) => /* @__PURE__ */ jsx(
+        VariantRow,
+        {
+          name: variant.name,
+          price: formatCurrency(variant.price ?? product.price ?? 0),
+          stock: variant.quantity ?? 0,
+          trackInventory: !!product.trackInventory
+        },
+        variant.id
+      )) })
+    ] }) : /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx(Caption, { children: "Inventory" }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "mt-2 rounded-2xl border p-4",
+          style: {
+            borderColor: "var(--mb-border)",
+            background: "var(--mb-card)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-sm font-semibold",
+                style: {
+                  color: isOutOfStock ? "var(--mb-bad)" : isLowStock ? "var(--mb-warn)" : "var(--mb-good)"
+                },
+                children: !product.trackInventory ? "Not tracked" : isOutOfStock ? "Out of stock" : isLowStock ? `Low \xB7 ${available ?? product.quantity ?? 0} left` : `${available ?? product.quantity ?? 0} in stock`
+              }
+            ),
+            product.lowStockThreshold ? /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: "mt-1 text-2xs",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: [
+                  "Low alert at ",
+                  product.lowStockThreshold
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx(Caption, { children: "Manage" }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: ImageIcon,
+            label: `Media \xB7 ${totalImages} ${totalImages === 1 ? "image" : "images"}`,
+            hint: "Replace, reorder, set hero"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Tag,
+            label: "Pricing & tax",
+            hint: formatCurrency(product.price ?? 0)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Layers,
+            label: "Inventory",
+            hint: product.trackInventory ? `Track stock${product.lowStockThreshold ? ` \xB7 low at ${product.lowStockThreshold}` : ""}` : "Not tracked"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
+          {
+            icon: Truck,
+            label: "Shipping & pickup",
+            hint: product.behaviors?.shippable ? "Configured" : "Not set"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function Caption({ children }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: "text-3xs font-medium",
+      style: { color: "var(--mb-text-tertiary)" },
+      children
+    }
+  );
+}
+function ProductMoneyFact({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-2xs", style: { color: "var(--mb-text-tertiary)" }, children: label }),
+    /* @__PURE__ */ jsx(
+      "dd",
+      {
+        className: "mt-1 text-sm font-semibold tabular-nums",
+        style: { color: "var(--mb-text)" },
+        children: value
+      }
+    )
+  ] });
+}
+function VariantRow({
+  name,
+  price,
+  stock,
+  trackInventory
+}) {
+  const oos = trackInventory && stock <= 0;
+  const low = trackInventory && !oos && stock <= 5;
+  const stockLabel = !trackInventory ? "Not tracked" : oos ? "Out of stock" : low ? `Low \xB7 ${stock} left` : `${stock} in stock`;
+  const stockColor = oos ? "var(--mb-bad)" : low ? "var(--mb-warn)" : "var(--mb-text-tertiary)";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-3 rounded-2xl border p-4",
+      style: { borderColor: "var(--mb-border)", background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "truncate text-sm font-semibold",
+              style: { color: "var(--mb-text)" },
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-2xs", style: { color: stockColor }, children: stockLabel })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-sm font-semibold tabular-nums",
+            style: { color: "var(--mb-text)" },
+            children: price
+          }
+        )
+      ]
+    }
+  );
+}
+function SettingsRow({
+  icon: Icon,
+  label,
+  hint,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "flex w-full items-center gap-3 rounded-2xl border p-4 text-left",
+      style: {
+        borderColor: "var(--mb-border)",
+        background: "var(--mb-card)",
+        minHeight: 60
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl",
+            style: { background: "var(--mb-elevated)" },
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                className: "h-4 w-4",
+                style: { color: "var(--mb-text-secondary)" }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "truncate text-sm font-medium",
+              style: { color: "var(--mb-text)" },
+              children: label
+            }
+          ),
+          hint ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 truncate text-2xs",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: hint
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          ChevronRight,
+          {
+            className: "size-4",
+            style: { color: "var(--mb-text-muted)" }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ProductDetailPanels
+};
+//# sourceMappingURL=product-detail-panels.js.map

package/dist/mobile/screens/product-detail-panels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/product-detail-panels.tsx"],"sourcesContent":["/* eslint-disable @next/next/no-img-element */\n\nimport {\n  ChevronRight,\n  Image as ImageIcon,\n  Layers,\n  Tag,\n  Truck,\n} from 'lucide-react';\nimport { useState } from 'react';\nimport type { ProductVariant } from '@withpotter/lib/product-types';\nimport { ProductPerformancePanel } from '@withpotter/components/analytics/product-performance-panel';\nimport { productProfitability } from '@withpotter/lib/product-cost';\nimport type { ProductLike } from './product-detail-types';\n\nexport function ProductDetailPanels({\n  product,\n  formatCurrency,\n  isOutOfStock,\n  isLowStock,\n  available,\n  canSeeProfitability,\n  assignedMemberNames,\n}: {\n  product: ProductLike;\n  formatCurrency: (n: number) => string;\n  isOutOfStock: boolean;\n  isLowStock: boolean;\n  available?: number;\n  canSeeProfitability: boolean;\n  assignedMemberNames?: string[];\n}) {\n  const [galleryOpen, setGalleryOpen] = useState(false);\n  const heroImg =\n    typeof product.image === 'string' ? product.image : product.image?.url;\n  const gallery = product.gallery ?? [];\n  const totalImages = (heroImg ? 1 : 0) + gallery.length;\n  const variants = (product.variants ?? []) as ProductVariant[];\n  const compare = product.compareAtPrice;\n  const hasDiscount =\n    typeof compare === 'number' &&\n    typeof product.price === 'number' &&\n    compare > product.price;\n  const discountPct = hasDiscount\n    ? Math.round(((compare! - (product.price ?? 0)) / compare!) * 100)\n    : 0;\n  const profitability = canSeeProfitability\n    ? productProfitability(product.price, product.costPrice)\n    : null;\n  const behaviorConfig = product.behaviors as\n    Record<string, unknown> | undefined;\n  const bookableConfig =\n    behaviorConfig?.bookable && typeof behaviorConfig.bookable === 'object'\n      ? (behaviorConfig.bookable as Record<string, unknown>)\n      : null;\n  const bookingDetails = bookableConfig\n    ? [\n        typeof bookableConfig.durationMinutes === 'number'\n          ? ['Duration', `${bookableConfig.durationMinutes} minutes`]\n          : null,\n        typeof bookableConfig.advanceBookingDays === 'number'\n          ? ['Book up to', `${bookableConfig.advanceBookingDays} days ahead`]\n          : null,\n        typeof bookableConfig.cancellationHours === 'number'\n          ? [\n              'Cancellation',\n              bookableConfig.cancellationHours === 0\n                ? 'Any time'\n                : `${bookableConfig.cancellationHours} hours before`,\n            ]\n          : null,\n        bookableConfig.location &&\n        typeof bookableConfig.location === 'object' &&\n        'label' in bookableConfig.location\n          ? ['Location', String(bookableConfig.location.label)]\n          : null,\n      ].filter((item): item is [string, string] => Boolean(item))\n    : [];\n\n  return (\n    <div className=\"flex-1 overflow-y-auto px-4 pb-32\">\n      <section\n        className=\"mt-6 overflow-hidden rounded-3xl border\"\n        style={{\n          borderColor: 'var(--mb-border)',\n          background: 'var(--mb-card)',\n        }}\n      >\n        <div className=\"relative aspect-[4/3] w-full\">\n          {heroImg ? (\n            <img\n              src={heroImg}\n              alt={product.title}\n              className=\"h-full w-full object-cover\"\n            />\n          ) : (\n            <div\n              className=\"flex h-full w-full items-center justify-center px-6 text-center\"\n              style={{\n                background: 'var(--mb-elevated)',\n              }}\n            >\n              <div>\n                <ImageIcon\n                  aria-hidden=\"true\"\n                  className=\"mx-auto mb-2 size-6\"\n                  style={{ color: 'var(--mb-text-tertiary)' }}\n                />\n                <p\n                  className=\"text-sm font-medium\"\n                  style={{ color: 'var(--mb-text-secondary)' }}\n                >\n                  No image added\n                </p>\n                <p\n                  className=\"mt-1 text-xs\"\n                  style={{ color: 'var(--mb-text-tertiary)' }}\n                >\n                  Add a primary image from the editor.\n                </p>\n              </div>\n            </div>\n          )}\n        </div>\n        {gallery.length > 0 && (\n          <div\n            className=\"flex gap-2 overflow-x-auto border-t p-3\"\n            style={{ borderColor: 'var(--mb-border)' }}\n          >\n            {gallery.slice(0, 5).map((image, index) => (\n              <img\n                key={index}\n                src={image.url}\n                alt={image.alt || `${product.title} gallery image ${index + 1}`}\n                className=\"size-14 shrink-0 rounded-xl border object-cover\"\n                style={{ borderColor: 'var(--mb-border)' }}\n              />\n            ))}\n            {gallery.length > 5 && (\n              <button\n                type=\"button\"\n                onClick={() => setGalleryOpen(true)}\n                className=\"size-14 shrink-0 rounded-xl text-xs font-semibold\"\n                style={{\n                  background: 'var(--mb-elevated)',\n                  color: 'var(--mb-text-secondary)',\n                }}\n                aria-label={`View ${gallery.length - 5} more gallery images`}\n              >\n                +{gallery.length - 5}\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"p-4\">\n          <div className=\"flex items-center gap-2\">\n            <span\n              className=\"text-2xs\"\n              style={{ color: 'var(--mb-text-tertiary)' }}\n            >\n              {product.category ?? product.type ?? '—'}\n            </span>\n          </div>\n          <div className=\"mt-2 flex items-center gap-2\">\n            <p\n              className=\"min-w-0 text-2xl font-bold leading-tight tracking-tight\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {product.title}\n            </p>\n            <span\n              className=\"shrink-0 rounded-full px-2 py-0.5 text-3xs font-semibold uppercase tracking-wider\"\n              style={{\n                background: product.isActive\n                  ? 'color-mix(in srgb, var(--mb-good) 12%, transparent)'\n                  : 'var(--mb-elevated)',\n                color: product.isActive\n                  ? 'var(--mb-good)'\n                  : 'var(--mb-text-tertiary)',\n              }}\n            >\n              {product.isActive ? 'Published' : 'Draft'}\n            </span>\n          </div>\n          {product.shortDescription || product.description ? (\n            <p\n              className=\"mt-1 line-clamp-2 text-xs\"\n              style={{ color: 'var(--mb-text-secondary)' }}\n            >\n              {product.shortDescription ?? product.description}\n            </p>\n          ) : null}\n          <div className=\"mt-3 flex items-baseline gap-2\">\n            <span\n              className=\"text-3xl font-bold tabular-nums\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {formatCurrency(product.price ?? 0)}\n            </span>\n            {hasDiscount ? (\n              <>\n                <span\n                  className=\"text-xs line-through tabular-nums\"\n                  style={{ color: 'var(--mb-text-tertiary)' }}\n                >\n                  {formatCurrency(compare!)}\n                </span>\n                <span\n                  className=\"rounded-full px-1.5 py-0.5 text-3xs font-semibold\"\n                  style={{\n                    background:\n                      'color-mix(in srgb, var(--mb-bad) 12%, transparent)',\n                    color: 'var(--mb-bad)',\n                  }}\n                >\n                  −{discountPct}%\n                </span>\n              </>\n            ) : null}\n          </div>\n        </div>\n      </section>\n\n      {galleryOpen && (\n        <div\n          className=\"fixed inset-0 z-[var(--z-modal)] flex items-center justify-center p-4\"\n          style={{\n            background: 'color-mix(in srgb, var(--mb-text) 70%, transparent)',\n          }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Product gallery\"\n          onClick={() => setGalleryOpen(false)}\n        >\n          <div\n            className=\"max-h-[90vh] w-full max-w-md overflow-auto rounded-3xl p-4\"\n            style={{ background: 'var(--mb-card)' }}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"mb-3 flex items-center justify-between\">\n              <p\n                className=\"text-sm font-semibold\"\n                style={{ color: 'var(--mb-text)' }}\n              >\n                Gallery\n              </p>\n              <button\n                type=\"button\"\n                onClick={() => setGalleryOpen(false)}\n                className=\"text-sm\"\n                style={{ color: 'var(--mb-text-secondary)' }}\n              >\n                Close\n              </button>\n            </div>\n            <div className=\"grid grid-cols-2 gap-3\">\n              {gallery.map((image, index) => (\n                <img\n                  key={index}\n                  src={image.url}\n                  alt={\n                    image.alt || `${product.title} gallery image ${index + 1}`\n                  }\n                  className=\"aspect-square w-full rounded-xl object-cover\"\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {assignedMemberNames?.length ? (\n        <section className=\"mt-6\">\n          <Caption>Assigned member</Caption>\n          <div\n            className=\"mt-2 rounded-2xl border p-4\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-card)',\n            }}\n          >\n            <p\n              className=\"text-sm font-semibold\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {assignedMemberNames.join(', ')}\n            </p>\n          </div>\n        </section>\n      ) : null}\n\n      {bookingDetails.length ? (\n        <section className=\"mt-6\">\n          <Caption>Booking details</Caption>\n          <dl\n            className=\"mt-2 space-y-3 rounded-2xl border p-4\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-card)',\n            }}\n          >\n            {bookingDetails.map(([label, value]) => (\n              <div key={label} className=\"flex justify-between gap-4\">\n                <dt\n                  className=\"text-sm\"\n                  style={{ color: 'var(--mb-text-tertiary)' }}\n                >\n                  {label}\n                </dt>\n                <dd\n                  className=\"text-right text-sm font-semibold\"\n                  style={{ color: 'var(--mb-text)' }}\n                >\n                  {value}\n                </dd>\n              </div>\n            ))}\n          </dl>\n        </section>\n      ) : null}\n\n      {profitability ? (\n        <section className=\"mt-6\">\n          <Caption>Cost &amp; profit</Caption>\n          <dl\n            className=\"mt-2 grid grid-cols-2 gap-2 rounded-2xl border p-4\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-card)',\n            }}\n          >\n            <ProductMoneyFact\n              label=\"Cost price\"\n              value={formatCurrency(Number(product.costPrice))}\n            />\n            <ProductMoneyFact\n              label=\"Gross profit\"\n              value={formatCurrency(profitability.grossProfit)}\n            />\n            <ProductMoneyFact\n              label=\"Margin\"\n              value={\n                profitability.marginPercent === null\n                  ? '—'\n                  : `${Math.round(profitability.marginPercent)}%`\n              }\n            />\n            <ProductMoneyFact\n              label=\"Markup\"\n              value={\n                profitability.markupPercent === null\n                  ? '—'\n                  : `${Math.round(profitability.markupPercent)}%`\n              }\n            />\n          </dl>\n        </section>\n      ) : null}\n\n      {/* The SAME panel the desktop sidebar renders, not a mobile copy —\n          two drawings of \"what this earned\" is how two surfaces come to\n          disagree about one number. High up, because a phone makes anything\n          below the fold a decision to scroll. */}\n      <section className=\"mt-6\">\n        <ProductPerformancePanel productId={product.id} />\n      </section>\n\n      {variants.length > 0 ? (\n        <section className=\"mt-6\">\n          <Caption>Variants &amp; stock</Caption>\n          <div className=\"mt-2 space-y-2\">\n            {variants.map((variant) => (\n              <VariantRow\n                key={variant.id}\n                name={variant.name}\n                price={formatCurrency(variant.price ?? product.price ?? 0)}\n                stock={variant.quantity ?? 0}\n                trackInventory={!!product.trackInventory}\n              />\n            ))}\n          </div>\n        </section>\n      ) : (\n        <section className=\"mt-6\">\n          <Caption>Inventory</Caption>\n          <div\n            className=\"mt-2 rounded-2xl border p-4\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-card)',\n            }}\n          >\n            <p\n              className=\"text-sm font-semibold\"\n              style={{\n                color: isOutOfStock\n                  ? 'var(--mb-bad)'\n                  : isLowStock\n                    ? 'var(--mb-warn)'\n                    : 'var(--mb-good)',\n              }}\n            >\n              {!product.trackInventory\n                ? 'Not tracked'\n                : isOutOfStock\n                  ? 'Out of stock'\n                  : isLowStock\n                    ? `Low · ${available ?? product.quantity ?? 0} left`\n                    : `${available ?? product.quantity ?? 0} in stock`}\n            </p>\n            {product.lowStockThreshold ? (\n              <p\n                className=\"mt-1 text-2xs\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              >\n                Low alert at {product.lowStockThreshold}\n              </p>\n            ) : null}\n          </div>\n        </section>\n      )}\n\n      <section className=\"mt-6\">\n        <Caption>Manage</Caption>\n        <div className=\"mt-2 space-y-2\">\n          <SettingsRow\n            icon={ImageIcon}\n            label={`Media · ${totalImages} ${totalImages === 1 ? 'image' : 'images'}`}\n            hint=\"Replace, reorder, set hero\"\n          />\n          <SettingsRow\n            icon={Tag}\n            label=\"Pricing & tax\"\n            hint={formatCurrency(product.price ?? 0)}\n          />\n          <SettingsRow\n            icon={Layers}\n            label=\"Inventory\"\n            hint={\n              product.trackInventory\n                ? `Track stock${product.lowStockThreshold ? ` · low at ${product.lowStockThreshold}` : ''}`\n                : 'Not tracked'\n            }\n          />\n          <SettingsRow\n            icon={Truck}\n            label=\"Shipping & pickup\"\n            hint={product.behaviors?.shippable ? 'Configured' : 'Not set'}\n          />\n        </div>\n      </section>\n    </div>\n  );\n}\n\nfunction Caption({ children }: { children: React.ReactNode }) {\n  return (\n    <p\n      className=\"text-3xs font-medium\"\n      style={{ color: 'var(--mb-text-tertiary)' }}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction ProductMoneyFact({ label, value }: { label: string; value: string }) {\n  return (\n    <div>\n      <dt className=\"text-2xs\" style={{ color: 'var(--mb-text-tertiary)' }}>\n        {label}\n      </dt>\n      <dd\n        className=\"mt-1 text-sm font-semibold tabular-nums\"\n        style={{ color: 'var(--mb-text)' }}\n      >\n        {value}\n      </dd>\n    </div>\n  );\n}\n\nfunction VariantRow({\n  name,\n  price,\n  stock,\n  trackInventory,\n}: {\n  name: string;\n  price: string;\n  stock: number;\n  trackInventory: boolean;\n}) {\n  const oos = trackInventory && stock <= 0;\n  const low = trackInventory && !oos && stock <= 5;\n  const stockLabel = !trackInventory\n    ? 'Not tracked'\n    : oos\n      ? 'Out of stock'\n      : low\n        ? `Low · ${stock} left`\n        : `${stock} in stock`;\n  const stockColor = oos\n    ? 'var(--mb-bad)'\n    : low\n      ? 'var(--mb-warn)'\n      : 'var(--mb-text-tertiary)';\n\n  return (\n    <div\n      className=\"flex items-center gap-3 rounded-2xl border p-4\"\n      style={{ borderColor: 'var(--mb-border)', background: 'var(--mb-card)' }}\n    >\n      <div className=\"min-w-0 flex-1\">\n        <p\n          className=\"truncate text-sm font-semibold\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {name}\n        </p>\n        <p className=\"mt-0.5 truncate text-2xs\" style={{ color: stockColor }}>\n          {stockLabel}\n        </p>\n      </div>\n      <p\n        className=\"text-sm font-semibold tabular-nums\"\n        style={{ color: 'var(--mb-text)' }}\n      >\n        {price}\n      </p>\n    </div>\n  );\n}\n\nfunction SettingsRow({\n  icon: Icon,\n  label,\n  hint,\n  onClick,\n}: {\n  icon: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  label: string;\n  hint?: string;\n  onClick?: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className=\"flex w-full items-center gap-3 rounded-2xl border p-4 text-left\"\n      style={{\n        borderColor: 'var(--mb-border)',\n        background: 'var(--mb-card)',\n        minHeight: 60,\n      }}\n    >\n      <div\n        className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-xl\"\n        style={{ background: 'var(--mb-elevated)' }}\n      >\n        <Icon\n          className=\"h-4 w-4\"\n          style={{ color: 'var(--mb-text-secondary)' }}\n        />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <p\n          className=\"truncate text-sm font-medium\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {label}\n        </p>\n        {hint ? (\n          <p\n            className=\"mt-0.5 truncate text-2xs\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            {hint}\n          </p>\n        ) : null}\n      </div>\n      <ChevronRight\n        className=\"size-4\"\n        style={{ color: 'var(--mb-text-muted)' }}\n      />\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/screens/product-detail-types.d.ts

@@ -0,0 +1,23 @@
+import type { ProductMedia, ProductVariant } from '@withpotter/lib/product-types';
+export type ProductLike = {
+    /** Required: the performance panel below fetches by it. Every caller already
+     *  passes a real row; the type just never said so. */
+    id: string;
+    title: string;
+    price?: number;
+    compareAtPrice?: number;
+    costPrice?: number | string | null;
+    description?: string | null;
+    shortDescription?: string | null;
+    category?: string | null;
+    image?: string | ProductMedia | null;
+    gallery?: ProductMedia[];
+    isActive?: boolean;
+    trackInventory?: boolean;
+    quantity?: number;
+    lowStockThreshold?: number;
+    type?: string;
+    assigneeIds?: string[];
+    variants?: ProductVariant[] | unknown[];
+    behaviors?: Record<string, unknown> | undefined;
+};

package/dist/mobile/screens/product-detail-types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=product-detail-types.js.map

package/dist/mobile/screens/product-detail-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}