@fleetbase/fleetops-engine 0.6.50 → 0.6.51

package/addon/components/issue/details.hbs

@@ -1,68 +1,229 @@
-<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">Linked Order</div>
+                {{#if this.order}}
+                    <button type="button" class="issue-detail-order-card" {{on "click" this.viewOrder}}>
+                        <div class="issue-detail-order-topline">
+                            <div class="issue-detail-order-title-block">
+                                <div class="issue-detail-order-title">{{this.orderLabel}}</div>
+                                <div class="issue-detail-order-subtitle">{{n-a (smart-humanize this.order.type)}}</div>
+                            </div>
+                            <Badge @status={{this.order.status}} />
+                        </div>
+                        <div class="issue-detail-order-progress {{this.orderProgressClass}}">
+                            <span></span>
+                        </div>
+                        {{#if this.hasOrderStops}}
+                            <div class="issue-detail-order-route">
+                                <div class="issue-detail-order-stop">
+                                    <div class="issue-detail-order-stop-marker pickup">1</div>
+                                    <div class="min-w-0">
+                                        <div class="issue-detail-order-stop-label">Pickup</div>
+                                        <div class="issue-detail-order-stop-address">{{n-a this.orderOriginAddress "No pickup address"}}</div>
+                                    </div>
+                                </div>
+                                {{#if this.isMultiStopOrder}}
+                                    <div class="issue-detail-order-stop compact">
+                                        <div class="issue-detail-order-stop-marker middle">+</div>
+                                        <div class="min-w-0">
+                                            <div class="issue-detail-order-stop-label">Waypoints</div>
+                                            <div class="issue-detail-order-stop-address">{{this.middleStopCount}} additional {{if (eq this.middleStopCount 1) "stop" "stops"}}</div>
+                                        </div>
+                                    </div>
+                                {{/if}}
+                                <div class="issue-detail-order-stop">
+                                    <div class="issue-detail-order-stop-marker dropoff">{{this.orderStopCount}}</div>
+                                    <div class="min-w-0">
+                                        <div class="issue-detail-order-stop-label">{{if (eq this.orderDestination.type "return") "Return" "Dropoff"}}</div>
+                                        <div class="issue-detail-order-stop-address">{{n-a this.orderDestinationAddress "No dropoff address"}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        {{else}}
+                            <div class="issue-detail-empty issue-detail-empty-compact">
+                                <FaIcon @icon="route" />
+                                <span>No route details available.</span>
+                            </div>
+                        {{/if}}
+                        <div class="issue-detail-order-meta">
+                            {{#if this.orderScheduledAt}}
+                                <span><FaIcon @icon="calendar" /> {{format-date-fns this.orderScheduledAt "MMM d, HH:mm"}}</span>
+                            {{/if}}
+                            {{#if this.orderDriverLabel}}
+                                <span><FaIcon @icon="id-card" /> {{this.orderDriverLabel}}</span>
+                            {{/if}}
+                            {{#if this.orderVehicleLabel}}
+                                <span><FaIcon @icon="truck" /> {{this.orderVehicleLabel}}</span>
+                            {{/if}}
+                        </div>
+                    </button>
+                {{else}}
+                    <div class="issue-detail-empty">
+                        <FaIcon @icon="route" />
+                        <span>No order is linked to this issue.</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,245 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { formatDistanceStrict, isValid } from 'date-fns';
+
+const COMPLETE_ORDER_STATUSES = ['completed', 'delivered'];
+const ACTIVE_ORDER_STATUSES = ['dispatched', 'started', 'in_progress', 'driver_enroute', 'driver_nearby'];
+
+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 orderLabel() {
+        return this.order?.tracking_number?.tracking_number || this.order?.tracking_number || this.order?.tracking || this.order?.public_id || this.order?.id;
+    }
+
+    get orderStops() {
+        const payload = this.order?.payload ?? {};
+        const stops = [];
+
+        if (payload.pickup) {
+            stops.push({ type: 'pickup', place: payload.pickup });
+        }
+
+        (payload.waypoints ?? []).forEach((waypoint, index) => {
+            stops.push({
+                type: waypoint.type ?? 'waypoint',
+                place: waypoint.place ?? waypoint,
+                index: index + 1,
+            });
+        });
+
+        if (payload.dropoff) {
+            stops.push({ type: 'dropoff', place: payload.dropoff });
+        }
+
+        if (payload.return) {
+            stops.push({ type: 'return', place: payload.return });
+        }
+
+        return stops.filter((stop) => this.addressForPlace(stop.place));
+    }
+
+    get orderOrigin() {
+        return this.orderStops[0];
+    }
+
+    get orderDestination() {
+        return this.orderStops[this.orderStops.length - 1];
+    }
+
+    get orderOriginAddress() {
+        return this.addressForPlace(this.orderOrigin?.place);
+    }
+
+    get orderDestinationAddress() {
+        return this.addressForPlace(this.orderDestination?.place);
+    }
+
+    get orderStopCount() {
+        return this.orderStops.length;
+    }
+
+    get middleStopCount() {
+        return Math.max(this.orderStopCount - 2, 0);
+    }
+
+    get isMultiStopOrder() {
+        return this.orderStopCount > 2;
+    }
+
+    get hasOrderStops() {
+        return this.orderStopCount > 0;
+    }
+
+    get orderProgressClass() {
+        const status = this.order?.status;
+
+        if (COMPLETE_ORDER_STATUSES.includes(status)) {
+            return 'is-complete';
+        }
+
+        if (ACTIVE_ORDER_STATUSES.includes(status)) {
+            return 'is-active';
+        }
+
+        return 'is-pending';
+    }
+
+    get orderScheduledAt() {
+        return this.order?.scheduled_at || this.order?.created_at || this.order?.createdAt;
+    }
+
+    get orderDriverLabel() {
+        return this.order?.driver_assigned?.name || this.order?.driver_name || this.order?.driver?.name;
+    }
+
+    get orderVehicleLabel() {
+        return this.order?.vehicle_assigned?.displayName || this.order?.vehicle_assigned?.display_name || this.order?.vehicle_name || this.order?.vehicle?.displayName;
+    }
+
+    get hasLocation() {
+        const location = this.resource?.location;
+        return Boolean(location?.latitude || location?.longitude || location?.coordinates);
+    }
+
+    addressForPlace(place) {
+        return place?.address ?? place?.address_html ?? place?.street1 ?? place?.name;
+    }
+
+    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(' / ');
+    }
+}