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,29 +28,39 @@
 
       <!-- Content -->
       <div class="relative z-10">
-        <div class="flex items-center justify-between gap-2 mb-1">
-          <Text size="base" weight="semibold" class="truncate">{{ product.name }}</Text>
-          <span
-            v-if="trend !== 0"
-            class="text-xs font-medium shrink-0"
-            :class="trend > 0 ? 'text-success' : 'text-error'"
-          >
-            {{ trend > 0 ? '↑' : '↓' }} {{ Math.abs(trend) }}%
-          </span>
-        </div>
+        <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>
 
-        <div class="flex items-center justify-between gap-2">
-          <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">
-            {{ formattedPrice }}
-          </Text>
-        </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
+                v-if="trend !== 0"
+                class="text-xs font-medium shrink-0"
+                :class="trend > 0 ? 'text-success' : 'text-error'"
+              >
+                {{ trend > 0 ? '↑' : '↓' }} {{ Math.abs(trend) }}%
+              </span>
+            </div>
 
-        <Text v-if="product.description && !compact" tone="muted" size="sm" class="mt-1">
-          {{ product.description }}
-        </Text>
+            <div class="flex items-center justify-between gap-2">
+              <Text v-if="product.offersCount" tone="muted" size="sm">
+                {{ product.offersCount }} {{ t('catalog.offers', product.offersCount) }}
+              </Text>
+              <Text v-if="effectivePrice" size="sm" class="text-primary font-bold shrink-0">
+                {{ formattedPrice }}
+              </Text>
+            </div>
+
+            <Text v-if="product.description && !compact" tone="muted" size="sm" class="mt-1">
+              {{ product.description }}
+            </Text>
+          </div>
+        </div>
       </div>
     </Card>
   </component>
@@ -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
-  const first = props.priceHistory[0]
-  const last = props.priceHistory[props.priceHistory.length - 1]
+  if (effectivePriceHistory.value.length < 2) return 0
+  const first = effectivePriceHistory.value[0]
+  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 -->
-          <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 -->
+          <!-- Info (left) -->
           <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 -->