@fleetbase/fleetops-engine 0.6.65 → 0.6.66

package/addon/components/order/pill.hbs

@@ -1,34 +1,24 @@
-{{#let (or @order @resource) as |resource|}}
-    <Pill
-        @resource={{resource}}
-        @onClick={{@onClick}}
-        @anchorClass={{@anchorClass}}
-        @imageClass={{@imageClass}}
-        @imageWrapperClass={{@imageWrapperClass}}
-        @contentWrapperClass={{@contentWrapperClass}}
-        @titleClass={{@titleClass}}
-        @subtitleClass={{@subtitleClass}}
-        ...attributes
-    >
-        <:image>
-            <div class="pt-1">
-                <div class="rounded-md bg-white p-1">
-                    <img src={{concat "data:image/png;base64," resource.tracking_number.qr_code}} class="w-12 h-12" alt={{resource.public_id}} />
-                </div>
-            </div>
-        </:image>
-        <:default>
-            <div class="text-sm font-semibold">{{n-a resource.tracking}}</div>
-            <div class="flex flex-row space-x-1">
-                <Badge @status={{@resource.status}} />
-                {{#if @resource.dispatched_at}}
-                    <Badge @status="dispatched">{{concat "Dispatched at " @resource.dispatchedAt}}</Badge>
-                {{/if}}
-            </div>
-            <div class="mt-1">
-                <div class="text-xs text-gray-400 dark:text-gray-500">Date Created: {{@resource.createdAt}}</div>
-                <div class="text-xs text-gray-400 dark:text-gray-500">Type: {{smart-humanize @resource.type}}</div>
-            </div>
-        </:default>
-    </Pill>
-{{/let}}
+<Resource::Pill
+    @resource={{(or @order @resource)}}
+    @resourceType="order"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/order/route-editor.hbs

@@ -52,6 +52,7 @@
         <div class="fleetops-route-editor-section__body">
             <ModelSelect
                 @modelName="place"
+                @selectedItemComponent={{component "select-option/place" compact=true}}
                 @selectedModel={{@resource.payload.pickup}}
                 @placeholder={{t "modals.order-route-form.select-pickup"}}
                 @triggerClass="form-select form-input"
@@ -61,7 +62,7 @@
                 @onChange={{fn this.setPayloadPlace "pickup"}}
                 as |place|
             >
-                <Place::Address @place={{place}} />
+                <SelectOption::Place @option={{place}} />
             </ModelSelect>
 
             {{#if @resource.payload.pickup.hasInvalidCoordinates}}
@@ -104,6 +105,7 @@
                                 {{#let (or waypoint.place waypoint) as |waypointPlace|}}
                                     <ModelSelect
                                         @modelName="place"
+                                        @selectedItemComponent={{component "select-option/place" compact=true}}
                                         @selectedModel={{waypointPlace}}
                                         @placeholder={{concat (t "order.fields.select-waypoint") " " (add index 1)}}
                                         @triggerClass="form-select form-input truncate"
@@ -113,7 +115,7 @@
                                         @onChange={{fn this.setWaypointPlace index}}
                                         as |place|
                                     >
-                                        <Place::Address @place={{place}} />
+                                        <SelectOption::Place @option={{place}} />
                                     </ModelSelect>
 
                                     {{#if waypointPlace.hasInvalidCoordinates}}
@@ -166,6 +168,7 @@
         <div class="fleetops-route-editor-section__body">
             <ModelSelect
                 @modelName="place"
+                @selectedItemComponent={{component "select-option/place" compact=true}}
                 @selectedModel={{@resource.payload.dropoff}}
                 @placeholder={{t "modals.order-route-form.select-dropoff"}}
                 @triggerClass="form-select form-input"
@@ -175,7 +178,7 @@
                 @onChange={{fn this.setPayloadPlace "dropoff"}}
                 as |place|
             >
-                <Place::Address @place={{place}} />
+                <SelectOption::Place @option={{place}} />
             </ModelSelect>
 
             {{#if @resource.payload.dropoff.hasInvalidCoordinates}}
@@ -208,6 +211,7 @@
         <div class="fleetops-route-editor-section__body">
             <ModelSelect
                 @modelName="place"
+                @selectedItemComponent={{component "select-option/place" compact=true}}
                 @selectedModel={{@resource.payload.return}}
                 @placeholder={{t "modals.order-route-form.select-return"}}
                 @triggerClass="form-select form-input"
@@ -217,7 +221,7 @@
                 @onChange={{fn this.setPayloadPlace "return"}}
                 as |place|
             >
-                <Place::Address @place={{place}} />
+                <SelectOption::Place @option={{place}} />
             </ModelSelect>
 
             {{#if @resource.payload.return.hasInvalidCoordinates}}

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

@@ -71,6 +71,7 @@
                 {{#if this.isAssigningDriver}}
                     <ModelSelect
                         @modelName="driver"
+                        @selectedItemComponent={{component "select-option/driver" compact=true}}
                         @selectedModel={{@order.driver_assigned}}
                         @placeholder={{t "order.schedule-card.select-driver"}}
                         @triggerClass="form-select form-input form-input-sm w-full"
@@ -82,7 +83,7 @@
                         @permission="fleet-ops assign-driver-for order"
                         as |model|
                     >
-                        <span class="truncate uppercase text-xs">{{model.name}}</span>
+                        <SelectOption::Driver @option={{model}} />
                     </ModelSelect>
                 {{else}}
                     <a

package/addon/components/order/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @order @resource)}} @resourceType="order" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

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

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @orderConfig @resource)}}
+    @resourceType="order-config"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

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

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @orderConfig @resource)}} @resourceType="order-config" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/part/details.hbs

@@ -90,7 +90,15 @@
             {{#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 class="field-value">
+                        {{#let (resource-component "pill" this.fittedTo) as |pill|}}
+                            {{#if pill}}
+                                {{component pill resource=this.fittedTo}}
+                            {{else}}
+                                {{n-a @resource.asset_name}}
+                            {{/if}}
+                        {{/let}}
+                    </div>
                 </div>
             {{/if}}
         </div>
@@ -125,13 +133,17 @@
                 {{#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 class="field-value">
+                            <Vendor::Pill @vendor={{resource-relation @resource "vendor"}} @titleFallback={{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 class="field-value">
+                            <Warranty::Pill @warranty={{resource-relation @resource "warranty"}} @titleFallback={{n-a @resource.warranty_name}} />
+                        </div>
                     </div>
                 {{/if}}
             </div>

package/addon/components/part/details.js

@@ -1,3 +1,39 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
 
-export default class PartDetailsComponent extends Component {}
+/**
+ * A part only knows the asset it is fitted to by type and uuid; there is no
+ * relation on the model. Look it up so the field can show the asset's pill,
+ * with asset_name as the text meanwhile.
+ */
+export default class PartDetailsComponent extends Component {
+    @service store;
+    @service resourceRegistry;
+    @tracked fittedTo = null;
+
+    constructor() {
+        super(...arguments);
+        this.loadFittedTo.perform();
+    }
+
+    @task *loadFittedTo() {
+        const part = this.args.resource;
+        const id = part?.asset_uuid;
+        const key = this.resourceRegistry?.resolveKey?.(part?.asset_type);
+
+        if (!id || !key) {
+            this.fittedTo = null;
+            return;
+        }
+
+        try {
+            this.fittedTo = this.store.peekRecord(key, id) ?? (yield this.store.findRecord(key, id));
+        } catch (error) {
+            debug(`Could not load the asset part ${part?.id} is fitted to: ${error.message}`);
+            this.fittedTo = null;
+        }
+    }
+}

package/addon/components/part/form.hbs

@@ -161,6 +161,7 @@
                 <InputGroup @name="Asset">
                     <ModelSelect
                         @modelName={{this.assetModelName}}
+                        @selectedItemComponent={{if (resource-component "select-option" this.assetModelName) (component (resource-component "select-option" this.assetModelName) compact=true)}}
                         @selectedModel={{@resource.asset}}
                         @placeholder="Select compatible asset"
                         @triggerClass="form-select form-input"
@@ -170,7 +171,13 @@
                         @disabled={{cannot-write @resource}}
                         as |model|
                     >
-                        {{or model.name model.public_id}}
+                        {{#let (resource-component "select-option" this.assetModelName) as |selectOption|}}
+                            {{#if selectOption}}
+                                {{component selectOption option=model}}
+                            {{else}}
+                                {{or model.displayName model.name model.public_id}}
+                            {{/if}}
+                        {{/let}}
                     </ModelSelect>
                 </InputGroup>
             {{/if}}
@@ -186,6 +193,7 @@
             <InputGroup @name="Vendor" @wrapperClass="col-span-2">
                 <ModelSelect
                     @modelName="vendor"
+                    @selectedItemComponent={{component "select-option/vendor" compact=true}}
                     @selectedModel={{@resource.vendor}}
                     @placeholder="Select Vendor"
                     @triggerClass="form-select form-input"
@@ -196,7 +204,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Vendor @option={{model}} />
                 </ModelSelect>
             </InputGroup>
 
@@ -206,6 +214,7 @@
             <InputGroup @name="Warranty" @wrapperClass="col-span-2">
                 <ModelSelect
                     @modelName="warranty"
+                    @selectedItemComponent={{component "select-option/warranty" compact=true}}
                     @selectedModel={{@resource.warranty}}
                     @placeholder="Select Warranty (optional)"
                     @triggerClass="form-select form-input"
@@ -216,9 +225,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.policy_number}}
-                    -
-                    {{model.provider}}
+                    <SelectOption::Warranty @option={{model}} />
                 </ModelSelect>
             </InputGroup>
         </div>

package/addon/components/part/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @part @resource)}}
+    @resourceType="part"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/part/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @part @resource)}} @resourceType="part" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/payload/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @payload @resource)}}
+    @resourceType="payload"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/payload/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @payload @resource)}} @resourceType="payload" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/place/details.hbs

@@ -75,7 +75,7 @@
             @zoomControl={{false}}
             as |layers|
         >
-            <layers.tile @url={{leaflet-tile-url}} />
+            <layers.tile @url={{(leaflet-tile-url)}} />
             <layers.marker
                 @id={{@resource.id}}
                 @icon={{icon iconUrl=(or @resource.avatar_url "/engines-dist/images/building-marker.png") iconSize=(array 40 40)}}

package/addon/components/place/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @place @resource)}}
+    @resourceType="place"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/place/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @place @resource)}} @resourceType="place" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/position/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @position @resource)}}
+    @resourceType="position"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/position/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @position @resource)}} @resourceType="position" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/positions-replay.hbs

@@ -100,6 +100,7 @@
                 </label>
                 <ModelSelect
                     @modelName="order"
+                    @selectedItemComponent={{component "select-option/order" compact=true}}
                     @selectedModel={{this.selectedOrder}}
                     @query={{this.orderFilters}}
                     @placeholder="Filter by order"
@@ -109,10 +110,7 @@
                     @onChange={{this.onOrderSelected}}
                     as |order|
                 >
-                    <div class="flex items-center justify-between">
-                        <span>{{order.tracking}}</span>
-                        <span class="text-xs text-gray-500">{{order.createdAt}}</span>
-                    </div>
+                    <SelectOption::Order @option={{order}} />
                 </ModelSelect>
             </div>
 

package/addon/components/public-inspection.hbs

@@ -0,0 +1,174 @@
+{{!
+    An inspection filled in from a tokenised link.
+
+    Rendered by the host console's top-level `virtual` route at
+    `/~/inspection?id=…&token=…`, which sits outside the console's shell and
+    outside its authentication gate — so this page brings its own full-height
+    background and its own header, and never assumes a signed-in user.
+}}
+<div class="public-inspection-page min-h-screen bg-gray-50 dark:bg-gray-900 py-4 px-3 sm:py-8 sm:px-4">
+    <div class="max-w-3xl mx-auto">
+        {{#if (and this.pinRequired (not this.form))}}
+            <div class="public-inspection-pin mx-auto max-w-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6 sm:p-8 text-center">
+                <FaIcon @icon="lock" @size="2x" class="text-blue-500 mb-4" />
+                <h1 class="text-lg font-semibold text-gray-900 dark:text-white">{{t "inspection.public.pin-title"}}</h1>
+                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{t "inspection.public.pin-help"}}</p>
+                <div class="mt-5 space-y-3">
+                    <input
+                        type="text"
+                        inputmode="numeric"
+                        autocomplete="one-time-code"
+                        pattern="[0-9]*"
+                        maxlength="6"
+                        class="w-full form-input public-inspection-pin__input"
+                        aria-label={{t "inspection.public.pin-label"}}
+                        placeholder="••••••"
+                        {{sync-value this.pin}}
+                        {{on "input" this.updatePin}}
+                        {{on "keydown" this.pinKeydown}}
+                    />
+                    {{#if this.pinError}}
+                        <p class="text-sm text-red-600 dark:text-red-400" role="alert">{{this.pinError}}</p>
+                    {{/if}}
+                    <Button
+                        @type="primary"
+                        @size="lg"
+                        @icon="unlock"
+                        @text={{t "inspection.public.pin-continue"}}
+                        @disabled={{not this.pinIsComplete}}
+                        @isLoading={{this.loadInspection.isRunning}}
+                        @wrapperClass="w-full"
+                        class="w-full justify-center"
+                        @onClick={{this.submitPin}}
+                    />
+                </div>
+            </div>
+            <FleetbaseAttribution @showPoweredBy={{true}} class="mt-8" />
+
+        {{else if this.loadInspection.isRunning}}
+            <div class="py-24 flex items-center justify-center">
+                <Spinner @loadingMessage={{t "inspection.record.loading-form"}} class="text-sm dark:text-gray-100 flex items-center space-x-2" />
+            </div>
+
+        {{else if this.submission}}
+            <div class="rounded-lg border border-green-200 dark:border-green-800 bg-white dark:bg-gray-800 p-8 text-center">
+                <FaIcon @icon="circle-check" @size="2x" class="text-green-500 mb-4" />
+                <h1 class="text-lg font-semibold text-gray-900 dark:text-white">{{t "inspection.public.submitted-title"}}</h1>
+                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{t "inspection.public.submitted-body"}}</p>
+                <p class="mt-4 text-xs font-mono text-gray-400">{{this.submission.id}}</p>
+            </div>
+
+        {{else if (and this.error (not this.form))}}
+            <div class="rounded-lg border border-red-200 dark:border-red-800 bg-white dark:bg-gray-800 p-8 text-center">
+                <FaIcon @icon="triangle-exclamation" @size="2x" class="text-red-500 mb-4" />
+                <h1 class="text-lg font-semibold text-gray-900 dark:text-white">{{t "inspection.public.unavailable-title"}}</h1>
+                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{this.error}}</p>
+            </div>
+
+        {{else if this.form}}
+            <header class="mb-4">
+                <h1 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">{{this.form.name}}</h1>
+                {{#if this.form.description}}
+                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{this.form.description}}</p>
+                {{/if}}
+                <div class="mt-3 flex flex-wrap gap-x-6 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+                    {{#if this.identity.assignee}}
+                        <div><span class="font-semibold text-gray-700 dark:text-gray-200">{{t "inspection.public.for"}}:</span> {{this.identity.assignee.name}}</div>
+                    {{/if}}
+                    {{#if this.identity.vehicle}}
+                        <div><span class="font-semibold text-gray-700 dark:text-gray-200">{{t "inspection.record.vehicle"}}:</span> {{this.identity.vehicle.name}}</div>
+                    {{/if}}
+                    {{#if this.identity.driver}}
+                        <div><span class="font-semibold text-gray-700 dark:text-gray-200">{{t "inspection.record.driver"}}:</span> {{this.identity.driver.name}}</div>
+                    {{/if}}
+                    {{#if this.identity.expires_at}}
+                        <div><span class="font-semibold text-gray-700 dark:text-gray-200">{{t "inspection.link.expires"}}:</span> {{format-date-fns this.identity.expires_at "dd MMM yyyy, HH:mm"}}</div>
+                    {{/if}}
+                </div>
+            </header>
+
+            <div class="inspection-sheet mb-4">
+                <div class="inspection-sheet__body">
+                    <div class="inspection-sheet__groups">
+                        <section class="inspection-group">
+                            <div class="inspection-group__header">
+                                <span class="inspection-group__name">{{t "inspection.record.details"}}</span>
+                            </div>
+                            <div class="inspection-group__grid" data-columns="2">
+                                <div class="inspection-cell">
+                                    <span class="inspection-cell__label">{{t "inspection.record.odometer"}}</span>
+                                    <div class="inspection-cell__control">
+                                        <input type="number" inputmode="decimal" class="w-full form-input" aria-label={{t "inspection.record.odometer"}} placeholder={{t "inspection.record.odometer-placeholder"}} {{sync-value this.odometer}} {{on "input" (fn this.updateReading "odometer")}} />
+                                    </div>
+                                </div>
+                                <div class="inspection-cell">
+                                    <span class="inspection-cell__label">{{t "inspection.record.engine-hours"}}</span>
+                                    <div class="inspection-cell__control">
+                                        <input type="number" inputmode="decimal" class="w-full form-input" aria-label={{t "inspection.record.engine-hours"}} placeholder={{t "inspection.record.engine-hours-placeholder"}} {{sync-value this.engineHours}} {{on "input" (fn this.updateReading "engineHours")}} />
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+
+            {{#if this.hasSheet}}
+                <InspectionSheet @groups={{this.groups}} @values={{this.values}} @onChange={{this.setValue}} @uploader={{this.uploadFile}} />
+            {{else}}
+                <div class="inspection-sheet">
+                    <div class="inspection-sheet__body">
+                        <div class="inspection-group__empty px-4">{{t "inspection.record.form-has-no-fields"}}</div>
+                    </div>
+                </div>
+            {{/if}}
+
+            <div class="inspection-sheet mt-4">
+                <div class="inspection-sheet__body">
+                    <div class="inspection-sheet__groups">
+                        <section class="inspection-group">
+                            <div class="inspection-group__header">
+                                <span class="inspection-group__name">{{t "inspection.public.sign-off"}}</span>
+                            </div>
+                            <div class="inspection-group__grid" data-columns="1">
+                                <div class="inspection-cell">
+                                    <span class="inspection-cell__label">{{t "inspection.public.your-name"}}</span>
+                                    <span class="inspection-cell__hint">{{t "inspection.public.your-name-help"}}</span>
+                                    <div class="inspection-cell__control">
+                                        <input type="text" class="w-full form-input" aria-label={{t "inspection.public.your-name"}} placeholder={{t "inspection.public.your-name-placeholder"}} {{sync-value this.signatureName}} {{on "input" (fn this.updateReading "signatureName")}} />
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+
+            {{#if this.error}}
+                <div class="mt-4 rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-3 text-sm text-red-700 dark:text-red-300">{{this.error}}</div>
+            {{/if}}
+
+            <div class="public-inspection-submit mt-4 flex flex-col-reverse items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+                <div class="text-xs text-gray-500 dark:text-gray-400 text-center sm:text-left">
+                    {{#if (eq this.blockedReason "required")}}
+                        {{t "inspection.public.blocked-required" count=this.summary.missingRequired}}
+                    {{else if (eq this.blockedReason "defects")}}
+                        {{t "inspection.public.blocked-defects" count=this.summary.incompleteDefects}}
+                    {{/if}}
+                </div>
+                <Button
+                    @type="primary"
+                    @size="lg"
+                    @icon="paper-plane"
+                    @text={{t "inspection.public.submit"}}
+                    @disabled={{not this.canSubmit}}
+                    @isLoading={{this.submitInspection.isRunning}}
+                    @wrapperClass="public-inspection-submit__button"
+                    @onClick={{perform this.submitInspection}}
+                />
+            </div>
+
+            <FleetbaseAttribution @showPoweredBy={{true}} class="mt-8" />
+        {{/if}}
+    </div>
+</div>