Initial commit from monorepo

app/components/OrdersRoutesPreview.client.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="w-full">
+    <MapboxMap
+      :key="mapId"
+      :map-id="mapId"
+      :style="`height: ${height}px; width: 100%;`"
+      class="rounded-lg"
+      :options="mapOptions"
+      @load="onMapCreated"
+    >
+      <MapboxNavigationControl position="top-right" />
+    </MapboxMap>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { getCurrentInstance } from 'vue'
+import type { Map as MapboxMapType } from 'mapbox-gl'
+import { LngLatBounds } from 'mapbox-gl'
+
+type RouteStage = {
+  fromLat?: number | null
+  fromLon?: number | null
+  toLat?: number | null
+  toLon?: number | null
+  transportType?: string | null
+}
+
+type OrderRoute = {
+  uuid: string
+  name: string
+  status?: string
+  stages: RouteStage[]
+}
+
+const props = defineProps({
+  routes: {
+    type: Array as PropType<OrderRoute[]>,
+    default: () => []
+  },
+  height: {
+    type: Number,
+    default: 192
+  }
+})
+
+const mapRef = ref<MapboxMapType | null>(null)
+const didFitBounds = ref(false)
+
+const instanceId = getCurrentInstance()?.uid || Math.floor(Math.random() * 100000)
+const mapId = computed(() => `orders-preview-${instanceId}`)
+
+const statusColors: Record<string, string> = {
+  pending: '#f59e0b',
+  processing: '#3b82f6',
+  in_transit: '#06b6d4',
+  delivered: '#22c55e',
+  cancelled: '#ef4444'
+}
+
+const allCoordinates = computed(() => {
+  const coords: [number, number][] = []
+  props.routes.forEach(order => {
+    order.stages.forEach(stage => {
+      if (stage.fromLat && stage.fromLon) {
+        coords.push([stage.fromLon, stage.fromLat])
+      }
+      if (stage.toLat && stage.toLon) {
+        coords.push([stage.toLon, stage.toLat])
+      }
+    })
+  })
+  return coords
+})
+
+const mapCenter = computed<[number, number]>(() => {
+  const coords = allCoordinates.value
+  if (!coords.length) return [50, 50]
+  const avgLng = coords.reduce((sum, c) => sum + c[0], 0) / coords.length
+  const avgLat = coords.reduce((sum, c) => sum + c[1], 0) / coords.length
+  return [avgLng, avgLat]
+})
+
+const mapOptions = computed(() => ({
+  style: 'mapbox://styles/mapbox/streets-v12',
+  center: mapCenter.value,
+  zoom: 2,
+  interactive: false
+}))
+
+const routeLineFeatures = computed<GeoJSON.FeatureCollection<GeoJSON.LineString>>(() => {
+  const features: GeoJSON.Feature<GeoJSON.LineString>[] = []
+
+  props.routes.forEach(order => {
+    order.stages.forEach(stage => {
+      if (stage.fromLat && stage.fromLon && stage.toLat && stage.toLon) {
+        features.push({
+          type: 'Feature',
+          properties: {
+            orderId: order.uuid,
+            status: order.status,
+            color: statusColors[order.status || ''] || '#6b7280'
+          },
+          geometry: {
+            type: 'LineString',
+            coordinates: [
+              [stage.fromLon, stage.fromLat],
+              [stage.toLon, stage.toLat]
+            ]
+          }
+        })
+      }
+    })
+  })
+
+  return { type: 'FeatureCollection', features }
+})
+
+const markersFeatureCollection = computed<GeoJSON.FeatureCollection<GeoJSON.Point>>(() => {
+  const points: GeoJSON.Feature<GeoJSON.Point>[] = []
+  const seen = new Set<string>()
+
+  props.routes.forEach(order => {
+    order.stages.forEach(stage => {
+      if (stage.fromLat && stage.fromLon) {
+        const key = `${stage.fromLon},${stage.fromLat}`
+        if (!seen.has(key)) {
+          seen.add(key)
+          points.push({
+            type: 'Feature',
+            properties: { color: statusColors[order.status || ''] || '#6b7280' },
+            geometry: { type: 'Point', coordinates: [stage.fromLon, stage.fromLat] }
+          })
+        }
+      }
+      if (stage.toLat && stage.toLon) {
+        const key = `${stage.toLon},${stage.toLat}`
+        if (!seen.has(key)) {
+          seen.add(key)
+          points.push({
+            type: 'Feature',
+            properties: { color: statusColors[order.status || ''] || '#6b7280' },
+            geometry: { type: 'Point', coordinates: [stage.toLon, stage.toLat] }
+          })
+        }
+      }
+    })
+  })
+
+  return { type: 'FeatureCollection', features: points }
+})
+
+const fitMapToRoutes = () => {
+  const map = mapRef.value
+  if (!map || didFitBounds.value) return
+
+  const coords = allCoordinates.value
+  if (coords.length === 0) return
+
+  const bounds = coords.reduce(
+    (acc, coord) => acc.extend(coord),
+    new LngLatBounds(coords[0], coords[0])
+  )
+
+  map.fitBounds(bounds, { padding: 30, maxZoom: 6 })
+  didFitBounds.value = true
+}
+
+const onMapCreated = (map: MapboxMapType) => {
+  mapRef.value = map
+
+  const initMap = () => {
+    map.addSource('orders-routes', {
+      type: 'geojson',
+      data: routeLineFeatures.value
+    })
+
+    map.addLayer({
+      id: 'orders-routes-lines',
+      type: 'line',
+      source: 'orders-routes',
+      paint: {
+        'line-color': ['get', 'color'],
+        'line-width': 3,
+        'line-opacity': 0.8
+      }
+    })
+
+    map.addSource('orders-markers', {
+      type: 'geojson',
+      data: markersFeatureCollection.value
+    })
+
+    map.addLayer({
+      id: 'orders-markers-circles',
+      type: 'circle',
+      source: 'orders-markers',
+      paint: {
+        'circle-radius': 5,
+        'circle-color': ['get', 'color'],
+        'circle-stroke-width': 1,
+        'circle-stroke-color': '#ffffff'
+      }
+    })
+
+    fitMapToRoutes()
+  }
+
+  if (map.loaded()) {
+    initMap()
+  } else {
+    map.on('load', initMap)
+  }
+}
+
+watch(
+  () => props.routes,
+  () => {
+    didFitBounds.value = false
+    const map = mapRef.value
+    if (!map) return
+
+    const routesSource = map.getSource('orders-routes') as mapboxgl.GeoJSONSource | undefined
+    if (routesSource) routesSource.setData(routeLineFeatures.value)
+
+    const markersSource = map.getSource('orders-markers') as mapboxgl.GeoJSONSource | undefined
+    if (markersSource) markersSource.setData(markersFeatureCollection.value)
+
+    fitMapToRoutes()
+  },
+  { deep: true }
+)
+</script>