@fleetbase/fleetops-engine 0.6.17 → 0.6.19

package/addon/components/part/form.hbs

@@ -0,0 +1,163 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title="Part 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.partImage"}} 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="SKU">
+                <Input @value={{@resource.sku}} @type="text" class="w-full form-input" placeholder="SKU" disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <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}} />
+            </InputGroup>
+
+            <InputGroup @name="Model">
+                <Input @value={{@resource.model}} @type="text" class="w-full form-input" placeholder="Model" 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}} />
+            </InputGroup>
+
+            <InputGroup @name="Barcode">
+                <Input @value={{@resource.barcode}} @type="text" class="w-full form-input" placeholder="Barcode" disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name="Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.partTypeOptions}}
+                        @selected={{@resource.type}}
+                        @onChange={{fn (mut @resource.type)}}
+                        @placeholder="Select Part 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="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>
+
+            <InputGroup @name="Unit Cost">
+                <MoneyInput
+                    class="w-full"
+                    @value={{@resource.unit_cost}}
+                    @currency={{or @resource.currency "USD"}}
+                    @canSelectCurrency={{true}}
+                    @onCurrencyChange={{fn (mut @resource.currency)}}
+                    @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}}
+                />
+            </InputGroup>
+
+            <InputGroup @name="Vendor">
+                <ModelSelect
+                    @modelName="vendor"
+                    @selectedModel={{@resource.vendor}}
+                    @placeholder="Select Vendor"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.vendor)}}
+                    @onChangeId={{fn (mut @resource.vendor_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </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>
+
+            <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>
+
+    <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>

package/addon/components/part/form.js

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import { task } from 'ember-concurrency';
+
+export default class PartFormComponent extends Component {
+    /**
+     * Part type options
+     */
+    partTypeOptions = [
+        'filter',
+        'tire',
+        'belt',
+        'brake_pad',
+        'battery',
+        'oil',
+        'coolant',
+        'spark_plug',
+        'air_filter',
+        'fuel_filter',
+        'transmission_fluid',
+        'wiper_blade',
+        'light_bulb',
+        'fuse',
+        'sensor',
+        'other',
+    ];
+
+    /**
+     * Status options for parts
+     */
+    statusOptions = ['in_stock', 'low_stock', 'out_of_stock', 'discontinued', 'on_order'];
+
+    /**
+     * Task to handle photo upload
+     */
+    @task *handlePhotoUpload(file) {
+        try {
+            const response = yield file.upload(this.args.resource);
+            this.args.resource.photo_uuid = response.uuid;
+            this.args.resource.photo_url = response.url;
+        } catch (error) {
+            console.error('Photo upload failed:', error);
+        }
+    }
+}

package/addon/components/place/activity.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/activity.js

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

package/addon/components/place/card.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/card.js

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

package/addon/components/place/comments.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/comments.js

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

package/addon/components/place/details.hbs

@@ -0,0 +1,106 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title={{t "place.fields.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">{{t "common.name"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.name}}</div>
+            </div>
+
+            <div class="field-info-container col-span-2">
+                <div class="field-name">{{t "place.fields.street-1"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.street1}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "place.fields.street-2"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.street2}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "place.fields.neighborhood"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.neighborhood}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "place.fields.building"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.building}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "place.fields.security-access-code"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.security_access_code}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "place.fields.city"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.city}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "place.fields.state"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.province}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "place.fields.country"}}</div>
+                <div class="field-value uppercase">
+                    <CountryName @country={{@resource.country}} @showFlag={{true}} />
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "place.fields.phone"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.phone}}</div>
+            </div>
+
+            <div class="field-info-container col-span-3">
+                <div class="field-name">
+                    {{t "place.fields.coordinates"}}
+                </div>
+                <div class="field-value">
+                    {{point-coordinates @resource.location}}
+                </div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+
+    <ContentPanel @title="Map" @open={{true}} @wrapperClass="bordered-top">
+        <LeafletMap
+            class="w-full h-48 rounded-md shadow-md border border-gray-200 dark:border-gray-700"
+            @lat={{@resource.latitude}}
+            @lng={{@resource.longitude}}
+            @zoom={{17}}
+            @zoomControl={{false}}
+            as |layers|
+        >
+            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
+            <layers.marker
+                @id={{@resource.id}}
+                @icon={{icon iconUrl=(or @resource.avatar_url "/engines-dist/images/building-marker.png") iconSize=(array 40 40)}}
+                @location={{point-to-coordinates @resource.location}}
+                @riseOnHover={{true}}
+                @title={{@resource.address}}
+                @alt={{@resource.address}}
+                as |marker|
+            >
+                <marker.popup>
+                    <div>{{@resource.address}}</div>
+                    <div>{{format-point @resource.location}}</div>
+                </marker.popup>
+                <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="bottom">{{@resource.name}}</marker.tooltip>
+            </layers.marker>
+        </LeafletMap>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "avatar-picker.avatar"}} @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.displayName}} src={{or @resource.avatar_custom_url @resource.avatar_url}} @fallbackSrc={{config "defaultValues.placeAvatar"}} class="w-12 h-12" />
+                </div>
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/place/details.js

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

package/addon/components/place/documents.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/documents.js

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

package/addon/components/place/driver-visits.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/driver-visits.js

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

package/addon/components/place/form.hbs

@@ -0,0 +1,60 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title={{t "place.fields.details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-3 gap-2 text-xs dark:text-gray-100 no-input-group-padding">
+            <InputGroup @name={{t "common.name"}} @wrapperClass="col-span-3">
+                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder={{t "common.name"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+            <InputGroup @name={{t "place.fields.street-1"}} @value={{@resource.street1}} @wrapperClass="col-span-3">
+                <AutocompleteInput
+                    @value={{@resource.street1}}
+                    @fetchUrl="places/lookup"
+                    @onSelect={{this.onAutocomplete}}
+                    disabled={{cannot-write @resource}}
+                    placeholder={{t "place.fields.street-1"}}
+                    class="w-full"
+                    as |result|
+                >
+                    {{result.address}}
+                </AutocompleteInput>
+            </InputGroup>
+            <InputGroup
+                @name={{t "place.fields.street-2"}}
+                @autocomplete="nope"
+                @value={{@resource.street2}}
+                @wrapperClass="col-span-3"
+                @disabled={{cannot-write @resource}}
+            />
+            <InputGroup @name={{t "place.fields.neighborhood"}} @autocomplete="nope" @value={{@resource.neighborhood}} @disabled={{cannot-write @resource}} />
+            <InputGroup @name={{t "place.fields.building"}} @autocomplete="nope" @value={{@resource.building}} @disabled={{cannot-write @resource}} />
+            <InputGroup @name={{t "place.fields.security-access-code"}} @autocomplete="nope" @value={{@resource.security_access_code}} @disabled={{cannot-write @resource}} />
+            <InputGroup @name={{t "place.fields.postal-code"}} @autocomplete="nope" @value={{@resource.postal_code}} @disabled={{cannot-write @resource}} />
+            <InputGroup @name={{t "place.fields.city"}} @autocomplete="nope" @value={{@resource.city}} @disabled={{cannot-write @resource}} />
+            <InputGroup @name={{t "place.fields.state"}} @autocomplete="nope" @value={{@resource.province}} @disabled={{cannot-write @resource}} />
+            <InputGroup @name={{t "place.fields.country"}} @wrapperClass="col-span-2">
+                <CountrySelect
+                    class="w-full form-input form-select form-datalist"
+                    @value={{@resource.country}}
+                    @onChange={{fn (mut @resource.country)}}
+                    @resourceholder={{t "place.fields.country"}}
+                    @disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+            <InputGroup @name={{t "place.fields.coordinates"}} @wrapperClass="col-span-2">
+                <ModelCoordinatesInput @model={{@resource}} @disabled={{cannot-write @resource}} @autocomplete="all" @onInputReady={{fn (mut this.coordinatesInput)}} />
+            </InputGroup>
+            <InputGroup @name={{t "place.fields.phone"}} @wrapperClass="col-span-2">
+                <PhoneInput @value={{@resource.phone}} @autocomplete="nope" @onInput={{this.phone}} disabled={{cannot-write @resource}} class="form-input w-full" />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+
+    <ContentPanel @title={{t "avatar-picker.avatar"}} @open={{true}} @wrapperClass="bordered-top">
+        <AvatarPicker @model={{@resource}} @defaultAvatar={{config "defaultValues.placeAvatar"}} @disabled={{cannot-write @resource}} />
+    </ContentPanel>
+
+    <RegistryYield @registry="fleet-ops:component:place:form" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+</div>

package/addon/components/place/form.js

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class PlaceFormComponent extends Component {
+    @tracked coordinatesInput;
+
+    @action onAutocomplete(selected) {
+        this.args.resource.setProperties({ ...selected });
+
+        if (this.coordinatesInput && selected.location) {
+            this.coordinatesInput.updateCoordinates(selected.location);
+        }
+    }
+}

package/addon/components/place/frequency-map.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/frequency-map.js

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

package/addon/components/place/map.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/map.js

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

package/addon/components/place/operations.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/operations.js

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

package/addon/components/place/performance.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/performance.js

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

package/addon/components/place/recent-orders.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/recent-orders.js

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

package/addon/components/place/rules.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/rules.js

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

package/addon/components/place/service-areas.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/place/service-areas.js

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

package/addon/components/route-list.hbs

@@ -16,9 +16,9 @@
                 <div class="px-3 py-2 w-full bg-yellow-200 text-yellow-900 rounded shadow-sm flex flex-col justify-center items-start mb-3">
                     <div class="flex flex-row items-center">
                         <FaIcon @icon="eye" class="mr-2 text-yellow-900" />
-                        <span class="font-bold">{{if this.isWaypointsCollapsed (t "fleet-ops.component.route-list.expand") (t "fleet-ops.component.route-list.collapse")}}</span>
+                        <span class="font-bold">{{if this.isWaypointsCollapsed (t "route-list.expand") (t "route-list.collapse")}}</span>
                     </div>
-                    <div>{{@order.payload.middleWaypoints.length}} {{t "fleet-ops.component.route-list.more-waypoints"}}</div>
+                    <div>{{@order.payload.middleWaypoints.length}} {{t "route-list.more-waypoints"}}</div>
                 </div>
             </Button>
             {{#unless this.isWaypointsCollapsed}}

package/addon/components/sensor/details.hbs

@@ -0,0 +1,108 @@
+<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">Sensor Type</div>
+                <div class="field-value">{{smart-humanize @resource.sensor_type}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Unit</div>
+                <div class="field-value">{{n-a @resource.unit}}</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">Minimum Threshold</div>
+                <div class="field-value">{{n-a @resource.min_threshold}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Maximum Threshold</div>
+                <div class="field-value">{{n-a @resource.max_threshold}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Threshold Inclusive</div>
+                <div class="field-value">
+                    {{#if @resource.threshold_inclusive}}
+                        <Badge @status="success">Yes</Badge>
+                    {{else}}
+                        <Badge @status="default">No</Badge>
+                    {{/if}}
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Report Frequency</div>
+                <div class="field-value">{{n-a @resource.report_frequency_sec}} seconds</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Device</div>
+                <div class="field-value">{{n-a @resource.device_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">Attached To</div>
+                <div class="field-value">{{n-a @resource.attached_to_name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Active Status</div>
+                <div class="field-value">
+                    {{#if @resource.is_active}}
+                        <Badge @status="success">Active</Badge>
+                    {{else}}
+                        <Badge @status="warning">Inactive</Badge>
+                    {{/if}}
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Last Reading</div>
+                <div class="field-value">{{n-a @resource.last_reading_formatted}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Last Reading At</div>
+                <div class="field-value">{{format-date @resource.last_reading_at}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Threshold Status</div>
+                <div class="field-value">
+                    {{#if (eq @resource.threshold_status "normal")}}
+                        <Badge @status="success">Normal</Badge>
+                    {{else if (eq @resource.threshold_status "out_of_range")}}
+                        <Badge @status="danger">Out of Range</Badge>
+                    {{else if (eq @resource.threshold_status "above_maximum")}}
+                        <Badge @status="warning">Above Maximum</Badge>
+                    {{else if (eq @resource.threshold_status "below_minimum")}}
+                        <Badge @status="warning">Below Minimum</Badge>
+                    {{else}}
+                        <Badge @status="default">{{smart-humanize @resource.threshold_status}}</Badge>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/sensor/details.js

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