@fleetbase/fleetops-engine 0.4.16 → 0.4.17

package/addon/components/custom-field.js

@@ -1,46 +1,144 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import { equal } from '@ember/object/computed';
+import isObject from '@fleetbase/ember-core/utils/is-object';
+import isModel from '@fleetbase/ember-core/utils/is-model';
+import getCustomFieldTypeMap from '../utils/get-custom-field-type-map';
 
 export default class CustomFieldComponent extends Component {
-    @tracked selectedPort;
-    @tracked selectedVessel;
+    @service fetch;
+    @tracked orderConfig;
+    @tracked customField;
+    @tracked order;
+    @tracked customFieldComponent;
+    @tracked value;
+    @tracked file;
+    @tracked uploadedFile;
+    acceptedFileTypes = [
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        'application/msword',
+        'application/pdf',
+        'application/x-pdf',
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/webp',
+        'video/mp4',
+        'video/quicktime',
+        'video/x-msvideo',
+        'video/x-flv',
+        'video/x-ms-wmv',
+        'audio/mpeg',
+        'video/x-msvideo',
+        'application/zip',
+        'application/x-tar',
+    ];
 
-    @equal('args.metaField.type', 'text') isTextInput;
-    @equal('args.metaField.type', 'select') isSelectInput;
-    @equal('args.metaField.type', 'vessel') isVesselInput;
-    @equal('args.metaField.type', 'port') isPortInput;
-    @equal('args.metaField.type', 'datetime') isDateTimeInput;
-    @equal('args.metaField.type', 'boolean') isBooleanInput;
+    /**
+     * A map defining the available custom field types and their corresponding components.
+     */
+    customFieldTypeMap = getCustomFieldTypeMap();
 
-    @action onToggle() {
-        if (typeof this.args.onChange === 'function') {
-            this.args.onChange(...arguments);
-        }
+    constructor(owner, { customField, orderConfig, order }) {
+        super(...arguments);
+        this.customField = customField;
+        this.orderConfig = orderConfig;
+        this.order = order;
+        this.customFieldComponent = typeof customField.component === 'string' ? customField.component : 'input';
     }
 
-    @action setDateValue(dateInstance) {
-        const dateTime = dateInstance.toDate();
+    @action removeFile() {
+        if (isModel(this.uploadedFile)) {
+            this.uploadedFile.destroyRecord();
+        }
+
+        this.uploadedFile = undefined;
+        this.value = undefined;
 
         if (typeof this.args.onChange === 'function') {
-            this.args.onChange(dateTime);
+            this.args.onChange(undefined, this.customField);
         }
     }
 
-    @action selectPort(port) {
-        this.selectedPort = port;
-
-        if (typeof this.args.onChange === 'function') {
-            this.args.onChange(port.portcode);
+    @action onFileAddedHandler(file) {
+        // since we have dropzone and upload button within dropzone validate the file state first
+        // as this method can be called twice from both functions
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
+            return;
         }
+
+        // set file for progress state
+        this.file = file;
+
+        // Queue and upload immediatley
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: 'uploads/fleet-ops/order-files',
+                type: 'order_file',
+            },
+            (uploadedFile) => {
+                this.file = undefined;
+                this.value = `file:${uploadedFile.id}`;
+                this.uploadedFile = uploadedFile;
+                if (typeof this.args.onChange === 'function') {
+                    this.args.onChange(this.value, this.customField);
+                }
+            },
+            () => {
+                // remove file from queue
+                if (file.queue && typeof file.queue.remove === 'function') {
+                    file.queue.remove(file);
+                }
+                this.file = undefined;
+            }
+        );
     }
 
-    @action selectVessel(vessel) {
-        this.selectedVessel = vessel;
+    @action onChangeHandler(event, otherValue) {
+        const isRawInput = typeof event === 'string' || typeof event === 'number';
+        const isMoneyInput = this.customFieldComponent === 'money-input' && isObject(event);
+        const isEventInput = event instanceof window.Event;
+        const isDateTimeInput = this.customFieldComponent === 'date-time-input' && typeof otherValue === 'string';
 
-        if (typeof this.args.onChange === 'function') {
-            this.args.onChange(vessel.name);
+        if (isDateTimeInput) {
+            const value = otherValue;
+            this.value = value;
+
+            if (typeof this.args.onChange === 'function') {
+                this.args.onChange(value, this.customField);
+            }
+            return;
+        }
+
+        if (isRawInput) {
+            this.value = event;
+
+            if (typeof this.args.onChange === 'function') {
+                this.args.onChange(event, this.customField);
+            }
+            return;
+        }
+
+        if (isMoneyInput) {
+            const value = event.newValue;
+            if (typeof this.args.onChange === 'function') {
+                this.args.onChange(value, this.customField);
+            }
+            return;
+        }
+
+        if (isEventInput) {
+            const value = event.target.value;
+            this.value = value;
+
+            if (typeof this.args.onChange === 'function') {
+                this.args.onChange(value, this.customField);
+            }
+            return;
         }
     }
 }

package/addon/components/driver-form-panel.hbs

@@ -59,7 +59,7 @@
         </div>
     </Overlay::Header>
 
-    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
         <div class="flex-1 space-y-4">
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
                 <InputGroup @name={{t "fleet-ops.common.name"}} @wrapperClass="col-span-2">

package/addon/components/driver-panel.hbs

@@ -63,7 +63,7 @@
             </div>
         </div>
     </Overlay::Header>
-    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body class="no-padding">
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
             <div class="ui-tabs mt-4">
                 <nav>

package/addon/components/edit-order-route-panel.hbs

@@ -4,7 +4,7 @@
         <Button @type="default" @icon="times" @helpText={{t "fleet-ops.common.cancel"}} @onClick={{this.onPressCancel}} />
     </Overlay::Header>
 
-    <Overlay::Body @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body>
         <div class="p-4">
             <div class="flex flex-row justify-between mb-6">
                 <div class="flex">

package/addon/components/fleet-form-panel.hbs

@@ -25,7 +25,7 @@
         </div>
     </Overlay::Header>
 
-    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
         <div class="modal-body-container">
             <div class="flex flex-col text-xs dark:text-gray-100">
                 <InputGroup @name={{t "fleet-ops.component.fleet-form-panel.fleet-name"}} @value={{this.fleet.name}} />

package/addon/components/fleet-panel.hbs

@@ -4,7 +4,7 @@
         <Button @type="default" @icon="times" @helpText={{if this.fleet.id "Cancel edit fleet" "Cancel new fleet"}} @onClick={{this.onPressCancel}} />
     </Overlay::Header>
 
-    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body class="no-padding">
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
             <div class="ui-tabs mt-4">
                 <nav>

package/addon/components/fuel-report-form-panel.hbs

@@ -31,7 +31,7 @@
         </div>
     </Overlay::Header>
 
-    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
         <div class="grid grid-cols-1 text-xs dark:text-gray-100">
             <InputGroup @name={{t "fleet-ops.common.reporter"}}>
                 <ModelSelect

package/addon/components/fuel-report-panel.hbs

@@ -13,7 +13,7 @@
         <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.fuel-report-panel.edit-button"}} @onClick={{this.onEdit}} @wrapperClass="mr-2" />
         <Button @type="default" @icon="times" @helpText={{if this.fuelReport.id (t "fleet-ops.component.fuel-report-panel.cancel-edit-fuel-report")(t "fleet-ops.component.fuel-report-panel.cancel-new-fuel-report") }} @onClick={{this.onPressCancel}} />
     </Overlay::Header>
-    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body class="no-padding">
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
             <div class="ui-tabs mt-4">
                 <nav>

package/addon/components/issue-form-panel.hbs

@@ -25,7 +25,7 @@
         </div>
     </Overlay::Header>
 
-    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4">
         <div class="grid grid-cols-1 text-xs dark:text-gray-100">
             <InputGroup @name={{t "fleet-ops.component.issue-form-panel.reported-by"}}>
                 <ModelSelect

package/addon/components/issue-panel.hbs

@@ -13,7 +13,7 @@
         <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.issue-panel.edit-issue"}} @onClick={{this.onEdit}} @wrapperClass="mr-2" />
         <Button @type="default" @icon="times" @helpText={{if this.issue.id (t "fleet-ops.component.issue-panel.cancel-edit-issue")(t "fleet-ops.component.issue-panel.cancel-new-issue") }} @onClick={{this.onPressCancel}} />
     </Overlay::Header>
-    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body class="no-padding">
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
             <div class="ui-tabs mt-4">
                 <nav>

package/addon/components/joint-graph.hbs

@@ -0,0 +1 @@
+<div id="paper" class="joint-js-paper" {{did-insert this.setupGraph}}>{{yield}}</div>

package/addon/components/joint-graph.js

@@ -0,0 +1,103 @@
+/* eslint-disable no-undef */
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class JointGraphComponent extends Component {
+    @tracked el;
+    @tracked graph;
+    @tracked paper;
+    @tracked height = 400;
+    @tracked width = 800;
+    @tracked gridSize = 1;
+    @tracked fullSize = true;
+    @tracked panning = true;
+    @tracked responsive = true;
+    @tracked dragStartPosition = {};
+
+    constructor(owner, { height = 400, width = 800, gridSize = 1, fullSize = true, panning = true, responsive = true }) {
+        super(...arguments);
+        this.height = height;
+        this.width = width;
+        this.gridSize = gridSize;
+        this.fullSize = fullSize;
+        this.panning = panning;
+        this.responsive = responsive;
+    }
+
+    @action setupGraph(el) {
+        this.sizeGrid(el);
+        this.createGraph(el);
+    }
+
+    createGraph(el) {
+        const namespace = joint.shapes;
+        const graph = new joint.dia.Graph({}, { cellNamespace: namespace });
+        const paper = new joint.dia.Paper({
+            el,
+            model: graph,
+            width: this.width,
+            height: this.height,
+            gridSize: this.gridSize,
+            cellViewNamespace: namespace,
+            interactive: false,
+        });
+
+        this.el = el;
+        this.graph = graph;
+        this.paper = paper;
+        if (this.panning) {
+            this.createPanningHandler(paper);
+        }
+        if (this.responsive) {
+            this.createResponsiveHandler(paper);
+        }
+
+        if (typeof this.args.onSetup === 'function') {
+            this.args.onSetup({ paper, graph, el }, this);
+        }
+    }
+
+    getFullGridSize(el) {
+        const parentEl = el.parentElement;
+        const width = parentEl.offsetWidth;
+        const height = parentEl.offsetHeight;
+        return { width, height };
+    }
+
+    sizeGrid(el) {
+        if (this.fullSize) {
+            const { width, height } = this.getFullGridSize(el);
+            this.width = width;
+            this.height = height;
+        }
+    }
+
+    createResponsiveHandler(paper) {
+        window.addEventListener('resize', () => {
+            if (!this.el) {
+                return;
+            }
+            const { width, height } = this.getFullGridSize(this.el);
+            this.width = width;
+            this.height = height;
+            paper.setDimensions(width, height);
+        });
+    }
+
+    createPanningHandler(paper) {
+        paper.on('blank:pointerdown', (event, x, y) => {
+            this.dragStartPosition = { x, y };
+        });
+
+        paper.on('cell:pointerup blank:pointerup', () => {
+            this.dragStartPosition = undefined;
+        });
+
+        paper.el.addEventListener('mousemove', (event) => {
+            if (this.dragStartPosition) {
+                paper.translate(event.offsetX - this.dragStartPosition.x, event.offsetY - this.dragStartPosition.y);
+            }
+        });
+    }
+}

package/addon/components/layout/fleet-ops-sidebar.hbs

@@ -12,9 +12,9 @@
     <Layout::Sidebar::Panel @open={{menuPanel.open}} @title={{menuPanel.title}}>
         {{#each menuPanel.items as |menuItem|}}
             {{#if menuItem.renderComponentInPlace}}
-                {{component menuItem.component menuItem=menuItem title=menuItem.title route=(concat this.routePrefix menuItem.route) icon=menuItem.icon rightSideComponent=menuItem.rightSideComponent rightSideComponentContext=menuItem.rightSideComponentContext rightSideStatus=menuItem.rightSideStatus rightSideStatusText=menuItem.rightSideStatusText hideRightSideStatusDot=menuItem.hideRightSideStatusDot rightSideStatusClass=menuItem.rightSideStatusClass disableRightSideStatusHumanize=menuItem.disableRightSideStatusHumanize dropdownButton=menuItem.dropdownButton dropdownButtonActions=menuItem.dropdownButtonActions dropdownButtonIcon=menuItem.dropdownButtonIcon dropdownButtonIconPrefix=menuItem.dropdownButtonIconPrefix dropdownButtonText=menuItem.dropdownButtonText dropdownButtonCalculatePosition=menuItem.dropdownButtonCalculatePosition dropdownButtonRenderInPlace=menuItem.dropdownButtonRenderInPlace dropdownButtonMenuLabel=menuItem.dropdownButtonMenuLabel dropdownButtonWrapperClass=menuItem.dropdownButtonWrapperClass dropdownButtonTriggerClass=menuItem.dropdownButtonTriggerClass registerDropdownButtonAPI=menuItem.registerDropdownButtonAPI}}
+                {{component menuItem.component menuItem=menuItem title=menuItem.title onClick=menuItem.onClick route=(concat this.routePrefix menuItem.route) icon=menuItem.icon rightSideComponent=menuItem.rightSideComponent rightSideComponentContext=menuItem.rightSideComponentContext rightSideStatus=menuItem.rightSideStatus rightSideStatusText=menuItem.rightSideStatusText hideRightSideStatusDot=menuItem.hideRightSideStatusDot rightSideStatusClass=menuItem.rightSideStatusClass disableRightSideStatusHumanize=menuItem.disableRightSideStatusHumanize dropdownButton=menuItem.dropdownButton dropdownButtonActions=menuItem.dropdownButtonActions dropdownButtonIcon=menuItem.dropdownButtonIcon dropdownButtonIconPrefix=menuItem.dropdownButtonIconPrefix dropdownButtonText=menuItem.dropdownButtonText dropdownButtonCalculatePosition=menuItem.dropdownButtonCalculatePosition dropdownButtonRenderInPlace=menuItem.dropdownButtonRenderInPlace dropdownButtonMenuLabel=menuItem.dropdownButtonMenuLabel dropdownButtonWrapperClass=menuItem.dropdownButtonWrapperClass dropdownButtonTriggerClass=menuItem.dropdownButtonTriggerClass registerDropdownButtonAPI=menuItem.registerDropdownButtonAPI}}
             {{else}}
-                <Layout::Sidebar::Item @route={{concat this.routePrefix menuItem.route}} @icon={{menuItem.icon}} @rightSideComponent={{menuItem.rightSideComponent}} @rightSideComponentContext={{menuItem.rightSideComponentContext}} @rightSideStatus={{menuItem.rightSideStatus}} @rightSideStatusText={{menuItem.rightSideStatusText}} @hideRightSideStatusDot={{menuItem.hideRightSideStatusDot}} @rightSideStatusClass={{menuItem.rightSideStatusClass}} @disableRightSideStatusHumanize={{menuItem.disableRightSideStatusHumanize}} @dropdownButton={{menuItem.dropdownButton}} @dropdownButtonActions={{menuItem.dropdownButtonActions}} @dropdownButtonIcon={{menuItem.dropdownButtonIcon}} @dropdownButtonIconPrefix={{menuItem.dropdownButtonIconPrefix}} @dropdownButtonText={{menuItem.dropdownButtonText}} @dropdownButtonCalculatePosition={{menuItem.dropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{menuItem.dropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{menuItem.dropdownButtonMenuLabel}} @dropdownButtonWrapperClass={{menuItem.dropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{menuItem.dropdownButtonTriggerClass}} @registerDropdownButtonAPI={{menuItem.registerDropdownButtonAPI}}>{{menuItem.title}}</Layout::Sidebar::Item>
+                <Layout::Sidebar::Item @onClick={{menuItem.onClick}} @route={{concat this.routePrefix menuItem.route}} @icon={{menuItem.icon}} @rightSideComponent={{menuItem.rightSideComponent}} @rightSideComponentContext={{menuItem.rightSideComponentContext}} @rightSideStatus={{menuItem.rightSideStatus}} @rightSideStatusText={{menuItem.rightSideStatusText}} @hideRightSideStatusDot={{menuItem.hideRightSideStatusDot}} @rightSideStatusClass={{menuItem.rightSideStatusClass}} @disableRightSideStatusHumanize={{menuItem.disableRightSideStatusHumanize}} @dropdownButton={{menuItem.dropdownButton}} @dropdownButtonActions={{menuItem.dropdownButtonActions}} @dropdownButtonIcon={{menuItem.dropdownButtonIcon}} @dropdownButtonIconPrefix={{menuItem.dropdownButtonIconPrefix}} @dropdownButtonText={{menuItem.dropdownButtonText}} @dropdownButtonCalculatePosition={{menuItem.dropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{menuItem.dropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{menuItem.dropdownButtonMenuLabel}} @dropdownButtonWrapperClass={{menuItem.dropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{menuItem.dropdownButtonTriggerClass}} @registerDropdownButtonAPI={{menuItem.registerDropdownButtonAPI}}>{{menuItem.title}}</Layout::Sidebar::Item>
             {{/if}}
         {{/each}}
     </Layout::Sidebar::Panel>
@@ -26,6 +26,6 @@
         {{/each}}
     </Layout::Sidebar::Panel>
 {{/each}}
-<Layout::Sidebar::Item @onClick={{this.onClickSettings}} @icon="cogs">{{t "fleet-ops.component.layout.fleet-ops-sidebar.settings"}}</Layout::Sidebar::Item>
+{{!-- <Layout::Sidebar::Item @onClick={{this.onClickSettings}} @icon="cogs">{{t "fleet-ops.component.layout.fleet-ops-sidebar.settings"}}</Layout::Sidebar::Item> --}}
 {{yield}}
 <Spacer @height="10px" />

package/addon/components/layout/fleet-ops-sidebar.js

@@ -40,6 +40,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.dashboard'), icon: 'home', route: 'operations.orders' },
             { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.service-rates'), icon: 'file-invoice-dollar', route: 'operations.service-rates' },
             { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.scheduler'), icon: 'calendar-day', route: 'operations.scheduler' },
+            { title: this.intl.t('fleet-ops.component.layout.fleet-ops-sidebar.order-config'), icon: 'diagram-project', route: 'operations.order-config' },
         ];
 
         const resourcesItems = [

package/addon/components/live-map.js

@@ -7,6 +7,7 @@ import { dasherize, camelize, classify } from '@ember/string';
 import { singularize } from 'ember-inflector';
 import { later } from '@ember/runloop';
 import { allSettled } from 'rsvp';
+import { task } from 'ember-concurrency-decorators';
 import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
 /**
@@ -300,18 +301,18 @@ export default class LiveMapComponent extends Component {
 
         // load data and complete setup
         this.completeSetup([
-            this.fetchLiveData('routes'),
-            this.fetchLiveData('vehicles', {
+            this.loadLiveData.perform('routes'),
+            this.loadLiveData.perform('vehicles', {
                 onLoaded: (vehicles) => {
                     this.watchMovingObjects('vehicles', vehicles);
                 },
             }),
-            this.fetchLiveData('drivers', {
+            this.loadLiveData.perform('drivers', {
                 onLoaded: (drivers) => {
                     this.watchMovingObjects('drivers', drivers);
                 },
             }),
-            this.fetchLiveData('places'),
+            this.loadLiveData.perform('places'),
         ]);
     }
 
@@ -342,18 +343,18 @@ export default class LiveMapComponent extends Component {
      */
     reload() {
         this.completeSetup([
-            this.fetchLiveData('routes'),
-            this.fetchLiveData('vehicles', {
+            this.loadLiveData.perform('routes'),
+            this.loadLiveData.perform('vehicles', {
                 onLoaded: (vehicles) => {
                     this.watchMovingObjects('vehicles', vehicles);
                 },
             }),
-            this.fetchLiveData('drivers', {
+            this.loadLiveData.perform('drivers', {
                 onLoaded: (drivers) => {
                     this.watchMovingObjects('drivers', drivers);
                 },
             }),
-            this.fetchLiveData('places'),
+            this.loadLiveData.perform('places'),
         ]);
     }
 
@@ -477,9 +478,10 @@ export default class LiveMapComponent extends Component {
         const internalName = camelize(path);
         const callbackFnName = `on${internalName}Loaded`;
         const params = getWithDefault(options, 'params', {});
+        const url = `fleet-ops/live/${path}`;
 
         return this.fetch
-            .get(`fleet-ops/live/${path}`, params, { normalizeToEmberData: true, normalizeModelType: singularize(internalName) })
+            .get(url, params, { normalizeToEmberData: true, normalizeModelType: singularize(internalName) })
             .then((data) => {
                 this.triggerAction(callbackFnName);
                 this.createVisibilityControl(internalName);
@@ -503,6 +505,54 @@ export default class LiveMapComponent extends Component {
             });
     }
 
+    /**
+     * Asynchronously loads live data for a specified path and updates the component's state.
+     * This function uses Ember Concurrency to handle the asynchronous operation, ensuring
+     * better handling of concurrency and potential task cancellation.
+     *
+     * @memberof LiveMapComponent
+     * @task
+     * @generator
+     * @param {string} path - The path for fetching live data.
+     * @param {Object} [options={}] - Configuration options for the data loading process.
+     * @param {Object} [options.params={}] - Additional parameters to include in the request.
+     * @param {Function} [options.onLoaded] - Callback function executed when data is successfully loaded.
+     * @param {Function} [options.onFailure] - Callback function executed in case of a failure in data loading.
+     * @returns {Promise<Object|undefined>} A promise that resolves with the fetched data, or undefined if an error occurs.
+     *
+     * @example
+     * // To load data and execute specific actions on load and failure
+     * this.loadLiveData.perform('some/path', {
+     *   params: { key: 'value' },
+     *   onLoaded: (data) => { console.log('Data loaded', data); },
+     *   onFailure: (error) => { console.error('Failed to load data', error); }
+     * });
+     */
+    @task *loadLiveData(path, options = {}) {
+        const internalName = camelize(path);
+        const callbackFnName = `on${internalName}Loaded`;
+        const params = getWithDefault(options, 'params', {});
+        const url = `fleet-ops/live/${path}`;
+        const data = yield this.fetch.get(url, params, { normalizeToEmberData: true, normalizeModelType: singularize(internalName) }).catch((error) => {
+            if (typeof options.onFailure === 'function') {
+                options.onFailure(error);
+            }
+        });
+
+        if (data) {
+            this.triggerAction(callbackFnName);
+            this.createVisibilityControl(internalName);
+            this[internalName] = data;
+            this.cacheOriginalResources(internalName);
+
+            if (typeof options.onLoaded === 'function') {
+                options.onLoaded(data);
+            }
+        }
+
+        return data;
+    }
+
     /**
      * Creates or updates a visibility control for a specific element by name.
      *
@@ -1858,27 +1908,20 @@ export default class LiveMapComponent extends Component {
      * @returns {Promise} A promise that resolves to an array of service area records.
      * @memberof LiveMapComponent
      */
-    fetchServiceAreas() {
-        this.isLoading = true;
-
-        return new Promise((resolve) => {
-            if (this.serviceAreas && typeof this.serviceAreas.getFromCache === 'function') {
-                const cachedRecords = this.serviceAreas.getFromCache('serviceAreas', 'service-area');
+    @task *loadServiceAreas() {
+        if (this.serviceAreas && typeof this.serviceAreas.getFromCache === 'function') {
+            const cachedRecords = this.serviceAreas.getFromCache('serviceAreas', 'service-area');
 
-                if (cachedRecords) {
-                    resolve(cachedRecords);
-                }
+            if (cachedRecords) {
+                return cachedRecords;
             }
+        }
 
-            return this.store
-                .query('service-area', { with: ['zones'] })
-                .then((serviceAreaRecords) => {
-                    this.appCache.setEmberData('serviceAreas', serviceAreaRecords);
-                    resolve(serviceAreaRecords);
-                })
-                .finally(() => {
-                    this.isLoading = false;
-                });
-        });
+        const serviceAreaRecords = yield this.store.query('service-area', { with: ['zones'] });
+        if (serviceAreaRecords) {
+            this.appCache.setEmberData('serviceAreas', serviceAreaRecords);
+        }
+
+        return serviceAreaRecords;
     }
 }

package/addon/components/modals/new-custom-field-group.hbs

@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "fleet-ops.component.modals.new-custom-field-group.group-name"}} @value={{@options.customFieldGroup.name}} />
+    </div>
+</Modal::Default>

package/addon/components/modals/new-order-config.hbs

@@ -1,9 +1,9 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @name={{t "fleet-ops.component.modals.new-order-config.name"}} @value={{@options.name}} />
-        <InputGroup @name={{t "fleet-ops.component.modals.new-order-config.description"}} @value={{@options.description}} />
+        <InputGroup @name={{t "fleet-ops.component.modals.new-order-config.name"}} @value={{@options.orderConfig.name}} />
+        <InputGroup @name={{t "fleet-ops.component.modals.new-order-config.description"}} @value={{@options.orderConfig.description}} />
         <InputGroup @name={{t "fleet-ops.component.modals.new-order-config.tags"}}>
-            <TagInput class="form-input" @placeholder={{t "fleet-ops.component.modals.new-order-config.add-tags"}} @allowSpacesInTags={{true}} @tags={{@options.tags}} @addTag={{@options.addTag}} @removeTagAtIndex={{@options.removeTag}} as |tag|>
+            <TagInput class="form-input" @placeholder={{t "fleet-ops.component.modals.new-order-config.add-tags"}} @allowSpacesInTags={{true}} @tags={{@options.orderConfig.tags}} @addTag={{@options.addTag}} @removeTagAtIndex={{@options.removeTag}} as |tag|>
                 {{tag}}
             </TagInput>
         </InputGroup>

package/addon/components/modals/order-new-activity.hbs

@@ -28,7 +28,7 @@
                                 {{activity.details}}
 
                                 {{#if (eq activity.code "dispatched")}}
-                                    <InfoBlock class="warning xs mt-2" @icon="exclamation-triangle" @text={{t "fleet-ops.component.modals.order-new-activity.dispatch"}} />
+                                    <InfoBlock class="warning xs mt-2" @icon="exclamation-triangle" @textClass="text-yellow-900 focus:text-yellow-900" @text={{t "fleet-ops.component.modals.order-new-activity.dispatch"}} />
                                 {{/if}}
                             </span>
                         </label>

package/addon/components/order-config-manager/activity-flow.hbs

@@ -0,0 +1,11 @@
+<div class="flex flex-row items-center px-6 py-2 space-x-2">
+    <Button @type="primary" @icon="save" @text={{t "fleet-ops.component.order-config-manager.activity-flow.save-activity-flow"}} @onClick={{perform this.save}} @isLoading={{not this.save.isIdle}} @disabled={{this.config.core_service}} />
+    <Button @type="default" @icon="rotate" @text="Reset" @onClick={{this.resetConfig}} @disabled={{this.config.core_service}} />
+</div>
+<div class="activity-flow-graph-container">
+    <div class="activity-flow-zoom-controls">
+        <Button @icon="plus" @onClick={{this.zoomIn}} />
+        <Button @icon="minus" @onClick={{this.zoomOut}} />
+    </div>
+    <JointGraph @onSetup={{this.initializeGraph}} />
+</div>