feat(ui): unify logistics-style side panel flow

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()
 })