From 54aac790ee5c218c3bc1c77bae9d9b26d33761c4 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 21 Apr 2026 10:46:35 +0700
Subject: [PATCH] feat(ui): unify logistics-style side panel flow

---
 app/components/AppFooter.vue          |  82 ++++++++++
 app/components/shell/MapSidePanel.vue |  86 +++++++++++
 app/layouts/topnav.vue                |  12 ++
 app/pages/catalog/destination.vue     | 169 ++++++++++----------
 app/pages/catalog/product.vue         | 139 +++++++----------
 app/pages/catalog/quantity.vue        | 139 +++++++++--------
 app/pages/catalog/results.vue         | 212 ++++++++++++--------------
 app/pages/clientarea/orders/index.vue | 127 +++++++--------
 8 files changed, 544 insertions(+), 422 deletions(-)
 create mode 100644 app/components/AppFooter.vue
 create mode 100644 app/components/shell/MapSidePanel.vue

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
new file mode 100644
index 0000000..fd52e68
--- /dev/null
+++ b/app/components/AppFooter.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  managerStage?: boolean
+}>(), {
+  managerStage: false,
+})
+const { toLocalized } = useLocalizedNavigation()
+
+const footerLinks = [
+  { label: 'Главная', to: '/' },
+  { label: 'Заказы', to: '/clientarea/orders' },
+  { label: 'Кабинет', to: '/clientarea/profile' },
+]
+
+const socialLinks = [
+  { label: 'Instagram', href: 'https://instagram.com', icon: 'M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 16a4 4 0 110-8 4 4 0 010 8z' },
+  { label: 'YouTube', href: 'https://youtube.com', icon: 'M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' },
+  { label: 'Telegram', href: 'https://t.me', icon: 'M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0z' },
+]
+
+const currentYear = new Date().getFullYear()
+</script>
+
+<template>
+  <footer
+    class="-mt-px overflow-hidden border-t-0 text-white"
+    :class="props.managerStage ? 'bg-transparent' : 'bg-[#10223b] [background-image:radial-gradient(circle_at_82%_18%,rgba(244,89,69,0.45),rgba(244,89,69,0)_34%),linear-gradient(130deg,#10223b_0%,#193450_100%)]'"
+  >
+    <div
+      class="mx-auto max-w-[1280px] px-3 pb-10 md:px-4 md:pb-12"
+      :class="props.managerStage ? 'pt-0 md:pt-0' : 'pt-5 md:pt-6'"
+    >
+      <div
+        class="grid gap-4 rounded-[26px] border p-5 md:p-6"
+        :class="props.managerStage
+          ? 'border-white/12 bg-white/4 [backdrop-filter:blur(10px)]'
+          : 'border-white/20 bg-[rgba(11,24,42,0.26)] [backdrop-filter:blur(6px)]'"
+      >
+        <div>
+          <h2 class="m-0 text-[clamp(1.6rem,3.4vw,2.6rem)] font-black leading-[1.08]">Готовы к следующей поставке?</h2>
+          <p class="mt-3 max-w-[720px] leading-6 text-white/85">
+            Получайте предложения в реальном времени, сравнивайте условия и запускайте закупку прямо в Optovia.
+          </p>
+        </div>
+
+        <div class="flex flex-wrap gap-2.5">
+          <a href="tel:+74957402842" class="inline-flex items-center rounded-full border border-white/25 bg-white/10 px-3.5 py-2 text-[0.92rem] font-bold text-white transition-colors hover:bg-white/20">+7 (495) 740-28-42</a>
+          <a href="mailto:sales@optovia.ru" class="inline-flex items-center rounded-full border border-white/25 bg-white/10 px-3.5 py-2 text-[0.92rem] font-bold text-white transition-colors hover:bg-white/20">sales@optovia.ru</a>
+        </div>
+
+        <nav class="flex flex-wrap gap-2" aria-label="Footer navigation">
+          <NuxtLink
+            v-for="link in footerLinks"
+            :key="link.to"
+            :to="toLocalized(link.to)"
+            class="rounded-full border border-white/25 px-3 py-2 text-[0.88rem] text-white/90 transition-colors hover:bg-white/15 hover:text-white"
+          >
+            {{ link.label }}
+          </NuxtLink>
+        </nav>
+
+        <div class="flex items-center gap-2.5" aria-label="Social networks">
+          <a
+            v-for="s in socialLinks"
+            :key="s.label"
+            :href="s.href"
+            target="_blank"
+            rel="noopener noreferrer"
+            :aria-label="s.label"
+            class="inline-flex h-[2.2rem] w-[2.2rem] items-center justify-center rounded-full border border-white/30 bg-white/10 text-white/95 transition-colors hover:bg-white/20"
+          >
+            <svg viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path :d="s.icon" /></svg>
+          </a>
+        </div>
+      </div>
+
+      <div class="mt-4 px-1 text-[0.78rem] text-white/70">
+        <p>&copy; {{ currentYear }} Optovia. Все права защищены.</p>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/app/components/shell/MapSidePanel.vue b/app/components/shell/MapSidePanel.vue
new file mode 100644
index 0000000..891b9dc
--- /dev/null
+++ b/app/components/shell/MapSidePanel.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  title?: string
+  initialCollapsed?: boolean
+  collapsible?: boolean
+  positionClass?: string
+  topOffsetClass?: string
+  bottomOffsetClass?: string
+  widthClass?: string
+}>(), {
+  title: '',
+  initialCollapsed: false,
+  collapsible: true,
+  positionClass: 'left-4',
+  topOffsetClass: 'top-[96px]',
+  bottomOffsetClass: 'bottom-4',
+  widthClass: 'w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]',
+})
+
+const collapsed = ref(props.initialCollapsed)
+
+function toggleCollapsed() {
+  collapsed.value = !collapsed.value
+}
+</script>
+
+<template>
+  <div class="pointer-events-none fixed z-40" :class="[positionClass, topOffsetClass, bottomOffsetClass]">
+    <section
+      class="pointer-events-auto flex h-full flex-col overflow-hidden rounded-[28px] border-0 bg-[#f3eee6] text-[#2f2418] shadow-[0_28px_70px_rgba(38,29,18,0.18)]"
+      :class="collapsible && collapsed ? 'w-16 rounded-full' : widthClass"
+      style="transition: width 260ms ease;"
+    >
+      <template v-if="collapsible && collapsed">
+        <button
+          type="button"
+          class="flex h-full w-full cursor-pointer flex-col items-center justify-between px-3 py-3 text-left transition hover:bg-[#eee6dc]"
+          :aria-expanded="String(!collapsed)"
+          :aria-label="$t('ui.expand_panel')"
+          @click="toggleCollapsed"
+        >
+          <span class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-[#5f4b33] transition">
+            <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m9 6 6 6-6 6" />
+            </svg>
+          </span>
+
+          <p v-if="title" class="origin-center whitespace-nowrap -rotate-90 text-[11px] font-bold uppercase tracking-[0.14em] text-[#6f6353]">
+            {{ title }}
+          </p>
+
+          <div class="h-10 w-10" aria-hidden="true" />
+        </button>
+      </template>
+
+      <template v-else>
+        <header v-if="title || $slots.header" class="flex shrink-0 items-start justify-between gap-3 border-b border-[#ded3c2] bg-[#f3eee6] px-5 py-4">
+          <div class="min-w-0 flex-1">
+            <slot name="header">
+              <h1 v-if="title" class="truncate text-xl font-black text-[#2f2418] md:text-2xl">{{ title }}</h1>
+            </slot>
+          </div>
+          <button
+            v-if="collapsible"
+            type="button"
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white text-[#5f4b33] transition hover:bg-[#fbf8f4]"
+            :aria-label="$t('ui.collapse_panel')"
+            @click="toggleCollapsed"
+          >
+            <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m15 18-6-6 6-6" />
+            </svg>
+          </button>
+        </header>
+
+        <div class="min-h-0 flex-1 overflow-y-auto p-4 md:p-5">
+          <slot />
+        </div>
+
+        <footer v-if="$slots.footer" class="shrink-0 border-t border-[#ded3c2] bg-[#f3eee6] px-4 py-4 md:px-5 md:py-5">
+          <slot name="footer" />
+        </footer>
+      </template>
+    </section>
+  </div>
+</template>
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 4a3720f..03ca816 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -5,6 +5,16 @@ const localePath = useLocalePath()
 const isHomePage = computed(() => route.path === localePath('/'))
 const isCatalogSection = computed(() => route.path.startsWith(localePath('/catalog')))
 const isClientArea = computed(() => route.path.startsWith(localePath('/clientarea')))
+const isFullscreenMapPage = computed(() => {
+  const p = route.path
+  return (
+    p.startsWith(localePath('/catalog/')) ||
+    p === localePath('/catalog') ||
+    p === localePath('/clientarea/orders') ||
+    p === localePath('/select-location/map') ||
+    p === localePath('/clientarea/orders/map')
+  )
+})
 
 const contentClass = computed(() => {
   if (isCatalogSection.value || isHomePage.value) {
@@ -27,5 +37,7 @@ const mainStyle = computed(() => {
     <main :class="contentClass" :style="mainStyle">
       <slot />
     </main>
+
+    <AppFooter v-if="!isFullscreenMapPage" />
   </div>
 </template>
diff --git a/app/pages/catalog/destination.vue b/app/pages/catalog/destination.vue
index c1f64b3..45e02c8 100644
--- a/app/pages/catalog/destination.vue
+++ b/app/pages/catalog/destination.vue
@@ -1,87 +1,83 @@
 <template>
-  <div class="fixed inset-0 flex flex-col">
-    <!-- Fullscreen Map -->
-    <div class="absolute inset-0">
-      <ClientOnly>
-        <CatalogMap
-          ref="mapRef"
-          map-id="step-hub-map"
-          :items="hubMapItems"
-          :use-server-clustering="false"
-          point-color="#22c55e"
-          entity-type="hub"
-          @select-item="onMapSelect"
-          @bounds-change="onBoundsChange"
-        />
-      </ClientOnly>
-    </div>
+  <div class="fixed inset-0">
+    <ClientOnly>
+      <CatalogMap
+        map-id="step-hub-map"
+        :items="hubMapItems"
+        :use-server-clustering="false"
+        point-color="#22c55e"
+        entity-type="hub"
+        :fit-padding-left="460"
+        @select-item="onMapSelect"
+      />
+    </ClientOnly>
 
-    <!-- Bottom sheet card -->
-    <div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
-      <article
-        class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
-        style="max-height: 60vh"
-      >
-        <!-- Header -->
-        <div class="shrink-0 p-5 pb-0 md:px-7 md:pt-7">
-          <div class="flex justify-center mb-4">
-            <div class="w-10 h-1 bg-base-300 rounded-full" />
-          </div>
+    <MapSidePanel
+      :title="t('catalog.steps.selectDestination')"
+      :initial-collapsed="false"
+      width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
+    >
+      <div class="space-y-3">
+        <p class="text-xs font-bold uppercase tracking-wider text-[#8a7761]">{{ $t('catalog.step', { n: 2 }) }}</p>
 
-          <div class="mb-1">
-            <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 2 }) }}</p>
-            <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectDestination') }}</h2>
-          </div>
-
-          <!-- Search input -->
-          <label class="input input-bordered w-full mt-3 rounded-full flex items-center gap-2">
-            <Icon name="lucide:search" size="16" class="text-base-content/40" />
-            <input
-              v-model="searchQuery"
-              type="text"
-              :placeholder="$t('catalog.search.searchHubs')"
-              class="grow bg-transparent"
-            />
-          </label>
+        <div v-if="productName" class="inline-flex items-center gap-2 rounded-full border border-[#ded3c2] bg-white px-3 py-1.5 text-xs font-medium text-[#6f6353]">
+          <Icon name="lucide:package" size="14" />
+          <span class="truncate">{{ productName }}</span>
         </div>
 
-        <!-- Hub list -->
-        <div class="min-h-0 flex-1 overflow-y-auto p-5 md:px-7">
-          <div v-if="isLoading" class="flex items-center justify-center py-8">
-            <span class="loading loading-spinner loading-md" />
-          </div>
+        <label class="input w-full rounded-full bg-white border-[#dccfbf] flex items-center gap-2">
+          <Icon name="lucide:search" size="16" class="text-[#8a7761]" />
+          <input
+            v-model="searchQuery"
+            type="text"
+            :placeholder="$t('catalog.search.searchHubs')"
+            class="grow bg-transparent"
+          >
+        </label>
+      </div>
 
-          <div v-else-if="filteredHubs.length === 0" class="text-center py-8 text-base-content/50">
-            <Icon name="lucide:warehouse" size="32" class="mb-2" />
-            <p>{{ $t('catalog.empty.noHubs') }}</p>
-          </div>
-
-          <div v-else class="flex flex-col gap-2">
-            <button
-              v-for="hub in filteredHubs"
-              :key="hub.uuid"
-              class="flex items-center gap-4 rounded-2xl p-4 text-left transition-all hover:bg-base-200/60 active:scale-[0.98] group"
-              @click="selectHub(hub)"
-            >
-              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-green-400 to-green-600 shadow-lg">
-                <Icon name="lucide:warehouse" size="20" class="text-white" />
-              </div>
-              <div class="flex-1 min-w-0">
-                <span class="text-base font-bold text-base-content block truncate">{{ hub.name || hub.uuid }}</span>
-                <span v-if="hub.country" class="text-sm text-base-content/50">{{ hub.country }}</span>
-              </div>
-              <Icon name="lucide:chevron-right" size="18" class="text-base-content/30 group-hover:text-base-content/60 transition-colors" />
-            </button>
-          </div>
+      <div class="mt-4 flex flex-col gap-2">
+        <div v-if="isLoading" class="flex items-center justify-center py-8">
+          <span class="loading loading-spinner loading-md" />
         </div>
-      </article>
-    </div>
+
+        <div v-else-if="filteredHubs.length === 0" class="rounded-2xl border border-[#e4d9ca] bg-white px-4 py-8 text-center text-[#7c6d5a]">
+          <Icon name="lucide:warehouse" size="30" class="mx-auto mb-2" />
+          <p>{{ $t('catalog.empty.noHubs') }}</p>
+        </div>
+
+        <button
+          v-for="hub in filteredHubs"
+          v-else
+          :key="hub.uuid"
+          class="flex items-center gap-4 rounded-2xl border border-[#e4d9ca] bg-white p-4 text-left transition-colors hover:bg-[#f8f3ec]"
+          @click="selectHub(hub)"
+        >
+          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-green-400 to-green-600 shadow-lg">
+            <Icon name="lucide:warehouse" size="20" class="text-white" />
+          </div>
+          <div class="min-w-0 flex-1">
+            <span class="block truncate text-base font-bold text-[#2f2418]">{{ hub.name || hub.uuid }}</span>
+            <span v-if="hub.country" class="text-sm text-[#7a6d5d]">{{ hub.country }}</span>
+          </div>
+          <Icon name="lucide:chevron-right" size="18" class="text-[#8a7761]" />
+        </button>
+      </div>
+
+      <template #footer>
+        <button
+          class="btn btn-sm rounded-full border-[#d7c9b7] bg-white text-[#2f2418] hover:bg-[#f7f1e8]"
+          @click="goBack"
+        >
+          <Icon name="lucide:arrow-left" size="14" />
+          {{ $t('common.back') }}
+        </button>
+      </template>
+    </MapSidePanel>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
-
 definePageMeta({ layout: 'topnav' })
 
 const { t } = useI18n()
@@ -89,24 +85,18 @@ const router = useRouter()
 const localePath = useLocalePath()
 const route = useRoute()
 
-const mapRef = ref(null)
 const searchQuery = ref('')
 
-// Get product from query
 const productUuid = computed(() => route.query.product as string | undefined)
-// Load hubs (filtered by product if available)
+const productName = computed(() => route.query.productName as string | undefined)
+
 const { items: hubs, isLoading, init: initHubs, setProductFilter } = useCatalogHubs()
 
-const onBoundsChange = (_bounds: MapBounds) => {
-  // No clustering needed — showing hub items directly
-}
-
-// Hub items for map
 const hubMapItems = computed(() =>
   hubs.value
-    .filter(h => h.latitude != null && h.longitude != null)
+    .filter(h => h.latitude != null && h.longitude != null && h.uuid)
     .map(h => ({
-      uuid: h.uuid || '',
+      uuid: h.uuid!,
       name: h.name || '',
       latitude: Number(h.latitude),
       longitude: Number(h.longitude),
@@ -114,13 +104,11 @@ const hubMapItems = computed(() =>
     }))
 )
 
-// Map click → select hub
 const onMapSelect = (uuid: string) => {
   const hub = hubs.value.find(h => h.uuid === uuid)
   if (hub) selectHub(hub)
 }
 
-// Filter hubs by search
 const filteredHubs = computed(() => {
   if (!searchQuery.value.trim()) return hubs.value
   const q = searchQuery.value.toLowerCase().trim()
@@ -130,13 +118,14 @@ const filteredHubs = computed(() => {
   )
 })
 
-// Select hub → navigate to quantity step
 const selectHub = (hub: { uuid?: string | null; name?: string | null }) => {
   if (!hub.uuid) return
+
   const query: Record<string, string> = {
     ...route.query as Record<string, string>,
     hub: hub.uuid,
   }
+
   if (hub.name) query.hubName = hub.name
 
   router.push({
@@ -145,7 +134,13 @@ const selectHub = (hub: { uuid?: string | null; name?: string | null }) => {
   })
 }
 
-// Init
+const goBack = () => {
+  router.push({
+    path: localePath('/catalog/product'),
+    query: route.query,
+  })
+}
+
 onMounted(() => {
   if (productUuid.value) {
     setProductFilter(productUuid.value)
diff --git a/app/pages/catalog/product.vue b/app/pages/catalog/product.vue
index 0fdf2f0..d3a8e42 100644
--- a/app/pages/catalog/product.vue
+++ b/app/pages/catalog/product.vue
@@ -1,83 +1,65 @@
 <template>
-  <div class="fixed inset-0 flex flex-col">
-    <!-- Fullscreen Map -->
-    <div class="absolute inset-0">
-      <ClientOnly>
-        <CatalogMap
-          ref="mapRef"
-          map-id="step-product-map"
-          :items="[]"
-          :clustered-points="clusteredNodes"
-          :use-server-clustering="true"
-          point-color="#f97316"
-          entity-type="offer"
-          @select-item="onMapSelect"
-          @bounds-change="onBoundsChange"
-        />
-      </ClientOnly>
-    </div>
+  <div class="fixed inset-0">
+    <ClientOnly>
+      <CatalogMap
+        map-id="step-product-map"
+        :items="[]"
+        :clustered-points="clusteredNodes"
+        :use-server-clustering="true"
+        point-color="#f97316"
+        entity-type="offer"
+        :fit-padding-left="460"
+        @bounds-change="onBoundsChange"
+      />
+    </ClientOnly>
 
-    <!-- Bottom sheet card -->
-    <div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
-      <article
-        class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
-        style="max-height: 60vh"
-      >
-        <!-- Header -->
-        <div class="shrink-0 p-5 pb-0 md:px-7 md:pt-7">
-          <!-- Drag handle -->
-          <div class="flex justify-center mb-4">
-            <div class="w-10 h-1 bg-base-300 rounded-full" />
-          </div>
+    <MapSidePanel
+      :title="t('catalog.steps.selectProduct')"
+      :initial-collapsed="false"
+      width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
+    >
+      <div class="space-y-3">
+        <p class="text-xs font-bold uppercase tracking-wider text-[#8a7761]">{{ $t('catalog.step', { n: 1 }) }}</p>
 
-          <div class="mb-1">
-            <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 1 }) }}</p>
-            <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectProduct') }}</h2>
-          </div>
+        <label class="input w-full rounded-full bg-white border-[#dccfbf] flex items-center gap-2">
+          <Icon name="lucide:search" size="16" class="text-[#8a7761]" />
+          <input
+            v-model="searchQuery"
+            type="text"
+            :placeholder="$t('catalog.search.searchProducts')"
+            class="grow bg-transparent"
+          >
+        </label>
+      </div>
 
-          <!-- Search input -->
-          <label class="input input-bordered w-full mt-3 rounded-full flex items-center gap-2">
-            <Icon name="lucide:search" size="16" class="text-base-content/40" />
-            <input
-              v-model="searchQuery"
-              type="text"
-              :placeholder="$t('catalog.search.searchProducts')"
-              class="grow bg-transparent"
-            />
-          </label>
+      <div class="mt-4 flex flex-col gap-2">
+        <div v-if="isLoading" class="flex items-center justify-center py-8">
+          <span class="loading loading-spinner loading-md" />
         </div>
 
-        <!-- Product list -->
-        <div class="min-h-0 flex-1 overflow-y-auto p-5 md:px-7">
-          <div v-if="isLoading" class="flex items-center justify-center py-8">
-            <span class="loading loading-spinner loading-md" />
-          </div>
-
-          <div v-else-if="filteredProducts.length === 0" class="text-center py-8 text-base-content/50">
-            <Icon name="lucide:package-x" size="32" class="mb-2" />
-            <p>{{ $t('catalog.empty.noProducts') }}</p>
-          </div>
-
-          <div v-else class="flex flex-col gap-2">
-            <button
-              v-for="product in filteredProducts"
-              :key="product.uuid"
-              class="flex items-center gap-4 rounded-2xl p-4 text-left transition-all hover:bg-base-200/60 active:scale-[0.98] group"
-              @click="selectProduct(product)"
-            >
-              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 shadow-lg">
-                <Icon name="lucide:package" size="20" class="text-white" />
-              </div>
-              <div class="flex-1 min-w-0">
-                <span class="text-base font-bold text-base-content block truncate">{{ product.name || product.uuid }}</span>
-                <span v-if="product.offersCount" class="text-sm text-base-content/50">{{ product.offersCount }} {{ $t('catalog.offers') }}</span>
-              </div>
-              <Icon name="lucide:chevron-right" size="18" class="text-base-content/30 group-hover:text-base-content/60 transition-colors" />
-            </button>
-          </div>
+        <div v-else-if="filteredProducts.length === 0" class="rounded-2xl border border-[#e4d9ca] bg-white px-4 py-8 text-center text-[#7c6d5a]">
+          <Icon name="lucide:package-x" size="30" class="mx-auto mb-2" />
+          <p>{{ $t('catalog.empty.noProducts') }}</p>
         </div>
-      </article>
-    </div>
+
+        <button
+          v-for="product in filteredProducts"
+          v-else
+          :key="product.uuid"
+          class="flex items-center gap-4 rounded-2xl border border-[#e4d9ca] bg-white p-4 text-left transition-colors hover:bg-[#f8f3ec]"
+          @click="selectProduct(product)"
+        >
+          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 shadow-lg">
+            <Icon name="lucide:package" size="20" class="text-white" />
+          </div>
+          <div class="min-w-0 flex-1">
+            <span class="block truncate text-base font-bold text-[#2f2418]">{{ product.name || product.uuid }}</span>
+            <span v-if="product.offersCount" class="text-sm text-[#7a6d5d]">{{ product.offersCount }} {{ $t('catalog.offers') }}</span>
+          </div>
+          <Icon name="lucide:chevron-right" size="18" class="text-[#8a7761]" />
+        </button>
+      </div>
+    </MapSidePanel>
   </div>
 </template>
 
@@ -91,24 +73,15 @@ const router = useRouter()
 const localePath = useLocalePath()
 const route = useRoute()
 
-const mapRef = ref(null)
 const searchQuery = ref('')
 
-// Load products
 const { items: products, isLoading, init: initProducts } = useCatalogProducts()
-
-// Clustering for map background
 const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, ref('offer'))
 
 const onBoundsChange = (bounds: MapBounds) => {
   fetchClusters(bounds)
 }
 
-const onMapSelect = (uuid: string) => {
-  // Map click — ignore for product step
-}
-
-// Filter products by search
 const filteredProducts = computed(() => {
   if (!searchQuery.value.trim()) return products.value
   const q = searchQuery.value.toLowerCase().trim()
@@ -118,7 +91,6 @@ const filteredProducts = computed(() => {
   )
 })
 
-// Select product → navigate to hub step
 const selectProduct = (product: { uuid: string; name?: string | null }) => {
   const query: Record<string, string> = {
     ...route.query as Record<string, string>,
@@ -132,7 +104,6 @@ const selectProduct = (product: { uuid: string; name?: string | null }) => {
   })
 }
 
-// Init
 onMounted(() => {
   initProducts()
 })
diff --git a/app/pages/catalog/quantity.vue b/app/pages/catalog/quantity.vue
index 1bc5420..7fd0359 100644
--- a/app/pages/catalog/quantity.vue
+++ b/app/pages/catalog/quantity.vue
@@ -1,66 +1,72 @@
 <template>
-  <div class="fixed inset-0 flex flex-col">
-    <!-- Fullscreen Map -->
-    <div class="absolute inset-0">
-      <ClientOnly>
-        <CatalogMap
-          ref="mapRef"
-          map-id="step-quantity-map"
-          :items="mapPoints"
-          :use-server-clustering="false"
-          point-color="#22c55e"
-          entity-type="hub"
-          :related-points="relatedPoints"
-          :info-loading="false"
-          @bounds-change="() => {}"
-        />
-      </ClientOnly>
-    </div>
+  <div class="fixed inset-0">
+    <ClientOnly>
+      <CatalogMap
+        map-id="step-quantity-map"
+        :items="mapPoints"
+        :use-server-clustering="false"
+        point-color="#22c55e"
+        entity-type="hub"
+        :related-points="relatedPoints"
+        :info-loading="false"
+        :fit-padding-left="460"
+      />
+    </ClientOnly>
 
-    <!-- Bottom sheet card -->
-    <div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
-      <article
-        class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
-        style="max-height: 60vh"
-      >
-        <div class="shrink-0 p-5 md:px-7 md:pt-7">
-          <div class="flex justify-center mb-4">
-            <div class="w-10 h-1 bg-base-300 rounded-full" />
+    <MapSidePanel
+      :title="t('catalog.steps.setQuantity')"
+      :initial-collapsed="false"
+      width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
+    >
+      <div class="space-y-4">
+        <p class="text-xs font-bold uppercase tracking-wider text-[#8a7761]">{{ $t('catalog.step', { n: 3 }) }}</p>
+
+        <div class="flex flex-wrap gap-2">
+          <div v-if="productName" class="inline-flex items-center gap-2 rounded-full border border-[#ded3c2] bg-white px-3 py-1.5 text-xs font-medium text-[#6f6353]">
+            <Icon name="lucide:package" size="14" />
+            <span class="truncate">{{ productName }}</span>
           </div>
-
-          <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 3 }) }}</p>
-          <h2 class="text-2xl font-black tracking-tight text-base-content mb-4">{{ $t('catalog.steps.setQuantity') }}</h2>
-
-          <!-- Quantity input -->
-          <div class="form-control w-full max-w-xs">
-            <label class="label">
-              <span class="label-text font-bold">{{ $t('catalog.filters.quantity') }}</span>
-            </label>
-            <label class="input input-bordered rounded-xl flex items-center gap-2">
-              <input
-                v-model="qty"
-                type="number"
-                min="0"
-                step="0.1"
-                placeholder="100"
-                class="grow bg-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-              />
-              <span class="text-base-content/50 text-sm">{{ $t('units.t') }}</span>
-            </label>
+          <div v-if="hubName" class="inline-flex items-center gap-2 rounded-full border border-[#ded3c2] bg-white px-3 py-1.5 text-xs font-medium text-[#6f6353]">
+            <Icon name="lucide:warehouse" size="14" />
+            <span class="truncate">{{ hubName }}</span>
           </div>
-
-          <!-- Search button -->
-          <button
-            class="btn btn-primary w-full mt-6 rounded-full text-base font-bold"
-            :disabled="!canSearch"
-            @click="goSearch"
-          >
-            <Icon name="lucide:search" size="18" />
-            {{ $t('catalog.quote.findOffers') }}
-          </button>
         </div>
-      </article>
-    </div>
+
+        <div class="space-y-2">
+          <label class="text-sm font-semibold text-[#4a3b2a]">{{ $t('catalog.filters.quantity') }}</label>
+          <label class="input w-full rounded-2xl bg-white border-[#dccfbf] flex items-center gap-2">
+            <input
+              v-model="qty"
+              type="number"
+              min="0"
+              step="0.1"
+              placeholder="100"
+              class="grow bg-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            >
+            <span class="text-[#8a7761] text-sm">{{ $t('units.t') }}</span>
+          </label>
+        </div>
+
+        <button
+          class="btn w-full rounded-full border-0 bg-[#10223b] text-white hover:bg-[#1b3552]"
+          :disabled="!canSearch"
+          @click="goSearch"
+        >
+          <Icon name="lucide:search" size="18" />
+          {{ $t('catalog.quote.findOffers') }}
+        </button>
+      </div>
+
+      <template #footer>
+        <button
+          class="btn btn-sm rounded-full border-[#d7c9b7] bg-white text-[#2f2418] hover:bg-[#f7f1e8]"
+          @click="goBack"
+        >
+          <Icon name="lucide:arrow-left" size="14" />
+          {{ $t('common.back') }}
+        </button>
+      </template>
+    </MapSidePanel>
   </div>
 </template>
 
@@ -75,22 +81,23 @@ const localePath = useLocalePath()
 const route = useRoute()
 const { execute } = useGraphQL()
 
-const mapRef = ref(null)
-const qty = ref('100')
+const qty = ref(typeof route.query.qty === 'string' ? route.query.qty : '100')
 
 const productUuid = computed(() => route.query.product as string | undefined)
+const productName = computed(() => route.query.productName as string | undefined)
 const hubUuid = computed(() => route.query.hub as string | undefined)
 const hubName = computed(() => route.query.hubName as string | undefined)
 
-const canSearch = computed(() => !!(productUuid.value && hubUuid.value))
+const canSearch = computed(() => !!(productUuid.value && hubUuid.value && Number(qty.value) > 0))
 
-// Load hub coordinates for map
 const hubPoint = ref<{ uuid: string; name: string; latitude: number; longitude: number } | null>(null)
 
 const loadHubPoint = async () => {
   if (!hubUuid.value) return
+
   const data = await execute(GetNodeDocument, { uuid: hubUuid.value }, 'public', 'geo')
   const node = data?.node
+
   if (node?.latitude != null && node?.longitude != null) {
     hubPoint.value = {
       uuid: node.uuid,
@@ -118,6 +125,7 @@ const goSearch = () => {
   const query: Record<string, string> = {
     ...route.query as Record<string, string>,
   }
+
   if (qty.value) query.qty = qty.value
 
   router.push({
@@ -126,6 +134,13 @@ const goSearch = () => {
   })
 }
 
+const goBack = () => {
+  router.push({
+    path: localePath('/catalog/destination'),
+    query: route.query,
+  })
+}
+
 onMounted(() => {
   loadHubPoint()
 })
diff --git a/app/pages/catalog/results.vue b/app/pages/catalog/results.vue
index dce4c96..92b2a66 100644
--- a/app/pages/catalog/results.vue
+++ b/app/pages/catalog/results.vue
@@ -1,106 +1,84 @@
 <template>
-  <div class="fixed inset-0 flex flex-col">
-    <!-- Fullscreen Map -->
-    <div class="absolute inset-0">
-      <ClientOnly>
-        <CatalogMap
-          ref="mapRef"
-          map-id="step-results-map"
-          :items="[]"
-          :use-server-clustering="false"
-          point-color="#f97316"
-          entity-type="offer"
-          :related-points="relatedPoints"
-          :info-loading="offersLoading"
-          @select-item="onMapSelect"
-          @bounds-change="() => {}"
-        />
-      </ClientOnly>
-    </div>
+  <div class="fixed inset-0">
+    <ClientOnly>
+      <CatalogMap
+        map-id="step-results-map"
+        :items="mapItems"
+        :use-server-clustering="false"
+        point-color="#f97316"
+        entity-type="offer"
+        :related-points="relatedPoints"
+        :info-loading="offersLoading"
+        :fit-padding-left="460"
+        @select-item="onMapSelect"
+      />
+    </ClientOnly>
 
-    <!-- Bottom sheet card -->
-    <div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
-      <article
-        class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
-        style="max-height: 60vh"
-      >
-        <!-- Header -->
-        <div class="shrink-0 p-5 pb-0 md:px-7 md:pt-7">
-          <div class="flex justify-center mb-4">
-            <div class="w-10 h-1 bg-base-300 rounded-full" />
-          </div>
+    <MapSidePanel
+      :title="t('catalog.headers.offers')"
+      :initial-collapsed="false"
+      width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
+    >
+      <div class="space-y-3">
+        <p class="text-xs font-bold uppercase tracking-wider text-[#8a7761]">{{ $t('catalog.steps.results') }}</p>
 
-          <div class="flex items-center justify-between mb-1">
-            <div>
-              <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.steps.results') }}</p>
-              <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.headers.offers') }}</h2>
-            </div>
-            <span v-if="!offersLoading" class="badge badge-neutral">{{ offers.length }}</span>
-          </div>
+        <div class="flex flex-wrap items-center gap-2">
+          <span v-if="productName" class="inline-flex items-center gap-1.5 rounded-full border border-[#ded3c2] bg-white px-3 py-1 text-xs font-medium text-[#6f6353]">
+            <Icon name="lucide:package" size="12" />
+            {{ productName }}
+          </span>
+          <span v-if="hubName" class="inline-flex items-center gap-1.5 rounded-full border border-[#ded3c2] bg-white px-3 py-1 text-xs font-medium text-[#6f6353]">
+            <Icon name="lucide:warehouse" size="12" />
+            {{ hubName }}
+          </span>
+          <span v-if="qty" class="inline-flex items-center gap-1.5 rounded-full border border-[#ded3c2] bg-white px-3 py-1 text-xs font-medium text-[#6f6353]">
+            {{ qty }} {{ $t('units.t') }}
+          </span>
+          <span v-if="!offersLoading" class="badge badge-neutral ml-auto">{{ offers.length }}</span>
+        </div>
+      </div>
 
-          <!-- Selected filters summary -->
-          <div class="flex flex-wrap items-center gap-2 mt-2">
-            <span v-if="productName" class="badge badge-warning gap-1">
-              <Icon name="lucide:package" size="12" />
-              {{ productName }}
-            </span>
-            <Icon name="lucide:arrow-right" size="14" class="text-base-content/30" />
-            <span v-if="hubName" class="badge badge-success gap-1">
-              <Icon name="lucide:warehouse" size="12" />
-              {{ hubName }}
-            </span>
-            <span v-if="qty" class="badge badge-info gap-1">
-              {{ qty }} {{ $t('units.t') }}
-            </span>
-          </div>
+      <div class="mt-4 flex flex-col gap-3">
+        <div v-if="offersLoading" class="flex items-center justify-center py-8">
+          <span class="loading loading-spinner loading-md" />
         </div>
 
-        <!-- Offers list -->
-        <div class="min-h-0 flex-1 overflow-y-auto p-5 md:px-7">
-          <div v-if="offersLoading" class="flex items-center justify-center py-8">
-            <span class="loading loading-spinner loading-md" />
-          </div>
-
-          <div v-else-if="offers.length === 0" class="text-center py-8 text-base-content/50">
-            <Icon name="lucide:search-x" size="32" class="mb-2" />
-            <p>{{ $t('catalog.empty.noOffers') }}</p>
-            <button class="btn btn-ghost btn-sm mt-3" @click="goBack">
-              <Icon name="lucide:arrow-left" size="16" />
-              {{ $t('common.back') }}
-            </button>
-          </div>
-
-          <div v-else class="flex flex-col gap-3">
-            <div
-              v-for="offer in offers"
-              :key="offer.uuid"
-              class="cursor-pointer"
-              @click="onSelectOffer(offer)"
-            >
-              <OfferResultCard
-                :supplier-name="offer.supplierName"
-                :location-name="offer.country || ''"
-                :product-name="offer.productName"
-                :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
-                :quantity="offer.quantity"
-                :currency="offer.currency"
-                :unit="offer.unit"
-                :stages="getOfferStages(offer)"
-                :total-time-seconds="offer.routes?.[0]?.totalTimeSeconds ?? null"
-              />
-            </div>
-          </div>
+        <div v-else-if="offers.length === 0" class="rounded-2xl border border-[#e4d9ca] bg-white px-4 py-8 text-center text-[#7c6d5a]">
+          <Icon name="lucide:search-x" size="30" class="mx-auto mb-2" />
+          <p>{{ $t('catalog.empty.noOffers') }}</p>
         </div>
 
-        <!-- New search button -->
-        <div class="shrink-0 p-5 pt-0 md:px-7">
-          <button class="btn btn-outline btn-sm w-full rounded-full" @click="goBack">
+        <div v-else class="flex flex-col gap-3">
+          <button
+            v-for="offer in offers"
+            :key="offer.uuid"
+            class="text-left"
+            @click="onSelectOffer(offer)"
+          >
+            <OfferResultCard
+              :supplier-name="offer.supplierName"
+              :location-name="offer.country || ''"
+              :product-name="offer.productName"
+              :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
+              :quantity="offer.quantity"
+              :currency="offer.currency"
+              :unit="offer.unit"
+              :stages="getOfferStages(offer)"
+              :total-time-seconds="offer.routes?.[0]?.totalTimeSeconds ?? null"
+            />
+          </button>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex items-center gap-2">
+          <button class="btn btn-sm rounded-full border-[#d7c9b7] bg-white text-[#2f2418] hover:bg-[#f7f1e8]" @click="goBack">
             <Icon name="lucide:refresh-cw" size="14" />
             {{ $t('catalog.steps.newSearch') }}
           </button>
         </div>
-      </article>
-    </div>
+      </template>
+    </MapSidePanel>
   </div>
 </template>
 
@@ -117,24 +95,30 @@ const localePath = useLocalePath()
 const route = useRoute()
 const { execute } = useGraphQL()
 
-const mapRef = ref(null)
-
 const productUuid = computed(() => route.query.product as string | undefined)
 const productName = computed(() => route.query.productName as string | undefined)
 const hubUuid = computed(() => route.query.hub as string | undefined)
 const hubName = computed(() => route.query.hubName as string | undefined)
 const qty = computed(() => route.query.qty as string | undefined)
 
-// Offers data
 const offers = ref<NearestOffer[]>([])
 const offersLoading = ref(false)
 
-// Hub point for map
 const hubPoint = ref<{ uuid: string; name: string; latitude: number; longitude: number } | null>(null)
 
-// Related points for map (hub + offer locations)
+const mapItems = computed(() =>
+  offers.value
+    .filter(o => o.uuid && o.latitude != null && o.longitude != null)
+    .map(o => ({
+      uuid: o.uuid,
+      name: o.productName || '',
+      latitude: Number(o.latitude),
+      longitude: Number(o.longitude),
+    }))
+)
+
 const relatedPoints = computed(() => {
-  const points: Array<{ uuid: string; name: string; latitude: number; longitude: number; type: 'hub' | 'supplier' | 'offer' }> = []
+  const points: Array<{ uuid: string; name: string; latitude: number; longitude: number; type: 'hub' | 'offer' }> = []
 
   if (hubPoint.value) {
     points.push({
@@ -147,7 +131,7 @@ const relatedPoints = computed(() => {
   }
 
   offers.value
-    .filter(o => o.latitude != null && o.longitude != null)
+    .filter(o => o.uuid && o.latitude != null && o.longitude != null)
     .forEach(o => {
       points.push({
         uuid: o.uuid,
@@ -167,22 +151,23 @@ const onMapSelect = (uuid: string) => {
 }
 
 const onSelectOffer = (offer: NearestOffer) => {
-  const productUuid = offer.productUuid
-  if (offer.uuid && productUuid) {
-    router.push(localePath(`/catalog/offers/${productUuid}?offer=${offer.uuid}`))
+  const selectedProductUuid = offer.productUuid
+  if (offer.uuid && selectedProductUuid) {
+    router.push(localePath(`/catalog/offers/${selectedProductUuid}?offer=${offer.uuid}`))
   }
 }
 
 const getOfferStages = (offer: NearestOffer) => {
-  const r = offer.routes?.[0]
-  if (!r?.stages) return []
-  return r.stages
-    .filter((s): s is NonNullable<typeof s> => s !== null)
-    .map(s => ({
-      transportType: s.transportType,
-      distanceKm: s.distanceKm,
-      travelTimeSeconds: s.travelTimeSeconds,
-      fromName: s.fromName,
+  const firstRoute = offer.routes?.[0]
+  if (!firstRoute?.stages) return []
+
+  return firstRoute.stages
+    .filter((stage): stage is NonNullable<typeof stage> => stage !== null)
+    .map(stage => ({
+      transportType: stage.transportType,
+      distanceKm: stage.distanceKm,
+      travelTimeSeconds: stage.travelTimeSeconds,
+      fromName: stage.fromName,
     }))
 }
 
@@ -192,14 +177,14 @@ const goBack = () => {
   })
 }
 
-// Search for offers
 const searchOffers = async () => {
   if (!productUuid.value || !hubUuid.value) return
+
   offersLoading.value = true
   try {
-    // Load hub coordinates
     const hubData = await execute(GetNodeDocument, { uuid: hubUuid.value }, 'public', 'geo')
     const hub = hubData?.node
+
     if (!hub?.latitude || !hub?.longitude) {
       offers.value = []
       return
@@ -212,7 +197,6 @@ const searchOffers = async () => {
       longitude: Number(hub.longitude),
     }
 
-    // Search nearest offers
     const data = await execute(
       NearestOffersDocument,
       {
@@ -226,7 +210,7 @@ const searchOffers = async () => {
       'geo'
     )
 
-    offers.value = (data?.nearestOffers || []).filter((o): o is NearestOffer => o !== null)
+    offers.value = (data?.nearestOffers || []).filter((offer): offer is NearestOffer => offer !== null)
   } finally {
     offersLoading.value = false
   }
diff --git a/app/pages/clientarea/orders/index.vue b/app/pages/clientarea/orders/index.vue
index 2d3778c..c04c128 100644
--- a/app/pages/clientarea/orders/index.vue
+++ b/app/pages/clientarea/orders/index.vue
@@ -1,111 +1,92 @@
 <template>
-  <div>
-    <CatalogPage
-      :items="mapPoints"
-      :loading="isLoading"
-      :use-server-clustering="false"
-      map-id="orders-map"
-      point-color="#6366f1"
-      :hovered-id="hoveredOrderId"
-      :show-panel="!selectedOrderId"
-      panel-width="w-96"
-      :hide-view-toggle="true"
-      @select="onMapSelect"
-      @update:hovered-id="hoveredOrderId = $event"
-    >
-    <template #panel>
-      <!-- Panel header -->
-      <div class="p-4 border-b border-base-300 flex-shrink-0">
-        <div class="flex items-center justify-between mb-3">
-          <div class="flex items-center gap-2">
-            <div class="w-8 h-8 rounded-lg bg-indigo-500/20 flex items-center justify-center">
-              <Icon name="lucide:package" size="16" class="text-indigo-400" />
-            </div>
-            <div>
-              <span class="font-semibold text-sm">{{ t('cabinetNav.orders') }}</span>
-              <div class="text-xs text-base-content/50">{{ filteredItems.length }} {{ t('orders.total', 'total') }}</div>
-            </div>
-          </div>
-        </div>
+  <div class="fixed inset-0">
+    <ClientOnly>
+      <CatalogMap
+        map-id="orders-map"
+        :items="mapPoints"
+        :use-server-clustering="false"
+        point-color="#6366f1"
+        entity-type="offer"
+        :hovered-item-id="hoveredOrderId"
+        :fit-padding-left="460"
+        @select-item="onMapSelect"
+      />
+    </ClientOnly>
 
-        <!-- Search -->
-        <div class="relative mb-3">
+    <MapSidePanel
+      :title="t('cabinetNav.orders')"
+      :initial-collapsed="false"
+      width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
+    >
+      <div class="space-y-3">
+        <div class="relative">
           <input
             v-model="searchQuery"
             type="text"
             :placeholder="t('common.search')"
-            class="input input-sm w-full bg-base-200 border-base-300 text-base-content placeholder:text-base-content/50"
-          />
-          <Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/50" />
+            class="input input-sm w-full bg-white border-[#dccfbf] text-[#2f2418] placeholder:text-[#8a7761]"
+          >
+          <Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-[#8a7761]" />
         </div>
 
-        <!-- Filter dropdown -->
         <div class="dropdown dropdown-end w-full">
-          <label tabindex="0" class="btn btn-sm w-full bg-base-200 border-base-300 text-base-content hover:bg-base-200 justify-between">
+          <label tabindex="0" class="btn btn-sm w-full bg-white border-[#dccfbf] text-[#2f2418] hover:bg-[#f9f4ed] justify-between">
             <span>{{ selectedFilterLabel }}</span>
             <Icon name="lucide:chevron-down" size="14" />
           </label>
-          <ul tabindex="0" class="dropdown-content menu menu-sm z-50 p-2 shadow bg-base-200 rounded-box w-full mt-2">
+          <ul tabindex="0" class="dropdown-content menu menu-sm z-50 p-2 shadow bg-white rounded-box w-full mt-2">
             <li v-for="filter in filters" :key="filter.id">
-              <a
-                :class="{ 'active': selectedFilter === filter.id }"
-                @click="selectedFilter = filter.id"
-              >{{ filter.label }}</a>
+              <a :class="{ active: selectedFilter === filter.id }" @click="selectedFilter = filter.id">{{ filter.label }}</a>
             </li>
           </ul>
         </div>
       </div>
 
-      <!-- Orders list -->
-      <div class="flex-1 overflow-y-auto p-3 space-y-2">
+      <div class="mt-4 flex flex-col gap-2">
         <template v-if="displayItems.length > 0">
-          <div
+          <button
             v-for="item in displayItems"
             :key="item.uuid"
-            class="bg-base-200 rounded-lg p-3 hover:bg-base-200 transition-colors cursor-pointer"
-            :class="{ 'ring-2 ring-indigo-500': selectedOrderId === item.uuid }"
+            class="rounded-2xl border border-[#e4d9ca] bg-white p-3 text-left transition-colors hover:bg-[#f8f3ec]"
+            :class="selectedOrderId === item.uuid ? 'ring-2 ring-[#2f2416]' : ''"
             @click="selectedOrderId = item.uuid"
             @mouseenter="hoveredOrderId = item.uuid"
             @mouseleave="hoveredOrderId = undefined"
           >
-            <div class="flex items-center justify-between mb-2">
-              <span class="font-semibold text-sm">#{{ item.name }}</span>
+            <div class="mb-2 flex items-center justify-between gap-2">
+              <span class="truncate font-semibold text-sm text-[#2f2418]">#{{ item.name }}</span>
               <span class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
                 {{ getStatusText(item.status) }}
               </span>
             </div>
-            <div class="text-xs text-base-content/70 space-y-1">
+
+            <div class="space-y-1 text-xs text-[#6f6353]">
               <div class="flex items-center gap-2">
-                <Icon name="lucide:map-pin" size="12" class="text-base-content/40" />
+                <Icon name="lucide:map-pin" size="12" />
                 <span class="truncate">{{ item.sourceLocationName }}</span>
               </div>
               <div class="flex items-center gap-2">
-                <Icon name="lucide:navigation" size="12" class="text-base-content/40" />
+                <Icon name="lucide:navigation" size="12" />
                 <span class="truncate">{{ item.destinationLocationName }}</span>
               </div>
             </div>
-            <div class="text-xs text-base-content/50 mt-2">
-              {{ getOrderDate(item) }}
-            </div>
-          </div>
-        </template>
-        <template v-else>
-          <div class="text-center py-8">
-            <div class="text-3xl mb-2">📦</div>
-            <div class="font-semibold text-sm mb-1">{{ t('orders.no_orders') }}</div>
-            <div class="text-xs text-base-content/60">{{ t('orders.no_orders_desc') }}</div>
-          </div>
+
+            <div class="mt-2 text-xs text-[#95836d]">{{ getOrderDate(item) }}</div>
+          </button>
         </template>
+
+        <div v-else class="rounded-2xl border border-[#e4d9ca] bg-white px-4 py-8 text-center text-[#7c6d5a]">
+          <div class="text-2xl">📦</div>
+          <div class="mt-2 text-sm font-semibold">{{ t('orders.no_orders') }}</div>
+          <div class="mt-1 text-xs">{{ t('orders.no_orders_desc') }}</div>
+        </div>
       </div>
 
-      <!-- Footer -->
-      <div class="p-3 border-t border-base-300 flex-shrink-0">
-        <span class="text-xs text-base-content/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
-      </div>
-    </template>
-    </CatalogPage>
+      <template #footer>
+        <span class="text-xs text-[#7c6d5a]">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
+      </template>
+    </MapSidePanel>
 
-    <!-- Order Detail Bottom Sheet -->
     <OrderDetailBottomSheet
       :is-open="!!selectedOrderId"
       :order-uuid="selectedOrderId"
@@ -128,7 +109,6 @@ const { t } = useI18n()
 
 const {
   filteredItems,
-  isLoading,
   filters,
   selectedFilter,
   init,
@@ -140,13 +120,11 @@ const hoveredOrderId = ref<string>()
 const searchQuery = ref('')
 const selectedOrderId = ref<string | null>(null)
 
-// Selected filter label
 const selectedFilterLabel = computed(() => {
   const filter = filters.value.find(f => f.id === selectedFilter.value)
   return filter?.label || t('ordersList.filters.status')
 })
 
-// Map points - source locations
 const mapPoints = computed(() => {
   return filteredItems.value
     .filter(order => order.uuid && order.sourceLatitude && order.sourceLongitude)
@@ -158,7 +136,6 @@ const mapPoints = computed(() => {
     }))
 })
 
-// Display items with search filter
 const displayItems = computed(() => {
   let items = filteredItems.value.filter(order => order.uuid)
 
@@ -174,9 +151,9 @@ const displayItems = computed(() => {
   return items
 })
 
-const onMapSelect = (item: { uuid?: string | null }) => {
-  if (item.uuid) {
-    selectedOrderId.value = item.uuid
+const onMapSelect = (uuid: string) => {
+  if (uuid) {
+    selectedOrderId.value = uuid
   }
 }