@fleetbase/fleetops-engine 0.6.51 → 0.6.53

package/addon/components/maintenance-schedule/form.js

@@ -37,6 +37,7 @@ const MODEL_TO_TYPE = {
 const ASSIGNEE_MODEL_TO_TYPE = {
     'facilitator-vendor': 'fleet-ops:vendor',
     'facilitator-contact': 'fleet-ops:contact',
+    'facilitator-driver': 'fleet-ops:driver',
     'facilitator-integrated-vendor': 'fleet-ops:vendor',
     vendor: 'fleet-ops:vendor',
     contact: 'fleet-ops:contact',

package/addon/components/map/drawer/device-event-listing.hbs

@@ -60,5 +60,15 @@
         {{/if}}
     </div>
 </div>
-<Table @rows={{this.events}} @columns={{this.columns}} />
-<Spacer @height="200px" />
+<Table
+    @rows={{this.events}}
+    @columns={{this.columns}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        variant="compact"
+        icon="bolt"
+        title="No device events"
+        description="Events appear here after connected devices report activity for the selected filters."
+    }}
+/>
+<Spacer @height="200px" />

package/addon/components/map/drawer/driver-listing.hbs

@@ -3,4 +3,17 @@
         <Input @value={{this.query}} @type="text" class="form-input form-input-sm w-60" placeholder={{t "live-map-drawer.driver-listing.message"}} />
     </div>
 </div>
-<Table @rows={{this.filteredDrivers}} @columns={{this.columns}} />
+<Table
+    @rows={{this.filteredDrivers}}
+    @columns={{this.columns}}
+    @searchQuery={{this.query}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        variant="compact"
+        icon="id-card"
+        title="No drivers visible"
+        description="Drivers appear here when they are available in the live map context."
+        filteredTitle="No drivers match this search"
+        filteredDescription="Adjust the search to find another driver."
+    }}
+/>

package/addon/components/map/drawer/place-listing.hbs

@@ -3,4 +3,17 @@
         <Input @value={{this.query}} @type="text" class="form-input form-input-sm w-60" placeholder={{t "live-map-drawer.place-listing.message"}} />
     </div>
 </div>
-<Table @rows={{this.filteredPlaces}} @columns={{this.columns}} />
+<Table
+    @rows={{this.filteredPlaces}}
+    @columns={{this.columns}}
+    @searchQuery={{this.query}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        variant="compact"
+        icon="location-dot"
+        title="No places visible"
+        description="Places appear here when they are available in the current map context."
+        filteredTitle="No places match this search"
+        filteredDescription="Adjust the search to find another place."
+    }}
+/>

package/addon/components/map/drawer/position-listing.hbs

@@ -96,5 +96,15 @@
         </div>
     </div>
 </div>
-<Table @rows={{this.positions}} @columns={{this.columns}} />
-<Spacer @height="400px" />
+<Table
+    @rows={{this.positions}}
+    @columns={{this.columns}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        variant="compact"
+        icon="route"
+        title="No positions loaded"
+        description="Select a trackable and date range to load position history for replay."
+    }}
+/>
+<Spacer @height="400px" />

package/addon/components/map/drawer/vehicle-listing.hbs

@@ -3,4 +3,17 @@
         <Input @value={{this.query}} @type="text" class="form-input form-input-sm w-60" placeholder={{t "live-map-drawer.vehicle-listing.message"}} />
     </div>
 </div>
-<Table @rows={{this.filteredVehicles}} @columns={{this.columns}} />
+<Table
+    @rows={{this.filteredVehicles}}
+    @columns={{this.columns}}
+    @searchQuery={{this.query}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        variant="compact"
+        icon="truck"
+        title="No vehicles visible"
+        description="Vehicles appear here when they are available in the live map context."
+        filteredTitle="No vehicles match this search"
+        filteredDescription="Adjust the search to find another vehicle."
+    }}
+/>

package/addon/components/modals/assigned-orders.hbs

@@ -0,0 +1,40 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
+            <div class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">{{@options.subjectLabel}}</div>
+            <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{{@options.subjectName}}</div>
+            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{t "modals.assigned-orders.help-text" count=@options.orders.length}}</div>
+        </div>
+
+        <div class="space-y-2">
+            {{#each @options.orders as |order|}}
+                <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
+                    <div class="flex items-start gap-3">
+                        <Checkbox
+                            @value={{includes order.id @options.selectedOrderIds}}
+                            @onToggle={{fn @options.toggleOrder order}}
+                            @alignItems="center"
+                            @labelClass="mb-0i"
+                        />
+                        <div class="min-w-0 flex-1">
+                            <div class="flex items-center justify-between gap-2">
+                                <div class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
+                                    {{or order.tracking order.public_id order.id}}
+                                </div>
+                                <div class="flex shrink-0 items-center gap-1">
+                                    {{#if order.is_current_job}}
+                                        <Badge @hideStatusDot={{true}} @status="info">{{t "common.current-job"}}</Badge>
+                                    {{/if}}
+                                    <Badge @hideStatusDot={{true}} @status={{order.status}} />
+                                </div>
+                            </div>
+                            <div class="mt-1 truncate text-xs text-gray-500 dark:text-gray-400">
+                                {{or order.internal_id order.public_id}}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/attach-device.hbs

@@ -1,12 +1,13 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @name={{t "common.select-field" field=(t "resource.device")}} @value={{@options.driver.vehicle_uuid}}>
+        <InputGroup @name={{t "common.select-field" field=(t "resource.device")}} @value={{@options.selectedDevice}}>
             <ModelSelect
                 @modelName="device"
                 @selectedModel={{@options.selectedDevice}}
+                @query={{hash attachment_state="unattached"}}
                 @placeholder={{t "common.select-field" field=(t "resource.device")}}
                 @triggerClass="form-select form-input"
-                @infiniteScroll={{false}}
+                @infiniteScroll={{true}}
                 @renderInPlace={{true}}
                 @onChange={{fn (mut @options.selectedDevice)}}
                 as |model|
@@ -15,4 +16,4 @@
             </ModelSelect>
         </InputGroup>
     </div>
-</Modal::Default>
+</Modal::Default>

package/addon/components/modals/attach-telematic-device.hbs

@@ -0,0 +1,25 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
+            <div class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Synced device</div>
+            <div class="mt-2">
+                <Device::Pill @device={{@options.device}} />
+            </div>
+        </div>
+
+        <InputGroup @name={{t "common.select-field" field=(t "resource.vehicle")}} @value={{@options.selectedVehicle}}>
+            <ModelSelect
+                @modelName="vehicle"
+                @selectedModel={{@options.selectedVehicle}}
+                @placeholder={{t "common.select-field" field=(t "resource.vehicle")}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedVehicle)}}
+                as |vehicle|
+            >
+                <Vehicle::Pill @resource={{vehicle}} />
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/attach-telematic-device.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalsAttachTelematicDeviceComponent extends Component {}

package/addon/components/modals/driver-assign-order.hbs

@@ -14,65 +14,14 @@
                     @onChange={{@options.selectOrder}}
                     as |order|
                 >
-                    <div class="mb-3 flex items-center justify-between">
-                        <div>{{order.public_id}} - {{order.createdAt}}</div>
-                        <Badge @hideStatusDot={{true}} @status={{order.status}} />
-                    </div>
-                    <div class="-ml-2">
-                        {{#if @order.payload.hasWaypoints}}
-                            <div class="order-route-list storefront flex-1">
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or (get order.payload.waypoints "0.name") (get order.payload.waypoints "0.street1")}}</div>
-                                        <div>{{or (get order.payload.waypoints "0.city") (get order.payload.waypoints "0.postal_code")}}</div>
-                                    </div>
-                                </div>
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or order.payload.waypoints.lastObject.name order.payload.waypoints.lastObject.street1}}</div>
-                                        <div>{{or order.payload.waypoints.lastObject.city order.payload.waypoints.lastObject.postal_code}}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        {{else}}
-                            <div class="order-route-list storefront flex-1">
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or order.payload.pickup.name order.payload.pickup.street1}}</div>
-                                        <div>{{or order.payload.pickup.city order.payload.pickup.postal_code}}</div>
-                                    </div>
-                                </div>
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or order.payload.dropoff.name order.payload.dropoff.street1}}</div>
-                                        <div>{{or order.payload.dropoff.city order.payload.dropoff.postal_code}}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        {{/if}}
-                    </div>
+                    <Order::Card
+                        @order={{order}}
+                        @variant="selection"
+                        @showMeta={{true}}
+                        @interactive={{false}}
+                    />
                 </ModelSelect>
             </InputGroup>
         </div>
     </div>
-</Modal::Default>
+</Modal::Default>

package/addon/components/modals/driver-assign-vehicle.hbs

@@ -13,9 +13,17 @@
                     @onChangeId={{fn (mut @options.driver.vehicle_uuid)}}
                     as |model|
                 >
-                    {{model.display_name}}
+                    <Vehicle::Pill
+                        @vehicle={{model}}
+                        @anchorClass="w-full"
+                        @imageWrapperClass="w-8 h-8"
+                        @imageClass="w-8 h-8"
+                        @contentWrapperClass="min-w-0"
+                        @titleClass="truncate"
+                        @subtitleClass="truncate"
+                    />
                 </ModelSelect>
             </InputGroup>
         </div>
     </div>
-</Modal::Default>
+</Modal::Default>

package/addon/components/modals/fleet-assign-driver.hbs

@@ -0,0 +1,18 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "common.select-field" field=(t "resource.driver")}} @value={{@options.selectedDriver}}>
+            <ModelSelect
+                @modelName="driver"
+                @selectedModel={{@options.selectedDriver}}
+                @placeholder={{t "common.select-field" field=(t "resource.driver")}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedDriver)}}
+                as |driver|
+            >
+                <Driver::Pill @driver={{driver}} />
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/fleet-assign-driver.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalsFleetAssignDriverComponent extends Component {}

package/addon/components/modals/fleet-assign-vehicle.hbs

@@ -0,0 +1,18 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "common.select-field" field=(t "resource.vehicle")}} @value={{@options.selectedVehicle}}>
+            <ModelSelect
+                @modelName="vehicle"
+                @selectedModel={{@options.selectedVehicle}}
+                @placeholder={{t "common.select-field" field=(t "resource.vehicle")}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedVehicle)}}
+                as |vehicle|
+            >
+                <Vehicle::Pill @resource={{vehicle}} />
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/fleet-assign-vehicle.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalsFleetAssignVehicleComponent extends Component {}

package/addon/components/modals/telematic-connection-diagnostics.hbs

@@ -0,0 +1,75 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container space-y-4">
+        <div
+            class="rounded-md border p-4
+                {{if (eq this.connectionState 'success') 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/10'}}
+                {{if (eq this.connectionState 'failed') 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/10'}}
+                {{if (eq this.connectionState 'testing') 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/10'}}
+                {{if (eq this.connectionState 'idle') 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800'}}"
+        >
+            <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                <div class="flex min-w-0 gap-3">
+                    <div
+                        class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md
+                            {{if (eq this.connectionState 'success') 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'}}
+                            {{if (eq this.connectionState 'failed') 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'}}
+                            {{if (eq this.connectionState 'testing') 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'}}
+                            {{if (eq this.connectionState 'idle') 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300'}}"
+                    >
+                        {{#if (eq this.connectionState "testing")}}
+                            <Spinner class="h-4 w-4" />
+                        {{else if (eq this.connectionState "success")}}
+                            <FaIcon @icon="circle-check" />
+                        {{else if (eq this.connectionState "failed")}}
+                            <FaIcon @icon="circle-exclamation" />
+                        {{else}}
+                            <FaIcon @icon="plug" />
+                        {{/if}}
+                    </div>
+                    <div class="min-w-0">
+                        <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">{{this.connectionStateTitle}}</h3>
+                        {{#if this.connectionStateMessage}}
+                            <p class="mt-1 text-xs leading-5 text-gray-600 dark:text-gray-300">{{this.connectionStateMessage}}</p>
+                        {{/if}}
+
+                        {{#if this.hasConnectionMetadata}}
+                            <div class="mt-3 flex flex-wrap gap-2">
+                                {{#each this.connectionMetadataEntries as |item|}}
+                                    <span class="inline-flex items-center rounded-md border border-gray-200 bg-white px-2 py-1 text-[11px] text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                                        <span class="mr-1 font-semibold text-gray-900 dark:text-gray-100">{{item.label}}</span>
+                                        {{item.value}}
+                                    </span>
+                                {{/each}}
+                            </div>
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="rounded-md border border-gray-200 dark:border-gray-700">
+            <div class="flex items-center justify-between border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <div class="flex items-center gap-2 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">
+                    <FaIcon @icon="terminal" />
+                    <span>Diagnostics</span>
+                </div>
+                <Button @icon="copy" @text="Copy diagnostics" @size="xs" @disabled={{this.runTest.isRunning}} @onClick={{this.copyConnectionDiagnostics}} />
+            </div>
+            <div class="max-h-64 overflow-y-auto rounded-b-md border border-gray-900 bg-gray-900 p-3 font-mono text-[11px] leading-5 shadow-inner dark:border-gray-700 dark:bg-gray-900">
+                {{#each this.connectionDiagnosticEntries as |entry|}}
+                    <div
+                        class="flex gap-3
+                            {{if (eq entry.tone 'success') 'text-green-300'}}
+                            {{if (eq entry.tone 'danger') 'text-red-300'}}
+                            {{if (eq entry.tone 'info') 'text-blue-300'}}
+                            {{if (eq entry.tone 'warning') 'text-yellow-300'}}
+                            {{if (eq entry.tone 'muted') 'text-gray-300'}}"
+                    >
+                        <span class="flex-shrink-0 text-gray-500">[{{entry.time}}]</span>
+                        <span class="min-w-0 break-words">{{entry.text}}</span>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+</Modal::Default>