@fleetbase/fleetops-engine 0.0.1

package/addon/routes.js

@@ -0,0 +1,55 @@
+import buildRoutes from 'ember-engines/routes';
+
+export default buildRoutes(function () {
+    this.route('operations', { path: '/' }, function () {
+        this.route('dispatch');
+        this.route('zones', function () {});
+        this.route('service-rates', function () {
+            this.route('index', { path: '/' }, function () {
+                this.route('new');
+                this.route('edit', { path: '/:public_id' });
+            });
+        });
+        this.route('scheduler', function () {});
+        this.route('orders', { path: '/' }, function () {
+            this.route('index', { path: '/' }, function () {
+                this.route('new');
+                this.route('view', { path: '/:public_id' });
+                this.route('config', function () {
+                    this.route('types', { path: '/' });
+                });
+            });
+        });
+    });
+    this.route('management', { path: '/manage' }, function () {
+        this.route('fleets', function () {
+            this.route('index', { path: '/' });
+        });
+        this.route('vendors', function () {
+            this.route('index', { path: '/' });
+        });
+        this.route('drivers', function () {
+            this.route('index', { path: '/' });
+        });
+        this.route('vehicles', function () {
+            this.route('index', { path: '/' });
+        });
+        this.route('places', function () {
+            this.route('index', { path: '/' });
+        });
+        this.route('contacts', function () {
+            this.route('index', { path: '/' });
+        });
+        this.route('issues', function () {
+            this.route('index', { path: '/' });
+        });
+        this.route('fuel-reports', function () {
+            this.route('index', { path: '/' });
+        });
+        this.route('settings', function () {});
+    });
+    this.route('comms', function () {
+        this.route('chat');
+        this.route('intercom');
+    });
+});

package/addon/services/map-manager.js

@@ -0,0 +1,3 @@
+import Service from '@ember/service';
+
+export default class MapManagerService extends Service {}

package/addon/services/service-areas.js

@@ -0,0 +1,385 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { dasherize } from '@ember/string';
+import { later } from '@ember/runloop';
+import first from '@fleetbase/ember-core/utils/first';
+import GeoJson from '@fleetbase/fleetops-data/utils/geojson/geo-json';
+import MultiPolygon from '@fleetbase/fleetops-data/utils/geojson/multi-polygon';
+import Polygon from '@fleetbase/fleetops-data/utils/geojson/polygon';
+import FeatureCollection from '@fleetbase/fleetops-data/utils/geojson/feature-collection';
+
+export default class ServiceAreasService extends Service {
+    @service store;
+    @service modalsManager;
+    @service notifications;
+    @service crud;
+    @service appCache;
+
+    @tracked leafletMap;
+    @tracked serviceAreaTypes = ['neighborhood', 'city', 'region', 'state', 'province', 'country', 'continent'];
+    @tracked layerCreationContext;
+    @tracked zoneServiceAreaContext;
+
+    @action getFromCache() {
+        return this.appCache.getEmberData('serviceAreas', 'service-area');
+    }
+
+    @action removeFromCache(serviceArea) {
+        const serviceAreas = this.getFromCache();
+        const index = serviceAreas?.findIndex((sa) => sa.id === serviceArea.id);
+
+        if (index > 0) {
+            const updatedServiceAreas = serviceAreas.removeAt(index);
+            this.appCache.setEmberData('serviceAreas', updatedServiceAreas);
+        }
+    }
+
+    @action addToCache(serviceArea) {
+        const serviceAreas = this.getFromCache();
+
+        if (isArray(serviceAreas)) {
+            this.appCache.setEmberData('serviceAreas', [...serviceAreas, serviceArea]);
+        } else {
+            this.appCache.setEmberData('serviceAreas', [serviceArea]);
+        }
+    }
+
+    @action layerToTerraformerPrimitive(layer) {
+        const leafletLayerGeoJson = layer.toGeoJSON();
+        let featureCollection, feature;
+
+        if (leafletLayerGeoJson.type === 'FeatureCollection') {
+            featureCollection = new FeatureCollection(leafletLayerGeoJson);
+            feature = featureCollection.features.lastObject;
+        } else if (leafletLayerGeoJson.type === 'Feature') {
+            feature = leafletLayerGeoJson;
+        }
+
+        const primitive = new GeoJson(feature.geometry);
+
+        return primitive;
+    }
+
+    @action layerToTerraformerMultiPolygon(layer) {
+        const leafletLayerGeoJson = layer.toGeoJSON();
+        let featureCollection, feature, coordinates;
+
+        if (leafletLayerGeoJson.type === 'FeatureCollection') {
+            featureCollection = new FeatureCollection(leafletLayerGeoJson);
+            feature = featureCollection.features.lastObject;
+        } else if (leafletLayerGeoJson.type === 'Feature') {
+            feature = leafletLayerGeoJson;
+        }
+
+        coordinates = feature?.geometry?.coordinates ?? [];
+        const multipolygon = new MultiPolygon([coordinates]);
+
+        return multipolygon;
+    }
+
+    @action layerToTerraformerPolygon(layer) {
+        const leafletLayerGeoJson = layer.toGeoJSON();
+        let featureCollection, feature, coordinates;
+
+        if (leafletLayerGeoJson.type === 'FeatureCollection') {
+            featureCollection = new FeatureCollection(leafletLayerGeoJson);
+            feature = featureCollection.features.lastObject;
+        } else if (leafletLayerGeoJson.type === 'Feature') {
+            feature = leafletLayerGeoJson;
+        }
+
+        coordinates = feature?.geometry?.coordinates ?? [];
+        const polygon = new Polygon(coordinates);
+
+        return polygon;
+    }
+
+    @action clearLayerCreationContext() {
+        this.layerCreationContext = undefined;
+    }
+
+    @action setLayerCreationContext(context) {
+        this.layerCreationContext = context;
+    }
+
+    @action clearZoneServiceAreaContext() {
+        this.zoneServiceAreaContext = undefined;
+    }
+
+    @action setZoneServiceAreaContext(serviceArea) {
+        this.zoneServiceAreaContext = serviceArea;
+    }
+
+    @action getZoneServiceAreaContext() {
+        return this.zoneServiceAreaContext;
+    }
+
+    @action setMapInstance(map) {
+        this.leafletMap = map;
+    }
+
+    @action sendToLiveMap(fn, ...params) {
+        this.leafletMap?.liveMap[fn](...params);
+    }
+
+    @action createServiceArea() {
+        this.sendToLiveMap('enableDrawControls');
+        this.setLayerCreationContext('service-area');
+
+        this.notifications.info('Use drawing controls to the right to draw a service area, complete point connections to save service area.', {
+            clearDuration: 1000 * 9,
+        });
+    }
+
+    @action createGenericLayer(event, layer, options = {}) {
+        if (this.layerCreationContext === 'service-area') {
+            return this.saveServiceArea(...arguments);
+        }
+
+        if (this.layerCreationContext === 'zone') {
+            return this.saveZone(...arguments);
+        }
+
+        const { _map } = layer;
+        const border = this.layerToTerraformerMultiPolygon(layer);
+
+        if (!border) {
+            return;
+        }
+
+        this.modalsManager.show('modals/map-layer-form', {
+            title: 'Create new Layer',
+            acceptButtonText: 'Create',
+            acceptButtonIcon: 'magic',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            layerTypes: ['Service Area', 'Zone'],
+            selectedLayerType: 'Service Area',
+            serviceAreaTypes: this.serviceAreaTypes,
+            layerOptions: {},
+            confirm: (modal) => {
+                modal.startLoading();
+
+                const selectedLayerType = modal.getOption('selectedLayerType');
+                const layerOptions = modal.getOption('layerOptions');
+                let serviceArea;
+
+                // parse service area for zone
+                if (selectedLayerType === 'Zone' && !layerOptions?.service_area) {
+                    this.notifications.error('Service Area required to create Zone!');
+                    return;
+                } else {
+                    serviceArea = layerOptions.service_area;
+                }
+
+                const record = this.store.createRecord(dasherize(selectedLayerType), layerOptions);
+                record.setProperties({ border });
+
+                return record.save().then((record) => {
+                    this.notifications.success(`New ${selectedLayerType} '${record.name}' saved.`);
+
+                    // remove drawn layer
+                    _map?.removeLayer(layer);
+
+                    // if service area has been created, add to the active service areas
+                    if (selectedLayerType === 'Service Area') {
+                        this.sendToLiveMap('activateServiceArea', record);
+                        this.sendToLiveMap('focusLayerByRecord', record);
+                    } else {
+                        // if zone was created then we simply add the zone to the serviceArea selected
+                        // then we focus the service area
+                        serviceArea?.zones.pushObject(record);
+                        this.sendToLiveMap('activateServiceArea', serviceArea);
+                        this.sendToLiveMap('focusLayerByRecord', serviceArea);
+                    }
+
+                    // rebuild context menu
+                    this.sendToLiveMap('rebuildContextMenu');
+                    this.clearLayerCreationContext();
+                });
+            },
+            decline: (modal) => {
+                _map?.removeLayer(layer);
+                modal.done();
+            },
+            ...options,
+        });
+    }
+
+    @action saveServiceArea(event, layer) {
+        const { _map } = layer;
+        const border = this.layerToTerraformerMultiPolygon(layer);
+
+        if (!border) {
+            return;
+        }
+
+        const serviceArea = this.store.createRecord('service-area', {
+            border,
+            status: 'active',
+        });
+
+        return this.editServiceAreaDetails(serviceArea, {
+            title: 'Save Service Area',
+            acceptButtonText: 'Confirm & Save',
+            onFinish: () => {
+                _map?.removeLayer(layer);
+            },
+        });
+    }
+
+    @action editServiceAreaDetails(serviceArea, options = {}) {
+        this.modalsManager.show('modals/service-area-form', {
+            title: 'Edit Service Area',
+            acceptButtonText: 'Save Changes',
+            acceptButtonIcon: 'save',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            serviceAreaTypes: this.serviceAreaTypes,
+            serviceArea,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return serviceArea.save().then((serviceArea) => {
+                    this.notifications.success(`New service area '${serviceArea.name}' saved.`);
+
+                    this.clearLayerCreationContext();
+                    this.addToCache(serviceArea);
+                    this.sendToLiveMap('focusServiceArea', serviceArea);
+                    // this.sendToLiveMap('rebuildContextMenu');
+                });
+            },
+            decline: (modal) => {
+                this.clearLayerCreationContext();
+                this.sendToLiveMap('hideDrawControls');
+
+                if (serviceArea.isNew) {
+                    serviceArea.destroyRecord();
+                }
+                modal.done();
+            },
+            ...options,
+        });
+    }
+
+    @action deleteServiceArea(serviceArea, options = {}) {
+        this.sendToLiveMap('focusLayerByRecord', serviceArea);
+
+        this.crud.delete(serviceArea, {
+            onConfirm: () => {
+                this.sendToLiveMap('blurServiceArea', serviceArea);
+                this.removeFromCache(serviceArea);
+            },
+            ...options,
+        });
+    }
+
+    @action createZone(serviceArea) {
+        this.sendToLiveMap('enableDrawControls');
+        this.sendToLiveMap('focusServiceArea', serviceArea);
+        this.setZoneServiceAreaContext(serviceArea);
+        this.setLayerCreationContext('zone');
+
+        this.notifications.info('Use the drawing controls to the right to draw a zone within the service area, complete point connections to save the zone.', {
+            clearDuration: 1000 * 9,
+        });
+    }
+
+    @action saveZone(event, layer) {
+        const { _map } = layer;
+        const border = this.layerToTerraformerPolygon(layer);
+        const serviceArea = this.getZoneServiceAreaContext();
+
+        const zone = this.store.createRecord('zone', {
+            service_area_uuid: serviceArea.id,
+            serviceArea,
+            border,
+        });
+
+        return this.editZone(zone, serviceArea, {
+            title: 'Save Zone',
+            acceptButtonText: 'Confirm & Save',
+            onFinish: () => {
+                _map?.removeLayer(layer);
+            },
+        });
+    }
+
+    @action editZone(zone, serviceArea, options = {}) {
+        this.modalsManager.show('modals/zone-form', {
+            title: 'Edit Zone',
+            acceptButtonText: 'Save Changes',
+            acceptButtonIcon: 'save',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            zone,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return zone.save().then(() => {
+                    this.notifications.success(`New zone '${zone.name}' added to '${serviceArea.name}' service area.`);
+
+                    this.clearLayerCreationContext();
+                    this.clearZoneServiceAreaContext();
+                    this.sendToLiveMap('hideDrawControls');
+                    this.sendToLiveMap('blurAllServiceAreas');
+
+                    later(
+                        this,
+                        () => {
+                            this.sendToLiveMap('focusServiceArea', serviceArea);
+                        },
+                        300
+                    );
+                    // this.sendToLiveMap('rebuildContextMenu');
+                });
+            },
+            decline: (modal) => {
+                this.clearLayerCreationContext();
+                this.clearZoneServiceAreaContext();
+                this.sendToLiveMap('hideDrawControls');
+
+                if (zone.isNew) {
+                    zone.destroyRecord();
+                }
+                modal.done();
+            },
+            ...options,
+        });
+    }
+
+    @action deleteZone(zone, options = {}) {
+        this.crud.delete(zone, {
+            ...options,
+        });
+    }
+
+    @action viewServiceAreaInDialog(serviceArea, options = {}) {
+        this.modalsManager.show('modals/view-service-area', {
+            title: `Service Area (${serviceArea.get('name')})`,
+            modalClass: 'modal-lg',
+            acceptButtonText: 'Done',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            hideDeclineButton: true,
+            serviceArea,
+            ...options,
+        });
+    }
+
+    @action viewZoneInDialog(zone, options = {}) {
+        this.modalsManager.show('modals/view-zone', {
+            title: `Zone (${zone.get('name')})`,
+            modalClass: 'modal-lg',
+            acceptButtonText: 'Done',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            hideDeclineButton: true,
+            zone,
+            ...options,
+        });
+    }
+}

package/addon/templates/application.hbs

@@ -0,0 +1,27 @@
+<EmberWormhole @to="sidebar-menu-items">
+    <div class="mb-2">
+        <Button @text="Create new order" @type="primary" @size="xs" @icon="paper-plane" @iconPrefix="fas" @iconSize="sm" @wrapperClass="w-full" class="w-full" @onClick={{this.createOrder}} />
+    </div>
+    <Layout::Sidebar::Panel @open={{true}} @title="Operations">
+        <Layout::Sidebar::Item @route="console.fleet-ops.operations.orders" @icon="home">Dashboard</Layout::Sidebar::Item>
+        {{!-- <Layout::Sidebar::Item @route="console.fleet-ops.operations.scheduler" @icon="calendar-day">Scheduler</Layout::Sidebar::Item> --}}
+        <Layout::Sidebar::Item @route="console.fleet-ops.operations.service-rates" @icon="file-invoice-dollar">Service Rates</Layout::Sidebar::Item>
+    </Layout::Sidebar::Panel>
+    <Layout::Sidebar::Panel @open={{true}} @title="Resources">
+        <Layout::Sidebar::Item @route="console.fleet-ops.management.drivers" @icon="route">Drivers</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.fleet-ops.management.vehicles" @icon="truck">Vehicles</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.fleet-ops.management.fleets" @icon="user-group">Fleets</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.fleet-ops.management.vendors" @icon="warehouse">Vendors</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.fleet-ops.management.contacts" @icon="address-book">Contacts</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.fleet-ops.management.places" @icon="location-dot">Places</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.fleet-ops.management.fuel-reports" @icon="gas-pump">Fuel Reports</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.fleet-ops.management.issues" @icon="triangle-exclamation">Issues</Layout::Sidebar::Item>
+    </Layout::Sidebar::Panel>
+    <Layout::Sidebar::Item @onClick={{this.toggleSettings}} @icon="cogs">Settings</Layout::Sidebar::Item>
+</EmberWormhole>
+
+<Layout::Section::Container>
+    {{outlet}}
+</Layout::Section::Container>
+
+<SettingsWindow @isOpen={{false}} @onLoad={{this.setSettingsContext}} @onPressCancel={{this.closeSettings}} />

package/addon/templates/comms/chat.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/comms/intercom.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/comms.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/home.hbs

@@ -0,0 +1 @@
+{{outlet}}

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

@@ -0,0 +1,23 @@
+<Layout::Section::Header @title="Contacts" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
+    <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
+   {{#if (safe-has this.table "selectedRows")}}
+        <DropdownButton @icon="layer-group" @text="Bulk Action" @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+            <div class="next-dd-menu mt-2 mx-0">
+                <div class="px-1">
+                    <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteContacts)}}>
+                        Delete Contacts
+                    </a>
+                </div>
+            </div>
+        </DropdownButton>
+    {{/if}}
+    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="New" class="mr-2" @onClick={{this.createContact}} />
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text="Export" @onClick={{this.exportContacts}} />
+</Layout::Section::Header>
+
+<Layout::Section::Body>
+    <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @pagination={{true}} @paginationMeta={{@model.meta}} @page={{this.page}} @onPageChange={{fn (mut this.page)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader" />
+</Layout::Section::Body>
+
+{{outlet}}

package/addon/templates/management/contacts.hbs

@@ -0,0 +1 @@
+{{outlet}}

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

@@ -0,0 +1,35 @@
+<Layout::Section::Header @title="Drivers" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <Button @icon="grip-horizontal" @prefix="fas" @onClick={{fn this.changeLayout "grid"}} @disabled={{this.isGridLayout}} class="mr-2" />
+    <Button @icon="table" @prefix="fas" @onClick={{fn this.changeLayout "table"}} @disabled={{this.isTableLayout}} class="mr-2" />
+    <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
+    <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
+   {{#if (safe-has this.table "selectedRows")}}
+        <DropdownButton @icon="layer-group" @text="Bulk Action" @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+            <div class="next-dd-menu mt-2 mx-0">
+                <div class="px-1">
+                    <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteDrivers)}}>
+                        Delete Drivers
+                    </a>
+                </div>
+            </div>
+        </DropdownButton>
+    {{/if}}
+    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="New" class="mr-2" @onClick={{this.createDriver}} />
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text="Export" @wrapperClass="hidden md:flex" @onClick={{this.exportDrivers}} />
+</Layout::Section::Header>
+
+{{#if this.isTableLayout}}
+    <Layout::Section::Body>
+        <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @pagination={{true}} @paginationMeta={{@model.meta}} @page={{this.page}} @onPageChange={{fn (mut this.page)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader" />
+    </Layout::Section::Body>
+{{/if}}
+
+{{#if this.isGridLayout}}
+    <div class="p-5">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
+            {{#each @model as |driver|}}
+                <DriverCard @driver={{driver}} @onClick={{fn this.editDriver driver}} />
+            {{/each}}
+        </div>
+    </div>
+{{/if}}

package/addon/templates/management/drivers.hbs

@@ -0,0 +1 @@
+{{outlet}}

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

@@ -0,0 +1,22 @@
+<Layout::Section::Header @title="Fleets" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
+    <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
+   {{#if (safe-has this.table "selectedRows")}}
+        <DropdownButton @icon="layer-group" @text="Bulk Action" @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+            <div class="next-dd-menu mt-2 mx-0">
+                <div class="px-1">
+                    <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteFleets)}}>
+                        Delete Fleets
+                    </a>
+                </div>
+            </div>
+        </DropdownButton>
+    {{/if}}
+    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="New" class="mr-2" @onClick={{this.createFleet}} />
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text="Export" @onClick={{this.exportFleets}} />
+</Layout::Section::Header>
+
+<Layout::Section::Body>
+    <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @pagination={{true}} @paginationMeta={{@model.meta}} @page={{this.page}} @onPageChange={{fn (mut this.page)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader" />
+</Layout::Section::Body>
+{{outlet}}

package/addon/templates/management/fleets.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/management/fuel-reports/index.hbs

@@ -0,0 +1,21 @@
+<Layout::Section::Header @title="Fuel Reports" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
+    <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
+   {{#if (safe-has this.table "selectedRows")}}
+        <DropdownButton @icon="layer-group" @text="Bulk Action" @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+            <div class="next-dd-menu mt-2 mx-0">
+                <div class="px-1">
+                    <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteFuelReports)}}>
+                        Delete Fuel Reports
+                    </a>
+                </div>
+            </div>
+        </DropdownButton>
+    {{/if}}
+    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="New" class="mr-2" @onClick={{this.createFuelReport}} />
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text="Export" @onClick={{this.exportFuelReports}} />
+</Layout::Section::Header>
+
+<Layout::Section::Body @pagination={{true}} @onToggleAll={{this.toggleAll}} @allToggled={{this.allToggled}}>
+    <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @pagination={{true}} @paginationMeta={{@model.meta}} @page={{this.page}} @onPageChange={{fn (mut this.page)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader" />
+</Layout::Section::Body>

package/addon/templates/management/fuel-reports.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/management/index.hbs

@@ -0,0 +1,53 @@
+<div class="content">
+    <div class="row">
+        <div class="col-12 col-lg-3 col-xl-3">
+            <LinkTo @route="dashboard.fleet-ops.management.vendors" @tagName="div" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
+                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">Vendors</p>
+                <p class="text-grey-darker group-hover:text-white mb-2">Manage your vendors</p>
+            </LinkTo>
+        </div>
+        <div class="col-12 col-lg-3 col-xl-3">
+            <LinkTo @route="dashboard.fleet-ops.management.fleets" @tagName="div" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
+                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">Fleets</p>
+                <p class="text-grey-darker group-hover:text-white mb-2">Manage your vendors</p>
+            </LinkTo>
+        </div>
+        <div class="col-12 col-lg-3 col-xl-3">
+            <LinkTo @route="dashboard.fleet-ops.management.drivers" @tagName="div" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
+                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">Drivers</p>
+                <p class="text-grey-darker group-hover:text-white mb-2">Manage your vendors</p>
+            </LinkTo>
+        </div>
+        <div class="col-12 col-lg-3 col-xl-3">
+            <LinkTo @route="dashboard.fleet-ops.management.vehicles" @tagName="div" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
+                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">Vehicles</p>
+                <p class="text-grey-darker group-hover:text-white mb-2">Manage your vendors</p>
+            </LinkTo>
+        </div>
+        <div class="col-12 col-lg-3 col-xl-3">
+            <LinkTo @route="dashboard.fleet-ops.management.places" @tagName="div" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
+                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">Places</p>
+                <p class="text-grey-darker group-hover:text-white mb-2">Manage your vendors</p>
+            </LinkTo>
+        </div>
+        <div class="col-12 col-lg-3 col-xl-3">
+            <LinkTo @route="dashboard.fleet-ops.management.contacts" @tagName="div" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
+                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">Contacts</p>
+                <p class="text-grey-darker group-hover:text-white mb-2">Manage your vendors</p>
+            </LinkTo>
+        </div>
+        <div class="col-12 col-lg-3 col-xl-3">
+            <LinkTo @route="dashboard.fleet-ops.management.issues" @tagName="div" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
+                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">Issues</p>
+                <p class="text-grey-darker group-hover:text-white mb-2">Manage your vendors</p>
+            </LinkTo>
+        </div>
+        <div class="col-12 col-lg-3 col-xl-3">
+            <LinkTo @route="dashboard.fleet-ops.management.fuel-reports" @tagName="div" class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6">
+                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">Fuel Reports</p>
+                <p class="text-grey-darker group-hover:text-white mb-2">Manage your vendors</p>
+            </LinkTo>
+        </div>
+    </div>
+</div>
+{{outlet}}