@fleetbase/fleetops-engine 0.6.18 → 0.6.19

package/addon/components/modals/vendor-form.hbs

@@ -13,7 +13,7 @@
                             <FaIcon @icon="handshake" @size="xl" class="text-blue-500" />
                         </div>
                         <div>
-                            <span class="text-gray-900 dark:text-gray-100 text-lg">{{t "fleet-ops.component.modals.vendor-form.choose-vendor"}}</span>
+                            <span class="text-gray-900 dark:text-gray-100 text-lg">{{t "modals.vendor-form.choose-vendor"}}</span>
                         </div>
                     </button>
                     <button
@@ -26,7 +26,7 @@
                             <FaIcon @icon="building" @size="xl" class="text-blue-500" />
                         </div>
                         <div>
-                            <span class="text-gray-900 dark:text-gray-100 text-lg">{{t "fleet-ops.component.modals.vendor-form.create-vendor"}}</span>
+                            <span class="text-gray-900 dark:text-gray-100 text-lg">{{t "modals.vendor-form.create-vendor"}}</span>
                         </div>
                     </button>
                 </div>
@@ -53,21 +53,21 @@
 
             {{#if @options.selectedIntegratedVendor}}
                 <div class="mb-2">
-                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.credentials"}}</label>
+                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "modals.vendor-form.credentials"}}</label>
                     {{#each @options.selectedIntegratedVendor.credential_params as |param|}}
                         <InputGroup
                             @name={{smart-humanize param.key}}
                             @value={{mut (get @options.integratedVendor.credentials param.key)}}
                             @helpText={{concat
-                                (t "fleet-ops.component.modals.vendor-form.optionally")
+                                (t "modals.vendor-form.optionally")
                                 (smart-humanize param.key)
-                                (t "fleet-ops.component.modals.vendor-form.configure-vendor")
+                                (t "modals.vendor-form.configure-vendor")
                             }}
                         />
                     {{/each}}
                 </div>
                 <div class="mb-2">
-                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.options"}}</label>
+                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "modals.vendor-form.options"}}</label>
                     {{#each @options.selectedIntegratedVendor.option_params as |param|}}
                         {{#if param.options}}
                             <InputGroup @name={{smart-humanize param.key}}>
@@ -77,7 +77,7 @@
                                     @optionValue={{param.optionValue}}
                                     @optionLabel={{param.optionLabel}}
                                     @humanize={{true}}
-                                    @placeholder={{concat (t "fleet-ops.component.modals.vendor-form.select") (smart-humanize param.key)}}
+                                    @placeholder={{concat (t "modals.vendor-form.select") (smart-humanize param.key)}}
                                     @onSelect={{fn (mut (get @options.integratedVendor.options param.key))}}
                                 />
                             </InputGroup>
@@ -86,9 +86,9 @@
                                 @name={{smart-humanize param.key}}
                                 @value={{mut (get @options.integratedVendor.options param.key)}}
                                 @helpText={{concat
-                                    (t "fleet-ops.component.modals.vendor-form.optionally")
+                                    (t "modals.vendor-form.optionally")
                                     (smart-humanize param.key)
-                                    (t "fleet-ops.component.modals.vendor-form.configure-vendor")
+                                    (t "modals.vendor-form.configure-vendor")
                                 }}
                             />
                         {{/if}}
@@ -97,7 +97,7 @@
                 <InputGroup @wrapperClass="mb-2">
                     <Checkbox
                         @value={{@options.integratedVendor.sandbox}}
-                        @label={{t "fleet-ops.component.modals.vendor-form.sandbox"}}
+                        @label={{t "modals.vendor-form.sandbox"}}
                         @onToggle={{fn (mut @options.integratedVendor.sandbox)}}
                         @alignItems="center"
                         @labelClass="mb-0i"
@@ -106,26 +106,26 @@
                 <div>
                     <button type="button" class="btn-link text-xs outline-none text-blue-600 hover:text-blue-600 mb-3" {{on "click" @options.toggleAdvancedOptions}}>
                         {{#if @options.showAdvancedOptions}}
-                            <span>{{t "fleet-ops.component.modals.vendor-form.hide-advanced"}}</span>
+                            <span>{{t "modals.vendor-form.hide-advanced"}}</span>
                         {{else}}
-                            <span>{{t "fleet-ops.component.modals.vendor-form.show-advanced"}}</span>
+                            <span>{{t "modals.vendor-form.show-advanced"}}</span>
                         {{/if}}
                     </button>
                     {{#if @options.showAdvancedOptions}}
                         <InputGroup
-                            @name={{t "fleet-ops.component.modals.vendor-form.custom-host"}}
+                            @name={{t "modals.vendor-form.custom-host"}}
                             @value={{@options.integratedVendor.host}}
-                            @helpText={{t "fleet-ops.component.modals.vendor-form.host-text"}}
+                            @helpText={{t "modals.vendor-form.host-text"}}
                         />
                         <InputGroup
-                            @name={{t "fleet-ops.component.modals.vendor-form.custom-namespace"}}
+                            @name={{t "modals.vendor-form.custom-namespace"}}
                             @value={{@options.integratedVendor.namespace}}
-                            @helpText={{t "fleet-ops.component.modals.vendor-form.namespace-text"}}
+                            @helpText={{t "modals.vendor-form.namespace-text"}}
                         />
                         <InputGroup
-                            @name={{t "fleet-ops.component.modals.vendor-form.webhook"}}
+                            @name={{t "modals.vendor-form.webhook"}}
                             @value={{@options.integratedVendor.webhook_url}}
-                            @helpText={{t "fleet-ops.component.modals.vendor-form.webhook-text"}}
+                            @helpText={{t "modals.vendor-form.webhook-text"}}
                         />
                     {{/if}}
                 </div>
@@ -141,22 +141,22 @@
                     </div>
                 </div>
                 <div class="mb-2">
-                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.credentials"}}</label>
+                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "modals.vendor-form.credentials"}}</label>
                     {{#if @options.isEditingCredentials}}
                         {{#each @options.vendor.provider_settings.credential_params as |param|}}
                             <InputGroup
                                 @name={{smart-humanize param.key}}
                                 @value={{mut (get @options.vendor.credentials param.key)}}
                                 @helpText={{concat
-                                    (t "fleet-ops.component.modals.vendor-form.optionally")
+                                    (t "modals.vendor-form.optionally")
                                     (smart-humanize param.key)
-                                    (t "fleet-ops.component.modals.vendor-form.configure-vendor")
+                                    (t "modals.vendor-form.configure-vendor")
                                 }}
                             />
                         {{/each}}
                         <div class="my-4">
                             <Button
-                                @text={{t "fleet-ops.component.modals.vendor-form.cancel-credentials"}}
+                                @text={{t "modals.vendor-form.cancel-credentials"}}
                                 @type="danger"
                                 @size="sm"
                                 @icon="times"
@@ -166,7 +166,7 @@
                     {{else}}
                         <div>
                             <div class="rounded-md border border-blue-300 dark:border-blue-600 bg-blue-100 dark:bg-blue-500 text-blue-900 dark:text-white text-sm px-4 py-2 mb-4">
-                                <p class="mb-2">{{t "fleet-ops.component.modals.vendor-form.reset-message"}}</p>
+                                <p class="mb-2">{{t "modals.vendor-form.reset-message"}}</p>
                                 <Button @type="default" @size="xs" @icon="repeat" @text="Click here to reset" @onClick={{@options.toggleCredentialsReset}} />
                             </div>
                         </div>
@@ -176,16 +176,16 @@
                                 @value="*********"
                                 @disabled="true"
                                 @helpText={{concat
-                                    (t "fleet-ops.component.modals.vendor-form.optionally")
+                                    (t "modals.vendor-form.optionally")
                                     (smart-humanize param.key)
-                                    (t "fleet-ops.component.modals.vendor-form.configure-vendor")
+                                    (t "modals.vendor-form.configure-vendor")
                                 }}
                             />
                         {{/each}}
                     {{/if}}
                 </div>
                 <div class="mb-2">
-                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.options"}}</label>
+                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "modals.vendor-form.options"}}</label>
                     {{#each @options.vendor.provider_settings.option_params as |param|}}
                         {{#if param.options}}
                             <InputGroup @name={{smart-humanize param.key}}>
@@ -195,7 +195,7 @@
                                     @optionValue={{param.optionValue}}
                                     @optionLabel={{param.optionLabel}}
                                     @humanize={{true}}
-                                    @placeholder={{concat (t "fleet-ops.component.modals.vendor-form.select") (smart-humanize param.key)}}
+                                    @placeholder={{concat (t "modals.vendor-form.select") (smart-humanize param.key)}}
                                     @onSelect={{fn (mut (get @options.vendor.options param.key))}}
                                 />
                             </InputGroup>
@@ -204,9 +204,9 @@
                                 @name={{smart-humanize param.key}}
                                 @value={{mut (get @options.vendor.options param.key)}}
                                 @helpText={{concat
-                                    (t "fleet-ops.component.modals.vendor-form.optionally")
+                                    (t "modals.vendor-form.optionally")
                                     (smart-humanize param.key)
-                                    (t "fleet-ops.component.modals.vendor-form.configure-vendor")
+                                    (t "modals.vendor-form.configure-vendor")
                                 }}
                             />
                         {{/if}}
@@ -218,69 +218,69 @@
                 <div>
                     <button type="button" class="btn-link text-xs outline-none text-blue-600 hover:text-blue-600 mb-3" {{on "click" @options.toggleAdvancedOptions}}>
                         {{#if @options.showAdvancedOptions}}
-                            <span>{{t "fleet-ops.component.modals.vendor-form.hide-advanced"}}</span>
+                            <span>{{t "modals.vendor-form.hide-advanced"}}</span>
                         {{else}}
-                            <span>{{t "fleet-ops.component.modals.vendor-form.show-advanced"}}</span>
+                            <span>{{t "modals.vendor-form.show-advanced"}}</span>
                         {{/if}}
                     </button>
                     {{#if @options.showAdvancedOptions}}
                         <InputGroup
-                            @name={{t "fleet-ops.component.modals.vendor-form.custom-host"}}
+                            @name={{t "modals.vendor-form.custom-host"}}
                             @value={{@options.vendor.host}}
-                            @helpText={{t "fleet-ops.component.modals.vendor-form.host-text"}}
+                            @helpText={{t "modals.vendor-form.host-text"}}
                         />
                         <InputGroup
-                            @name={{t "fleet-ops.component.modals.vendor-form.custom-namespace"}}
+                            @name={{t "modals.vendor-form.custom-namespace"}}
                             @value={{@options.vendor.namespace}}
-                            @helpText={{t "fleet-ops.component.modals.vendor-form.namespace-text"}}
+                            @helpText={{t "modals.vendor-form.namespace-text"}}
                         />
                         <InputGroup
-                            @name={{t "fleet-ops.component.modals.vendor-form.webhook"}}
+                            @name={{t "modals.vendor-form.webhook"}}
                             @value={{@options.vendor.webhook_url}}
-                            @helpText={{t "fleet-ops.component.modals.vendor-form.webhook-text"}}
+                            @helpText={{t "modals.vendor-form.webhook-text"}}
                         />
                     {{/if}}
                 </div>
             {{else}}
                 <div class="grid lg:grid-cols-2 grid-cols-1 gap-2 text-xs dark:text-gray-100">
-                    <InputGroup @name={{t "fleet-ops.common.name"}} @value={{@options.vendor.name}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.modals.vendor-form.name-text"}} />
+                    <InputGroup @name={{t "common.name"}} @value={{@options.vendor.name}} @wrapperClass="mb-0" @helpText={{t "modals.vendor-form.name-text"}} />
                     <InputGroup
-                        @name={{t "fleet-ops.common.email"}}
+                        @name={{t "common.email"}}
                         @type="email"
                         @value={{@options.vendor.email}}
                         @wrapperClass="mb-0"
-                        @helpText={{t "fleet-ops.component.modals.vendor-form.email-text"}}
+                        @helpText={{t "modals.vendor-form.email-text"}}
                     />
                     <InputGroup
-                        @name={{t "fleet-ops.common.phone"}}
+                        @name={{t "common.phone"}}
                         @type="tel"
                         @value={{@options.vendor.phone}}
                         @wrapperClass="mb-0"
-                        @helpText={{t "fleet-ops.component.modals.vendor-form.phone-text"}}
+                        @helpText={{t "modals.vendor-form.phone-text"}}
                     />
                     <InputGroup
-                        @name={{t "fleet-ops.common.website"}}
+                        @name={{t "common.website"}}
                         @value={{@options.vendor.website}}
                         @wrapperClass="mb-0"
-                        @helpText={{t "fleet-ops.component.modals.vendor-form.website-text"}}
+                        @helpText={{t "modals.vendor-form.website-text"}}
                     />
                     <InputGroup @wrapperClass="mb-0 col-span-2">
                         <div class="flex items-start justify-between">
                             <label>
-                                {{t "fleet-ops.common.address"}}
+                                {{t "common.address"}}
                             </label>
                             <div class="mb-1.5 flex flex-row">
                                 {{#if @options.vendor.has_place}}
-                                    <Button @type="default" @size="xs" @icon="edit" @text={{t "fleet-ops.common.edit"}} @onClick={{@options.editAddress}} />
+                                    <Button @type="default" @size="xs" @icon="edit" @text={{t "common.edit"}} @onClick={{@options.editAddress}} />
                                 {{/if}}
-                                <Button @type="default" @size="xs" @icon="plus" @text={{t "fleet-ops.common.new"}} @onClick={{@options.newAddress}} />
+                                <Button @type="default" @size="xs" @icon="plus" @text={{t "common.new"}} @onClick={{@options.newAddress}} />
                             </div>
                         </div>
 
                         <ModelSelect
                             @modelName="place"
                             @selectedModel={{@options.vendor.place}}
-                            @placeholder={{t "fleet-ops.component.modals.vendor-form.select-address"}}
+                            @placeholder={{t "modals.vendor-form.select-address"}}
                             @triggerClass="form-select form-input"
                             @infiniteScroll={{false}}
                             @renderInPlace={{true}}
@@ -293,12 +293,12 @@
                         </ModelSelect>
                     </InputGroup>
 
-                    <InputGroup @name={{t "fleet-ops.common.country"}} @wrapperClass="mb-0">
+                    <InputGroup @name={{t "common.country"}} @wrapperClass="mb-0">
                         <CountrySelect
                             class="w-full form-input form-select form-datalist"
                             @value={{@options.vendor.country}}
                             @onChange={{fn (mut @options.vendor.country)}}
-                            placeholder={{t "fleet-ops.common.country"}}
+                            placeholder={{t "common.country"}}
                         />
                     </InputGroup>
                 </div>

package/addon/components/modals/view-service-area.hbs

@@ -21,7 +21,7 @@
                     @onAdd={{fn this.onServiceAreaAdded @options.serviceArea}}
                     as |polygon|
                 >
-                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{@options.serviceArea.name}} {{t "fleet-ops.common.service-area"}}</polygon.tooltip>
+                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{@options.serviceArea.name}} {{t "common.service-area"}}</polygon.tooltip>
                 </layers.polygon>
             {{/if}}
         </LeafletMap>

package/addon/components/modals/zone-form.hbs

@@ -1,28 +1,28 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
         <div class="input-group">
-            <InputLabel @labelText={{t "fleet-ops.component.modals.zone-form.name"}} @helpText={{t "fleet-ops.component.modals.zone-form.name-text"}} @required={{true}} />
-            <Input @value={{@options.zone.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.zone-form.name"}} />
+            <InputLabel @labelText={{t "modals.zone-form.name"}} @helpText={{t "modals.zone-form.name-text"}} @required={{true}} />
+            <Input @value={{@options.zone.name}} @type="text" class="w-full form-input" placeholder={{t "modals.zone-form.name"}} />
         </div>
 
         <InputGroup
             @type="color"
             @value={{@options.zone.stroke_color}}
-            @name={{t "fleet-ops.component.modals.zone-form.border-color"}}
-            @helpText={{t "fleet-ops.component.modals.zone-form.customize-border"}}
+            @name={{t "modals.zone-form.border-color"}}
+            @helpText={{t "modals.zone-form.customize-border"}}
             class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
         />
         <InputGroup
             @type="color"
             @value={{@options.zone.color}}
-            @name={{t "fleet-ops.component.modals.zone-form.zone-color"}}
-            @helpText={{t "fleet-ops.component.modals.zone-form.customize-fill-color"}}
+            @name={{t "modals.zone-form.zone-color"}}
+            @helpText={{t "modals.zone-form.customize-fill-color"}}
             class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
         />
 
         <div class="input-group">
-            <InputLabel @labelText={{t "fleet-ops.component.modals.zone-form.name"}} @helpText={{t "fleet-ops.component.modals.zone-form.optionally"}} />
-            <Textarea @value={{@options.zone.description}} rows={{3}} type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.zone-form.description-zone"}} />
+            <InputLabel @labelText={{t "modals.zone-form.name"}} @helpText={{t "modals.zone-form.optionally"}} />
+            <Textarea @value={{@options.zone.description}} rows={{3}} type="text" class="w-full form-input" placeholder={{t "modals.zone-form.description-zone"}} />
         </div>
     </div>
 </Modal::Default>

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

@@ -0,0 +1,34 @@
+<div class="order-activity-list space-y-2">
+    {{#each @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">
+                    <div class="flex items-center justify-center w-5 h-5 rounded-full border border-green-500">
+                        <FaIcon @icon="check" @size="xs" class="text-green-500" />
+                    </div>
+                </div>
+                <div>
+                    <div class="text-sm font-semibold text-gray-900 dark:text-white">{{trackingStatus.status}}</div>
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{trackingStatus.details}}</div>
+                </div>
+            </div>
+            <div class="flex flex-col">
+                <div class="text-xs text-gray-400 dark:text-gray-500">{{format-date-fns trackingStatus.created_at "d MMM yyyy HH:mm"}}</div>
+            </div>
+        </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="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>
+    {{/each}}
+</div>

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

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class OrderActivityListComponent extends Component {}

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

@@ -0,0 +1,33 @@
+{{#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>
+                </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
+                </div>
+            </div>
+        </div>
+    </div>
+{{/if}}

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

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class OrderActivityTimelineComponent extends Component {}

package/addon/components/order/customer-avatar-stack.hbs

@@ -0,0 +1,21 @@
+<div class="relative flex items-center">
+    {{#each this.entries as |entry idx|}}
+        <div class="relative group {{if (gt idx 0) this.overlapClass}}" {{set-z-index (add 1 idx)}}>
+            <Image
+                src={{avatar-url entry.photoUrl}}
+                @fallbackSrc={{config "defaultValues.contactImage"}}
+                alt={{or entry.name "Unknown customer"}}
+                class="{{this.sizeClass}} rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
+                role="img"
+                tabindex="0"
+            />
+            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                <InputInfo>
+                    <div class="text-xs font-semibold">{{n-a entry.name "No Customer"}}</div>
+                    <div class="text-xs">{{n-a entry.phone "No Phone"}}</div>
+                    <div class="text-xs max-w-xs truncate">{{n-a entry.address}}</div>
+                </InputInfo>
+            </Attach::Tooltip>
+        </div>
+    {{/each}}
+</div>

package/addon/components/order/customer-avatar-stack.js

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+
+const SIZE_TO_CLASS = {
+    xs: 'w-5 h-5', // 20px
+    sm: 'w-7 h-7', // 28px
+    md: 'w-9 h-9', // 36px
+    lg: 'w-12 h-12', // 48px
+};
+
+const OVERLAP_TO_CLASS = {
+    none: '',
+    tight: '-ml-2', // small horizontal overlap
+    normal: '-ml-3', // medium
+    dense: '-ml-4', // big
+};
+
+export default class OrderCustomerAvatarStackComponent extends Component {
+    get entries() {
+        const list = this.args.waypoints ?? [];
+        return list.filter(Boolean).map((wp, idx) => {
+            const c = wp.customer ?? {};
+            return {
+                key: c.public_id ?? c.id ?? `wp-${idx}`,
+                name: c.name,
+                phone: c.phone,
+                address: wp.address,
+                photoUrl: c.photo_url,
+            };
+        });
+    }
+
+    get sizeClass() {
+        return SIZE_TO_CLASS[this.args.size] ?? SIZE_TO_CLASS.sm;
+    }
+
+    get overlapClass() {
+        return OVERLAP_TO_CLASS[this.args.overlap] ?? OVERLAP_TO_CLASS.tight;
+    }
+}

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

@@ -0,0 +1,13 @@
+<ContentPanel
+    @title={{t "order.fields.activity"}}
+    @open={{true}}
+    @actionButtons={{this.actionButtons}}
+    @isLoading={{or @isLoadingActivity this.loadActivity.isRunning @isLoading}}
+    @wrapperClass="bordered-top"
+>
+    {{#if (eq this.layout "timeline")}}
+        <Order::ActivityTimeline @resource={{@resource}} />
+    {{else}}
+        <Order::ActivityList @resource={{@resource}} />
+    {{/if}}
+</ContentPanel>

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

@@ -0,0 +1,58 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class OrderDetailsActivityComponent extends Component {
+    @service orderActions;
+    @service appCache;
+    @service intl;
+    @tracked layout = this.appCache.get('fleetops:order:activity:layout', 'timeline');
+
+    /* eslint-disable ember/no-side-effects */
+    get actionButtons() {
+        return [
+            {
+                items: [
+                    {
+                        text: this.intl.t('order.actions.update-activity'),
+                        icon: 'signal',
+                        disabled: this.args.resource.status === 'canceled',
+                        onClick: () => {
+                            this.orderActions.updateActivity(this.args.resource, {
+                                onFinish: ({ activityCreated }) => {
+                                    if (typeof this.args.onChange === 'function') {
+                                        this.args.onChange(activityCreated);
+                                    }
+                                },
+                            });
+                        },
+                    },
+                    {
+                        text: this.intl.t('order.actions.reload-activity'),
+                        icon: 'refresh',
+                        onClick: () => {
+                            this.loadActivity.perform();
+                        },
+                    },
+                    {
+                        text: this.layout === 'timeline' ? this.intl.t('order.actions.view-activity-as-list') : this.intl.t('order.actions.view-activity-as-timeline'),
+                        icon: this.layout === 'timeline' ? 'list' : 'timeline',
+                        onClick: () => {
+                            this.layout = this.layout === 'timeline' ? 'list' : 'timeline';
+                            this.appCache.set('fleetops:order:activity:layout', this.layout);
+                        },
+                    },
+                ],
+            },
+        ];
+    }
+
+    @task *loadActivity() {
+        try {
+            yield this.args.resource.loadTrackingActivity();
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+<ContentPanel @title={{t "order.fields.comments-title"}} @open={{true}} @wrapperClass="bordered-top">
+    <CommentThread @subject={{@resource}} @subjectType="fleet-ops:order" />
+</ContentPanel>

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

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class OrderDetailsCommentsComponent extends Component {}

package/addon/components/order/details/custom-fields.hbs

@@ -0,0 +1 @@
+<CustomField::Yield @subject={{@resource}} @owner={{@resource.order_config}} @loadOptions={{false}} @viewMode={{true}} @editable={{not-eq @resource.status "canceled"}} @onChange={{this.saveCustomFields}} @permission="fleet-ops update order" @wrapperClass="bordered-top" />

package/addon/components/order/details/custom-fields.js

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class OrderDetailsCustomFieldsComponent extends Component {
+    @service notifications;
+
+    @action async saveCustomFields() {
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(this.args.resource.custom_field_values);
+        }
+
+        try {
+            await this.args.resource.save();
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+}