@fleetbase/fleetops-engine 0.6.49 → 0.6.51

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;
     }

package/addon/components/place/address.js

@@ -7,6 +7,6 @@ export default class PlaceAddressComponent extends Component {
     }
 
     get addressHtml() {
-        return placeAddressHtml(this.place);
+        return placeAddressHtml(this.place, { showTitle: this.args.showTitle });
     }
 }

package/addon/components/route-list.hbs

@@ -9,10 +9,10 @@
             </div>
             <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
                 <div class="mb-2 flex flex-wrap items-center gap-1.5">
-                    {{#if this.firstStop.place.status_code}}
-                        <Badge @status={{this.firstStop.place.status_code}} />
+                    {{#if this.firstStop.statusCode}}
+                        <Badge @status={{this.firstStop.statusCode}} />
                     {{/if}}
-                    {{#if this.firstStop.completed}}
+                    {{#if this.firstStop.showCompletedFlagBadge}}
                         <Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>
                     {{else if this.firstStop.active}}
                         <Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>
@@ -20,11 +20,8 @@
                     {{#if this.firstStop.etaSeconds}}
                         <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration this.firstStop.etaSeconds}}</Badge>
                     {{/if}}
-                    {{#if this.firstStop.etaAt}}
-                        <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns this.firstStop.etaAt "d MMM HH:mm"}}</Badge>
-                    {{/if}}
                 </div>
-                <DisplayPlace @place={{this.firstStop.place}} @waypointActions={{@waypointActions}} @hideBadges={{true}} />
+                <DisplayPlace @place={{this.firstStop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{this.firstStop}} @hideBadges={{true}} />
             </div>
         </div>
     {{/if}}
@@ -47,10 +44,10 @@
                     </div>
                     <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
                         <div class="mb-2 flex flex-wrap items-center gap-1.5">
-                            {{#if stop.place.status_code}}
-                                <Badge @status={{stop.place.status_code}} />
+                            {{#if stop.statusCode}}
+                                <Badge @status={{stop.statusCode}} />
                             {{/if}}
-                            {{#if stop.completed}}
+                            {{#if stop.showCompletedFlagBadge}}
                                 <Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>
                             {{else if stop.active}}
                                 <Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>
@@ -58,11 +55,8 @@
                             {{#if stop.etaSeconds}}
                                 <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration stop.etaSeconds}}</Badge>
                             {{/if}}
-                            {{#if stop.etaAt}}
-                                <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns stop.etaAt "d MMM HH:mm"}}</Badge>
-                            {{/if}}
                         </div>
-                        <DisplayPlace @place={{stop.place}} @waypointActions={{@waypointActions}} @hideBadges={{true}} />
+                        <DisplayPlace @place={{stop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{stop}} @hideBadges={{true}} />
                     </div>
                 </div>
             {{/each}}
@@ -75,10 +69,10 @@
                 </div>
                 <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
                     <div class="mb-2 flex flex-wrap items-center gap-1.5">
-                        {{#if stop.place.status_code}}
-                            <Badge @status={{stop.place.status_code}} />
+                        {{#if stop.statusCode}}
+                            <Badge @status={{stop.statusCode}} />
                         {{/if}}
-                        {{#if stop.completed}}
+                        {{#if stop.showCompletedFlagBadge}}
                             <Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>
                         {{else if stop.active}}
                             <Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>
@@ -86,11 +80,8 @@
                         {{#if stop.etaSeconds}}
                             <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration stop.etaSeconds}}</Badge>
                         {{/if}}
-                        {{#if stop.etaAt}}
-                            <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns stop.etaAt "d MMM HH:mm"}}</Badge>
-                        {{/if}}
                     </div>
-                    <DisplayPlace @place={{stop.place}} @waypointActions={{@waypointActions}} @hideBadges={{true}} />
+                    <DisplayPlace @place={{stop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{stop}} @hideBadges={{true}} />
                 </div>
             </div>
         {{/each}}
@@ -106,10 +97,10 @@
             </div>
             <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
                 <div class="mb-2 flex flex-wrap items-center gap-1.5">
-                    {{#if this.lastStop.place.status_code}}
-                        <Badge @status={{this.lastStop.place.status_code}} />
+                    {{#if this.lastStop.statusCode}}
+                        <Badge @status={{this.lastStop.statusCode}} />
                     {{/if}}
-                    {{#if this.lastStop.completed}}
+                    {{#if this.lastStop.showCompletedFlagBadge}}
                         <Badge @status="success" @hideStatusDot={{true}}>Completed</Badge>
                     {{else if this.lastStop.active}}
                         <Badge @status="indigo" @hideStatusDot={{true}}>Current Stop</Badge>
@@ -117,12 +108,9 @@
                     {{#if this.lastStop.etaSeconds}}
                         <Badge @status="pending" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration this.lastStop.etaSeconds}}</Badge>
                     {{/if}}
-                    {{#if this.lastStop.etaAt}}
-                        <Badge @status="pending" @hideStatusDot={{true}}>{{format-date-fns this.lastStop.etaAt "d MMM HH:mm"}}</Badge>
-                    {{/if}}
                 </div>
-                <DisplayPlace @place={{this.lastStop.place}} @waypointActions={{@waypointActions}} @hideBadges={{true}} />
+                <DisplayPlace @place={{this.lastStop.place}} @waypointActions={{@waypointActions}} @waypointActionContext={{this.lastStop}} @hideBadges={{true}} />
             </div>
         </div>
     {{/if}}
-</div>
+</div>

package/addon/components/route-list.js

@@ -17,20 +17,29 @@ export default class RouteListComponent extends Component {
         const routePoints = buildRoutePointsFromPayload(this.args.order?.payload);
 
         return routePoints
-            .map((routePoint) => ({
-                routePoint,
-                place: routePoint.place,
-                badgeStyle: this.badgeStyleForStop(routePoint),
-                trackingStop: this.trackingStopFor(routePoint.place),
-                routeLeg: this.routeLegFor(routePoint.place),
-                ...describeRoutePoint(routePoint, this.routeColor),
-            }))
+            .map((routePoint) => {
+                const trackingStop = this.trackingStopFor(routePoint.place);
+
+                return {
+                    routePoint,
+                    place: routePoint.place,
+                    badgeStyle: this.badgeStyleForStop(routePoint),
+                    trackingStop,
+                    routeLeg: this.routeLegFor(routePoint.place),
+                    trackingNumberUuid: routePoint.trackingNumberUuid ?? trackingStop?.tracking_number_uuid,
+                    ...describeRoutePoint(routePoint, this.routeColor),
+                };
+            })
             .map((stop) => ({
                 ...stop,
-                etaSeconds: stop.routeLeg?.eta_seconds ?? stop.routeLeg?.duration_in_traffic_s ?? stop.routeLeg?.duration_s ?? this.legacyEtaFor(stop.place),
-                etaAt: stop.routeLeg?.eta_at,
+                etaSeconds: this.shouldShowEtaForStop(stop)
+                    ? (stop.routeLeg?.eta_seconds ?? stop.routeLeg?.duration_in_traffic_s ?? stop.routeLeg?.duration_s ?? this.legacyEtaFor(stop.place))
+                    : null,
+                etaAt: this.shouldShowEtaForStop(stop) ? stop.routeLeg?.eta_at : null,
                 completed: Boolean(stop.trackingStop?.completed),
                 active: this.matchesStop(stop.trackingStop, this.args.order?.tracker_data?.active_stop),
+                statusCode: stop.place?.status_code ?? stop.trackingStop?.status,
+                showCompletedFlagBadge: this.shouldShowCompletedFlagBadge(stop),
             }));
     }
 
@@ -54,6 +63,10 @@ export default class RouteListComponent extends Component {
         return this.args.isCollapsible !== false && this.hasExtraStops;
     }
 
+    get showEta() {
+        return this.args.showEta !== false;
+    }
+
     badgeStyleForStop(routePoint) {
         const { markerColor } = describeRoutePoint(routePoint, this.routeColor);
         const isYellow = markerColor?.toLowerCase?.() === '#facc15' || markerColor?.toLowerCase?.() === '#ca8a04';
@@ -94,6 +107,25 @@ export default class RouteListComponent extends Component {
         return stop.uuid === activeStop.uuid || stop.public_id === activeStop.public_id;
     }
 
+    shouldShowCompletedFlagBadge(stop) {
+        if (!stop.trackingStop?.completed) {
+            return false;
+        }
+
+        const visibleStatus = stop.statusCode ?? stop.place?.status_code ?? stop.trackingStop?.status_code ?? stop.trackingStop?.status ?? stop.place?.status;
+        if (typeof visibleStatus !== 'string') {
+            return true;
+        }
+
+        return visibleStatus.trim().toLowerCase() !== 'completed';
+    }
+
+    shouldShowEtaForStop(stop) {
+        const status = this.args.order?.status;
+
+        return this.showEta && !['completed', 'canceled'].includes(status) && !stop.trackingStop?.completed;
+    }
+
     @action toggleWaypointsCollapse() {
         this.isWaypointsCollapsed = !this.isWaypointsCollapsed;
     }

package/addon/components/service-rate/details.hbs

@@ -121,6 +121,47 @@
                 </table>
             </div>
         </ContentPanel>
+    {{else if @resource.isMultiZoneDistance}}
+        <ContentPanel @title="Multi-zone Distance" @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="p-0i">
+            <div class="next-table-wrapper h-auto table-fluid rounded-none overflow-x-auto">
+                <table class="table table-fixed w-full">
+                    <thead>
+                        <tr>
+                            <th>Label</th>
+                            <th>Geography Type</th>
+                            <th>Geography</th>
+                            <th>Priority</th>
+                            <th>Rate</th>
+                            <th>Unit</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {{#each @resource.rateFees as |rateFee|}}
+                            <tr>
+                                <td>{{n-a rateFee.label}}</td>
+                                <td>{{smart-humanize rateFee.geography_type}}</td>
+                                <td>
+                                    {{#if (eq rateFee.geography_type "zone")}}
+                                        {{n-a rateFee.zone.name}}
+                                    {{else if (eq rateFee.geography_type "fallback")}}
+                                        Unmatched route distance
+                                    {{else}}
+                                        {{n-a rateFee.service_area.name}}
+                                    {{/if}}
+                                </td>
+                                <td>{{n-a rateFee.priority}}</td>
+                                <td>{{format-currency (f-to-int rateFee.fee) @resource.currency}}</td>
+                                <td>{{n-a rateFee.distance_unit}}</td>
+                            </tr>
+                        {{else}}
+                            <tr>
+                                <td colspan="6" class="text-center text-gray-500 italic">No geographic pricing rules defined</td>
+                            </tr>
+                        {{/each}}
+                    </tbody>
+                </table>
+            </div>
+        </ContentPanel>
     {{else if @resource.isPerMeter}}
         <ContentPanel @title={{t "service-rate.fields.per-meter"}} @open={{true}} @wrapperClass="bordered-top">
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
@@ -158,7 +199,7 @@
             <div class="field-info-container">
                 <div class="field-name">Algorithm Code</div>
                 <div class="field-value">
-                    <pre class="bg-gray-100 dark:bg-gray-900 font-mono p-3 rounded text-xs overflow-x-auto"><code class="font-mono text-xs">{{n-a @resource.algorithm}}</code></pre>
+                    <pre class="bg-gray-100 dark:bg-gray-900 font-mono p-3 rounded text-xs overflow-x-auto"><code class="font-mono text-xs whitespace-break-spaces">{{n-a @resource.algorithm}}</code></pre>
                 </div>
             </div>
         </ContentPanel>