@fleetbase/fleetops-engine 0.6.60 → 0.6.61

package/RELEASE.md

@@ -1,34 +1,23 @@
-> v0.6.60 ~ "Closes an authentication bypass, and clears a run of API 500s"
+> v0.6.61 ~ "A grid view for drivers, a sequenceable order flow, and two silent API no-ops closed"
 
 ---
 ## Highlights
-A security fix and a broad sweep of public API defects surfaced by running the official Postman collection against a live stack. Several endpoints answered `500` where a `404` or `422` belonged, and a few were unreachable entirely.
+Two API defects in this release were silent: both answered `200` and neither did what the caller asked. A vehicle odometer update was discarded, and a driver-scoped list came back unscoped. Alongside them, the order config flow now publishes enough of its shape to be sequenced, and Drivers Management gains a card layout.
 
 ---
-## Security
-- **Closed a verify-code authentication bypass in the driver flow.** Please upgrade.
-- The non-production verification-code bypass is now scoped to explicitly designated review accounts, so a bypass code alone is not enough — the identity has to be on the allowlist too.
+## Features
+- **Drivers Management has a card view.** A layout toggle switches the index between the table and a card grid, and the choice is remembered across visits.
+- **The order config flow publishes its graph.** `activities`, `sequence` and `logic` now ride along with each activity, so a consumer can order the flow and offer a next step instead of rendering an unordered set. Transitions are normalised to a list of codes regardless of which of the two stored shapes a flow was authored in.
 
 ---
 ## Bug Fixes
-- **Driver `register-device` was unreachable on both driver routes.** Laravel never injects a class-typed parameter that declares a default, so the injected request was always null.
-- **Geofence driver history asked for a UUID the API never issues.** It now resolves the driver by the public id callers actually hold.
-- **`/from-qr` returned a 500**, and the QR code's content is now published in debug mode so the flow can be exercised.
-- **Fuel reports could not be created without a location**, and could not be updated.
-- **A sensor could not be created at all** — `last_position` had no default.
-- **Customer signup with a place failed** — the Place location now defaults.
-- Unknown onboard organization answers `404` instead of `500`.
-- Duplicate part SKU and fuel transaction answer `422` instead of `500`.
-- Restored the vehicle maintenance schedule workflows.
+- **`PUT /v1/vehicles/{id}` silently discarded the odometer.** The field is fillable on the model but was missing from the controller's input projection, so a driver app recording mileage received a `200` and a correct-looking body while the reading was dropped. `odometer` and `odometer_unit` are now accepted and validated.
+- **Issue and fuel-report lists scoped by `driver_uuid` came back scoped by nothing.** The base filter silently ignores a query parameter it cannot match to a method, so the filter was dropped and the response was narrowed only by company — every driver's records, with no sign the request had been narrowed at all. `driver_uuid`, `driver_assigned` and `vehicle_uuid` are now recognised on both filters.
+- **Leaflet marker icons are served from the leaflet package** rather than resolving to a broken URL.
 
 ---
 ## Testing
-- Coverage restored to 100% across the QR, geofence, driver auth, customer request and navigator changes.
-
----
-## Continuous Integration
-- The server, Ember and Postman workflows now run on `dev-v*` release branches.
-- The contract run tests this branch's API code rather than the published package.
+- Coverage held at 100% across the vehicle input projection, both driver-scoped filters, and the order config flow projection.
 
 ---
 ## Need help?

package/addon/components/ai/route-preview-map.js

@@ -168,11 +168,7 @@ export default class AiRoutePreviewMapComponent extends Component {
     get tileUrl() {
         const theme = document.body?.dataset?.theme;
 
-        if (theme === 'dark') {
-            return 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
-        }
-
-        return 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
+        return this.mapSettings.getLeafletTileUrl(theme === 'dark' ? 'dark' : 'light');
     }
 
     get emptyText() {

package/addon/components/customer/orders.js

@@ -9,6 +9,7 @@ import { debug } from '@ember/debug';
 import { task, timeout } from 'ember-concurrency';
 import { Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
 import engineService from '@fleetbase/ember-core/decorators/engine-service';
+import { DEFAULT_LEAFLET_TILE_URL } from '../../utils/leaflet-tile-url';
 import registerComponent from '@fleetbase/ember-core/utils/register-component';
 import OrderProgressCardComponent from '../order-progress-card';
 import DisplayPlaceComponent from '../display-place';
@@ -38,7 +39,7 @@ export default class CustomerOrdersComponent extends Component {
     @tracked longitude;
     @tracked route;
     @tracked query;
-    @tracked tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
+    @tracked tileSourceUrl = DEFAULT_LEAFLET_TILE_URL;
     @tracked scheduledAt;
     @tracked deliveryInstructions = {};
 

package/addon/components/driver/card.hbs

@@ -0,0 +1,49 @@
+<Layout::Resource::Card ...attributes as |Card|>
+    <Card.header class="{{@headerClass}}">
+        <RegistryYield @registry="fleet-ops:component:driver:card:header:start" as |RegistryComponent|>
+            <RegistryComponent @order={{@resource}} @resource={{@resource}} />
+        </RegistryYield>
+        <div class="flex items-center w-full min-w-0">
+            <div class="font-semibold flex-1 truncate" data-test-driver-name>{{or @resource.name @resource.display_name}}</div>
+            <FaIcon @icon="circle" @size="xs" class="ml-2 flex-none {{if @resource.online 'text-green-500' 'text-gray-400'}}" data-test-driver-online-indicator />
+        </div>
+        <div class="text-gray-400 dark:text-gray-500 text-sm w-full truncate">{{n-a @resource.phone @resource.public_id}}</div>
+        {{#if (has-block "header")}}
+            {{yield to="header"}}
+        {{/if}}
+        <RegistryYield @registry="fleet-ops:component:driver:card:header:end" as |RegistryComponent|>
+            <RegistryComponent @order={{@resource}} @resource={{@resource}} />
+        </RegistryYield>
+    </Card.header>
+    <Card.body class="{{@bodyClass}} h-40 overflow-hidden">
+        <Image src={{avatar-url @resource.photo_url}} @fallbackSrc={{this.fallbackImage}} class="block w-full h-full object-cover rounded-none" data-test-driver-photo />
+        {{#if (has-block "body")}}
+            {{yield to="body"}}
+        {{/if}}
+    </Card.body>
+    <Card.footer class={{@footerClass}}>
+        <RegistryYield @registry="fleet-ops:component:driver:card:footer:start" as |RegistryComponent|>
+            <RegistryComponent @order={{@resource}} @resource={{@resource}} />
+        </RegistryYield>
+        <div class="flex flex-row items-center justify-between w-full">
+            <Badge @status={{or this.statusValue "default"}} @size="xs" data-test-driver-status-badge>{{this.statusLabel}}</Badge>
+            <div class="flex flex-row items-center space-x-1">
+                <Button @icon="eye" @size="xs" @onClick={{fn this.driverActions.transition.view @resource}} />
+                <Button @icon="pencil" @size="xs" @onClick={{fn this.driverActions.transition.edit @resource}} />
+                <Button @icon="trash" @size="xs" @type="danger" @onClick={{fn this.driverActions.delete @resource}} />
+            </div>
+        </div>
+        <RegistryYield @registry="fleet-ops:component:driver:card:footer:end" as |RegistryComponent|>
+            <RegistryComponent @order={{@resource}} @resource={{@resource}} />
+        </RegistryYield>
+        {{#if (has-block "footer")}}
+            {{yield to="footer"}}
+        {{/if}}
+        <div class="mt-1.5 w-full">
+            <div class="text-gray-400 dark:text-gray-500 text-xs truncate">
+                <FaIcon @icon="car" @prefix="fas" class="mr-1" />{{n-a this.assignedVehicleLabel}}
+            </div>
+            <div class="text-gray-400 dark:text-gray-500 text-xs">Last Modified: {{@resource.updatedAt}}</div>
+        </div>
+    </Card.footer>
+</Layout::Resource::Card>

package/addon/components/driver/card.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { get } from '@ember/object';
+import config from 'ember-get-config';
+
+export default class DriverCardComponent extends Component {
+    @service driverActions;
+
+    get resource() {
+        return this.args.resource;
+    }
+
+    get fallbackImage() {
+        return config?.defaultValues?.driverImage;
+    }
+
+    get statusValue() {
+        return get(this.resource, 'status') ?? '';
+    }
+
+    get statusLabel() {
+        return this.statusValue || '-';
+    }
+
+    get assignedVehicleLabel() {
+        const driver = this.resource;
+
+        return get(driver, 'vehicle_assigned.display_name') ?? get(driver, 'vehicle.display_name') ?? get(driver, 'vehicle_name');
+    }
+}

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

@@ -48,7 +48,6 @@ export default class MapLeafletLiveMapComponent extends Component {
     @tracked latitude = this.location.getLatitude();
     @tracked longitude = this.location.getLongitude();
     @tracked contextmenuItems = [];
-    @tracked tileUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
     @tracked theme = 'light';
     @tracked routes = [];
     @tracked drivers = [];
@@ -57,6 +56,10 @@ export default class MapLeafletLiveMapComponent extends Component {
     @tracked leafletPluginsReady = hasLeafletPluginsReady();
     _viewportReloadLocks = new Set();
 
+    get tileUrl() {
+        return this.mapSettings.getLeafletTileUrl(this.theme);
+    }
+
     constructor() {
         super(...arguments);
 
@@ -888,22 +891,4 @@ export default class MapLeafletLiveMapComponent extends Component {
         // Fallback to default Singapore longitude
         return 103.8864;
     }
-
-    #changeTileSource(source) {
-        switch (source) {
-            case 'dark':
-                this.theme = 'dark';
-                this.tileUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
-                break;
-            case 'custom':
-                this.theme = 'custom';
-                this.tileUrl = source.startsWith('https://') ? source : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
-                break;
-            case 'light':
-            default:
-                this.theme = 'light';
-                this.tileUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
-                break;
-        }
-    }
 }

package/addon/components/modals/place-details.hbs

@@ -3,7 +3,7 @@
         <div class="flex">
             <div class="w-48 mb-6 mr-6">
                 <LeafletMap class="w-full h-48 mb-2 rounded-md shadow-md" @lat={{@options.place.latitude}} @lng={{@options.place.longitude}} @zoom={{12}} as |layers|>
-                    <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
+                    <layers.tile @url={{leaflet-tile-url}} />
 
                     <layers.marker @location={{@options.place.coordinates}} />
                 </LeafletMap>

package/addon/components/modals/point-map.hbs

@@ -1,7 +1,7 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="fleetbase-leaflet-map-container">
         <LeafletMap class="map-height-base" @lat={{@options.latitude}} @lng={{@options.longitude}} @zoom={{12}} as |layers|>
-            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
+            <layers.tile @url={{leaflet-tile-url}} />
 
             <layers.marker @icon={{@options.icon}} @location={{point-to-coordinates @options.location}} @riseOnHover={{true}} as |marker|>
                 <marker.popup @maxWidth="500" @minWidth="180">

package/addon/components/orchestrator-workbench.js

@@ -36,6 +36,7 @@ export default class OrchestratorWorkbenchComponent extends Component {
     @service modalsManager;
     @service location;
     @service mapManager;
+    @service mapSettings;
     @service routeEngine;
     @service('order-allocation') allocationService;
 
@@ -661,7 +662,7 @@ export default class OrchestratorWorkbenchComponent extends Component {
 
     get tileSourceUrl() {
         const isDark = document.documentElement.classList.contains('dark');
-        return isDark ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png' : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
+        return this.mapSettings.getLeafletTileUrl(isDark ? 'dark' : 'light');
     }
 
     // ── Computed helpers ──────────────────────────────────────────────────────

package/addon/components/order/form/route.js

@@ -5,6 +5,7 @@ import { action, get } from '@ember/object';
 import { task } from 'ember-concurrency';
 import { colorForId, routeColorForStatus, routeStyleForStatus } from '../../../utils/route-colors';
 import { buildRoutePointMarkerPresentation, buildRoutePointsFromPayload, describeRoutePoint } from '../../../utils/route-visualization';
+import preparePlaceForSave from '../../../utils/prepare-place-for-save';
 
 const ORDER_ROUTE_PREVIEW_PADDING_BOTTOM_RIGHT = [420, 0];
 const ORDER_ROUTE_PREVIEW_MAX_ZOOM_TWO_POINTS = 13;
@@ -153,6 +154,7 @@ export default class OrderFormRouteComponent extends Component {
     @action setWaypointPlace(index, place) {
         if (!this.args.resource.payload.waypoints[index]) return;
 
+        place = preparePlaceForSave(this.store, place);
         this.args.resource.payload.waypoints[index].place = place;
         this.args.resource.payload.waypoints[index]?.setProperties({
             street1: place.street1,
@@ -186,6 +188,7 @@ export default class OrderFormRouteComponent extends Component {
     }
 
     @action setPayloadPlace(prop, place) {
+        place = preparePlaceForSave(this.store, place);
         this.args.resource.payload[prop] = place;
         this.previewRoute();
         this.requestServiceQuoteRefresh(`route.${prop}.changed`);

package/addon/components/order-tracking-lookup.js

@@ -10,6 +10,7 @@ import { task } from 'ember-concurrency';
 import { OSRMv1, Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
 import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
 import engineService from '@fleetbase/ember-core/decorators/engine-service';
+import { DEFAULT_LEAFLET_TILE_URL } from '../utils/leaflet-tile-url';
 
 export default class OrderTrackingLookupComponent extends Component {
     @service urlSearchParams;
@@ -28,7 +29,7 @@ export default class OrderTrackingLookupComponent extends Component {
     @tracked latitude;
     @tracked longitude;
     @tracked route;
-    @tracked tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
+    @tracked tileSourceUrl = DEFAULT_LEAFLET_TILE_URL;
 
     constructor() {
         super(...arguments);

package/addon/components/place/details.hbs

@@ -75,7 +75,7 @@
             @zoomControl={{false}}
             as |layers|
         >
-            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
+            <layers.tile @url={{leaflet-tile-url}} />
             <layers.marker
                 @id={{@resource.id}}
                 @icon={{icon iconUrl=(or @resource.avatar_url "/engines-dist/images/building-marker.png") iconSize=(array 40 40)}}

package/addon/components/positions-replay.js

@@ -15,6 +15,7 @@ export default class PositionsReplayComponent extends Component {
     @service positionPlayback;
     @service notifications;
     @service location;
+    @service mapSettings;
 
     /** Component ID */
     id = guidFor(this);
@@ -29,7 +30,9 @@ export default class PositionsReplayComponent extends Component {
     @tracked latitude = this.args.resource.latitude || this.location.getLatitude();
     @tracked longitude = this.args.resource.longitude || this.location.getLongitude();
     @tracked zoom = 14;
-    @tracked tileUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
+    get tileUrl() {
+        return this.mapSettings.getLeafletTileUrl('light');
+    }
 
     /** Computed properties - read state from service */
     get isReplaying() {

package/addon/components/service-area/details.hbs

@@ -27,7 +27,7 @@
             @zoomControl={{false}}
             as |layers|
         >
-            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
+            <layers.tile @url={{leaflet-tile-url}} />
             <layers.polygon
                 @id={{@resource.id}}
                 @record={{@resource}}

package/addon/components/widget/live-fleet.js

@@ -8,15 +8,11 @@ import { task } from 'ember-concurrency';
 import { renderCompleted, waitForInsertedAndSized } from '@fleetbase/ember-ui/utils/dom';
 import LeafletTrackingMarkerComponent from '../leaflet-tracking-marker';
 import ensureLeafletDrawEditNamespace from '../../utils/leaflet-draw-namespace-guard';
+import { DEFAULT_LEAFLET_TILE_ATTRIBUTION } from '../../utils/leaflet-tile-url';
 
 const DEFAULT_CENTER = [1.31, 103.85];
 const DEFAULT_ZOOM = 11;
-// Match the rest of fleetops' Leaflet maps (light Carto basemap), which keeps the
-// dashboard styling consistent with the operational live map. Falls back gracefully
-// in dark mode via the next-leaflet-container-map theming.
-const TILE_URL = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
-const TILE_URL_DARK = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png';
-const TILE_ATTRIBUTION = '© OpenStreetMap contributors © CARTO';
+const TILE_ATTRIBUTION = DEFAULT_LEAFLET_TILE_ATTRIBUTION;
 const RECONCILE_INTERVAL_MS = 5 * 60_000;
 
 /**
@@ -30,6 +26,7 @@ export default class WidgetLiveFleetComponent extends Component {
     @service fetch;
     @service socket;
     @service currentUser;
+    @service mapSettings;
 
     @tracked data = null;
     @tracked error = null;
@@ -38,7 +35,7 @@ export default class WidgetLiveFleetComponent extends Component {
 
     get tileUrl() {
         const isDark = typeof document !== 'undefined' && document.documentElement?.dataset?.theme === 'dark';
-        return isDark ? TILE_URL_DARK : TILE_URL;
+        return this.mapSettings.getLeafletTileUrl(isDark ? 'dark' : 'light');
     }
 
     socketChannel = null;
@@ -78,6 +75,9 @@ export default class WidgetLiveFleetComponent extends Component {
         this.#ensureTrackingMarkerRegistered();
         this.#patchLeafletDrawInitHook();
         this.#resetMapDeferred();
+        // Widgets can render before the fleetops engine boots, so make sure the
+        // company's map settings (custom tile provider URL) are loaded.
+        this.mapSettings.load();
         this.load.perform();
         this.subscribe();
         this.reconcileTimer = setInterval(() => this.load.perform(), RECONCILE_INTERVAL_MS);

package/addon/components/zone/details.hbs

@@ -22,7 +22,7 @@
             @zoomControl={{false}}
             as |layers|
         >
-            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
+            <layers.tile @url={{leaflet-tile-url}} />
             <layers.polygon
                 @id={{@resource.id}}
                 @record={{@resource}}

package/addon/controllers/management/drivers/index.js

@@ -12,6 +12,7 @@ export default class ManagementDriversIndexController extends Controller {
     @service notifications;
     @service tableContext;
     @service intl;
+    @service appCache;
 
     /** query params */
     @tracked queryParams = [
@@ -45,7 +46,7 @@ export default class ManagementDriversIndexController extends Controller {
     @tracked status;
     @tracked created_at;
     @tracked updated_at;
-    @tracked layout = 'table';
+    @tracked layout = this.appCache.get('fleetops:drivers:layout', 'table');
     @tracked table;
 
     hasAssignedVehicle(driver) {
@@ -71,6 +72,25 @@ export default class ManagementDriversIndexController extends Controller {
     /** action buttons */
     get actionButtons() {
         return [
+            {
+                component: 'dropdown-button',
+                icon: 'display',
+                size: 'xs',
+                items: [
+                    {
+                        label: this.intl.t('common.table-view'),
+                        icon: 'table-list',
+                        onClick: () => this.changeLayout('table'),
+                    },
+                    {
+                        label: this.intl.t('common.grid-view'),
+                        icon: 'grip',
+                        onClick: () => this.changeLayout('grid'),
+                    },
+                ],
+                renderInPlace: true,
+                helpText: 'Change the layout',
+            },
             {
                 icon: 'refresh',
                 onClick: this.driverActions.refresh,
@@ -377,6 +397,7 @@ export default class ManagementDriversIndexController extends Controller {
 
     @action changeLayout(layout) {
         this.layout = layout;
+        this.appCache.set('fleetops:drivers:layout', layout);
     }
 
     @action createIssue(driver) {

package/addon/controllers/settings/map.js

@@ -33,6 +33,8 @@ export default class SettingsMapController extends Controller {
      * @var {String}
      */
     @tracked mapProvider = 'leaflet';
+    @tracked leafletTileUrl = '';
+    @tracked leafletDarkTileUrl = '';
     @tracked googleMapsMapType = 'roadmap';
     @tracked showGoogleMapsTrafficLayer = false;
     @tracked showGoogleMapsTransitLayer = false;
@@ -62,6 +64,16 @@ export default class SettingsMapController extends Controller {
         return this.mapProvider === 'google';
     }
 
+    /**
+     * True when the user has selected Leaflet as the provider.
+     *
+     * @memberof SettingsMapController
+     * @return {Boolean}
+     */
+    get isLeafletSelected() {
+        return this.mapProvider === 'leaflet';
+    }
+
     // ─── Actions ───────────────────────────────────────────────────────────────
 
     /**
@@ -77,6 +89,8 @@ export default class SettingsMapController extends Controller {
     @task *saveSettings() {
         const settings = {
             mapProvider: this.mapProvider,
+            leafletTileUrl: (this.leafletTileUrl ?? '').trim(),
+            leafletDarkTileUrl: (this.leafletDarkTileUrl ?? '').trim(),
             googleMapsMapType: this.googleMapsMapType,
             showGoogleMapsTrafficLayer: this.showGoogleMapsTrafficLayer,
             showGoogleMapsTransitLayer: this.showGoogleMapsTransitLayer,
@@ -105,6 +119,8 @@ export default class SettingsMapController extends Controller {
             const response = yield this.mapSettings.load({ force: true });
 
             this.mapProvider = response?.mapProvider ?? 'leaflet';
+            this.leafletTileUrl = response?.leafletTileUrl ?? '';
+            this.leafletDarkTileUrl = response?.leafletDarkTileUrl ?? '';
             this.googleMapsMapType = response?.googleMapsMapType ?? 'roadmap';
             this.showGoogleMapsTrafficLayer = Boolean(response?.showGoogleMapsTrafficLayer);
             this.showGoogleMapsTransitLayer = Boolean(response?.showGoogleMapsTransitLayer);

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

@@ -0,0 +1,19 @@
+import Helper from '@ember/component/helper';
+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 theme="dark"}} />
+ *
+ * Recomputes automatically when map settings load or change.
+ */
+export default class LeafletTileUrlHelper extends Helper {
+    @service mapSettings;
+
+    compute(_params, { theme = 'light' } = {}) {
+        return this.mapSettings.getLeafletTileUrl(theme);
+    }
+}

package/addon/services/map-settings.js

@@ -1,9 +1,12 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { getLeafletTileUrl } from '../utils/leaflet-tile-url';
 
 const DEFAULT_SETTINGS = {
     mapProvider: 'leaflet',
+    leafletTileUrl: '',
+    leafletDarkTileUrl: '',
     googleMapsApiKey: '',
     googleMapsMapId: '',
     googleMapsMapType: 'roadmap',
@@ -45,6 +48,25 @@ export default class MapSettingsService extends Service {
         return this.mapProvider === 'google';
     }
 
+    get leafletTileUrl() {
+        return this.getLeafletTileUrl('light');
+    }
+
+    get leafletDarkTileUrl() {
+        return this.getLeafletTileUrl('dark');
+    }
+
+    /**
+     * Resolve the Leaflet tile URL for a theme, preferring the company's
+     * configured custom tile provider and falling back to the keyless default.
+     *
+     * @param {String} theme 'light' or 'dark'
+     * @return {String}
+     */
+    getLeafletTileUrl(theme = 'light') {
+        return getLeafletTileUrl(this.settings, theme);
+    }
+
     async load({ force = false } = {}) {
         if (!force && this.isLoaded) {
             return this.settings;

package/addon/templates/management/drivers/index.hbs

@@ -1,33 +1,67 @@
-<Layout::Resource::Tabular
-    @resource="driver"
-    @title={{t "resource.drivers"}}
-    @searchQuery={{this.query}}
-    @onSearch={{perform this.driverActions.controllerSearchTask this}}
-    @data={{@model}}
-    @columns={{this.columns}}
-    @page={{this.page}}
-    @onPageChange={{fn (mut this.page)}}
-    @setupTable={{fn (mut this.table)}}
-    @actionButtons={{this.actionButtons}}
-    @bulkActions={{this.bulkActions}}
-    @controller={{this}}
-    @emptyStateComponent={{component
-        "table/empty-state"
-        icon="id-card"
-        title="Add your first driver"
-        description="Drivers power dispatching, live fleet visibility, assignments, and delivery activity."
-        filteredTitle="No drivers match your search"
-        filteredDescription="Adjust the search or filters to find another driver."
-        primaryText="New driver"
-        primaryIcon="plus"
-        primaryAction=this.driverActions.transition.create
-        secondaryText="Import"
-        secondaryIcon="upload"
-        secondaryAction=this.driverActions.import
-        docsSlug="fleet-ops/resources/drivers/overview"
-        docsTitle="Drivers guide"
-        docsText="Driver guide"
-        docsSource="fleet-ops-empty-drivers"
-    }}
-/>
-{{outlet}}
+{{#if (eq this.layout "table")}}
+    <Layout::Resource::Tabular
+        @resource="driver"
+        @title={{t "resource.drivers"}}
+        @searchQuery={{this.query}}
+        @onSearch={{perform this.driverActions.controllerSearchTask this}}
+        @data={{@model}}
+        @columns={{this.columns}}
+        @page={{this.page}}
+        @onPageChange={{fn (mut this.page)}}
+        @setupTable={{fn (mut this.table)}}
+        @actionButtons={{this.actionButtons}}
+        @bulkActions={{this.bulkActions}}
+        @controller={{this}}
+        @emptyStateComponent={{component
+            "table/empty-state"
+            icon="id-card"
+            title="Add your first driver"
+            description="Drivers power dispatching, live fleet visibility, assignments, and delivery activity."
+            filteredTitle="No drivers match your search"
+            filteredDescription="Adjust the search or filters to find another driver."
+            primaryText="New driver"
+            primaryIcon="plus"
+            primaryAction=this.driverActions.transition.create
+            secondaryText="Import"
+            secondaryIcon="upload"
+            secondaryAction=this.driverActions.import
+            docsSlug="fleet-ops/resources/drivers/overview"
+            docsTitle="Drivers guide"
+            docsText="Driver guide"
+            docsSource="fleet-ops-empty-drivers"
+        }}
+    />
+{{else}}
+    <Layout::Section::Header @title={{t "resource.drivers"}} @actionsWrapperClass="space-x-1">
+        <Layout::Resource::TabularActions
+            @searchQuery={{this.query}}
+            @onSearch={{perform this.driverActions.controllerSearchTask this}}
+            @columns={{this.columns}}
+            @page={{this.page}}
+            @onPageChange={{fn (mut this.page)}}
+            @setupTable={{fn (mut this.table)}}
+            @actionButtons={{this.actionButtons}}
+            @bulkActions={{this.bulkActions}}
+            @controller={{this}}
+            @hideColumnsPicker={{true}}
+        />
+    </Layout::Section::Header>
+
+    <Layout::Section::Body class="overflow-y-scroll-i h-full">
+        <Layout::Resource::CardsGrid
+            @resource="driver"
+            @data={{@model}}
+            @columns="4"
+            @showPagination={{true}}
+            @page={{this.page}}
+            @onPageChange={{fn (mut this.page)}}
+            @paginationMeta={{@model.meta}}
+            @containerClass="p-4"
+            class="h-full"
+            as |Item|
+        >
+            <Driver::Card @resource={{Item.model}} />
+        </Layout::Resource::CardsGrid>
+    </Layout::Section::Body>
+{{/if}}
+{{outlet}}