@fleetbase/fleetops-engine 0.6.38 → 0.6.39

package/addon/components/order/schedule-card.js

@@ -29,10 +29,15 @@ export default class OrderScheduleCardComponent extends Component {
      * @param {Object} owner - The owner of the component.
      * @param {Object} args - Arguments passed to the component, including the order.
      */
-    constructor(owner, { order }) {
+    constructor(owner, args) {
         super(...arguments);
-        this.loadDriverFromOrder(order);
-        this.loadPayloadFromOrder(order);
+        // When used as a draggable sidebar card in the scheduler (@selectable=true),
+        // skip eager driver/payload fetches — only order metadata is needed for
+        // drag-and-drop. This prevents N+1 404s for orders with stale driver UUIDs.
+        if (!args.selectable) {
+            this.loadDriverFromOrder(args.order);
+            this.loadPayloadFromOrder(args.order);
+        }
     }
 
     /**

package/addon/components/order-config-manager/details.hbs

@@ -1,15 +1,7 @@
 <div class="px-6 py-2 space-y-4">
     <ContentPanel @title={{t "order-config-manager.details.details"}} @open={{true}} @wrapperClass="bordered-classic">
-        <InputGroup
-            @name={{t "order-config-manager.details.name"}}
-            @value={{@config.name}}
-            @disabled={{or @config.core_service (cannot "fleet-ops update order-config")}}
-        />
-        <InputGroup
-            @name={{t "order-config-manager.details.description"}}
-            @value={{@config.description}}
-            @disabled={{or @config.core_service (cannot "fleet-ops update order-config")}}
-        />
+        <InputGroup @name={{t "order-config-manager.details.name"}} @value={{@config.name}} @disabled={{or @config.core_service (cannot "fleet-ops update order-config")}} />
+        <InputGroup @name={{t "order-config-manager.details.description"}} @value={{@config.description}} @disabled={{or @config.core_service (cannot "fleet-ops update order-config")}} />
         <InputGroup @name={{t "order-config-manager.details.tags"}}>
             {{#let (or @config.core_service (cannot "fleet-ops update order-config")) as |disabled|}}
                 <TagInput

package/addon/components/order-config-manager/entities.hbs

@@ -9,13 +9,7 @@
         />
     </div>
     {{#each this.customEntities as |customEntity index|}}
-        <ContentPanel
-            @title={{customEntity.name}}
-            @subtitle={{customEntity.description}}
-            @panelSubtitleInlineClass="text-xs"
-            @open={{true}}
-            @wrapperClass="bordered-classic"
-        >
+        <ContentPanel @title={{customEntity.name}} @subtitle={{customEntity.description}} @panelSubtitleInlineClass="text-xs" @open={{true}} @wrapperClass="bordered-classic">
             <div class="flex flex-row items-center py-2 space-x-2 mb-4">
                 <Button @type="default" @icon="pencil" @onClick={{fn this.editCustomEntity customEntity index}} @permission="fleet-ops update order-config" />
                 <Button @type="danger" @icon="trash" @onClick={{fn this.deleteCustomEntity customEntity index}} @permission="fleet-ops update order-config" />

package/addon/components/order-config-manager.hbs

@@ -1,12 +1,7 @@
 {{yield
     (hash
         NewOrderConfigButton=(component
-            "button"
-            type="primary"
-            icon="plus"
-            text=(t "order-config-manager.new-order-config")
-            onClick=this.createNewOrderConfig
-            permission="fleet-ops create order-config"
+            "button" type="primary" icon="plus" text=(t "order-config-manager.new-order-config") onClick=this.createNewOrderConfig permission="fleet-ops create order-config"
         )
     )
     (hash

package/addon/components/part/card.hbs

@@ -0,0 +1,49 @@
+<Layout::Resource::Card ...attributes as |Card|>
+    <Card.header class="{{@headerClass}} truncate">
+        <div class="font-semibold truncate">{{or @resource.name @resource.public_id}}</div>
+        <div class="text-gray-300 dark:text-gray-500 text-sm truncate">{{or @resource.part_number @resource.sku @resource.public_id}}</div>
+        {{#if (has-block "header")}}
+            {{yield to="header"}}
+        {{/if}}
+    </Card.header>
+    <Card.body class={{@bodyClass}}>
+        <Image src={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.partImage"}} class="card-img-lg" />
+        <div class="mt-2 space-y-1 text-xs text-gray-500 dark:text-gray-400">
+            {{#if @resource.type}}
+                <div class="flex items-center space-x-1">
+                    <FaIcon @icon="tag" @size="xs" class="text-gray-400" />
+                    <span>{{humanize @resource.type}}</span>
+                </div>
+            {{/if}}
+            {{#if @resource.quantity_on_hand}}
+                <div class="flex items-center space-x-1">
+                    <FaIcon @icon="boxes-stacked" @size="xs" class="text-gray-400" />
+                    <span>Qty: {{@resource.quantity_on_hand}}</span>
+                </div>
+            {{/if}}
+            {{#if @resource.unit_cost}}
+                <div class="flex items-center space-x-1">
+                    <FaIcon @icon="dollar-sign" @size="xs" class="text-gray-400" />
+                    <span>{{format-currency @resource.unit_cost @resource.currency}}</span>
+                </div>
+            {{/if}}
+        </div>
+        {{#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="eye" @size="xs" @onClick={{fn this.partActions.transition.view @resource}} />
+            <Button @icon="pencil" @size="xs" @onClick={{fn this.partActions.transition.edit @resource}} />
+            <Button @icon="trash" @size="xs" @type="danger" @onClick={{fn this.partActions.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/part/card.js

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

package/addon/components/part/details.hbs

@@ -1,51 +1,82 @@
-<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="next-content-panel-wrapper" ...attributes>
+
+    {{! ===== OVERVIEW ===== }}
+    <ContentPanel @title="Overview" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+
+            {{! — Photo — }}
+            {{#if (or @resource.photo_url (config "defaultValues.placeholderImage"))}}
+                <div class="col-span-2 flex items-start gap-3 pb-2">
+                    <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 w-16 h-16 flex-shrink-0">
+                        <Image
+                            alt={{@resource.name}}
+                            src={{or @resource.photo_url (config "defaultValues.placeholderImage")}}
+                            @fallbackSrc={{config "defaultValues.placeholderImage"}}
+                            class="w-12 h-12 object-contain"
+                        />
+                    </div>
+                    <div>
+                        <p class="font-semibold text-sm text-gray-800 dark:text-gray-100">{{n-a @resource.name}}</p>
+                        <p class="text-[11px] text-gray-400 dark:text-gray-500 font-mono">{{n-a @resource.public_id}}</p>
+                    </div>
+                </div>
+            {{/if}}
+
+            {{! — Identity & Classification — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Identity & Classification
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">ID</div>
+                <ClickToCopy @value={{@resource.public_id}} class="field-value font-mono">{{n-a @resource.public_id}}</ClickToCopy>
+            </div>
             <div class="field-info-container">
                 <div class="field-name">SKU</div>
-                <div class="field-value">{{n-a @resource.sku}}</div>
+                <ClickToCopy @value={{@resource.sku}} class="field-value font-mono">{{n-a @resource.sku}}</ClickToCopy>
             </div>
-
             <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">Type</div>
-                <div class="field-value">{{smart-humanize @resource.type}}</div>
+                <div class="field-value">{{n-a (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 class="field-name">Barcode</div>
+                <div class="field-value font-mono">{{n-a @resource.barcode}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Serial Number</div>
+                <div class="field-value font-mono">{{n-a @resource.serial_number}}</div>
             </div>
 
+            {{! — Make & Model — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Make & Model
+            </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">Serial Number</div>
-                <div class="field-value">{{n-a @resource.serial_number}}</div>
+            {{! — Inventory — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Inventory
             </div>
-
             <div class="field-info-container">
-                <div class="field-name">Barcode</div>
-                <div class="field-value">{{n-a @resource.barcode}}</div>
+                <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">Quantity On Hand</div>
-                <div class="field-value">
+                <div class="field-name">Quantity on Hand</div>
+                <div class="field-value flex items-center gap-2">
                     {{n-a @resource.quantity_on_hand}}
                     {{#if @resource.is_low_stock}}
                         <Badge @status="warning">Low Stock</Badge>
@@ -56,53 +87,68 @@
                     {{/if}}
                 </div>
             </div>
+            {{#if @resource.asset_name}}
+                <div class="field-info-container">
+                    <div class="field-name">Fitted To</div>
+                    <div class="field-value">{{n-a @resource.asset_name}}</div>
+                </div>
+            {{/if}}
+        </div>
+    </ContentPanel>
 
+    {{! ===== PRICING ===== }}
+    <ContentPanel @title="Pricing" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
             <div class="field-info-container">
                 <div class="field-name">Unit Cost</div>
-                <div class="field-value">{{format-currency @resource.unit_cost}}</div>
+                <div class="field-value">{{format-currency @resource.unit_cost @resource.currency}}</div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">MSRP</div>
-                <div class="field-value">{{format-currency @resource.msrp}}</div>
+                <div class="field-value">{{format-currency @resource.msrp @resource.currency}}</div>
             </div>
-
             <div class="field-info-container">
-                <div class="field-name">Total Value</div>
-                <div class="field-value"><strong>{{format-currency @resource.total_value}}</strong></div>
+                <div class="field-name">Total Inventory Value</div>
+                <div class="field-value font-semibold">{{format-currency @resource.total_value @resource.currency}}</div>
             </div>
-
             <div class="field-info-container">
-                <div class="field-name">Vendor</div>
-                <div class="field-value">{{n-a @resource.vendor_name}}</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">Asset</div>
-                <div class="field-value">{{n-a @resource.asset_name}}</div>
-            </div>
-
-            <div class="field-info-container col-span-3">
-                <div class="field-name">Description</div>
-                <div class="field-value">{{n-a @resource.description}}</div>
+                <div class="field-name">Currency</div>
+                <div class="field-value">{{n-a @resource.currency}}</div>
             </div>
         </div>
     </ContentPanel>
 
+    {{! ===== SUPPLIER & WARRANTY ===== }}
+    {{#if (or @resource.vendor_name @resource.warranty_name)}}
+        <ContentPanel @title="Supplier & Warranty" @open={{true}} @wrapperClass="bordered-top">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                {{#if @resource.vendor_name}}
+                    <div class="field-info-container">
+                        <div class="field-name">Supplier / Vendor</div>
+                        <div class="field-value">{{n-a @resource.vendor_name}}</div>
+                    </div>
+                {{/if}}
+                {{#if @resource.warranty_name}}
+                    <div class="field-info-container">
+                        <div class="field-name">Warranty</div>
+                        <div class="field-value">{{n-a @resource.warranty_name}}</div>
+                    </div>
+                {{/if}}
+            </div>
+        </ContentPanel>
+    {{/if}}
+
+    {{! ===== DESCRIPTION ===== }}
+    {{#if @resource.description}}
+        <ContentPanel @title="Description" @open={{false}} @wrapperClass="bordered-top">
+            <div class="text-xs text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
+                {{@resource.description}}
+            </div>
+        </ContentPanel>
+    {{/if}}
+
+    {{! ===== CUSTOM FIELDS ===== }}
     <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.partImage")}} @fallbackSrc={{config "defaultValues.partImage"}} class="w-12 h-12" />
-                </div>
-            </div>
-        </div>
-    </ContentPanel>
-</div>
+    <Spacer @height="200px" />
+</div>

package/addon/components/part/form.hbs

@@ -1,10 +1,20 @@
-<div class="form-wrapper" ...attributes>
-    <ContentPanel @title="Part Details" @open={{true}} @wrapperClass="bordered-top">
+<div class="part-form" ...attributes>
+
+    {{! ===== IDENTIFICATION (includes photo, matching vehicle/form convention) ===== }}
+    <ContentPanel @title="Identification" @open={{true}} @wrapperClass="bordered-top">
+        {{! Photo row — identical structure to vehicle/form UploadButton pattern }}
         <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.partImage"}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Image
+                    src={{@resource.photo_url}}
+                    @fallbackSrc={{config "defaultValues.placeholderImage"}}
+                    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" />
+                    <InputInfo @text="Upload a new photo" />
                 </Attach::Tooltip>
             </div>
             <div>
@@ -14,39 +24,43 @@
                     @onFileAdded={{perform this.handlePhotoUpload}}
                     @icon="upload"
                     @size="xs"
-                    @buttonText={{t "common.upload-image"}}
+                    @buttonText="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>
+                    <span class="text-gray-300 dark:text-gray-600 text-xs">Supports JPG, PNG, GIF up to 10 MB</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="SKU">
-                <Input @value={{@resource.sku}} @type="text" class="w-full form-input" placeholder="SKU" disabled={{cannot-write @resource}} />
-            </InputGroup>
 
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            {{! Part Identification }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Part Details
+            </div>
             <InputGroup @name="Name">
-                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder="Name" 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}} />
+                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder="Part name" 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 @name="SKU">
+                <Input @value={{@resource.sku}} @type="text" class="w-full form-input" placeholder="Stock Keeping Unit" disabled={{cannot-write @resource}} />
             </InputGroup>
-
             <InputGroup @name="Serial Number">
-                <Input @value={{@resource.serial_number}} @type="text" class="w-full form-input" placeholder="Serial Number" disabled={{cannot-write @resource}} />
+                <Input @value={{@resource.serial_number}} @type="text" class="w-full form-input" placeholder="Serial number" disabled={{cannot-write @resource}} />
             </InputGroup>
-
             <InputGroup @name="Barcode">
-                <Input @value={{@resource.barcode}} @type="text" class="w-full form-input" placeholder="Barcode" disabled={{cannot-write @resource}} />
+                <Input @value={{@resource.barcode}} @type="text" class="w-full form-input" placeholder="Barcode or QR code value" disabled={{cannot-write @resource}} />
+            </InputGroup>
+            <InputGroup @name="Manufacturer">
+                <Input @value={{@resource.manufacturer}} @type="text" class="w-full form-input" placeholder="Manufacturer name" disabled={{cannot-write @resource}} />
+            </InputGroup>
+            <InputGroup @name="Model">
+                <Input @value={{@resource.model}} @type="text" class="w-full form-input" placeholder="Model designation" disabled={{cannot-write @resource}} />
             </InputGroup>
 
+            {{! Type & Status }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Type & Status
+            </div>
             <InputGroup @name="Type">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
@@ -62,7 +76,6 @@
                     </PowerSelect>
                 </div>
             </InputGroup>
-
             <InputGroup @name="Status">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
@@ -79,32 +92,98 @@
                 </div>
             </InputGroup>
 
-            <InputGroup @name="Quantity On Hand" @type="number">
-                <Input @value={{@resource.quantity_on_hand}} @type="number" class="w-full form-input" placeholder="Quantity" disabled={{cannot-write @resource}} />
+            <InputGroup @name="Description" @wrapperClass="col-span-2">
+                <Textarea
+                    @value={{@resource.description}}
+                    aria-label="Description"
+                    class="w-full form-input"
+                    disabled={{cannot-write @resource}}
+                    placeholder="Part description and usage notes"
+                    rows={{3}}
+                />
             </InputGroup>
+        </div>
+    </ContentPanel>
 
+    {{! ===== INVENTORY ===== }}
+    <ContentPanel @title="Inventory" @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">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Stock Levels
+            </div>
+            <InputGroup @name="Quantity On Hand">
+                <Input @value={{@resource.quantity_on_hand}} @type="number" class="w-full form-input" placeholder="Current stock quantity" disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Pricing
+            </div>
+            <InputGroup @name="Currency">
+                <CurrencySelect @currency={{@resource.currency}} @onCurrencyChange={{fn (mut @resource.currency)}} @triggerClass="w-full form-select" @disabled={{cannot-write @resource}} />
+            </InputGroup>
             <InputGroup @name="Unit Cost">
                 <MoneyInput
                     class="w-full"
                     @value={{@resource.unit_cost}}
                     @currency={{or @resource.currency "USD"}}
-                    @canSelectCurrency={{true}}
-                    @onCurrencyChange={{fn (mut @resource.currency)}}
+                    @onChange={{fn (mut @resource.unit_cost)}}
                     @disabled={{cannot-write @resource}}
                 />
             </InputGroup>
-
             <InputGroup @name="MSRP">
-                <MoneyInput
-                    class="w-full"
-                    @value={{@resource.msrp}}
-                    @currency={{or @resource.currency "USD"}}
-                    @canSelectCurrency={{true}}
-                    @disabled={{cannot-write @resource}}
-                />
+                <MoneyInput class="w-full" @value={{@resource.msrp}} @currency={{or @resource.currency "USD"}} @onChange={{fn (mut @resource.msrp)}} @disabled={{cannot-write @resource}} />
             </InputGroup>
+        </div>
+    </ContentPanel>
+
+    {{! ===== COMPATIBILITY ===== }}
+    <ContentPanel @title="Compatibility" @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">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Compatible Asset
+            </div>
+            <InputGroup @name="Asset Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.assetTypeOptions}}
+                        @selected={{this.selectedAssetType}}
+                        @onChange={{this.onAssetTypeChange}}
+                        @placeholder="Select compatible asset type"
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+            {{#if this.assetModelName}}
+                <InputGroup @name="Asset">
+                    <ModelSelect
+                        @modelName={{this.assetModelName}}
+                        @selectedModel={{@resource.asset}}
+                        @placeholder="Select compatible asset"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{this.assignAsset}}
+                        @disabled={{cannot-write @resource}}
+                        as |model|
+                    >
+                        {{or model.name model.public_id}}
+                    </ModelSelect>
+                </InputGroup>
+            {{/if}}
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name="Vendor">
+    {{! ===== VENDOR & WARRANTY ===== }}
+    <ContentPanel @title="Vendor & Warranty" @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">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Supplier
+            </div>
+            <InputGroup @name="Vendor" @wrapperClass="col-span-2">
                 <ModelSelect
                     @modelName="vendor"
                     @selectedModel={{@resource.vendor}}
@@ -121,11 +200,14 @@
                 </ModelSelect>
             </InputGroup>
 
-            <InputGroup @name="Warranty">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Warranty
+            </div>
+            <InputGroup @name="Warranty" @wrapperClass="col-span-2">
                 <ModelSelect
                     @modelName="warranty"
                     @selectedModel={{@resource.warranty}}
-                    @placeholder="Select Warranty"
+                    @placeholder="Select Warranty (optional)"
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -134,30 +216,23 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.policy_number}} - {{model.provider}}
+                    {{model.policy_number}}
+                    -
+                    {{model.provider}}
                 </ModelSelect>
             </InputGroup>
-
-            <InputGroup @name="Description" @wrapperClass="col-span-2">
-                <Textarea
-                    @value={{@resource.description}}
-                    aria-label="Description"
-                    class="w-full form-input"
-                    disabled={{cannot-write @resource}}
-                    placeholder="Description"
-                    rows={{4}}
-                />
-            </InputGroup>
-
-            <RegistryYield @registry="fleet-ops:component:part:form:details" as |RegistryComponent|>
-                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
-            </RegistryYield>
         </div>
     </ContentPanel>
 
+    {{! ===== REGISTRY & METADATA ===== }}
+    <RegistryYield @registry="fleet-ops:component:part:form:details" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
     <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
-
     <RegistryYield @registry="fleet-ops:component:part:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+    <ContentPanel @title="Metadata" @open={{false}} @wrapperClass="bordered-top">
+        <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
+    </ContentPanel>
+</div>