@fleetbase/fleetops-engine 0.6.20 → 0.6.22

package/addon/components/order/details/detail.hbs

@@ -16,25 +16,7 @@
                     <span>{{t "order.fields.driver-assigned"}}</span>
                 </div>
                 <div class="field-value">
-                    <div>
-                        <a href="javascript:;" class="flex flex-row space-x-2" {{on "click" (fn this.focusOrderAssignedDriver @resource.driver_assigned)}}>
-                            <div class="relative shrink-0">
-                                <Image
-                                    src={{avatar-url @resource.driver_assigned.photo_url}}
-                                    @fallbackSrc={{config "defaultValues.driverImage"}}
-                                    width="28"
-                                    height="28"
-                                    class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
-                                    alt={{@resource.driver_assigned.name}}
-                                />
-                                <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 h-2 w-2 {{if @resource.driver_assigned.online 'text-green-500' 'text-yellow-200'}}" />
-                            </div>
-                            <div>
-                                <div class="text-sm">{{n-a @resource.driver_assigned.name}}</div>
-                                <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.driver_assigned.phone "No Phone"}}</div>
-                            </div>
-                        </a>
-                    </div>
+                    <Driver::Pill @driver={{@resource.driver_assigned}} @onClick={{this.focusOrderAssignedDriver}} />
                 </div>
             </div>
             <div class="field-info-container">
@@ -42,41 +24,7 @@
                     <span>{{t "order.fields.vehicle-assigned"}}</span>
                 </div>
                 <div class="field-value">
-                    <a href="javascript:;" class="flex flex-row space-x-2 shrink-0">
-                        <div class="relative shrink-0">
-                            <Image
-                                src={{@resource.vehicle_assigned.photo_url}}
-                                @fallbackSrc={{config "defaultValues.vehicleImage"}}
-                                width="28"
-                                height="28"
-                                class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
-                                alt={{n-a @resource.vehicle_assigned.name @resource.vehicle_assigned.yearMakeModel}}
-                            />
-                            <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 h-2 w-2 {{if @resource.vehicle_assigned.online 'text-green-500' 'text-yellow-200'}}" />
-                        </div>
-                        <div>
-                            <div class="text-sm">{{n-a @resource.vehicle_assigned.name @resource.vehicle_assigned.yearMakeModel}}</div>
-                            <div class="text-xs text-gray-400 dark:text-gray-500">{{or
-                                    @resource.vehicle_assigned.plate_number
-                                    @resource.vehicle_assigned.vin
-                                    @resource.vehicle_assigned.serial_number
-                                    @resource.vehicle_assigned.call_sign
-                                }}</div>
-                        </div>
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                            <InputInfo>
-                                <div class="text-xs font-semibold">{{@resource.vehicle_assigned.name @resource.vehicle_assigned.yearMakeModel}}</div>
-                                <div class="text-xs">Driver: {{n-a @resource.vehicle_assigned.driver_name}}</div>
-                                <div class="text-xs">
-                                    <span>Status:</span>
-                                    <span class="{{if @resource.vehicle_assigned.online 'text-green-500' 'text-red-400'}}">
-                                        {{if @resource.vehicle_assigned.online "Online" "Offline"}}
-                                    </span>
-                                </div>
-                                <div class="text-xs truncate">Pos: {{point-coordinates @resource.vehicle_assigned.location}}</div>
-                            </InputInfo>
-                        </Attach::Tooltip>
-                    </a>
+                    <Vehicle::Pill @vehicle={{@resource.vehicle_assigned}} />
                 </div>
             </div>
             <div class="field-info-container">

package/addon/components/order/details/detail.js

@@ -36,6 +36,7 @@ export default class OrderDetailsDetailComponent extends Component {
     }
 
     @action focusOrderAssignedDriver(driver) {
+        console.log('[focusOrderAssignedDriver]', ...arguments);
         this.driverActions.panel.view(driver);
         this.leafletMapManager.map?.flyTo(driver.coordinates, 18);
     }

package/addon/components/order/details/payload.hbs

@@ -1,5 +1,5 @@
 <ContentPanel @title={{t "order.fields.payload"}} @open={{true}} @actionButtons={{this.actionButtons}} @wrapperClass="bordered-top">
-    {{#if @resource.isMultiDropOrder}}
+    {{#if @resource.isMultiDrop}}
         <div class="space-y-2">
             {{#each @resource.entitiesByDestination as |group|}}
                 <div class="rounded-md border border-gray-200 dark:border-gray-900 p-3">
@@ -40,13 +40,15 @@
                                 <DropdownButton
                                     @triggerClass="mr-2"
                                     @iconClass="icon-text-height"
-                                    @buttonSize="sm"
+                                    @size="xs"
+                                    @buttonSize="xs"
                                     @icon="ellipsis-h"
                                     @iconPrefix="fas"
                                     @contentClass="dropdown-menu"
+                                    @renderInPlace={{true}}
                                     as |dd|
                                 >
-                                    <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+                                    <div class="next-dd-menu mx-0 mt-0i" aria-labelledby="user-menu">
                                         <div class="px-1">
                                             <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-300">
                                                 {{t "order.fields.waypoint-actions"}}
@@ -72,7 +74,7 @@
                                     @icon="plus"
                                     @iconPrefix="fas"
                                     @text={{t "order.fields.add-item-button"}}
-                                    @size="sm"
+                                    @size="xs"
                                     @onClick={{perform this.addEntity group.waypoint}}
                                     @permission="fleet-ops update order"
                                 />

package/addon/components/order/details/payload.js

@@ -13,6 +13,8 @@ export default class OrderDetailsPayloadComponent extends Component {
     @service intl;
 
     get actionButtons() {
+        if (this.args.resource.isMultiDrop) return [];
+
         return [
             {
                 type: 'default',

package/addon/components/order/pill.hbs

@@ -0,0 +1,34 @@
+{{#let (or @order @resource) as |resource|}}
+    <Pill
+        @resource={{resource}}
+        @onClick={{@onClick}}
+        @anchorClass={{@anchorClass}}
+        @imageClass={{@imageClass}}
+        @imageWrapperClass={{@imageWrapperClass}}
+        @contentWrapperClass={{@contentWrapperClass}}
+        @titleClass={{@titleClass}}
+        @subtitleClass={{@subtitleClass}}
+        ...attributes
+    >
+        <:image>
+            <div class="pt-1">
+                <div class="rounded-md bg-white p-1">
+                    <img src={{concat "data:image/png;base64," resource.tracking_number.qr_code}} class="w-12 h-12" alt={{resource.public_id}} />
+                </div>
+            </div>
+        </:image>
+        <:default>
+            <div class="text-sm font-semibold">{{n-a resource.tracking}}</div>
+            <div class="flex flex-row space-x-1">
+                <Badge @status={{@resource.status}} />
+                {{#if @resource.dispatched_at}}
+                    <Badge @status="dispatched">{{concat "Dispatched at " @resource.dispatchedAt}}</Badge>
+                {{/if}}
+            </div>
+            <div class="mt-1">
+                <div class="text-xs text-gray-400 dark:text-gray-500">Date Created: {{@resource.createdAt}}</div>
+                <div class="text-xs text-gray-400 dark:text-gray-500">Type: {{smart-humanize @resource.type}}</div>
+            </div>
+        </:default>
+    </Pill>
+{{/let}}

package/addon/components/order/pill.js

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

package/addon/components/order-config-manager/custom-fields.js

@@ -142,7 +142,7 @@ export default class OrderConfigManagerCustomFieldsComponent extends Component {
         });
 
         this.modalsManager.show('modals/custom-field-group-form', {
-            title: this.intl.t('fleet-ops.component.modals.new-custom-field-group.modal-title'),
+            title: this.intl.t('modals.new-custom-field-group.modal-title'),
             acceptButtonIcon: 'check',
             acceptButtonIconPrefix: 'fas',
             declineButtonIcon: 'times',

package/addon/components/positions-replay.hbs

@@ -0,0 +1,339 @@
+<div class="positions-replay-component" ...attributes>
+    <div class="fleetbase-leaflet-map-container map-wrapper relative" {{set-height (or @mapHeight 300)}}>
+        {{#if this.loadPositions.isRunning}}
+            <div class="absolute inset-0 h-full w-full">
+                <div class="flex items-center justify-center h-full">
+                    <Spinner />
+                </div>
+            </div>
+        {{/if}}
+        <div class="next-map-container">
+            <LeafletMap @lat={{this.latitude}} @lng={{this.longitude}} @zoom={{this.zoom}} @onLoad={{this.didLoadMap}} class="next-leaflet-container-map positions-replay-map" as |layers|>
+                <layers.tile @url={{this.tileUrl}} />
+                {{#if this.resource}}
+                    <layers.tracking-marker
+                        @id={{this.resource.id}}
+                        @publicId={{this.resource.public_id}}
+                        @location={{point-to-coordinates this.resource.location}}
+                        @rotationAngle={{or this.resource.heading 0}}
+                        @icon={{icon iconUrl=(or this.resource.avatar_url this.resource.photo_url (config "defaultValues.vehicleAvatar")) iconSize=(array 28 28)}}
+                        @onAdd={{fn this.onTrackingMarkerAdded this.resource}}
+                        @draggable={{false}}
+                        as |marker|
+                    >
+                        <marker.popup @permanent={{false}} @sticky={{true}}>
+                            <div class="flex flex-row">
+                                <div class="w-14 mr-2">
+                                    <img src={{or this.resource.photo_url this.resource.avatar_url}} alt={{this.resourceName}} class="rounded-md w-14 h-12 shadow-sm" />
+                                </div>
+                                <div class="flex-1">
+                                    <div class="text-xs font-semibold">{{this.resourceName}}</div>
+                                    <div class="text-xs">ID: {{n-a this.resource.public_id}}</div>
+                                    {{#if (eq this.resourceType "vehicle")}}
+                                        <div class="text-xs">Serial No: {{n-a this.resource.serial_number this.resource.vin this.resource.internal_id this.resource.id}}</div>
+                                        <div class="text-xs">Driver: {{n-a this.resource.driver_name}}</div>
+                                    {{/if}}
+                                    <div class="text-xs">Status:
+                                        <span class="{{if this.resource.online 'text-green-500' 'text-red-400'}}">{{if this.resource.online "Online" "Offline"}}</span></div>
+                                    <div class="text-xs truncate">Pos: {{point-coordinates this.resource.location}}</div>
+                                </div>
+                            </div>
+                        </marker.popup>
+                        <marker.tooltip @permanent={{false}} @sticky={{true}}>
+                            <div class="flex items-center space-x-1">
+                                <div class="text-xs font-semibold">{{this.resource.displayName}}</div>
+                                <div>•</div>
+                                <div class="text-xs {{if this.resource.online 'text-green-500' 'text-red-400'}}">{{if this.resource.online "Online" "Offline"}}</div>
+                            </div>
+                            <div class="text-xs">ID: {{n-a this.resource.public_id}}</div>
+                            {{#if (eq this.resourceType "vehicle")}}
+                                <div class="text-xs">Serial No: {{or this.resource.serial_number this.resource.vin this.resource.internal_id this.resource.id "-"}}</div>
+                            {{/if}}
+                            <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{point-coordinates this.resource.location}}</div>
+                        </marker.tooltip>
+                    </layers.tracking-marker>
+                {{/if}}
+                {{#each this.positions as |position index|}}
+                    <layers.circle-marker
+                        @location={{array position.latitude position.longitude}}
+                        @radius={{3}}
+                        @color="#3b82f6"
+                        @fillColor="#3b82f6"
+                        @fillOpacity={{0.6}}
+                        @onClick={{fn this.onPositionClicked position}}
+                        as |marker|
+                    >
+                        <marker.popup>
+                            <div class="text-xs">
+                                <div><strong>Position {{add index 1}}</strong></div>
+                                <div>Time: {{position.timestamp}}</div>
+                                <div>Speed: {{position.speedKmh}} km/h</div>
+                                <div>Heading: {{or position.heading "N/A"}}°</div>
+                                <div>Altitude: {{or position.altitude "N/A"}} m</div>
+                            </div>
+                        </marker.popup>
+                    </layers.circle-marker>
+                {{/each}}
+            </LeafletMap>
+        </div>
+    </div>
+
+    <div class="positions-replay-filters px-3 pt-2">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
+            <div class="filter-group relative">
+                <label class="block uppercase tracking-wide text-xs font-medium text-gray-700 dark:text-gray-400 mb-0.5">
+                    Date Range
+                </label>
+                <DatePicker
+                    @value={{this.dateFilter}}
+                    @range={{true}}
+                    @onSelect={{this.onDateRangeChanged}}
+                    @autoClose={{true}}
+                    @placeholder="Select date range"
+                    class="w-full form-input form-input-sm"
+                />
+            </div>
+
+            <div class="filter-group">
+                <label class="block uppercase tracking-wide text-xs font-medium text-gray-700 dark:text-gray-400 mb-0.5">
+                    Order
+                </label>
+                <ModelSelect
+                    @modelName="order"
+                    @selectedModel={{this.selectedOrder}}
+                    @query={{this.orderFilters}}
+                    @placeholder="Filter by order"
+                    @triggerClass="form-select form-input form-input-sm"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{this.onOrderSelected}}
+                    as |order|
+                >
+                    <div class="flex items-center justify-between">
+                        <span>{{order.tracking}}</span>
+                        <span class="text-xs text-gray-500">{{order.createdAt}}</span>
+                    </div>
+                </ModelSelect>
+            </div>
+
+            <div class="filter-actions flex items-end space-x-2">
+                <Button @type="danger" @icon="times" @text={{t "common.clear"}} @disabled={{this.loadPositions.isRunning}} @onClick={{this.clearFilters}} />
+            </div>
+        </div>
+    </div>
+
+    <div class="positions-replay-map-container border-b border-gray-200 dark:border-gray-700">
+        <div class="replay-controls px-3 py-2">
+            <div class="flex items-center justify-between space-x-2">
+                <div class="flex items-center space-x-2">
+                    <Button @type="danger" @text="Stop" @icon="stop" @size="xs" @disabled={{not (or this.isReplaying this.isPaused)}} @onClick={{this.stopReplay}} />
+
+                    {{#if (or this.isReplaying this.isPaused)}}
+                        {{#if this.isReplaying}}
+                            <Button @type="warning" @text="Pause" @icon="pause" @size="xs" @onClick={{this.pauseReplay}} />
+                        {{else}}
+                            <Button @type="success" @text="Resume" @icon="play" @size="xs" @onClick={{this.startReplay}} />
+                        {{/if}}
+                    {{else}}
+                        <Button @type="success" @text="Play" @icon="play" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.startReplay}} />
+                    {{/if}}
+
+                    <div class="step-controls flex items-center space-x-1 border-l border-gray-300 dark:border-gray-700 pl-2 ml-2">
+                        <Button @type="default" @icon="backward-step" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.stepBackward}} title="Step backward" />
+                        <Button @type="default" @icon="forward-step" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.stepForward}} title="Step forward" />
+                    </div>
+
+                    <div class="speed-control border-l border-gray-300 dark:border-gray-700 pl-2 ml-2">
+                        <label class="text-xs uppercase tracking-wide font-medium text-gray-700 dark:text-gray-400 mr-1">
+                            Speed:
+                        </label>
+                        <Select
+                            @value={{this.replaySpeed}}
+                            @options={{this.speedOptions}}
+                            @optionValue="value"
+                            @optionLabel="label"
+                            @onSelect={{this.onSpeedChanged}}
+                            class="form-select speed-select"
+                        />
+                    </div>
+                </div>
+
+                {{#if (or this.isReplaying this.isPaused)}}
+                    <div class="replay-progress flex items-center space-x-1">
+                        <span class="text-sm text-gray-600 dark:text-gray-400">
+                            {{this.currentReplayIndex}}/{{this.totalPositions}}
+                        </span>
+                        <div class="progress-bar w-32 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div class="progress-fill h-full bg-blue-600 transition-all duration-300" style={{this.replayProgressWidth}}></div>
+                        </div>
+                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                            {{this.replayProgress}}%
+                        </span>
+                    </div>
+                {{/if}}
+            </div>
+        </div>
+    </div>
+
+    {{#if this.hasPositions}}
+        <div class="flex flex-col border-b border-gray-200 dark:border-gray-700">
+            <div class="px-3 mb-1">
+                <h3 class="text-[11px] uppercase tracking-wide text-gray-500 font-semibold">Position Metrics</h3>
+            </div>
+            <div class="grid grid-cols-2 lg:grid-cols-4 gap-2 px-2 pb-2">
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Total Distance</div>
+                    <div class="metric-value font-semibold text-blue-600 dark:text-blue-400">
+                        {{this.totalDistance}}
+                        km
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Duration</div>
+                    <div class="metric-value font-semibold text-green-600 dark:text-green-400">
+                        {{this.formattedDuration}}
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Max Speed</div>
+                    <div class="metric-value font-semibold text-orange-600 dark:text-orange-400">
+                        {{this.maxSpeed}}
+                        km/h
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Avg Speed</div>
+                    <div class="metric-value font-semibold text-purple-600 dark:text-purple-400">
+                        {{this.avgSpeed}}
+                        km/h
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Speeding Events</div>
+                    <div class="metric-value font-semibold text-red-600 dark:text-red-400">
+                        {{this.speedingCount}}
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Dwell Times</div>
+                    <div class="metric-value font-semibold text-yellow-600 dark:text-yellow-400">
+                        {{this.dwellCount}}
+                    </div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-label truncate text-xs text-gray-500 dark:text-gray-400">Acceleration Events</div>
+                    <div class="metric-value font-semibold text-indigo-600 dark:text-indigo-400">
+                        {{this.accelerationCount}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    {{/if}}
+
+    {{!-- {{#if this.hasPositions}}
+        <div class="positions-replay-timeline">
+            <div class="px-3">
+                <h3 class="text-[11px] uppercase tracking-wide text-gray-500 font-semibold">Position Timeline</h3>
+            </div>
+            <div class="timeline-container overflow-x-auto">
+                <div class="timeline-track flex space-x-2 pb-4">
+                    {{#each this.positions as |position index|}}
+                        <div
+                            class="timeline-item flex-shrink-0 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 p-2 rounded transition-colors
+                                {{if (eq index this.currentReplayIndex) 'bg-blue-100 dark:bg-blue-900'}}"
+                            role="button"
+                            {{on "click" (fn this.onPositionClicked position)}}
+                        >
+                            <div class="timeline-marker w-3 h-3 rounded-full bg-blue-600 mx-auto mb-1"></div>
+                            <div class="timeline-content text-xs text-center whitespace-nowrap">
+                                <div class="font-medium">{{add index 1}}</div>
+                                <div class="text-gray-500 dark:text-gray-400">{{position.speedKmh}} km/h</div>
+                                <div class="text-gray-400 dark:text-gray-500 text-xxs">
+                                    {{format-date position.created_at "HH:mm:ss"}}
+                                </div>
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+            </div>
+        </div>
+    {{/if}} --}}
+
+    {{#if this.hasPositions}}
+        <div class="positions-replay-table">
+            <div class="px-3">
+                <h3 class="text-[11px] uppercase tracking-wide text-gray-500 font-semibold">Position Data</h3>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                    <thead class="bg-gray-50 dark:bg-gray-900">
+                        <tr>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                #
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Timestamp
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Latitude
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Longitude
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Speed (km/h)
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Heading
+                            </th>
+                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                Altitude (m)
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                        {{#each this.positions as |position index|}}
+                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 {{if (eq index this.currentReplayIndex) 'bg-blue-50 dark:bg-blue-900'}}">
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{add index 1}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{position.timestamp}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{format-number position.latitude minimumFractionDigits=6 maximumFractionDigits=6}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{format-number position.longitude minimumFractionDigits=6 maximumFractionDigits=6}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{position.speedKmh}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{or position.heading "N/A"}}
+                                </td>
+                                <td class="px-2 py-1 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
+                                    {{or position.altitude "N/A"}}
+                                </td>
+                            </tr>
+                        {{/each}}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    {{/if}}
+
+    {{#unless this.hasPositions}}
+        {{#if this.loadPositions.isIdle}}
+            <div class="empty-state bg-white dark:bg-gray-800 rounded-lg shadow-sm p-12 text-center">
+                <FaIcon @icon="map-marked-alt" @size="2x" class="text-gray-400 mb-2" />
+                <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300">
+                    No Positions Found
+                </h3>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                    Try adjusting your filters or select a different date range.
+                </p>
+            </div>
+        {{/if}}
+    {{/unless}}
+</div>