Migrate orders and addresses to split layout

- Use ListMapLayout for two-column list+map view
- Orders: show source locations on map
- Addresses: show address locations on map
- Remove preview map links (map is now inline)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/pages/clientarea/addresses/index.vue

@@ -1,41 +1,69 @@
 <template>
-  <Section variant="plain" paddingY="md">
-    <Stack gap="6">
-      <Card v-if="isLoading" padding="lg">
-        <Stack align="center" gap="3">
+  <div class="flex flex-col flex-1 min-h-0">
+    <!-- Loading state -->
+    <div v-if="isLoading" class="flex-1 flex items-center justify-center">
+      <Card padding="lg">
+        <Stack align="center" justify="center" gap="3">
           <Spinner />
           <Text tone="muted">{{ t('profileAddresses.states.loading') }}</Text>
         </Stack>
       </Card>
+    </div>
 
-      <template v-else-if="items.length">
-        <NuxtLink :to="localePath('/clientarea/addresses/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
-          <ClientOnly>
-            <MapboxGlobe
-              map-id="addresses-map"
-              :locations="itemsWithCoords"
-              :height="192"
-            />
-          </ClientOnly>
-        </NuxtLink>
-
-        <Grid :cols="1" :md="2" :gap="4">
-          <NuxtLink v-for="addr in items" :key="addr.uuid" :to="localePath(`/clientarea/addresses/${addr.uuid}`)" class="block">
-            <Card padding="small" interactive>
-              <div class="flex flex-col gap-1">
-                <Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
-                <Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
-                <div class="flex items-center mt-1">
-                  <span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
-                </div>
-              </div>
-            </Card>
+    <!-- ListMapLayout -->
+    <ListMapLayout
+      v-else-if="items.length"
+      :items="itemsForMap"
+      :selected-item-id="selectedAddressId"
+      map-id="addresses-map"
+      point-color="#10b981"
+      @select-item="onSelectAddress"
+    >
+      <template #list>
+        <Stack gap="4">
+          <!-- Add new address button -->
+          <NuxtLink :to="localePath('/clientarea/addresses/new')">
+            <Button variant="outline" class="w-full">
+              <Icon name="lucide:plus" size="16" class="mr-2" />
+              {{ t('profileAddresses.actions.add') }}
+            </Button>
           </NuxtLink>
-        </Grid>
-      </template>
 
+          <!-- Address cards -->
+          <Stack gap="3">
+            <NuxtLink
+              v-for="addr in items"
+              :key="addr.uuid"
+              :to="localePath(`/clientarea/addresses/${addr.uuid}`)"
+              class="block"
+            >
+              <Card
+                padding="sm"
+                interactive
+                :class="{ 'ring-2 ring-primary': addr.uuid === selectedAddressId }"
+                @click.prevent="onSelectAddress(addr.uuid)"
+              >
+                <div class="flex flex-col gap-1">
+                  <Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
+                  <Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
+                  <div class="flex items-center mt-1">
+                    <span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
+                  </div>
+                </div>
+              </Card>
+            </NuxtLink>
+          </Stack>
+
+          <Stack v-if="items.length === 0" align="center" gap="2">
+            <Text tone="muted">{{ t('profileAddresses.empty.title') }}</Text>
+          </Stack>
+        </Stack>
+      </template>
+    </ListMapLayout>
+
+    <!-- Empty state -->
+    <div v-else class="flex-1 flex items-center justify-center">
       <EmptyState
-        v-else
         icon="📍"
         :title="t('profileAddresses.empty.title')"
         :description="t('profileAddresses.empty.description')"
@@ -43,8 +71,8 @@
         :action-to="localePath('/clientarea/addresses/new')"
         action-icon="lucide:plus"
       />
-    </Stack>
-  </Section>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -59,10 +87,26 @@ const localePath = useLocalePath()
 const {
   items,
   isLoading,
-  itemsWithCoords,
   isoToEmoji,
   init
 } = useTeamAddresses()
 
+const selectedAddressId = ref<string>()
+
+// Map items for ListMapLayout
+const itemsForMap = computed(() => {
+  return items.value.map(addr => ({
+    uuid: addr.uuid,
+    name: addr.name,
+    latitude: addr.latitude,
+    longitude: addr.longitude,
+    country: addr.countryCode
+  }))
+})
+
+const onSelectAddress = (uuid: string) => {
+  selectedAddressId.value = uuid
+}
+
 await init()
 </script>

app/pages/clientarea/orders/index.vue

@@ -1,31 +1,48 @@
 <template>
-  <Section variant="plain" paddingY="md">
-    <Stack gap="6">
-      <Alert v-if="hasError" variant="error">
+  <div class="flex flex-col flex-1 min-h-0">
+    <!-- Loading state -->
+    <div v-if="isLoading" class="flex-1 flex items-center justify-center">
+      <Card padding="lg">
+        <Stack align="center" justify="center" gap="3">
+          <Spinner />
+          <Text tone="muted">{{ t('ordersList.states.loading') }}</Text>
+        </Stack>
+      </Card>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="hasError" class="flex-1 flex items-center justify-center">
+      <Alert variant="error">
         <Stack gap="2">
           <Heading :level="4" weight="semibold">{{ $t('common.error') }}</Heading>
           <Text tone="muted">{{ error }}</Text>
           <Button @click="load">{{ t('ordersList.errors.retry') }}</Button>
         </Stack>
       </Alert>
+    </div>
 
-      <Stack v-else-if="isLoading" align="center" justify="center" gap="3">
-        <Spinner />
-        <Text tone="muted">{{ t('ordersList.states.loading') }}</Text>
-      </Stack>
-
-      <template v-else>
-        <template v-if="items.length">
-          <NuxtLink :to="localePath('/clientarea/orders/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
-            <ClientOnly>
-              <OrdersRoutesPreview :routes="routesForMap" :height="192" />
-            </ClientOnly>
-          </NuxtLink>
-
+    <!-- ListMapLayout -->
+    <ListMapLayout
+      v-else-if="items.length"
+      :items="itemsForMap"
+      :selected-item-id="selectedOrderId"
+      map-id="orders-map"
+      point-color="#6366f1"
+      @select-item="onSelectOrder"
+    >
+      <template #list>
+        <Stack gap="4">
           <CatalogFilters :filters="filters" v-model="selectedFilter" />
 
           <Stack gap="4">
-            <Card v-for="order in filteredItems" :key="order.uuid" padding="lg" class="cursor-pointer" @click="openOrder(order)">
+            <Card
+              v-for="order in filteredItems"
+              :key="order.uuid"
+              padding="lg"
+              class="cursor-pointer"
+              :class="{ 'ring-2 ring-primary': order.uuid === selectedOrderId }"
+              @click="onSelectOrder(order.uuid)"
+            >
               <Stack gap="4">
                 <Stack direction="row" justify="between" align="center">
                   <Stack gap="1">
@@ -69,20 +86,26 @@
               </Stack>
             </Card>
           </Stack>
-        </template>
 
-        <EmptyState
-          v-else
-          icon="📦"
-          :title="$t('orders.no_orders')"
-          :description="$t('orders.no_orders_desc')"
-          :action-label="$t('orders.create_new')"
-          :action-to="localePath('/clientarea')"
-          action-icon="lucide:plus"
-        />
+          <Stack v-if="filteredItems.length === 0" align="center" gap="2">
+            <Text tone="muted">{{ $t('orders.no_orders') }}</Text>
+          </Stack>
+        </Stack>
       </template>
-    </Stack>
-  </Section>
+    </ListMapLayout>
+
+    <!-- Empty state -->
+    <div v-else class="flex-1 flex items-center justify-center">
+      <EmptyState
+        icon="📦"
+        :title="$t('orders.no_orders')"
+        :description="$t('orders.no_orders_desc')"
+        :action-label="$t('orders.create_new')"
+        :action-to="localePath('/clientarea')"
+        action-icon="lucide:plus"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -100,7 +123,6 @@ const {
   isLoading,
   filters,
   selectedFilter,
-  routesForMap,
   load,
   init,
   getStatusVariant,
@@ -109,6 +131,22 @@ const {
 
 const hasError = ref(false)
 const error = ref('')
+const selectedOrderId = ref<string>()
+
+// Map items for ListMapLayout (use source location coordinates)
+const itemsForMap = computed(() => {
+  return items.value.map(order => ({
+    uuid: order.uuid,
+    name: order.name || `#${order.uuid.slice(0, 8)}`,
+    latitude: order.sourceLatitude,
+    longitude: order.sourceLongitude,
+    country: order.sourceLocationName
+  }))
+})
+
+const onSelectOrder = (uuid: string) => {
+  selectedOrderId.value = uuid
+}
 
 try {
   await init()
@@ -117,10 +155,6 @@ try {
   error.value = err.message || t('ordersDetail.errors.load_failed')
 }
 
-const openOrder = (order: any) => {
-  navigateTo(localePath(`/clientarea/orders/${order.uuid}`))
-}
-
 const getOrderStartDate = (order: any) => {
   if (!order.createdAt) return t('ordersDetail.labels.dates_undefined')
   return formatDate(order.createdAt)