feat(map): Color-coded route lines, enhanced waypoint markers and live map multi-route rendering

[roncodes]

Summary

This PR implements a comprehensive UI/UX improvement for order route visualization across the FleetOps map, covering both the order detail view and the live dispatcher map.

---

Changes

New: addon/utils/route-colors.js

A self-contained utility module that centralizes all route color and styling logic:

Export	Purpose
ROUTE_COLOR_PALETTE	10-color curated palette, high contrast on light/dark CartoDB tiles
colorForId(id)	Deterministic color from any string (e.g. order.public_id) via djb2 hash — same order always renders in the same color
darkenColor(hex, amount)	Per-channel RGB darkening for casing layer colors
routeStyleForStatus(status, color)	Returns a Leaflet Path styles array for status-based line rendering
waypointIconHtml(label, bgColor)	Generates inline HTML for L.divIcon circular waypoint markers

Status → Line style mapping:

• pending → single dashed gray line
• canceled → dashed red, low opacity
• completed → solid teal, reduced opacity
• dispatched / in_progress → two-layer cased polyline (dark outline + bright fill)

---

Updated: addon/services/leaflet-map-manager.js

addRoutingControl() now accepts extended options:

addRoutingControl(waypoints, {
  color: '#0EA5E9',     // explicit hex color
  orderId: 'ORD-001',  // used for deterministic color if color not set
  status: 'in_progress',
  places: [pickupPlace, stop1Place, dropoffPlace],
  onRouteFound: (route) => { ... },
})

• lineOptions.styles is now populated from routeStyleForStatus() instead of LRM defaults (which produced an undifferentiated red line for every order)
• createMarker() callback replaces the hardcoded blue pin with:
  • Green circle labeled P for Pickup (first waypoint)
  • Red circle labeled D for Dropoff (last waypoint)
  • Route-colored numbered circles for intermediate stops
  • Each marker has a hover tooltip and, when place data is available, a rich popup showing place name, address, ETA, and status

---

Updated: addon/components/map/leaflet-live-map.js

• After the initial load() task completes, #renderLiveRoutes(routes) draws color-coded polylines for all active orders on the live dispatcher map
• Each route polyline carries a sticky tooltip showing Order ID, driver name, and status
• Overlapping routes on shared road segments are visually separated via alternating weight offsets
• Handles three route geometry formats:
  • OSRM flat coordinates array (details.coordinates)
  • GeoJSON LineString (details.geometry.coordinates)
  • OSRM route response (details.routes[0].geometry.coordinates)
• Route layers are tracked in _liveRouteLayerGroups and cleaned up on component destroy

---

Updated: addon/controllers/operations/orders/index/details.js

• New routingOptions getter builds { orderId, status, places, color } from the current order model
• Both setup() and the socket event handler pass routingOptions to addRoutingControl() and replaceRoutingControl()

---

Updated: addon/components/order/form/route.js

• previewRoute() now extracts orderId, status, and places from the order being created/edited and passes them to replaceRoutingControl()
• The existing places getter (pickup + waypoints + dropoff) is reused as the place data source for waypoint popup content

---

Updated: addon/styles/fleetops-engine.css

New CSS classes appended:

Class	Purpose
.fleetops-waypoint-marker	Clears Leaflet divIcon background/border defaults
.fleetops-waypoint-tooltip	Dark semi-transparent hover tooltip for waypoints
.fleetops-waypoint-popup-wrapper	Styled Leaflet popup container
.fleetops-waypoint-popup	Inner popup with badge, name, address, ETA, status
.fleetops-route-tooltip-wrapper	Sticky tooltip wrapper for live map polylines
.fleetops-route-tooltip	Dark tooltip content with order ID, driver, status
@keyframes fleetops-route-pulse	Subtle opacity animation for in_progress routes

---

Visual Before / After

Before	After
Every route: same undifferentiated red LRM line	Each order: unique deterministic color from palette
Generic blue Leaflet pin for all waypoints	Green P (pickup), Red D (dropoff), numbered stops
No popup on waypoint click	Rich popup: place name, address, ETA, status
Live map: routes loaded but never drawn	Live map: all active routes drawn as colored polylines
No visual distinction between order statuses	Status-based line style (dashed/solid/cased)

---

Testing Notes

• Open any order in the detail view — the route line should use a color derived from the order's public_id and the waypoint markers should be the new circular divIcons
• Open the live map — active order routes should appear as colored polylines; hovering a line shows the tooltip
• Test with multiple concurrent orders to verify color differentiation
• Test pending, in_progress, completed, and canceled orders to verify status-based line styling