@fleetbase/fleetops-engine 0.6.18 → 0.6.20

package/addon/components/vendor/form.hbs

@@ -0,0 +1,149 @@
+<div class="form-wrapper" ...attributes>
+    {{#if @resource.isNew}}
+        <ContentPanel @title={{t "vendor.fields.setup-vendor"}} @open={{true}} @wrapperClass="bordered-top">
+            <div class="space-y-2">
+                <InputGroup @name={{t "vendor.fields.select-vendor-type"}}>
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelect
+                            @options={{get-fleet-ops-options "vendorTypes"}}
+                            @selected={{find-by "value" @resource.type (get-fleet-ops-options "vendorTypes")}}
+                            @onChange={{this.handleTypeSelection}}
+                            @placeholder={{t "vendor.fields.select-vendor-status"}}
+                            @triggerClass="form-select form-input"
+                            @disabled={{cannot-write @resource}}
+                            as |status|
+                        >
+                            <div class="text-sm">
+                                <div class="font-semibold normalize-in-trigger">{{status.label}}</div>
+                                <div class="hide-from-trigger">{{status.description}}</div>
+                            </div>
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+                {{#if @resource.isIntegratedVendor}}
+                    <InputGroup @name={{t "vendor.fields.choose-vendor"}}>
+                        <FetchSelect
+                            @endpoint="integrated-vendors/supported"
+                            @selected={{this.integration.provider_options}}
+                            @onChange={{this.createVendorIntegration}}
+                            @placeholder="Select integrated vendor provider"
+                            @disabled={{cannot-write @resource}}
+                            as |option|
+                        >
+                            <div class="flex flex-row items-center">
+                                <Image src={{option.logo}} alt={{option.code}} class="w-4 h-4" width="16" height="16" />
+                                <h3 class="text-sm ml-4 dark:text-white">{{option.name}}</h3>
+                            </div>
+                        </FetchSelect>
+                    </InputGroup>
+                {{/if}}
+            </div>
+        </ContentPanel>
+    {{/if}}
+
+    {{#if (and @resource.isIntegratedVendor this.integration)}}
+        <IntegratedVendor::Form @resource={{this.integration}} />
+    {{else if (not @resource.isIntegratedVendor)}}
+        <ContentPanel @title={{t "vendor.fields.vendor-details"}} @open={{true}} @wrapperClass="bordered-top">
+            <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+                <InputGroup @name={{t "common.name"}} @value={{@resource.name}} @helpText={{t "vendor.fields.name-help-text"}} @disabled={{cannot-write @resource}} />
+                <InputGroup @name={{t "common.email"}} @type="email" @value={{@resource.email}} @helpText={{t "vendor.fields.email-help-text"}} @disabled={{cannot-write @resource}} />
+                <InputGroup @name={{t "common.phone"}} @helpText={{t "vendor.fields.phone-text"}}>
+                    <PhoneInput @value={{@resource.phone}} @onInput={{fn (mut @resource.phone)}} class="form-input w-full" disabled={{cannot-write @resource}} />
+                </InputGroup>
+                <InputGroup @name={{t "vendor.fields.website"}} @value={{@resource.website_url}} @helpText={{t "vendor.fields.website-help-text"}} @disabled={{cannot-write @resource}} />
+                <InputGroup @name={{t "common.type"}}>
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelect
+                            @options={{get-fleet-ops-options "vendorTypes"}}
+                            @selected={{find-by "value" @resource.type (get-fleet-ops-options "vendorTypes")}}
+                            @onChange={{set-model-attr @resource "type"}}
+                            @placeholder={{t "vendor.fields.select-vendor-type"}}
+                            @triggerClass="form-select form-input"
+                            @disabled={{cannot-write @resource}}
+                            as |status|
+                        >
+                            <div class="text-sm">
+                                <div class="font-semibold normalize-in-trigger">{{status.label}}</div>
+                                <div class="hide-from-trigger">{{status.description}}</div>
+                            </div>
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+                <InputGroup @name={{t "common.status"}}>
+                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                        <PowerSelect
+                            @options={{get-fleet-ops-options "vendorStatuses"}}
+                            @selected={{find-by "value" @resource.status (get-fleet-ops-options "vendorStatuses")}}
+                            @onChange={{set-model-attr @resource "status"}}
+                            @placeholder={{t "vendor.fields.select-vendor-status"}}
+                            @triggerClass="form-select form-input"
+                            @disabled={{cannot-write @resource}}
+                            as |status|
+                        >
+                            <div class="text-sm">
+                                <div class="font-semibold normalize-in-trigger">{{status.label}}</div>
+                                <div class="hide-from-trigger">{{status.description}}</div>
+                            </div>
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+                <InputGroup @wrapperClass="col-span-2 my-0.5">
+                    <div class="flex items-center justify-between">
+                        <label>
+                            {{t "common.address"}}
+                        </label>
+                        <div class="mb-1.5 space-x-1 flex flex-row">
+                            {{#if @resource.has_place}}
+                                <Button @type="danger" @size="xs" @icon="trash" @text="Remove" @onClick={{this.removePlace}} @disabled={{cannot-write @resource}} />
+                            {{/if}}
+                            <Button
+                                @type="default"
+                                @size="xs"
+                                @icon="edit"
+                                @text={{if @resource.has_place (t "common.edit-address") (t "common.new-address")}}
+                                @onClick={{this.editPlace}}
+                                @disabled={{cannot-write @resource}}
+                            />
+                        </div>
+                    </div>
+                    <ModelSelect
+                        @modelName="place"
+                        @selectedModel={{@resource.place}}
+                        @placeholder={{t "common.select-address"}}
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{this.selectPlace}}
+                        @disabled={{cannot-write @resource}}
+                        as |model|
+                    >
+                        <div class="flex items-center flex-row justify-between">
+                            <div class="truncate flex-1">{{n-a model.address}}</div>
+                            <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>
+                        </div>
+                    </ModelSelect>
+                </InputGroup>
+                <InputGroup @name={{t "common.country"}}>
+                    <CountrySelect
+                        class="w-full form-input form-select form-datalist"
+                        @value={{@resource.country}}
+                        @onChange={{fn (mut @resource.country)}}
+                        @disabled={{cannot-write @resource}}
+                        @placeholder={{t "common.country"}}
+                    />
+                </InputGroup>
+
+                <RegistryYield @registry="fleet-ops:component:vendor: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:vendor:form" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+        </RegistryYield>
+    {{/if}}
+</div>

package/addon/components/vendor/form.js

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class VendorFormComponent extends Component {
+    @service vendorActions;
+    @tracked integration;
+
+    @action createVendorIntegration(provider) {
+        if (!provider) return;
+        const integration = this.vendorActions.createVendorIntegration(provider);
+        this.#setIntegration(integration);
+    }
+
+    @action handleTypeSelection({ value: type }) {
+        this.args.resource.type = type;
+        if (type !== 'integrated_vendor') {
+            this.#setIntegration(null);
+        }
+    }
+
+    @action selectPlace(place) {
+        if (!place) return;
+        this.args.resource.setProperties({
+            place,
+            place_uuid: place.id,
+        });
+    }
+
+    @action removePlace() {
+        this.args.resource.setProperties({
+            place: null,
+            place_uuid: null,
+        });
+    }
+
+    @action editPlace() {
+        if (this.args.resource.has_place) {
+            this.vendorActions.editPlace(this.args.resource);
+        } else {
+            this.vendorActions.createPlace(this.args.resource);
+        }
+    }
+
+    #setIntegration(integration) {
+        this.integration = integration;
+        if (typeof this.args.onIntegrationCreated === 'function') {
+            this.args.onIntegrationCreated(integration);
+        }
+    }
+}

package/addon/components/warranty/details.hbs

@@ -0,0 +1,81 @@
+<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">Provider</div>
+                <div class="field-value">{{n-a @resource.provider}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Policy Number</div>
+                <div class="field-value">{{n-a @resource.policy_number}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Status</div>
+                <div class="field-value">
+                    {{#if @resource.is_active}}
+                        <Badge @status="success">Active</Badge>
+                    {{else if @resource.is_expired}}
+                        <Badge @status="danger">Expired</Badge>
+                    {{else}}
+                        <Badge @status="default">Inactive</Badge>
+                    {{/if}}
+                </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">Subject</div>
+                <div class="field-value">{{n-a @resource.subject_name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Coverage Summary</div>
+                <div class="field-value">{{n-a @resource.coverage_summary}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Start Date</div>
+                <div class="field-value">{{format-date @resource.start_date}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">End Date</div>
+                <div class="field-value">{{format-date @resource.end_date}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Days Remaining</div>
+                <div class="field-value">
+                    {{#if @resource.is_expired}}
+                        <Badge @status="danger">Expired</Badge>
+                    {{else if @resource.days_remaining}}
+                        {{@resource.days_remaining}} days
+                        {{#if (lt @resource.days_remaining 30)}}
+                            <Badge @status="warning">Expiring Soon</Badge>
+                        {{/if}}
+                    {{else}}
+                        N/A
+                    {{/if}}
+                </div>
+            </div>
+
+            <div class="field-info-container col-span-3">
+                <div class="field-name">Terms</div>
+                <div class="field-value">{{n-a @resource.terms}}</div>
+            </div>
+
+            <div class="field-info-container col-span-3">
+                <div class="field-name">Policy Document</div>
+                <div class="field-value">{{n-a @resource.policy}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/warranty/details.js

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

package/addon/components/warranty/form.hbs

@@ -0,0 +1,82 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title="Warranty Details" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name="Provider" @wrapperClass="col-span-2">
+                <Input @value={{@resource.provider}} @type="text" class="w-full form-input" placeholder="Provider" disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name="Policy Number">
+                <Input @value={{@resource.policy_number}} @type="text" class="w-full form-input" placeholder="Policy Number" 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="Start Date">
+                <DatePicker
+                    @value={{@resource.start_date}}
+                    @onChange={{fn (mut @resource.start_date)}}
+                    @placeholder="Select Start Date"
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
+            <InputGroup @name="End Date">
+                <DatePicker
+                    @value={{@resource.end_date}}
+                    @onChange={{fn (mut @resource.end_date)}}
+                    @placeholder="Select End Date"
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
+            <InputGroup @name="Terms" @wrapperClass="col-span-2">
+                <Textarea
+                    @value={{@resource.terms}}
+                    aria-label="Terms"
+                    class="w-full form-input"
+                    disabled={{cannot-write @resource}}
+                    placeholder="Warranty Terms"
+                    rows={{5}}
+                />
+            </InputGroup>
+
+            <InputGroup @name="Policy Document" @wrapperClass="col-span-2">
+                <Textarea
+                    @value={{@resource.policy}}
+                    aria-label="Policy"
+                    class="w-full form-input"
+                    disabled={{cannot-write @resource}}
+                    placeholder="Policy Document"
+                    rows={{5}}
+                />
+            </InputGroup>
+
+            <RegistryYield @registry="fleet-ops:component:warranty: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:warranty:form" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+</div>

package/addon/components/warranty/form.js

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

package/addon/components/widget/fleet-ops-key-metrics.hbs

@@ -1,7 +1,7 @@
 <div class="fleet-ops-key-metrics" ...attributes>
     <div class="flex flex-col">
         <div class="flex flex-row items-center justify-between px-4 py-2 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm">
-            <span class="text-base font-bold text-black dark:text-gray-100">{{t "fleet-ops.component.widget.key-metrics.title"}}</span>
+            <span class="text-base font-bold text-black dark:text-gray-100">{{t "widget.key-metrics.title"}}</span>
         </div>
 
         <div class="mt-4">

package/addon/components/work-order/details.hbs

@@ -0,0 +1,93 @@
+<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">Code</div>
+                <div class="field-value">{{n-a @resource.code}}</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">Priority</div>
+                <div class="field-value">
+                    {{#if (eq @resource.priority "critical")}}
+                        <Badge @status="danger">Critical</Badge>
+                    {{else if (eq @resource.priority "high")}}
+                        <Badge @status="warning">High</Badge>
+                    {{else if (eq @resource.priority "medium")}}
+                        <Badge @status="info">Medium</Badge>
+                    {{else}}
+                        <Badge @status="default">Low</Badge>
+                    {{/if}}
+                </div>
+            </div>
+
+            <div class="field-info-container col-span-3">
+                <div class="field-name">Subject</div>
+                <div class="field-value">{{n-a @resource.subject}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Target</div>
+                <div class="field-value">{{n-a @resource.target_name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Assignee</div>
+                <div class="field-value">{{n-a @resource.assignee_name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Completion</div>
+                <div class="field-value">{{n-a @resource.completion_percentage}}%</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Opened At</div>
+                <div class="field-value">{{format-date @resource.opened_at}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Due At</div>
+                <div class="field-value">{{format-date @resource.due_at}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Closed At</div>
+                <div class="field-value">{{format-date @resource.closed_at}}</div>
+            </div>
+
+            {{#if @resource.is_overdue}}
+                <div class="field-info-container">
+                    <div class="field-name">Overdue Status</div>
+                    <div class="field-value">
+                        <Badge @status="danger">Overdue</Badge>
+                    </div>
+                </div>
+            {{else if @resource.days_until_due}}
+                <div class="field-info-container">
+                    <div class="field-name">Days Until Due</div>
+                    <div class="field-value">{{@resource.days_until_due}} days</div>
+                </div>
+            {{/if}}
+
+            <div class="field-info-container">
+                <div class="field-name">Estimated Duration</div>
+                <div class="field-value">{{n-a @resource.estimated_duration}}</div>
+            </div>
+
+            <div class="field-info-container col-span-3">
+                <div class="field-name">Instructions</div>
+                <div class="field-value">{{n-a @resource.instructions}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/work-order/details.js

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

package/addon/components/work-order/form.hbs

@@ -0,0 +1,113 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title="Work Order Details" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name="Code">
+                <Input @value={{@resource.code}} @type="text" class="w-full form-input" placeholder="Work Order Code" disabled={{cannot-write @resource}} />
+            </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="Subject" @wrapperClass="col-span-2">
+                <Input @value={{@resource.subject}} @type="text" class="w-full form-input" placeholder="Subject" disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name="Priority">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.priorityOptions}}
+                        @selected={{@resource.priority}}
+                        @onChange={{fn (mut @resource.priority)}}
+                        @placeholder="Select Priority"
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |priority|
+                    >
+                        {{smart-humanize priority}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name="Assignee">
+                <ModelSelect
+                    @modelName="user"
+                    @selectedModel={{@resource.assignee}}
+                    @placeholder="Select Assignee"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.assignee)}}
+                    @onChangeId={{fn (mut @resource.assignee_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name="Opened At">
+                <DatePicker
+                    @value={{@resource.opened_at}}
+                    @onChange={{fn (mut @resource.opened_at)}}
+                    @placeholder="Select Opened Date"
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
+            <InputGroup @name="Due At">
+                <DatePicker
+                    @value={{@resource.due_at}}
+                    @onChange={{fn (mut @resource.due_at)}}
+                    @placeholder="Select Due Date"
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
+            <InputGroup @name="Closed At">
+                <DatePicker
+                    @value={{@resource.closed_at}}
+                    @onChange={{fn (mut @resource.closed_at)}}
+                    @placeholder="Select Closed Date"
+                    @disabled={{cannot-write @resource}}
+                    class="w-full form-input"
+                />
+            </InputGroup>
+
+            <InputGroup @name="Instructions" @wrapperClass="col-span-2">
+                <Textarea
+                    @value={{@resource.instructions}}
+                    aria-label="Instructions"
+                    class="w-full form-input"
+                    disabled={{cannot-write @resource}}
+                    placeholder="Instructions"
+                    rows={{5}}
+                />
+            </InputGroup>
+
+            <RegistryYield @registry="fleet-ops:component:work-order: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:work-order:form" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+</div>

package/addon/components/work-order/form.js

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+
+export default class WorkOrderFormComponent extends Component {
+    /**
+     * Status options for work orders
+     */
+    statusOptions = ['open', 'in_progress', 'on_hold', 'completed', 'cancelled'];
+
+    /**
+     * Priority options
+     */
+    priorityOptions = ['low', 'medium', 'high', 'critical'];
+}

package/addon/components/zone/details.hbs

@@ -0,0 +1,38 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title={{t "zone.fields.details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2">
+            <div class="field-info-container">
+                <div class="field-name">{{t "zone.fields.name"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.name}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">{{t "zone.fields.description"}}</div>
+                <div class="field-value uppercase">{{n-a @resource.type}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "common.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.firstCoordinatePairLatitude}}
+            @lng={{@resource.firstCoordinatePairLongitude}}
+            @zoom={{12}}
+            @zoomControl={{false}}
+            as |layers|
+        >
+            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
+            <layers.polygon
+                @id={{@resource.id}}
+                @record={{@resource}}
+                @locations={{unwrap-coordinates @resource.leafletCoordinates}}
+                @fillColor={{@resource.color}}
+                @color={{@resource.stroke_color}}
+                as |polygon|
+            >
+                <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{@resource.name}} {{t "resource.zone"}}</polygon.tooltip>
+            </layers.polygon>
+        </LeafletMap>
+    </ContentPanel>
+</div>