From bd176973a8101355c13a4864d5652823d9d97a18 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 22 Jan 2026 10:05:59 +0700
Subject: [PATCH] Add verified badge top-right on SupplierCard, transport icons
 on HubCard

---
 app/components/catalog/HubCard.vue      | 15 +++++++++++++--
 app/components/catalog/SupplierCard.vue |  8 +++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/components/catalog/HubCard.vue b/app/components/catalog/HubCard.vue
index da02a61..3b15515 100644
--- a/app/components/catalog/HubCard.vue
+++ b/app/components/catalog/HubCard.vue
@@ -16,8 +16,16 @@
       ]"
     >
       <div class="flex flex-col gap-1">
-        <!-- Title -->
-        <Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
+        <!-- Title + Transport icons -->
+        <div class="flex items-center justify-between gap-2">
+          <Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
+          <div v-if="hub.transportTypes?.length" class="flex items-center gap-1 shrink-0">
+            <Icon v-if="hasTransport('auto')" name="lucide:truck" size="14" class="text-base-content/50" />
+            <Icon v-if="hasTransport('rail')" name="lucide:train-front" size="14" class="text-base-content/50" />
+            <Icon v-if="hasTransport('sea')" name="lucide:ship" size="14" class="text-base-content/50" />
+            <Icon v-if="hasTransport('air')" name="lucide:plane" size="14" class="text-base-content/50" />
+          </div>
+        </div>
         <!-- Country left, distance right -->
         <div class="flex items-center justify-between">
           <Text tone="muted" size="sm">
@@ -41,6 +49,7 @@ interface Hub {
   country?: string | null
   countryCode?: string | null
   distance?: string
+  transportTypes?: string[] | null
 }
 
 const props = defineProps<{
@@ -72,4 +81,6 @@ const countryFlag = computed(() => {
   }
   return '🌍'
 })
+
+const hasTransport = (type: string) => props.hub.transportTypes?.includes(type)
 </script>
diff --git a/app/components/catalog/SupplierCard.vue b/app/components/catalog/SupplierCard.vue
index bbe8a18..7d6c6d0 100644
--- a/app/components/catalog/SupplierCard.vue
+++ b/app/components/catalog/SupplierCard.vue
@@ -9,10 +9,15 @@
     <Card
       padding="small"
       :interactive="linkable || selectable"
+      class="relative"
       :class="[
         isSelected && 'ring-2 ring-primary ring-offset-2'
       ]"
     >
+      <!-- Verified badge top-right -->
+      <span v-if="supplier.isVerified" class="absolute -top-2 -right-2 badge badge-neutral badge-sm">
+        {{ t('catalogSupplier.badges.verified') }}
+      </span>
       <div class="flex flex-col gap-1">
         <!-- Logo -->
         <div v-if="supplier.logo" class="w-12 h-12 mb-1">
@@ -25,9 +30,6 @@
         <Text size="base" weight="semibold" class="truncate">{{ supplier.name }}</Text>
         <!-- Badges -->
         <div class="flex flex-wrap gap-1">
-          <span v-if="supplier.isVerified" class="badge badge-neutral badge-dash text-xs">
-            {{ t('catalogSupplier.badges.verified') }}
-          </span>
           <span class="badge badge-neutral badge-dash text-xs">
             {{ reliabilityLabel }}
           </span>