@fleetbase/fleetops-engine 0.6.63 → 0.6.65

package/addon/styles/fleetops-engine.css

@@ -8534,3 +8534,352 @@ body[data-theme='dark'] .fleetbase-ai-create-order-preview__cancelled {
         animation: none;
     }
 }
+
+/* ── Trailer lifecycle, attachment & towing badges ──
+   ember-ui's badge palette has no entries for these values, so they would
+   otherwise render as unstyled `x-status-badge` elements. Colors follow the
+   ember-ui badge.css convention (800 background / 700 border / 100 text). */
+.status-badge.attached-status-badge > span,
+.status-badge.in-use-status-badge > span {
+    background-color: #1e40af;
+    border-color: #1d4ed8;
+    color: #dbeafe;
+}
+
+.status-badge.attached-status-badge > span svg,
+.status-badge.in-use-status-badge > span svg {
+    color: #93c5fd;
+}
+
+.status-badge.detached-status-badge > span,
+.status-badge.retired-status-badge > span {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: #f3f4f6;
+}
+
+.status-badge.detached-status-badge > span svg,
+.status-badge.retired-status-badge > span svg {
+    color: #d1d5db;
+}
+
+.status-badge.out-of-service-status-badge > span {
+    background-color: #991b1b;
+    border-color: #b91c1c;
+    color: #fee2e2;
+}
+
+.status-badge.out-of-service-status-badge > span svg {
+    color: #fca5a5;
+}
+
+/* ── Attachment lists (devices, equipment, trailers, towing history) ── */
+.fleetops-attachment-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.fleetops-attachment-list-header {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 1rem 1rem 0.75rem;
+}
+
+.fleetops-attachment-list-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2.5rem 0;
+}
+
+.fleetops-attachment-list-items {
+    display: flex;
+    flex-direction: column;
+}
+
+.fleetops-attachment-list-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border-top: 1px solid #e5e7eb;
+}
+
+.fleetops-attachment-list-item:last-child {
+    border-bottom: 1px solid #e5e7eb;
+}
+
+body[data-theme='dark'] .fleetops-attachment-list-item,
+body[data-theme='dark'] .fleetops-attachment-list-item:last-child {
+    border-color: #374151;
+}
+
+.fleetops-attachment-list-item-content {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: 0.375rem 0.75rem;
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.fleetops-attachment-list-item-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25rem;
+    flex-shrink: 0;
+}
+
+.fleetops-attachment-list-item-badge {
+    flex-shrink: 0;
+}
+
+.fleetops-attachment-list-item-meta {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: 0.25rem 0.75rem;
+    min-width: 0;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .fleetops-attachment-list-item-meta {
+    color: #9ca3af;
+}
+
+.fleetops-attachment-list-item-meta-entry {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.fleetops-attachment-list-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: 0 1rem 1rem;
+    padding: 3rem 1.5rem;
+    border-radius: 0.5rem;
+    border: 1px dashed #d1d5db;
+    background-color: #fff;
+}
+
+body[data-theme='dark'] .fleetops-attachment-list-empty {
+    border-color: #4b5563;
+    background-color: #1f2937;
+}
+
+/* Towing history entries: vehicle on the left, connect/disconnect timeline beside it. */
+.fleetops-towing-entry {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+    min-width: 0;
+}
+
+.fleetops-towing-entry-vehicle {
+    flex-shrink: 0;
+    min-width: 0;
+}
+
+.fleetops-towing-entry-timeline {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+@media (width >= 640px) {
+    .fleetops-towing-entry {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .fleetops-towing-entry-vehicle {
+        width: 14rem;
+    }
+
+    .fleetops-towing-entry-timeline {
+        padding-left: 0.75rem;
+        border-left: 2px solid #e5e7eb;
+    }
+
+    body[data-theme='dark'] .fleetops-towing-entry-timeline {
+        border-left-color: #374151;
+    }
+
+    .fleetops-towing-entry--active .fleetops-towing-entry-timeline {
+        border-left-color: #4ade80;
+    }
+
+    body[data-theme='dark'] .fleetops-towing-entry--active .fleetops-towing-entry-timeline {
+        border-left-color: #16a34a;
+    }
+}
+
+.fleetops-towing-entry-timeline-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: #374151;
+}
+
+body[data-theme='dark'] .fleetops-towing-entry-timeline-row {
+    color: #e5e7eb;
+}
+
+/* Resource cards (drivers, vehicles, trailers, vendors, contacts): one title row with an
+   optional online indicator, an image body on the card background, and footer meta rows
+   that style linked records the same way on every card. */
+.fleetops-card-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+}
+
+.fleetops-card-title-indicator {
+    margin-left: 0.5rem;
+    flex: none;
+}
+
+.fleetops-card-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+}
+
+.fleetops-card-image--contain {
+    object-fit: contain;
+    padding: 0.5rem;
+}
+
+.fleetops-card-image--cover {
+    object-fit: cover;
+}
+
+.fleetops-card-meta-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    margin-top: 0.375rem;
+    width: 100%;
+}
+
+.fleetops-card-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-width: 0;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: #9ca3af;
+}
+
+body[data-theme='dark'] .fleetops-card-meta {
+    color: #6b7280;
+}
+
+.fleetops-card-meta > svg {
+    flex-shrink: 0;
+    width: 0.75rem;
+}
+
+.fleetops-card-meta-value {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.fleetops-card-meta-link {
+    color: #3b82f6;
+    font-weight: 500;
+}
+
+.fleetops-card-meta-link:hover {
+    opacity: 0.75;
+}
+
+body[data-theme='dark'] .fleetops-card-meta-link {
+    color: #60a5fa;
+}
+
+/* ── Multi-model table filter (mirrors ember-ui's .filter-multi-input clear button) ── */
+.filter-multi-model {
+    position: relative;
+}
+
+.filter-multi-model > .clear-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5rem 0.75rem 0 0;
+    color: #374151;
+}
+
+.filter-multi-model > .clear-button:hover {
+    opacity: 0.5;
+}
+
+.filter-multi-model > .clear-button:disabled {
+    opacity: 0.3;
+    cursor: default;
+}
+
+body[data-theme='dark'] .filter-multi-model > .clear-button {
+    color: #6b7280;
+}
+
+.filter-multi-model > .fleetbase-model-select,
+.filter-multi-model > .fleetbase-model-select > .ember-basic-dropdown,
+.filter-multi-model .ember-power-select-multiple-trigger {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+}
+
+/* The small form-input height clips the multiple trigger and turns it into a scroller
+   before anything is selected; let it start at the input height and grow with chips. */
+.filter-multi-model .ember-power-select-multiple-trigger {
+    display: flex;
+    align-items: center;
+    height: auto !important;
+    min-height: 2.125rem;
+    max-height: none !important;
+    overflow: visible !important;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    padding-right: 2.5rem;
+}
+
+.filter-multi-model .ember-power-select-multiple-options {
+    flex: 1 1 auto;
+    min-width: 0;
+    gap: 0.125rem;
+}
+
+.filter-multi-model .ember-power-select-multiple-option {
+    margin: 0.125rem 0.125rem 0.125rem 0;
+}
+
+.filter-multi-model .ember-power-select-trigger-multiple-input {
+    height: 1.625rem;
+    min-width: 4rem;
+}

package/addon/templates/connectivity/devices/index/details/vehicle.hbs

@@ -1,20 +1,20 @@
 <div class="flex flex-col gap-3 p-3">
     <div class="flex flex-col items-start justify-between gap-3">
         <div class="min-w-0">
-            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Vehicle Attachment</h2>
-            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Fleet context for telemetry from this device.</p>
+            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">{{t "device.attachment.title"}}</h2>
+            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">{{t "device.attachment.description"}}</p>
         </div>
 
         {{#if this.hasVehicle}}
             <div class="flex flex-nowrap items-center gap-2 whitespace-nowrap">
                 {{#if this.canOpenVehicle}}
-                    <Button @icon="eye" @text="Open Vehicle" @size="xs" @onClick={{this.openVehicle}} />
+                    <Button @icon="eye" @text={{t "device.attachment.open"}} @size="xs" @onClick={{this.openVehicle}} />
                 {{/if}}
                 {{#if this.canLocateVehicle}}
-                    <Button @icon="location-dot" @text="Locate" @size="xs" @onClick={{this.locateVehicle}} />
+                    <Button @icon="location-dot" @text={{t "device.attachment.locate"}} @size="xs" @onClick={{this.locateVehicle}} />
                 {{/if}}
-                <Button @icon="shuffle" @text="Change Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
-                <Button @icon="unlink" @text="Detach" @size="xs" @type="danger" @onClick={{this.detachFromVehicle}} />
+                <Button @icon="shuffle" @text={{t "device.attachment.change"}} @size="xs" @onClick={{this.attachToVehicle}} />
+                <Button @icon="unlink" @text={{t "device.attachment.detach"}} @size="xs" @type="danger" @onClick={{this.detachFromVehicle}} />
             </div>
         {{/if}}
     </div>
@@ -23,8 +23,8 @@
         <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
             <div class="flex gap-3 p-3">
                 <Image
-                    src={{this.vehiclePhotoUrl}}
-                    @fallbackSrc={{config "defaultValues.placeholderImage"}}
+                    src={{resource-image this.vehiclePhotoUrl "vehicle"}}
+                    @fallbackSrc={{(placeholder-image "vehicle")}}
                     alt={{this.vehicleName}}
                     class="h-20 w-20 flex-shrink-0 rounded-md object-cover shadow-sm"
                 />
@@ -62,11 +62,11 @@
                             <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.yearMakeModel}}</div>
                         </div>
                         <div>
-                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Attached Device</div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "device.attachment.attached-device"}}</div>
                             <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.device.displayName}}</div>
                         </div>
                         <div>
-                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Device Last Seen</div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "device.attachment.last-seen"}}</div>
                             <div class="truncate text-gray-800 dark:text-gray-100">{{n-a (format-date-fns this.device.last_online_at "dd MMM yyyy, HH:mm")}}</div>
                         </div>
                     </div>
@@ -77,11 +77,11 @@
         <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
             <div class="flex items-start justify-between gap-3 border-b border-gray-200 px-3 py-2 dark:border-gray-700">
                 <div class="min-w-0">
-                    <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Latest Positions</h3>
-                    <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Recent vehicle coordinates reported through this device attachment.</p>
+                    <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">{{t "device.attachment.latest-positions"}}</h3>
+                    <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">{{t "device.attachment.positions-description"}}</p>
                 </div>
                 {{#if this.canOpenVehicle}}
-                    <Button @icon="route" @text="Full History" @size="xs" @onClick={{this.openVehiclePositions}} />
+                    <Button @icon="route" @text={{t "device.attachment.full-history"}} @size="xs" @onClick={{this.openVehiclePositions}} />
                 {{/if}}
             </div>
 
@@ -125,9 +125,9 @@
                     <Telematic::TabEmptyState
                         @tone="info"
                         @icon="location-dot"
-                        @title="No recent positions"
-                        @message="This attached vehicle does not have recent position history available yet."
-                        @primaryText="Locate Vehicle"
+                        @title={{t "device.attachment.no-positions"}}
+                        @message={{t "device.attachment.no-positions-message"}}
+                        @primaryText={{t "device.attachment.locate"}}
                         @primaryIcon="location-dot"
                         @primaryAction={{this.locateVehicle}}
                     />
@@ -138,9 +138,9 @@
         <Telematic::TabEmptyState
             @tone="warning"
             @icon="link-slash"
-            @title="No vehicle attached"
-            @message="Attach this device to a vehicle so telemetry has fleet context."
-            @primaryText="Attach Vehicle"
+            @title={{t "device.attachment.none-title"}}
+            @message={{t "device.attachment.none-message"}}
+            @primaryText={{t "device.actions.attach-to-asset"}}
             @primaryIcon="link"
             @primaryAction={{this.attachToVehicle}}
         />

package/addon/templates/connectivity/telematics/details/attachments.hbs

@@ -18,7 +18,7 @@
                             @value={{this.query}}
                             @type="text"
                             class="form-input form-input-sm h-10 w-full text-sm"
-                            placeholder="Search vehicles or devices"
+                        placeholder="Search assets or devices"
                             {{on "input" this.updateQuery}}
                         />
                         <select class="form-select form-select-sm h-10 w-full text-sm" {{on "change" this.updateStatus}}>
@@ -83,10 +83,10 @@
                                     <p class="mt-1 truncate text-xs text-blue-600 dark:text-blue-300">
                                         Selected:
                                         {{this.selectedDeviceName}}.
-                                        Choose a vehicle on the right.
+                                        Choose an asset on the right.
                                     </p>
                                 {{else}}
-                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Select a device, then choose a vehicle target.</p>
+                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Select a device, then choose a vehicle or trailer target.</p>
                                 {{/if}}
                             </div>
                             {{#if this.selectedDevice}}
@@ -139,7 +139,7 @@
                         {{else}}
                             <div class="p-4">
                                 <div class="rounded-md border border-green-200 bg-green-50 p-3 text-sm text-green-800 dark:border-green-700 dark:bg-green-900/20 dark:text-green-300">
-                                    All visible synced devices are mapped to vehicles.
+                                    All visible synced devices are mapped to assets.
                                 </div>
                             </div>
                         {{/if}}
@@ -151,38 +151,38 @@
                         <div class="flex items-start justify-between gap-3">
                             <div class="min-w-0">
                                 <div class="flex items-center gap-2">
-                                    <h4 class="text-sm font-bold text-gray-900 dark:text-gray-100">Vehicles</h4>
-                                    <span class="text-xs font-semibold text-gray-500 dark:text-gray-400">{{this.vehicleGroups.length}} mapped</span>
+                                    <h4 class="text-sm font-bold text-gray-900 dark:text-gray-100">Assets</h4>
+                                    <span class="text-xs font-semibold text-gray-500 dark:text-gray-400">{{this.assetGroups.length}} mapped</span>
                                 </div>
                                 {{#if this.selectedDevice}}
                                     <p class="mt-1 truncate text-xs text-blue-600 dark:text-blue-300">
-                                        Choose a vehicle for
+                                        Choose an asset for
                                         {{this.selectedDeviceName}}
                                     </p>
                                 {{else}}
-                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Attached devices grouped by vehicle.</p>
+                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Attached devices grouped by vehicle or trailer.</p>
                                 {{/if}}
                             </div>
                         </div>
                     </div>
 
                     <div class="h-[calc(100vh-24rem)] min-h-[28rem] overflow-y-auto">
-                        {{#if this.vehicleGroups.length}}
+                        {{#if this.assetGroups.length}}
                             <div class="divide-y divide-gray-200 dark:divide-gray-700">
-                                {{#each this.vehicleGroups as |group|}}
+                                {{#each this.assetGroups as |group|}}
                                     <div class="border-l-2 border-transparent px-4 py-3 transition hover:border-blue-300 hover:bg-blue-50/40 dark:hover:bg-blue-900/10">
                                         <div class="mb-2 flex items-center justify-between gap-3">
                                             <div class="flex min-w-0 items-center gap-3">
                                                 <Image
-                                                    src={{or group.vehicle.photo_url group.vehicle.avatar_url}}
-                                                    @fallbackSrc={{config "defaultValues.vehicleImage"}}
+                                                    src={{resource-image (or group.asset.photo_url group.asset.avatar_url) (if (eq group.asset.asset_class "trailer") "trailer" "vehicle")}}
+                                                    @fallbackSrc={{(placeholder-image (if (eq group.asset.asset_class "trailer") "trailer" "vehicle"))}}
                                                     alt={{group.name}}
                                                     class="h-10 w-9 flex-shrink-0 rounded-md object-cover"
                                                 />
                                                 <div class="min-w-0">
-                                                    <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{or group.vehicle.displayName group.vehicle.display_name group.vehicle.name group.name}}</div>
+                                                    <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{or group.asset.displayName group.asset.display_name group.asset.name group.name}}</div>
                                                     <div class="mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400">
-                                                        {{n-a (or group.vehicle.plate_number group.vehicle.internal_id group.vehicle.call_sign group.vehicle.vin)}}
+                                                        {{n-a (or group.asset.plate_number group.asset.internal_id group.asset.call_sign group.asset.vin)}}
                                                         <span class="mx-1">·</span>
                                                         {{group.devices.length}}
                                                         devices
@@ -228,7 +228,7 @@
                         {{else}}
                             <div class="p-4">
                                 <div class="rounded-md border border-gray-200 bg-gray-50 p-4 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">
-                                    No visible vehicle groups. Attach a device from the left pane or adjust the filters.
+                                    No visible asset groups. Attach a device from the left pane or adjust the filters.
                                 </div>
                             </div>
                         {{/if}}

package/addon/templates/management/contacts/customers.hbs

@@ -1,30 +1,49 @@
-<Layout::Resource::Tabular
-    @resource="contact"
-    @title={{t "resource.customers"}}
-    @searchQuery={{this.query}}
-    @onSearch={{perform this.customerActions.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="user-group"
-        title="Add your first customer"
-        description="Customers give orders an owner, contact details, and account context for service history."
-        filteredTitle="No customers match your filters"
-        filteredDescription="Adjust the search or filters to find another customer."
-        primaryText="New customer"
-        primaryIcon="plus"
-        primaryAction=this.customerActions.transition.create
-        secondaryText="Import"
-        secondaryIcon="upload"
-        secondaryAction=this.customerActions.import
-    }}
-    @withoutHeader={{true}}
-/>
+{{#if (eq this.layout "table")}}
+    <Layout::Resource::Tabular
+        @resource="contact"
+        @title={{t "resource.customers"}}
+        @searchQuery={{this.query}}
+        @onSearch={{perform this.customerActions.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="user-group"
+            title="Add your first customer"
+            description="Customers give orders an owner, contact details, and account context for service history."
+            filteredTitle="No customers match your filters"
+            filteredDescription="Adjust the search or filters to find another customer."
+            primaryText="New customer"
+            primaryIcon="plus"
+            primaryAction=this.customerActions.transition.create
+            secondaryText="Import"
+            secondaryIcon="upload"
+            secondaryAction=this.customerActions.import
+        }}
+        @withoutHeader={{true}}
+    />
+{{else}}
+    <Layout::Section::Body class="overflow-y-scroll-i h-full">
+        <Layout::Resource::CardsGrid
+            @resource="contact"
+            @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|
+        >
+            <Contact::Card @resource={{Item.model}} @resourceActions={{this.customerActions}} @placeholderType="customer" />
+        </Layout::Resource::CardsGrid>
+    </Layout::Section::Body>
+{{/if}}
 {{outlet}}