@fleetbase/fleetops-engine 0.0.1

package/addon/components/route-list.hbs

@@ -0,0 +1,47 @@
+<div class="order-route-list" ...attributes>
+    {{#if @order.payload.firstWaypoint}}
+        <div class="order-route-stop {{@routeStopClass}}">
+            <div class="order-route-stop-index {{@routeStopIndexClass}}">
+                <div class="index-count">1</div>
+            </div>
+            <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
+                <DisplayPlace @place={{@order.payload.firstWaypoint}} />
+            </div>
+        </div>
+    {{/if}}
+
+    {{#if (gt @order.payload.waypoints.length 2)}}
+        <Button class="border-0 m-0 p-0 shadow-none w-full mb-3" @wrapperClass="w-full" @onClick={{this.toggleWaypointsCollapse}}>
+            <div class="px-3 py-2 w-full bg-yellow-200 text-yellow-900 rounded shadow-sm flex flex-col justify-center items-start">
+                <div class="flex flex-row items-center">
+                    <FaIcon @icon="eye" class="mr-2 text-yellow-900" />
+                    <span class="font-bold">{{if this.isWaypointsCollapsed "Tap to expand" "Tap to collapse"}}</span>
+                </div>
+                <div>{{@order.payload.middleWaypoints.length}} more waypoints</div>
+            </div>
+        </Button>
+        {{#unless this.isWaypointsCollapsed}}
+            {{#each @order.payload.middleWaypoints as |waypoint index|}}
+                <div class="order-route-stop {{@routeStopClass}}">
+                    <div class="order-route-stop-index {{@routeStopIndexClass}}">
+                        <div class="index-count">{{add index 2}}</div>
+                    </div>
+                    <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
+                        <DisplayPlace @place={{waypoint}} />
+                    </div>
+                </div>
+            {{/each}}
+        {{/unless}}
+    {{/if}}
+
+    {{#if @order.payload.lastWaypoint}}
+        <div class="order-route-stop {{@routeStopClass}}">
+            <div class="order-route-stop-index {{@routeStopIndexClass}}">
+                <div class="index-count">{{add @order.payload.middleWaypoints.length 2}}</div>
+            </div>
+            <div class="order-route-location {{@routeLocationClass}} dark:text-gray-100">
+                <DisplayPlace @place={{@order.payload.lastWaypoint}} />
+            </div>
+        </div>
+    {{/if}}
+</div>

package/addon/components/route-list.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class RouteListComponent extends Component {
+    @tracked isWaypointsCollapsed = true;
+
+    @action toggleWaypointsCollapse() {
+        this.isWaypointsCollapsed = !this.isWaypointsCollapsed;
+    }
+}

package/addon/components/settings-window.hbs

@@ -0,0 +1,15 @@
+<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} as |overlay|>
+    <Overlay::Header @overlay={{overlay}} @title="FleetOps Settings" @onPressCancel={{@onPressCancel}}>
+        <Button @icon="save" @type="primary" @text={{if (media 'isMobile') "" "Save Changes"}} @onClick={{this.saveSettings}} @isLoading={{this.isSaving}} @disabled={{or this.isLoading this.isSaving}} @isSubscriptionRequired={{true}} />
+    </Overlay::Header>
+
+    <Overlay::Body>
+        <div class="px-5 py-4">
+            <InputGroup @name="Default Adhoc Ping Distance" @type="number" @value={{this.company.options.fleetops.adhoc_distance}} @wrapperClass="mb-0" @helpText="This setting determines the default distance in meters adhoc orders should ping drivers within vicinity of the order pickup point." />
+            <div class="mt-2 px-3 py-1 rounded-lg border border-blue-600 bg-blue-100 flex items-center">
+                <FaIcon @icon="comment-exclamation" class="text-blue-900 mr-1.5" />
+                <span class="text-blue-900 text-xs">Distance must be in meters</span>
+            </div>
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/settings-window.js

@@ -0,0 +1,62 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class SettingsWindowComponent extends Component {
+    @service currentUser;
+    @service store;
+    @service notifications;
+
+    @tracked isSaving = false;
+    @tracked isLoading = false;
+    @tracked company;
+
+    @action onLoad() {
+        if (typeof this.args.onLoad === 'function') {
+            this.args.onLoad(...arguments);
+        }
+
+        this.fetchCurrentCompany();
+    }
+
+    @action fetchCurrentCompany() {
+        this.isLoading = true;
+
+        this.store
+            .findRecord('company', this.currentUser.companyId)
+            .then((company) => {
+                company.options = this.createDefaultSettings(company.options);
+                this.company = company;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action createDefaultSettings(settings) {
+        if (!settings) {
+            settings = {
+                fleetops: {
+                    adhoc_distance: 6000,
+                },
+                storefront: {},
+            };
+        }
+
+        return settings;
+    }
+
+    @action saveSettings() {
+        this.isSaving = true;
+
+        return this.company
+            .save()
+            .then(() => {
+                this.notifications.success('Settings successfully saved.');
+            })
+            .finally(() => {
+                this.isSaving = false;
+            });
+    }
+}

package/addon/components/split-grid.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/console/components/split-grid';

package/addon/components/widget/fleet-ops-quickstart.hbs

@@ -0,0 +1,40 @@
+<div class="quickstart-widget {{if this.isHidden 'hidden'}}" {{did-insert this.getTasks}} ...attributes>
+    <div class="shadow-sm content-panel">
+        <div class="content-panel-header">
+            <h3 class="text-sm font-bold dark:text-gray-100">
+                {{this.title}}
+            </h3>
+        </div>
+        <div class="text-sm content-panel-body no-padding dark:text-gray-100">
+            <div class="p-3">
+                {{#if this.isLoading}}
+                    <div class="flex text-center items-center justify-center p-4">
+                        <Spinner class="mr-2" />
+                        <span>Let's see what you can do to jumpstart operations...</span>
+                    </div>
+                {{else}}
+                    <div class="space-y-3">
+                        {{#each-in this.tasks as |action task|}}
+                            <div
+                                class="rounded-md bg-gray-900 px-3 py-2 flex items-center justify-between space-x-2">
+                                <div class="flex items-center">
+                                    <div class="mr-4">
+                                        <div class="text-center flex items-center justify-center w-6">
+                                            <FaIcon @icon={{if task.should "lightbulb-exclamation" "check-circle"}} class={{if task.should "text-yellow-400" "text-green-500"}} @size="lg" />
+                                        </div>
+                                    </div>
+                                    <div class="text-gray-100">{{task.description}}</div>
+                                </div>
+                                <div>
+                                    {{#if task.should}}
+                                        <a href="javascript:;" class="text-yellow-700 dark:text-yellow-700 hover:text-yellow-700 font-semibold underline" {{on "click" (fn this.startTask action)}}>Start Task</a>
+                                    {{/if}}
+                                </div>
+                            </div>
+                        {{/each-in}}
+                    </div>
+                {{/if}}
+            </div>
+        </div>
+    </div>
+</div>

package/addon/components/widget/fleet-ops-quickstart.js

@@ -0,0 +1,58 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed } from '@ember/object';
+
+export default class WidgetFleetOpsQuickstartComponent extends Component {
+    @service fetch;
+    @service hostRouter;
+    @tracked tasks = {};
+    @tracked isLoading = true;
+    @tracked isHidden = false;
+
+    @computed('args.title') get title() {
+        return this.args.title || 'Quickstart tasks for Fleet Ops';
+    }
+
+    @action async getTasks() {
+        this.tasks = await this.fetchTasks();
+    }
+
+    @action startTask(action) {
+        switch (action) {
+            case 'add_drivers':
+                break;
+            case 'add_fleet':
+                break;
+            case 'add_order_config':
+                break;
+            case 'add_service_area':
+                break;
+            case 'add_users':
+                break;
+            case 'add_vehicles':
+                break;
+            case 'create_first_order':
+                break;
+        }
+    }
+
+    fetchTasks() {
+        this.isLoading = true;
+
+        return new Promise((resolve) => {
+            this.fetch.get('actions/get-fleet-ops-quickstart-actions').then((tasks) => {
+                this.isLoading = false;
+                resolve(tasks);
+            });
+        });
+    }
+
+    shouldHideWidget(tasks) {
+        const shouldHide = Object.values(tasks).every((task) => task.should === false);
+
+        if (shouldHide) {
+            this.isHidden = true;
+        }
+    }
+}

package/addon/components/widget/issues.hbs

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

package/addon/components/widget/key-metrics.hbs

@@ -0,0 +1,121 @@
+<div class="key-metrics-widget" {{did-insert this.getMetrics}} ...attributes>
+    <div class="flex items-center">
+        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100 mr-2">
+            {{this.title}}
+        </h3>
+        {{#if this.isLoading}}
+            <div>
+                <Spinner class="text-sky-400" />
+            </div>
+        {{/if}}
+    </div>
+    <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-4">
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Earnings
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{format-currency this.metrics.earnings}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Fuel Expenses
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{format-currency this.metrics.fuel_cost}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Distance Traveled
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{format-meters this.metrics.distance_traveled}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Total Time
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{format-duration this.metrics.total_time_traveled}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Orders Scheduled
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{this.metrics.orders_scheduled}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Orders Completed
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{this.metrics.orders_completed}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Orders In Progress
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{this.metrics.orders_in_progress}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Orders Canceled
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{this.metrics.orders_canceled}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Drivers Online
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{this.metrics.drivers_online}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Customers
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{this.metrics.customers}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Open Issue
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{this.metrics.open_issues}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Closed Issues
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">
+                {{this.metrics.resolved_issues}}
+            </dd>
+        </div>
+    </dl>
+</div>

package/addon/components/widget/key-metrics.js

@@ -0,0 +1,46 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed } from '@ember/object';
+import moment from 'moment';
+
+export default class WidgetKeyMetricsComponent extends Component {
+    @service fetch;
+    @tracked metrics = {
+        distance_traveled: 0,
+        total_time_traveled: 0,
+        drivers_online: 0,
+        customers: 0,
+        earnings: 0,
+        fuel_cost: 0,
+        orders_canceled: 0,
+        orders_completed: 0,
+        orders_in_progress: 0,
+        orders_scheduled: 0,
+        open_issues: 0,
+        resolved_issues: 0,
+    };
+    @tracked isLoading = true;
+
+    @computed('args.title') get title() {
+        return this.args.title || 'This Month';
+    }
+
+    @action async getMetrics() {
+        const start = moment().startOf('month').toString();
+        const end = moment().endOf('month').toString();
+
+        this.metrics = await this.fetchMetrics(start, end);
+    }
+
+    fetchMetrics(start, end) {
+        this.isLoading = true;
+
+        return new Promise((resolve) => {
+            this.fetch.get('actions/get-fleet-ops-key-metrics', { start, end }).then((metrics) => {
+                this.isLoading = false;
+                resolve(metrics);
+            });
+        });
+    }
+}

package/addon/components/widget/live-order-map.hbs

@@ -0,0 +1,59 @@
+<div class="shadow-sm content-panel">
+    <div class="content-panel-header">
+        <h3 class="text-sm font-bold dark:text-gray-100">
+            {{this.title}}
+        </h3>
+    </div>
+    <div class="text-sm content-panel-body no-padding dark:text-gray-100">
+        <div class="grid grid-cols-8">
+            <div class="col-span-5 border-r border-gray-900">
+                <LiveMap @mapClass="z-0 shadow-md rounded-bl h-screen-40 w-full" @onReady={{fn (mut this.isLoading) false}} @onRoutesLoaded={{fn (mut this.routes)}} />
+            </div>
+
+            <div class="col-span-3">
+                <div class="dark:border-gray-900 bg-gray-100 dark:bg-gray-800 shadow-sm">
+                    {{#if this.isLoading}}
+                        <div class="flex text-center items-center justify-center p-4">
+                            <Spinner class="mr-2" />
+                            <span>Loading orders in progress...</span>
+                        </div>
+                    {{else}}
+                        {{#each this.routes as |route|}}
+                            <div class="border-b border-gray-900 px-3 py-2">
+                                <div class="flex justify-between">
+                                    <div class="flex-1">
+                                        <div class="flex justify-between border border-gray-900 bg-gray-900 shadow-sm rounded-md px-3 py-2 mb-6">
+                                            <div>
+                                                <h4 class="font-semibold mb-2">{{route.order_public_id}}</h4>
+                                                <Badge @status={{route.order_status}} @helpText={{concat "Dispatched at " route.order_dispatched_at}} />
+                                            </div>
+                                            <div>
+                                                <div>
+                                                    <div class="mb-1 text-xs text-gray-100">Driver Assigned</div>
+                                                    <DriverCardMini @driver={{route.driver}} />
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <HorizontalRoute @payload={{route.payload}} />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        {{else}}
+                            <div class="h-70 p-3 flex flex-col items-center justify-center">
+                                <div class="mb-4">
+                                    <FaIcon @icon="satellite-dish" @size="3x" />
+                                </div>
+                                <div class="dark:text-gray-100 text-center">
+                                    <div class="font-semibold text-lg mb-2">No orders in progress</div>
+                                    <p class="">When orders are in progress they will display in this widget and show real time activity.</p>
+                                </div>
+                            </div>
+                        {{/each}}
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/addon/components/widget/live-order-map.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { computed } from '@ember/object';
+
+export default class WidgetLiveOrderMapComponent extends Component {
+    @tracked routes = [];
+    @tracked isLoading = false;
+    @computed('args.title') get title() {
+        return this.args.title || 'Live Orders';
+    }
+}

package/addon/components/widget/recent-orders.hbs

@@ -0,0 +1,35 @@
+<div class="recent-orders-widget" {{did-insert this.getRecentOrders}} ...attributes>
+    <div class="shadow-sm content-panel">
+        <div class="content-panel-header">
+            <h3 class="text-sm font-bold dark:text-gray-100">
+                Recent Orders
+            </h3>
+        </div>
+        <div class="text-sm content-panel-body no-padding dark:text-gray-100">
+            {{#if this.isLoading}}
+                <div class="flex text-center items-center justify-center p-4">
+                    Loading recent orders...
+                </div>
+            {{else}}
+                {{#each this.recentOrders as |order|}}
+                    <div class="p-4 border-b border-gray-900 flex justify-between items-center">
+                        <div>{{order.public_id}}</div>
+                        <div>
+                            <Badge @status={{order.status}} />
+                        </div>
+                    </div>
+                {{else}}
+                    <div class="h-64 p-8 flex flex-col items-center justify-center">
+                        <div class="mb-4">
+                            <FaIcon @icon="calendar-exclamation" @size="3x" />
+                        </div>
+                        <div class="dark:text-gray-100 text-center">
+                            <div class="font-semibold text-lg mb-2">No orders for this week</div>
+                            <p class="">There hasn't been any orders this week, get movement going by <LinkTo @route="operations.orders.index.new">creating a new order</LinkTo> or allow your customers to submit orders via API.</p>
+                        </div>
+                    </div>
+                {{/each}}
+            {{/if}}
+        </div>
+    </div>
+</div>

package/addon/components/widget/recent-orders.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import moment from 'moment';
+
+export default class WidgetRecentOrdersComponent extends Component {
+    @service store;
+    @tracked recentOrders = [];
+    @tracked isLoading = false;
+    @action async getRecentOrders() {
+        const start = moment().startOf('week').toString();
+        const end = moment().endOf('week').toString();
+
+        this.isLoading = true;
+        const recentOrders = await this.store.query('order', {
+            limit: 12,
+            after: start,
+            before: end,
+        });
+        this.isLoading = false;
+        this.recentOrders = recentOrders;
+    }
+}

package/addon/components/widget/transaction-earnings.hbs

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

package/addon/components/widget/transactions.hbs

@@ -0,0 +1,36 @@
+<div class="recent-orders-widget" {{did-insert this.getRecentTransactions}} ...attributes>
+    <div class="shadow-sm content-panel">
+        <div class="content-panel-header">
+            <h3 class="text-sm font-bold dark:text-gray-100">
+                Recent Transactions
+            </h3>
+        </div>
+        <div class="text-sm content-panel-body no-padding dark:text-gray-100">
+            {{#if this.isLoading}}
+                <div class="flex text-center items-center justify-center p-4">
+                    <Spinner class="mr-2" />
+                    <span>Loading recent transactions...</span>
+                </div>
+            {{else}}
+                {{#each this.recentTransactions as |transaction|}}
+                    <div class="p-4 border-b border-gray-900 flex justify-between items-center">
+                        <div>{{transaction.public_id}}</div>
+                        <div>
+                            <Badge @status={{transaction.status}} />
+                        </div>
+                    </div>
+                {{else}}
+                    <div class="h-64 p-8 flex flex-col items-center justify-center">
+                        <div class="mb-4">
+                            <FaIcon @icon="funnel-dollar" @size="3x" />
+                        </div>
+                        <div class="dark:text-gray-100 text-center">
+                            <div class="font-semibold text-lg mb-2">No transactions this week</div>
+                            <p class="">When orders are going through with service rates, Fleetbase tracks transactions automatically.</p>
+                        </div>
+                    </div>
+                {{/each}}
+            {{/if}}
+        </div>
+    </div>
+</div>

package/addon/components/widget/transactions.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import moment from 'moment';
+
+export default class WidgetTransactionsComponent extends Component {
+    @service store;
+    @tracked recentTransactions = [];
+    @tracked isLoading = true;
+
+    @action async getRecentTransactions() {
+        const start = moment().startOf('week').toString();
+        const end = moment().endOf('week').toString();
+
+        this.recentTransactions = await this.fetchTransactions(start, end);
+    }
+
+    fetchTransactions(after, before) {
+        this.isLoading = true;
+
+        return new Promise((resolve) => {
+            this.store.query('transaction', { limit: 12, after, before }).then((recentTransactions) => {
+                this.isLoading = false;
+                resolve(recentTransactions);
+            });
+        });
+    }
+}

package/addon/components/widget/weekly-orders.hbs

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

package/addon/components/widget/weekly-orders.js

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