@fleetbase/fleetops-engine 0.6.50 → 0.6.52

package/addon/components/map/drawer/device-event-listing.hbs

@@ -60,5 +60,15 @@
         {{/if}}
     </div>
 </div>
-<Table @rows={{this.events}} @columns={{this.columns}} />
-<Spacer @height="200px" />
+<Table
+    @rows={{this.events}}
+    @columns={{this.columns}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        variant="compact"
+        icon="bolt"
+        title="No device events"
+        description="Events appear here after connected devices report activity for the selected filters."
+    }}
+/>
+<Spacer @height="200px" />

package/addon/components/map/drawer/driver-listing.hbs

@@ -3,4 +3,17 @@
         <Input @value={{this.query}} @type="text" class="form-input form-input-sm w-60" placeholder={{t "live-map-drawer.driver-listing.message"}} />
     </div>
 </div>
-<Table @rows={{this.filteredDrivers}} @columns={{this.columns}} />
+<Table
+    @rows={{this.filteredDrivers}}
+    @columns={{this.columns}}
+    @searchQuery={{this.query}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        variant="compact"
+        icon="id-card"
+        title="No drivers visible"
+        description="Drivers appear here when they are available in the live map context."
+        filteredTitle="No drivers match this search"
+        filteredDescription="Adjust the search to find another driver."
+    }}
+/>

package/addon/components/map/drawer/place-listing.hbs

@@ -3,4 +3,17 @@
         <Input @value={{this.query}} @type="text" class="form-input form-input-sm w-60" placeholder={{t "live-map-drawer.place-listing.message"}} />
     </div>
 </div>
-<Table @rows={{this.filteredPlaces}} @columns={{this.columns}} />
+<Table
+    @rows={{this.filteredPlaces}}
+    @columns={{this.columns}}
+    @searchQuery={{this.query}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        variant="compact"
+        icon="location-dot"
+        title="No places visible"
+        description="Places appear here when they are available in the current map context."
+        filteredTitle="No places match this search"
+        filteredDescription="Adjust the search to find another place."
+    }}
+/>

package/addon/components/map/drawer/position-listing.hbs

@@ -96,5 +96,15 @@
         </div>
     </div>
 </div>
-<Table @rows={{this.positions}} @columns={{this.columns}} />
-<Spacer @height="400px" />
+<Table
+    @rows={{this.positions}}
+    @columns={{this.columns}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        variant="compact"
+        icon="route"
+        title="No positions loaded"
+        description="Select a trackable and date range to load position history for replay."
+    }}
+/>
+<Spacer @height="400px" />

package/addon/components/map/drawer/position-listing.js

@@ -7,6 +7,7 @@ import { isArray } from '@ember/array';
 import { htmlSafe } from '@ember/template';
 import { startOfWeek, endOfWeek, format } from 'date-fns';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+import ensureLeafletDrawEditNamespace from '../../../utils/leaflet-draw-namespace-guard';
 
 const L = window.leaflet || window.L;
 
@@ -412,6 +413,8 @@ export default class MapDrawerPositionListingComponent extends Component {
             return;
         }
 
+        ensureLeafletDrawEditNamespace(L);
+        ensureLeafletDrawEditNamespace();
         const marker = L.circleMarker([lat, lng], {
             radius: 3,
             color: '#3b82f6',

package/addon/components/map/drawer/vehicle-listing.hbs

@@ -3,4 +3,17 @@
         <Input @value={{this.query}} @type="text" class="form-input form-input-sm w-60" placeholder={{t "live-map-drawer.vehicle-listing.message"}} />
     </div>
 </div>
-<Table @rows={{this.filteredVehicles}} @columns={{this.columns}} />
+<Table
+    @rows={{this.filteredVehicles}}
+    @columns={{this.columns}}
+    @searchQuery={{this.query}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        variant="compact"
+        icon="truck"
+        title="No vehicles visible"
+        description="Vehicles appear here when they are available in the live map context."
+        filteredTitle="No vehicles match this search"
+        filteredDescription="Adjust the search to find another vehicle."
+    }}
+/>

package/addon/components/map/leaflet-live-map.hbs

@@ -39,7 +39,7 @@
             @mapClass={{@mapClass}}
             ...attributes
         />
-    {{else}}
+    {{else if this.leafletPluginsReady}}
         {{! ─── Leaflet branch (default) ────────────────────────────────────── }}
         <LeafletMap
             id={{this.id}}
@@ -374,4 +374,4 @@
         @liveMap={{this}}
         @onDrawerReady={{this.setDrawerContext}}
     />
-{{/if}} --}}
+{{/if}} --}}

package/addon/components/map/leaflet-live-map.js

@@ -11,6 +11,7 @@ import { all } from 'rsvp';
 import { task, timeout } from 'ember-concurrency';
 import { next } from '@ember/runloop';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+import ensureLeafletPluginsReady, { hasLeafletPluginsReady } from '../../utils/leaflet-plugin-loader';
 
 export default class MapLeafletLiveMapComponent extends Component {
     liveViewportReloadDebounceMs = 300;
@@ -53,6 +54,7 @@ export default class MapLeafletLiveMapComponent extends Component {
     @tracked drivers = [];
     @tracked vehicles = [];
     @tracked places = [];
+    @tracked leafletPluginsReady = hasLeafletPluginsReady();
     _viewportReloadLocks = new Set();
 
     constructor() {
@@ -79,6 +81,10 @@ export default class MapLeafletLiveMapComponent extends Component {
         this._geofenceExitedHandler = this.#handleGeofenceExited.bind(this);
         this.universe.on('fleet-ops.geofence.entered', this._geofenceEnteredHandler);
         this.universe.on('fleet-ops.geofence.exited', this._geofenceExitedHandler);
+
+        if (!this.shouldUseGoogleMaps && !this.leafletPluginsReady) {
+            this.prepareLeafletPlugins();
+        }
     }
 
     willDestroy() {
@@ -329,6 +335,17 @@ export default class MapLeafletLiveMapComponent extends Component {
         return this.mapSettings.isGoogleMaps;
     }
 
+    async prepareLeafletPlugins() {
+        try {
+            await ensureLeafletPluginsReady();
+            if (!this.isDestroying && !this.isDestroyed) {
+                this.leafletPluginsReady = true;
+            }
+        } catch (error) {
+            debug('Failed to prepare Leaflet plugins: ' + error.message);
+        }
+    }
+
     /**
      * Get valid zoom level for map initialization
      * @returns {number} Valid zoom level between 1-20

package/addon/components/map/order-list-overlay.hbs

@@ -44,10 +44,10 @@
                             <div class="next-dd-menu-seperator"></div>
                             <div class="px-1">
                                 <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.orderActions.bulkCancel this.overlay.selectedOrders)}}>{{t
-                                        "fleet-ops.component.order-list-overlay.cancel"
+                                        "order-list-overlay.cancel"
                                     }}</a>
                                 <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (dropdown-fn dd this.orderActions.bulkDelete this.overlay.selectedOrders)}}>{{t
-                                        "fleet-ops.component.order-list-overlay.delete"
+                                        "order-list-overlay.delete"
                                     }}</a>
                             </div>
                         </div>
@@ -70,10 +70,10 @@
                         <div class="next-dd-menu-seperator"></div>
                         <div class="px-1">
                             <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd (transition-to "operations.orders.index.new"))}}>{{t
-                                    "fleet-ops.component.order-list-overlay.create-order"
+                                    "order-list-overlay.create-order"
                                 }}</a>
                             <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.fleetActions.modal.create)}}>{{t
-                                    "fleet-ops.component.order-list-overlay.create-fleet"
+                                    "order-list-overlay.create-fleet"
                                 }}</a>
                         </div>
                     </div>

package/addon/components/modals/assigned-orders.hbs

@@ -0,0 +1,40 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <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">{{@options.subjectLabel}}</div>
+            <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{{@options.subjectName}}</div>
+            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{t "modals.assigned-orders.help-text" count=@options.orders.length}}</div>
+        </div>
+
+        <div class="space-y-2">
+            {{#each @options.orders as |order|}}
+                <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
+                    <div class="flex items-start gap-3">
+                        <Checkbox
+                            @value={{includes order.id @options.selectedOrderIds}}
+                            @onToggle={{fn @options.toggleOrder order}}
+                            @alignItems="center"
+                            @labelClass="mb-0i"
+                        />
+                        <div class="min-w-0 flex-1">
+                            <div class="flex items-center justify-between gap-2">
+                                <div class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
+                                    {{or order.tracking order.public_id order.id}}
+                                </div>
+                                <div class="flex shrink-0 items-center gap-1">
+                                    {{#if order.is_current_job}}
+                                        <Badge @hideStatusDot={{true}} @status="info">{{t "common.current-job"}}</Badge>
+                                    {{/if}}
+                                    <Badge @hideStatusDot={{true}} @status={{order.status}} />
+                                </div>
+                            </div>
+                            <div class="mt-1 truncate text-xs text-gray-500 dark:text-gray-400">
+                                {{or order.internal_id order.public_id}}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/attach-device.hbs

@@ -1,12 +1,13 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @name={{t "common.select-field" field=(t "resource.device")}} @value={{@options.driver.vehicle_uuid}}>
+        <InputGroup @name={{t "common.select-field" field=(t "resource.device")}} @value={{@options.selectedDevice}}>
             <ModelSelect
                 @modelName="device"
                 @selectedModel={{@options.selectedDevice}}
+                @query={{hash attachment_state="unattached"}}
                 @placeholder={{t "common.select-field" field=(t "resource.device")}}
                 @triggerClass="form-select form-input"
-                @infiniteScroll={{false}}
+                @infiniteScroll={{true}}
                 @renderInPlace={{true}}
                 @onChange={{fn (mut @options.selectedDevice)}}
                 as |model|
@@ -15,4 +16,4 @@
             </ModelSelect>
         </InputGroup>
     </div>
-</Modal::Default>
+</Modal::Default>

package/addon/components/modals/attach-telematic-device.hbs

@@ -0,0 +1,25 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <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">Synced device</div>
+            <div class="mt-2">
+                <Device::Pill @device={{@options.device}} />
+            </div>
+        </div>
+
+        <InputGroup @name={{t "common.select-field" field=(t "resource.vehicle")}} @value={{@options.selectedVehicle}}>
+            <ModelSelect
+                @modelName="vehicle"
+                @selectedModel={{@options.selectedVehicle}}
+                @placeholder={{t "common.select-field" field=(t "resource.vehicle")}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedVehicle)}}
+                as |vehicle|
+            >
+                <Vehicle::Pill @resource={{vehicle}} />
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/attach-telematic-device.js

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

package/addon/components/modals/convert-customer-to-vendor.hbs

@@ -0,0 +1,30 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="mb-4 rounded-md border border-yellow-200 bg-yellow-50 p-3 text-sm text-yellow-900 dark:border-yellow-700 dark:bg-yellow-900 dark:text-yellow-100">
+            <div class="mb-1 font-semibold">Create a company customer account</div>
+            <div>
+                This action will create a vendor, assign
+                {{this.customer.name}}
+                as admin personnel, and migrate any customer-owned portal history to the vendor account.
+            </div>
+        </div>
+
+        <InputGroup @name="Primary Personnel" @wrapperClass="mb-0i">
+            <div class="flex items-start rounded-md border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-800">
+                <Image src={{this.customer.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{this.customer.name}} class="mr-2 h-6 w-6 rounded-md" />
+                <div class="min-w-0">
+                    <div class="leading-4 text-sm truncate font-semibold dark:text-gray-100">{{this.customer.name}}</div>
+                    <div class="truncate text-sm text-gray-500 dark:text-gray-400">{{n-a this.customer.email}}</div>
+                </div>
+            </div>
+        </InputGroup>
+
+        <div class="mt-4 grid grid-cols-1 gap-3 text-xs lg:grid-cols-2">
+            <InputGroup @name="Vendor Name" @value={{this.vendorName}} @placeholder="Company name" @wrapperClass="mb-0i" />
+            <InputGroup @name="Email" @type="email" @value={{this.vendorEmail}} @placeholder="billing@example.com" @wrapperClass="mb-0i" />
+            <InputGroup @name="Phone" @wrapperClass="mb-0i">
+                <PhoneInput @value={{this.vendorPhone}} @onInput={{fn (mut this.vendorPhone)}} class="form-input w-full" />
+            </InputGroup>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/convert-customer-to-vendor.js

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class ModalsConvertCustomerToVendorComponent extends Component {
+    @service fetch;
+    @service notifications;
+
+    @tracked customer;
+    @tracked vendorName;
+    @tracked vendorEmail;
+    @tracked vendorPhone;
+    @tracked options = {};
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.customer = options.customer;
+        this.vendorName = this.customer?.name;
+        this.vendorEmail = this.customer?.email;
+        this.vendorPhone = this.customer?.phone;
+        this.options = options;
+        this.setupOptions();
+    }
+
+    setupOptions() {
+        this.options.title = 'Convert Contact to Vendor';
+        this.options.acceptButtonText = 'Create Vendor';
+        this.options.confirm = async (modal) => {
+            modal.startLoading();
+
+            try {
+                const response = await this.fetch.post(
+                    `contacts/${this.customer.id}/convert-to-vendor`,
+                    {
+                        name: this.vendorName,
+                        email: this.vendorEmail,
+                        phone: this.vendorPhone,
+                    },
+                    { namespace: 'int/v1' }
+                );
+
+                this.notifications.success('Customer converted to vendor account.');
+
+                if (typeof this.options.onConverted === 'function') {
+                    this.options.onConverted(response.vendor);
+                }
+
+                modal.done();
+            } catch (error) {
+                this.notifications.serverError(error);
+                modal.stopLoading();
+            }
+        };
+    }
+}

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

@@ -14,65 +14,14 @@
                     @onChange={{@options.selectOrder}}
                     as |order|
                 >
-                    <div class="mb-3 flex items-center justify-between">
-                        <div>{{order.public_id}} - {{order.createdAt}}</div>
-                        <Badge @hideStatusDot={{true}} @status={{order.status}} />
-                    </div>
-                    <div class="-ml-2">
-                        {{#if @order.payload.hasWaypoints}}
-                            <div class="order-route-list storefront flex-1">
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or (get order.payload.waypoints "0.name") (get order.payload.waypoints "0.street1")}}</div>
-                                        <div>{{or (get order.payload.waypoints "0.city") (get order.payload.waypoints "0.postal_code")}}</div>
-                                    </div>
-                                </div>
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or order.payload.waypoints.lastObject.name order.payload.waypoints.lastObject.street1}}</div>
-                                        <div>{{or order.payload.waypoints.lastObject.city order.payload.waypoints.lastObject.postal_code}}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        {{else}}
-                            <div class="order-route-list storefront flex-1">
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or order.payload.pickup.name order.payload.pickup.street1}}</div>
-                                        <div>{{or order.payload.pickup.city order.payload.pickup.postal_code}}</div>
-                                    </div>
-                                </div>
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or order.payload.dropoff.name order.payload.dropoff.street1}}</div>
-                                        <div>{{or order.payload.dropoff.city order.payload.dropoff.postal_code}}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        {{/if}}
-                    </div>
+                    <Order::Card
+                        @order={{order}}
+                        @variant="selection"
+                        @showMeta={{true}}
+                        @interactive={{false}}
+                    />
                 </ModelSelect>
             </InputGroup>
         </div>
     </div>
-</Modal::Default>
+</Modal::Default>

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

@@ -13,9 +13,17 @@
                     @onChangeId={{fn (mut @options.driver.vehicle_uuid)}}
                     as |model|
                 >
-                    {{model.display_name}}
+                    <Vehicle::Pill
+                        @vehicle={{model}}
+                        @anchorClass="w-full"
+                        @imageWrapperClass="w-8 h-8"
+                        @imageClass="w-8 h-8"
+                        @contentWrapperClass="min-w-0"
+                        @titleClass="truncate"
+                        @subtitleClass="truncate"
+                    />
                 </ModelSelect>
             </InputGroup>
         </div>
     </div>
-</Modal::Default>
+</Modal::Default>

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

@@ -0,0 +1,18 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "common.select-field" field=(t "resource.driver")}} @value={{@options.selectedDriver}}>
+            <ModelSelect
+                @modelName="driver"
+                @selectedModel={{@options.selectedDriver}}
+                @placeholder={{t "common.select-field" field=(t "resource.driver")}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedDriver)}}
+                as |driver|
+            >
+                <Driver::Pill @driver={{driver}} />
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/fleet-assign-driver.js

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

package/addon/components/modals/fleet-assign-vehicle.hbs

@@ -0,0 +1,18 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "common.select-field" field=(t "resource.vehicle")}} @value={{@options.selectedVehicle}}>
+            <ModelSelect
+                @modelName="vehicle"
+                @selectedModel={{@options.selectedVehicle}}
+                @placeholder={{t "common.select-field" field=(t "resource.vehicle")}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedVehicle)}}
+                as |vehicle|
+            >
+                <Vehicle::Pill @resource={{vehicle}} />
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/fleet-assign-vehicle.js

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

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

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Assignee" @helpText="Choose the operator responsible for following up on this issue.">
+            <ModelSelect
+                @modelName="user"
+                @selectedModel={{this.selectedAssignee}}
+                @placeholder="Select assignee"
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{false}}
+                @renderInPlace={{true}}
+                @query={{hash is_not_customer=true}}
+                @allowClear={{true}}
+                @onChange={{fn (mut this.selectedAssignee)}}
+                as |model|
+            >
+                {{model.name}}
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+export default class ModalsIssueAssignComponent extends Component {
+    @service notifications;
+
+    @tracked options = {};
+    @tracked issue;
+    @tracked selectedAssignee;
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.options = options;
+        this.issue = options.issue;
+        this.selectedAssignee = this.issue?.assignee;
+        this.setupOptions();
+    }
+
+    setupOptions() {
+        this.options.title = 'Assign Issue';
+        this.options.acceptButtonText = 'Assign Issue';
+        this.options.acceptButtonIcon = 'user-check';
+        this.options.confirm = async (modal) => {
+            modal.startLoading();
+
+            try {
+                if (this.selectedAssignee?.type === 'customer') {
+                    this.notifications.warning('Customers cannot be assigned to issues.');
+                    modal.stopLoading();
+                    return;
+                }
+
+                this.issue.assignee = this.selectedAssignee;
+                await this.issue.save();
+                this.notifications.success('Issue assignment updated.');
+
+                if (typeof this.options.onSaved === 'function') {
+                    await this.options.onSaved(this.issue);
+                }
+
+                modal.done();
+            } catch (error) {
+                this.notifications.serverError(error);
+                modal.stopLoading();
+            }
+        };
+    }
+}

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

@@ -0,0 +1,30 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="issue-close-modal-summary">
+            {{#if this.vehicleLabel}}
+                <div>
+                    <span>Vehicle</span>
+                    <strong>{{this.vehicleLabel}}</strong>
+                </div>
+            {{/if}}
+            {{#if this.orderLabel}}
+                <div>
+                    <span>Order</span>
+                    <strong>{{this.orderLabel}}</strong>
+                </div>
+            {{/if}}
+            <div>
+                <span>Summary</span>
+                <strong>{{n-a this.issue.title}}</strong>
+            </div>
+            <div>
+                <span>Description</span>
+                <strong>{{n-a this.issue.report "No report was provided."}}</strong>
+            </div>
+        </div>
+
+        <InputGroup @name="Close Note" @helpText="Describe why this issue is being closed.">
+            <Textarea @value={{this.note}} class="form-input w-full" rows={{5}} placeholder="Resolution note" />
+        </InputGroup>
+    </div>
+</Modal::Default>