@fleetbase/fleetops-engine 0.6.17 → 0.6.19

package/addon/components/driver/form.js

@@ -0,0 +1,84 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class DriverFormComponent extends Component {
+    @service store;
+    @service fetch;
+    @service currentUser;
+    @service notifications;
+    @service modalsManager;
+    @tracked userAccountActionButtons = [
+        {
+            icon: 'user-plus',
+            size: 'xs',
+            permission: 'iam create user',
+            onClick: () => {
+                const user = this.store.createRecord('user', {
+                    status: 'pending',
+                    type: 'user',
+                });
+
+                this.modalsManager.show('modals/user-form', {
+                    title: 'Create a new user',
+                    user,
+                    formPermission: 'iam create user',
+                    uploadNewPhoto: (file) => {
+                        this.fetch.uploadFile.perform(
+                            file,
+                            {
+                                path: `uploads/${this.currentUser.companyId}/users/${user.slug}`,
+                                subject_uui: user.id,
+                                subject_type: 'user',
+                                type: 'user_photo',
+                            },
+                            (uploadedFile) => {
+                                user.setProperties({
+                                    avatar_uuid: uploadedFile.id,
+                                    avatar_url: uploadedFile.url,
+                                    avatar: uploadedFile,
+                                });
+                            }
+                        );
+                    },
+                    confirm: async (modal) => {
+                        modal.startLoading();
+
+                        try {
+                            await user.save();
+                            this.notifications.success('New user created successfully!');
+                            modal.done();
+                        } catch (error) {
+                            this.notifications.serverError(error);
+                            modal.stopLoading();
+                        }
+                    },
+                });
+            },
+        },
+    ];
+
+    @task *handlePhotoUpload(file) {
+        try {
+            yield this.fetch.uploadFile.perform(
+                file,
+                {
+                    path: `uploads/${this.currentUser.companyId}/drivers/${this.args.resource.id}`,
+                    subject_uuid: this.args.resource.id,
+                    subject_type: 'fleet-ops:driver',
+                    type: 'driver_photo',
+                },
+                (uploadedFile) => {
+                    this.args.resource.setProperties({
+                        photo_uuid: uploadedFile.id,
+                        photo_url: uploadedFile.url,
+                        photo: uploadedFile,
+                    });
+                }
+            );
+        } catch (err) {
+            this.notifications.error('Unable to upload photo: ' + err.message);
+        }
+    }
+}

package/addon/components/driver/panel-header.hbs

@@ -0,0 +1,40 @@
+<div class="px-4 py-2">
+    <div class="flex flex-1 flex-row items-start justify-between">
+        <div class="flex flex-row space-x-3">
+            <div class="flex items-start 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={{@resource.name}} />
+                </Attach::Tooltip>
+            </div>
+            <div class="flex flex-col">
+                <h1 class="text-gray-900 dark:text-white font-semibold text-2xl">{{@resource.name}}</h1>
+                <div class="-mt-1">
+                    {{#if @resource.vehicle}}
+                        <div class="flex flex-row items-center">
+                            <a href="javascript:;" class="text-sm dark:text-blue-400 text-blue-600 hover:opacity-50">{{@resource.vehicle.displayName}}</a>
+                        </div>
+                    {{else}}
+                        <div class="flex flex-row items-center">
+                            <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{t "driver.fields.no-vehicle-assigned"}}</span>
+                            {{!-- <Button @icon="plus" @size="xs" @helpText={{t "driver.actions.assign-vehicle"}} /> --}}
+                        </div>
+                    {{/if}}
+                </div>
+                <Badge @status={{if @resource.online "online" "offline"}}>{{if @resource.online (t "common.online") (t "common.offline")}}</Badge>
+            </div>
+        </div>
+        <div class="next-view-header-right">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            />
+        </div>
+    </div>
+</div>

package/addon/components/driver/panel-header.js

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

package/addon/components/driver-onboard-settings.hbs

@@ -1,25 +1,25 @@
-<ContentPanel @title={{t "fleet-ops.component.driver-onboard-settings.driver-onboard-settings"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 mb-4">
+<ContentPanel @title={{t "driver-onboard-settings.driver-onboard-settings"}} @open={{true}} @wrapperClass="bordered-classic">
     {{#if this.driverOnboardSettingsLoaded}}
         <InputGroup>
             <div class="flex items-center">
                 <Toggle
                     @isToggled={{this.driverOnboardSettings.enableDriverOnboardFromApp}}
                     @onToggle={{this.enableDriverOnboard}}
-                    @label={{t "fleet-ops.component.driver-onboard-settings.enable-driver-onboard-from-app"}}
-                    @helpText={{t "fleet-ops.component.driver-onboard-settings.enable-driver-onboard-from-app-help-text"}}
+                    @label={{t "driver-onboard-settings.enable-driver-onboard-from-app"}}
+                    @helpText={{t "driver-onboard-settings.enable-driver-onboard-from-app-help-text"}}
                 />
             </div>
         </InputGroup>
         {{#if this.driverOnboardSettings.enableDriverOnboardFromApp}}
             <InputGroup
-                @name={{t "fleet-ops.component.driver-onboard-settings.select-onboard-method"}}
-                @helpText={{t "fleet-ops.component.driver-onboard-settings.select-onboard-method-help-text"}}
+                @name={{t "driver-onboard-settings.select-onboard-method"}}
+                @helpText={{t "driver-onboard-settings.select-onboard-method-help-text"}}
             >
                 <Select
                     class="w-full flex-1"
                     @value={{this.driverOnboardSettings.driverOnboardAppMethod}}
                     @options={{this.driverOnboardMethods}}
-                    @placeholder={{t "fleet-ops.component.driver-onboard-settings.select-onboard-method"}}
+                    @placeholder={{t "driver-onboard-settings.select-onboard-method"}}
                     @onSelect={{this.selectDriverOnboardMethod}}
                 />
             </InputGroup>
@@ -28,8 +28,8 @@
                     <Toggle
                         @isToggled={{this.driverOnboardSettings.driverMustProvideOnboardDocuments}}
                         @onToggle={{this.enableDriverOnboardDocuments}}
-                        @label={{t "fleet-ops.component.driver-onboard-settings.require-driver-to-upload-onboard-documents"}}
-                        @helpText={{t "fleet-ops.component.driver-onboard-settings.require-driver-to-upload-onboard-documents-help-text"}}
+                        @label={{t "driver-onboard-settings.require-driver-to-upload-onboard-documents"}}
+                        @helpText={{t "driver-onboard-settings.require-driver-to-upload-onboard-documents-help-text"}}
                     />
                 </div>
             </InputGroup>
@@ -37,13 +37,13 @@
                 <InputGroup>
                     <ArrayInput
                         @data={{this.driverOnboardSettings.requiredOnboardDocuments}}
-                        @placeholder={{t "fleet-ops.component.driver-onboard-settings.enter-document-name"}}
+                        @placeholder={{t "driver-onboard-settings.enter-document-name"}}
                         @onDataChanged={{this.onOnboardDocumentsChanged}}
-                        @addButtonText={{t "fleet-ops.component.driver-onboard-settings.add-onboard-document"}}
+                        @addButtonText={{t "driver-onboard-settings.add-onboard-document"}}
                     >
                         <InputLabel
-                            @labelText={{t "fleet-ops.component.driver-onboard-settings.required-onboard-documents"}}
-                            @helpText={{t "fleet-ops.component.driver-onboard-settings.required-onboard-documents-help-text"}}
+                            @labelText={{t "driver-onboard-settings.required-onboard-documents"}}
+                            @helpText={{t "driver-onboard-settings.required-onboard-documents-help-text"}}
                         />
                     </ArrayInput>
                 </InputGroup>
@@ -52,9 +52,9 @@
         <div class="mt-3 flex items-center mb-4">
             <Button
                 @type="primary"
-                @size="lg"
+                @size="sm"
                 @icon="save"
-                @text={{t "fleet-ops.common.save-changes"}}
+                @text={{t "common.save-changes"}}
                 @onClick={{perform this.saveDriverOnboardSettings}}
                 @isLoading={{not this.saveDriverOnboardSettings.isIdle}}
                 @permission="fleet-ops update navigator-settings"

package/addon/components/entity/card.hbs

@@ -0,0 +1,28 @@
+<Layout::Resource::Card ...attributes as |Card|>
+    <Card.header class={{@headerClass}}>
+        <div class="font-semibold">{{or @resource.name @resource.public_id}}</div>
+        <div class="text-gray-300 dark:text-gray-500 text-sm">{{or @resource.tracking @resource.sku @resource.internal_id}}</div>
+        {{#if (has-block "header")}}
+            {{yield to="header"}}
+        {{/if}}
+    </Card.header>
+    <Card.body class={{@bodyClass}}>
+        <Image src={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.entityImage"}} class="card-img-sm" />
+        {{#if (has-block "body")}}
+            {{yield to="body"}}
+        {{/if}}
+    </Card.body>
+    <Card.footer class={{@footerClass}}>
+        <div class="flex flex-row items-center space-x-1">
+            <Button @icon="pencil" @size="xs" @onClick={{fn this.entityActions.modal.edit @resource}} />
+            <Button @icon="trash" @size="xs" @type="danger" @onClick={{fn this.entityActions.delete @resource}} />
+        </div>
+        {{#if (has-block "footer")}}
+            {{yield to="footer"}}
+        {{/if}}
+        <div class="mt-1">
+            <div class="text-gray-300 dark:text-gray-500 text-xs">Last Modified: {{@resource.updatedAt}}</div>
+        </div>
+    </Card.footer>
+</Layout::Resource::Card>
+{{yield}}

package/addon/components/entity/card.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class EntityCardComponent extends Component {
+    @service entityActions;
+}

package/addon/components/entity/details.js

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

package/addon/components/entity/form.hbs

@@ -0,0 +1,86 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title={{t "common.details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div>
+            <div class="flex flex-row space-x-3 mb-3">
+                <div class="flex items-center justify-start rounded-full">
+                    <Image src={{@resource.photo_url}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-md shadow-sm" />
+                </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">
+                <InputGroup @name={{t "common.name"}} @value={{@resource.name}} @helpText={{t "modals.entity-form.name-text"}} />
+                <InputGroup @name={{t "common.internal-id"}} @value={{@resource.internal_id}} @helpText={{t "modals.entity-form.id-text"}} />
+                <InputGroup @name={{t "modals.entity-form.sku"}} @value={{@resource.sku}} @helpText={{t "modals.entity-form.sku-text"}} />
+                <div></div>
+                <InputGroup
+                    @name={{t "modals.entity-form.description"}}
+                    @helpText={{t "modals.entity-form.description-text"}}
+                    @wrapperClass="col-span-2"
+                >
+                    <Textarea @value={{@resource.description}} type="text" class="w-full form-input" placeholder={{t "modals.entity-form.description"}} />
+                </InputGroup>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "modals.entity-form.price-title"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
+            <InputGroup @name={{t "modals.entity-form.price"}} @helpText={{t "modals.entity-form.price-text"}}>
+                <MoneyInput class="w-full" @value={{@resource.price}} @currency={{@resource.currency}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut @resource.currency)}} />
+            </InputGroup>
+            <InputGroup @name={{t "modals.entity-form.sale-price"}} @helpText={{t "modals.entity-form.sale-price-text"}}>
+                <MoneyInput class="w-full" @value={{@resource.sale_price}} @currency={{@resource.currency}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut @resource.currency)}} />
+            </InputGroup>
+            <InputGroup @name={{t "modals.entity-form.declare"}} @helpText={{t "modals.entity-form.declare-text"}}>
+                <MoneyInput
+                    class="w-full"
+                    @value={{@resource.declared_value}}
+                    @currency={{@resource.currency}}
+                    @canSelectCurrency={{true}}
+                    @onCurrencyChange={{fn (mut @resource.currency)}}
+                />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "modals.entity-form.measurement-title"}} @open={{true}} @wrapperClass="bordered-top">
+        <div>
+            <div class="grid grid-cols-3 gap-2">
+                <InputGroup @name={{t "modals.entity-form.length"}} @helpText={{t "modals.entity-form.length-text"}}>
+                    <UnitInput class="w-full" @value={{@resource.length}} @unit={{@resource.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut @resource.dimensions_unit)}} />
+                </InputGroup>
+                <InputGroup @name={{t "modals.entity-form.width"}} @helpText={{t "modals.entity-form.width-text"}}>
+                    <UnitInput class="w-full" @value={{@resource.width}} @unit={{@resource.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut @resource.dimensions_unit)}} />
+                </InputGroup>
+                <InputGroup @name={{t "modals.entity-form.height"}} @helpText={{t "modals.entity-form.height-text"}}>
+                    <UnitInput class="w-full" @value={{@resource.height}} @unit={{@resource.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut @resource.dimensions_unit)}} />
+                </InputGroup>
+            </div>
+            <div class="grid grid-cols-3 gap-2">
+                <InputGroup @name={{t "modals.entity-form.weight"}} @helpText={{t "modals.entity-form.weight-text"}}>
+                    <UnitInput
+                        class="w-full"
+                        @value={{@resource.weight}}
+                        @measurement="weight"
+                        @unit={{@resource.weight_unit}}
+                        @canSelectUnit={{true}}
+                        @onUnitChange={{fn (mut @resource.weight_unit)}}
+                    />
+                </InputGroup>
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/entity/form.js

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class EntityFormComponent extends Component {
+    @service fetch;
+    @service currentUser;
+    @service notifications;
+
+    @task *handlePhotoUpload(file) {
+        try {
+            yield this.fetch.uploadFile.perform(
+                file,
+                {
+                    path: `uploads/${this.currentUser.companyId}/entities/${this.args.resource.id}`,
+                    subject_uuid: this.args.resource.id,
+                    subject_type: 'fleet-ops:entity',
+                    type: 'entity_photo',
+                },
+                (uploadedFile) => {
+                    this.args.resource.setProperties({
+                        photo_uuid: uploadedFile.id,
+                        photo_url: uploadedFile.url,
+                        photo: uploadedFile,
+                    });
+                }
+            );
+        } catch (err) {
+            this.notifications.error('Unable to upload photo: ' + err.message);
+        }
+    }
+}

package/addon/components/entity-field-editing-settings.hbs

@@ -1,14 +1,14 @@
-<ContentPanel @title={{t "fleet-ops.component.entity-field-editing-settings.entitiy-field-editing-settings"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 mb-4">
+<ContentPanel @title={{t "entity-field-editing-settings.entitiy-field-editing-settings"}} @open={{true}}  @wrapperClass="bordered-classic">
     <OrderConfigManager @onConfigChanged={{this.onConfigChanged}} as |Action Context|>
         <div>
             <InputGroup
-                @name={{t "fleet-ops.component.entity-field-editing-settings.select-order-config"}}
-                @helpText={{t "fleet-ops.component.entity-field-editing-settings.select-order-config-help-text"}}
+                @name={{t "entity-field-editing-settings.select-order-config"}}
+                @helpText={{t "entity-field-editing-settings.select-order-config-help-text"}}
             >
                 <DropdownButton
                     class="order-config-select-button mr-2"
                     @disabled={{not Context.configs}}
-                    @text={{if Context.currentConfig.name Context.currentConfig.name (t "fleet-ops.component.entity-field-editing-settings.select-order-config")}}
+                    @text={{if Context.currentConfig.name Context.currentConfig.name (t "entity-field-editing-settings.select-order-config")}}
                     @textClass="text-sm mr-2"
                     @buttonClass="flex-row-reverse w-44 justify-between"
                     @icon="caret-down"
@@ -48,8 +48,8 @@
                     <Toggle
                         @isToggled={{orderConfigEntityEditingSettings.is_editable}}
                         @onToggle={{this.enableEditableEntityFields}}
-                        @label={{t "fleet-ops.component.entity-field-editing-settings.enable-driver-to-edit-entity-fields"}}
-                        @helpText={{t "fleet-ops.component.entity-field-editing-settings.enable-driver-to-edit-entity-fields-help-text"}}
+                        @label={{t "entity-field-editing-settings.enable-driver-to-edit-entity-fields"}}
+                        @helpText={{t "entity-field-editing-settings.enable-driver-to-edit-entity-fields-help-text"}}
                     />
                 </div>
             </InputGroup>
@@ -67,9 +67,9 @@
             <div class="mt-4 flex items-center">
                 <Button
                     @type="primary"
-                    @size="lg"
+                    @size="sm"
                     @icon="save"
-                    @text={{t "fleet-ops.common.save-changes"}}
+                    @text={{t "common.save-changes"}}
                     @onClick={{perform this.saveEntityEditingSettings}}
                     @isLoading={{not this.saveEntityEditingSettings.isIdle}}
                     @permission="fleet-ops update navigator-settings"

package/addon/components/equipment/details.hbs

@@ -0,0 +1,95 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title="Details" @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">Name</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Code</div>
+                <div class="field-value">{{n-a @resource.code}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Type</div>
+                <div class="field-value">{{smart-humanize @resource.type}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">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">Serial Number</div>
+                <div class="field-value">{{n-a @resource.serial_number}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Manufacturer</div>
+                <div class="field-value">{{n-a @resource.manufacturer}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Model</div>
+                <div class="field-value">{{n-a @resource.model}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Purchased At</div>
+                <div class="field-value">{{format-date @resource.purchased_at}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Purchase Price</div>
+                <div class="field-value">{{format-currency @resource.purchase_price}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Warranty</div>
+                <div class="field-value">{{n-a @resource.warranty_name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Equipped To</div>
+                <div class="field-value">{{n-a @resource.equipped_to_name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Equipped Status</div>
+                <div class="field-value">
+                    {{#if @resource.is_equipped}}
+                        <Badge @status="success">Equipped</Badge>
+                    {{else}}
+                        <Badge @status="default">Not Equipped</Badge>
+                    {{/if}}
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Age</div>
+                <div class="field-value">{{n-a @resource.age_in_days}} days</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Depreciated Value</div>
+                <div class="field-value">{{format-currency @resource.depreciated_value}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+
+    <ContentPanel @title="Photo" @open={{true}} @wrapperClass="bordered-top">
+        <div class="flex px-1">
+            <div class="border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-600 rounded-lg flex items-center justify-center">
+                <div class="flex items-center justify-center h-20 w-24">
+                    <Image alt={{@resource.name}} src={{or @resource.photo_url (config "defaultValues.equipmentImage")}} @fallbackSrc={{config "defaultValues.equipmentImage"}} class="w-12 h-12" />
+                </div>
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/equipment/details.js

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

package/addon/components/equipment/form.hbs

@@ -0,0 +1,127 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title="Equipment 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.equipmentImage"}} 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="Upload new photo" />
+                </Attach::Tooltip>
+            </div>
+            <div>
+                <UploadButton
+                    @name="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 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name="Name" @wrapperClass="col-span-2">
+                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder="Name" disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name="Code">
+                <Input @value={{@resource.code}} @type="text" class="w-full form-input" placeholder="Equipment Code" disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name="Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.equipmentTypeOptions}}
+                        @selected={{@resource.type}}
+                        @onChange={{fn (mut @resource.type)}}
+                        @placeholder="Select Equipment Type"
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |type|
+                    >
+                        {{smart-humanize type}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name="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="Select Status"
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |status|
+                    >
+                        {{smart-humanize status}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name="Serial Number">
+                <Input @value={{@resource.serial_number}} @type="text" class="w-full form-input" placeholder="Serial Number" disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name="Manufacturer">
+                <Input @value={{@resource.manufacturer}} @type="text" class="w-full form-input" placeholder="Manufacturer" disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name="Model">
+                <Input @value={{@resource.model}} @type="text" class="w-full form-input" placeholder="Model" disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name="Purchased At">
+                <DatePicker
+                    @value={{@resource.purchased_at}}
+                    @onChange={{fn (mut @resource.purchased_at)}}
+                    @placeholder="Select Purchase Date"
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
+            <InputGroup @name="Purchase Price">
+                <MoneyInput
+                    class="w-full"
+                    @value={{@resource.purchase_price}}
+                    @currency={{or @resource.currency "USD"}}
+                    @canSelectCurrency={{true}}
+                    @onCurrencyChange={{fn (mut @resource.currency)}}
+                    @disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+
+            <InputGroup @name="Warranty">
+                <ModelSelect
+                    @modelName="warranty"
+                    @selectedModel={{@resource.warranty}}
+                    @placeholder="Select Warranty"
+                    @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>
+
+            <RegistryYield @registry="fleet-ops:component:equipment: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:equipment:form" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+</div>