@fleetbase/fleetops-engine 0.6.50 → 0.6.52

package/addon/components/vendor/personnel-manager.hbs

@@ -0,0 +1,166 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title="Personnel" @open={{true}} @wrapperClass="bordered-top">
+        <div class="space-y-3">
+            <div class="flex flex-col space-y-2 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Vendor personnel</h3>
+                    <p class="text-xs text-gray-500 dark:text-gray-400">Manage contacts assigned to this vendor account.</p>
+                </div>
+                <div class="inline-flex overflow-hidden rounded-md border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800">
+                    <button
+                        type="button"
+                        class="inline-flex w-36 items-center justify-center whitespace-nowrap border-r border-gray-200 px-3 py-2 text-xs font-semibold dark:border-gray-700 {{if this.isAddingExistingContact 'bg-blue-600 text-white' 'text-gray-700 dark:text-gray-200'}}"
+                        {{on "click" (fn this.setMode "existing")}}
+                    >
+                        <FaIcon @icon="address-book" class="mr-1.5" />
+                        Existing contact
+                    </button>
+                    <button
+                        type="button"
+                        class="inline-flex w-36 items-center justify-center whitespace-nowrap px-3 py-2 text-xs font-semibold {{if this.isCreatingContact 'bg-blue-600 text-white' 'text-gray-700 dark:text-gray-200'}}"
+                        {{on "click" (fn this.setMode "new")}}
+                    >
+                        <FaIcon @icon="user-plus" class="mr-1.5" />
+                        New contact
+                    </button>
+                </div>
+            </div>
+
+            <form {{on "submit" (perform this.addPersonnel)}} class="rounded-md border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                <div class="space-y-3">
+                    {{#if this.isAddingExistingContact}}
+                        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
+                        <InputGroup @name="Contact" @wrapperClass="mb-0i">
+                            <ModelSelect
+                                @modelName="contact"
+                                @selectedModel={{this.selectedContact}}
+                                @placeholder="Select existing customer contact"
+                                @query={{hash type="customer"}}
+                                @triggerClass="form-select form-input"
+                                @infiniteScroll={{false}}
+                                @renderInPlace={{true}}
+                                @onChange={{this.selectContact}}
+                                as |model|
+                            >
+                                <div class="flex flex-row items-center">
+                                    <div class="mr-2 w-6">
+                                        <Image src={{model.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{model.name}} class="h-6 w-6 rounded-md" />
+                                    </div>
+                                    <div class="min-w-0">
+                                        <div class="truncate font-semibold">{{model.name}}</div>
+                                        <div class="truncate text-xs text-gray-500">{{n-a model.email}}</div>
+                                    </div>
+                                </div>
+                            </ModelSelect>
+                        </InputGroup>
+
+                    <InputGroup @name="Role" @wrapperClass="mb-0i">
+                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                            <PowerSelect
+                                @options={{this.roleOptions}}
+                                @selected={{this.selectedRole}}
+                                @onChange={{this.selectRole}}
+                                @placeholder="Select role"
+                                @triggerClass="form-select form-input"
+                                as |role|
+                            >
+                                <div class="text-sm">
+                                    <div class="font-semibold normalize-in-trigger">{{role.label}}</div>
+                                    <div class="hide-from-trigger">{{role.description}}</div>
+                                </div>
+                            </PowerSelect>
+                        </div>
+                    </InputGroup>
+                        </div>
+                    {{else}}
+                        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
+                            <InputGroup @name="Name" @wrapperClass="mb-0i" @value={{this.name}} @placeholder="Personnel name" />
+                            <InputGroup @name="Email" @wrapperClass="mb-0i" @type="email" @value={{this.email}} @placeholder="email@example.com" />
+                        </div>
+                        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
+                            <InputGroup @name="Phone" @wrapperClass="mb-0i">
+                                <PhoneInput @value={{this.phone}} @onInput={{fn (mut this.phone)}} class="form-input w-full" />
+                            </InputGroup>
+                            <InputGroup @name="Role" @wrapperClass="mb-0i">
+                                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                                    <PowerSelect
+                                        @options={{this.roleOptions}}
+                                        @selected={{this.selectedRole}}
+                                        @onChange={{this.selectRole}}
+                                        @placeholder="Select role"
+                                        @triggerClass="form-select form-input"
+                                        as |role|
+                                    >
+                                        <div class="text-sm">
+                                            <div class="font-semibold normalize-in-trigger">{{role.label}}</div>
+                                            <div class="hide-from-trigger">{{role.description}}</div>
+                                        </div>
+                                    </PowerSelect>
+                                </div>
+                            </InputGroup>
+                        </div>
+                    {{/if}}
+
+                    <div>
+                        <Checkbox @value={{this.createLogin}} @onToggle={{this.toggleCreateLogin}}>Create login</Checkbox>
+                    </div>
+
+                    <div class="flex justify-end">
+                        <Button
+                            @buttonType="submit"
+                            @type="primary"
+                            @icon="plus"
+                            @text="Add Personnel"
+                            @isLoading={{this.addPersonnel.isRunning}}
+                            @disabled={{not this.canSubmit}}
+                        />
+                    </div>
+                </div>
+            </form>
+
+            <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                <div class="grid grid-cols-12 border-b border-gray-200 bg-gray-50 px-3 py-2 text-xs font-semibold text-gray-800 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100">
+                    <div class="col-span-6">Contact</div>
+                    <div class="col-span-2">Role</div>
+                    <div class="col-span-2">Status</div>
+                    <div class="col-span-2 text-right">Actions</div>
+                </div>
+
+                {{#if this.loadPersonnel.isRunning}}
+                    <div class="flex items-center justify-center p-4 text-sm text-gray-500 dark:text-gray-300">
+                        <Spinner @iconClass="text-sky-500" />
+                        <span class="ml-2">Loading personnel...</span>
+                    </div>
+                {{else if this.hasPersonnel}}
+                    {{#each this.personnels as |personnel|}}
+                        <div class="grid grid-cols-12 items-center border-b border-gray-100 px-3 py-2 text-xs last:border-b-0 dark:border-gray-700 dark:text-gray-100">
+                            <div class="col-span-6 flex min-w-0 items-center">
+                                <Image src={{personnel.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{personnel.name}} class="mr-2 h-7 w-7 rounded-md" />
+                                <div class="min-w-0">
+                                    <div class="truncate font-semibold">{{or personnel.name personnel.public_id}}</div>
+                                    <div class="truncate text-gray-500 dark:text-gray-400">{{n-a personnel.email}} {{n-a personnel.phone}}</div>
+                                </div>
+                            </div>
+                            <div class="col-span-2 capitalize">{{personnel.role}}</div>
+                            <div class="col-span-2">
+                                <Badge @status={{or personnel.status "active"}} />
+                            </div>
+                            <div class="col-span-2 flex justify-end">
+                                <Button
+                                    @type="danger"
+                                    @size="xs"
+                                    @icon="trash"
+                                    @text="Remove"
+                                    @onClick={{perform this.removePersonnel personnel}}
+                                    @isLoading={{this.removePersonnel.isRunning}}
+                                />
+                            </div>
+                        </div>
+                    {{/each}}
+                {{else}}
+                    <div class="p-4 text-sm text-gray-500 dark:text-gray-400">No personnel added yet.</div>
+                {{/if}}
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/vendor/personnel-manager.js

@@ -0,0 +1,143 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class VendorPersonnelManagerComponent extends Component {
+    @service fetch;
+    @service notifications;
+
+    @tracked personnels = [];
+    @tracked selectedContact;
+    @tracked mode = 'existing';
+    @tracked name;
+    @tracked email;
+    @tracked phone;
+    @tracked role = 'member';
+    @tracked createLogin = true;
+
+    roleOptions = [
+        {
+            label: 'Admin',
+            value: 'admin',
+            description: 'Can manage vendor account settings and personnel.',
+        },
+        {
+            label: 'Member',
+            value: 'member',
+            description: 'Can access the vendor customer workspace.',
+        },
+    ];
+
+    constructor(owner, args) {
+        super(owner, args);
+        this.loadPersonnel.perform();
+    }
+
+    get selectedRole() {
+        return this.roleOptions.find((option) => option.value === this.role);
+    }
+
+    get isAddingExistingContact() {
+        return this.mode === 'existing';
+    }
+
+    get isCreatingContact() {
+        return this.mode === 'new';
+    }
+
+    get hasPersonnel() {
+        return this.personnels.length > 0;
+    }
+
+    get canSubmit() {
+        if (this.isAddingExistingContact) {
+            return this.selectedContact;
+        }
+
+        return this.name && this.email;
+    }
+
+    @action setMode(mode) {
+        this.mode = mode;
+        this.clearForm();
+    }
+
+    @action selectContact(contact) {
+        this.selectedContact = contact;
+    }
+
+    @action selectRole(role) {
+        this.role = role?.value ?? 'member';
+    }
+
+    @action toggleCreateLogin(value) {
+        this.createLogin = value;
+    }
+
+    clearForm() {
+        this.selectedContact = null;
+        this.name = '';
+        this.email = '';
+        this.phone = '';
+        this.role = 'member';
+        this.createLogin = true;
+    }
+
+    @task *loadPersonnel() {
+        try {
+            const response = yield this.fetch.get(`vendors/${this.args.vendor.id}/personnels`, {}, { namespace: 'int/v1' });
+            this.personnels = response.personnels ?? [];
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *addPersonnel(event) {
+        if (event instanceof Event) {
+            event.preventDefault();
+        }
+
+        if (!this.canSubmit) {
+            this.notifications.warning(this.isAddingExistingContact ? 'Select a contact to add.' : 'Name and email are required.');
+            return;
+        }
+
+        try {
+            const payload = {
+                role: this.role,
+                create_login: this.createLogin,
+            };
+
+            if (this.isAddingExistingContact) {
+                payload.contact = this.selectedContact?.public_id ?? this.selectedContact?.uuid ?? this.selectedContact?.id;
+            } else {
+                payload.name = this.name;
+                payload.email = this.email;
+                payload.phone = this.phone;
+            }
+
+            const response = yield this.fetch.post(`vendors/${this.args.vendor.id}/personnels`, payload, { namespace: 'int/v1' });
+            const personnel = response.personnel;
+            if (personnel) {
+                this.personnels = [...this.personnels.filter((item) => item.contact_uuid !== personnel.contact_uuid), personnel];
+            }
+
+            this.clearForm();
+            this.notifications.success('Personnel added.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *removePersonnel(personnel) {
+        try {
+            yield this.fetch.delete(`vendors/${this.args.vendor.id}/personnels/${personnel.id}`, {}, { namespace: 'int/v1' });
+            this.personnels = this.personnels.filter((item) => item.id !== personnel.id);
+            this.notifications.success('Personnel removed.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

package/addon/components/widget/fuel-providers.hbs

@@ -0,0 +1,43 @@
+<div class="fleet-ops-widget fleet-ops-fuel-providers flex flex-col h-full {{@class}}" ...attributes>
+    <div class="flex items-center justify-between px-3 py-1.5 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-t-md shadow-sm">
+        <span class="text-xs font-bold text-black dark:text-gray-100">Fuel Integrations</span>
+        <FaIcon @icon="gas-pump" class="text-gray-400" />
+    </div>
+
+    <div class="flex-1 flex flex-col p-3 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 min-h-0">
+        {{#if this.load.isRunning}}
+            <div class="flex items-center justify-center h-full"><Spinner /></div>
+        {{else if this.error}}
+            <div class="flex items-center justify-center h-full text-xs text-red-500">{{this.error}}</div>
+        {{else if this.data}}
+            <div class="grid grid-cols-2 gap-2 mb-3">
+                <div>
+                    <div class="text-[10px] uppercase text-gray-500 dark:text-gray-400">Spend</div>
+                    <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{format-currency this.data.summary.spend this.data.summary.currency}}</div>
+                </div>
+                <div>
+                    <div class="text-[10px] uppercase text-gray-500 dark:text-gray-400">Volume</div>
+                    <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{this.data.summary.volume}} L</div>
+                </div>
+                <div>
+                    <div class="text-[10px] uppercase text-gray-500 dark:text-gray-400">Transactions</div>
+                    <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{this.data.summary.transactions}}</div>
+                </div>
+                <div>
+                    <div class="text-[10px] uppercase text-gray-500 dark:text-gray-400">Unmatched</div>
+                    <div class="text-sm font-bold {{if this.data.summary.unmatched 'text-red-600 dark:text-red-400' 'text-green-600 dark:text-green-400'}}">{{this.data.summary.unmatched}}</div>
+                </div>
+            </div>
+            <div class="flex-1 min-h-0 overflow-y-auto space-y-1">
+                {{#each this.data.providers as |provider|}}
+                    <div class="flex items-center justify-between text-xs border-t border-gray-100 dark:border-gray-800 pt-1">
+                        <span class="font-semibold uppercase text-gray-700 dark:text-gray-200">{{provider.provider}}</span>
+                        <span class="text-gray-500 dark:text-gray-400">{{provider.transactions}} txns</span>
+                    </div>
+                {{else}}
+                    <div class="flex items-center justify-center h-full text-xs text-gray-500 dark:text-gray-400">No provider transactions yet</div>
+                {{/each}}
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/fuel-providers.js

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class WidgetFuelProvidersComponent extends Component {
+    static widgetId = 'fleet-ops-fuel-providers-widget';
+
+    @service fetch;
+
+    @tracked data = null;
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/fuel-providers', { period: '30d' });
+            this.error = null;
+        } catch (error) {
+            this.error = error?.message ?? 'Failed to load fuel integration data';
+        }
+    }
+}

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

@@ -20,6 +20,7 @@
                 @zoom={{this.zoom}}
                 @zoomControl={{true}}
                 @onLoad={{this.onMapLoad}}
+                @scrollWheelZoom={{false}}
                 {{set-container-dimensions}}
                 as |layers|
             >

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

@@ -7,6 +7,7 @@ import { debug } from '@ember/debug';
 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';
 
 const DEFAULT_CENTER = [1.31, 103.85];
 const DEFAULT_ZOOM = 11;
@@ -101,13 +102,7 @@ export default class WidgetLiveFleetComponent extends Component {
      * widget is read-only.
      */
     #patchLeafletDrawInitHook() {
-        const L = typeof window !== 'undefined' ? (window.L ?? window.leaflet) : null;
-        if (L && !L.Edit) {
-            L.Edit = {};
-        }
-        if (L && !L.Marker) {
-            L.Marker = {};
-        }
+        ensureLeafletDrawEditNamespace();
     }
 
     /**

package/addon/components/widget/revenue-trend.hbs

@@ -27,7 +27,7 @@
                 {{/if}}
             </div>
             <div class="flex-1 min-h-0">
-                <Chart @type="line" @labels={{this.data.labels}} @datasets={{this.data.datasets}} @options={{this.chartOptions}} />
+                <Chart @type="line" @labels={{this.data.labels}} @datasets={{this.chartDatasets}} @options={{this.chartOptions}} />
             </div>
         {{/if}}
     </div>

package/addon/components/widget/revenue-trend.js

@@ -3,6 +3,8 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
+import getCurrency from '@fleetbase/ember-ui/utils/get-currency';
+import formatMoney from '@fleetbase/ember-accounting/utils/format-money';
 
 const PERIODS = ['7d', '30d', '90d'];
 
@@ -22,17 +24,88 @@ export default class WidgetRevenueTrendComponent extends Component {
         this.load.perform();
     }
 
+    get currencyCode() {
+        return this.data?.summary?.currency ?? 'USD';
+    }
+
+    get currency() {
+        return getCurrency(this.currencyCode) ?? getCurrency('USD');
+    }
+
+    get currencyDivisor() {
+        const precision = Number(this.currency?.precision ?? 2);
+
+        return precision > 0 ? 10 ** precision : 1;
+    }
+
+    get chartDatasets() {
+        return (
+            this.data?.datasets?.map((dataset) => {
+                if (!this.isRevenueDataset(dataset)) {
+                    return dataset;
+                }
+
+                return {
+                    ...dataset,
+                    data: dataset.data?.map((value) => this.normalizeRevenueValue(value)) ?? [],
+                };
+            }) ?? []
+        );
+    }
+
+    isRevenueDataset(dataset) {
+        return dataset?.label === 'Revenue' || dataset?.yAxisID === 'y';
+    }
+
+    normalizeRevenueValue(value) {
+        const numericValue = Number(value);
+
+        if (!Number.isFinite(numericValue)) {
+            return value;
+        }
+
+        return numericValue / this.currencyDivisor;
+    }
+
+    formatChartCurrency(value) {
+        const numericValue = Number(value);
+
+        if (!Number.isFinite(numericValue)) {
+            return value;
+        }
+
+        return formatMoney(numericValue, this.currency.symbol, this.currency.precision, this.currency.thousandSeparator, this.currency.decimalSeparator);
+    }
+
     get chartOptions() {
         return {
             responsive: true,
             maintainAspectRatio: false,
             plugins: {
                 legend: { display: false },
-                tooltip: { mode: 'index', intersect: false },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false,
+                    callbacks: {
+                        label: (context) => {
+                            if (this.isRevenueDataset(context.dataset)) {
+                                return `Revenue: ${this.formatChartCurrency(context.parsed?.y ?? context.raw)}`;
+                            }
+
+                            return `${context.dataset?.label ?? 'Value'}: ${context.parsed?.y ?? context.raw}`;
+                        },
+                    },
+                },
             },
             scales: {
                 x: { grid: { display: false } },
-                y: { beginAtZero: true, ticks: { precision: 0 } },
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        precision: this.currency.precision,
+                        callback: (value) => this.formatChartCurrency(value),
+                    },
+                },
             },
             elements: { point: { radius: 0, hoverRadius: 4 } },
         };

package/addon/controllers/connectivity/devices/index/details.js

@@ -4,14 +4,16 @@ import { isArray } from '@ember/array';
 
 export default class ConnectivityDevicesIndexDetailsController extends Controller {
     @service('universe/menu-service') menuService;
+    @service deviceActions;
     @service hostRouter;
+    @service intl;
 
     get tabs() {
         const registeredTabs = this.menuService.getMenuItems('fleet-ops:component:device:details');
         return [
             {
                 route: 'connectivity.devices.index.details.index',
-                label: 'Overview',
+                label: this.intl.t('common.overview'),
             },
             ...(isArray(registeredTabs) ? registeredTabs : []),
         ];
@@ -22,6 +24,30 @@ export default class ConnectivityDevicesIndexDetailsController extends Controlle
             {
                 icon: 'pencil',
                 fn: () => this.hostRouter.transitionTo('console.fleet-ops.connectivity.devices.index.edit', this.model),
+                permission: 'fleet-ops update device',
+            },
+            {
+                icon: 'ellipsis-h',
+                iconPrefix: 'fas',
+                renderInPlace: true,
+                items: [
+                    {
+                        text: this.intl.t('device.actions.attach-to-vehicle'),
+                        icon: 'link',
+                        fn: () => this.deviceActions.attachToVehicle(this.model),
+                        permission: 'fleet-ops update device',
+                    },
+                    ...(this.model.attachable_uuid || this.model.attached_to_name || this.model.attachable
+                        ? [
+                              {
+                                  text: this.intl.t('device.actions.detach-from-vehicle'),
+                                  icon: 'unlink',
+                                  fn: () => this.deviceActions.detachFromVehicle(this.model),
+                                  permission: 'fleet-ops update device',
+                              },
+                          ]
+                        : []),
+                ],
             },
         ];
     }

package/addon/controllers/connectivity/devices/index.js

@@ -156,6 +156,20 @@ export default class ConnectivityDevicesIndexController extends Controller {
                 {
                     separator: true,
                 },
+                {
+                    label: this.intl.t('device.actions.attach-to-vehicle'),
+                    fn: this.deviceActions.attachToVehicle,
+                    permission: 'fleet-ops update device',
+                },
+                {
+                    label: this.intl.t('device.actions.detach-from-vehicle'),
+                    fn: this.deviceActions.detachFromVehicle,
+                    permission: 'fleet-ops update device',
+                    isVisible: (device) => Boolean(device.attachable_uuid || device.attached_to_name || device.attachable),
+                },
+                {
+                    separator: true,
+                },
                 {
                     label: this.intl.t('common.delete-resource', { resource: this.intl.t('resource.device') }),
                     fn: this.deviceActions.delete,

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

@@ -0,0 +1,18 @@
+import Controller from '@ember/controller';
+import { inject as controller } from '@ember/controller';
+
+export default class ConnectivityFuelProvidersIndexDetailsSyncController extends Controller {
+    @controller('connectivity.fuel-providers.details') details;
+
+    get syncTransactions() {
+        return this.details.syncTransactions;
+    }
+
+    get lastSyncStateJson() {
+        return JSON.stringify(this.model?.connection?.last_sync_state ?? {}, null, 2);
+    }
+
+    get syncRuns() {
+        return Array.from(this.model?.syncRuns ?? []);
+    }
+}

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

@@ -0,0 +1,24 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class ConnectivityFuelProvidersIndexDetailsTransactionsController extends Controller {
+    @service hostRouter;
+
+    get columns() {
+        return [
+            { sticky: true, label: 'Transaction', valuePath: 'provider_transaction_id', cellComponent: 'click-to-copy', resizable: true },
+            { label: 'Status', valuePath: 'sync_status', cellComponent: 'table/cell/status', resizable: true },
+            { label: 'Vehicle', valuePath: 'vehicle_name', resizable: true },
+            { label: 'Station', valuePath: 'station_name', resizable: true },
+            { label: 'Liters', valuePath: 'volume', resizable: true },
+            { label: 'Amount', valuePath: 'amount', cellComponent: 'table/cell/currency', resizable: true },
+            { label: 'Fuel Report', valuePath: 'fuel_report_id', cellComponent: 'click-to-copy', resizable: true },
+            { label: 'Date', valuePath: 'transaction_at', resizable: true },
+        ];
+    }
+
+    @action refresh() {
+        return this.hostRouter.refresh();
+    }
+}