@fleetbase/fleetops-engine 0.6.18 → 0.6.19

package/addon/templates/operations/orders/index/view.hbs

@@ -1,876 +0,0 @@
-<Overlay @position="right" @noBackdrop={{true}} @width="570px" @fullHeight={{true}} @isResizable={{true}} @onLoad={{this.setupInterface}} as |overlay|>
-    <Overlay::Header
-        @overlay={{overlay}}
-        @title={{@model.public_id}}
-        @status={{@model.status}}
-        @dispatched={{@model.dispatched}}
-        @createdAt={{@model.createdAt}}
-        @onPressCancel={{this.transitionBack}}
-    >
-        {{#if @model.canBeDispatched}}
-            <Button
-                @type="primary"
-                @icon="paper-plane"
-                @text={{t "fleet-ops.operations.orders.index.view.dispatch"}}
-                class="mr-2"
-                @onClick={{fn this.dispatchOrder @model}}
-                @permission="fleet-ops dispatch order"
-            />
-        {{/if}}
-        <DropdownButton @icon="ellipsis-h" @size="sm" @iconPrefix="fas" as |dd|>
-            <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
-                <div class="px-1">
-                    <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
-                        {{t "fleet-ops.operations.orders.index.view.order-actions"}}
-                    </div>
-                </div>
-                <div class="next-dd-menu-seperator"></div>
-                <div class="px-1">
-                    {{#let (cannot "fleet-ops update order") as |unauthorized|}}
-                        <div>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.editOrder @model)}} disabled={{unauthorized}}>
-                                <div class="w-6">
-                                    <FaIcon @icon="edit" />
-                                </div>
-                                <span>{{t "fleet-ops.operations.orders.index.view.edit-details"}}</span>
-                            </a>
-                            {{#if unauthorized}}
-                                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                                    <InputInfo @text={{t "common.unauthorized"}} />
-                                </Attach::Tooltip>
-                            {{/if}}
-                        </div>
-                    {{/let}}
-                    {{#unless @model.isIntegratedVendorOrder}}
-                        {{#let (cannot "fleet-ops update order") as |unauthorized|}}
-                            <div>
-                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.createNewActivity @model)}} disabled={{unauthorized}}>
-                                    <div class="w-6">
-                                        <FaIcon @icon="signal" />
-                                    </div>
-                                    <span>{{t "fleet-ops.operations.orders.index.view.update-activity"}}</span>
-                                </a>
-                                {{#if unauthorized}}
-                                    <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                                        <InputInfo @text={{t "common.unauthorized"}} />
-                                    </Attach::Tooltip>
-                                {{/if}}
-                            </div>
-                        {{/let}}
-                        {{#let (cannot "fleet-ops assign-driver-for order") as |unauthorized|}}
-                            <div>
-                                {{#if @model.driver_assigned_uuid}}
-                                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.unassignDriver @model)}} disabled={{unauthorized}}>
-                                        <div class="w-6">
-                                            <FaIcon @icon="user-xmark" />
-                                        </div>
-                                        <span>{{t "fleet-ops.operations.orders.index.view.unassign-driver"}}</span>
-                                    </a>
-                                {{else}}
-                                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.assignDriver @model)}} disabled={{unauthorized}}>
-                                        <div class="w-6">
-                                            <FaIcon @icon="user-check" />
-                                        </div>
-                                        <span>{{t "fleet-ops.operations.orders.index.view.assign-driver"}}</span>
-                                    </a>
-                                {{/if}}
-                                {{#if unauthorized}}
-                                    <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                                        <InputInfo @text={{t "common.unauthorized"}} />
-                                    </Attach::Tooltip>
-                                {{/if}}
-                            </div>
-                        {{/let}}
-                        {{#let (cannot "fleet-ops view order") as |unauthorized|}}
-                            <div>
-                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.viewOrderLabel @model)}} disabled={{unauthorized}}>
-                                    <div class="w-6">
-                                        <FaIcon @icon="file-invoice" />
-                                    </div>
-                                    <span>{{t "fleet-ops.operations.orders.index.view.get-order-label"}}</span>
-                                </a>
-                                {{#if unauthorized}}
-                                    <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                                        <InputInfo @text={{t "common.unauthorized"}} />
-                                    </Attach::Tooltip>
-                                {{/if}}
-                            </div>
-                        {{/let}}
-                    {{/unless}}
-                    <div class="next-dd-menu-seperator"></div>
-                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.listenToSocket @model)}}>
-                        <div class="w-6">
-                            <FaIcon @icon="headphones" />
-                        </div>
-                        <span>{{t "fleet-ops.operations.orders.index.view.listen-socket-channel"}}</span>
-                    </a>
-                    {{#let (cannot "fleet-ops view order") as |unauthorized|}}
-                        <div>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.viewOrderMeta @model)}} disabled={{unauthorized}}>
-                                <div class="w-6">
-                                    <FaIcon @icon="table" />
-                                </div>
-                                <span>{{t "fleet-ops.operations.orders.index.view.view-metadata"}}</span>
-                            </a>
-                            {{#if unauthorized}}
-                                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                                    <InputInfo @text={{t "common.unauthorized"}} />
-                                </Attach::Tooltip>
-                            {{/if}}
-                        </div>
-                    {{/let}}
-                    {{#unless @model.isCanceled}}
-                        {{#let (cannot "fleet-ops cancel order") as |unauthorized|}}
-                            <div class="next-dd-menu-seperator"></div>
-                            <div>
-                                <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (dropdown-fn dd this.cancelOrder @model)}} disabled={{unauthorized}}>
-                                    <div class="w-6">
-                                        <FaIcon @icon="ban" class="text-danger" />
-                                    </div>
-                                    <span>{{t "fleet-ops.operations.orders.index.view.cancel-order"}}</span>
-                                </a>
-                                {{#if unauthorized}}
-                                    <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                                        <InputInfo @text={{t "common.unauthorized"}} />
-                                    </Attach::Tooltip>
-                                {{/if}}
-                            </div>
-                        {{/let}}
-                    {{/unless}}
-                    {{#let (cannot "fleet-ops delete order") as |unauthorized|}}
-                        <div>
-                            <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (dropdown-fn dd this.deleteOrder @model)}} disabled={{unauthorized}}>
-                                <div class="w-6">
-                                    <FaIcon @icon="trash" class="text-danger" />
-                                </div>
-                                <span>{{t "fleet-ops.operations.orders.index.view.delete-order"}}</span>
-                            </a>
-                            {{#if unauthorized}}
-                                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
-                                    <InputInfo @text={{t "common.unauthorized"}} />
-                                </Attach::Tooltip>
-                            {{/if}}
-                        </div>
-                    {{/let}}
-                </div>
-            </div>
-        </DropdownButton>
-    </Overlay::Header>
-
-    <Overlay::Body @wrapperClass="new-order-overlay-body">
-        <ContentPanel
-            @title={{t "fleet-ops.operations.orders.index.view.activity"}}
-            @open={{true}}
-            @pad={{false}}
-            @isLoading={{this.loadOrderRelations.isRunning}}
-            @panelBodyWrapperClass="px-0 py-4"
-            @panelBodyClass="bg-white dark:bg-gray-800"
-        >
-            {{#if @model.tracking_statuses}}
-                <Timeline @activity={{@model.tracking_statuses}} @arrowClass="bg-gray-600 border border-gray-900 shadow-md" as |TimelineItem|>
-                    <TimelineItem @activeStatus={{@model.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">{{trackingStatus.createdAtShortWithTime}}</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">{{trackingStatus.createdAtShortWithTime}}</div>
-                                </InputInfo>
-                            </Attach::Tooltip>
-                        </div>
-                    </TimelineItem>
-                </Timeline>
-            {{else}}
-                <div class="px-10 py-2 flex items-center justify-center">
-                    <p class="text-red-600 dark:text-red-100">{{t "fleet-ops.operations.orders.index.view.unable-load-order-activity"}}</p>
-                </div>
-            {{/if}}
-        </ContentPanel>
-
-        <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @actionButtons={{this.detailPanelButtons}}>
-            <div class="flex mb-4 space-x-2">
-                {{#if @model.dispatched}}
-                    <Badge @hideStatusDot={{false}} @status="Dispatched" />
-                {{/if}}
-                {{#if @model.adhoc}}
-                    <Badge @hideStatusDot={{false}} @disableHumanize={{true}} @status="success">{{t "fleet-ops.operations.orders.index.view.ad-hoc"}}</Badge>
-                {{/if}}
-            </div>
-            <div class="grid grid-cols-2 lg:grid-cols-3 field-info-containers-darker gap-4 lg:gap-2">
-                <div class="field-info-container space-y-2">
-                    {{#if this.isMultiDropOrder}}
-                        <div class="field-name">{{pluralize (t "fleet-ops.operations.orders.index.view.customer")}}</div>
-                        <div class="flex flex-col space-y-2">
-                            {{#each this.orderWaypoints as |waypoint|}}
-                                <div class="flex flex-row">
-                                    <Image
-                                        src={{avatar-url waypoint.customer.photo_url}}
-                                        @fallbackSrc={{config "defaultValues.contactImage"}}
-                                        class="w-5 h-5 rounded-full shadow-sm mr-2"
-                                        alt={{waypoint.customer.name}}
-                                    />
-                                    <div class="flex flex-col space-x-1" {{set-width "130px"}}>
-                                        <div class="text-xs font-semibold truncate">{{n-a waypoint.customer.name "No Customer"}}</div>
-                                        {{#if waypoint.customer}}
-                                            <div class="text-xs truncate">{{n-a waypoint.customer.phone "No Phone"}}</div>
-                                        {{/if}}
-                                        <div class="text-xs truncate">{{n-a waypoint.address}}</div>
-                                    </div>
-                                    <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                                        <InputInfo>
-                                            <div class="text-xs font-semibold">{{n-a waypoint.customer.name "No Customer"}}</div>
-                                            <div class="text-xs truncate">{{n-a waypoint.address}}</div>
-                                            {{#if waypoint.customer}}
-                                                <div class="text-xs">{{n-a waypoint.customer.phone "No Phone"}}</div>
-                                            {{/if}}
-                                        </InputInfo>
-                                    </Attach::Tooltip>
-                                </div>
-                            {{/each}}
-                        </div>
-                    {{else}}
-                        <div class="field-name">{{t "fleet-ops.operations.orders.index.view.customer"}}</div>
-                        <div class="flex flex-row">
-                            <div>
-                                <Image
-                                    src={{avatar-url @model.customer.photo_url}}
-                                    @fallbackSrc={{config "defaultValues.contactImage"}}
-                                    class="w-8 h-8 rounded-md shadow-sm mr-2"
-                                    alt={{@model.customer.name}}
-                                />
-                            </div>
-                            <div>
-                                <div class="field-value">{{n-a @model.customer.name "No Customer"}}</div>
-                                {{#if @model.customer}}
-                                    <div>{{n-a @model.customer.phone "No Phone"}}</div>
-                                {{/if}}
-                            </div>
-                        </div>
-                    {{/if}}
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.operations.orders.index.view.facilitator"}}</div>
-                    <div class="flex flex-row">
-                        <div>
-                            <Image
-                                src={{avatar-url @model.facilitator.photo_url}}
-                                @fallbackSrc={{config "defaultValues.contactImage"}}
-                                class="w-8 h-8 rounded-md border border-gray-200 dark:border-gray-900 shadow-sm mr-2"
-                                alt={{@model.facilitator.name}}
-                            />
-                        </div>
-                        <div>
-                            <div class="field-value">{{n-a @model.facilitator.name "No Facilitator"}}</div>
-                            {{#if @model.facilitator}}
-                                <div>{{n-a @model.facilitator.phone "No Phone"}}</div>
-                            {{/if}}
-                        </div>
-                    </div>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name flex flex-row items-center justify-between">
-                        <span>{{t "fleet-ops.operations.orders.index.view.driver-assigned"}}</span>
-                    </div>
-                    <div>
-                        <a href="javascript:;" class="flex flex-row" {{on "click" (fn this.focusOrderAssignedDriver @model)}}>
-                            <div class="relative shrink-0">
-                                <Image
-                                    src={{avatar-url @model.driver_assigned.photo_url}}
-                                    @fallbackSrc={{config "defaultValues.driverImage"}}
-                                    width="32"
-                                    height="32"
-                                    class="w-8 h-8 rounded-md shadow-sm mr-3 lg:mr-2"
-                                    alt={{@model.driver_assigned.name}}
-                                />
-                                <FaIcon
-                                    @icon="circle"
-                                    @size="2xs"
-                                    class="absolute left-0 top-0 h-2 w-2 -ml-1 -mt-1 {{if @model.driver_assigned.online 'text-green-500' 'text-yellow-200'}}"
-                                />
-                            </div>
-                            <div class="field-value">
-                                <div>{{n-a @model.driver_assigned.name "No Driver"}}</div>
-                                {{#if @model.driver_assigned}}
-                                    <div>{{n-a @model.driver_assigned.phone "No Phone"}}</div>
-                                {{/if}}
-                            </div>
-                        </a>
-                        <div class="mt-1">
-                            <Button
-                                @size="xs"
-                                @type="default"
-                                @icon="edit"
-                                @text={{if @model.has_driver_assigned (t "fleet-ops.operations.orders.index.view.change-driver") (t "fleet-ops.operations.orders.index.view.assign-driver")}}
-                                @onClick={{fn this.assignDriver @model}}
-                                @permission="fleet-ops assign-driver-for order"
-                            />
-                        </div>
-                    </div>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name flex flex-row items-center justify-between">
-                        <span>{{t "fleet-ops.operations.orders.index.view.vehicle-assigned"}}</span>
-                    </div>
-                    <div>
-                        <a href="javascript:;" class="flex flex-row shrink-0">
-                            <div class="shrink-0 relative">
-                                <Image
-                                    src={{@model.vehicle_assigned.photo_url}}
-                                    @fallbackSrc={{config "defaultValues.vehicleImage"}}
-                                    width="24"
-                                    height="24"
-                                    class="w-8 h-8 rounded-md shadow-sm mr-3 lg:mr-2"
-                                    alt={{@model.vehicle_assigned.display_name}}
-                                />
-                                <FaIcon
-                                    @icon="circle"
-                                    @size="2xs"
-                                    class="absolute left-0 top-0 h-2 w-2 -ml-1 -mt-1 {{if @model.vehicle_assigned.online 'text-green-500' 'text-yellow-200'}}"
-                                />
-                            </div>
-                            <div class="field-value">
-                                <div>{{n-a @model.vehicle_assigned.display_name "No Vehicle"}}</div>
-                            </div>
-                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                                <InputInfo>
-                                    <div class="text-xs font-semibold">{{@model.vehicle_assigned.displayName}}</div>
-                                    <div class="text-xs">Driver: {{n-a @model.vehicle_assigned.driver_name}}</div>
-                                    <div class="text-xs">Status:
-                                        <span class="{{if @model.vehicle_assigned.online 'text-green-500' 'text-red-400'}}">{{if
-                                                @model.vehicle_assigned.online
-                                                "Online"
-                                                "Offline"
-                                            }}</span></div>
-                                    <div class="text-xs truncate">Pos: {{point-coordinates @model.vehicle_assigned.location}}</div>
-                                </InputInfo>
-                            </Attach::Tooltip>
-                        </a>
-
-                    </div>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.common.internal-id"}}</div>
-                    <ClickToCopy @value={{@model.internal_id}} class="field-value">{{n-a @model.internal_id}}</ClickToCopy>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.operations.orders.index.view.tracking-number"}}</div>
-                    <ClickToCopy @value={{@model.tracking_number.tracking_number}} class="field-value">{{n-a @model.tracking_number.tracking_number}}</ClickToCopy>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.operations.orders.index.view.date-scheduled"}}</div>
-                    <div class="field-value">{{n-a @model.scheduledAt}}</div>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.operations.orders.index.view.date-dispatched"}}</div>
-                    <div class="field-value">{{n-a @model.dispatchedAt}}</div>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.operations.orders.index.view.date-started"}}</div>
-                    <div class="field-value">{{n-a @model.startedAt}}</div>
-                </div>
-                <div class="field-info-container space-y-2">
-                    <div class="field-name">{{t "fleet-ops.common.type"}}</div>
-                    <div class="field-value">
-                        <Badge @status="info">{{n-a (humanize @model.type)}}</Badge>
-                    </div>
-                </div>
-                {{#if @model.pod_required}}
-                    <div class="field-info-container space-y-2">
-                        <div class="field-name">{{t "fleet-ops.operations.orders.index.view.proof-of-delivery"}}</div>
-                        <div class="field-value">{{n-a (smart-humanize @model.pod_method)}}</div>
-                    </div>
-                {{/if}}
-            </div>
-        </ContentPanel>
-
-        {{#if this.customFieldGroups}}
-            {{#each this.customFieldGroups as |group|}}
-                <ContentPanel @title={{group.name}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-                    <div class="grid grid-cols-{{or group.meta.grid_size 1}} gap-2">
-                        {{#each group.customFields as |customField|}}
-                            <div class="field-info-container space-y-2">
-                                <div class="field-name">{{customField.label}}</div>
-                                {{#if (and (eq customField.type "file-upload") customField.value.asFile)}}
-                                    <File @file={{customField.value.asFile}} @onDelete={{fn this.removeCustomFieldFile customField.value}} class="custom-field-file" />
-                                {{else}}
-                                    <div class="field-value">{{n-a customField.value.value}}</div>
-                                {{/if}}
-                            </div>
-                        {{/each}}
-                    </div>
-                </ContentPanel>
-            {{/each}}
-        {{/if}}
-
-        {{#if @model.purchase_rate}}
-            <ContentPanel @title={{t "fleet-ops.operations.orders.index.view.purchase-rate-panel-title"}} @open={{true}} @pad={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
-                <div class="order-view-purchase-rate-table-wrapper next-table-wrapper no-scroll h-auto table-fluid rounded-b-md">
-                    <table id="order-view-purchase-rate-table" class="table table-fixed flex-1">
-                        <thead>
-                            <tr>
-                                <th class="text-left">{{t "fleet-ops.operations.orders.index.new.breakdown"}}</th>
-                                <th>
-                                    <div class="flex flex-row items-center justify-end">{{@model.purchase_rate.service_quote.currency}}</div>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {{#each @model.purchase_rate.service_quote.items as |item|}}
-                                <tr>
-                                    <td>
-                                        <span class="font-semibold">{{smart-humanize item.details}}</span>
-                                    </td>
-                                    <td>
-                                        <div class="flex flex-row items-center justify-end">{{format-currency item.amount @model.purchase_rate.service_quote.currency}}</div>
-                                    </td>
-                                </tr>
-                            {{/each}}
-                            <tr class="border-b-0">
-                                <td class="border-b-0">
-                                    <span class="font-semibold">{{t "fleet-ops.common.total"}}</span>
-                                </td>
-                                <td class="border-b-0">
-                                    <div class="flex flex-row items-center justify-end">{{format-currency
-                                            @model.purchase_rate.service_quote.amount
-                                            @model.purchase_rate.service_quote.currency
-                                        }}</div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </ContentPanel>
-        {{/if}}
-
-        {{#if @model.tracking_number}}
-            <ContentPanel
-                @title={{t "fleet-ops.operations.orders.index.view.tracking"}}
-                @prefixTitleRight={{@model.tracking}}
-                @isLoading={{this.loadOrderRelations.isRunning}}
-                @open={{true}}
-                @pad={{true}}
-                @panelBodyClass="bg-white dark:bg-gray-800"
-            >
-                {{#if @model.tracker_data}}
-                    <div class="mb-4">
-                        <div class="mb-6">
-                            <OrderProgressBar
-                                @order={{@model}}
-                                @progress={{@model.tracker_data.progress_percentage}}
-                                @firstWaypointCompleted={{@model.tracker_data.first_waypoint_completed}}
-                                @lastWaypointCompleted={{@model.tracker_data.last_waypoint_completed}}
-                            />
-                        </div>
-                        <div class="grid grid-cols-2 gap-2">
-                            <div class="field-info-container space-y-1">
-                                <div class="field-name">Current ETA</div>
-                                <div class="field-value">{{n-a (format-duration @model.tracker_data.current_destination_eta)}}</div>
-                            </div>
-                            <div class="field-info-container space-y-1">
-                                <div class="field-name">Current ECT</div>
-                                <div class="field-value">{{n-a @model.tracker_data.estimated_completion_time_formatted}}</div>
-                            </div>
-                            <div class="field-info-container space-y-1">
-                                <div class="field-name">Current Destination</div>
-                                <div class="field-value">{{n-a @model.tracker_data.current_destination.address}}</div>
-                            </div>
-                        </div>
-                    </div>
-                {{/if}}
-                <div class="flex flex-col border border-gray-200 bg-gray-50 dark:bg-gray-900 dark:border-gray-700 rounded-md px-4 py-4 shadow-sm">
-                    <div class="flex flex-row items-center justify-center space-x-4">
-                        <div class="rounded-md bg-white p-2">
-                            <img src={{concat "data:image/png;base64," @model.tracking_number.qr_code}} class="w-14 h-14" alt={{@model.public_id}} />
-                        </div>
-                        <div class="rounded-md bg-white p-2">
-                            <img src={{concat "data:image/png;base64," @model.tracking_number.barcode}} class="w-40 h-14" alt={{@model.public_id}} />
-                        </div>
-                    </div>
-                    <div class="mt-4 flex justify-center items-center">
-                        <Button @size="xs" @type="default" @icon="barcode" @text="Get Order Label" @onClick={{fn this.viewOrderLabel @model}} @permission="fleet-ops view order" />
-                    </div>
-                </div>
-            </ContentPanel>
-        {{/if}}
-
-        <ContentPanel @title={{t "fleet-ops.operations.orders.index.view.proof-of-delivery"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-            {{#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 proof.created_at}}</div>
-                        </div>
-                    {{/each}}
-                </div>
-            {{else}}
-                <p class="text-gray-700 dark:text-gray-300 leading-5 text-sm">{{t "fleet-ops.operations.orders.index.view.no-proof-of-delivery"}}</p>
-            {{/if}}
-        </ContentPanel>
-
-        <ContentPanel
-            @title={{t "fleet-ops.operations.orders.index.view.notes-title"}}
-            @open={{true}}
-            @pad={{true}}
-            @panelBodyClass="bg-white dark:bg-gray-800"
-            @actionButtons={{this.notesPanelButtons}}
-        >
-            {{#if this.isEditingOrderNotes}}
-                <Textarea
-                    @value={{@model.notes}}
-                    class="form-input w-full"
-                    placeholder={{t "fleet-ops.operations.orders.index.view.notes-placeholder"}}
-                    rows={{4}}
-                    disabled={{cannot "fleet-ops update order"}}
-                />
-                <div class="flex items-center space-x-2">
-                    <Button
-                        @type="primary"
-                        @icon="save"
-                        @text={{t "fleet-ops.operations.orders.index.view.save-order-note"}}
-                        @onClick={{perform this.saveOrderNotes}}
-                        @isLoading={{not this.saveOrderNotes.isIdle}}
-                        @permission="fleet-ops update order"
-                    />
-                    <Button @type="default" @icon="times" @text={{t "fleet-ops.common.cancel"}} @onClick={{this.cancelEditOrderNotes}} />
-                </div>
-            {{else}}
-                <p class="text-gray-700 dark:text-gray-300 leading-5 text-sm">{{n-a @model.notes}}</p>
-            {{/if}}
-        </ContentPanel>
-
-        {{#if @model.isIntegratedVendorOrder}}
-            <ContentPanel
-                @title={{concat @model.facilitator.name (t "fleet-ops.operations.orders.index.view.order-details-title")}}
-                @open={{true}}
-                @pad={{true}}
-                @panelBodyClass="bg-white dark:bg-gray-800"
-            >
-                <IntegratedOrderDetails @integratedVendor={{@model.facilitator}} @details={{@model.meta.integrated_vendor_order}} />
-            </ContentPanel>
-        {{/if}}
-
-        <ContentPanel
-            @title={{t "fleet-ops.operations.orders.index.view.route-panel-title"}}
-            @open={{true}}
-            @pad={{true}}
-            @panelBodyClass="bg-white dark:bg-gray-800"
-            @actionButtons={{this.routePanelButtons}}
-        >
-            {{#if @model.payload.isMultiDrop}}
-                <div>
-                    <RouteList
-                        @order={{@model}}
-                        @eta={{@model.eta}}
-                        @waypointActions={{hash viewWaypointLabel=(hash label=(t "fleet-ops.operations.orders.index.view.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 "fleet-ops.operations.orders.index.view.pickup"}}</label>
-                        <DisplayPlace @place={{@model.payload.pickup}} @eta={{get @model.eta @model.payload.pickup.id}} />
-                    </div>
-                    <div class="field-info-container">
-                        <label class="field-name">{{t "fleet-ops.operations.orders.index.view.dropoff"}}</label>
-                        <DisplayPlace @place={{@model.payload.dropoff}} @eta={{get @model.eta @model.payload.dropoff.id}} />
-                    </div>
-                    <div class="field-info-container">
-                        <label class="field-name">{{t "fleet-ops.operations.orders.index.view.return"}}</label>
-                        <DisplayPlace @place={{@model.payload.return}} />
-                    </div>
-                </div>
-            {{/if}}
-        </ContentPanel>
-
-        {{#if this.renderableComponents}}
-            {{#each this.renderableComponents as |renderableComponent|}}
-                {{component renderableComponent order=this.order}}
-            {{/each}}
-        {{/if}}
-
-        <ContentPanel @title={{t "fleet-ops.operations.orders.index.view.payload"}} @open={{gt @model.payload.entities.length 0}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-            {{#if this.isMultiDropOrder}}
-                <div class="space-y-2">
-                    {{#each this.entitiesByDestination as |group|}}
-                        <div class="rounded-md border border-gray-200 dark:border-gray-900 p-3">
-                            <div class="mb-3 flex justify-between items-start">
-                                <div class="flex-1">
-                                    {{#if group.waypoint.customer}}
-                                        <div class="field-info-container">
-                                            <div class="flex flex-row">
-                                                <div>
-                                                    <Image
-                                                        src={{avatar-url group.waypoint.customer.photo_url}}
-                                                        @fallbackSrc={{config "defaultValues.contactImage"}}
-                                                        class="w-8 h-8 rounded-md shadow-sm mr-2"
-                                                        alt={{group.waypoint.customer.name}}
-                                                    />
-                                                </div>
-                                                <div>
-                                                    <div class="field-value">{{n-a group.waypoint.customer.name "No Customer"}}</div>
-                                                    {{#if group.waypoint.customer}}
-                                                        <div>{{n-a group.waypoint.customer.phone "No Phone"}}</div>
-                                                    {{/if}}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    {{/if}}
-                                    <DisplayPlace @place={{group.waypoint}} @addressClass="text-sm" />
-                                    <div class="my-2">
-                                        <span class="rounded-md bg-yellow-300 text-yellow-900 px-2 py-1 text-sm">{{t "fleet-ops.operations.orders.index.view.tracking"}}
-                                            {{group.waypoint.tracking}}</span>
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="mb-2 flex justify-end">
-                                        <Badge @status={{group.waypoint.status_code}} />
-                                    </div>
-                                    <div class="flex items-start">
-                                        <DropdownButton
-                                            @triggerClass="mr-2"
-                                            @iconClass="icon-text-height"
-                                            @buttonSize="sm"
-                                            @icon="ellipsis-h"
-                                            @iconPrefix="fas"
-                                            @contentClass="dropdown-menu"
-                                            as |dd|
-                                        >
-                                            <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
-                                                <div class="px-1">
-                                                    <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-300">
-                                                        {{t "fleet-ops.operations.orders.index.view.waypoint-actions"}}
-                                                    </div>
-                                                </div>
-                                                <div class="next-dd-menu-seperator"></div>
-                                                <div class="px-1">
-                                                    <a
-                                                        href="javascript:;"
-                                                        class="next-dd-item"
-                                                        disabled={{cannot "fleet-ops view order"}}
-                                                        {{on "click" (fn this.viewWaypointLabel group.waypoint dd)}}
-                                                    >
-                                                        {{t "fleet-ops.operations.orders.index.view.get-label"}}
-                                                    </a>
-                                                    {{!-- <a href="javascript:;" class="next-dd-item">
-                                                        {{t "fleet-ops.operations.orders.index.view.view-activity"}}
-                                                    </a> --}}
-                                                </div>
-                                            </div>
-                                        </DropdownButton>
-                                        <Button
-                                            @icon="plus"
-                                            @iconPrefix="fas"
-                                            @text={{t "fleet-ops.operations.orders.index.view.add-item-button"}}
-                                            @size="sm"
-                                            @onClick={{fn this.addEntity group.waypoint}}
-                                            @permission="fleet-ops update order"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-2">
-                                {{#each group.entities as |entity|}}
-                                    <div class="col-3">
-                                        <div class="w-full rounded-md bg-gray-100 dark:bg-gray-900 shadow-sm p-3 relative">
-                                            <div class="flex items-center justify-center mb-3">
-                                                <Image
-                                                    src={{entity.photo_url}}
-                                                    @fallbackSrc={{config "defaultValues.entityImage"}}
-                                                    class="w-14 h-14 rounded-md shadow-sm"
-                                                    alt={{or entity.name entity.public_id}}
-                                                />
-                                            </div>
-                                            <div>
-                                                <div class="dark:text-gray-100 font-bold truncate mb-1">
-                                                    {{n-a entity.name}}
-                                                </div>
-                                                <div class="dark:text-gray-100 truncate mb-2">
-                                                    {{entity.tracking}}
-                                                </div>
-                                                <div class="space-y-2">
-                                                    <Button
-                                                        @icon="pencil"
-                                                        @text={{t "fleet-ops.operations.orders.index.view.edit-item-button"}}
-                                                        @size="xs"
-                                                        @onClick={{fn this.editEntity entity}}
-                                                        @permission="fleet-ops update order"
-                                                        class="w-full"
-                                                    />
-                                                    <Button
-                                                        @icon="file-invoice"
-                                                        @text={{t "fleet-ops.operations.orders.index.view.view-label"}}
-                                                        @size="xs"
-                                                        @onClick={{fn this.viewEntityLabel entity}}
-                                                        @permission="fleet-ops view entity"
-                                                        class="w-full"
-                                                    />
-                                                </div>
-                                            </div>
-                                            <div class="absolute top-0 right-0 p-2">
-                                                <Button
-                                                    @icon="times"
-                                                    @iconPrefix="fas"
-                                                    @type="danger"
-                                                    @size="xs"
-                                                    @onClick={{fn this.removeEntity entity}}
-                                                    @permission="fleet-ops update order"
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-                                {{/each}}
-                            </div>
-                        </div>
-                    {{/each}}
-                </div>
-            {{else}}
-                <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-2">
-                    {{#each @model.payload.entities as |entity index|}}
-                        <div class="col-3">
-                            <div class="w-full rounded-md bg-gray-100 dark:bg-gray-900 shadow-sm p-3 relative">
-                                <div class="flex items-center justify-center mb-3">
-                                    <Image
-                                        src={{entity.photo_url}}
-                                        @fallbackSrc={{config "defaultValues.entityImage"}}
-                                        class="w-14 h-14 rounded-md shadow-sm"
-                                        alt={{or entity.name entity.public_id}}
-                                    />
-                                </div>
-                                <div>
-                                    <div class="dark:text-gray-100 font-bold truncate mb-1">
-                                        {{n-a entity.name}}
-                                    </div>
-                                    <div class="dark:text-gray-100 truncate mb-2">
-                                        {{entity.tracking}}
-                                    </div>
-                                    <Button
-                                        @icon="pencil"
-                                        @text={{t "fleet-ops.operations.orders.index.view.edit-item-button"}}
-                                        @size="sm"
-                                        @onClick={{fn this.editEntity entity}}
-                                        @permission="fleet-ops update order"
-                                    />
-                                </div>
-                                <div class="absolute top-0 right-0 p-2">
-                                    <Button
-                                        @icon="times"
-                                        @iconPrefix="fas"
-                                        @type="danger"
-                                        @size="xs"
-                                        @onClick={{fn this.removeEntity entity}}
-                                        @wrapperClass={{if (eq index 0) "invisible"}}
-                                        @permission="fleet-ops update order"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                    {{/each}}
-                </div>
-            {{/if}}
-        </ContentPanel>
-
-        <ContentPanel @title={{t "fleet-ops.operations.orders.index.view.documents-panel-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-            <div class="space-y-4">
-                {{#if this.isUploading}}
-                    <div
-                        class="dropzone w-full rounded-lg px-4 py-8 bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
-                    >
-                        <div class="flex items-center justify-center py-5">
-                            <Spinner class="text-sm dar:text-gray-100" @loadingMessage={{t "fleet-ops.common.uploading"}} />
-                        </div>
-                    </div>
-                {{else}}
-                    {{#let (file-queue name="files" onFileAdded=this.queueFile accept=(join "," this.acceptedFileTypes)) as |queue|}}
-                        <FileDropzone @queue={{queue}} class="dropzone file-dropzone" as |dropzone|>
-                            {{#if dropzone.active}}
-                                {{#if dropzone.valid}}
-                                    {{t "component.dropzone.drop-to-upload"}}
-                                {{else}}
-                                    {{t "component.dropzone.invalid"}}
-                                {{/if}}
-                            {{else if queue.files.length}}
-                                <div class="my-2">
-                                    <FaIcon @icon="folder-open" class="text-indigo-500 mr-2" />
-                                    {{t "component.dropzone.files-ready-for-upload" numOfFiles=(pluralize queue.files.length (t "component.dropzone.file"))}}
-                                </div>
-                                <div class="my-2">({{queue.progress}}%)</div>
-                            {{else}}
-                                <h4 class="font-semibold">
-                                    <FaIcon @icon="folder-open" @size="lg" class="text-indigo-500 mr-2" />
-                                    {{t "component.dropzone.upload-documents-files"}}
-                                </h4>
-                                <div>
-                                    {{#if dropzone.supported}}
-                                        <p class="text-sm my-5">{{t "component.dropzone.dropzone-supported-files"}}</p>
-                                    {{/if}}
-                                    <FileUpload
-                                        @name="files"
-                                        @for="files"
-                                        @accept={{join "," this.acceptedFileTypes}}
-                                        @multiple={{true}}
-                                        @onFileAdded={{this.queueFile}}
-                                        @disabled={{cannot "fleet-ops update order"}}
-                                    >
-                                        <a tabindex={{0}} class="btn btn-magic cursor-pointer ml-1">{{t "component.dropzone.or-select-button-text"}}</a>
-                                    </FileUpload>
-                                </div>
-                            {{/if}}
-                        </FileDropzone>
-                    {{/let}}
-                    {{#if this.uploadQueue}}
-                        <div class="mx-4">
-                            <div class="flex items-center justify-between mb-4">
-                                <span class="leading-6 dark:text-gray-100">{{t "component.dropzone.upload-queue"}}</span>
-                            </div>
-                            <div class="space-y-2 mb-4">
-                                {{#each this.uploadQueue as |file|}}
-                                    <div class="flex items-center justify-between bg-blue-100 border border-blue-800 dark:border-blue-800 py-1.5 shadow-sm rounded-lg px-4">
-                                        <div class="text-xs text-blue-900 truncate">{{truncate-filename file.name 50}}</div>
-                                        <div class="flex items-center text-sm">
-                                            <Spinner class="text-blue-900 mr-2" />
-                                            <span class="font-bold text-blue-900">{{round file.progress}}%</span>
-                                        </div>
-                                    </div>
-                                {{/each}}
-                            </div>
-                        </div>
-                    {{/if}}
-                    <div>
-                        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
-                            {{#each @model.files as |file|}}
-                                <File @file={{file}} @onDelete={{this.removeFile}} />
-                            {{/each}}
-                        </div>
-                    </div>
-                {{/if}}
-            </div>
-        </ContentPanel>
-
-        <ContentPanel @title={{t "fleet-ops.operations.orders.index.view.comments-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @wrapperClass="mb-20">
-            <CommentThread @subject={{@model}} @subjectType="fleet-ops:order" />
-        </ContentPanel>
-
-        <Spacer @height="300px" />
-    </Overlay::Body>
-</Overlay>