Initial commit from monorepo

app/components/MapSidebar.vue

@@ -0,0 +1,117 @@
+<template>
+  <aside class="w-64 bg-base-100 h-screen flex flex-col border-r border-base-300">
+    <!-- Header with back button -->
+    <div class="p-4 border-b border-base-300">
+      <NuxtLink
+        :to="localePath('/catalog')"
+        class="btn btn-sm btn-ghost gap-2"
+      >
+        <Icon name="lucide:arrow-left" size="18" />
+        {{ t('catalogMap.actions.list_view') }}
+      </NuxtLink>
+    </div>
+
+    <!-- Tabs -->
+    <div role="tablist" class="tabs tabs-bordered px-4 border-b border-base-300">
+      <button
+        role="tab"
+        class="tab"
+        :class="{ 'tab-active': activeTab === 'hubs' }"
+        @click="$emit('update:activeTab', 'hubs')"
+      >
+        {{ t('catalogMap.tabs.hubs') }}
+        <span class="badge badge-sm ml-1">{{ hubs.length }}</span>
+      </button>
+      <button
+        role="tab"
+        class="tab"
+        :class="{ 'tab-active': activeTab === 'suppliers' }"
+        @click="$emit('update:activeTab', 'suppliers')"
+      >
+        {{ t('catalogMap.tabs.suppliers') }}
+        <span class="badge badge-sm ml-1">{{ suppliers.length }}</span>
+      </button>
+      <button
+        role="tab"
+        class="tab"
+        :class="{ 'tab-active': activeTab === 'offers' }"
+        @click="$emit('update:activeTab', 'offers')"
+      >
+        {{ t('catalogMap.tabs.offers') }}
+        <span class="badge badge-sm ml-1">{{ offers.length }}</span>
+      </button>
+    </div>
+
+    <!-- Tab Content -->
+    <div class="flex-1 overflow-y-auto p-2 bg-base-200">
+      <!-- Loading -->
+      <div v-if="isLoading" class="flex items-center justify-center h-32">
+        <span class="loading loading-spinner loading-md"></span>
+      </div>
+
+      <!-- Hubs Tab -->
+      <div v-else-if="activeTab === 'hubs'" class="space-y-2">
+        <HubCard
+          v-for="hub in hubs"
+          :key="hub.uuid"
+          :hub="hub"
+          selectable
+          :is-selected="selectedItemId === hub.uuid"
+          @select="$emit('select', hub, 'hub')"
+        />
+        <div v-if="hubs.length === 0" class="text-center text-base-content/50 py-8">
+          {{ t('catalogMap.empty.hubs') }}
+        </div>
+      </div>
+
+      <!-- Suppliers Tab -->
+      <div v-else-if="activeTab === 'suppliers'" class="space-y-2">
+        <SupplierCard
+          v-for="supplier in suppliers"
+          :key="supplier.uuid"
+          :supplier="supplier"
+          selectable
+          :is-selected="selectedItemId === supplier.uuid"
+          @select="$emit('select', supplier, 'supplier')"
+        />
+        <div v-if="suppliers.length === 0" class="text-center text-base-content/50 py-8">
+          {{ t('catalogMap.empty.suppliers') }}
+        </div>
+      </div>
+
+      <!-- Offers Tab -->
+      <div v-else-if="activeTab === 'offers'" class="space-y-2">
+        <OfferCard
+          v-for="offer in offers"
+          :key="offer.uuid"
+          :offer="offer"
+          selectable
+          :is-selected="selectedItemId === offer.uuid"
+          @select="$emit('select', offer, 'offer')"
+        />
+        <div v-if="offers.length === 0" class="text-center text-base-content/50 py-8">
+          {{ t('catalogMap.empty.offers') }}
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  activeTab: 'hubs' | 'suppliers' | 'offers'
+  hubs: any[]
+  suppliers: any[]
+  offers: any[]
+  selectedItemId: string | null
+  isLoading: boolean
+}>()
+
+defineEmits<{
+  'update:activeTab': [tab: 'hubs' | 'suppliers' | 'offers']
+  'select': [item: any, type: string]
+}>()
+
+const localePath = useLocalePath()
+const { t } = useI18n()
+</script>