Update catalog cards - logo right in supplier, sparkline in product

- SupplierCard: Move logo to right side, text on left
- ProductCard: Generate mock priceHistory from uuid, add product icon

app/components/catalog/ProductCard.vue

@@ -15,7 +15,7 @@
       ]"
     >
       <!-- Sparkline background -->
-      <div v-if="priceHistory && priceHistory.length > 1" class="absolute inset-0 opacity-15">
+      <div v-if="effectivePriceHistory.length > 1" class="absolute inset-0 opacity-15">
         <ClientOnly>
           <apexchart
             type="area"
@@ -28,6 +28,14 @@
 
       <!-- Content -->
       <div class="relative z-10">
+        <div class="flex items-start gap-3">
+          <!-- Product icon -->
+          <div class="w-10 h-10 shrink-0 bg-primary/10 text-primary rounded-lg flex items-center justify-center">
+            <Icon name="lucide:package" size="20" />
+          </div>
+
+          <!-- Info -->
+          <div class="min-w-0 flex-1">
             <div class="flex items-center justify-between gap-2 mb-1">
               <Text size="base" weight="semibold" class="truncate">{{ product.name }}</Text>
               <span
@@ -43,7 +51,7 @@
               <Text v-if="product.offersCount" tone="muted" size="sm">
                 {{ product.offersCount }} {{ t('catalog.offers', product.offersCount) }}
               </Text>
-          <Text v-if="currentPrice" size="sm" class="text-primary font-bold shrink-0">
+              <Text v-if="effectivePrice" size="sm" class="text-primary font-bold shrink-0">
                 {{ formattedPrice }}
               </Text>
             </div>
@@ -52,6 +60,8 @@
               {{ product.description }}
             </Text>
           </div>
+        </div>
+      </div>
     </Card>
   </component>
 </template>
@@ -87,11 +97,34 @@ const { t } = useI18n()
 
 const linkable = computed(() => !props.selectable && !!props.product.uuid)
 
+// Generate mock price history based on uuid for consistency
+const effectivePriceHistory = computed(() => {
+  if (props.priceHistory && props.priceHistory.length > 0) {
+    return props.priceHistory
+  }
+  if (!props.product.uuid) return []
+  const seed = props.product.uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  const basePrice = 100 + (seed % 200)
+  return Array.from({ length: 7 }, (_, i) => {
+    const variation = Math.sin(seed + i * 0.5) * 20 + Math.cos(seed * 0.3 + i) * 10
+    return Math.round(basePrice + variation)
+  })
+})
+
+// Effective price - use provided or last from history
+const effectivePrice = computed(() => {
+  if (props.currentPrice) return props.currentPrice
+  if (effectivePriceHistory.value.length > 0) {
+    return effectivePriceHistory.value[effectivePriceHistory.value.length - 1]
+  }
+  return null
+})
+
 // Price formatting
 const formattedPrice = computed(() => {
-  if (!props.currentPrice) return ''
+  if (!effectivePrice.value) return ''
   const symbol = getCurrencySymbol(props.currency)
-  return `${symbol}${props.currentPrice.toLocaleString()}`
+  return `${symbol}${effectivePrice.value.toLocaleString()}`
 })
 
 const getCurrencySymbol = (currency?: string | null) => {
@@ -106,9 +139,9 @@ const getCurrencySymbol = (currency?: string | null) => {
 
 // Calculate trend from price history
 const trend = computed(() => {
-  if (!props.priceHistory || props.priceHistory.length < 2) return 0
+  if (effectivePriceHistory.value.length < 2) return 0
-  const first = props.priceHistory[0]
+  const first = effectivePriceHistory.value[0]
-  const last = props.priceHistory[props.priceHistory.length - 1]
+  const last = effectivePriceHistory.value[effectivePriceHistory.value.length - 1]
   if (!first || first === 0 || !last) return 0
   return Math.round(((last - first) / first) * 100)
 })
@@ -140,6 +173,6 @@ const chartOptions = computed(() => ({
 
 const chartSeries = computed(() => [{
   name: 'Price',
-  data: props.priceHistory && props.priceHistory.length > 0 ? props.priceHistory : [0]
+  data: effectivePriceHistory.value.length > 0 ? effectivePriceHistory.value : [0]
 }])
 </script>

app/components/catalog/SupplierCard.vue

@@ -14,17 +14,9 @@
       ]"
     >
       <div class="flex flex-col gap-3">
-        <!-- Top row: Logo + Info -->
+        <!-- Top row: Info + Logo (logo on right) -->
         <div class="flex gap-3 items-start">
-          <!-- Logo -->
+          <!-- Info (left) -->
-          <div v-if="supplier.logo" class="w-12 h-12 shrink-0">
-            <img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded">
-          </div>
-          <div v-else class="w-12 h-12 shrink-0 bg-primary/10 text-primary font-bold rounded flex items-center justify-center text-lg">
-            {{ supplier.name?.charAt(0) }}
-          </div>
-
-          <!-- Info -->
           <div class="min-w-0 flex-1">
             <!-- Name with verified badge -->
             <div class="flex items-center gap-1.5">
@@ -40,6 +32,14 @@
               {{ countryFlag }} {{ supplier.country || t('catalogMap.labels.country_unknown') }}
             </Text>
           </div>
+
+          <!-- Logo (right) -->
+          <div v-if="supplier.logo" class="w-12 h-12 shrink-0">
+            <img :src="supplier.logo" :alt="supplier.name || ''" class="w-full h-full object-contain rounded">
+          </div>
+          <div v-else class="w-12 h-12 shrink-0 bg-primary/10 text-primary font-bold rounded flex items-center justify-center text-lg">
+            {{ supplier.name?.charAt(0) }}
+          </div>
         </div>
 
         <!-- Bottom row: Badges/Chips -->