Unify CatalogPage: fixed map, hover support, delete ListMapLayout

app/pages/clientarea/orders/index.vue

@@ -1,104 +1,64 @@
 <template>
-  <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>
+  <CatalogPage
+    :items="itemsForMap"
+    :loading="isLoading"
+    map-id="orders-map"
+    point-color="#6366f1"
+    :selected-id="selectedOrderId"
+    v-model:hovered-id="hoveredOrderId"
+    @select="onSelectOrder"
+  >
+    <template #filters>
+      <CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
+    </template>
+
+    <template #card="{ item }">
+      <Card padding="lg" class="cursor-pointer">
+        <Stack gap="4">
+          <Stack direction="row" justify="between" align="center">
+            <Stack gap="1">
+              <Text size="sm" tone="muted">{{ t('ordersList.card.order_label') }}</Text>
+              <Heading :level="3">#{{ item.name }}</Heading>
+            </Stack>
+            <div class="badge badge-outline">
+              {{ getOrderStartDate(item) }} → {{ getOrderEndDate(item) }}
+            </div>
+          </Stack>
+
+          <div class="divider my-0"></div>
+
+          <Grid :cols="1" :md="3" :gap="3">
+            <Stack gap="1">
+              <Text size="sm" tone="muted">{{ t('ordersList.card.route') }}</Text>
+              <Text weight="semibold">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</Text>
+            </Stack>
+
+            <Stack gap="1">
+              <Text size="sm" tone="muted">{{ t('ordersList.card.product') }}</Text>
+              <Text>
+                {{ item.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
+                <template v-if="item.orderLines?.length > 1">
+                  <span class="badge badge-ghost ml-2">+{{ item.orderLines.length - 1 }}</span>
+                </template>
+              </Text>
+              <Text tone="muted" size="sm">
+                {{ item.orderLines?.[0]?.quantity || 0 }} {{ item.orderLines?.[0]?.unit || t('ordersList.card.unit_tons') }}
+              </Text>
+            </Stack>
+
+            <Stack gap="1">
+              <Text size="sm" tone="muted">{{ t('ordersList.card.status') }}</Text>
+              <Badge :variant="getStatusVariant(item.status)">
+                {{ getStatusText(item.status) }}
+              </Badge>
+              <Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(item), total: item.stages?.length || 0 }) }}</Text>
+            </Stack>
+          </Grid>
         </Stack>
       </Card>
-    </div>
+    </template>
 
-    <!-- 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>
-
-    <!-- ListMapLayout -->
-    <ListMapLayout
-      v-else-if="items.length"
-      :items="itemsForMap"
-      :selected-item-id="selectedOrderId"
-      :hovered-item-id="hoveredOrderId"
-      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"
-              :class="{ 'ring-2 ring-primary': order.uuid === selectedOrderId }"
-              @click="onSelectOrder(order.uuid)"
-              @mouseenter="hoveredOrderId = order.uuid"
-              @mouseleave="hoveredOrderId = undefined"
-            >
-              <Stack gap="4">
-                <Stack direction="row" justify="between" align="center">
-                  <Stack gap="1">
-                    <Text size="sm" tone="muted">{{ t('ordersList.card.order_label') }}</Text>
-                    <Heading :level="3">#{{ order.name }}</Heading>
-                  </Stack>
-                  <div class="badge badge-outline">
-                    {{ getOrderStartDate(order) }} → {{ getOrderEndDate(order) }}
-                  </div>
-                </Stack>
-
-                <div class="divider my-0"></div>
-
-                <Grid :cols="1" :md="3" :gap="3">
-                  <Stack gap="1">
-                    <Text size="sm" tone="muted">{{ t('ordersList.card.route') }}</Text>
-                    <Text weight="semibold">{{ order.sourceLocationName }} → {{ order.destinationLocationName }}</Text>
-                  </Stack>
-
-                  <Stack gap="1">
-                    <Text size="sm" tone="muted">{{ t('ordersList.card.product') }}</Text>
-                    <Text>
-                      {{ order.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
-                      <template v-if="order.orderLines?.length > 1">
-                        <span class="badge badge-ghost ml-2">+{{ order.orderLines.length - 1 }}</span>
-                      </template>
-                    </Text>
-                    <Text tone="muted" size="sm">
-                      {{ order.orderLines?.[0]?.quantity || 0 }} {{ order.orderLines?.[0]?.unit || t('ordersList.card.unit_tons') }}
-                    </Text>
-                  </Stack>
-
-                  <Stack gap="1">
-                    <Text size="sm" tone="muted">{{ t('ordersList.card.status') }}</Text>
-                    <Badge :variant="getStatusVariant(order.status)">
-                      {{ getStatusText(order.status) }}
-                    </Badge>
-                    <Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(order), total: order.stages?.length || 0 }) }}</Text>
-                  </Stack>
-                </Grid>
-              </Stack>
-            </Card>
-          </Stack>
-
-          <Stack v-if="filteredItems.length === 0" align="center" gap="2">
-            <Text tone="muted">{{ $t('orders.no_orders') }}</Text>
-          </Stack>
-        </Stack>
-      </template>
-    </ListMapLayout>
-
-    <!-- Empty state -->
-    <div v-else class="flex-1 flex items-center justify-center">
+    <template #empty>
       <EmptyState
         icon="📦"
         :title="$t('orders.no_orders')"
@@ -107,8 +67,8 @@
         :action-to="localePath('/clientarea')"
         action-icon="lucide:plus"
       />
-    </div>
-  </div>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -121,25 +81,22 @@ const localePath = useLocalePath()
 const { t } = useI18n()
 
 const {
-  items,
   filteredItems,
   isLoading,
   filters,
   selectedFilter,
-  load,
   init,
   getStatusVariant,
   getStatusText
 } = useTeamOrders()
 
-const hasError = ref(false)
-const error = ref('')
 const selectedOrderId = ref<string>()
 const hoveredOrderId = ref<string>()
 
-// Map items for ListMapLayout (use source location coordinates)
+// Map items for CatalogPage (use source location coordinates)
 const itemsForMap = computed(() => {
-  return items.value.map(order => ({
+  return filteredItems.value.map(order => ({
+    ...order,
     uuid: order.uuid,
     name: order.name || `#${order.uuid.slice(0, 8)}`,
     latitude: order.sourceLatitude,
@@ -148,16 +105,11 @@ const itemsForMap = computed(() => {
   }))
 })
 
-const onSelectOrder = (uuid: string) => {
-  selectedOrderId.value = uuid
+const onSelectOrder = (item: any) => {
+  selectedOrderId.value = item.uuid
 }
 
-try {
-  await init()
-} catch (err: any) {
-  hasError.value = true
-  error.value = err.message || t('ordersDetail.errors.load_failed')
-}
+await init()
 
 const getOrderStartDate = (order: any) => {
   if (!order.createdAt) return t('ordersDetail.labels.dates_undefined')