@fleetbase/fleetops-engine 0.6.18 → 0.6.19

package/addon/components/customer/orders.js

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { isArray } from '@ember/array';
 import { later } from '@ember/runloop';
+import { getOwner } from '@ember/application';
 import { debug } from '@ember/debug';
 import { task, timeout } from 'ember-concurrency';
 import { Control as RoutingControl } from '@fleetbase/leaflet-routing-machine';
@@ -22,7 +23,6 @@ export default class CustomerOrdersComponent extends Component {
     @service currentUser;
     @service universe;
     @service urlSearchParams;
-    @service modalsManager;
     @service customerSession;
     @service hostRouter;
     @service leafletRoutingControl;
@@ -40,11 +40,22 @@ export default class CustomerOrdersComponent extends Component {
     @tracked query;
     @tracked tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
 
+    get modalsManager() {
+        const owner = getOwner(this);
+        const application = typeof this.universe.getApplicationInstance === 'function' ? this.universe.getApplicationInstance() : window.Fleetbase;
+        const modalsManager = application ? application.lookup('service:modals-manager') : owner.lookup('service:modals-manager');
+        return modalsManager;
+    }
+
     constructor(owner) {
         super(...arguments);
         registerComponent(owner, OrderProgressCardComponent, { as: 'order-progress-card' });
         registerComponent(owner, DisplayPlaceComponent, { as: 'display-place' });
         registerComponent(owner, CustomerCreateOrderFormComponent, { as: 'customer/create-order-form' });
+        // hack - just stick currentUser serivce on the location work
+        if (this.location && typeof this.location === 'object') {
+            this.location.currentUser = this.currentUser;
+        }
         this.loadCustomerOrders.perform();
         later(
             this,

package/addon/components/device/details.hbs

@@ -0,0 +1,105 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title={{t "device.fields.title"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.device-name"}}</div>
+                <div class="field-value">{{n-a @resource.device_name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.device-type"}}</div>
+                <div class="field-value">{{smart-humanize @resource.device_type}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.device-id"}}</div>
+                <div class="field-value">{{n-a @resource.device_id}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.provider"}}</div>
+                <div class="field-value">{{n-a @resource.device_provider}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.model"}}</div>
+                <div class="field-value">{{n-a @resource.device_model}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.manufacturer"}}</div>
+                <div class="field-value">{{n-a @resource.manufacturer}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.serial-number"}}</div>
+                <div class="field-value">{{n-a @resource.serial_number}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.location"}}</div>
+                <div class="field-value">{{n-a @resource.device_location}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.status"}}</div>
+                <div class="field-value">
+                    <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.installation-date"}}</div>
+                <div class="field-value">{{format-date @resource.installation_date}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.last-maintenance"}}</div>
+                <div class="field-value">{{format-date @resource.last_maintenance_date}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.data-frequency"}}</div>
+                <div class="field-value">{{n-a @resource.data_frequency}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.telematic"}}</div>
+                <div class="field-value">{{n-a @resource.telematic_name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.warranty"}}</div>
+                <div class="field-value">{{n-a @resource.warranty_name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.online-status"}}</div>
+                <div class="field-value">
+                    {{#if @resource.is_online}}
+                        <Badge @status="success">{{t "device.fields.online"}}</Badge>
+                    {{else}}
+                        <Badge @status="danger">{{t "device.fields.offline"}}</Badge>
+                    {{/if}}
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.attached-to"}}</div>
+                <div class="field-value">{{n-a @resource.attached_to_name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "device.fields.last-online"}}</div>
+                <div class="field-value">{{format-date @resource.last_online_at}}</div>
+            </div>
+
+            <div class="field-info-container col-span-3">
+                <div class="field-name">{{t "device.fields.notes"}}</div>
+                <div class="field-value">{{n-a @resource.notes}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/device/details.js

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

package/addon/components/device/form.hbs

@@ -0,0 +1,194 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title={{t "device.fields.title"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name={{t "device.fields.device-name"}} @wrapperClass="col-span-2">
+                <Input
+                    @value={{@resource.device_name}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "device.fields.device-name-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.device-type"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.deviceTypeOptions}}
+                        @selected={{@resource.device_type}}
+                        @onChange={{fn (mut @resource.device_type)}}
+                        @placeholder={{t "device.fields.device-type-placeholder"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |type|
+                    >
+                        {{smart-humanize type}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.device-id"}}>
+                <Input
+                    @value={{@resource.device_id}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "device.fields.device-id-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.device-provider"}}>
+                <Input
+                    @value={{@resource.device_provider}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "device.fields.device-provider-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.device-model"}}>
+                <Input
+                    @value={{@resource.device_model}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "device.fields.device-model-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.manufacturer"}}>
+                <Input
+                    @value={{@resource.manufacturer}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "device.fields.manufacturer-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.serial-number"}}>
+                <Input
+                    @value={{@resource.serial_number}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "device.fields.serial-number-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.device-location"}}>
+                <Input
+                    @value={{@resource.device_location}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "device.fields.device-location-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.installation-date"}}>
+                <DatePicker
+                    @value={{@resource.installation_date}}
+                    @onChange={{fn (mut @resource.installation_date)}}
+                    @placeholder={{t "device.fields.installation-date-placeholder"}}
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.last-maintenance-date"}}>
+                <DatePicker
+                    @value={{@resource.last_maintenance_date}}
+                    @onChange={{fn (mut @resource.last_maintenance_date)}}
+                    @placeholder={{t "device.fields.last-maintenance-date-placeholder"}}
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.data-frequency"}}>
+                <Input
+                    @value={{@resource.data_frequency}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "device.fields.data-frequency-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.status"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.statusOptions}}
+                        @selected={{@resource.status}}
+                        @onChange={{fn (mut @resource.status)}}
+                        @placeholder={{t "device.fields.status-placeholder"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |status|
+                    >
+                        {{smart-humanize status}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.telematic"}}>
+                <ModelSelect
+                    @modelName="telematic"
+                    @selectedModel={{@resource.telematic}}
+                    @placeholder={{t "device.fields.telematic-placeholder"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.telematic)}}
+                    @onChangeId={{fn (mut @resource.telematic_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.warranty"}}>
+                <ModelSelect
+                    @modelName="warranty"
+                    @selectedModel={{@resource.warranty}}
+                    @placeholder={{t "device.fields.warranty-placeholder"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.warranty)}}
+                    @onChangeId={{fn (mut @resource.warranty_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.policy_number}}
+                    -
+                    {{model.provider}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name={{t "device.fields.notes"}} @wrapperClass="col-span-2">
+                <Textarea
+                    @value={{@resource.notes}}
+                    aria-label={{t "device.fields.notes"}}
+                    class="w-full form-input"
+                    disabled={{cannot-write @resource}}
+                    placeholder={{t "device.fields.notes-placeholder"}}
+                    rows={{4}}
+                />
+            </InputGroup>
+
+            <RegistryYield @registry="fleet-ops:component:device:form:details" as |RegistryComponent|>
+                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+            </RegistryYield>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+
+    <RegistryYield @registry="fleet-ops:component:device:form" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+</div>

package/addon/components/device/form.js

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+
+export default class DeviceFormComponent extends Component {
+    /**
+     * Device type options
+     */
+    deviceTypeOptions = ['dashcam', 'obd', 'blackbox', 'tablet', 'tracker', 'sensor'];
+
+    /**
+     * Status options for devices
+     */
+    statusOptions = ['active', 'inactive', 'maintenance', 'retired'];
+}

package/addon/components/display-place.hbs

@@ -4,9 +4,9 @@
             <div class={{@noAddressClass}}>
                 <span class="text-red-500">
                     {{#if @type}}
-                        {{t "fleet-ops.component.display-panel.no-address" htmlSafe=true type=@type}}
+                        {{t "display-panel.no-address" htmlSafe=true type=@type}}
                     {{else}}
-                        {{t "fleet-ops.component.display-panel.no-address-message"}}
+                        {{t "display-panel.no-address-message"}}
                     {{/if}}
                 </span>
             </div>
@@ -16,7 +16,7 @@
                     <Badge @status={{place.status_code}} />
                 {{/if}}
                 {{#if @eta}}
-                    <Badge @status="warning" @hideStatusDot={{true}}><span class="font-bold">ETA:</span> {{format-duration @eta}}</Badge>
+                    <Badge @status="warning" @hideStatusDot={{true}}><span class="font-bold">{{t "common.eta"}}:</span> {{format-duration @eta}}</Badge>
                 {{/if}}
                 {{#if @waypointActions}}
                     <DropdownButton @iconClass="icon-text-height" @size="xs" @buttonClass="fleetops-btn-xxs" @icon="ellipsis-h" @iconPrefix="fas" @contentClass="dropdown-menu" as |dd|>
@@ -29,7 +29,7 @@
                             <div class="next-dd-menu-seperator"></div>
                             {{#each-in @waypointActions as |actionId action|}}
                                 <div class="px-1">
-                                    <a href="javascript:;" class="next-dd-item" disabled={{cannot "fleet-ops view order"}} {{on "click" (fn action.fn place dd)}}>
+                                    <a href="javascript:;" class="next-dd-item" disabled={{cannot "fleet-ops view order"}} {{on "click" (dropdown-fn dd action.fn place)}}>
                                         {{action.label}}
                                     </a>
                                 </div>

package/addon/components/driver/details.hbs

@@ -0,0 +1,56 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title={{t "driver.fields.user-account"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container md:col-span-3">
+                <div class="field-name">{{t "common.name"}}</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.email"}}</div>
+                <ClickToCopy @value={{@resource.email}} class="field-value">{{n-a @resource.email}}</ClickToCopy>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.phone"}}</div>
+                <ClickToCopy @value={{@resource.phone}} class="field-value">{{n-a @resource.phone}}</ClickToCopy>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "driver.fields.driver-details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.id"}}</div>
+                <ClickToCopy @value={{@resource.public_id}} class="field-value">{{n-a @resource.public_id}}</ClickToCopy>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.internal-id"}}</div>
+                <div class="field-value">{{n-a @resource.internal_id}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "driver.fields.driver-license"}}</div>
+                <div class="field-value">{{n-a @resource.drivers_license_number}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "resource.vendor"}}</div>
+                <div class="field-value">{{n-a @resource.vendor_name}}</div>
+            </div>
+            <div class="col-span-3"></div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.city"}}</div>
+                <div class="field-value">{{n-a @resource.city}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.country"}}</div>
+                <div class="field-value">
+                    <CountryName @country={{@resource.country}} />
+                </div>
+            </div>
+            <div class="field-info-container md:col-span-3">
+                <div class="field-name">{{t "common.coordinates"}}</div>
+                <div class="field-value">{{point-coordinates @resource.location}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/driver/details.js

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

package/addon/components/driver/form.hbs

@@ -0,0 +1,171 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title={{t "driver.fields.user-account"}} @open={{true}} @actionButtons={{this.userAccountActionButtons}} @wrapperClass="bordered-top">
+        <div class="space-y-2">
+            <InputGroup @name={{t "driver.fields.user-account"}} @helpText={{t "driver.fields.user-account-help-text"}}>
+                <ModelSelect
+                    @modelName="user"
+                    @selectedModel={{@resource.user}}
+                    @placeholder={{t "driver.fields.select-user"}}
+                    @query={{hash doesnt_have_driver=true}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.user)}}
+                    @permission="fleet-ops update-user-for driver"
+                    as |model|
+                >
+                    <div class="flex flex-row">
+                        <div class="mr-2 w-6">
+                            <Image src={{model.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{model.name}} class="w-6 h-6 rounded-md" />
+                        </div>
+                        <div class="flex flex-col">
+                            <div class="font-semibold">{{model.name}}</div>
+                            <div class="text-xs flex flex-row items-center leading-4">
+                                <FaIcon @icon="envelope" @size="sm" class="mr-1 opacity-75" />
+                                <span>{{n-a model.email}}</span>
+                            </div>
+                            <div class="text-xs flex flex-row items-center leading-4">
+                                <FaIcon @icon="phone" @size="sm" class="mr-1 opacity-75" />
+                                <span>{{n-a model.phone}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </ModelSelect>
+            </InputGroup>
+            {{#if @resource.user}}
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 no-input-group-padding">
+                    <InputGroup @name={{t "common.name"}} @wrapperClass="col-span-2 mb-0i">
+                        <Input @value={{@resource.user.name}} @type="text" class="w-full form-input" placeholder={{t "common.name"}} disabled={{true}} />
+                    </InputGroup>
+                    <InputGroup @name={{t "common.email"}} @wrapperClass="mb-0i">
+                        <Input @value={{@resource.user.email}} @type="text" class="w-full form-input" placeholder={{t "common.email"}} disabled={{true}} />
+                    </InputGroup>
+                    <InputGroup @name={{t "common.phone"}} @wrapperClass="mb-0i">
+                        <PhoneInput @value={{@resource.user.phone}} @onInput={{fn (mut @resource.phone)}} class="form-input w-full" disabled={{true}} />
+                    </InputGroup>
+                </div>
+            {{/if}}
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "driver.fields.driver-details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="flex flex-row space-x-3 mb-3">
+            <div class="flex items-center justify-start rounded-full">
+                <Image src={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                    <InputInfo @text={{t "driver.fields.upload-new-photo"}} />
+                </Attach::Tooltip>
+            </div>
+            <div>
+                <UploadButton
+                    @name={{t "common.photos"}}
+                    @accept="image/*"
+                    @onFileAdded={{perform this.handlePhotoUpload}}
+                    @icon="upload"
+                    @size="xs"
+                    @buttonText={{t "common.upload-image"}}
+                    @disabled={{cannot-write @resource}}
+                />
+                <div class="px-1">
+                    <span class="text-gray-300 dark:text-gray-600 text-xs">{{t "common.upload-image-supported"}}</span>
+                </div>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs no-input-group-padding">
+            <InputGroup @name={{t "common.internal-id"}}>
+                <Input @value={{@resource.internal_id}} @type="text" class="w-full form-input" placeholder={{t "common.internal-id"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "driver.fields.driver-license"}}>
+                <Input
+                    @value={{@resource.drivers_license_number}}
+                    @type="text"
+                    class="w-full form-input"
+                    placeholder={{t "driver.fields.driver-license"}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "driver.fields.vendor"}}>
+                <ModelSelect
+                    @modelName="vendor"
+                    @selectedModel={{@resource.vendor}}
+                    @placeholder={{t "driver.fields.select-vendor"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.vendor)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name={{t "resource.vehicle"}}>
+                <ModelSelect
+                    @modelName="vehicle"
+                    @selectedModel={{@resource.vehicle}}
+                    @placeholder={{t "driver.fields.select-vehicle"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.vehicle)}}
+                    @onChangeId={{fn (mut @resource.vehicle_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.display_name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name={{t "common.city"}}>
+                <Input @value={{@resource.city}} @type="text" class="w-full form-input" placeholder={{t "common.city"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "common.country"}}>
+                <CountrySelect
+                    class="w-full form-input form-select form-datalist"
+                    @value={{@resource.country}}
+                    @onChange={{fn (mut @resource.country)}}
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name={{t "common.status"}}>
+                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "driverStatuses"}}
+                        @selected={{find-by "value" @resource.status (get-fleet-ops-options "driverStatuses")}}
+                        @onChange={{set-model-attr @resource "status"}}
+                        @placeholder={{t "common.select-field" field=(t "common.status")}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |type|
+                    >
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{type.label}}</div>
+                            <div class="hide-from-trigger">{{type.description}}</div>
+                        </div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+            <InputGroup @name={{t "common.coordinates"}} @wrapperClass="col-span-2">
+                <ModelCoordinatesInput @model={{@resource}} @disabled={{cannot-write @resource}} @autocomplete="location" />
+            </InputGroup>
+        </div>
+        <RegistryYield @registry="fleet-ops:component:driver:form:details" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} @controller={{this.controller}} @permission={{get-write-permission @resource}} />
+        </RegistryYield>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+
+    <RegistryYield @registry="fleet-ops:component:driver:form" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{this.controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+
+    <ContentPanel @title={{t "avatar-picker.avatar"}} @open={{true}} @wrapperClass="bordered-top">
+        <AvatarPicker @model={{@resource}} @defaultAvatar={{config "defaultValues.driverAvatar"}} />
+    </ContentPanel>
+</div>