@fleetbase/fleetops-engine 0.0.1

package/addon/components/map-container/toolbar/zones-panel.hbs

@@ -0,0 +1,41 @@
+<div class="next-dd-menu overflow-visible" {{did-insert this.setupZonesPanel}}>
+    <div class="px-1">
+        <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300">
+            Service Areas
+        </div>
+    </div>
+    <div class="next-dd-menu-seperator"></div>
+    <div class="px-1">
+        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.serviceAreaAction "createServiceArea" @dd)}}>Create new service area...</a>
+        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.liveMapAction "focusAllServiceAreas" @dd)}}>Show all service areas</a>
+        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.liveMapAction "blurAllServiceAreas" @dd)}}>Hide all service areas</a>
+        {{#each this.serviceAreaRecords as |serviceArea|}}
+            <BasicDropdownHover @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+                <dd.Trigger class="next-dd-item {{if dd.isOpen 'active'}}">
+                    <FaIcon @icon="drafting-compass" class="mr-2" />
+                    <span>{{serviceArea.name}}</span>
+                </dd.Trigger>
+                <dd.Content>
+                    <div class="next-dd-menu">
+                        <div class="px-1">
+                            <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300 truncate">
+                                <FaIcon @icon="drafting-compass" class="mr-2" />
+                                <span>{{serviceArea.name}} Actions...</span>
+                            </div>
+                        </div>
+                        <div class="next-dd-menu-seperator"></div>
+                        <div class="px-1">
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.liveMapAction "focusServiceArea" dd serviceArea)}}>Focus {{serviceArea.name}}...</a>
+                            {{#if (eq serviceArea this.activeServiceArea)}}
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.liveMapAction "blurServiceArea" dd serviceArea)}}>Blur service area...</a>
+                            {{/if}}
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.serviceAreaAction "createZone" dd serviceArea)}}>Create zone inside...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.serviceAreaAction "editServiceAreaDetails" dd serviceArea)}}>Edit {{serviceArea.name}}...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.serviceAreaAction "deleteServiceArea" dd serviceArea)}}>Delete {{serviceArea.name}}...</a>
+                        </div>
+                    </div>
+                </dd.Content>
+            </BasicDropdownHover>
+        {{/each}}
+    </div>
+</div>

package/addon/components/map-container/toolbar/zones-panel.js

@@ -0,0 +1,106 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { calculateInPlacePosition } from 'ember-basic-dropdown/utils/calculate-position';
+
+export default class MapContainerToolbarZonesPanelComponent extends Component {
+    @service store;
+    @service modalsManager;
+    @service notifications;
+    @service crud;
+    @service serviceAreas;
+    @service appCache;
+
+    @tracked isLoading = false;
+    @tracked serviceAreaRecords = [];
+    @tracked editableLayers = [];
+    @tracked serviceAreaTypes = ['neighborhood', 'city', 'region', 'state', 'province', 'country', 'continent'];
+    @alias('args.map') leafletMap;
+    @alias('args.map.liveMap.activeServiceArea') activeServiceArea;
+    @alias('args.map.liveMap.activeFeatureGroup') activeFeatureGroup;
+
+    @action setupZonesPanel() {
+        this.fetchServiceAreas();
+        this.serviceAreas.setMapInstance(this.leafletMap);
+    }
+
+    @action calculatePosition(trigger) {
+        const position = calculateInPlacePosition(...arguments);
+        const rect = trigger.getBoundingClientRect();
+
+        position.style.top = '-0.5rem';
+        position.style.left = `calc(${rect.width}px + 0.75rem)`;
+
+        return position;
+    }
+
+    @action onAction(actionName, dd, ...params) {
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof this[actionName] === 'function') {
+            this[actionName](...params);
+        }
+
+        if (typeof this.args[actionName] === 'function') {
+            this.args[actionName](...params);
+        }
+
+        if (typeof this.args[`on${actionName?.toUpperCase()}`] === 'function') {
+            this.args[`on${actionName?.toUpperCase()}`](...params);
+        }
+    }
+
+    @action serviceAreaAction(actionName, dropdown, ...params) {
+        const { dd } = this.args;
+
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof dropdown?.actions?.close === 'function') {
+            dropdown.actions.close();
+        }
+
+        if (typeof this.serviceAreas[actionName] === 'function') {
+            this.serviceAreas[actionName](...params);
+        }
+    }
+
+    @action liveMapAction(actionName, dropdown, ...params) {
+        const { dd } = this.args;
+
+        if (typeof dd?.actions?.close === 'function') {
+            dd.actions.close();
+        }
+
+        if (typeof dropdown?.actions?.close === 'function') {
+            dropdown.actions.close();
+        }
+
+        if (typeof this.leafletMap?.liveMap[actionName] === 'function') {
+            this.leafletMap?.liveMap[actionName](...params);
+        }
+    }
+
+    @action fetchServiceAreas() {
+        this.isLoading = true;
+
+        if (this.appCache.has('serviceAreas')) {
+            this.serviceAreaRecords = this.appCache.getEmberData('serviceAreas', 'service-area');
+        }
+
+        this.store
+            .query('service-area', { with: ['zones'] })
+            .then((serviceAreaRecords) => {
+                this.serviceAreaRecords = serviceAreaRecords;
+                this.appCache.setEmberData('serviceAreas', serviceAreaRecords);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

package/addon/components/map-container/toolbar-container.hbs

@@ -0,0 +1 @@
+<div class="next-map-container-toolbar-container {{if @horizontal 'toolbar-container-horizontal'}} {{if (eq @position 'bottom') 'position-bottom'}}" ...attributes>{{yield}}</div>

package/addon/components/map-container/toolbar-container.js

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

package/addon/components/map-container/toolbar.hbs

@@ -0,0 +1,51 @@
+<MapContainer::ToolbarContainer ...attributes>
+    <div class="next-map-container-toolbar next-map-container-toolbar-zoom-control">
+        <div>
+            <button type="button" class="toolbar-button" {{on "click" (fn this.onAction "onZoomIn")}}>
+                <FaIcon @icon="plus" @prefix="fas" class="text-gray-100" />
+            </button>
+        </div>
+        <div>
+            <button type="button" class="toolbar-button" {{on "click" (fn this.onAction "onZoomOut")}}>
+                <FaIcon @icon="minus" @prefix="fas" class="text-gray-100" />
+            </button>
+        </div>
+    </div>
+    <div class="next-map-container-toolbar-panel next-map-container-toolbar-actions">
+        <button type="button" class="toolbar-button is-action" {{on "click" (fn this.onAction "onPressCreateOrder")}}>
+            <FaIcon @icon="paper-plane" />
+            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                <InputInfo @text="Create Order" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+            </Attach::Tooltip>
+        </button>
+        <button type="button" class="toolbar-button" {{on "click" (fn this.onAction "onPressSearch")}}>
+            <FaIcon @icon="search" />
+            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                <InputInfo @text="Search" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+            </Attach::Tooltip>
+        </button>
+        <button type="button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressViewOrders")}}>
+            <div class="active-orders-count absolute top-0 right-0 -mr-2.5 -mt-1">
+                <div class="relative flex w-5 h-5 rounded-full">
+                    <div class="absolute inset-0 rounded-full w-5 h-5 text-xs bg-blue-500 opacity-75 {{if @activeOrdersCount 'animate-ping'}}"></div>
+                    <div class="relative inline-flex items-center justify-center rounded-full w-5 h-5 text-xs bg-blue-500 text-white z-10">{{@activeOrdersCount}}</div>
+                </div>
+            </div>
+            <FaIcon @icon="layer-group" />
+            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                <InputInfo @text="View Orders" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+            </Attach::Tooltip>
+        </button>
+        <BasicDropdown @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+            <dd.Trigger class="toolbar-button">
+                <FaIcon @icon="map-marked-alt" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                    <InputInfo @text="Service Areas" @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
+                </Attach::Tooltip>
+            </dd.Trigger>
+            <dd.Content>
+                <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
+            </dd.Content>
+        </BasicDropdown>
+    </div>
+</MapContainer::ToolbarContainer>

package/addon/components/map-container/toolbar.js

@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class MapContainerToolbarComponent extends Component {
+    @action calculatePosition(trigger) {
+        let { width } = trigger.getBoundingClientRect();
+
+        let style = {
+            marginTop: '0px',
+            left: `${width + 13}px`,
+            top: '0px',
+        };
+
+        return { style };
+    }
+
+    @action onAction(actionName, ...params) {
+        if (typeof this[actionName] === 'function') {
+            this[actionName](...params);
+        }
+
+        if (typeof this.args[actionName] === 'function') {
+            this.args[actionName](...params);
+        }
+    }
+
+    @action onZoomOut() {
+        this.args.map?.zoomOut();
+    }
+
+    @action onZoomIn() {
+        this.args.map?.zoomIn();
+    }
+}

package/addon/components/map-container/topbar.hbs

@@ -0,0 +1 @@
+<div class="next-map-container-topbar" ...attributes>{{yield}}</div>

package/addon/components/map-container/topbar.js

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

package/addon/components/map-container/view-switch.hbs

@@ -0,0 +1 @@
+<div class="next-map-container-view-switch" ...attributes>{{yield}}</div>

package/addon/components/map-container/view-switch.js

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

package/addon/components/map-container.hbs

@@ -0,0 +1 @@
+<div class="next-map-container next-map-container-layout-{{@layout}}" {{did-insert this.setupComponent}}>{{yield}}</div>

package/addon/components/map-container.js

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class MapContainerComponent extends Component {
+    @tracked mapContainerNodeRef;
+
+    @action setupComponent(element) {
+        this.mapContainerNodeRef = element;
+
+        if (typeof this.args.onReady === 'function') {
+            this.args.onReady(element);
+        }
+    }
+}

package/addon/components/modals/assign-driver.hbs

@@ -0,0 +1,24 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Select Driver">
+            <ModelSelect @modelName="driver" @selectedModel={{@options.order.driver_assigned}} @placeholder="Select Driver to Assign" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.order.driver_assigned)}} as |model|>
+                <div class="flex items-center">
+                    <div class="w-7">
+                        <FaIcon @icon="id-card-alt" />
+                    </div>
+                    <div class="flex-1 flex flex-row truncate">
+                        <span class="uppercase mr-2">{{model.name}}</span>
+                        <span class="uppercase">{{model.phone}}</span>
+                    </div>
+                    {{#if @options.order.facilitator}}
+                        <div class="px-1 ml-2 leading-5 bg-green-400 rounded shadow">
+                            <span class="text-xs text-green-900">
+                                {{@options.order.facilitator.name}}
+                            </span>
+                        </div>
+                    {{/if}}
+                </div>
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/assign-driver.js

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

package/addon/components/modals/clone-config-form.hbs

@@ -0,0 +1,6 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Config Name" @value={{@options.name}} />
+        <InputGroup @name="Config Description" @value={{@options.description}} />
+    </div>
+</Modal::Default>

package/addon/components/modals/contact-details.hbs

@@ -0,0 +1,44 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex">
+            <div class="w-32 mb-6 mr-6">
+                <img src={{@options.contact.photo_url}} alt={{@options.contact.name}} class="w-full rounded-md" />
+            </div>
+            <div class="flex-1">
+                <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 text-xs dark:text-gray-100">
+
+                    <div class="field-info-container">
+                        <div class="field-name">Website URL</div>
+                        <div class="field-value">{{n-a @options.contact.name}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Title</div>
+                        <div class="field-value">{{n-a @options.contact.title}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Internal ID</div>
+                        <div class="field-value">{{n-a @options.contact.internal_id}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Email</div>
+                        <div class="field-value">{{n-a @options.contact.email}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Phone</div>
+                        <div class="field-value">{{n-a @options.contact.phone}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Type</div>
+                        <div class="field-value"><Badge @status={{@options.contact.type}} /></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/contact-form.hbs

@@ -0,0 +1,56 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex">
+            <div class="w-32 mb-6 mr-6">
+                <Image src={{@options.contact.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{@options.contact.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
+                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{fn @options.uploadNewPhoto}} class="w-32" />
+            </div>
+            <div class="flex-1">
+                <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                    <div class="input-group">
+                        <label>
+                            Name
+                        </label>
+                        <Input @value={{@options.contact.name}} type="text" class="w-full form-input" placeholder="Name" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Title
+                        </label>
+                        <Input @value={{@options.contact.title}} type="text" class="w-full form-input" placeholder="Title" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Internal ID
+                        </label>
+                        <Input @value={{@options.contact.internal_id}} type="text" class="w-full form-input" placeholder="Internal ID" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Email
+                        </label>
+                        <Input @value={{@options.contact.email}} type="text" class="w-full form-input" placeholder="Email" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Phone
+                        </label>
+                        <PhoneInput @value={{@options.contact.phone}} @onInput={{fn (mut @options.contact.phone)}} class="form-input w-full" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Type
+                        </label>
+                        <Select @options={{@options.contactTypes}} @value={{@options.contact.type}} @onSelect={{fn (mut @options.contact.type)}} class="form-input w-full" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/driver-assign-order.hbs

@@ -0,0 +1,67 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
+            <InputGroup @name="Select Order">
+                <ModelSelect class="listbox-lg" @modelName="order" @selectedModel={{@options.selectedOrder}} @placeholder="Select Order to Assign" @triggerClass="form-select form-input" @infiniteScroll={{false}} @query={{hash sort="-created_at" unassigned=true}} @renderInPlace={{true}} @onChange={{@options.selectOrder}} as |order|>
+                    <div class="mb-3 flex items-center justify-between">
+                        <div>{{order.public_id}} - {{order.createdAt}}</div>
+                        <Badge @hideStatusDot={{true}} @status={{order.status}} />
+                    </div>
+                    <div class="-ml-2">
+                        {{#if @order.payload.hasWaypoints}}
+                            <div class="order-route-list storefront flex-1">
+                                <div class="order-route-stop">
+                                    <div class="order-route-stop-index">
+                                        <div class="index-count">
+                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
+                                        </div>
+                                    </div>
+                                    <div class="order-route-location dark:text-gray-100">
+                                        <div>{{or order.payload.waypoints.firstObject.name order.payload.waypoints.firstObject.street1}}</div>
+                                        <div>{{or order.payload.waypoints.firstObject.city order.payload.waypoints.firstObject.postal_code}}</div>
+                                    </div>
+                                </div>
+                                <div class="order-route-stop">
+                                    <div class="order-route-stop-index">
+                                        <div class="index-count">
+                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
+                                        </div>
+                                    </div>
+                                    <div class="order-route-location dark:text-gray-100">
+                                        <div>{{or order.payload.waypoints.lastObject.name order.payload.waypoints.lastObject.street1}}</div>
+                                        <div>{{or order.payload.waypoints.lastObject.city order.payload.waypoints.lastObject.postal_code}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        {{else}}
+                            <div class="order-route-list storefront flex-1">
+                                <div class="order-route-stop">
+                                    <div class="order-route-stop-index">
+                                        <div class="index-count">
+                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
+                                        </div>
+                                    </div>
+                                    <div class="order-route-location dark:text-gray-100">
+                                        <div>{{or order.payload.pickup.name order.payload.pickup.street1}}</div>
+                                        <div>{{or order.payload.pickup.city order.payload.pickup.postal_code}}</div>
+                                    </div>
+                                </div>
+                                <div class="order-route-stop">
+                                    <div class="order-route-stop-index">
+                                        <div class="index-count">
+                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
+                                        </div>
+                                    </div>
+                                    <div class="order-route-location dark:text-gray-100">
+                                        <div>{{or order.payload.dropoff.name order.payload.dropoff.street1}}</div>
+                                        <div>{{or order.payload.dropoff.city order.payload.dropoff.postal_code}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        {{/if}}
+                    </div>
+                </ModelSelect>
+            </InputGroup>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/driver-assign-vehicle.hbs

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
+            <InputGroup @name="Select Vehicle" @value={{@options.driver.vehicle_uuid}}>
+                <ModelSelect
+                    @modelName="vehicle"
+                    @selectedModel={{@options.driver.vehicle_uuid}}
+                    @placeholder="Select Vehicle to Assign"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @options.driver.vehicle_uuid)}} as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/driver-assign-vendor.hbs

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
+            <InputGroup @name="Select Vendor" @value={{@options.driver.vendor_uuid}}>
+                <ModelSelect
+                    @modelName="vendor"
+                    @selectedModel={{@options.driver.vendor_uuid}}
+                    @placeholder="Select Vendor"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @options.driver.vendor_uuid)}} as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/driver-details.hbs

@@ -0,0 +1,85 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex flex-col md:flex-row">
+            <div class="lg:flex-none lg:w-40 mb-4 md:mb-0">
+                <div class="w-32">
+                    <img src={{@options.driver.photo_url}} alt={{@options.driver.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
+                </div>
+            </div>
+            <div class="flex-1 grid grid-cols-2 md:grid-cols-3 gap-2">
+                <div class="field-info-container ">
+                    <div class="field-name">Name</div>
+                    <div class="field-value">{{n-a @options.driver.name}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">ID</div>
+                    <div class="field-value">{{n-a @options.driver.public_id}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Internal ID</div>
+                    <div class="field-value">{{n-a @options.driver.internal_id}}</div>
+                </div>
+                <div class="field-info-container md:col-span-3">
+                    <div class="field-name">Drivers License</div>
+                    <div class="field-value">{{n-a @options.driver.drivers_license}}</div>
+                </div>
+                <div class="field-info-container md:col-span-3">
+                    <div class="field-name">Email</div>
+                    <div class="field-value">{{n-a @options.driver.email}}</div>
+                </div>
+                <div class="field-info-container md:col-span-3">
+                    <div class="field-name">Phone</div>
+                    <div class="field-value">{{n-a @options.driver.phone}}</div>
+                </div>
+                <div class="field-info-container md:col-span-3">
+                    <div class="field-name">Status</div>
+                    <div class="field-value">
+                        <Badge @status={{@options.driver.status}} />
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Current Job</div>
+                    <div class="field-value">{{n-a @options.driver.current_job_id}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Vehicle</div>
+                    <div class="field-value">
+                        {{#if @options.driver.vehicle_uuid}}
+                            <a href="javascript:;" {{on "click" @options.viewVehicle}}>{{@options.driver.vehicle_name}}</a>
+                        {{else}}
+                            {{n-a @options.driver.vehicle_name}}
+                        {{/if}}
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Vendor</div>
+                    <div class="field-value">
+                        {{#if @options.driver.vendor_uuid}}
+                            <a href="javascript:;" {{on "click" @options.viewVendor}}>{{@options.driver.vendor_name}}</a>
+                        {{else}}
+                            {{n-a @options.driver.vendor_name}}
+                        {{/if}}
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">City</div>
+                    <div class="field-value">{{n-a @options.driver.city}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Country</div>
+                    <div class="field-value">
+                        <CountryName @country={{@options.driver.country}} />
+                    </div>
+                </div>
+                <div class="field-info-container md:col-span-3">
+                    <div class="field-name">Coordinates</div>
+                    <div class="field-value">{{point-coordinates @options.driver.location}}</div>
+                    <a href="javascript:;" class="btn btn-xs btn-default mt-1" {{on "click" @options.viewDriverOnMap}}>
+                        <FaIcon @icon="map" class="mr-1.5" />
+                        <span>View on map</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</Modal::Default>