@fleetbase/fleetops-engine 0.6.64 → 0.6.66

package/addon/controllers/settings/payments/index.js

@@ -5,8 +5,11 @@ import { isEmpty } from '@ember/utils';
 import { task } from 'ember-concurrency';
 import config from 'ember-get-config';
 import { action } from '@ember/object';
+import { buildIdentityStub } from '../../../utils/identity-cell-resource';
+import relationValue from '../../../utils/relation-value';
 
 export default class SettingsPaymentsIndexController extends Controller {
+    @service store;
     @service fetch;
     @tracked hasStripeConnectAccount = true;
     @tracked table;
@@ -24,16 +27,22 @@ export default class SettingsPaymentsIndexController extends Controller {
         {
             label: 'Service Quote',
             valuePath: 'service_quote_id',
-            cellComponent: 'click-to-copy',
+            cellComponent: 'cell/service-quote-identity',
+            resourcePath: (payment) => relationValue(payment, 'service_quote') ?? buildIdentityStub(payment, { type: 'service-quote', nameKey: 'service_quote_id' }),
         },
         {
             label: 'Order',
             valuePath: 'order_id',
-            cellComponent: 'click-to-copy',
+            cellComponent: 'cell/order-identity',
+            resourcePath: (payment) =>
+                relationValue(payment, 'order') ??
+                buildIdentityStub(payment, { type: 'order', nameKey: 'order_id', load: () => (payment.order_uuid ? this.store.findRecord('order', payment.order_uuid) : null) }),
         },
         {
             label: 'Customer',
             valuePath: 'customer.name',
+            cellComponent: 'cell/customer-identity',
+            resourcePath: (payment) => relationValue(payment, 'customer') ?? buildIdentityStub(payment, { type: payment.customer_type ?? 'customer', nameKey: 'customer_name' }),
         },
         {
             label: 'Amount',

package/addon/extension.js

@@ -5,6 +5,7 @@ export default {
         const menuService = universe.getService('menu');
         const registryService = universe.getService('registry');
         const widgetService = universe.getService('widget');
+        const intlService = app.lookup('service:intl');
 
         // Register header navigation
         menuService.registerHeaderMenuItem('Fleet-Ops', 'console.fleet-ops', {
@@ -12,6 +13,12 @@ export default {
             priority: 0,
             description: 'Dispatch, fleet management, driver tracking, and logistics operations.',
             shortcuts: [
+                {
+                    title: 'Radar',
+                    description: 'Everything across resources, maintenance and staffing that needs a decision today.',
+                    icon: 'satellite-dish',
+                    route: 'console.fleet-ops.management.index',
+                },
                 {
                     title: 'Orders',
                     description: 'Create, dispatch, and track delivery orders in real time.',
@@ -36,6 +43,12 @@ export default {
                     icon: 'truck',
                     route: 'console.fleet-ops.management.vehicles',
                 },
+                {
+                    title: intlService.t('menu.trailers'),
+                    description: intlService.t('trailer.navigation-description'),
+                    icon: 'trailer',
+                    route: 'console.fleet-ops.management.trailers',
+                },
                 {
                     title: 'Fleets',
                     description: 'Organise drivers and vehicles into operational fleets.',
@@ -111,6 +124,21 @@ export default {
             })
         );
 
+        menuService.registerMenuItem(
+            'auth:login',
+            new MenuItem({
+                title: 'Inspection',
+                route: 'virtual',
+                slug: 'inspection',
+                type: 'link',
+                wrapperClass: 'hidden',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'public-inspection'),
+                onClick: (menuItem) => {
+                    universe.transitionMenuItem('virtual', menuItem);
+                },
+            })
+        );
+
         // Register widgets
         this.registerWidgets(widgetService);
 
@@ -198,6 +226,16 @@ export default {
                 category: 'KPI Tiles',
                 default: true,
             }),
+            new Widget({
+                id: 'fleet-ops-radar-widget',
+                name: 'Radar',
+                description: 'What needs a decision across the fleet right now: open, overdue and snoozed items, linking to Radar.',
+                icon: 'satellite-dish',
+                component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/radar'),
+                grid_options: { w: 3, h: 4, minW: 3, minH: 4 },
+                category: 'KPI Tiles',
+                default: true,
+            }),
             new Widget({
                 id: 'fleet-ops-kpi-open-issues-widget',
                 name: 'Open Issues',
@@ -387,6 +425,11 @@ export default {
             'fleet-ops:component:maintenance:form',
             'fleet-ops:component:maintenance:form:details',
             'fleet-ops:component:maintenance:details',
+            'fleet-ops:component:inspection-form:form',
+            'fleet-ops:component:inspection-form:details',
+            'fleet-ops:component:inspection-submission:form',
+            'fleet-ops:component:inspection-submission:details',
+            'fleet-ops:component:public-inspection',
             'fleet-ops:component:work-order:form',
             'fleet-ops:component:work-order:form:details',
             'fleet-ops:component:work-order:details',

package/addon/helpers/initials.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import { initialsOf } from '../utils/radar';
+
+export default helper(function initials([name]) {
+    return initialsOf(name);
+});

package/addon/helpers/leaflet-tile-url.js

@@ -5,9 +5,14 @@ import { inject as service } from '@ember/service';
  * Resolves the Leaflet tile URL from Fleet-Ops map settings.
  *
  * Usage:
- *   <layers.tile @url={{leaflet-tile-url}} />
+ *   <layers.tile @url={{(leaflet-tile-url)}} />
  *   <layers.tile @url={{leaflet-tile-url theme="dark"}} />
  *
+ * With no arguments it must be invoked in parentheses. A bare
+ * `@url={{leaflet-tile-url}}` passes the helper by name, which Glimmer refuses
+ * with "A resolved helper cannot be passed as a named argument" and the whole
+ * template fails to render.
+ *
  * Recomputes automatically when map settings load or change.
  */
 export default class LeafletTileUrlHelper extends Helper {

package/addon/helpers/placeholder-image.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import { getPlaceholderImage } from '../utils/placeholder-images';
+
+export default helper(function placeholderImage([type]) {
+    return getPlaceholderImage(type);
+});

package/addon/helpers/resource-image.js

@@ -0,0 +1,10 @@
+import { helper } from '@ember/component/helper';
+import { resolveResourceImage } from '../utils/placeholder-images';
+
+/**
+ * `{{resource-image @resource.photo_url "driver"}}` — the record's photo, or the styled
+ * placeholder for its resource type when the photo is missing or a legacy default.
+ */
+export default helper(function resourceImage([url, type]) {
+    return resolveResourceImage(url, type);
+});

package/addon/helpers/trailer-placeholder-image.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import getTrailerPlaceholderImage from '../utils/trailer-placeholder-image';
+
+export default helper(function trailerPlaceholderImage() {
+    return getTrailerPlaceholderImage();
+});

package/addon/instance-initializers/register-fleetops-resource-descriptors.js

@@ -0,0 +1,29 @@
+import { buildFleetOpsResourceDescriptors } from '../utils/resource-descriptors';
+
+/**
+ * Registers every FleetOps resource descriptor with the resource registry
+ * ember-ui provides. Runs with the engine instance, so the descriptors'
+ * open actions reach the engine's action services and router. A host whose
+ * ember-ui predates the registry has no `resource-registry` service, and
+ * the identity components simply fall back to text.
+ */
+export function initialize(engineInstance) {
+    let registry;
+
+    try {
+        registry = engineInstance.lookup('service:resource-registry');
+    } catch {
+        registry = null;
+    }
+
+    if (!registry || typeof registry.registerDescriptors !== 'function') {
+        return;
+    }
+
+    registry.registerDescriptors(buildFleetOpsResourceDescriptors(engineInstance));
+}
+
+export default {
+    name: 'register-fleetops-resource-descriptors',
+    initialize,
+};

package/addon/modifiers/inspection-flyout.js

@@ -0,0 +1,237 @@
+import { modifier } from 'ember-modifier';
+
+/** Room left between the flyout and its field, and between it and the sheet's edge. */
+const GAP = 8;
+const EDGE = 8;
+
+/** The nearest ancestor that actually scrolls, or null for the window. */
+function scrollParentOf(element) {
+    let node = element?.parentElement;
+
+    while (node && node !== document.body) {
+        const { overflowY } = getComputedStyle(node);
+
+        if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) {
+            return node;
+        }
+
+        node = node.parentElement;
+    }
+
+    return null;
+}
+
+/**
+ * Place a floating flyout against its field.
+ *
+ * Both live inside the same sheet, so they scroll together and nothing has to
+ * follow the scroll. The flyout goes below the field unless only the visible
+ * space above it can hold it, is kept inside the sheet horizontally, and
+ * points its caret at the field's Fail button.
+ */
+export function placeFlyout(element, anchor, container) {
+    const containerRect = container.getBoundingClientRect();
+    const anchorRect = anchor.getBoundingClientRect();
+    const width = element.offsetWidth;
+    const height = element.offsetHeight;
+
+    const scroller = scrollParentOf(anchor);
+    const viewTop = scroller ? scroller.getBoundingClientRect().top : 0;
+    const viewBottom = scroller ? scroller.getBoundingClientRect().bottom : window.innerHeight;
+
+    const fitsBelow = viewBottom - anchorRect.bottom >= height + GAP;
+    const fitsAbove = anchorRect.top - viewTop >= height + GAP;
+
+    // Below, unless only the space above can hold it. Whatever hangs below a
+    // field can always be scrolled to — an absolutely placed panel extends
+    // the scroll area — but a panel pushed above the start of the sheet
+    // cannot be reached at all, so "more room above" is not reason enough.
+    const below = fitsBelow || !fitsAbove;
+
+    const top = below ? anchorRect.bottom - containerRect.top + GAP : anchorRect.top - containerRect.top - height - GAP;
+
+    const maxLeft = Math.max(EDGE, container.clientWidth - width - EDGE);
+    const left = Math.max(EDGE, Math.min(anchorRect.left - containerRect.left, maxLeft));
+
+    element.style.top = `${Math.round(top)}px`;
+    element.style.left = `${Math.round(left)}px`;
+    element.dataset.placement = below ? 'bottom' : 'top';
+
+    const pointAt = anchor.querySelector('[data-answer="fail"]') ?? anchor;
+    const pointRect = pointAt.getBoundingClientRect();
+    const caret = pointRect.left + pointRect.width / 2 - containerRect.left - left;
+
+    element.style.setProperty('--flyout-caret-x', `${Math.round(Math.max(16, Math.min(caret, width - 16)))}px`);
+
+    // Where it now sits, worked out from layout rather than read off its
+    // rendered box: the open animation is still translating it, and a reveal
+    // measured from the moving box stops exactly that many pixels short.
+    const flyoutTop = containerRect.top + top;
+
+    return { placement: below ? 'bottom' : 'top', flyoutTop, flyoutBottom: flyoutTop + height, viewTop, viewBottom, scroller };
+}
+
+/**
+ * Scroll just enough to bring a newly opened flyout fully into view, keeping
+ * a small margin from the edge. If it is taller than the view, its top — the
+ * title, and the first thing to answer — is what stays in view. Returns how
+ * far it scrolled.
+ */
+export function revealFlyout({ flyoutTop, flyoutBottom, viewTop, viewBottom, scroller }) {
+    let delta = 0;
+
+    if (flyoutBottom + EDGE > viewBottom) {
+        delta = flyoutBottom + EDGE - viewBottom;
+    }
+
+    if (flyoutTop - delta - EDGE < viewTop) {
+        delta = flyoutTop - EDGE - viewTop;
+    }
+
+    if (Math.abs(delta) < 1) {
+        return 0;
+    }
+
+    const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    (scroller ?? window).scrollBy({ top: delta, behavior: reduce ? 'auto' : 'smooth' });
+
+    return delta;
+}
+
+/**
+ * Run something once the flyout's opening animation has finished.
+ *
+ * The animation translates the panel, and a translated box changes the
+ * scrollable area: a reveal worked out mid-animation is clamped against a
+ * scroll area that is briefly too short, and lands short by exactly the
+ * animated offset. Without an animation — reduced motion — it runs at once.
+ * Returns a timer to clear on teardown.
+ */
+function afterOpening(element, callback) {
+    const style = getComputedStyle(element);
+    const seconds = parseFloat(style.animationDuration) || 0;
+
+    if (style.animationName === 'none' || seconds === 0) {
+        callback();
+        return null;
+    }
+
+    let done = false;
+    const finish = () => {
+        if (done) {
+            return;
+        }
+
+        done = true;
+        element.removeEventListener('animationend', finish);
+        callback();
+    };
+
+    element.addEventListener('animationend', finish);
+
+    // In case the event never comes: a hidden tab, an interrupted animation.
+    return setTimeout(finish, seconds * 1000 + 50);
+}
+
+/**
+ * Keep a defect flyout attached to its field, and close it the natural way.
+ *
+ *     <div {{inspection-flyout this.anchor presentation="floating" onDismiss=this.dismiss}}>
+ *
+ * It closes on a press outside itself and outside its own field, and on
+ * Escape. It deliberately does not close on blur or on scroll: focus leaves
+ * the page for the native photo picker, and scrolling moves the flyout with
+ * its field anyway. Nothing is lost by closing, because every answer is saved
+ * as it is typed.
+ *
+ * A bottom sheet is placed by its stylesheet, so it only takes the
+ * dismissal half of this.
+ */
+export default modifier(function inspectionFlyout(element, [anchor], { presentation = 'floating', onDismiss, focus } = {}) {
+    if (!(anchor instanceof Element)) {
+        return;
+    }
+
+    const container = anchor.closest('.inspection-sheet') ?? document.body;
+    const floating = presentation === 'floating';
+    let frame = null;
+    let revealed = false;
+    let revealTimer = null;
+
+    const place = () => {
+        if (!floating || !element.isConnected || !anchor.isConnected) {
+            return;
+        }
+
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+            placeFlyout(element, anchor, container);
+
+            // A panel that opens half off the page is not natural. Bring it
+            // into view once, by the least scroll that will do it, as soon as
+            // it has finished opening; after that the inspector is in charge
+            // of the scrolling.
+            if (!revealed) {
+                revealed = true;
+                revealTimer = afterOpening(element, () => {
+                    if (element.isConnected && anchor.isConnected) {
+                        revealFlyout(placeFlyout(element, anchor, container));
+                    }
+                });
+            }
+        });
+    };
+
+    const dismiss = (reason) => {
+        if (typeof onDismiss === 'function') {
+            onDismiss(reason);
+        }
+    };
+
+    // A press anywhere but the flyout or its own field closes it. Pointerdown,
+    // not click, so pressing another field's Fail closes this one first.
+    const onPointerDown = (event) => {
+        const target = event.target;
+
+        if (element.contains(target) || anchor.contains(target)) {
+            return;
+        }
+
+        dismiss('outside');
+    };
+
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            dismiss('escape');
+        }
+    };
+
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('keydown', onKeyDown, true);
+    window.addEventListener('resize', place);
+
+    // Re-place when anything around it changes height: a field above it
+    // gaining a line, or the flyout itself growing as a photo is added.
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(place) : null;
+    observer?.observe(container);
+    observer?.observe(element);
+
+    place();
+
+    if (focus) {
+        requestAnimationFrame(() => {
+            const target = focus === true ? element : element.querySelector(focus);
+            target?.focus({ preventScroll: true });
+        });
+    }
+
+    return () => {
+        cancelAnimationFrame(frame);
+        clearTimeout(revealTimer);
+        document.removeEventListener('pointerdown', onPointerDown, true);
+        document.removeEventListener('keydown', onKeyDown, true);
+        window.removeEventListener('resize', place);
+        observer?.disconnect();
+    };
+});

package/addon/modifiers/radar-keyboard.js

@@ -0,0 +1,78 @@
+import { modifier } from 'ember-modifier';
+
+/**
+ * The Radar keyboard layer: j/k move, x selects, e acknowledges, s snoozes,
+ * a assigns, Enter opens the record, Escape closes what is open.
+ *
+ * Keys are ignored while the user is typing in a field or a modal or
+ * overlay is open, so the list never steals a keystroke from a form.
+ * `handlers` is a hash of key => function; a missing key is ignored.
+ */
+const KEYS = {
+    j: 'next',
+    k: 'previous',
+    ArrowDown: 'next',
+    ArrowUp: 'previous',
+    x: 'select',
+    e: 'acknowledge',
+    s: 'snooze',
+    a: 'assign',
+    Enter: 'open',
+    Escape: 'close',
+    '/': 'search',
+};
+
+export function isTypingTarget(target) {
+    if (!target || typeof target.closest !== 'function') {
+        return false;
+    }
+
+    if (target.isContentEditable) {
+        return true;
+    }
+
+    const tag = (target.tagName || '').toLowerCase();
+    if (['input', 'textarea', 'select'].includes(tag)) {
+        return true;
+    }
+
+    return Boolean(target.closest('.ember-basic-dropdown-content, .modal, .next-content-overlay-panel, [role="dialog"], .ember-power-select-dropdown'));
+}
+
+export default modifier(function radarKeyboard(element, [handlers = {}], { enabled = true } = {}) {
+    const onKeydown = (event) => {
+        if (!enabled || event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+
+        // A letter arrives as typed; the map is lowercase.
+        const key = typeof event.key === 'string' && event.key.length === 1 ? event.key.toLowerCase() : event.key;
+        const name = KEYS[key];
+        if (!name) {
+            return;
+        }
+
+        // "/" focuses the search even from a field; every other key only
+        // fires when the user is not typing.
+        if (name !== 'search' && isTypingTarget(event.target)) {
+            return;
+        }
+        if (name === 'search' && isTypingTarget(event.target)) {
+            return;
+        }
+
+        const handler = handlers[name];
+        if (typeof handler !== 'function') {
+            return;
+        }
+
+        event.preventDefault();
+        handler(event);
+    };
+
+    document.addEventListener('keydown', onKeydown);
+
+    return () => {
+        document.removeEventListener('keydown', onKeydown);
+    };
+});

package/addon/modifiers/sync-value.js

@@ -0,0 +1,26 @@
+import { modifier } from 'ember-modifier';
+
+/**
+ * Keep an input's value in step with a bound one, without taking the caret.
+ *
+ * Binding `value={{@value}}` on an input whose every keystroke re-renders the
+ * component sends the caret to the end mid-word, which is what made the form
+ * builder's group inputs unusable. Leaving the value unbound instead means an
+ * input never shows a value that arrives after it was rendered — the stored
+ * answers an inspection loads a moment after the sheet appears.
+ *
+ * So write the value in, and only while the field is not being typed in.
+ *
+ *     <input {{sync-value @value}} {{on "input" this.setText}} />
+ */
+export default modifier(function syncValue(element, [value]) {
+    if (element.ownerDocument?.activeElement === element) {
+        return;
+    }
+
+    const next = value === null || value === undefined ? '' : String(value);
+
+    if (element.value !== next) {
+        element.value = next;
+    }
+});

package/addon/modifiers/when-changed.js

@@ -0,0 +1,25 @@
+import { modifier } from 'ember-modifier';
+
+/** No value has been seen for this element yet — distinct from `undefined`. */
+const NEVER = Symbol('never');
+const seen = new WeakMap();
+
+/**
+ * Run something when a value changes, but not when it first appears.
+ *
+ * `{{did-update}}` does this and is deprecated for it. The distinction it does
+ * not make, and this does, is between the first render and a later change: a
+ * component that already loads its own data on construction must not load it
+ * again the moment it is inserted.
+ *
+ *     <div {{when-changed @reloadOn this.reload}}>
+ */
+export default modifier(function whenChanged(element, [value, callback]) {
+    const previous = seen.has(element) ? seen.get(element) : NEVER;
+
+    seen.set(element, value);
+
+    if (previous !== NEVER && previous !== value && typeof callback === 'function') {
+        callback(value);
+    }
+});

package/addon/routes/connectivity/fuel-providers/details/settings.js

@@ -1,7 +1,10 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class ConnectivityFuelProvidersIndexDetailsSettingsRoute extends Route {
-    model() {
-        return this.modelFor('connectivity.fuel-providers.details');
+    @service hostRouter;
+
+    redirect() {
+        return this.hostRouter.replaceWith('console.fleet-ops.connectivity.fuel-providers.edit', this.modelFor('connectivity.fuel-providers.details'));
     }
 }

package/addon/routes/connectivity/fuel-providers/details/sync.js

@@ -1,18 +1,11 @@
 import Route from '@ember/routing/route';
-import { inject as service } from '@ember/service';
-
-export default class ConnectivityFuelProvidersIndexDetailsSyncRoute extends Route {
-    @service store;
 
+export default class FuelIntegrationSyncRoute extends Route {
+    setupController(controller, model) {
+        super.setupController(controller, model);
+        controller.resetDates();
+    }
     model() {
-        const connection = this.modelFor('connectivity.fuel-providers.details');
-
-        return {
-            connection,
-            syncRuns: this.store.query('fuel-provider-sync-run', {
-                connection: connection.uuid,
-                sort: '-created_at',
-            }),
-        };
+        return this.modelFor('connectivity.fuel-providers.details');
     }
 }

package/addon/routes/connectivity/fuel-providers/details/transactions.js

@@ -1,14 +1,15 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
-export default class ConnectivityFuelProvidersIndexDetailsTransactionsRoute extends Route {
+export default class FuelIntegrationTransactionsRoute extends Route {
     @service store;
-
-    model() {
+    queryParams = Object.fromEntries(['page', 'limit', 'sort', 'query', 'sync_status', 'vehicle', 'transaction_at'].map((key) => [key, { refreshModel: true }]));
+    model(params) {
         const connection = this.modelFor('connectivity.fuel-providers.details');
-        return this.store.query('fuel-provider-transaction', {
-            connection: connection.uuid,
-            sort: '-transaction_at',
-        });
+        return this.store.query('fuel-provider-transaction', { ...params, connection: connection.id });
+    }
+    @action refreshFuelTransactions() {
+        this.refresh();
     }
 }

package/addon/routes/connectivity/fuel-providers/details.js

@@ -7,12 +7,25 @@ export default class ConnectivityFuelProvidersIndexDetailsRoute extends Route {
     @service notifications;
     @service hostRouter;
 
+    setupController(controller, model) {
+        super.setupController(controller, model);
+        controller.activity = null;
+        controller.activityError = null;
+        controller.watchActivity.perform();
+    }
+
+    deactivate() {
+        this.controller.watchActivity.cancelAll();
+    }
+
     @action error(error) {
         this.notifications.serverError(error);
-        return this.hostRouter.transitionTo('console.fleet-ops.connectivity.fuel-providers.index');
+        if (error?.errors?.some((entry) => entry.status === '404')) return this.hostRouter.transitionTo('console.fleet-ops.connectivity.fuel-providers.index');
+        return false;
     }
 
     model({ public_id }) {
-        return this.store.findRecord('fuel-provider-connection', public_id);
+        // URLs use public IDs; the store's primary key is the API UUID.
+        return this.store.queryRecord('fuel-provider-connection', { public_id, single: true });
     }
 }

package/addon/routes/connectivity/fuel-providers/edit.js

@@ -13,6 +13,7 @@ export default class ConnectivityFuelProvidersIndexEditRoute extends Route {
     }
 
     model({ public_id }) {
-        return this.store.findRecord('fuel-provider-connection', public_id);
+        // URLs use public IDs; the store's primary key is the API UUID.
+        return this.store.queryRecord('fuel-provider-connection', { public_id, single: true });
     }
 }