@fleetbase/fleetops-engine 0.6.50 → 0.6.52

package/addon/components/issue/details.hbs

@@ -1,68 +1,175 @@
-<div class="details-wrapper" ...attributes>
-    <ContentPanel @title={{t "common.details"}} @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
-            <div class="field-info-container">
-                <div class="field-name">{{t "issue.fields.title"}}</div>
-                <div class="field-value">{{or @resource.title (concat "Issue reported on " (format-date-fns @model.created_at "dd MMM yy, HH:mm"))}}</div>
+<div class="issue-detail-surface" ...attributes>
+    <section class="issue-detail-summary-card">
+        <div class="issue-detail-section-header">
+            <div>
+                <div class="issue-detail-section-title">Issue Details</div>
+                <p>Classification, ownership, and reporting date.</p>
             </div>
-            <div class="field-info-container">
-                <div class="field-name">{{t "common.status"}}</div>
-                <div class="field-value">
-                    <Badge @status={{@resource.status}} />
-                </div>
-            </div>
-            <div class="field-info-container">
-                <div class="field-name">{{t "issue.fields.reported-by"}}</div>
-                <div class="field-value">{{n-a @resource.reporter_name}}</div>
-            </div>
-            <div class="field-info-container">
-                <div class="field-name">{{t "issue.fields.assigned-to"}}</div>
-                <div class="field-value">{{n-a @resource.assignee_name}}</div>
+        </div>
+        <dl class="issue-detail-summary-grid">
+            <div class="issue-detail-summary-item">
+                <dt>Type</dt>
+                <dd>{{n-a (smart-humanize @resource.type)}}</dd>
             </div>
-            <div class="field-info-container">
-                <div class="field-name">{{t "resource.driver"}}</div>
-                <div class="field-value">{{n-a @resource.driver_name}}</div>
+            <div class="issue-detail-summary-item">
+                <dt>Category</dt>
+                <dd>{{n-a (smart-humanize @resource.category)}}</dd>
             </div>
-            <div class="field-info-container">
-                <div class="field-name">{{t "resource.vehicle"}}</div>
-                <div class="field-value">{{n-a @resource.vehicle_name}}</div>
+            <div class="issue-detail-summary-item">
+                <dt>Reporter</dt>
+                <dd><User::Pill @user={{@resource.reporter}} @titleFallback={{this.reporterName}} /></dd>
             </div>
-            <div class="field-info-container">
-                <div class="field-name">{{t "issue.fields.type"}}</div>
-                <div class="field-value">{{n-a (titleize @resource.type)}}</div>
+            <div class="issue-detail-summary-item">
+                <dt>Assignee</dt>
+                <dd><User::Pill @user={{@resource.assignee}} @titleFallback={{this.assigneeName}} /></dd>
             </div>
-            <div class="field-info-container">
-                <div class="field-name">{{t "issue.fields.category"}}</div>
-                <div class="field-value">{{n-a @resource.category}}</div>
+            <div class="issue-detail-summary-item">
+                <dt>Date Reported</dt>
+                <dd>{{n-a @resource.createdAt}}</dd>
             </div>
-            <div class="field-info-container">
-                <div class="field-name">{{t "issue.fields.priority"}}</div>
-                <div class="field-value">
-                    <Badge @status={{@resource.priority}} />
+        </dl>
+    </section>
+
+    <div class="issue-detail-grid">
+        <main class="issue-detail-main">
+            <article class="issue-detail-message issue-detail-message-original">
+                <div class="issue-detail-avatar">{{this.reporterInitial}}</div>
+                <div class="issue-detail-message-content">
+                    <div class="issue-detail-message-meta">
+                        <div>
+                            <div class="issue-detail-message-author">{{this.reporterName}}</div>
+                            <div class="issue-detail-message-subtitle">Original report</div>
+                        </div>
+                        <time>{{n-a @resource.createdAt}}</time>
+                    </div>
+                    <div class="issue-detail-report">{{n-a @resource.report "No report was provided."}}</div>
+
+                    <Issue::Details::Documents @resource={{@resource}} />
                 </div>
-            </div>
-            <div class="field-info-container">
-                <div class="field-name">{{t "common.date-created"}}</div>
-                <div class="field-value">{{@resource.createdAt}}</div>
-            </div>
-            <div class="field-info-container col-span-2">
-                <div class="field-name">{{t "issue.fields.tags"}}</div>
-                <div class="field-value flex flex-row items-center space-x-1">
-                    {{#each @resource.tags as |tag|}}
-                        <div class="rounded-xl border text-sm border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-0.5 flex items-center justify-center">{{tag}}</div>
-                    {{/each}}
+            </article>
+
+            <section class="issue-detail-correspondence">
+                <div class="issue-detail-section-header">
+                    <div>
+                        <div class="issue-detail-section-title">Correspondence</div>
+                        <p>Keep operator updates, customer replies, and internal follow-up attached to this issue.</p>
+                    </div>
                 </div>
-            </div>
-            <div class="field-info-container col-span-2">
-                <div class="field-name">{{t "common.coordinates"}}</div>
-                <div class="field-value">{{point-coordinates @resource.location}}</div>
-            </div>
-            <div class="field-info-container col-span-2">
-                <div class="field-name">{{t "issue.fields.report"}}</div>
-                <div class="field-value">{{n-a @resource.report}}</div>
-            </div>
-        </div>
-    </ContentPanel>
+                <Issue::Details::Correspondence @resource={{@resource}} />
+            </section>
+
+            <section class="issue-detail-side-card">
+                <div class="issue-detail-section-title">Timeline</div>
+                <Issue::Timeline @resource={{@resource}} />
+            </section>
+
+            <RegistryYield @registry="fleet-ops:component:issue:details" as |RegistryComponent|>
+                <RegistryComponent @resource={{@resource}} />
+            </RegistryYield>
+        </main>
+
+        <aside class="issue-detail-side-rail">
+            <section class="issue-detail-side-card issue-detail-resolution-card">
+                <div class="issue-detail-section-title">Resolution Details</div>
+                <div class="issue-detail-resolution-state {{if this.isResolved 'is-resolved'}} {{if this.isReopened 'is-reopened'}}">
+                    <div class="issue-detail-resolution-icon">
+                        <FaIcon @icon={{this.resolutionIcon}} />
+                    </div>
+                    <div>
+                        <div class="issue-detail-resolution-title">{{this.resolutionTitle}}</div>
+                        <p>{{this.resolutionDescription}}</p>
+                    </div>
+                </div>
+                <dl class="issue-detail-meta-list">
+                    {{#if this.resolutionDate}}
+                        <div>
+                            <dt>{{if this.isReopened "Previous close date" "Closed date"}}</dt>
+                            <dd>{{this.resolutionDate}}</dd>
+                        </div>
+                    {{/if}}
+                    {{#if this.resolutionActor}}
+                        <div>
+                            <dt>{{if this.isReopened "Previously closed by" "Closed by"}}</dt>
+                            <dd>{{this.resolutionActor}}</dd>
+                        </div>
+                    {{/if}}
+                    {{#if this.resolutionNote}}
+                        <div>
+                            <dt>Note</dt>
+                            <dd>{{this.resolutionNote}}</dd>
+                        </div>
+                    {{/if}}
+                    {{#if this.timeToResolve}}
+                        <div>
+                            <dt>Time to resolve</dt>
+                            <dd>{{this.timeToResolve}}</dd>
+                        </div>
+                    {{/if}}
+                    <div>
+                        <dt>Status</dt>
+                        <dd><Badge @status={{@resource.status}} /></dd>
+                    </div>
+                    <div>
+                        <dt>Priority</dt>
+                        <dd><Badge @status={{@resource.priority}} /></dd>
+                    </div>
+                    <div>
+                        <dt>Type</dt>
+                        <dd>{{n-a (smart-humanize @resource.type)}}</dd>
+                    </div>
+                    <div>
+                        <dt>Category</dt>
+                        <dd>{{n-a (smart-humanize @resource.category)}}</dd>
+                    </div>
+                </dl>
+            </section>
+
+            <section class="issue-detail-side-card">
+                <div class="issue-detail-section-title">Linked Resources</div>
+                <div class="issue-detail-resource-stack">
+                    <div class="issue-detail-resource-row">
+                        <div class="issue-detail-resource-label">Vehicle</div>
+                        <Vehicle::Pill @vehicle={{@resource.vehicle}} @titleFallback={{n-a @resource.vehicle_name "No vehicle linked"}} @onClick={{this.viewVehicle}} />
+                    </div>
+                    <div class="issue-detail-resource-row">
+                        <div class="issue-detail-resource-label">Driver</div>
+                        <Driver::Pill @driver={{@resource.driver}} @titleFallback={{n-a @resource.driver_name "No driver linked"}} @onClick={{this.viewDriver}} />
+                    </div>
+                </div>
+            </section>
+
+            <section class="issue-detail-side-card">
+                <div class="issue-detail-section-title">{{t "order.card.linked-order"}}</div>
+                {{#if this.order}}
+                    <Order::Card @order={{this.order}} @variant="default" @interactive={{true}} @onClick={{this.viewOrder}} />
+                {{else}}
+                    <div class="issue-detail-empty">
+                        <FaIcon @icon="route" />
+                        <span>{{t "order.card.no-order-linked"}}</span>
+                    </div>
+                {{/if}}
+            </section>
+
+            {{#if this.tags.length}}
+                <section class="issue-detail-side-card">
+                    <div class="issue-detail-section-title">Tags</div>
+                    <div class="issue-detail-tags">
+                        {{#each this.tags as |tag|}}
+                            <Badge @status="info" @text={{tag}} @hideStatusDot={{true}} />
+                        {{/each}}
+                    </div>
+                </section>
+            {{/if}}
+
+            {{#if this.hasLocation}}
+                <section class="issue-detail-side-card">
+                    <div class="issue-detail-section-title">Location</div>
+                    <div class="issue-detail-coordinate">{{point-coordinates @resource.location}}</div>
+                </section>
+            {{/if}}
 
-    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+            <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="issue-detail-custom-fields" />
+        </aside>
+    </div>
+    <Spacer @height="200px" />
+</div>

package/addon/components/issue/details.js

@@ -0,0 +1,149 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { formatDistanceStrict, isValid } from 'date-fns';
+
+export default class IssueDetailsComponent extends Component {
+    @service hostRouter;
+    @service issueActions;
+
+    get resource() {
+        return this.args.resource;
+    }
+
+    get tags() {
+        return Array.isArray(this.resource?.tags) ? this.resource.tags.filter(Boolean) : [];
+    }
+
+    get order() {
+        return this.resource?.order;
+    }
+
+    get files() {
+        return this.resource?.files ?? [];
+    }
+
+    get hasFiles() {
+        return this.files.length > 0;
+    }
+
+    get reporterName() {
+        return this.resource?.reporter?.name || this.resource?.reporter_name || 'Unknown reporter';
+    }
+
+    get reporterInitial() {
+        return this.reporterName?.charAt(0)?.toUpperCase() || '?';
+    }
+
+    get assigneeName() {
+        return this.resource?.assignee?.name || this.resource?.assignee_name || 'Unassigned';
+    }
+
+    get isResolved() {
+        return ['resolved', 'completed', 'closed'].includes(this.resource?.status);
+    }
+
+    get isReopened() {
+        return this.resource?.status === 're_opened';
+    }
+
+    get resolutionMeta() {
+        return this.resource?.meta?.resolution ?? {};
+    }
+
+    get reopenHistory() {
+        return Array.isArray(this.resource?.meta?.reopen_history) ? this.resource.meta.reopen_history : [];
+    }
+
+    get lastReopen() {
+        return this.reopenHistory[this.reopenHistory.length - 1];
+    }
+
+    get resolutionIcon() {
+        if (this.isResolved) {
+            return 'circle-check';
+        }
+
+        if (this.isReopened) {
+            return 'rotate-left';
+        }
+
+        return 'hourglass-half';
+    }
+
+    get resolutionTitle() {
+        if (this.isResolved) {
+            return 'Issue closed';
+        }
+
+        if (this.isReopened) {
+            return 'Issue re-opened';
+        }
+
+        return 'Awaiting resolution';
+    }
+
+    get resolutionDescription() {
+        if (this.isResolved) {
+            return this.resolutionMeta.note || 'This issue has been closed and no further action is currently required.';
+        }
+
+        if (this.isReopened) {
+            return this.lastReopen?.note || 'This issue was previously closed and has been re-opened for follow-up.';
+        }
+
+        return 'No resolution details have been recorded yet.';
+    }
+
+    get resolutionDate() {
+        return this.resolutionMeta.closed_at || this.resource?.resolvedAt || this.resource?.resolved_at;
+    }
+
+    get resolutionActor() {
+        return this.resolutionMeta.closed_by_name;
+    }
+
+    get resolutionNote() {
+        return this.resolutionMeta.note;
+    }
+
+    get timeToResolve() {
+        const createdAt = this.dateFromValue(this.resource?.created_at);
+        const resolvedAt = this.dateFromValue(this.resource?.resolved_at);
+
+        if (!createdAt || !resolvedAt) {
+            return null;
+        }
+
+        return formatDistanceStrict(createdAt, resolvedAt);
+    }
+
+    get hasLocation() {
+        const location = this.resource?.location;
+        return Boolean(location?.latitude || location?.longitude || location?.coordinates);
+    }
+
+    dateFromValue(value) {
+        if (!value) {
+            return null;
+        }
+
+        const date = value instanceof Date ? value : new Date(value);
+
+        return isValid(date) ? date : null;
+    }
+
+    @action viewOrder() {
+        if (this.order) {
+            return this.hostRouter.transitionTo('console.fleet-ops.operations.orders.index.details', this.order);
+        }
+    }
+
+    @action viewVehicle() {
+        return this.issueActions.viewVehicle(this.resource);
+    }
+
+    @action viewDriver() {
+        return this.issueActions.viewDriver(this.resource);
+    }
+}

package/addon/components/issue/form.hbs

@@ -27,6 +27,7 @@
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
+                    @query={{hash is_not_customer=true}}
                     @onChange={{fn (mut @resource.assignee)}}
                     @onChangeId={{fn (mut @resource.assigned_to_uuid)}}
                     @disabled={{cannot-write @resource}}
@@ -70,6 +71,23 @@
                 </ModelSelect>
             </InputGroup>
 
+            <InputGroup @name={{t "resource.order"}}>
+                <ModelSelect
+                    @modelName="order"
+                    @selectedModel={{@resource.order}}
+                    @placeholder={{t "common.select-field" field=(t "resource.order")}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.order)}}
+                    @onChangeId={{fn (mut @resource.order_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{or model.tracking model.public_id}}
+                </ModelSelect>
+            </InputGroup>
+
             <InputGroup @name={{t "issue.fields.type"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
@@ -180,4 +198,4 @@
     <RegistryYield @registry="fleet-ops:component:issue:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{this.controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+</div>

package/addon/components/issue/panel-header.hbs

@@ -0,0 +1,43 @@
+<div class="issue-panel-header">
+    <div class="issue-panel-header-main">
+        <div class="issue-panel-header-icon">
+            <FaIcon @icon="triangle-exclamation" />
+        </div>
+        <div class="issue-panel-header-content">
+            <div class="issue-panel-header-title-row">
+                <h1 class="issue-panel-header-title">{{this.title}}</h1>
+            </div>
+            {{#if @resource.public_id}}
+                <ClickToCopy @value={{@resource.public_id}} class="issue-panel-header-id">
+                    <FaIcon @icon="hashtag" />
+                    <span>{{@resource.public_id}}</span>
+                </ClickToCopy>
+            {{/if}}
+            <div class="issue-panel-header-meta">
+                {{#if this.subtitle}}
+                    <span>{{titleize this.subtitle}}</span>
+                {{/if}}
+                {{#if @resource.createdAt}}
+                    <span>Reported {{@resource.createdAt}}</span>
+                {{/if}}
+            </div>
+        </div>
+    </div>
+
+    <div class="issue-panel-header-actions">
+        <div class="issue-panel-header-badges">
+            <Badge @status={{@resource.status}} />
+            <Badge @status={{@resource.priority}} />
+        </div>
+        <Layout::Resource::Panel::HeaderActions
+            @resource={{@resource}}
+            @saveTask={{@saveTask}}
+            @saveOptions={{@saveOptions}}
+            @saveDisabled={{@saveDisabled}}
+            @pojoResource={{@pojoResource}}
+            @authSchema={{@authSchema}}
+            @actionButtons={{@actionButtons}}
+            @onPressCancel={{@onPressCancel}}
+        />
+    </div>
+</div>

package/addon/components/issue/panel-header.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+
+export default class IssuePanelHeaderComponent extends Component {
+    get resource() {
+        return this.args.resource;
+    }
+
+    get title() {
+        return this.resource?.title || `Issue reported on ${this.resource?.createdAt || 'unknown date'}`;
+    }
+
+    get tags() {
+        return Array.isArray(this.resource?.tags) ? this.resource.tags.filter(Boolean) : [];
+    }
+
+    get subtitle() {
+        return [this.resource?.type, this.resource?.category]
+            .filter(Boolean)
+            .map((value) => value.replace(/[-_]/g, ' '))
+            .join(' / ');
+    }
+}

package/addon/components/issue/timeline.hbs

@@ -0,0 +1,40 @@
+<div class="issue-timeline" {{did-update this.reload this.issueId}} ...attributes>
+    {{#if this.loadTimeline.isRunning}}
+        <div class="issue-timeline-loading">
+            <Spinner @loadingMessage="Loading timeline..." />
+        </div>
+    {{else if this.hasEvents}}
+        <ol class="issue-timeline-list">
+            {{#each this.events as |event|}}
+                <li class="issue-timeline-event tone-{{event.tone}}">
+                    <div class="issue-timeline-marker">
+                        <FaIcon @icon={{event.icon}} />
+                    </div>
+                    <div class="issue-timeline-card">
+                        <div class="issue-timeline-card-header">
+                            <div>
+                                <div class="issue-timeline-label">{{event.label}}</div>
+                                <div class="issue-timeline-actor">{{n-a event.actor_name "Someone"}}</div>
+                            </div>
+                            <time>{{n-a (format-date-fns event.created_at "dd MMM yyyy HH:mm")}}</time>
+                        </div>
+                        {{#if event.description}}
+                            <p>{{event.description}}</p>
+                        {{/if}}
+                        {{#if event.meta.file_url}}
+                            <a href={{event.meta.file_url}} target="_blank" rel="noopener noreferrer" class="issue-timeline-link">
+                                <FaIcon @icon="download" />
+                                <span>{{n-a event.meta.file_name "Download file"}}</span>
+                            </a>
+                        {{/if}}
+                    </div>
+                </li>
+            {{/each}}
+        </ol>
+    {{else}}
+        <div class="issue-detail-empty issue-detail-empty-compact">
+            <FaIcon @icon="timeline" />
+            <span>No issue activity yet.</span>
+        </div>
+    {{/if}}
+</div>

package/addon/components/issue/timeline.js

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
+
+export default class IssueTimelineComponent extends Component {
+    @service fetch;
+    @service notifications;
+
+    @tracked events = [];
+
+    constructor() {
+        super(...arguments);
+        this.loadTimeline.perform();
+    }
+
+    get issueId() {
+        return this.args.resource?.id || this.args.resource?.uuid || this.args.resource?.public_id;
+    }
+
+    get hasEvents() {
+        return this.events.length > 0;
+    }
+
+    @task *loadTimeline() {
+        if (!this.issueId) {
+            this.events = [];
+            return;
+        }
+
+        try {
+            const response = yield this.fetch.get(`issues/${this.issueId}/timeline`, {}, { namespace: 'int/v1' });
+            this.events = response.events ?? response.timeline ?? [];
+        } catch (err) {
+            debug('Failed to load issue timeline: ' + err.message);
+            this.notifications.serverError(err);
+        }
+    }
+
+    @action reload() {
+        this.loadTimeline.perform();
+    }
+}

package/addon/components/layout/fleet-ops-sidebar.js

@@ -162,6 +162,15 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             },
             {
                 priority: 7,
+                intl: 'menu.fuel-transactions',
+                title: this.intl.t('menu.fuel-transactions'),
+                icon: 'credit-card',
+                route: 'management.fuel-transactions',
+                permission: 'fleet-ops list fuel-report',
+                visible: this.abilities.can('fleet-ops see fuel-report'),
+            },
+            {
+                priority: 8,
                 intl: 'menu.issues',
                 title: this.intl.t('menu.issues'),
                 icon: 'triangle-exclamation',
@@ -184,6 +193,15 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             },
             {
                 priority: 1,
+                intl: 'menu.fuel-providers',
+                title: this.intl.t('menu.fuel-providers'),
+                icon: 'gas-pump',
+                route: 'connectivity.fuel-providers',
+                permission: 'fleet-ops list fuel-report',
+                visible: this.abilities.can('fleet-ops see fuel-report'),
+            },
+            {
+                priority: 2,
                 intl: 'menu.devices',
                 title: this.intl.t('menu.devices'),
                 icon: 'hard-drive',
@@ -192,7 +210,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see device'),
             },
             {
-                priority: 2,
+                priority: 3,
                 intl: 'menu.sensors',
                 title: this.intl.t('menu.sensors'),
                 icon: 'temperature-full',
@@ -201,7 +219,7 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
                 visible: this.abilities.can('fleet-ops see sensor'),
             },
             {
-                priority: 3,
+                priority: 4,
                 intl: 'menu.events',
                 title: this.intl.t('menu.events'),
                 icon: 'stream',

package/addon/components/leaflet-tracking-marker.js

@@ -1,5 +1,6 @@
 import MarkerLayer from 'ember-leaflet/components/marker-layer';
 import { isArray } from '@ember/array';
+import ensureLeafletDrawEditNamespace from '../utils/leaflet-draw-namespace-guard';
 
 const __draggingHotfix = (layer) => {
     if (!layer.dragging) {
@@ -23,6 +24,7 @@ const arrayFromLatLng = (latlng) => {
 };
 
 const L = window.leaflet || window.L;
+ensureLeafletDrawEditNamespace(L);
 const oldIE = L.DomUtil.TRANSFORM === 'msTransform';
 L.TrackingMarker = L.Marker.extend({
     // eslint-disable-next-line ember/avoid-leaking-state-in-ember-objects
@@ -291,6 +293,7 @@ export default class LeafletTrackingMarkerComponent extends MarkerLayer {
     }
 
     createLayer() {
+        ensureLeafletDrawEditNamespace(L);
         const { rotationAngle, location } = this.args;
         const bearingAngle = rotationAngle ?? computeBearing([0, 0], location);
         return new L.TrackingMarker(...this.requiredOptions, { ...this.options, bearingAngle });