@aggdirect/coolmap-services 4.0.8 → 10.2.3

package/fesm2022/aggdirect-coolmap-services.mjs

@@ -1,133 +1,121 @@
 import * as i0 from '@angular/core';
-import { Component, InjectionToken, signal, computed, Injectable, inject, NgZone } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp.js';
+import { Injectable, Inject } from '@angular/core';
+import * as mapboxgl from 'mapbox-gl';
 import * as turf from '@turf/turf';
-import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject } from 'rxjs';
+import { MapboxLayer } from '@deck.gl/mapbox';
+import { ArcLayer } from '@deck.gl/layers';
+import * as i1 from '@angular/common/http';
+import * as i2 from '@angular/material/snack-bar';
+import * as i2$1 from '@angular/platform-browser';
 
-class CoolmapServices {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CoolmapServices, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: CoolmapServices, isStandalone: true, selector: "lib-coolmap-services", ngImport: i0, template: `
-    <p>
-      coolmap-services works!
-    </p>
-  `, isInline: true, styles: [""] });
+class Route {
+    index = 0;
+    type;
+    // Job Code
+    customer_contact;
+    customer_name;
+    delivery_contact;
+    delivery_lat;
+    delivery_location;
+    delivery_lon;
+    driver_list;
+    material;
+    order_number;
+    pickup_lat;
+    pickup_location;
+    pickup_lon;
+    project;
+    total_count;
+    unit;
+    values;
+    job_id;
+    isSelected;
+    date;
+    // Add Route
+    created_at;
+    created_by_name;
+    customer_id;
+    delivery_lat_lng;
+    estimated_distance;
+    estimated_time;
+    materials_id;
+    path;
+    pickup_lat_lng;
+    route_id;
+    route_name;
+    unit_id;
+    note;
+    materialLabel;
+    isActive;
+    prevent;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CoolmapServices, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-coolmap-services', imports: [], template: `
-    <p>
-      coolmap-services works!
-    </p>
-  ` }]
-        }] });
-
-/// <reference path="./mapbox-gl-csp.d.ts" />
-/**
- * Mapbox GL shares code between the main bundle and its Web Worker. When the host app
- * (e.g. customer portal) bundles/transpiles mapbox-gl, the worker often breaks with
- * errors like "Nn is not defined" / "_createClass is not defined" in syncRTLPluginState.
- *
- * Use the CSP build and load the worker from Mapbox's CDN (or window.__env.mapboxWorkerUrl).
- * Keep MAPBOX_GL_VERSION in sync with the mapbox-gl peer dependency.
- */
-/** Must match installed mapbox-gl version (see coolmap-v2 package.json) */
-const MAPBOX_GL_VERSION = '3.24.0';
-let workerConfigured = false;
-function ensureMapboxWorker() {
-    if (workerConfigured || typeof window === 'undefined') {
-        return mapboxgl;
-    }
-    const win = window;
-    if (!mapboxgl.workerUrl) {
-        mapboxgl.workerUrl =
-            win.__env?.mapboxWorkerUrl ??
-                `https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl-csp-worker.js`;
-    }
-    workerConfigured = true;
-    return mapboxgl;
-}
-
-const COOLMAP_CONFIG = new InjectionToken('COOLMAP_CONFIG');
-function provideCoolmapConfig(config) {
-    return {
-        provide: COOLMAP_CONFIG,
-        useValue: config
-    };
+const EstinationData = ['estimated_distance', 'estimated_time'];
+var EstinationEnum;
+(function (EstinationEnum) {
+    EstinationEnum["estimated_distance"] = "miles";
+    EstinationEnum["estimated_time"] = "time";
+})(EstinationEnum || (EstinationEnum = {}));
+const JobCodeOverviewData = ['order_number', 'customer_name', 'project', 'unit', 'material', 'customer_contact', 'delivery_contact', 'pickup_location', 'delivery_location'];
+var JobCodeOverviewEnum;
+(function (JobCodeOverviewEnum) {
+    JobCodeOverviewEnum["material"] = "Material";
+    JobCodeOverviewEnum["order_number"] = "Job Code";
+    JobCodeOverviewEnum["customer_name"] = "Customer";
+    JobCodeOverviewEnum["customer_contact"] = "Customer Contact";
+    JobCodeOverviewEnum["delivery_contact"] = "Delivery Contact";
+    JobCodeOverviewEnum["project"] = "Project Name";
+    JobCodeOverviewEnum["unit"] = "Job Type";
+    JobCodeOverviewEnum["pickup_location"] = "Pickup";
+    JobCodeOverviewEnum["delivery_location"] = "Delivery";
+})(JobCodeOverviewEnum || (JobCodeOverviewEnum = {}));
+const DriversmsCardKey = ['order_number', 'date', 'values', 'material', 'unit', 'pickup_location', 'delivery_location'];
+var DriverSmsCardEnum;
+(function (DriverSmsCardEnum) {
+    DriverSmsCardEnum["order_number"] = "Jobcode";
+    DriverSmsCardEnum["date"] = "Date";
+    DriverSmsCardEnum["values"] = "Total tasks";
+    DriverSmsCardEnum["material"] = "Material";
+    DriverSmsCardEnum["unit"] = "Unit";
+    DriverSmsCardEnum["pickup_location"] = "Pickup Address";
+    DriverSmsCardEnum["delivery_location"] = "Delivery Address";
+})(DriverSmsCardEnum || (DriverSmsCardEnum = {}));
+class PopupData {
+    coordinate;
+    pickup;
+    jobCode;
+    customer;
+    drop;
+    routeType;
+    title;
+    material;
+    type;
 }
-
-class AgToastService {
-    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
-    defaultDuration = 5000;
-    position = signal('top-right', ...(ngDevMode ? [{ debugName: "position" }] : []));
-    toasts = computed(() => this._toasts(), ...(ngDevMode ? [{ debugName: "toasts" }] : []));
-    toastPosition = computed(() => this.position(), ...(ngDevMode ? [{ debugName: "toastPosition" }] : []));
-    generateId() {
-        return `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    setPosition(pos) {
-        this.position.set(pos);
-    }
-    show(config) {
-        // Prevent duplicate toasts
-        const currentToasts = this._toasts();
-        const incomingVariant = config.variant || 'info';
-        const isDuplicate = currentToasts.find(t => t.message === config.message && t.variant === incomingVariant && t.title === config.title);
-        if (isDuplicate) {
-            return isDuplicate.id;
-        }
-        const toast = {
-            id: this.generateId(),
-            message: config.message,
-            title: config.title,
-            variant: incomingVariant,
-            duration: config.duration ?? this.defaultDuration,
-            dismissible: config.dismissible ?? true,
-            action: config.action,
-            createdAt: new Date()
-        };
-        this._toasts.update(toasts => [...toasts, toast]);
-        // Auto-dismiss if duration > 0
-        if (toast.duration > 0) {
-            setTimeout(() => {
-                this.dismiss(toast.id);
-            }, toast.duration);
-        }
-        return toast.id;
-    }
-    success(message, title, duration) {
-        return this.show({ message, title, variant: 'success', duration });
-    }
-    error(message, title, duration) {
-        return this.show({ message, title, variant: 'error', duration });
-    }
-    warning(message, title, duration) {
-        return this.show({ message, title, variant: 'warning', duration });
-    }
-    info(message, title, duration) {
-        return this.show({ message, title, variant: 'info', duration });
-    }
-    dismiss(id) {
-        this._toasts.update(toasts => toasts.filter(t => t.id !== id));
-    }
-    dismissAll() {
-        this._toasts.set([]);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AgToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AgToastService, providedIn: 'root' });
+class CoolmapConfigModel {
+    analyticsRESTURL;
+    RESTURLPrefix;
+    repository;
+    mapboxStyle;
+    mapboxAccessToken;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AgToastService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
 
 class UtilsService {
-    http = inject(HttpClient);
-    config = inject(COOLMAP_CONFIG);
-    ngZone = inject(NgZone);
-    // BehaviorSubjects for state (converting to simple Signals later where practical)
+    http;
+    snackBar;
+    config;
+    ngZone;
+    analyticsRESTURL = '';
+    RESTURLPrefix = '';
+    pickupOptions = [];
+    destOptions = [];
+    ownerOptions = [];
+    customerOptions = [];
+    unitOptions = [];
+    materialOptions = [];
+    jcodeOptions = [];
+    driverOption = [];
+    truckingCompanayOption = [];
+    routeNameOptions = [];
     preventnavChange = new BehaviorSubject(false);
     navChangeObserve = this.preventnavChange.asObservable();
     clearViewRouteforJobCode = new BehaviorSubject(false);
@@ -143,110 +131,92 @@ class UtilsService {
     materialsList;
     materialsListForCustomer;
     customersList;
-    locationList;
-    // Options filtering properties
-    pickupOptions = [];
-    destOptions = [];
-    ownerOptions = [];
-    customerOptions = [];
-    unitOptions = [];
-    materialOptions = [];
-    jcodeOptions = [];
-    driverOption = [];
-    truckingCompanayOption = [];
-    routeNameOptions = [];
+    constructor(http, snackBar, config, ngZone) {
+        this.http = http;
+        this.snackBar = snackBar;
+        this.config = config;
+        this.ngZone = ngZone;
+        this.analyticsRESTURL = config.analyticsRESTURL;
+        this.RESTURLPrefix = config.RESTURLPrefix;
+    }
     getDateFormat(strVal, seprater) {
         seprater = seprater ? seprater : '-';
         const mydate = strVal;
-        if (!mydate)
-            return '';
-        const month = String(mydate.getMonth() + 1).padStart(2, '0');
-        const day = String(mydate.getDate()).padStart(2, '0');
-        return (mydate.getFullYear() +
+        return (mydate?.getFullYear() +
             seprater +
-            month +
+            ((mydate ? mydate.getMonth() : 0) + 1) +
             seprater +
-            day);
+            mydate?.getDate());
     }
     getData(path) {
-        return this.http.get(`${this.config.analyticsRESTURL}${this.config.repository}/${path}`);
-    }
-    getRestData(path) {
-        return this.http.get(`${this.config.RESTURLPrefix}${path}`);
+        return this.http.get(`${this.analyticsRESTURL}${this.config.repository}/${path}`);
     }
     postdata(path, data) {
-        return this.http.post(`${this.config.analyticsRESTURL}${this.config.repository}/${path}`, data);
+        return this.http.post(`${this.analyticsRESTURL}${this.config.repository}/${path}`, data);
     }
     postDataWithRestUrl(path, data) {
-        return this.http.post(`${this.config.RESTURLPrefix}${path}`, data);
+        return this.http.post(`${this.RESTURLPrefix}${path}`, data);
     }
-    toastService = inject(AgToastService);
-    // Instead of MatSnackBar, we use AgToastService.
-    openSnackBar(message, className) {
-        if (className === 'success') {
-            this.toastService.success(message);
-        }
-        else if (className === 'error') {
-            this.toastService.error(message);
-        }
-        else if (className === 'warning') {
-            this.toastService.warning(message);
-        }
-        else {
-            this.toastService.info(message);
-        }
+    autocomplete(searchElementRef, form) {
+        return new Promise((resolve, reject) => {
+            const autocomplete = new google.maps.places.Autocomplete(searchElementRef.nativeElement, {
+                types: ['address']
+            });
+            google.maps.event.addListener(autocomplete, 'place_changed', () => {
+                this.ngZone.run(() => {
+                    const place = autocomplete.getPlace();
+                    console.log(place.geometry.location.lat(), place.geometry.location.lng());
+                    resolve({ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() });
+                });
+            });
+        });
     }
-    clearOptions() {
-        this.pickupOptions = [];
-        this.destOptions = [];
-        this.ownerOptions = [];
-        this.customerOptions = [];
-        this.unitOptions = [];
-        this.materialOptions = [];
-        this.jcodeOptions = [];
-        this.routeNameOptions = [];
+    openSnackBar(message, className) {
+        this.snackBar.open(message, '', {
+            duration: 5000,
+            verticalPosition: 'top',
+            horizontalPosition: 'center',
+            panelClass: [className ? className : 'default'],
+        });
     }
     makeOptions(item) {
-        // Porting V1 makeOptions safely
         if (item.order_number) {
-            if (this.jcodeOptions.findIndex((elem) => elem.job_id === item.job_id) === -1) {
-                this.jcodeOptions.push({ job_code: item.order_number, job_id: item.job_id });
-            }
-            // Assuming tasks structure if Mapbox Route logic was merged, else driver_list from V1
-            const driver_list = item.driver_list || [];
-            if (driver_list.length > 0) {
-                driver_list.forEach((driver) => {
-                    if (this.driverOption.findIndex((elem) => elem === driver.driver_name) === -1) {
-                        this.driverOption.push(driver.driver_name);
-                    }
-                    if (this.truckingCompanayOption.findIndex((elem) => elem === driver.trucking_company) === -1) {
-                        this.truckingCompanayOption.push(driver.trucking_company);
-                    }
+            this.jcodeOptions.findIndex((elem) => elem.job_id === item.job_id) === -1
+                ? this.jcodeOptions.push({
+                    job_code: item.order_number,
+                    job_id: item.job_id,
+                })
+                : null;
+            if (item.driver_list && item.driver_list?.length > 0) {
+                item.driver_list.forEach((driver) => {
+                    this.driverOption.findIndex((elem) => elem === driver['driver_name']) === -1
+                        ? this.driverOption.push(driver['driver_name'])
+                        : null;
+                    this.truckingCompanayOption.findIndex((elem) => elem === driver['trucking_company']) === -1
+                        ? this.truckingCompanayOption.push(driver['trucking_company'])
+                        : null;
                 });
             }
         }
-        if (item.pickup_location && this.pickupOptions.findIndex((elem) => elem === item.pickup_location) === -1)
-            this.pickupOptions.push(item.pickup_location);
-        if (item.delivery_location && this.destOptions.findIndex((elem) => elem === item.delivery_location) === -1)
-            this.destOptions.push(item.delivery_location);
-        if (item.customer_name && this.customerOptions.findIndex((customer) => customer === item.customer_name) === -1)
-            this.customerOptions.push(item.customer_name);
-        if (item.unit && this.unitOptions.findIndex((elem) => elem === item.unit) === -1)
-            this.unitOptions.push(item.unit);
-        if (item.material && this.materialOptions.findIndex((elem) => elem === item.material) === -1)
-            this.materialOptions.push(item.material);
-        if (item.route_name && this.routeNameOptions.findIndex((elem) => elem === item.route_name) === -1)
-            this.routeNameOptions.push(item.route_name);
-    }
-    setdictValue(key, value) {
-        this.dict.set(key, value);
-    }
-    getdictValue(key) {
-        const val = this.dict.get(key);
-        return val ? JSON.parse(val) : null;
-    }
-    removedictValue(key) {
-        this.dict.delete(key);
+        this.pickupOptions.findIndex((elem) => elem === item.pickup_location) === -1
+            ? this.pickupOptions.push(item.pickup_location)
+            : null;
+        this.destOptions.findIndex((elem) => elem === item.delivery_location) === -1
+            ? this.destOptions.push(item.delivery_location)
+            : null;
+        this.customerOptions.findIndex((customer) => customer === item.customer_name) === -1
+            ? this.customerOptions.push(item.customer_name)
+            : null;
+        this.unitOptions.findIndex((elem) => elem === item.unit) === -1
+            ? this.unitOptions.push(item.unit)
+            : null;
+        this.materialOptions.findIndex((elem) => elem === item.material) === -1
+            ? this.materialOptions.push(item.material)
+            : null;
+        if (item.route_name)
+            this.routeNameOptions.findIndex((elem) => elem === item.route_name) === -1
+                ? this.routeNameOptions.push(item.route_name)
+                : null;
     }
     filter(value, filters) {
         if (typeof value !== 'string') {
@@ -257,24 +227,22 @@ class UtilsService {
             return [];
         }
         const searchResults = [];
-        this.unitOptions.forEach((unit) => {
+        this.unitOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
                 searchResults.push({ type: 'unit', label: unit, value: unit });
             }
         });
-        this.customerOptions.forEach((unit) => {
+        this.customerOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
                 searchResults.push({ type: 'customer', label: unit, value: unit });
             }
         });
-        if (this.materialOptions && this.materialOptions.length) {
-            this.materialOptions.forEach((unit) => {
-                if (unit.toLowerCase().includes(filterValue)) {
-                    searchResults.push({ type: 'material', label: unit, value: unit });
-                }
-            });
-        }
-        this.pickupOptions.forEach((unit) => {
+        this.materialOptions.map((unit) => {
+            if (unit.toLowerCase().includes(filterValue)) {
+                searchResults.push({ type: 'material', label: unit, value: unit });
+            }
+        });
+        this.pickupOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
                 searchResults.push({
                     type: 'pickup location',
@@ -283,7 +251,7 @@ class UtilsService {
                 });
             }
         });
-        this.destOptions.forEach((unit) => {
+        this.destOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
                 searchResults.push({
                     type: 'destination location',
@@ -292,7 +260,7 @@ class UtilsService {
                 });
             }
         });
-        this.jcodeOptions.forEach((unit) => {
+        this.jcodeOptions.map((unit) => {
             if (unit.job_code.toLowerCase().includes(filterValue)) {
                 searchResults.push({
                     type: 'job',
@@ -301,12 +269,12 @@ class UtilsService {
                 });
             }
         });
-        this.driverOption.forEach((unit) => {
+        this.driverOption.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
                 searchResults.push({ type: 'Driver', label: unit, value: unit });
             }
         });
-        this.truckingCompanayOption.forEach((unit) => {
+        this.truckingCompanayOption.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
                 searchResults.push({
                     type: 'Trucking Company',
@@ -315,19 +283,20 @@ class UtilsService {
                 });
             }
         });
-        this.routeNameOptions.forEach((unit) => {
+        this.routeNameOptions.map((unit) => {
             if (unit.toLowerCase().includes(filterValue)) {
                 searchResults.push({ type: 'Route name', label: unit, value: unit });
             }
         });
-        // Filter out options that are already selected in the filters array
         const searchDict = {};
-        filters.forEach((filter) => {
+        filters.map((filter) => {
             searchDict[filter['name'] + filter['type']] = filter;
         });
         const furtherFilter = [];
-        searchResults.forEach((search) => {
-            if (!(search['label'] + search['type'] in searchDict)) {
+        searchResults.map((search) => {
+            if (search['label'] + search['type'] in searchDict) {
+            }
+            else {
                 furtherFilter.push(search);
             }
         });
@@ -338,13 +307,15 @@ class UtilsService {
             const result_list_boolean = [];
             if (filterval.length > 0) {
                 if (filterval[0]['type'] === 'unit') {
-                    result_list_boolean.push(filterval[0]['name'] === element['unit']);
+                    result_list_boolean.push(filterval[0]['name'] ===
+                        element[filterval[0]['type']]);
                 }
                 if (filterval[0]['type'] === 'customer') {
                     result_list_boolean.push(filterval[0]['name'] === element['customer_name']);
                 }
                 if (filterval[0]['type'] === 'material') {
-                    result_list_boolean.push(filterval[0]['name'] === element['material']);
+                    result_list_boolean.push(filterval[0]['name'] ===
+                        element[filterval[0]['type']]);
                 }
                 if (filterval[0]['type'] === 'pickup location') {
                     result_list_boolean.push(filterval[0]['name'] === element['pickup_location']);
@@ -359,16 +330,14 @@ class UtilsService {
                     result_list_boolean.push(filterval[0]['name'] === element['route_name']);
                 }
                 if (filterval[0]['type'] === 'Driver') {
-                    const driverList = element.driver_list || [];
-                    const index = driverList.findIndex((ele) => {
+                    const index = element.driver_list?.findIndex((ele) => {
                         return filterval[0]['name'] === ele['driver_name'];
                     });
                     if (index !== -1)
                         result_list_boolean.push(true);
                 }
                 if (filterval[0]['type'] === 'Trucking Company') {
-                    const driverList = element.driver_list || [];
-                    const index = driverList.findIndex((ele) => {
+                    const index = element.driver_list?.findIndex((ele) => {
                         return filterval[0]['name'] === ele['trucking_company'];
                     });
                     if (index !== -1)
@@ -381,8 +350,32 @@ class UtilsService {
             return false;
         });
     }
+    clearOptions() {
+        this.pickupOptions = [];
+        this.destOptions = [];
+        this.ownerOptions = [];
+        this.customerOptions = [];
+        this.unitOptions = [];
+        this.materialOptions = [];
+        this.jcodeOptions = [];
+        this.routeNameOptions = [];
+    }
+    setdictValue(key, value) {
+        this.dict.set(key, value);
+    }
+    getdictValue(key) {
+        return JSON.parse(this.dict.get(key));
+    }
+    removedictValue(key) {
+        this.dict.delete(key);
+    }
+    conveySearchIcon(value) {
+        if (value && typeof value !== 'object')
+            return true;
+        return false;
+    }
     fetchUnitsList() {
-        return new Promise((resolve) => {
+        return new Promise((resolve, reject) => {
             if (!this.unitsList) {
                 this.getData('unit/list/view').subscribe((res) => {
                     if (res) {
@@ -396,38 +389,49 @@ class UtilsService {
             }
         });
     }
-    fetchMaterialsListForCustomer() {
-        return new Promise((resolve) => {
-            if (!this.materialsListForCustomer) {
+    fetchMaterialsList() {
+        return new Promise((resolve, reject) => {
+            if (!this.materialsList) {
                 this.getData('material/list/view').subscribe((res) => {
-                    this.materialsListForCustomer = this.filtermaterialList(res.data);
-                    resolve(this.materialsListForCustomer);
+                    res.data.sort((a, b) => a.material.localeCompare(b.material));
+                    this.materialsList = res.data;
+                    resolve(this.materialsList);
                 });
             }
             else {
-                resolve(this.materialsListForCustomer);
+                resolve(this.materialsList);
             }
         });
     }
-    filtermaterialList(list) {
-        let meterialList = [];
-        list.forEach((item) => {
-            if (item.sub && item.sub.length > 0) {
-                item.sub.forEach((subItem) => {
-                    if (subItem.add_to_marketplace) {
-                        subItem.material = item.material;
-                        subItem.material_id = item.material_id;
-                        subItem.label = item.material + ' | ' + subItem.sub_material;
-                        meterialList.push(subItem);
-                    }
+    fetchMaterialsListForCustomer() {
+        return new Promise((resolve, reject) => {
+            if (!this.materialsListForCustomer) {
+                this.getData('material/list/view').subscribe((res) => {
+                    let meterialListDetails = [];
+                    res.data.map((item) => {
+                        if (item.sub.length > 0) {
+                            item.sub.map((subItem) => {
+                                if (subItem.add_to_marketplace) {
+                                    subItem.material = item.material;
+                                    subItem.material_id = item.material_id;
+                                    subItem.label = item.material + ' | ' + subItem.sub_material;
+                                    meterialListDetails.push(subItem);
+                                }
+                            });
+                        }
+                    });
+                    meterialListDetails.sort((a, b) => a.label.localeCompare(b.label));
+                    this.materialsListForCustomer = meterialListDetails;
+                    resolve(this.materialsListForCustomer);
                 });
             }
+            else {
+                resolve(this.materialsListForCustomer);
+            }
         });
-        meterialList.sort((a, b) => a.label.localeCompare(b.label));
-        return meterialList;
     }
     fetchCustomersList() {
-        return new Promise((resolve) => {
+        return new Promise((resolve, reject) => {
             if (!this.customersList) {
                 this.getData('company/list/view').subscribe((res) => {
                     if (res) {
@@ -441,168 +445,74 @@ class UtilsService {
             }
         });
     }
-    fetchLocationlist() {
-        return new Promise((resolve, reject) => {
-            this.getRestData('locations/all').subscribe({
-                next: (res) => {
-                    if (res) {
-                        this.locationList = res.data.map((object) => {
-                            object.formatted_address = `${object.name} | ${object.street} ${object.city}, ${object.state} ${object.zip}`;
-                            return {
-                                city: object.city,
-                                lng: object.longitude,
-                                location_id: object.location_id,
-                                lat: object.latitude,
-                                name: object.name,
-                                state: object.state,
-                                street: object.street,
-                                zip: object.zip,
-                                formatted_address: object.formatted_address
-                            };
-                        });
-                        resolve(this.locationList);
-                    }
-                },
-                error: (err) => {
-                    console.error(err);
-                    reject(err);
-                }
-            });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: UtilsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilsService, deps: [{ token: i1.HttpClient }, { token: i2.MatSnackBar }, { token: 'memberData' }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: UtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.MatSnackBar }, { type: CoolmapConfigModel, decorators: [{
+                    type: Inject,
+                    args: ['memberData']
+                }] }, { type: i0.NgZone }] });
 
-class MapboxService {
+class CoolmapService {
+    utils;
+    eventManager;
+    config;
     map;
-    mapContainer = null;
-    resizeObserver = null;
-    markerOriginList = new Map();
-    markerDestinationList = new Map();
-    activeRoutesRegistry = new Map();
-    pathCache = new Map();
-    // Native 3D Simulation Engine 
-    svgOverlay = null;
-    activeArcs = {};
+    markerOriginList = [];
+    markerDestinationList = [];
     initiatecoolmap = new BehaviorSubject(true);
     reintiatecoolmap = this.initiatecoolmap.asObservable();
-    isMapReady = signal(false, ...(ngDevMode ? [{ debugName: "isMapReady" }] : []));
     bounds = new mapboxgl.LngLatBounds();
-    originDestinationCordinates = new Map();
+    originDestinationCordinates = [];
     padding;
-    windowActualHeightWidth = { availHeight: 0 };
+    windowActualHeightWidth;
     popup;
     customTopForCustomer;
-    utils = inject(UtilsService);
-    config = inject(COOLMAP_CONFIG);
-    currentStyleIsDark = false;
-    constructor() {
-        ensureMapboxWorker();
+    constructor(utils, eventManager, config) {
+        this.utils = utils;
+        this.eventManager = eventManager;
+        this.config = config;
         this.customTopForCustomer = this.config.repository === 'customer' ? 65 : 0;
-        if (typeof window !== 'undefined') {
-            this.windowActualHeightWidth.availHeight = window.innerHeight > window.screen.availHeight ? window.innerHeight : window.screen.availHeight;
-            window.addEventListener('resize', this.onResize.bind(this));
-        }
+        this.windowActualHeightWidth = { availHeight: 0 };
+        window.addEventListener('resize', this.onResize.bind(this));
     }
-    updateTheme(isDark) {
-        if (!this.map) {
-            this.currentStyleIsDark = isDark;
-            return;
-        }
-        if (this.currentStyleIsDark === isDark)
-            return;
-        this.currentStyleIsDark = isDark;
-        const style = isDark
-            ? 'mapbox://styles/mapbox/dark-v11'
-            : 'mapbox://styles/mapbox/light-v11';
-        this.map.setStyle(style);
-        this.map.once('style.load', () => {
-            this.reAddLayers();
-        });
-    }
-    getRegistryKeys() {
-        return Array.from(this.activeRoutesRegistry.keys());
-    }
-    // Renamed to initializeMap to preserve the existing bindings in coolmap.component.ts
-    initializeMap(el, isDark = false) {
-        this.currentStyleIsDark = isDark;
-        const styleUrl = isDark ? 'mapbox://styles/mapbox/dark-v11' : 'mapbox://styles/mapbox/light-v11';
-        // If map already exists for this container, just update style and clear routes to avoid flickering
-        if (this.map && this.mapContainer === el) {
-            el.style.transition = 'opacity 0.3s ease-in-out';
-            el.style.opacity = '0.7';
-            this.map.setStyle(styleUrl);
-            return new Promise((resolve) => {
-                this.map.once('style.load', () => {
-                    this.clearAllRoutes();
-                    this.isMapReady.set(true);
-                    el.style.opacity = '1';
-                    resolve(this.map);
-                });
-            });
-        }
+    initiateMapForAddRoute(el) {
         return new Promise((resolve, reject) => {
-            this.mapContainer = el;
-            if (this.map) {
+            if (this.map)
                 this.map.remove();
-                if (this.resizeObserver) {
-                    this.resizeObserver.disconnect();
-                    this.resizeObserver = null;
-                }
-            }
-            // Add a smooth fade-in for fresh initialization
-            el.style.transition = 'opacity 0.5s ease-in-out';
-            el.style.opacity = '0';
-            const token = typeof window !== 'undefined' ? window.__env?.mapboxAccessToken || '' : '';
-            const mapbox = ensureMapboxWorker();
-            mapbox.accessToken = token;
-            this.map = new mapbox.Map({
+            this.map = new mapboxgl.Map({
+                accessToken: this.config.mapboxAccessToken,
                 container: el,
-                style: styleUrl,
+                style: this.config.mapboxStyle,
                 center: [-77.036873, 38.907192],
                 zoom: 10,
                 bearing: 0,
                 pitch: 65,
                 interactive: true,
-                attributionControl: false,
-                antialias: true,
-                projection: { name: 'globe' }
-            });
-            this.map.addControl(new mapboxgl.AttributionControl({ compact: true }), 'bottom-right');
-            this.map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-right');
-            this.resizeObserver = new ResizeObserver(() => {
-                if (this.map) {
-                    this.map.resize();
-                }
             });
-            this.resizeObserver.observe(el);
             this.map.once('load', (res) => {
-                this.isMapReady.set(true);
-                if (this.mapContainer)
-                    this.mapContainer.style.opacity = '1';
                 resolve(res);
             });
         });
     }
-    // Animated gradient path
-    loadMapProperty(pinRouteGeojson, index, unit, routeProps, bottom) {
-        return new Promise((resolve) => {
-            if (!this.map || !this.isMapReady())
-                return resolve(false);
-            const origin = pinRouteGeojson.features[0].geometry.coordinates[0];
+    //  Below method Load route with animation
+    loadMapProperty(pinRouteGeojson, index, unit, route, bottom) {
+        return new Promise((resolve, reject) => {
+            let origin = pinRouteGeojson.features[0].geometry.coordinates[0];
             const linecolor = unit === 'Ton' ? '#ff7272' : unit === 'Load' ? '#a3c52e' : '#ae23d1';
-            const destination = pinRouteGeojson.features[0].geometry.coordinates[pinRouteGeojson.features[0].geometry.coordinates.length - 1];
-            const registryId = `addroute-${index}`;
-            this.extendBound(pinRouteGeojson.features[0].geometry.coordinates, true, registryId).then(() => {
+            let destination = pinRouteGeojson.features[0].geometry.coordinates[pinRouteGeojson.features[0].geometry.coordinates.length - 1];
+            this.extendBound(pinRouteGeojson.features[0].geometry.coordinates, true).then((res) => {
                 const point = {
                     type: 'FeatureCollection',
                     features: [
-                        { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: origin } },
+                        {
+                            type: 'Feature',
+                            properties: {},
+                            geometry: { type: 'Point', coordinates: origin },
+                        },
                     ],
                 };
                 const lineDistance = turf.length(pinRouteGeojson.features[0]);
@@ -614,356 +524,256 @@ class MapboxService {
                 }
                 pinRouteGeojson.features[0].geometry.coordinates = arc;
                 const pinRoute = pinRouteGeojson.features[0].geometry.coordinates;
-                if (pinRoute && pinRoute.length) {
-                    const marker = new mapboxgl.Marker(document.createElement('div'))
-                        .setLngLat(pinRoute[0])
-                        .addTo(this.map)
-                        .togglePopup();
-                    if (this.map.getSource(`line${index}`)) {
-                        this.removeRouteAndMarker(index, 'addroute').then(() => { });
-                    }
-                    this.map.addSource(`line${index}`, {
-                        type: 'geojson',
-                        lineMetrics: true,
-                        data: pinRouteGeojson,
-                    });
-                    this.map.addLayer({
-                        type: 'line',
-                        source: `line${index}`,
-                        id: `line${index}`,
-                        paint: {
-                            'line-width': 2,
-                            'line-gradient': [
-                                'interpolate', ['linear'], ['line-progress'],
-                                0, unit === 'Ton' ? '#d7f7e4' : unit === 'Load' ? '#c9d8f5' : '#f5dcc1',
-                                1, unit === 'Ton' ? '#ff7272' : unit === 'Load' ? '#a3c52e' : '#ae23d1',
-                            ],
-                        },
-                        layout: { 'line-cap': 'round', 'line-join': 'round' },
-                    });
-                    const dataSetForMap = {
-                        counter: 0,
-                        pinRouteGeojson,
-                        steps,
-                        point,
-                        pointId: `point${index}`,
-                        marker,
-                        pinRoute,
-                        lineId: `line${index}`,
-                        index,
-                        origin,
-                        destination,
-                        lineDistance,
-                        linecolor,
-                        route: routeProps,
-                        routeType: 'addroute',
-                        isViewRoute: true,
-                    };
-                    this.createMarker(dataSetForMap);
-                    this.map.on('mouseenter', `line${index}`, (e) => {
-                        this.map.setPaintProperty(`line${index}`, 'line-width', 5);
-                        this.map.setPaintProperty(`line${index}`, 'line-opacity', 1);
-                        const datasetForPopup = {
-                            coordinate: [e.lngLat.lng, e.lngLat.lat],
-                            pickup: routeProps?.pickup_location || '',
-                            drop: routeProps?.delivery_location || '',
-                            routeType: routeProps?.project ? 'Project' : 'Route',
-                            title: routeProps?.project ? routeProps.project : routeProps?.route_name || '',
-                            material: routeProps?.material || '',
-                            type: routeProps?.unit || '',
-                        };
-                        if (this.popup)
-                            this.popup.remove();
-                        this.createPopup(datasetForPopup);
-                    });
-                    this.map.on('mouseleave', `line${index}`, () => {
-                        this.map.setPaintProperty(`line${index}`, 'line-width', 2);
-                        if (this.popup)
-                            this.popup.remove();
-                    });
+                const marker = new mapboxgl.Marker(document.createElement('div'))
+                    .setLngLat(pinRoute[0])
+                    .addTo(this.map)
+                    .togglePopup();
+                if (this.map.getSource(`line${index}`)) {
+                    this.removeRouteAndMarker(index).then(() => { });
                 }
+                this.map.addSource(`line${index}`, {
+                    type: 'geojson',
+                    lineMetrics: true,
+                    data: pinRouteGeojson,
+                });
+                this.map.addLayer({
+                    type: 'line',
+                    source: `line${index}`,
+                    id: `line${index}`,
+                    paint: {
+                        'line-width': 2,
+                        'line-gradient': [
+                            'interpolate',
+                            ['linear'],
+                            ['line-progress'],
+                            0,
+                            unit === 'Ton'
+                                ? '#d7f7e4'
+                                : unit === 'Load'
+                                    ? '#c9d8f5'
+                                    : '#f5dcc1',
+                            1,
+                            unit === 'Ton'
+                                ? '#ff7272'
+                                : unit === 'Load'
+                                    ? '#a3c52e'
+                                    : '#ae23d1',
+                        ],
+                    },
+                    layout: { 'line-cap': 'round', 'line-join': 'round' },
+                });
+                const dataSetForMap = {
+                    counter: 0,
+                    pinRouteGeojson,
+                    steps,
+                    point,
+                    pointId: `point${index}`,
+                    marker,
+                    pinRoute,
+                    lineId: `line${index}`,
+                    index,
+                    origin,
+                    destination,
+                    lineDistance,
+                    linecolor,
+                    route,
+                    isViewRoute: true,
+                };
+                this.createMarker(dataSetForMap);
+                this.map.on('mouseenter', `line${index}`, (e) => {
+                    this.map.setPaintProperty(`line${index}`, 'line-width', 5);
+                    this.map.setPaintProperty(`line${index}`, 'line-opacity', 1);
+                    const datasetForPopup = {
+                        coordinate: [e.lngLat.lng, e.lngLat.lat],
+                        pickup: route.pickup_location ? route.pickup_location : '',
+                        drop: route.delivery_location ? route.delivery_location : '',
+                        routeType: route.project ? 'Project' : 'Route',
+                        title: route.project
+                            ? route.project
+                            : route.route_name
+                                ? route.route_name
+                                : '',
+                        material: route.materialLabel ? route.materialLabel : '',
+                        type: route.unit ? route.unit : '',
+                    };
+                    this.createPopup(datasetForPopup);
+                });
+                this.map.on('mouseleave', `line${index}`, (e) => {
+                    this.map.setPaintProperty(`line${index}`, 'line-width', 2);
+                    if (this.popup) {
+                        this.popup.remove();
+                    }
+                });
             });
-            this.map.once('idle', () => {
+            this.map.once('idle', (res) => {
                 resolve(true);
             });
         });
     }
-    createMarker(routeDetails) {
-        if (!this.map || !routeDetails.origin[0] || !routeDetails.origin[1] || !routeDetails.destination[0] || !routeDetails.destination[1])
-            return;
-        const popup = new mapboxgl.Popup({ closeButton: false, className: 'pointer-events-none', offset: 20 }).setHTML('<div class="p-3"><b>Pickup: </b>' + (routeDetails.route?.pickup_location || '') + '</div>');
-        const popupForDestination = new mapboxgl.Popup({ closeButton: false, className: 'pointer-events-none', offset: 20 }).setHTML('<div class="p-3"><b>Delivery: </b>' + (routeDetails.route?.delivery_location || '') + '</div>');
-        // Origin Marker (Pickup)
-        const el = document.createElement('div');
-        el.className = 'cursor-pointer active:scale-95 transition-transform duration-200 drop-shadow-lg';
-        el.style.zIndex = '100';
-        const pickupLabel = 'P';
-        el.innerHTML = `
-      <svg width="30" height="38" viewBox="0 0 30 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M15 0C6.71573 0 0 6.71573 0 15C0 26.25 15 38 15 38C15 38 30 26.25 30 15C30 6.71573 23.2843 0 15 0Z" fill="${routeDetails.linecolor}"/>
-        <circle cx="15" cy="15" r="9" fill="white"/>
-        <text x="15" y="19" text-anchor="middle" fill="black" style="font-family: Inter, sans-serif; font-size: 13px; font-weight: 800;">${pickupLabel}</text>
-      </svg>
-    `;
-        const originMarker = new mapboxgl.Marker({ element: el, anchor: 'bottom' })
-            .setLngLat(routeDetails.origin)
-            .addTo(this.map);
-        originMarker.getElement().addEventListener('mouseenter', () => {
-            popup.setLngLat(routeDetails.origin).addTo(this.map);
-        });
-        originMarker.getElement().addEventListener('mouseleave', () => {
-            popup.remove();
-        });
-        // Destination Marker (Delivery)
-        const elementForDestination = document.createElement('div');
-        elementForDestination.className = 'cursor-pointer active:scale-95 transition-transform duration-200 drop-shadow-lg';
-        elementForDestination.style.zIndex = '100';
-        const deliveryLabel = 'D';
-        elementForDestination.innerHTML = `
-      <svg width="30" height="38" viewBox="0 0 30 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M15 0C6.71573 0 0 6.71573 0 15C0 26.25 15 38 15 38C15 38 30 26.25 30 15C30 6.71573 23.2843 0 15 0Z" fill="${routeDetails.linecolor}"/>
-        <circle cx="15" cy="15" r="9" fill="white"/>
-        <text x="15" y="19" text-anchor="middle" fill="black" style="font-family: Inter, sans-serif; font-size: 13px; font-weight: 800;">${deliveryLabel}</text>
-      </svg>
-    `;
-        const destinationMarker = new mapboxgl.Marker({ element: elementForDestination, anchor: 'bottom' })
-            .setLngLat(routeDetails.destination)
-            .addTo(this.map);
-        destinationMarker.getElement().addEventListener('mouseenter', () => {
-            popupForDestination.setLngLat(routeDetails.destination).addTo(this.map);
-        });
-        destinationMarker.getElement().addEventListener('mouseleave', () => {
-            popupForDestination.remove();
-        });
-        const id = `${routeDetails.routeType}-${routeDetails.index}`;
-        this.markerOriginList.set(id, originMarker);
-        this.markerDestinationList.set(id, destinationMarker);
-        // True 3D Elevated Arc Simulation Engine using Native SVG Overlays
-        try {
-            this.initSvgOverlay();
-            const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            pathEl.setAttribute('fill', 'none');
-            pathEl.setAttribute('stroke-width', '3');
-            pathEl.style.cursor = 'pointer';
-            pathEl.style.pointerEvents = 'stroke'; // Allow interactivity!
-            const gradId = `arc-grad-${id}`;
-            const defs = this.svgOverlay.querySelector('defs');
-            let grad = defs.querySelector(`#${gradId}`);
-            if (!grad) {
-                grad = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
-                grad.setAttribute('id', gradId);
-                defs.appendChild(grad);
+    //  Below method Load route without animation
+    drawLine(cordinates, index, route, enablefitbound, routeType) {
+        let linecolor;
+        let origin = cordinates[0];
+        let destination = cordinates[cordinates.length - 1];
+        if (origin[0] &&
+            origin[1] &&
+            destination &&
+            destination[0] &&
+            destination[1]) {
+            linecolor = this.provideLineColor(route['unit'], routeType);
+            if (enablefitbound) {
+                const padding = {
+                    top: this.padding.top + this.customTopForCustomer,
+                    bottom: this.padding.bottom +
+                        (this.windowActualHeightWidth.availHeight -
+                            (window.innerHeight - 65)),
+                    left: this.padding.left,
+                    right: this.padding.right,
+                };
+                this.map.fitBounds([origin, destination], { padding, pitch: 65 }, { fitboundCompleteJob: true });
+            }
+            if (this.map.getSource(`route-source-for-job-code${index}`)) {
+                this.removeRouteAndMarker(index).then(() => { });
             }
-            grad.innerHTML = `
-        <stop offset="0%" stop-color="${routeDetails.linecolor}" stop-opacity="1"/>
-        <stop offset="100%" stop-color="#ffffff" stop-opacity="0.8"/>
-      `;
-            pathEl.setAttribute('stroke', `url(#${gradId})`);
-            this.svgOverlay.appendChild(pathEl);
-            this.activeArcs[id] = {
-                origin: routeDetails.origin,
-                destination: routeDetails.destination,
-                color: routeDetails.linecolor,
-                pathEl
+            this.map.addSource(`route-source-for-job-code${index}`, {
+                type: 'geojson',
+                data: {
+                    type: 'Feature',
+                    properties: {},
+                    geometry: { type: 'LineString', coordinates: cordinates },
+                },
+            });
+            this.map.addLayer({
+                id: `route-for-job-code${index}`,
+                type: 'line',
+                source: `route-source-for-job-code${index}`,
+                paint: { 'line-color': linecolor, 'line-width': 2 },
+                layout: { 'line-cap': 'round', 'line-join': 'round' },
+            });
+            const dataSetForMap = {
+                origin,
+                destination,
+                index,
+                linecolor,
+                route,
             };
-            // Native tooltips hovering strictly matching V1 Deck.GL behaviors
-            pathEl.addEventListener('mouseenter', (e) => {
-                pathEl.setAttribute('stroke-width', '6');
-                // Find geo coordinate exactly under cursor natively
-                const rect = this.svgOverlay.getBoundingClientRect();
-                const lngLat = this.map.unproject([e.clientX - rect.left, e.clientY - rect.top]);
-                const payload = {
-                    layer: { props: { data: { route: routeDetails.route, index: routeDetails.index, routeType: routeDetails.routeType } } },
-                    coordinate: [lngLat.lng, lngLat.lat],
-                    color: routeDetails.linecolor
+            this.createMarker(dataSetForMap);
+            this.map.on('mouseenter', `route-for-job-code${index}`, (e) => {
+                if (this.popup) {
+                    this.popup.remove();
+                }
+                this.map.setPaintProperty(`route-for-job-code${index}`, 'line-width', 5);
+                this.map.setPaintProperty(`route-for-job-code${index}`, 'line-opacity', 1);
+                const datasetForPopup = {
+                    coordinate: [e.lngLat.lng, e.lngLat.lat],
+                    pickup: route.pickup_location ? route.pickup_location : '',
+                    drop: route.delivery_location ? route.delivery_location : '',
+                    jobCode: route.project ? route.order_number : null,
+                    customer: route.project ? route.customer_name : null,
+                    routeType: route.project ? 'Project' : 'Route',
+                    title: route.project
+                        ? route.project
+                        : route.route_name
+                            ? route.route_name
+                            : '',
+                    material: route.materialLabel ? route.materialLabel : '',
+                    type: route.unit ? route.unit : '',
                 };
-                this.showRoutePopup(payload, e, routeDetails.isViewRoute);
+                this.createPopup(datasetForPopup);
             });
-            pathEl.addEventListener('mouseleave', () => {
-                pathEl.setAttribute('stroke-width', '3');
-                const payload = { color: null, layer: { props: { data: { index: routeDetails.index, routeType: routeDetails.routeType } } } };
-                this.showRoutePopup(payload, null, routeDetails.isViewRoute);
+            this.map.on('mouseleave', `route-for-job-code${index}`, (e) => {
+                this.map.setPaintProperty(`route-for-job-code${index}`, 'line-width', 2);
+                if (this.popup) {
+                    this.popup.remove();
+                }
             });
-            this.updateSvgPaths(); // Force plot
         }
-        catch (e) {
-            console.warn("Native overarching arc generation skipped:", e);
+    }
+    provideLineColor(unitType, type) {
+        let checkType = type && !['jobrouteList', 'addroute'].includes(type) ? true : false;
+        let color;
+        switch (unitType) {
+            case 'Ton':
+                color = checkType ? '#39c471' : '#ff7272';
+                break;
+            case 'Load':
+                color = checkType ? '#326ad3' : '#a3c52e';
+                break;
+            case 'Hourly':
+                color = checkType ? '#ffad56' : '#ae23d1';
+                break;
         }
+        return color;
     }
     showRoutePopup(arcDetails, event, isViewRoute) {
-        const data = arcDetails.layer.props.data;
-        const layerId = isViewRoute
-            ? `line${data.index}`
-            : `route-layer-${data.routeType || 'jobcode'}-${data.index}`;
         if (this.popup) {
             this.popup.remove();
-            if (this.map.getLayer(layerId)) {
-                this.map.setPaintProperty(layerId, 'line-width', 2);
-            }
+            this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-width', 2);
         }
-        if (arcDetails.color && this.map.getLayer(layerId) && this.map.getLayoutProperty(layerId, 'visibility') !== 'none') {
-            this.map.setPaintProperty(layerId, 'line-width', 5);
-            // Removed line-opacity overwrite here because bezier lines inherit opacity and break if set raw on a gradient.
+        if (arcDetails.color &&
+            this.map.getLayoutProperty(arcDetails.layer.id, 'visibility') !== 'none') {
+            this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-width', 5);
+            this.map.setPaintProperty(`${isViewRoute ? 'line' : 'route-for-job-code'}${arcDetails.layer.props.data.index}`, 'line-opacity', 1);
             const datasetForPopup = {
                 coordinate: arcDetails.coordinate,
-                pickup: arcDetails.layer.props.data.route.pickup_location || '',
-                drop: arcDetails.layer.props.data.route.delivery_location || '',
-                jobCode: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.order_number : '',
-                customer: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.customer_name : '',
-                routeType: arcDetails.layer.props.data.route.project ? 'Project' : 'Route',
-                title: arcDetails.layer.props.data.route.project ? arcDetails.layer.props.data.route.project : arcDetails.layer.props.data.route.route_name || '',
-                material: arcDetails.layer.props.data.route.material || '',
-                type: arcDetails.layer.props.data.route.unit || '',
+                pickup: arcDetails.layer.props.data.route.pickup_location
+                    ? arcDetails.layer.props.data.route.pickup_location
+                    : '',
+                drop: arcDetails.layer.props.data.route.delivery_location
+                    ? arcDetails.layer.props.data.route.delivery_location
+                    : '',
+                jobCode: arcDetails.layer.props.data.route.project
+                    ? arcDetails.layer.props.data.route.order_number
+                    : '',
+                customer: arcDetails.layer.props.data.route.project
+                    ? arcDetails.layer.props.data.route.customer_name
+                    : '',
+                routeType: arcDetails.layer.props.data.route.project
+                    ? 'Project'
+                    : 'Route',
+                title: arcDetails.layer.props.data.route.project
+                    ? arcDetails.layer.props.data.route.project
+                    : arcDetails.layer.props.data.route.route_name
+                        ? arcDetails.layer.props.data.route.route_name
+                        : '',
+                material: arcDetails.layer.props.data.route.materialLabel
+                    ? arcDetails.layer.props.data.route.materialLabel
+                    : '',
+                type: arcDetails.layer.props.data.route.unit
+                    ? arcDetails.layer.props.data.route.unit
+                    : '',
             };
             this.createPopup(datasetForPopup);
         }
     }
     createPopup(datasetForPopup) {
-        if (!this.map)
-            return;
         this.popup = new mapboxgl.Popup({
             closeButton: false,
             closeOnClick: false,
             closeOnMove: true,
-            className: 'pointer-events-none',
             anchor: 'bottom-left',
         });
-        // Extract location short names
-        const pickupDisplay = datasetForPopup.pickup?.split('|')[1] || datasetForPopup.pickup || 'Unknown Pickup';
-        const dropDisplay = datasetForPopup.drop?.split('|')[1] || datasetForPopup.drop || 'Unknown Delivery';
         this.popup
             .setLngLat(datasetForPopup.coordinate)
-            .setHTML(`<div class="destination p-3 bg-white dark:bg-slate-800 rounded shadow-lg text-sm text-gray-800 dark:text-gray-200">
-          <div class="duration space-y-1 mb-2 bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 px-2 py-2 rounded-lg text-[12px]">
-            <p class="pickprt text-green-600 dark:text-green-400"><b>Pickup Location:</b> ${pickupDisplay}</p>
-            <p class="dropprt text-red-600"><b>Drop Location:</b> ${dropDisplay}</p>
+            .setHTML(`
+      <div class="destination">
+          <div class="duration">
+            <p class="pickprt"><b>Pickup Location:</b> ${datasetForPopup.pickup}</p>
+            <p class="dropprt"><b>Drop Location:</b> ${datasetForPopup.drop}</p>
           </div>
-          ${datasetForPopup.jobCode ? `<span class="block text-xs text-gray-600 dark:text-gray-300 mb-1"><b>Job Code:</b> ${datasetForPopup.jobCode}</span>` : ''}
-          ${datasetForPopup.customer ? `<span class="block text-xs text-gray-600 dark:text-gray-300 mb-1"><b>Customer:</b> ${datasetForPopup.customer}</span>` : ''}
-          <span class="block text-xs text-gray-600 dark:text-gray-300 mb-1"><b>${datasetForPopup.routeType} Name:</b> ${datasetForPopup.title}</span>
-          ${datasetForPopup.material ? `<span class="block text-xs text-gray-600 dark:text-gray-300 mb-1"><b>Material:</b> ${datasetForPopup.material}</span>` : ''}
-          <span class="block text-xs text-gray-600 dark:text-gray-300 mb-1"><b>Type:</b> ${datasetForPopup.type}</span>
-      </div>`)
+          ${datasetForPopup.jobCode
+            ? '<span><b>Job Code:</b> ' + datasetForPopup.jobCode + '</span>'
+            : ''}
+          ${datasetForPopup.customer
+            ? '<span><b>Customer:</b> ' + datasetForPopup.customer + '</span>'
+            : ''}
+          <span><b>${datasetForPopup.routeType} Name:</b> ${datasetForPopup.title}</span>
+          <span><b>Material:</b> ${datasetForPopup.material}</span>
+          <span><b>Type:</b> ${datasetForPopup.type}</span>
+      </div>
+      `)
             .addTo(this.map);
     }
-    // Draw Line
-    drawLine(cordinates, index, route, enablefitbound, routeType, isStyleRefresh) {
-        return new Promise((resolve) => {
-            if (!this.map || !this.isMapReady()) {
-                resolve();
-                return;
-            }
-            // Calculate bounds for this specific route
-            const routeBounds = new mapboxgl.LngLatBounds();
-            if (cordinates && cordinates.length > 0) {
-                cordinates.forEach((coord) => routeBounds.extend(coord));
-            }
-            const registryId = `${routeType}-${index}`;
-            // Register the route with its coordinates and pre-calculated bounds
-            this.activeRoutesRegistry.set(registryId, {
-                cordinates,
-                route,
-                routeType,
-                bounds: routeBounds,
-                index
-            });
-            let origin = cordinates[0];
-            let destination = cordinates[cordinates.length - 1];
-            if (origin[0] && origin[1] && destination && destination[0] && destination[1]) {
-                // Execute plotting logic IMMEDIATELY to trigger the map's render cycle
-                const linecolor = this.provideLineColor(route['unit'], routeType);
-                if (enablefitbound) {
-                    const padTop = Math.max(0, (this.padding?.top || 0) + this.customTopForCustomer + 50);
-                    const padBot = Math.max(0, (this.padding?.bottom || 0) + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65)) + 50);
-                    const padLeft = Math.max(0, (this.padding?.left || 0) + 350);
-                    const padRight = Math.max(0, (this.padding?.right || 0) + 50);
-                    const customPadding = { top: padTop, bottom: padBot, left: padLeft, right: padRight };
-                    this.map.fitBounds([origin, destination], { padding: customPadding, pitch: 65 }, { fitboundCompleteJob: true });
-                }
-                const sourceId = `route-source-${routeType}-${index}`;
-                const layerId = `route-layer-${routeType}-${index}`;
-                if (this.map.getSource(sourceId)) {
-                    this.removeRouteAndMarker(index, routeType).then(() => {
-                        this.extendBound(cordinates, enablefitbound, registryId);
-                    });
-                }
-                this.map.addSource(sourceId, {
-                    type: 'geojson',
-                    data: {
-                        type: 'Feature',
-                        properties: {},
-                        geometry: { type: 'LineString', coordinates: cordinates },
-                    },
-                });
-                this.map.addLayer({
-                    id: layerId,
-                    type: 'line',
-                    source: sourceId,
-                    paint: { 'line-color': linecolor, 'line-width': 2 },
-                    layout: { 'line-cap': 'round', 'line-join': 'round' },
-                });
-                if (!isStyleRefresh) {
-                    const dataSetForMap = { origin, destination, index, linecolor, route, routeType };
-                    this.createMarker(dataSetForMap);
-                }
-                this.map.on('mouseenter', layerId, (e) => {
-                    if (this.popup)
-                        this.popup.remove();
-                    this.map.setPaintProperty(layerId, 'line-width', 5);
-                    this.map.setPaintProperty(layerId, 'line-opacity', 1);
-                    const datasetForPopup = {
-                        coordinate: [e.lngLat.lng, e.lngLat.lat],
-                        pickup: route.pickup_location || '',
-                        drop: route.delivery_location || '',
-                        jobCode: route.project ? route.order_number : null,
-                        customer: route.project ? route.customer_name : null,
-                        routeType: route.project ? 'Project' : 'Route',
-                        title: route.project ? route.project : route.route_name || '',
-                        material: route.material || '',
-                        type: route.unit || '',
-                    };
-                    this.createPopup(datasetForPopup);
-                });
-                this.map.on('mouseleave', layerId, () => {
-                    this.map.setPaintProperty(layerId, 'line-width', 2);
-                    if (this.popup)
-                        this.popup.remove();
-                });
-                // SAFETY: Use a timeout to ensure resolve() is always called even if 'idle' event skips
-                let resolved = false;
-                const complete = () => {
-                    if (!resolved) {
-                        resolved = true;
-                        resolve();
-                    }
-                };
-                this.map.once('idle', complete);
-                setTimeout(complete, 500); // 500ms safety timeout
-            }
-            else {
-                resolve();
-            }
-        });
-    }
-    provideLineColor(unitType, type) {
-        let checkType = type && !['jobrouteList', 'addroute', 'viewroute'].includes(type) ? true : false;
-        let color;
-        switch (unitType) {
-            case 'Ton':
-                color = checkType ? '#39c471' : '#ff7272';
-                break;
-            case 'Load':
-                color = checkType ? '#326ad3' : '#a3c52e';
-                break;
-            case 'Hourly':
-                color = checkType ? '#ffad56' : '#ae23d1';
-                break;
-            default:
-                color = '#3b82f6';
-                break;
-        }
-        return color;
-    }
     hexToRGB(hex) {
         return hex
             .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
@@ -971,147 +781,105 @@ class MapboxService {
             .match(/.{2}/g)
             .map((x) => parseInt(x, 16));
     }
-    // --- SVG 3D Engine Methods ---
-    initSvgOverlay() {
-        if (this.svgOverlay || !this.mapContainer)
-            return;
-        this.svgOverlay = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        this.svgOverlay.style.position = 'absolute';
-        this.svgOverlay.style.top = '0';
-        this.svgOverlay.style.left = '0';
-        this.svgOverlay.style.width = '100%';
-        this.svgOverlay.style.height = '100%';
-        this.svgOverlay.style.pointerEvents = 'none';
-        this.svgOverlay.style.zIndex = '10';
-        const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-        this.svgOverlay.appendChild(defs);
-        this.mapContainer.appendChild(this.svgOverlay);
-        this.map.on('render', () => this.updateSvgPaths());
-    }
-    updateSvgPaths() {
-        if (!this.svgOverlay || !this.map)
-            return;
-        for (const key in this.activeArcs) {
-            const arc = this.activeArcs[key];
-            const p1 = this.map.project(arc.origin);
-            const p2 = this.map.project(arc.destination);
-            // Safety Guard: Check for Infinity and extreme numbers (Number.MAX_VALUE) 
-            // which Mapbox can return during transitions. 
-            // 1e15 is a safe threshold for JS math and SVG rendering engines.
-            const isUsable = (p) => Number.isFinite(p.x) && Math.abs(p.x) < 1e15 &&
-                Number.isFinite(p.y) && Math.abs(p.y) < 1e15;
-            if (!isUsable(p1) || !isUsable(p2))
-                continue;
-            const dx = p2.x - p1.x;
-            const dy = p2.y - p1.y;
-            const dist = Math.sqrt(dx * dx + dy * dy);
-            // Secondary check for distance finiteness
-            if (!Number.isFinite(dist) || dist > 1e15)
-                continue;
-            const mx = (p1.x + p2.x) / 2;
-            let controlY = ((p1.y + p2.y) / 2) - (dist * 1.05);
-            // Final sanity check for calculated curve peaks
-            controlY = Math.max(100, controlY);
-            if (!Number.isFinite(controlY) || !Number.isFinite(mx))
-                continue;
-            // Update with rounded values to ensure clean and valid attribute data
-            arc.pathEl.setAttribute('d', `M ${p1.x.toFixed(2)} ${p1.y.toFixed(2)} Q ${mx.toFixed(2)} ${controlY.toFixed(2)} ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`);
-            // Sync the gradient positioning physically mapped to coordinate space
-            const grad = this.svgOverlay.querySelector(`#arc-grad-${key}`);
-            if (grad) {
-                const minX = Math.min(p1.x, p2.x);
-                const maxX = Math.max(p1.x, p2.x);
-                const minY = Math.min(p1.y, p2.y, controlY);
-                const maxY = Math.max(p1.y, p2.y, controlY);
-                const w = Math.max(1, maxX - minX);
-                const h = Math.max(1, maxY - minY);
-                grad.setAttribute('x1', `${((p1.x - minX) / w) * 100}%`);
-                grad.setAttribute('y1', `${((p1.y - minY) / h) * 100}%`);
-                grad.setAttribute('x2', `${((p2.x - minX) / w) * 100}%`);
-                grad.setAttribute('y2', `${((p2.y - minY) / h) * 100}%`);
-            }
+    createMarker(routeDetails) {
+        if (routeDetails.origin[0] &&
+            routeDetails.origin[1] &&
+            routeDetails.destination[0] &&
+            routeDetails.destination[1]) {
+            const popup = new mapboxgl.Popup({ closeButton: false }).setHTML('<b>Pickup: </b>' + routeDetails.route?.pickup_location);
+            const popupForDestination = new mapboxgl.Popup({
+                closeButton: false,
+            }).setHTML('<b>Delivery: </b>' + routeDetails.route?.delivery_location);
+            const el = document.createElement('div');
+            el.className = 'marker';
+            el.innerHTML = `<span class='markerPointer' style='background:${routeDetails.linecolor}'><b>P</b><span class='markerSpan' style='border-top: 10px solid ${routeDetails.linecolor}'></span></span>`;
+            const originMarker = new mapboxgl.Marker(el)
+                .setPopup(popup)
+                .setLngLat(routeDetails.origin)
+                .addTo(this.map);
+            originMarker
+                .getElement()
+                .addEventListener('mouseenter', () => originMarker.togglePopup());
+            originMarker
+                .getElement()
+                .addEventListener('mouseleave', () => originMarker.togglePopup());
+            const elementForDestination = document.createElement('div');
+            elementForDestination.className = 'marker';
+            elementForDestination.innerHTML = `<span class='markerPointer' style='background:${routeDetails.linecolor}'><b>D</b><span class='markerSpan' style='border-top: 10px solid ${routeDetails.linecolor}'></span></span>`;
+            const destinationMarker = new mapboxgl.Marker(elementForDestination)
+                .setPopup(popupForDestination)
+                .setLngLat(routeDetails.destination)
+                .addTo(this.map);
+            destinationMarker
+                .getElement()
+                .addEventListener('mouseenter', () => destinationMarker.togglePopup());
+            destinationMarker
+                .getElement()
+                .addEventListener('mouseleave', () => destinationMarker.togglePopup());
+            this.markerOriginList[routeDetails.index] = originMarker;
+            this.markerDestinationList[routeDetails.index] = destinationMarker;
+            const colorArray = this.hexToRGB(routeDetails.linecolor);
+            const arcLayer = new MapboxLayer({
+                id: 'arc-layer' + routeDetails.index,
+                type: ArcLayer,
+                pickable: true,
+                data: { route: routeDetails.route, index: routeDetails.index },
+                getWidth: 1,
+                getSourcePosition: routeDetails.origin,
+                getTargetPosition: routeDetails.destination,
+                getTargetColor: [255, 255, 255],
+                getSourceColor: [colorArray[0], colorArray[1], colorArray[2]],
+                onHover: (info, event) => this.showRoutePopup(info, event, routeDetails.isViewRoute),
+            });
+            this.map.addLayer(arcLayer);
         }
     }
-    async removeRouteAndMarker(index, routeType = 'jobcode') {
-        const registryId = `${routeType}-${index}`;
-        // Clean up registry
-        if (this.activeRoutesRegistry.has(registryId)) {
-            this.activeRoutesRegistry.delete(registryId);
-        }
-        if (!this.map)
-            return true;
-        try {
-            if (this.activeArcs[registryId]) {
-                const arc = this.activeArcs[registryId];
-                if (arc.pathEl.parentNode)
-                    arc.pathEl.parentNode.removeChild(arc.pathEl);
-                delete this.activeArcs[registryId];
-            }
-            if (this.svgOverlay) {
-                const grad = this.svgOverlay.querySelector(`defs #arc-grad-${registryId}`);
-                if (grad && grad.parentNode)
-                    grad.parentNode.removeChild(grad);
-            }
-            const layerId = `route-layer-${routeType}-${index}`;
-            const sourceId = `route-source-${routeType}-${index}`;
-            this.map.getLayer(layerId) ? this.map.removeLayer(layerId) : null;
-            this.map.getLayer(`line${index}`) ? this.map.removeLayer(`line${index}`) : null;
-            this.map.getSource(sourceId) ? this.map.removeSource(sourceId) : null;
-            this.map.getSource(`line${index}`) ? this.map.removeSource(`line${index}`) : null;
-            this.markerOriginList.get(registryId)?.remove();
-            this.markerOriginList.delete(registryId);
-            this.markerDestinationList.get(registryId)?.remove();
-            this.markerDestinationList.delete(registryId);
-            this.markerOriginList.get(String(index))?.remove();
-            this.markerDestinationList.get(String(index))?.remove();
-            this.originDestinationCordinates.delete(registryId);
-            this.originDestinationCordinates.delete(String(index));
-            if (this.popup)
-                this.popup.remove();
-            return true;
-        }
-        catch (e) {
-            console.warn('Error removing route/marker:', e);
-            return false;
+    async removeRouteAndMarker(index) {
+        if (this.map) {
+            this.map.getLayer(`arc-layer${index}`)
+                ? this.map.removeLayer(`arc-layer${index}`)
+                : '';
+            this.map.getLayer(`line${index}`)
+                ? this.map.removeLayer(`line${index}`)
+                : '';
+            this.map.getLayer(`custom_layer${index}`)
+                ? this.map.removeLayer(`custom_layer${index}`)
+                : '';
+            this.map.getSource(`line${index}`)
+                ? this.map.removeSource(`line${index}`)
+                : '';
+            this.map.getLayer(`route-for-job-code${index}`)
+                ? this.map.removeLayer(`route-for-job-code${index}`)
+                : '';
+            this.map.getSource(`route-source-for-job-code${index}`)
+                ? this.map.removeSource(`route-source-for-job-code${index}`)
+                : '';
+            this.findMarkerBound(index);
+            this.markerOriginList[index] ? this.markerOriginList[index].remove() : '';
+            this.markerDestinationList[index]
+                ? this.markerDestinationList[index].remove()
+                : '';
+            await true;
         }
     }
-    reAddLayers() {
-        this.activeRoutesRegistry.forEach((data, regId) => {
-            // Use the stored raw index instead of the composite registry key
-            this.drawLine(data.cordinates, data.index, data.route, false, data.routeType, true);
-        });
-    }
     findMarkerBound(index) {
-        const id = String(index);
-        const originMarker = this.markerOriginList.get(id);
-        const originLng = originMarker?.getLngLat()?.lng;
-        const originLat = originMarker?.getLngLat()?.lat;
-        if (originLng !== undefined && originLat !== undefined) {
-            for (const [key, x] of this.originDestinationCordinates.entries()) {
-                if (x[0][0].toFixed(6) === originLng.toFixed(6) &&
-                    x[0][1].toFixed(6) === originLat.toFixed(6)) {
-                    this.originDestinationCordinates.delete(key);
-                    break;
-                }
-            }
+        const indexOfCordinates = this.originDestinationCordinates.findIndex((x) => x[0][0].toFixed(6) ==
+            this.markerOriginList[index]?.getLngLat()?.lng.toFixed(6) &&
+            x[0][1].toFixed(6) ==
+                this.markerOriginList[index]?.getLngLat()?.lat.toFixed(6));
+        if (indexOfCordinates >= 0) {
+            this.originDestinationCordinates.splice(indexOfCordinates, 1);
         }
     }
     async filterRoute(ID, visibility, showAllFitbound) {
-        if (ID && this.map) {
+        if (ID) {
             if (this.map.getLayer(`route-for-job-code${ID}`)) {
                 this.map.setLayoutProperty(`route-for-job-code${ID}`, 'visibility', visibility);
-                const id = String(ID);
-                const originM = this.markerOriginList.get(id);
-                if (originM) {
-                    originM.getElement().style.display = visibility === 'visible' ? 'block' : 'none';
-                }
-                const destinationM = this.markerDestinationList.get(id);
-                if (destinationM) {
-                    destinationM.getElement().style.display = visibility === 'visible' ? 'block' : 'none';
-                }
-                if (this.activeArcs[ID]) {
-                    this.activeArcs[ID].pathEl.style.display = visibility === 'visible' ? 'block' : 'none';
-                }
+                const originM = this.markerOriginList[ID].getElement();
+                originM.style.display = visibility === 'visible' ? 'block' : visibility;
+                const destinationM = this.markerDestinationList[ID].getElement();
+                destinationM.style.display =
+                    visibility === 'visible' ? 'block' : visibility;
                 if (visibility === 'none' && showAllFitbound) {
                     this.findMarkerBound(ID);
                     this.extendReBound();
@@ -1121,320 +889,154 @@ class MapboxService {
                 this.map.setLayoutProperty(`arc-layer${ID}`, 'visibility', visibility);
             }
         }
-        return true;
+        await true;
     }
-    extendBound(route, showAllFitbound, id) {
-        return new Promise((resolve) => {
-            if (route && this.map && id) {
+    extendBound(route, showAllFitbound) {
+        return new Promise((resolve, reject) => {
+            if (route) {
                 if (typeof route === 'string') {
                     let path = route.split(';');
-                    path = path.map((ele) => this.formateLatLong(ele));
-                    path = path.filter((ele) => ele && ele.length > 1);
+                    path = path.map((ele) => {
+                        return (ele = this.formateLatLong(ele));
+                    });
+                    path.forEach((ele, index) => {
+                        if (ele.length === 1)
+                            path.splice(index, 1);
+                    });
                     route = path;
                 }
-                if (route[0] && route[0][0] && route[0][1] && route[route.length - 1] && route[route.length - 1][0] && route[route.length - 1][1]) {
-                    this.originDestinationCordinates.set(id, route);
-                }
-            }
-            const localBounds = new mapboxgl.LngLatBounds();
-            if (this.originDestinationCordinates.size > 0) {
-                this.originDestinationCordinates.forEach((routeItem) => {
-                    routeItem.forEach((coord) => {
-                        localBounds.extend(coord);
+                if (route[0][0] &&
+                    route[0][1] &&
+                    route[route.length - 1][0] &&
+                    route[route.length - 1][1]) {
+                    this.originDestinationCordinates.push(route);
+                    route.map((item) => {
+                        this.bounds.extend(item);
                     });
-                });
+                }
             }
-            this.bounds = localBounds;
-            if (showAllFitbound && this.map && !localBounds.isEmpty()) {
-                requestAnimationFrame(() => {
-                    this.map.stop();
-                    this.map.fitBounds(localBounds, {
-                        pitch: 65,
-                        maxZoom: 12,
-                        padding: 100,
-                        duration: 1000
-                    }, { fitboundComplete: true });
-                });
+            if (showAllFitbound) {
+                setTimeout(() => {
+                    if (showAllFitbound && Object.keys(this.bounds).length > 0)
+                        this.map.fitBounds(this.bounds, { pitch: 65 }, { fitboundComplete: true });
+                }, 100);
                 this.map.once('moveend', (event) => {
                     if (event.fitboundComplete) {
                         resolve(true);
                     }
                 });
             }
-            else {
-                resolve(true);
-            }
         });
     }
     extendReBound(bottom) {
-        return new Promise((resolve) => {
-            const localBounds = new mapboxgl.LngLatBounds();
-            if (this.originDestinationCordinates.size > 0) {
-                this.originDestinationCordinates.forEach((item) => {
-                    item.forEach((route) => {
-                        localBounds.extend(route);
+        return new Promise((resolve, reject) => {
+            this.bounds = new mapboxgl.LngLatBounds();
+            if (this.originDestinationCordinates.length >= 0) {
+                this.originDestinationCordinates.map((item, index) => {
+                    item.map((route) => {
+                        this.bounds.extend(route);
                     });
-                });
-                this.bounds = localBounds;
-                const padTop = Math.max(0, (this.padding?.top || 0) + this.customTopForCustomer + 80);
-                const padBot = Math.max(0, (this.padding?.bottom || 0) + (this.windowActualHeightWidth.availHeight - (window.innerHeight - 65)) + 80);
-                const padLeft = Math.max(0, (this.padding?.left || 0) + 350);
-                const padRight = Math.max(0, (this.padding?.right || 0) + 80);
-                const customPadding = {
-                    top: padTop, bottom: padBot,
-                    left: padLeft, right: padRight,
-                };
-                requestAnimationFrame(() => {
-                    if (!localBounds.isEmpty() && this.map) {
-                        this.map.stop();
-                        this.map.fitBounds(localBounds, {
-                            padding: customPadding,
-                            pitch: 65,
-                            maxZoom: 12,
-                            duration: 1000
-                        });
+                    if (index === this.originDestinationCordinates.length - 1) {
+                        const padding = {
+                            top: this.padding.top + this.customTopForCustomer,
+                            bottom: this.padding.bottom +
+                                (this.windowActualHeightWidth.availHeight -
+                                    (window.innerHeight - 65)),
+                            left: this.padding.left,
+                            right: this.padding.right,
+                        };
+                        setTimeout(() => {
+                            if (this.originDestinationCordinates.length > 0)
+                                this.map.fitBounds(this.bounds, { padding, pitch: 65 });
+                        }, 500);
+                        resolve(true);
                     }
                 });
-                resolve(true);
             }
             else {
                 resolve(true);
             }
         });
     }
-    async plotRoute(route, i, type, enablefitbound, showAllFitbound) {
-        const cacheKey = route['job_id'] || route['route_id'];
-        // 1. Check cache FIRST
-        if (this.pathCache.has(cacheKey)) {
-            const path = this.pathCache.get(cacheKey);
-            route['path'] = path;
-            this.extendBound(path, showAllFitbound);
-            await this.drawLine(path, i, route, enablefitbound, type);
-            route['index'] = i;
-            return true;
-        }
-        // 2. Check for inline path (Avoid API if already available)
-        if (route['path'] && (Array.isArray(route['path']) || typeof route['path'] === 'string')) {
-            let path = typeof route['path'] === 'string' ? route['path'].split(';') : route['path'];
-            if (Array.isArray(path) && path.length > 0) {
-                // Format if they are still strings
-                if (typeof path[0] === 'string') {
-                    path = path.map((ele) => this.formateLatLong(ele));
-                    path = path.filter((ele) => ele && ele.length > 1);
-                }
-                if (path.length > 0) {
-                    this.pathCache.set(cacheKey, path);
-                    route['path'] = path;
-                    this.extendBound(path, showAllFitbound);
-                    await this.drawLine(path, i, route, enablefitbound, type);
-                    route['index'] = i;
-                    return true;
-                }
-            }
-        }
-        // 3. Fallback to API call ONLY for jobcode (if path was missing)
+    plotRoute(route, i, type, enablefitbound, showAllFitbound) {
         return new Promise((resolve, reject) => {
-            if (['jobcode'].includes(type) || route['job_id']) {
-                let param = { job: route['job_id'] };
-                this.utils.postDataWithRestUrl('schedule/job/path', param).subscribe({
-                    next: async (res) => {
-                        let path = [];
-                        if (res['data'] && res['data']['route']) {
-                            path = res['data']['route'].split(';');
-                            path = path.map((ele) => this.formateLatLong(ele));
-                            path = path.filter((ele) => ele && ele.length > 1);
-                            this.pathCache.set(cacheKey, path);
-                        }
-                        if (path && path.length > 0) {
-                            route['path'] = path;
-                            this.extendBound(route['path'], showAllFitbound);
-                            await this.drawLine(route['path'], i, route, enablefitbound, type);
-                            route['index'] = i;
-                        }
-                        else {
-                            this.extendBound(null, showAllFitbound);
-                        }
-                        resolve(true);
-                    },
-                    error: (err) => {
-                        console.warn('Failed path retrieval', err);
+            let param = {};
+            if (['jobcode'].includes(type)) {
+                param['job'] = route['job_id'];
+                this.utils.postDataWithRestUrl('schedule/job/path', param).subscribe((res) => {
+                    if (res['data']['route']) {
+                        let path = res['data']['route'].split(';');
+                        path = path.map((ele) => {
+                            return (ele = this.formateLatLong(ele));
+                        });
+                        path.forEach((ele, index) => {
+                            if (ele.length === 1)
+                                path.splice(index, 1);
+                        });
+                        route['path'] = path;
+                        this.extendBound(route['path'], showAllFitbound);
+                        if (route['path'] && route['path'].length > 0)
+                            this.drawLine(route['path'], i, route, enablefitbound, type);
+                        route['index'] = i;
+                    }
+                    else {
+                        this.extendBound(null, showAllFitbound);
+                    }
+                    resolve(true);
+                }, (err) => {
+                    if (err) {
                         reject(false);
                     }
                 });
             }
-            else {
-                this.extendBound(null, showAllFitbound);
-                resolve(true);
-            }
-        });
-    }
-    /**
-     * Batch toggle visibility for routes on the map.
-     * If visibleIds is empty, shows everything in the registry.
-     * Otherwise, shows only those in visibleIds and hides the rest.
-     */
-    setRoutesVisibility(visibleIds, showAllOverride, prefix) {
-        const showAll = showAllOverride !== undefined ? showAllOverride : (visibleIds.length === 0);
-        this.activeRoutesRegistry.forEach((data, id) => {
-            const registryId = String(id).trim();
-            // If a prefix is provided, only operate on routes matching that prefix.
-            if (prefix && !registryId.startsWith(`${prefix}-`)) {
-                return;
-            }
-            const isVisible = showAll || visibleIds.includes(registryId);
-            const visibility = isVisible ? 'visible' : 'none';
-            const display = isVisible ? 'block' : 'none';
-            // Toggle New Layer Format
-            const newLayerId = `route-layer-${data.routeType}-${data.index || id}`;
-            if (this.map.getLayer(newLayerId)) {
-                this.map.setLayoutProperty(newLayerId, 'visibility', visibility);
-            }
-            // Legacy/Alternate Layer Formats
-            const legacyId = `route-for-job-code${id}`;
-            if (this.map.getLayer(legacyId)) {
-                this.map.setLayoutProperty(legacyId, 'visibility', visibility);
-            }
-            if (this.map.getLayer(`line${id}`)) {
-                this.map.setLayoutProperty(`line${id}`, 'visibility', visibility);
-            }
-            // Toggle Markers
-            const originM = this.markerOriginList.get(registryId);
-            if (originM)
-                originM.getElement().style.display = display;
-            const destM = this.markerDestinationList.get(registryId);
-            if (destM)
-                destM.getElement().style.display = display;
-            // Toggle Arcs
-            if (this.activeArcs[registryId]) {
-                this.activeArcs[registryId].pathEl.style.display = display;
-            }
-        });
-        // Recalculate bounds based on visible routes
-        this.recalculateVisibleBounds(visibleIds, prefix, showAll);
-    }
-    recalculateVisibleBounds(visibleIds, prefix, showAllOverride) {
-        const showAll = showAllOverride !== undefined ? showAllOverride : (visibleIds.length === 0);
-        this.bounds = new mapboxgl.LngLatBounds();
-        this.originDestinationCordinates.clear();
-        const normalizedVisibleIds = visibleIds.map(vid => String(vid).trim());
-        this.activeRoutesRegistry.forEach((data, id) => {
-            const registryId = String(id).trim();
-            // If a prefix is provided, only include routes that match it for the bounding box.
-            // This prevents "showAll" from zooming to hidden routes from other sections.
-            if (prefix && !registryId.startsWith(`${prefix}-`)) {
-                return;
-            }
-            if (showAll || normalizedVisibleIds.includes(registryId)) {
-                if (data.bounds && !data.bounds.isEmpty()) {
-                    this.bounds.extend(data.bounds);
-                    this.originDestinationCordinates.set(registryId, data.cordinates);
-                }
-                else if (data.cordinates && data.cordinates.length > 0) {
-                    // Fallback if bounds weren't pre-calculated
-                    data.cordinates.forEach((coord) => this.bounds.extend(coord));
-                    this.originDestinationCordinates.set(registryId, data.cordinates);
+            else if (['jobrouteList', 'addroute'].includes(type)) {
+                if (route['path'] && route['path'].length > 0) {
+                    let path = route['path'].split(';');
+                    path = path.map((ele) => {
+                        return (ele = this.formateLatLong(ele));
+                    });
+                    path.forEach((ele, index) => {
+                        if (ele.length === 1)
+                            path.splice(index, 1);
+                    });
+                    this.extendBound(path, showAllFitbound);
+                    this.drawLine(path, i, route, enablefitbound, type);
                 }
             }
         });
-        if (!this.bounds.isEmpty() && this.map) {
-            const canvas = this.map.getCanvas();
-            const mapW = canvas.clientWidth;
-            const mapH = canvas.clientHeight;
-            let padTop = Math.max(0, (Number(this.padding?.top) || 0) + (Number(this.customTopForCustomer) || 0) + 80);
-            let padBot = Math.max(0, (Number(this.padding?.bottom) || 0) + (Math.max(0, Number(this.windowActualHeightWidth.availHeight) - (Number(window.innerHeight) - 65))) + 80);
-            let padLeft = Math.max(0, (Number(this.padding?.left) || 0) + (window.innerWidth > 1000 ? 350 : 50));
-            let padRight = Math.max(0, (Number(this.padding?.right) || 0) + 80);
-            // Safety Clamps: Ensure padding doesn't exceed canvas size
-            const maxHorizPad = mapW * 0.8;
-            const maxVertPad = mapH * 0.8;
-            if (padLeft + padRight > maxHorizPad) {
-                const factor = maxHorizPad / (padLeft + padRight);
-                padLeft *= factor;
-                padRight *= factor;
-            }
-            if (padTop + padBot > maxVertPad) {
-                const factor = maxVertPad / (padTop + padBot);
-                padTop *= factor;
-                padBot *= factor;
-            }
-            try {
-                this.map.fitBounds(this.bounds, {
-                    padding: { top: padTop, bottom: padBot, left: padLeft, right: padRight },
-                    pitch: 65,
-                    maxZoom: 12,
-                    duration: 800
-                });
-            }
-            catch (err) {
-                console.warn('fitBounds failed, trying with default padding', err);
-                this.map.fitBounds(this.bounds, { padding: 50, pitch: 65, maxZoom: 12 });
-            }
-        }
-    }
-    async clearAllRoutes() {
-        // 1. Remove all markers
-        this.markerOriginList.forEach(marker => marker.remove());
-        this.markerDestinationList.forEach(marker => marker.remove());
-        this.markerOriginList.clear();
-        this.markerDestinationList.clear();
-        // 2. Remove all arcs
-        Object.keys(this.activeArcs).forEach(index => {
-            const arc = this.activeArcs[index];
-            if (arc.pathEl.parentNode)
-                arc.pathEl.parentNode.removeChild(arc.pathEl);
-            if (this.svgOverlay) {
-                const grad = this.svgOverlay.querySelector(`defs #arc-grad-${index}`);
-                if (grad && grad.parentNode)
-                    grad.parentNode.removeChild(grad);
-            }
-        });
-        this.activeArcs = {};
-        // 3. Remove all line layers and sources using registry metadata
-        this.activeRoutesRegistry.forEach((data, regId) => {
-            const type = data.routeType || 'jobcode';
-            const idx = data.index || regId.split('-').pop();
-            const layerId = `route-layer-${type}-${idx}`;
-            const sourceId = `route-source-${type}-${idx}`;
-            this.map.getLayer(layerId) ? this.map.removeLayer(layerId) : null;
-            this.map.getSource(sourceId) ? this.map.removeSource(sourceId) : null;
-            // Legacy fallback cleanup
-            this.map.getLayer(`line${idx}`) ? this.map.removeLayer(`line${idx}`) : null;
-            this.map.getSource(`line${idx}`) ? this.map.removeSource(`line${idx}`) : null;
-            this.map.getLayer(`route-for-job-code${idx}`) ? this.map.removeLayer(`route-for-job-code${idx}`) : null;
-            this.map.getSource(`route-source-for-job-code${idx}`) ? this.map.removeSource(`route-source-for-job-code${idx}`) : null;
-        });
-        // 4. Reset registries and bounds
-        this.activeRoutesRegistry.clear();
-        this.originDestinationCordinates.clear();
-        this.bounds = new mapboxgl.LngLatBounds();
-        if (this.popup)
-            this.popup.remove();
-        return true;
     }
     clearBound() {
         this.bounds = new mapboxgl.LngLatBounds();
-        this.originDestinationCordinates.clear();
+        this.originDestinationCordinates = [];
         this.clearPadding();
     }
     formateLatLong(latlong) {
-        return latlong ? latlong.split(',').map((x) => +x).reverse() : null;
+        return latlong
+            ? latlong
+                .split(',')
+                .map((x) => +x)
+                .reverse()
+            : null;
     }
     clearBoundWithCordinates() {
         this.bounds = new mapboxgl.LngLatBounds();
-        this.originDestinationCordinates.clear();
+        this.originDestinationCordinates = [];
     }
     onResize(event) {
-        if (!this.bounds.isEmpty() && this.map) {
+        if (!this.bounds.isEmpty()) {
             this.windowActualHeightWidth.availHeight =
-                window.innerHeight > window.screen.availHeight ? window.innerHeight : window.screen.availHeight;
+                window.innerHeight > window.screen.availHeight
+                    ? window.innerHeight
+                    : window.screen.availHeight;
             setTimeout(() => {
-                const hRes = event.target ? event.target.innerHeight : window.innerHeight;
                 this.map.fitBounds(this.bounds, {
                     padding: {
-                        top: (this.padding?.top || 0) + this.customTopForCustomer,
-                        bottom: (this.padding?.bottom || 0) + (this.windowActualHeightWidth.availHeight - (hRes - 65)),
-                        left: (this.padding?.left || 0),
-                        right: (this.padding?.right || 0),
+                        top: this.padding.top + this.customTopForCustomer,
+                        bottom: this.padding.bottom +
+                            (this.windowActualHeightWidth.availHeight -
+                                (event.target.innerHeight - 65)),
+                        left: this.padding.left,
+                        right: this.padding.right,
                     },
                     pitch: 65,
                 });
@@ -1451,7 +1053,7 @@ class MapboxService {
         this.padding = null;
     }
     removeJobFromMap(data) {
-        data.forEach((ele, index) => {
+        data.map((ele, index) => {
             const id = ele['job_id'] ? ele['job_id'] : ele['route_id'];
             this.removeRouteAndMarker(id);
             if (index === data.length - 1) {
@@ -1459,58 +1061,24 @@ class MapboxService {
             }
         });
     }
-    resize() {
-        if (this.map) {
-            setTimeout(() => this.map.resize(), 0);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MapboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MapboxService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MapboxService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class CoolmapService {
-    mapbox = inject(MapboxService);
-    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    isDataFetched = signal(false, ...(ngDevMode ? [{ debugName: "isDataFetched" }] : []));
-    plottingIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "plottingIds" }] : []));
-    resetModals = signal(0, ...(ngDevMode ? [{ debugName: "resetModals" }] : []));
-    plotRoute(route, i, type = 'jobcode', enablefitbound, showAllFitbound) {
-        if (!route)
-            return;
-        return this.mapbox.plotRoute(route, i, type, enablefitbound, showAllFitbound);
-    }
-    loadMapProperty(pinRouteGeojson, index, unit, routeProps) {
-        this.mapbox.loadMapProperty(pinRouteGeojson, index, unit, routeProps);
-    }
-    removeRouteAndMarker(index, type = 'jobcode') {
-        return this.mapbox.removeRouteAndMarker(index, type);
-    }
-    clearAllRoutes() {
-        return this.mapbox.clearAllRoutes();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CoolmapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CoolmapService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CoolmapService, deps: [{ token: UtilsService }, { token: i2$1.EventManager }, { token: 'memberData' }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CoolmapService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CoolmapService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CoolmapService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: UtilsService }, { type: i2$1.EventManager }, { type: CoolmapConfigModel, decorators: [{
+                    type: Inject,
+                    args: ['memberData']
+                }] }] });
 
 /*
- * Public API Surface of coolmap-services
+ * Public API Surface of @aggdirect/coolmap-services
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AgToastService, COOLMAP_CONFIG, CoolmapService, CoolmapServices, MapboxService, UtilsService, ensureMapboxWorker, provideCoolmapConfig };
+export { CoolmapConfigModel, CoolmapService, DriverSmsCardEnum, DriversmsCardKey, EstinationData, EstinationEnum, JobCodeOverviewData, JobCodeOverviewEnum, PopupData, Route, UtilsService };
 //# sourceMappingURL=aggdirect-coolmap-services.mjs.map