@fleetbase/fleetops-engine 0.6.64 → 0.6.66

package/addon/components/modals/inspection-link.js

@@ -0,0 +1,83 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action, get, set } from '@ember/object';
+import copyToClipboard from '@fleetbase/ember-core/utils/copy-to-clipboard';
+import { toDatetimeLocal } from '../../services/inspection-form-actions';
+
+export default class ModalsInspectionLinkComponent extends Component {
+    @service intl;
+    @service notifications;
+
+    get formState() {
+        return this.args.options.formState;
+    }
+
+    /** A link cannot be made to expire in the past; the server refuses it too. */
+    get minExpiry() {
+        return toDatetimeLocal(new Date());
+    }
+
+    /**
+     * Who the PIN would be sent to: whoever the link is assigned to, or else
+     * the driver's own account. The server makes the same choice.
+     *
+     * Read with `get`: the form state is a plain object changed with `set`,
+     * and a native read of it is not tracked, so a getter reading it directly
+     * never recomputed and email and SMS stayed disabled after a pick.
+     */
+    get recipientName() {
+        const assignee = get(this.formState, 'assignee');
+        const driver = get(this.formState, 'driver');
+        return assignee?.name ?? driver?.name ?? null;
+    }
+
+    get deliveryHelp() {
+        const name = this.recipientName;
+        return name ? this.intl.t('inspection.link.pin-delivery-help', { name }) : this.intl.t('inspection.link.pin-delivery-no-recipient');
+    }
+
+    /** With nobody left to send it to, the PIN goes back to being shared by hand. */
+    keepDeliveryPossible() {
+        if (!this.recipientName && get(this.formState, 'pin_delivery') !== 'none') {
+            set(this.formState, 'pin_delivery', 'none');
+        }
+    }
+
+    @action assignAssignee(user) {
+        set(this.formState, 'assignee', user);
+        this.keepDeliveryPossible();
+    }
+
+    @action assignDriver(driver) {
+        set(this.formState, 'driver', driver);
+        this.keepDeliveryPossible();
+    }
+
+    @action assignVehicle(vehicle) {
+        set(this.formState, 'vehicle', vehicle);
+    }
+
+    @action updateExpiry(event) {
+        set(this.formState, 'expires_at', event.target.value);
+    }
+
+    @action setPinDelivery(event) {
+        set(this.formState, 'pin_delivery', event.target.value);
+    }
+
+    @action copyLink() {
+        const url = this.formState.generated?.url;
+        if (url) {
+            copyToClipboard(url);
+            this.notifications.success(this.intl.t('inspection.link.copied'));
+        }
+    }
+
+    @action copyPin() {
+        const pin = this.formState.generated?.pin;
+        if (pin) {
+            copyToClipboard(pin);
+            this.notifications.success(this.intl.t('inspection.link.copied-pin'));
+        }
+    }
+}

package/addon/components/modals/issue-assign.hbs

@@ -3,6 +3,7 @@
         <InputGroup @name="Assignee" @helpText="Choose the operator responsible for following up on this issue.">
             <ModelSelect
                 @modelName="user"
+                @selectedItemComponent={{component "select-option/user" compact=true}}
                 @selectedModel={{this.selectedAssignee}}
                 @placeholder="Select assignee"
                 @triggerClass="form-select form-input"
@@ -13,7 +14,7 @@
                 @onChange={{fn (mut this.selectedAssignee)}}
                 as |model|
             >
-                {{model.name}}
+                <SelectOption::User @option={{model}} />
             </ModelSelect>
         </InputGroup>
     </div>

package/addon/components/modals/issue-from.hbs

@@ -4,6 +4,7 @@
             <InputGroup @name={{t "modals.issue-form.reported"}}>
                 <ModelSelect
                     @modelName="user"
+                    @selectedItemComponent={{component "select-option/user" compact=true}}
                     @selectedModel={{this.issue.reporter}}
                     @placeholder={{t "modals.issue-form.select-reporter"}}
                     @triggerClass="form-select form-input"
@@ -12,13 +13,14 @@
                     @onChange={{fn (mut this.issue.reporter)}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::User @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "modals.issue-form.assigned"}}>
                 <ModelSelect
                     @modelName="user"
+                    @selectedItemComponent={{component "select-option/user" compact=true}}
                     @selectedModel={{this.issue.assignee}}
                     @placeholder={{t "modals.issue-form.select-assignee"}}
                     @triggerClass="form-select form-input"
@@ -27,13 +29,14 @@
                     @onChange={{fn (mut this.issue.assignee)}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::User @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "common.driver"}}>
                 <ModelSelect
                     @modelName="driver"
+                    @selectedItemComponent={{component "select-option/driver" compact=true}}
                     @selectedModel={{this.issue.driver}}
                     @placeholder={{t "modals.issue-form.select-driver"}}
                     @triggerClass="form-select form-input"
@@ -42,13 +45,14 @@
                     @onChange={{fn (mut this.issue.driver)}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Driver @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "common.vehicle"}}>
                 <ModelSelect
                     @modelName="vehicle"
+                    @selectedItemComponent={{component "select-option/vehicle" compact=true}}
                     @selectedModel={{this.issue.vehicle}}
                     @placeholder={{t "modals.issue-form.select-vehicle"}}
                     @triggerClass="form-select form-input"
@@ -57,7 +61,7 @@
                     @onChange={{fn (mut this.issue.vehicle)}}
                     as |model|
                 >
-                    {{model.displayName}}
+                    <SelectOption::Vehicle @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 

package/addon/components/modals/map-layer-form.hbs

@@ -16,6 +16,7 @@
                     <InputGroup @name={{t "modals.map-layer-form.service-area"}} @helpText={{t "modals.map-layer-form.service-area-text"}}>
                         <ModelSelect
                             @modelName="service-area"
+                            @selectedItemComponent={{component "select-option/service-area" compact=true}}
                             @selectedModel={{@options.layerOptions.service_area}}
                             @placeholder={{t "modals.map-layer-form.select-service-area"}}
                             @triggerClass="form-select form-input"
@@ -24,7 +25,7 @@
                             @onChange={{fn (mut @options.layerOptions.service_area)}}
                             as |model|
                         >
-                            {{model.name}}
+                            <SelectOption::ServiceArea @option={{model}} />
                         </ModelSelect>
                     </InputGroup>
                 {{/if}}

package/addon/components/modals/order-assign-driver.hbs

@@ -3,6 +3,7 @@
         <InputGroup @name={{t "modals.order-assign-driver.select-driver"}}>
             <ModelSelect
                 @modelName="driver"
+                @selectedItemComponent={{component "select-option/driver" compact=true}}
                 @selectedModel={{@options.order.driver_assigned}}
                 @placeholder={{t "modals.order-assign-driver.select-assign"}}
                 @triggerClass="form-select form-input"
@@ -11,22 +12,7 @@
                 @onChange={{fn (mut @options.order.driver_assigned)}}
                 as |model|
             >
-                <div class="flex items-center">
-                    <div class="w-7">
-                        <FaIcon @icon="id-card-alt" />
-                    </div>
-                    <div class="flex-1 flex flex-row truncate">
-                        <span class="uppercase mr-2">{{model.name}}</span>
-                        <span class="uppercase">{{model.phone}}</span>
-                    </div>
-                    {{#if @options.order.facilitator}}
-                        <div class="px-1 ml-2 leading-5 bg-green-400 rounded shadow">
-                            <span class="text-xs text-green-900">
-                                {{@options.order.facilitator.name}}
-                            </span>
-                        </div>
-                    {{/if}}
-                </div>
+                <SelectOption::Driver @option={{model}} />
             </ModelSelect>
         </InputGroup>
 

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

@@ -18,6 +18,7 @@
             <InputGroup @name={{t "order.fields.customer"}} @helpText={{t "order.fields.customer-help-text"}}>
                 <ModelSelect
                     @modelName="customer"
+                    @selectedItemComponent={{component "select-option/customer" compact=true}}
                     @selectedModel={{@options.order.customer}}
                     @placeholder={{t "common.select-field" field=(t "resource.customer")}}
                     @triggerClass="form-select form-input"
@@ -27,20 +28,14 @@
                     @onChange={{@options.setOrderCustomer}}
                     as |model|
                 >
-                    <div class="flex items-center">
-                        <div class="w-7">
-                            <FaIcon @icon={{if model.isVendor "warehouse" "user"}} />
-                        </div>
-                        <span class="uppercase">
-                            {{model.name}}
-                        </span>
-                    </div>
+                    <SelectOption::Customer @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "order.fields.facilitator"}} @helpText={{t "order.fields.facilitator-help-text"}}>
                 <ModelSelect
                     @modelName="facilitator"
+                    @selectedItemComponent={{component "select-option/facilitator" compact=true}}
                     @selectedModel={{@options.order.facilitator}}
                     @placeholder={{t "common.select-field" field=(t "resource.facilitator")}}
                     @triggerClass="form-select form-input"
@@ -51,26 +46,15 @@
                     @onChange={{@options.setOrderFacilitator}}
                     as |model|
                 >
-                    <div class="flex items-center">
-                        <div class="w-7">
-                            {{#if model.isIntegratedVendor}}
-                                <Image src={{model.photo_url}} alt={{model.name}} class="w-4 h-4" width="16" height="16" />
-                            {{else}}
-                                <FaIcon @icon={{if model.isVendor "warehouse" "user"}} />
-                            {{/if}}
-                        </div>
-                        <span class="uppercase">
-                            {{model.name}}
-                        </span>
-                    </div>
+                    <SelectOption::Facilitator @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "order.fields.assign-driver"}} @helpText={{t "order.fields.assign-driver-help-text"}}>
                 <ModelSelect
                     @modelName="driver"
+                    @selectedItemComponent={{component "select-option/driver" compact=true}}
                     @selectedModel={{@options.order.driver_assigned}}
-                    @query={{this.driversQuery}}
                     @placeholder={{t "common.select-field" field=(t "resource.driver")}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
@@ -80,30 +64,15 @@
                     @onChange={{@options.setDriver}}
                     as |model|
                 >
-                    <div class="flex items-center">
-                        <div class="w-7">
-                            <FaIcon @icon="id-card-alt" />
-                        </div>
-                        <div class="flex-1 flex flex-row truncate">
-                            <span class="uppercase mr-2">{{model.name}}</span>
-                            <span class="uppercase">{{model.phone}}</span>
-                        </div>
-                        {{#if this.order.facilitator}}
-                            <div class="px-1 ml-2 leading-5 bg-green-400 rounded shadow">
-                                <span class="text-xs text-green-900">
-                                    {{this.order.facilitator.name}}
-                                </span>
-                            </div>
-                        {{/if}}
-                    </div>
+                    <SelectOption::Driver @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name={{t "order.fields.assign-vehicle"}} @helpText={{t "order.fields.assign-vehicle-help-text"}}>
                 <ModelSelect
                     @modelName="vehicle"
+                    @selectedItemComponent={{component "select-option/vehicle" compact=true}}
                     @selectedModel={{@options.order.vehicle_assigned}}
-                    @query={{this.driversQuery}}
                     @placeholder={{t "common.select-field" field=(t "resource.vehicle")}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
@@ -113,14 +82,7 @@
                     @onChange={{@options.setVehicle}}
                     as |model|
                 >
-                    <div class="flex items-center">
-                        <div class="w-6">
-                            <Image @src={{model.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4 shadow-sm rounded-md" />
-                        </div>
-                        <div class="flex-1 flex flex-row truncate">
-                            <span class="uppercase">{{model.display_name}}</span>
-                        </div>
-                    </div>
+                    <SelectOption::Vehicle @option={{model}} />
                 </ModelSelect>
             </InputGroup>
         </div>

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

@@ -32,6 +32,7 @@
                         <div class="flex-1 px-4">
                             <ModelSelect
                                 @modelName="place"
+                                @selectedItemComponent={{component "select-option/place" compact=true}}
                                 @selectedModel={{waypoint.place}}
                                 @placeholder={{concat (t "modals.order-route-form.select-waypoint") (add index 1)}}
                                 @triggerClass="form-select form-input truncate"
@@ -43,7 +44,7 @@
                                 @onChange={{fn @options.setWaypointPlace index}}
                                 as |model|
                             >
-                                {{model.address}}
+                                <SelectOption::Place @option={{model}} />
                             </ModelSelect>
 
                             {{#if waypoint.place.hasInvalidCoordinates}}
@@ -76,6 +77,7 @@
 
                     <ModelSelect
                         @modelName="place"
+                        @selectedItemComponent={{component "select-option/place" compact=true}}
                         @selectedModel={{@options.order.payload.pickup}}
                         @placeholder={{t "modals.order-route-form.select-pickup"}}
                         @triggerClass="form-select form-input"
@@ -86,7 +88,7 @@
                         @onChange={{fn @options.setPayloadPlace "pickup"}}
                         as |model|
                     >
-                        {{model.address}}
+                        <SelectOption::Place @option={{model}} />
                     </ModelSelect>
 
                     {{#if @options.order.payload.pickup.hasInvalidCoordinates}}
@@ -108,6 +110,7 @@
 
                     <ModelSelect
                         @modelName="place"
+                        @selectedItemComponent={{component "select-option/place" compact=true}}
                         @selectedModel={{@options.order.payload.dropoff}}
                         @placeholder={{t "modals.order-route-form.select-dropoff"}}
                         @triggerClass="form-select form-input"
@@ -118,7 +121,7 @@
                         @onChange={{fn @options.setPayloadPlace "dropoff"}}
                         as |model|
                     >
-                        {{model.address}}
+                        <SelectOption::Place @option={{model}} />
                     </ModelSelect>
 
                     {{#if @options.order.payload.dropoff.hasInvalidCoordinates}}
@@ -140,6 +143,7 @@
 
                     <ModelSelect
                         @modelName="place"
+                        @selectedItemComponent={{component "select-option/place" compact=true}}
                         @selectedModel={{@options.order.payload.return}}
                         @placeholder={{t "modals.order-route-form.select-return"}}
                         @triggerClass="form-select form-input"
@@ -150,7 +154,7 @@
                         @onChange={{fn @options.setPayloadPlace "return"}}
                         as |model|
                     >
-                        {{model.address}}
+                        <SelectOption::Place @option={{model}} />
                     </ModelSelect>
 
                     {{#if @options.order.payload.return.hasInvalidCoordinates}}

package/addon/components/modals/place-assign-vendor.hbs

@@ -4,15 +4,16 @@
             <InputGroup @name={{t "modals.place-assign-vendor.select-vendor"}} @value={{@options.place.vendor_uuid}}>
                 <ModelSelect
                     @modelName="vendor"
+                    @selectedItemComponent={{component "select-option/vendor" compact=true}}
                     @selectedModel={{@options.place.vendor_uuid}}
                     @placeholder={{t "modals.place-assign-vendor.select-vendor"}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
-                    @onChange={{fn (mut @options.place.vendor_uuid)}}
+                    @onChangeId={{fn (mut @options.place.vendor_uuid)}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Vendor @option={{model}} />
                 </ModelSelect>
             </InputGroup>
         </div>

package/addon/components/modals/place-details.hbs

@@ -3,7 +3,7 @@
         <div class="flex">
             <div class="w-48 mb-6 mr-6">
                 <LeafletMap class="w-full h-48 mb-2 rounded-md shadow-md" @lat={{@options.place.latitude}} @lng={{@options.place.longitude}} @zoom={{12}} as |layers|>
-                    <layers.tile @url={{leaflet-tile-url}} />
+                    <layers.tile @url={{(leaflet-tile-url)}} />
 
                     <layers.marker @location={{@options.place.coordinates}} />
                 </LeafletMap>

package/addon/components/modals/point-map.hbs

@@ -1,7 +1,7 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="fleetbase-leaflet-map-container">
         <LeafletMap class="map-height-base" @lat={{@options.latitude}} @lng={{@options.longitude}} @zoom={{12}} as |layers|>
-            <layers.tile @url={{leaflet-tile-url}} />
+            <layers.tile @url={{(leaflet-tile-url)}} />
 
             <layers.marker @icon={{@options.icon}} @location={{point-to-coordinates @options.location}} @riseOnHover={{true}} as |marker|>
                 <marker.popup @maxWidth="500" @minWidth="180">

package/addon/components/modals/radar-notice.hbs

@@ -0,0 +1,24 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="fleet-ops-radar-modal-grid">
+            <InputGroup @name={{t "radar.notice.message"}}>
+                <Textarea @value={{@options.notice.message}} placeholder={{t "radar.notice.message-placeholder"}} class="w-full form-input" rows="3" data-test-radar-notice-message />
+            </InputGroup>
+            <div class="fleet-ops-radar-modal-grid has-two">
+                <InputGroup @name={{t "radar.notice.severity"}}>
+                    <select class="w-full form-select form-input" {{on "change" this.setSeverity}} data-test-radar-notice-severity>
+                        {{#each (array "info" "warning" "critical") as |severity|}}
+                            <option value={{severity}} selected={{eq @options.notice.severity severity}}>{{t (concat "radar.notice.severities." severity)}}</option>
+                        {{/each}}
+                    </select>
+                </InputGroup>
+                <InputGroup @name={{t "radar.notice.due"}}>
+                    <Input @type="datetime-local" @value={{@options.notice.due_at}} class="w-full form-input" data-test-radar-notice-due />
+                </InputGroup>
+            </div>
+            <InputGroup @name={{t "radar.notice.scope"}}>
+                <Input @type="text" @value={{@options.notice.scope}} placeholder={{t "radar.notice.scope-placeholder"}} class="w-full form-input" data-test-radar-notice-scope />
+            </InputGroup>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/radar-notice.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ModalsRadarNoticeComponent extends Component {
+    @action setSeverity(event) {
+        this.args.options.notice.severity = event.target.value;
+    }
+}

package/addon/components/modals/radar-save-view.hbs

@@ -0,0 +1,7 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "radar.saved-views.name-prompt"}}>
+            <Input @type="text" @value={{@options.name}} placeholder={{t "radar.saved-views.name-placeholder"}} class="w-full form-input" data-test-radar-view-name />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/radar-select-resource.hbs

@@ -0,0 +1,35 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        {{#if @options.body}}
+            <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">{{@options.body}}</p>
+        {{/if}}
+        <InputGroup @name={{@options.inputLabel}} @helpText={{@options.helpText}}>
+            <ModelSelect
+                @modelName={{@options.modelName}}
+                @selectedModel={{@options.selected}}
+                @placeholder={{@options.placeholder}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{false}}
+                @renderInPlace={{true}}
+                @query={{@options.query}}
+                @allowClear={{@options.allowClear}}
+                @onChange={{fn (mut @options.selected)}}
+                as |model|
+            >
+                {{#if (eq @options.modelName "user")}}
+                    <SelectOption::User @option={{model}} />
+                {{else if (eq @options.modelName "driver")}}
+                    <SelectOption::Driver @option={{model}} />
+                {{else if (eq @options.modelName "vehicle")}}
+                    <SelectOption::Vehicle @option={{model}} />
+                {{else if (eq @options.modelName "device")}}
+                    <SelectOption::Device @option={{model}} />
+                {{else if (eq @options.modelName "trailer")}}
+                    <SelectOption::Trailer @option={{model}} />
+                {{else}}
+                    <span>{{or model.display_name model.name model.public_id}}</span>
+                {{/if}}
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/radar-send-pin.hbs

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">
+            {{#if @options.recipient}}
+                {{t "radar.prompts.send-pin-to" name=@options.recipient}}
+            {{else}}
+                {{t "radar.prompts.send-pin-body"}}
+            {{/if}}
+        </p>
+        <div class="space-y-2" role="radiogroup" data-test-radar-send-pin-channels>
+            {{#each @options.channels as |via|}}
+                <label class="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-semibold text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
+                    <input type="radio" name="radar-send-pin-via" value={{via}} checked={{eq @options.via via}} class="form-radio text-sky-500" {{on "change" (fn this.choose via)}} data-test-radar-send-pin-via={{via}} />
+                    <FaIcon @icon={{if (eq via "email") "envelope" "comment-sms"}} class="text-gray-400" />
+                    <span>{{if (eq via "email") (t "inspection.link.email-pin") (t "inspection.link.text-pin")}}</span>
+                </label>
+            {{/each}}
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/radar-send-pin.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { action, set } from '@ember/object';
+
+export default class ModalsRadarSendPinComponent extends Component {
+    @action choose(via) {
+        set(this.args.options, 'via', via);
+    }
+}

package/addon/components/modals/select-trailer.hbs

@@ -0,0 +1,33 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        {{#if @options.vehicle}}
+            <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
+                <div class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">{{t "resource.vehicle"}}</div>
+                <div class="mt-2">
+                    <Vehicle::Pill @vehicle={{@options.vehicle}} />
+                </div>
+            </div>
+        {{/if}}
+
+        <InputGroup @name={{t "resource.trailer"}} @helpText={{t "trailer.help.select-trailer"}}>
+            <ModelSelect
+                @modelName="trailer"
+                @selectedItemComponent={{component "select-option/trailer" compact=true}}
+                @selectedModel={{@options.selectedTrailer}}
+                @query={{hash attachment_state="detached"}}
+                @placeholder={{t "trailer.placeholders.trailer"}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedTrailer)}}
+                as |trailer|
+            >
+                <SelectOption::Trailer @option={{trailer}} />
+            </ModelSelect>
+        </InputGroup>
+
+        <InputGroup @name={{t "trailer.fields.position"}} @helpText={{t "trailer.help.position"}}>
+            <Input @type="number" @value={{@options.position}} min="1" step="1" class="w-full form-input" placeholder={{t "trailer.placeholders.position"}} />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/select-trailer.js

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

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

@@ -3,8 +3,8 @@
         <div class="flex">
             <div class="w-32 mb-6 mr-6">
                 <Image
-                    src={{@options.vehicle.photo_url}}
-                    @fallbackSrc={{config "defaultValues.vehicleImage"}}
+                    src={{resource-image @options.vehicle.photo_url "vehicle"}}
+                    @fallbackSrc={{(placeholder-image "vehicle")}}
                     alt={{@options.vehicle.name}}
                     height="128"
                     width="128"
@@ -70,6 +70,7 @@
                             </label>
                             <ModelSelect
                                 @modelName="driver"
+                                @selectedItemComponent={{component "select-option/driver" compact=true}}
                                 @selectedModel={{@options.vehicle.driver}}
                                 @placeholder="Select Driver"
                                 @triggerClass="form-select form-input"
@@ -78,7 +79,7 @@
                                 @onChange={{fn (mut @options.vehicle.driver)}}
                                 as |model|
                             >
-                                {{model.name}}
+                                <SelectOption::Driver @option={{model}} />
                             </ModelSelect>
                         </div>
                     </div>

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

@@ -212,6 +212,7 @@
 
                         <ModelSelect
                             @modelName="place"
+                            @selectedItemComponent={{component "select-option/place" compact=true}}
                             @selectedModel={{@options.vendor.place}}
                             @placeholder={{t "modals.vendor-form.select-address"}}
                             @triggerClass="form-select form-input"
@@ -220,9 +221,7 @@
                             @onChange={{@options.selectAddress}}
                             as |model|
                         >
-                            {{model.name}}
-                            -
-                            {{model.street1}}
+                            <SelectOption::Place @option={{model}} />
                         </ModelSelect>
                     </InputGroup>
 

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

@@ -232,10 +232,10 @@
                         {{! Avatar — online dot top-right }}
                         <div class="relative flex-shrink-0 mt-0.5">
                             <img
-                                src={{driver.photo_url}}
+                                src={{resource-image driver.photo_url "driver"}}
                                 alt={{or driver.name "Driver"}}
                                 class="w-9 h-9 rounded-full object-cover bg-gray-200 dark:bg-gray-700"
-                                {{fallback-img-src (config "defaultValues.driverImage")}}
+                                {{fallback-img-src (placeholder-image "driver")}}
                             />
                             <span
                                 class="absolute top-0 left-0 block w-2.5 h-2.5 rounded-full border-2 border-white dark:border-gray-900 {{if driver.online 'bg-green-500' 'bg-gray-400'}}"