@fleetbase/fleetops-engine 0.6.49 → 0.6.50

package/addon/components/order/form/route.hbs

@@ -27,6 +27,7 @@
                     @onClick={{fn this.addWaypoint (hash)}}
                     @helpText={{t "order.fields.add-waypoint-help-text"}}
                     @permission={{cannot-write @resource}}
+                    data-test-waypoint-add
                 />
             {{/if}}
         </div>
@@ -34,118 +35,123 @@
 
     {{#if this.multipleWaypoints}}
         <DragSortList class="multi-drop-select-container overflow-visible" @items={{@resource.payload.waypoints}} @dragEndAction={{this.sortWaypoints}} as |waypoint index|>
-            <div id={{concat "waypoint_" (add index 1)}} class="border rounded-md px-3 py-2 shadow-sm border-gray-300 dark:border-gray-900 mb-3">
-                <div class="flex items-start justify-between">
-                    <div class="flex items-center justify-between grip-cursor">
-                        <FaIcon @icon="grip-lines" @prefix="fas" class="mr-3 text-gray-100" />
-                        <label class="waypoint-label dark:text-gray-100 text-sm">
-                            {{waypoint-label (add index 1)}}
-                        </label>
-                    </div>
-
-                    <div class="flex-1 flex-col px-3">
-                        <div class="mb-2">
-                            <ModelSelect
-                                @modelName="place"
-                                @selectedModel={{waypoint.place}}
-                                @placeholder={{concat (t "order.fields.select-waypoint") " " (add index 1)}}
-                                @triggerClass="form-select form-input truncate max-w-300px"
-                                @infiniteScroll={{false}}
-                                @customSearchEndpoint="places/search"
-                                @query={{hash geo=true latitude=this.location.latitude longitude=this.location.longitude}}
-                                @renderInPlace={{true}}
-                                @onChange={{fn this.setWaypointPlace index}}
-                                @permission={{cannot-write @resource}}
-                                as |place|
-                            >
-                                <Place::Address @place={{place}} />
-                            </ModelSelect>
-                            {{#if (and @resource.facilitator.isIntegratedVendor (is-not-facilitator-supported-place @resource.facilitator waypoint.place))}}
-                                <InfoBlock
-                                    class="my-2 px-4 py-1.5 danger"
-                                    @blockClass="flex flex-row items-center"
-                                    @text={{concat @resource.facilitator.name (t "order.fields.infoblock-text")}}
-                                />
-                            {{/if}}
-                            {{#if waypoint.place.hasInvalidCoordinates}}
-                                <div class="leading-5 text-sm text-red-400 mt-2">
-                                    <FaIcon @icon="exclamation-triangle" class="mr-1" />
-                                    {{t "order.fields.invalid-coordinates"}}
-                                </div>
-                            {{/if}}
+            {{#let (get this.waypointRouteStops index) as |stop|}}
+                <div
+                    id={{concat "waypoint_" (add index 1)}}
+                    class="fleetops-order-form-waypoint {{if stop.required 'fleetops-order-form-waypoint--required'}} border rounded-md px-3 py-2 shadow-sm border-gray-300 dark:border-gray-900 mb-3"
+                    data-test-waypoint-row={{add index 1}}
+                >
+                    {{#if stop.required}}
+                        <div class="fleetops-order-form-waypoint__required-tab" data-test-required-waypoint-tab>Required</div>
+                    {{/if}}
+                    <div class="flex items-start justify-between">
+                        <div class="fleetops-order-form-waypoint__marker grip-cursor">
+                            <FaIcon @icon="grip-lines" @prefix="fas" class="text-gray-400" />
+                            <span class="index-count fleetops-route-stop-badge fleetops-order-form-waypoint__badge" style={{stop.badgeStyle}}>{{stop.label}}</span>
                         </div>
-                        <div>
-                            <ModelSelect
-                                @modelName="customer"
-                                @selectedModel={{waypoint.customer}}
-                                @placeholder={{t "order.fields.customer-placeholder"}}
-                                @triggerClass="form-select form-input truncate max-w-300px"
-                                @infiniteScroll={{false}}
-                                @renderInPlace={{true}}
-                                @allowClear={{true}}
-                                @onChange={{fn this.setWaypointCustomer waypoint}}
-                                @permission={{cannot-write @resource}}
-                                as |model|
-                            >
-                                <div class="flex items-center">
-                                    <div class="w-7">
-                                        <FaIcon @icon={{if model.isVendor "warehouse" "user"}} />
+
+                        <div class="flex-1 flex-col px-3">
+                            <div class="mb-2">
+                                <ModelSelect
+                                    @modelName="place"
+                                    @selectedModel={{waypoint.place}}
+                                    @placeholder={{concat (t "order.fields.select-waypoint") " " (add index 1)}}
+                                    @triggerClass="form-select form-input truncate max-w-300px"
+                                    @infiniteScroll={{false}}
+                                    @customSearchEndpoint="places/search"
+                                    @query={{hash geo=true latitude=this.location.latitude longitude=this.location.longitude}}
+                                    @renderInPlace={{true}}
+                                    @onChange={{fn this.setWaypointPlace index}}
+                                    @permission={{cannot-write @resource}}
+                                    as |place|
+                                >
+                                    <Place::Address @place={{place}} />
+                                </ModelSelect>
+                                {{#if (and @resource.facilitator.isIntegratedVendor (is-not-facilitator-supported-place @resource.facilitator waypoint.place))}}
+                                    <InfoBlock
+                                        class="my-2 px-4 py-1.5 danger"
+                                        @blockClass="flex flex-row items-center"
+                                        @text={{concat @resource.facilitator.name (t "order.fields.infoblock-text")}}
+                                    />
+                                {{/if}}
+                                {{#if waypoint.place.hasInvalidCoordinates}}
+                                    <div class="leading-5 text-sm text-red-400 mt-2">
+                                        <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                        {{t "order.fields.invalid-coordinates"}}
                                     </div>
-                                    <span class="uppercase">
-                                        {{model.name}}
-                                    </span>
-                                </div>
-                            </ModelSelect>
-                        </div>
-                        <div>
-                            <div class="flex flex-row items-center space-x-4 text-sm mt-2">
-                                <div class={{if (eq waypoint.type "dropoff") "is-checked"}}>
-                                    <div class="flex flex-row items-center">
-                                        <RadioButton
-                                            @radioClass="focus:ring-blue-500 h-4 w-4 text-blue-500"
-                                            @radioId={{concat "waypoint_" index "_dropoff"}}
-                                            @value="dropoff"
-                                            @groupValue={{waypoint.type}}
-                                            @name={{concat "waypoint_" index "_dropoff"}}
-                                            @changed={{fn (mut waypoint.type)}}
-                                        />
-                                        <label for={{concat "waypoint_" index "_dropoff"}} class="ml-2">Dropoff</label>
+                                {{/if}}
+                            </div>
+                            <div>
+                                <ModelSelect
+                                    @modelName="customer"
+                                    @selectedModel={{waypoint.customer}}
+                                    @placeholder={{t "order.fields.customer-placeholder"}}
+                                    @triggerClass="form-select form-input truncate max-w-300px"
+                                    @infiniteScroll={{false}}
+                                    @renderInPlace={{true}}
+                                    @allowClear={{true}}
+                                    @onChange={{fn this.setWaypointCustomer waypoint}}
+                                    @permission={{cannot-write @resource}}
+                                    as |model|
+                                >
+                                    <div class="flex items-center">
+                                        <div class="w-7">
+                                            <FaIcon @icon={{if model.isVendor "warehouse" "user"}} />
+                                        </div>
+                                        <span class="uppercase">
+                                            {{model.name}}
+                                        </span>
                                     </div>
-                                </div>
-                                <div class={{if (eq waypoint.type "pickup") "is-checked"}}>
-                                    <div class="flex flex-row items-center">
-                                        <RadioButton
-                                            @radioClass="focus:ring-blue-500 h-4 w-4 text-blue-500"
-                                            @radioId={{concat "waypoint_" index "_pickup"}}
-                                            @value="pickup"
-                                            @groupValue={{waypoint.type}}
-                                            @name={{concat "waypoint_" index "_pickup"}}
-                                            @changed={{fn (mut waypoint.type)}}
-                                        />
-                                        <label for={{concat "waypoint_" index "_pickup"}} class="ml-2">Pickup</label>
+                                </ModelSelect>
+                            </div>
+                            <div>
+                                <div class="flex flex-row items-center space-x-4 text-sm mt-2">
+                                    <div class={{if (eq waypoint.type "dropoff") "is-checked"}}>
+                                        <div class="flex flex-row items-center">
+                                            <RadioButton
+                                                @radioClass="focus:ring-blue-500 h-4 w-4 text-blue-500"
+                                                @radioId={{concat "waypoint_" index "_dropoff"}}
+                                                @value="dropoff"
+                                                @groupValue={{waypoint.type}}
+                                                @name={{concat "waypoint_" index "_dropoff"}}
+                                                @changed={{fn (mut waypoint.type)}}
+                                            />
+                                            <label for={{concat "waypoint_" index "_dropoff"}} class="ml-2">Dropoff</label>
+                                        </div>
+                                    </div>
+                                    <div class={{if (eq waypoint.type "pickup") "is-checked"}}>
+                                        <div class="flex flex-row items-center">
+                                            <RadioButton
+                                                @radioClass="focus:ring-blue-500 h-4 w-4 text-blue-500"
+                                                @radioId={{concat "waypoint_" index "_pickup"}}
+                                                @value="pickup"
+                                                @groupValue={{waypoint.type}}
+                                                @name={{concat "waypoint_" index "_pickup"}}
+                                                @changed={{fn (mut waypoint.type)}}
+                                            />
+                                            <label for={{concat "waypoint_" index "_pickup"}} class="ml-2">Pickup</label>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
 
-                    <div class="flex items-center space-x-2">
-                        {{#if waypoint.place}}
-                            <Button @icon="edit" @size="sm" @onClick={{fn this.editPlace waypoint.place}} @disabled={{cannot-write waypoint.place}} />
-                        {{/if}}
-                        {{#unless (eq index 0)}}
-                            <Button @type="danger" @icon="trash" @size="sm" @onClick={{fn this.removeWaypoint waypoint}} />
-                        {{/unless}}
+                        <div class="flex items-center space-x-2">
+                            {{#if waypoint.place}}
+                                <Button @icon="edit" @size="sm" @onClick={{fn this.editPlace waypoint.place}} @disabled={{cannot-write waypoint.place}} />
+                            {{/if}}
+                            {{#unless (eq index 0)}}
+                                <Button @type="danger" @icon="trash" @size="sm" @onClick={{fn this.removeWaypoint waypoint}} />
+                            {{/unless}}
+                        </div>
                     </div>
                 </div>
-            </div>
+            {{/let}}
         </DragSortList>
     {{else}}
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
-            <InputGroup>
-                <div class="flex items-center justify-between">
-                    <label>{{t "order.fields.pickup"}}</label>
-
+            <InputGroup @name={{t "order.fields.pickup"}} @required={{true}}>
+                <div class="flex items-center justify-end">
                     <div class="flex-row space-x-1 pr-0.5">
                         {{#if @resource.payload.pickup}}
                             <a href="javascript:;" {{on "click" (fn this.editPlace @resource.payload.pickup)}}>
@@ -186,10 +192,8 @@
                 {{/if}}
             </InputGroup>
 
-            <InputGroup>
-                <div class="flex items-center justify-between">
-                    <label>{{t "order.fields.dropoff"}}</label>
-
+            <InputGroup @name={{t "order.fields.dropoff"}} @required={{true}}>
+                <div class="flex items-center justify-end">
                     <div class="flex-row space-x-2 pr-0.5">
                         {{#if @resource.payload.dropoff}}
                             <a href="javascript:;" {{on "click" (fn this.editPlace @resource.payload.dropoff)}} disaled={{cannot "fleet-ops update place"}}>
@@ -268,4 +272,4 @@
             </InputGroup>
         </div>
     {{/if}}
-</ContentPanel>
+</ContentPanel>

package/addon/components/order/form/route.js

@@ -4,7 +4,7 @@ import { inject as service } from '@ember/service';
 import { action, get } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { colorForId, routeColorForStatus, routeStyleForStatus } from '../../../utils/route-colors';
-import { buildRoutePointMarkerPresentation, buildRoutePointsFromPayload } from '../../../utils/route-visualization';
+import { buildRoutePointMarkerPresentation, buildRoutePointsFromPayload, describeRoutePoint } from '../../../utils/route-visualization';
 
 const ORDER_ROUTE_PREVIEW_PADDING_BOTTOM_RIGHT = [420, 0];
 const ORDER_ROUTE_PREVIEW_MAX_ZOOM_TWO_POINTS = 13;
@@ -45,6 +45,42 @@ export default class OrderFormRouteComponent extends Component {
         return buildRoutePointsFromPayload(this.args.resource.payload);
     }
 
+    get routeColor() {
+        const order = this.args.resource;
+
+        return colorForId(order?.public_id ?? order?.id ?? 'new-order');
+    }
+
+    get waypointRouteStops() {
+        const waypoints = this.args.resource.payload?.waypoints ?? [];
+
+        return waypoints.map((_waypoint, index) => {
+            const routePoint = {
+                role: 'waypoint',
+                stopNumber: index + 1,
+            };
+
+            return {
+                ...describeRoutePoint(routePoint, this.routeColor),
+                badgeStyle: this.badgeStyleForWaypoint(index),
+                required: this.isRequiredWaypoint(index),
+            };
+        });
+    }
+
+    badgeStyleForWaypoint(index) {
+        const { markerColor } = describeRoutePoint({ role: 'waypoint', stopNumber: index + 1 }, this.routeColor);
+        const normalizedColor = markerColor?.toLowerCase?.();
+        const isYellow = normalizedColor === '#facc15' || normalizedColor === '#ca8a04';
+        const textColor = isYellow ? '#111827' : '#ffffff';
+
+        return `background-color: ${markerColor}; color: ${textColor};`;
+    }
+
+    isRequiredWaypoint(index) {
+        return index < 2;
+    }
+
     willDestroy() {
         super.willDestroy(...arguments);
         if (this.routingControl) {

package/addon/components/order/form/service-rate.hbs

@@ -75,7 +75,7 @@
                                             {{#each serviceQuote.items as |item|}}
                                                 <tr>
                                                     <td>
-                                                        <span class="font-semibold">{{smart-humanize item.details}}</span>
+                                                        <span class="font-semibold">{{item.details}}</span>
                                                     </td>
                                                     <td>
                                                         <span>{{format-currency item.amount serviceQuote.currency}}</span>
@@ -106,4 +106,4 @@
             </div>
         {{/if}}
     </div>
-</ContentPanel>
+</ContentPanel>

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

@@ -10,10 +10,13 @@
     />
     <Button @type="default" @icon="rotate" @text="Reset" @onClick={{this.resetConfig}} @disabled={{or this.config.core_service (cannot "fleet-ops update order-config")}} />
 </div>
-<div class="activity-flow-graph-container">
+<div class="activity-flow-graph-container" {{did-insert this.setupGraphScrollContainer}}>
     <div class="activity-flow-zoom-controls">
         <Button @icon="plus" @onClick={{this.zoomIn}} />
         <Button @icon="minus" @onClick={{this.zoomOut}} />
     </div>
     <JointGraph @onSetup={{this.initializeGraph}} />
+</div>
+<div class="activity-flow-horizontal-scrollbar {{unless this.hasHorizontalOverflow 'is-hidden'}}" {{did-insert this.setupHorizontalScrollbar}}>
+    <div class="activity-flow-horizontal-scrollbar-content"></div>
 </div>

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

@@ -12,6 +12,7 @@ import generateUUID from '@fleetbase/ember-core/utils/generate-uuid';
 import inlineTask from '@fleetbase/ember-core/utils/inline-task';
 import createFlowActivity from '../../utils/create-flow-activity';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
+import normalizeOrderConfigFlow, { getOrderConfigFlowRootCode } from '../../utils/normalize-order-config-flow';
 
 /**
  * Manages the activity flow for order configuration, allowing users to create, edit, and view a sequence of activities.
@@ -53,6 +54,13 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      */
     @tracked graph;
 
+    /**
+     * True when the rendered graph is wider than the visible Activity Flow area.
+     *
+     * @type {Boolean}
+     */
+    @tracked hasHorizontalOverflow = false;
+
     /**
      * Checks if listener pointerdown listener is called.
      *
@@ -60,6 +68,14 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      */
     @tracked listeningForClicks = false;
 
+    graphScrollContainer;
+    horizontalScrollbar;
+    horizontalScrollbarContent;
+    isSyncingHorizontalScroll = false;
+    onGraphScroll;
+    onHorizontalScrollbarScroll;
+    onWindowResize;
+
     /**
      * Initializes the component with the given configuration.
      * @param {Object} owner - The owner of the component instance.
@@ -85,6 +101,42 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
         this.initializeActivityJointModel();
         this.initializeActivityFlow();
         this.listenForElementClicks();
+        this.updateHorizontalScrollbar();
+    }
+
+    @action setupGraphScrollContainer(element) {
+        this.graphScrollContainer = element;
+        this.onGraphScroll = () => this.syncHorizontalScrollbarFromGraph();
+        this.onWindowResize = () => this.updateHorizontalScrollbar();
+
+        element.addEventListener('scroll', this.onGraphScroll);
+        window.addEventListener('resize', this.onWindowResize);
+        this.updateHorizontalScrollbar();
+    }
+
+    @action setupHorizontalScrollbar(element) {
+        this.horizontalScrollbar = element;
+        this.horizontalScrollbarContent = element.firstElementChild;
+        this.onHorizontalScrollbarScroll = () => this.syncGraphFromHorizontalScrollbar();
+
+        element.addEventListener('scroll', this.onHorizontalScrollbarScroll);
+        this.updateHorizontalScrollbar();
+    }
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+
+        if (this.graphScrollContainer && this.onGraphScroll) {
+            this.graphScrollContainer.removeEventListener('scroll', this.onGraphScroll);
+        }
+
+        if (this.horizontalScrollbar && this.onHorizontalScrollbarScroll) {
+            this.horizontalScrollbar.removeEventListener('scroll', this.onHorizontalScrollbarScroll);
+        }
+
+        if (this.onWindowResize) {
+            window.removeEventListener('resize', this.onWindowResize);
+        }
     }
 
     /**
@@ -299,14 +351,20 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      * @param {Object} incomingFlow - The incoming serialized activity flow.
      */
     deserializeFlow(incomingFlow) {
+        const normalizedFlow = normalizeOrderConfigFlow(incomingFlow);
         const deserializedFlow = {};
-        const keys = Object.keys(incomingFlow);
+        const keys = Object.keys(normalizedFlow);
         keys.forEach((key) => {
-            const activity = this.deserializeActivity(incomingFlow[key], incomingFlow);
-            deserializedFlow[activity.get('code')] = activity;
+            const activity = this.deserializeActivity(normalizedFlow[key], normalizedFlow, deserializedFlow);
+            if (activity) {
+                deserializedFlow[activity.get('code')] = activity;
+            }
         });
 
-        this.addDeserializedActivityToGraph(deserializedFlow.created);
+        const rootCode = getOrderConfigFlowRootCode(deserializedFlow);
+        if (rootCode && deserializedFlow[rootCode]) {
+            this.addDeserializedActivityToGraph(deserializedFlow[rootCode]);
+        }
     }
 
     /**
@@ -315,8 +373,21 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      * @param {Object} incomingFlow - The entire incoming serialized activity flow for reference.
      * @returns {Object} Deserialized activity object.
      */
-    deserializeActivity(activityObject, incomingFlow) {
-        const activity = createFlowActivity(activityObject.code, activityObject.status, activityObject.details, activityObject.sequence, activityObject.color, {
+    deserializeActivity(activityObject, incomingFlow, deserializedFlow = {}) {
+        if (!activityObject || typeof activityObject !== 'object') {
+            return;
+        }
+
+        const code = activityObject.code ?? activityObject.key;
+        if (!code) {
+            return;
+        }
+
+        if (deserializedFlow[code]) {
+            return deserializedFlow[code];
+        }
+
+        const activity = createFlowActivity(code, activityObject.status, activityObject.details, activityObject.sequence, activityObject.color, {
             key: activityObject.key,
             logic: activityObject.logic ?? [],
             events: activityObject.events ?? [],
@@ -327,13 +398,14 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
             complete: activityObject.complete ?? false,
             internalId: activityObject.internalId ?? generateUUID(),
         });
+        deserializedFlow[code] = activity;
         const { activities } = activityObject;
         if (isArray(activities)) {
             activity.set(
                 'activities',
                 activities
                     .map((activityKey) => {
-                        return this.deserializeActivity(incomingFlow[activityKey], incomingFlow);
+                        return this.deserializeActivity(incomingFlow[activityKey], incomingFlow, deserializedFlow);
                     })
                     .filter(Boolean)
             );
@@ -347,6 +419,10 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      * @param {Object} activity - The activity to add to the graph.
      */
     addDeserializedActivityToGraph(activity) {
+        if (!activity) {
+            return;
+        }
+
         const positionals = this.getActivityPositioning(activity);
         const parentActivity = this.createActivityNode(activity, positionals);
         const childActivities = activity.get('activities');
@@ -355,6 +431,7 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
         this.addActivityNodeTools(parentActivity, positionals);
         this.addChildActivities(parentActivity, childActivities);
         this.repositionAllActivities();
+        this.resizePaperWidthToFitActivities();
     }
 
     /**
@@ -394,6 +471,79 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
         });
     }
 
+    /**
+     * Expands the JointJS paper width so wide activity flows can scroll horizontally.
+     *
+     * @returns {void}
+     */
+    resizePaperWidthToFitActivities() {
+        if (!this.paper) {
+            return;
+        }
+
+        const nodes = Object.values(this.flow)
+            .map((activity) => activity.get('node'))
+            .filter(Boolean);
+
+        if (nodes.length === 0) {
+            return;
+        }
+
+        const padding = 150;
+        const viewportWidth = this.paper.el.parentElement?.clientWidth ?? this.paper.options.width;
+        const currentHeight = this.paper.options.height;
+        const contentWidth = nodes.reduce((width, node) => {
+            const position = node.position();
+            const size = node.size();
+
+            return Math.max(width, position.x + size.width + padding);
+        }, 0);
+        const paperWidth = Math.max(viewportWidth, contentWidth);
+
+        this.paper.setDimensions(paperWidth, currentHeight);
+        this.paper.el.style.width = contentWidth > viewportWidth ? `${paperWidth}px` : '100%';
+        this.paper.el.style.minWidth = '100%';
+        next(this, this.updateHorizontalScrollbar);
+    }
+
+    updateHorizontalScrollbar() {
+        if (!this.graphScrollContainer || !this.horizontalScrollbar || !this.horizontalScrollbarContent) {
+            return;
+        }
+
+        const scrollWidth = this.graphScrollContainer.scrollWidth;
+        const clientWidth = this.graphScrollContainer.clientWidth;
+        const hasOverflow = scrollWidth > clientWidth + 1;
+
+        this.hasHorizontalOverflow = hasOverflow;
+        this.horizontalScrollbarContent.style.width = hasOverflow ? `${scrollWidth}px` : '100%';
+        this.horizontalScrollbar.scrollLeft = this.graphScrollContainer.scrollLeft;
+
+        const { left, width } = this.graphScrollContainer.getBoundingClientRect();
+        this.horizontalScrollbar.style.left = `${left}px`;
+        this.horizontalScrollbar.style.width = `${width}px`;
+    }
+
+    syncHorizontalScrollbarFromGraph() {
+        if (this.isSyncingHorizontalScroll || !this.horizontalScrollbar || !this.graphScrollContainer) {
+            return;
+        }
+
+        this.isSyncingHorizontalScroll = true;
+        this.horizontalScrollbar.scrollLeft = this.graphScrollContainer.scrollLeft;
+        this.isSyncingHorizontalScroll = false;
+    }
+
+    syncGraphFromHorizontalScrollbar() {
+        if (this.isSyncingHorizontalScroll || !this.horizontalScrollbar || !this.graphScrollContainer) {
+            return;
+        }
+
+        this.isSyncingHorizontalScroll = true;
+        this.graphScrollContainer.scrollLeft = this.horizontalScrollbar.scrollLeft;
+        this.isSyncingHorizontalScroll = false;
+    }
+
     /**
      * Creates and adds a link between a parent activity and a child activity on the graph.
      *
@@ -484,6 +634,7 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
             const firstActivity = this.addActivityToGraph(activityObject);
             lastActivity = firstActivity;
         });
+        this.resizePaperWidthToFitActivities();
         return;
     }
 
@@ -550,6 +701,16 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
         return this.flow;
     }
 
+    /**
+     * Coerces activity label fields before passing them to JointJS text helpers.
+     *
+     * @param {*} value
+     * @returns {String}
+     */
+    activityText(value) {
+        return typeof value === 'string' ? value : value == null ? '' : String(value);
+    }
+
     /**
      * Creates a new activity node based on the provided activity and positioning data.
      * @param {Object} activity - The activity data.
@@ -558,14 +719,17 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      */
     createActivityNode(activity, positionals = {}) {
         const { width, height, x, y } = positionals;
-        const wrappedDetails = joint.util.breakText(activity.get('details'), { width });
+        const code = this.activityText(activity.get('code'));
+        const status = this.activityText(activity.get('status'));
+        const details = this.activityText(activity.get('details'));
+        const wrappedDetails = this.activityText(joint.util.breakText(details, { width }));
         const activityNode = new joint.shapes.fleetbase.Activity({
             position: { x, y },
             size: { width, height },
             attrs: {
                 pill: {
                     ref: 'code',
-                    refWidth: activity.get('code').length * 1.35,
+                    refWidth: code.length * 1.35,
                     refHeight: 5,
                     refX: -5,
                     refY: -2,
@@ -575,8 +739,8 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
                     stroke: '#374151',
                     strokeWidth: 1,
                 },
-                code: { ref: 'pill', text: activity.get('code'), fill: 'white', fontSize: 14, textAnchor: 'left', refX: 15, refY: 20, yAlignment: 'middle' },
-                status: { text: activity.get('status'), fill: 'white', fontSize: 14, fontWeight: 'bold', refY: 40, refX: 10, textAnchor: 'left' },
+                code: { ref: 'pill', text: code, fill: 'white', fontSize: 14, textAnchor: 'left', refX: 15, refY: 20, yAlignment: 'middle' },
+                status: { text: status, fill: 'white', fontSize: 14, fontWeight: 'bold', refY: 40, refX: 10, textAnchor: 'left' },
                 details: {
                     text: wrappedDetails,
                     fill: 'white',
@@ -608,7 +772,8 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
         const width = 250;
         const baseHeight = 90;
         const lineHeight = 10;
-        const wrappedDetails = joint.util.breakText(activity.get('details'), { width });
+        const details = this.activityText(activity.get('details'));
+        const wrappedDetails = this.activityText(joint.util.breakText(details, { width }));
         const numberOfLines = wrappedDetails.split('\n').length;
         const height = baseHeight + lineHeight * (numberOfLines - 1);
         let x = 100;
@@ -933,6 +1098,7 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
             target: { id: newActivity.get('id') },
         });
         link.addTo(this.graph);
+        this.resizePaperWidthToFitActivities();
 
         return newActivity;
     }