admin user and ui panel

apps/user-app/src/composables/useProduct.ts

@@ -21,20 +21,36 @@
 import { computed, ref, unref, type Ref } from 'vue'
 import type { ProductSummary, ProductVariantSummary } from '../api/client'
 
+/** A variant can be ordered when it has stock, or when it is flagged pre-order. */
+export function isVariantOrderable(v: ProductVariantSummary): boolean {
+  return (v.qty ?? 0) > 0 || Boolean(v.isPreOrder)
+}
+
 function getCheapestVariant(variants: ProductVariantSummary[] | undefined): ProductVariantSummary | null {
   if (!variants || variants.length === 0) return null
-  return variants.reduce((cheapest, v) =>
+  // Prefer something the customer can actually order: defaulting to an
+  // out-of-stock variant means the page opens on a disabled button even though
+  // other weights are available. Falls back to the full list when nothing is
+  // orderable, so the page still shows a selection.
+  const pool = variants.filter(isVariantOrderable)
+  const candidates = pool.length ? pool : variants
+  return candidates.reduce((cheapest, v) =>
     parseFloat(v.defaultWagePercent) < parseFloat(cheapest.defaultWagePercent) ? v : cheapest,
   )
 }
 
 export function useProduct(productItem: ProductSummary, initialVariant?: ProductVariantSummary) {
   const product = ref<ProductSummary>(productItem)
-  const image = computed(() => product.value.images?.[0]?.url)
   const id = computed(() => product.value.id)
   const title = computed(() => product.value.title)
   const variants = computed(() => product.value.variants)
   const selectedVariant: Ref<ProductVariantSummary | null> = ref(initialVariant ?? getCheapestVariant(unref(variants)))
+  // The selected variant's own picture when the admin chose one, otherwise the
+  // product's main image. Several variants may legitimately resolve to the SAME
+  // image — one photo, several weights.
+  const image = computed(
+    () => selectedVariant.value?.image?.url ?? product.value.images?.[0]?.url,
+  )
   const min_gram = computed(() => selectedVariant.value ? parseFloat(selectedVariant.value.rashWeightGrams) : 0)
   const wage = computed(() => (selectedVariant.value ? parseFloat(selectedVariant.value.defaultWagePercent) : null))
   const hasDiscountWage = ref<number | null>(null) // no promotions backend yet — see file header