@fleetbase/fleetops-engine 0.6.49 → 0.6.51

package/addon/components/modals/update-order-activity.js

@@ -1,16 +1,23 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { action, get } from '@ember/object';
 import { task } from 'ember-concurrency';
+import config from 'ember-get-config';
+import { buildServiceStopsFromPayload } from '../../utils/route-visualization';
 
 export default class ModalsUpdateOrderActivityComponent extends Component {
     @service fetch;
+    @service intl;
     @service notifications;
     @service modalsManager;
     @tracked activityOptions = [];
     @tracked order;
     @tracked selectedActivity;
-    @tracked customActivity;
+    @tracked customActivity = {};
+    @tracked proofFiles = [];
+    @tracked proof;
+    @tracked bypassProof = false;
 
     constructor(owner, { options = {} }) {
         super(...arguments);
@@ -18,9 +25,103 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
         this.loadActivity.perform();
     }
 
+    get waypoints() {
+        const waypoints = this.order?.payload?.waypoints;
+        if (typeof waypoints?.toArray === 'function') {
+            return waypoints.toArray();
+        }
+
+        return Array.isArray(waypoints) ? waypoints : Array.from(waypoints ?? []);
+    }
+
+    get serviceStops() {
+        return buildServiceStopsFromPayload(this.order?.payload);
+    }
+
+    get activeStopId() {
+        const activeStop = this.order?.tracker_data?.active_stop;
+
+        return activeStop?.uuid ?? activeStop?.public_id ?? this.order?.payload?.current_waypoint_uuid ?? this.order?.payload?.current_waypoint;
+    }
+
+    get isMultipleWaypointOrder() {
+        return this.waypoints.length > 0;
+    }
+
+    get orderHasStarted() {
+        const status = this.order?.status;
+
+        return Boolean(this.order?.started || this.order?.started_at || (status && !['created', 'dispatched'].includes(status)));
+    }
+
+    get shouldUseWaypointActivity() {
+        return this.isMultipleWaypointOrder && this.orderHasStarted;
+    }
+
+    get currentWaypoint() {
+        if (!this.shouldUseWaypointActivity) {
+            return null;
+        }
+
+        const currentWaypointId = this.activeStopId;
+
+        if (currentWaypointId) {
+            const stop = this.serviceStops.find(({ place }) => {
+                return [place?.id, place?.uuid, place?.public_id, place?.waypoint_public_id].includes(currentWaypointId);
+            });
+
+            if (stop?.place) {
+                return stop.place;
+            }
+        }
+
+        return this.serviceStops.find(({ place }) => !place?.complete)?.place ?? this.serviceStops[0]?.place;
+    }
+
+    get currentWaypointId() {
+        const waypoint = this.currentWaypoint;
+
+        return waypoint?.id ?? waypoint?.public_id ?? waypoint?.uuid;
+    }
+
+    get currentWaypointProofSubjectId() {
+        const waypoint = this.currentWaypoint;
+
+        return waypoint?.waypoint_public_id ?? waypoint?.id ?? waypoint?.public_id ?? waypoint?.uuid;
+    }
+
+    get selectedActivityRecord() {
+        if (this.selectedActivity === 'custom') {
+            return this.customActivity;
+        }
+
+        return this.activityOptions[this.selectedActivity];
+    }
+
+    get selectedActivityRequiresPod() {
+        return Boolean(this.selectedActivityRecord?.require_pod);
+    }
+
+    get acceptedProofFileTypes() {
+        return ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+    }
+
+    get hasUploadedProof() {
+        return Boolean(this.proof?.id || this.proof?.public_id);
+    }
+
+    get uploadedProofId() {
+        return this.proof?.id ?? this.proof?.public_id;
+    }
+
     @task *loadActivity() {
+        if (!this.order?.id) {
+            return [];
+        }
+
         try {
-            const activityOptions = yield this.fetch.get(`orders/next-activity/${this.order.id}`);
+            const params = this.shouldUseWaypointActivity && this.currentWaypointId ? { waypoint: this.currentWaypointId } : {};
+            const activityOptions = yield this.fetch.get(`orders/next-activity/${this.order.id}`, params);
             this.activityOptions = activityOptions;
             return activityOptions;
         } catch (err) {
@@ -31,21 +132,112 @@ export default class ModalsUpdateOrderActivityComponent extends Component {
     @task *submitActivity(modal) {
         modal.startLoading();
 
-        const activity = this.selectedActivity === 'custom' ? this.customActivity : this.activityOptions[this.selectedActivity];
+        const activity = this.selectedActivityRecord;
         if (this.selectedActivity === 'custom' && !activity.status && !activity.details && !activity.code) {
             modal.stopLoading();
             return this.notifications.warning(this.intl.t('fleet-ops.operations.orders.index.view.invalid-warning'));
         }
 
+        if (this.selectedActivityRequiresPod && this.uploadProofFile.isRunning) {
+            modal.stopLoading();
+            return this.notifications.warning('Photo proof of delivery is still uploading.');
+        }
+
+        if (this.selectedActivityRequiresPod && !this.hasUploadedProof && !this.bypassProof) {
+            modal.stopLoading();
+            return this.notifications.warning('Upload photo proof of delivery or choose to bypass proof of delivery.');
+        }
+
         try {
-            yield this.fetch.patch(`orders/update-activity/${this.order.id}`, { activity });
+            yield this.fetch.patch(`orders/update-activity/${this.order.id}`, {
+                activity,
+                proof: this.hasUploadedProof ? this.uploadedProofId : null,
+                bypass_proof: this.selectedActivityRequiresPod && this.bypassProof,
+            });
+
+            if (typeof this.order?.reload === 'function') {
+                yield this.order.reload();
+            }
+
+            if (typeof this.order?.loadTrackerData === 'function') {
+                if (typeof this.order.set === 'function') {
+                    this.order.set('tracker_data', null);
+                }
+
+                yield this.order.loadTrackerData();
+            }
+
             this.modalsManager.setOption('activityCreated', activity);
+            this.modalsManager.setOption('proofCreated', this.hasUploadedProof ? this.proof : null);
             this.notifications.success(`Order activity has been updated to ${activity.status}`);
+            modal.done();
         } catch (error) {
             this.notifications.serverError(error);
         } finally {
             modal.stopLoading();
-            modal.done();
         }
     }
+
+    @task *capturePhotoProof() {
+        const [proofFile] = this.proofFiles;
+        if (!proofFile) {
+            return null;
+        }
+
+        const headers = this.fetch.getHeaders();
+        delete headers['Content-Type'];
+
+        const subjectId = this.currentWaypointProofSubjectId;
+        const subjectPath = subjectId ? `/${subjectId}` : '';
+        const url = [get(config, 'API.host'), get(config, 'API.namespace'), `orders/${this.order.id}/capture-photo${subjectPath}`].filter(Boolean).join('/');
+
+        const response = yield proofFile.upload(url, {
+            data: {
+                remarks: 'Verified by Photo',
+            },
+            headers,
+            withCredentials: true,
+        });
+
+        return response.json();
+    }
+
+    @task *uploadProofFile(file) {
+        if (!file) {
+            return;
+        }
+
+        this.bypassProof = false;
+        this.proof = null;
+        this.proofFiles = [file];
+
+        try {
+            this.proof = this.normalizeProofResponse(yield this.capturePhotoProof.perform());
+            this.notifications.success('Photo proof of delivery uploaded.');
+        } catch (error) {
+            this.proof = null;
+            this.proofFiles = [];
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action toggleBypassProof(value) {
+        this.bypassProof = value;
+        if (value) {
+            this.proofFiles = [];
+            this.proof = null;
+        }
+    }
+
+    normalizeProofResponse(response) {
+        if (response?.proof) {
+            return response.proof;
+        }
+
+        if (response?.data?.id || response?.data?.public_id) {
+            return response.data;
+        }
+
+        return response;
+    }
 }

package/addon/components/orchestrator/resource-panel.hbs

@@ -69,16 +69,6 @@
                         }}"
                     {{on "click" (fn this.setVehicleFilter "all")}}
                 >{{t "orchestrator.filter-all"}}</button>
-                <button
-                    type="button"
-                    class="px-2 py-0.5 rounded text-xs transition-colors
-                        {{if
-                            (eq this.vehicleFilter 'active')
-                            'bg-indigo-500 text-white'
-                            'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
-                        }}"
-                    {{on "click" (fn this.setVehicleFilter "active")}}
-                >{{t "orchestrator.filter-active"}}</button>
                 <button
                     type="button"
                     class="px-2 py-0.5 rounded text-xs transition-colors

package/addon/components/orchestrator/resource-panel.js

@@ -59,12 +59,10 @@ export default class OrchestratorResourcePanelComponent extends Component {
             );
         }
 
-        if (this.vehicleFilter === 'active') {
-            vehicles = vehicles.filter((v) => v.status === 'active');
-        } else if (this.vehicleFilter === 'no-driver') {
+        if (this.vehicleFilter === 'no-driver') {
             vehicles = vehicles.filter((v) => !v.driver?.id);
         } else if (this.vehicleFilter === 'available') {
-            vehicles = vehicles.filter((v) => v.status === 'active' && !v.driver?.current_job);
+            vehicles = vehicles.filter((v) => v.status === 'available' && !v.driver?.current_job);
         }
 
         return vehicles;

package/addon/components/order/activity-list.hbs

@@ -1,5 +1,5 @@
 <div class="order-activity-list space-y-2">
-    {{#each @resource.tracking_statuses as |trackingStatus|}}
+    {{#each (or @activity @resource.tracking_statuses) as |trackingStatus|}}
         <div class="order-activity-list-item flex flex-row justify-between">
             <div class="flex flex-row">
                 <div class="w-8 pt-1">
@@ -31,4 +31,4 @@
             </div>
         </div>
     {{/each}}
-</div>
+</div>

package/addon/components/order/activity-timeline.hbs

@@ -1,33 +1,35 @@
-{{#if @resource.tracking_statuses}}
-    <Timeline @activity={{@resource.tracking_statuses}} @arrowClass="bg-gray-600 border border-gray-900 shadow-md" as |TimelineItem|>
-        <TimelineItem @activeStatus={{@resource.status}} as |trackingStatus|>
-            <div class="flex flex-col px-3 py-2 rounded text-sm leading-4 space-y-2 bg-gray-100 dark:bg-gray-900 dark:text-white">
-                <div class="flex flex-col space-y-1">
-                    <div class="text-xs font-semibold truncate">{{trackingStatus.status}}</div>
-                    <div class="text-xs truncate">{{n-a trackingStatus.details}}</div>
-                    <div class="text-xs">{{format-date-fns trackingStatus.created_at "d MMM HH:mm"}}</div>
+{{#let (or @activity @resource.tracking_statuses) as |activity|}}
+    {{#if activity.length}}
+        <Timeline @activity={{activity}} @arrowClass="bg-gray-600 border border-gray-900 shadow-md" as |TimelineItem|>
+            <TimelineItem @activeStatus={{@resource.status}} as |trackingStatus|>
+                <div class="flex flex-col px-3 py-2 rounded text-sm leading-4 space-y-2 bg-gray-100 dark:bg-gray-900 dark:text-white">
+                    <div class="flex flex-col space-y-1">
+                        <div class="text-xs font-semibold truncate">{{trackingStatus.status}}</div>
+                        <div class="text-xs truncate">{{n-a trackingStatus.details}}</div>
+                        <div class="text-xs">{{format-date-fns trackingStatus.created_at "d MMM HH:mm"}}</div>
+                    </div>
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                        <InputInfo>
+                            <div class="text-xs">{{or trackingStatus.details trackingStatus.status}}</div>
+                            <div class="text-xs">{{format-date-fns trackingStatus.created_at "d MMM yyyy HH:mm"}}</div>
+                        </InputInfo>
+                    </Attach::Tooltip>
                 </div>
-                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                    <InputInfo>
-                        <div class="text-xs">{{or trackingStatus.details trackingStatus.status}}</div>
-                        <div class="text-xs">{{format-date-fns trackingStatus.created_at "d MMM yyyy HH:mm"}}</div>
-                    </InputInfo>
-                </Attach::Tooltip>
-            </div>
-        </TimelineItem>
-    </Timeline>
-{{else}}
-    <div class="min-h-24 p-4">
-        <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
-            <div class="text-center">
-                <FaIcon @icon="layer-group" @size="2x" class="text-gray-400 mb-2" />
-                <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
-                    No order activity
-                </div>
-                <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
-                    Dispatch or update the order to create activity
+            </TimelineItem>
+        </Timeline>
+    {{else}}
+        <div class="min-h-24 p-4">
+            <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
+                <div class="text-center">
+                    <FaIcon @icon="layer-group" @size="2x" class="text-gray-400 mb-2" />
+                    <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
+                        No order activity
+                    </div>
+                    <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                        Dispatch or update the order to create activity
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-{{/if}}
+    {{/if}}
+{{/let}}

package/addon/components/order/details/activity.hbs

@@ -6,8 +6,8 @@
     @wrapperClass="bordered-top"
 >
     {{#if (eq this.layout "timeline")}}
-        <Order::ActivityTimeline @resource={{@resource}} />
+        <Order::ActivityTimeline @resource={{@resource}} @activity={{this.parentOrderActivity}} />
     {{else}}
-        <Order::ActivityList @resource={{@resource}} />
+        <Order::ActivityList @resource={{@resource}} @activity={{this.parentOrderActivity}} />
     {{/if}}
-</ContentPanel>
+</ContentPanel>

package/addon/components/order/details/activity.js

@@ -9,6 +9,17 @@ export default class OrderDetailsActivityComponent extends Component {
     @service intl;
     @tracked layout = this.appCache.get('fleetops:order:activity:layout', 'timeline');
 
+    get parentOrderActivity() {
+        const orderTrackingNumberUuid = this.args.resource?.tracking_number_uuid;
+        const activity = this.args.resource?.tracking_statuses ?? [];
+
+        if (!orderTrackingNumberUuid) {
+            return activity;
+        }
+
+        return activity.filter((trackingStatus) => trackingStatus.tracking_number_uuid === orderTrackingNumberUuid);
+    }
+
     /* eslint-disable ember/no-side-effects */
     get actionButtons() {
         return [
@@ -20,9 +31,9 @@ export default class OrderDetailsActivityComponent extends Component {
                         disabled: this.args.resource.status === 'canceled',
                         onClick: () => {
                             this.orderActions.updateActivity(this.args.resource, {
-                                onFinish: ({ activityCreated }) => {
+                                onFinish: (options) => {
                                     if (typeof this.args.onChange === 'function') {
-                                        this.args.onChange(activityCreated);
+                                        this.args.onChange(options);
                                     }
                                 },
                             });

package/addon/components/order/details/documents.js

@@ -39,6 +39,8 @@ export default class OrderDetailsDocumentsComponent extends Component {
                 file,
                 {
                     path: 'uploads/fleet-ops/order-files',
+                    subject_uuid: this.args.resource.id,
+                    subject_type: 'fleet-ops:order',
                     type: 'order_file',
                 },
                 (uploadedFile) => {

package/addon/components/order/details/proof.hbs

@@ -1,42 +1,44 @@
-<ContentPanel @title={{t "order.fields.proof-of-delivery"}} @isLoading={{@isLoading}} @open={{true}} @wrapperClass="bordered-top">
-    {{#if this.proofs}}
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
-            {{#each this.proofs as |proof|}}
-                <div>
-                    {{#if (eq proof.type "photo")}}
-                        <a href={{proof.url}} target={{proof.id}}>
-                            <Image src={{proof.url}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
-                        </a>
-                    {{/if}}
-                    {{#if (eq proof.type "signature")}}
-                        <a href={{proof.raw}} target={{proof.id}} download>
-                            <Image src={{proof.raw}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
-                        </a>
-                    {{/if}}
-                    {{#if (eq proof.type "scan")}}
-                        <div class="flex items-center mb-2">
-                            <FaIcon @icon="qrcode" @size="2xl" class="text-blue-400" />
-                        </div>
-                    {{/if}}
-                    <div class="font-semibold text-sm mb-0.5">{{proof.remarks}}</div>
-                    <div class="text-xs">{{proof.public_id}}</div>
-                    <div class="text-xs">{{format-date-fns proof.created_at}}</div>
-                </div>
-            {{/each}}
-        </div>
-    {{else}}
-        <div class="min-h-24 p-4">
-            <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
-                <div class="text-center">
-                    <FaIcon @icon="camera-retro" @size="2x" class="text-gray-400 mb-2" />
-                    <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
-                        No proof of delivery
+<div {{did-update this.reloadProofs @reloadToken}}>
+    <ContentPanel @title={{t "order.fields.proof-of-delivery"}} @isLoading={{@isLoading}} @open={{true}} @wrapperClass="bordered-top">
+        {{#if this.proofs}}
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
+                {{#each this.proofs as |proof|}}
+                    <div>
+                        {{#if (eq proof.type "photo")}}
+                            <a href={{proof.url}} target={{proof.id}}>
+                                <Image src={{proof.url}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
+                            </a>
+                        {{/if}}
+                        {{#if (eq proof.type "signature")}}
+                            <a href={{proof.raw}} target={{proof.id}} download>
+                                <Image src={{proof.raw}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
+                            </a>
+                        {{/if}}
+                        {{#if (eq proof.type "scan")}}
+                            <div class="flex items-center mb-2">
+                                <FaIcon @icon="qrcode" @size="2xl" class="text-blue-400" />
+                            </div>
+                        {{/if}}
+                        <div class="font-semibold text-sm mb-0.5">{{proof.remarks}}</div>
+                        <div class="text-xs">{{proof.public_id}}</div>
+                        <div class="text-xs">{{format-date-fns proof.created_at}}</div>
                     </div>
-                    <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
-                        Captured proof of delivery will show up here
+                {{/each}}
+            </div>
+        {{else}}
+            <div class="min-h-24 p-4">
+                <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
+                    <div class="text-center">
+                        <FaIcon @icon="camera-retro" @size="2x" class="text-gray-400 mb-2" />
+                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
+                            No proof of delivery
+                        </div>
+                        <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                            Captured proof of delivery will show up here
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    {{/if}}
-</ContentPanel>
+        {{/if}}
+    </ContentPanel>
+</div>

package/addon/components/order/details/proof.js

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency-decorators';
 
@@ -13,12 +14,18 @@ export default class OrderDetailsProofComponent extends Component {
     }
 
     @task *loadOrderProofs(order) {
+        if (!order?.id) {
+            this.proofs = [];
+            return;
+        }
+
         const proofs = yield this.fetch.get(`orders/${order.id}/proofs`);
 
-        this.proofs = proofs.map((proof) => ({
-            ...proof,
-            type: this.#getTypeFromRemarks(proof.remarks),
-        }));
+        this.proofs = this.#normalizeProofs(proofs);
+    }
+
+    @action reloadProofs() {
+        this.loadOrderProofs.perform(this.args.resource);
     }
 
     #getTypeFromRemarks(remarks = '') {
@@ -27,4 +34,24 @@ export default class OrderDetailsProofComponent extends Component {
         if (remarks.endsWith('Signature')) return 'signature';
         return undefined;
     }
+
+    #normalizeProofs(proofs = []) {
+        const seen = new Set();
+
+        return proofs
+            .filter((proof) => {
+                const key = proof.uuid ?? proof.public_id ?? proof.id;
+                if (!key || seen.has(key)) {
+                    return false;
+                }
+
+                seen.add(key);
+                return true;
+            })
+            .map((proof) => ({
+                ...proof,
+                type: this.#getTypeFromRemarks(proof.remarks),
+            }))
+            .sort((a, b) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
+    }
 }

package/addon/components/order/details/purchase-rate.hbs

@@ -12,7 +12,7 @@
                     {{#each @resource.purchase_rate.service_quote.items as |item|}}
                         <tr class="border-b border-gray-100 dark:border-gray-800 last:border-0">
                             <td class="py-1 pr-2 text-gray-700 dark:text-gray-300">
-                                {{smart-humanize item.details}}
+                                {{item.details}}
                             </td>
                             <td class="py-1 pl-2 text-right font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap">
                                 {{format-currency item.amount @resource.purchase_rate.service_quote.currency}}
@@ -33,4 +33,4 @@
             </table>
         </div>
     </ContentPanel>
-{{/if}}
+{{/if}}

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

@@ -26,17 +26,25 @@
 
     {{#if @resource.hasIntermediateWaypoints}}
         <div>
-            <RouteList @order={{@resource}} @eta={{@resource.eta}} @waypointActions={{hash viewWaypointLabel=(hash label=(t "order.fields.get-label") fn=this.viewWaypointLabel)}} />
+            <RouteList
+                @order={{@resource}}
+                @eta={{if this.showRouteEtaData @resource.eta}}
+                @showEta={{this.showRouteEtaData}}
+                @waypointActions={{hash
+                    viewStopActivity=(hash label="View activity" fn=this.viewStopActivity)
+                    viewWaypointLabel=(hash label=(t "order.fields.get-label") fn=this.viewWaypointLabel)
+                }}
+            />
         </div>
     {{else}}
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
             <div class="field-info-container">
                 <label class="field-name">{{t "order.fields.pickup"}}</label>
-                <DisplayPlace @place={{@resource.payload.pickup}} @eta={{get @resource.eta @resource.payload.pickup.id}} />
+                <DisplayPlace @place={{@resource.payload.pickup}} @eta={{if this.showRouteEtaData (get @resource.eta @resource.payload.pickup.id)}} />
             </div>
             <div class="field-info-container">
                 <label class="field-name">{{t "order.fields.dropoff"}}</label>
-                <DisplayPlace @place={{@resource.payload.dropoff}} @eta={{get @resource.eta @resource.payload.dropoff.id}} />
+                <DisplayPlace @place={{@resource.payload.dropoff}} @eta={{if this.showRouteEtaData (get @resource.eta @resource.payload.dropoff.id)}} />
             </div>
             <div class="field-info-container">
                 <label class="field-name">{{t "order.fields.return"}}</label>