@fleetbase/fleetops-engine 0.6.49 → 0.6.51

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

@@ -8,11 +8,15 @@ import { guidFor } from '@ember/object/internals';
 import { camelize, capitalize, dasherize } from '@ember/string';
 import { singularize, pluralize } from 'ember-inflector';
 import { all } from 'rsvp';
-import { task } from 'ember-concurrency';
+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;
+    liveViewportResourceLimit = 500;
+
     @service mapManager;
     @service mapSettings;
     @service leafletMapManager;
@@ -50,6 +54,7 @@ export default class MapLeafletLiveMapComponent extends Component {
     @tracked drivers = [];
     @tracked vehicles = [];
     @tracked places = [];
+    @tracked leafletPluginsReady = hasLeafletPluginsReady();
     _viewportReloadLocks = new Set();
 
     constructor() {
@@ -76,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() {
@@ -98,6 +107,11 @@ export default class MapLeafletLiveMapComponent extends Component {
             this.universe.off('fleet-ops.geofence.exited', this._geofenceExitedHandler);
             this._geofenceExitedHandler = null;
         }
+        if (this._viewportReloadHandler && this.map && typeof this.map.off === 'function') {
+            this.map.off('moveend', this._viewportReloadHandler);
+            this.map.off('zoomend', this._viewportReloadHandler);
+            this._viewportReloadHandler = null;
+        }
     }
 
     @action didLoad({ target: map }) {
@@ -106,8 +120,9 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.trigger('onLoad', ...arguments);
         this.load.perform();
         // Listen for map move/zoom events to trigger viewport-based resource reload
-        map.on('moveend', () => this.reloadResourcesInViewport.perform());
-        map.on('zoomend', () => this.reloadResourcesInViewport.perform());
+        this._viewportReloadHandler = () => this.reloadResourcesInViewport.perform();
+        map.on('moveend', this._viewportReloadHandler);
+        map.on('zoomend', this._viewportReloadHandler);
     }
 
     /**
@@ -211,13 +226,27 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.#createZoneContextMenu(zone, layer);
     }
 
+    @action rebuildMapContextMenu() {
+        if (!this.map) {
+            return;
+        }
+
+        this.#createMapContextMenu(this.map);
+        this.#refreshResourceContextMenus();
+        this.#pruneResourceContextMenus();
+    }
+
+    @action syncServiceAreaContextMenus() {
+        this.rebuildMapContextMenu();
+    }
+
     /** load resources and wait for stuff here and trigger map ready **/
     @task *load() {
         try {
             // Get initial map bounds for spatial filtering (provider-agnostic)
             const mapBounds = this.mapManager.getBounds?.() ?? (this.map ? this.map.getBounds() : null);
             const bounds = this.#serializeBoundsForRequest(mapBounds);
-            const params = bounds ? { bounds } : {};
+            const params = this.#liveViewportRequestParams(bounds);
 
             const data = yield all([
                 this.loadResource.perform('routes'),
@@ -242,12 +271,19 @@ export default class MapLeafletLiveMapComponent extends Component {
         if (this.isViewportReloadSuspended) {
             return;
         }
+
+        yield timeout(this.liveViewportReloadDebounceMs);
+
+        if (this.isViewportReloadSuspended) {
+            return;
+        }
+
         // Get current map bounds (provider-agnostic)
         const rawBounds = this.mapManager.getBounds?.() ?? this.map?.getBounds();
         if (!rawBounds) return;
         const bounds = this.#serializeBoundsForRequest(rawBounds);
         if (!bounds) return;
-        const params = { bounds };
+        const params = this.#liveViewportRequestParams(bounds);
 
         // Reload spatially-filtered resources (drivers, vehicles, places)
         // Orders, routes, and service-areas are not spatially filtered
@@ -299,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
@@ -445,6 +492,10 @@ export default class MapLeafletLiveMapComponent extends Component {
         return null;
     }
 
+    #liveViewportRequestParams(bounds) {
+        return bounds ? { bounds, limit: this.liveViewportResourceLimit } : { limit: this.liveViewportResourceLimit };
+    }
+
     #setResourceLayer(model, layer, options = {}) {
         const { hidden = false } = options;
         const type = getModelName(model);
@@ -462,6 +513,7 @@ export default class MapLeafletLiveMapComponent extends Component {
     }
 
     #createMapContextMenu(map) {
+        const serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []);
         const items = [
             {
                 text: this.intl.t('live-map.show-coordinates'),
@@ -494,10 +546,10 @@ export default class MapLeafletLiveMapComponent extends Component {
                 callback: () => this.geofence.createServiceArea(),
                 index: 5,
             },
-            this.serviceAreaActions.serviceAreas.length ? { separator: true } : null,
-            ...this.serviceAreaActions.serviceAreas.map((serviceArea, i) => {
+            serviceAreas.length ? { separator: true } : null,
+            ...serviceAreas.map((serviceArea, i) => {
                 return {
-                    text: this.intl.t('live-map.focus-service', { serviceName: serviceArea.name }),
+                    text: this.intl.t('live-map.focus-service', { serviceName: this.#resourceDisplayName(serviceArea) }),
                     callback: () => this.geofence.focusServiceArea(serviceArea),
                     index: 6 + i,
                 };
@@ -511,71 +563,200 @@ export default class MapLeafletLiveMapComponent extends Component {
     }
 
     #createZoneContextMenu(zone, layer) {
+        const zoneName = this.#resourceDisplayName(zone);
         let items = [
             {
                 separator: true,
             },
             {
-                text: this.intl.t('live-map.edit-zone', { zoneName: zone.name }),
+                text: this.intl.t('live-map.edit-zone', { zoneName }),
                 callback: () => this.zoneActions.modal.edit(zone),
             },
             {
-                text: this.intl.t('live-map.delete-zone', { zoneName: zone.name }),
-                callback: () => this.zoneActions.delete(zone),
+                text: this.intl.t('live-map.delete-zone', { zoneName }),
+                callback: () => this.#deleteZone(zone),
             },
         ];
 
         if (!this.mapManager.isGoogleMaps) {
             items.splice(2, 0, {
-                text: this.intl.t('live-map.edit-boundaries', { resource: zone.name }),
+                text: this.intl.t('live-map.edit-boundaries', { resource: zoneName }),
                 callback: () => this.geofence.editZone(zone),
             });
         }
 
         // create contextmenu registry
-        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(`zone:${zone.public_id}`, layer, items, { zone });
+        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(this.#resourceContextKey('zone', zone), layer, items, { zone });
         this.universe.trigger('fleet-ops:contextmenu:zone:created', contextmenuRegistry, this.leafletContextmenuManager);
 
         return contextmenuRegistry;
     }
 
     #createServiceAreaContextMenu(serviceArea, layer) {
+        const serviceName = this.#resourceDisplayName(serviceArea);
         let items = [
             {
                 separator: true,
             },
             {
-                text: this.intl.t('live-map.blur-service', { serviceName: serviceArea.name }),
+                text: this.intl.t('live-map.blur-service', { serviceName }),
                 callback: () => this.geofence.blurServiceArea(serviceArea),
             },
             {
-                text: this.intl.t('live-map.create-zone', { serviceName: serviceArea.name }),
+                text: this.intl.t('live-map.create-zone', { serviceName }),
                 callback: () => this.geofence.createZone(serviceArea),
             },
             {
-                text: this.intl.t('live-map.edit-service', { serviceName: serviceArea.name }),
+                text: this.intl.t('live-map.edit-service', { serviceName }),
                 callback: () => this.serviceAreaActions.modal.edit(serviceArea),
             },
             {
-                text: this.intl.t('live-map.delete-service', { serviceName: serviceArea.name }),
-                callback: () => this.serviceAreaActions.delete(serviceArea),
+                text: this.intl.t('live-map.delete-service', { serviceName }),
+                callback: () => this.#deleteServiceArea(serviceArea),
             },
         ];
 
         if (!this.mapManager.isGoogleMaps) {
             items.splice(4, 0, {
-                text: this.intl.t('live-map.edit-boundaries', { resource: serviceArea.name }),
+                text: this.intl.t('live-map.edit-boundaries', { resource: serviceName }),
                 callback: () => this.geofence.editServiceArea(serviceArea),
             });
         }
 
         // create contextmenu registry
-        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(`service-area:${serviceArea.public_id}`, layer, items, { serviceArea });
+        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(this.#resourceContextKey('service-area', serviceArea), layer, items, { serviceArea });
         this.universe.trigger('fleet-ops:contextmenu:service-area:created', contextmenuRegistry, this.leafletContextmenuManager);
 
         return contextmenuRegistry;
     }
 
+    #resourceContextKey(type, resource) {
+        return `${type}:${resource?.public_id ?? resource?.id}`;
+    }
+
+    #resourceDisplayName(resource) {
+        return resource?.get?.('name') || resource?.name || resource?.display_name || resource?.public_id || resource?.id || '';
+    }
+
+    #deleteServiceArea(serviceArea) {
+        const zones = Array.from(serviceArea?.zones ?? []);
+
+        return this.serviceAreaActions.delete(
+            serviceArea,
+            {},
+            {
+                callback: () => {
+                    this.#removeServiceAreaFromMapState(serviceArea, zones);
+                    this.rebuildMapContextMenu();
+                },
+            }
+        );
+    }
+
+    #deleteZone(zone) {
+        return this.zoneActions.delete(
+            zone,
+            {},
+            {
+                callback: () => {
+                    this.#removeZoneFromMapState(zone);
+                    this.rebuildMapContextMenu();
+                },
+            }
+        );
+    }
+
+    #removeServiceAreaFromMapState(serviceArea, zones = []) {
+        const serviceAreaId = serviceArea?.id;
+        const serviceAreaKey = this.#resourceContextKey('service-area', serviceArea);
+
+        zones.forEach((zone) => this.#removeZoneFromMapState(zone));
+        this.#removeOverlay(serviceArea);
+        this.leafletContextmenuManager.removeContextMenu(serviceAreaKey);
+
+        this.serviceAreaActions.serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []).filter((candidate) => candidate?.id !== serviceAreaId);
+    }
+
+    #removeZoneFromMapState(zone) {
+        const zoneId = zone?.id;
+        const zoneKey = this.#resourceContextKey('zone', zone);
+
+        this.#removeOverlay(zone);
+        this.leafletContextmenuManager.removeContextMenu(zoneKey);
+
+        for (const serviceArea of Array.from(this.serviceAreaActions.serviceAreas ?? [])) {
+            const zones = serviceArea?.zones;
+            if (!zones) {
+                continue;
+            }
+
+            const currentZones = Array.from(zones);
+            const nextZones = currentZones.filter((candidate) => candidate?.id !== zoneId);
+            if (nextZones.length !== currentZones.length) {
+                if (typeof zones.removeObject === 'function') {
+                    zones.removeObject(zone);
+                } else {
+                    serviceArea.set?.('zones', nextZones);
+                }
+                break;
+            }
+        }
+
+        this.serviceAreaActions.serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []);
+    }
+
+    #removeOverlay(resource) {
+        if (!resource?.id) {
+            return;
+        }
+
+        this.mapManager.removeOverlay?.(resource.id);
+
+        const layer = resource?.leafletLayer;
+        if (layer) {
+            this.mapManager.removeLayer?.(layer);
+        }
+    }
+
+    #refreshResourceContextMenus() {
+        for (const serviceArea of Array.from(this.serviceAreaActions.serviceAreas ?? [])) {
+            const serviceAreaLayer = this.mapManager.getOverlay(serviceArea?.id) ?? serviceArea?.leafletLayer;
+            if (serviceAreaLayer) {
+                this.#createServiceAreaContextMenu(serviceArea, serviceAreaLayer);
+            }
+
+            for (const zone of Array.from(serviceArea?.zones ?? [])) {
+                const zoneLayer = this.mapManager.getOverlay(zone?.id) ?? zone?.leafletLayer;
+                if (zoneLayer) {
+                    this.#createZoneContextMenu(zone, zoneLayer);
+                }
+            }
+        }
+    }
+
+    #pruneResourceContextMenus() {
+        const activeServiceAreaKeys = new Set();
+        const activeZoneKeys = new Set();
+
+        for (const serviceArea of Array.from(this.serviceAreaActions.serviceAreas ?? [])) {
+            activeServiceAreaKeys.add(this.#resourceContextKey('service-area', serviceArea));
+
+            for (const zone of Array.from(serviceArea?.zones ?? [])) {
+                activeZoneKeys.add(this.#resourceContextKey('zone', zone));
+            }
+        }
+
+        for (const registry of Object.values(this.leafletContextmenuManager.contextMenuRegistry ?? {})) {
+            if (registry?.serviceArea && !activeServiceAreaKeys.has(this.#resourceContextKey('service-area', registry.serviceArea))) {
+                this.leafletContextmenuManager.removeContextMenu(this.#resourceContextKey('service-area', registry.serviceArea));
+            }
+
+            if (registry?.zone && !activeZoneKeys.has(this.#resourceContextKey('zone', registry.zone))) {
+                this.leafletContextmenuManager.removeContextMenu(this.#resourceContextKey('zone', registry.zone));
+            }
+        }
+    }
+
     #createDriverContextMenu(driver, layer) {
         let items = [
             {

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/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/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>

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

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+export default class ModalsIssueCloseComponent extends Component {
+    @service currentUser;
+    @service notifications;
+
+    @tracked options = {};
+    @tracked issue;
+    @tracked note;
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.options = options;
+        this.issue = options.issue;
+        this.setupOptions();
+    }
+
+    get orderLabel() {
+        return this.issue?.order?.tracking || this.issue?.order?.public_id;
+    }
+
+    get vehicleLabel() {
+        return this.issue?.vehicle?.displayName || this.issue?.vehicle_name;
+    }
+
+    setupOptions() {
+        this.options.title = `Close ${this.issue?.public_id || 'Issue'}`;
+        this.options.acceptButtonText = 'Close Issue';
+        this.options.acceptButtonIcon = 'circle-check';
+        this.options.acceptButtonScheme = 'success';
+        this.options.confirm = async (modal) => {
+            if (!this.note) {
+                this.notifications.warning('Add a close note before closing the issue.');
+                return;
+            }
+
+            modal.startLoading();
+
+            try {
+                const closedAt = new Date().toISOString();
+                const user = this.currentUser.user;
+                const meta = this.issue.meta ?? {};
+
+                this.issue.status = 'closed';
+                this.issue.resolved_at = new Date();
+                this.issue.meta = {
+                    ...meta,
+                    resolution: {
+                        ...(meta.resolution ?? {}),
+                        note: this.note,
+                        closed_at: closedAt,
+                        closed_by_uuid: user?.id,
+                        closed_by_name: user?.name,
+                    },
+                };
+
+                await this.issue.save();
+                this.notifications.success('Issue closed.');
+
+                if (typeof this.options.onSaved === 'function') {
+                    await this.options.onSaved(this.issue);
+                }
+
+                modal.done();
+            } catch (error) {
+                this.notifications.serverError(error);
+                modal.stopLoading();
+            }
+        };
+    }
+}