@fleetbase/fleetops-engine 0.6.18 → 0.6.20

package/addon/components/order/details/detail.hbs

@@ -0,0 +1,169 @@
+<ContentPanel @title="Details" @open={{true}} @isLoading={{@isLoading}} @actionButtons={{this.actionButtons}} @wrapperClass="bordered-top">
+    <:title>
+        <div class="ml-2 flex flex-row space-x-1">
+            {{#if @resource.dispatched}}
+                <Badge @hideStatusDot={{false}} @status="Dispatched" />
+            {{/if}}
+            {{#if @resource.adhoc}}
+                <Badge @hideStatusDot={{false}} @disableHumanize={{true}} @status="success">{{t "order.fields.ad-hoc"}}</Badge>
+            {{/if}}
+        </div>
+    </:title>
+    <:default>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mb-4 mt-1">
+            <div class="field-info-container">
+                <div class="field-name">
+                    <span>{{t "order.fields.driver-assigned"}}</span>
+                </div>
+                <div class="field-value">
+                    <div>
+                        <a href="javascript:;" class="flex flex-row space-x-2" {{on "click" (fn this.focusOrderAssignedDriver @resource.driver_assigned)}}>
+                            <div class="relative shrink-0">
+                                <Image
+                                    src={{avatar-url @resource.driver_assigned.photo_url}}
+                                    @fallbackSrc={{config "defaultValues.driverImage"}}
+                                    width="28"
+                                    height="28"
+                                    class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
+                                    alt={{@resource.driver_assigned.name}}
+                                />
+                                <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 h-2 w-2 {{if @resource.driver_assigned.online 'text-green-500' 'text-yellow-200'}}" />
+                            </div>
+                            <div>
+                                <div class="text-sm">{{n-a @resource.driver_assigned.name}}</div>
+                                <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.driver_assigned.phone "No Phone"}}</div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name flex flex-row items-center justify-between">
+                    <span>{{t "order.fields.vehicle-assigned"}}</span>
+                </div>
+                <div class="field-value">
+                    <a href="javascript:;" class="flex flex-row space-x-2 shrink-0">
+                        <div class="relative shrink-0">
+                            <Image
+                                src={{@resource.vehicle_assigned.photo_url}}
+                                @fallbackSrc={{config "defaultValues.vehicleImage"}}
+                                width="28"
+                                height="28"
+                                class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
+                                alt={{n-a @resource.vehicle_assigned.name @resource.vehicle_assigned.yearMakeModel}}
+                            />
+                            <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 h-2 w-2 {{if @resource.vehicle_assigned.online 'text-green-500' 'text-yellow-200'}}" />
+                        </div>
+                        <div>
+                            <div class="text-sm">{{n-a @resource.vehicle_assigned.name @resource.vehicle_assigned.yearMakeModel}}</div>
+                            <div class="text-xs text-gray-400 dark:text-gray-500">{{or
+                                    @resource.vehicle_assigned.plate_number
+                                    @resource.vehicle_assigned.vin
+                                    @resource.vehicle_assigned.serial_number
+                                    @resource.vehicle_assigned.call_sign
+                                }}</div>
+                        </div>
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo>
+                                <div class="text-xs font-semibold">{{@resource.vehicle_assigned.name @resource.vehicle_assigned.yearMakeModel}}</div>
+                                <div class="text-xs">Driver: {{n-a @resource.vehicle_assigned.driver_name}}</div>
+                                <div class="text-xs">
+                                    <span>Status:</span>
+                                    <span class="{{if @resource.vehicle_assigned.online 'text-green-500' 'text-red-400'}}">
+                                        {{if @resource.vehicle_assigned.online "Online" "Offline"}}
+                                    </span>
+                                </div>
+                                <div class="text-xs truncate">Pos: {{point-coordinates @resource.vehicle_assigned.location}}</div>
+                            </InputInfo>
+                        </Attach::Tooltip>
+                    </a>
+                </div>
+            </div>
+            <div class="field-info-container">
+                {{#if @resource.isMultiDrop}}
+                    <div class="field-name">{{pluralize (t "order.fields.customer")}}</div>
+                    <div class="field-value">
+                        <Order::CustomerAvatarStack @waypoints={{@resource.orderWaypoints}} @size="sm" @overlap="tight" />
+                    </div>
+                {{else}}
+                    <div class="field-name">{{t "order.fields.customer"}}</div>
+                    <div class="field-value">
+                        <div class="flex flex-row space-x-2">
+                            <div>
+                                <Image
+                                    src={{avatar-url @resource.customer.photo_url}}
+                                    @fallbackSrc={{config "defaultValues.contactImage"}}
+                                    width="28"
+                                    height="28"
+                                    class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
+                                    alt={{@resource.customer.name}}
+                                />
+                            </div>
+                            <div>
+                                <div class="text-sm">{{n-a @resource.customer.name "No Customer"}}</div>
+                                <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.customer.phone "No Phone"}}</div>
+                            </div>
+                        </div>
+                    </div>
+                {{/if}}
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "order.fields.facilitator"}}</div>
+                <div class="field-value">
+                    <div class="flex flex-row space-x-2">
+                        <div>
+                            <Image
+                                src={{avatar-url @resource.facilitator.photo_url}}
+                                @fallbackSrc={{config "defaultValues.contactImage"}}
+                                width="28"
+                                height="28"
+                                class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
+                                alt={{@resource.facilitator.name}}
+                            />
+                        </div>
+                        <div>
+                            <div class="text-sm">{{n-a @resource.facilitator.name "No Facilitator"}}</div>
+                            <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.facilitator.phone "No Phone"}}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div class="field-info-container field-vertical-container dashed-bottom">
+                <div class="field-name">ID</div>
+                <ClickToCopy @value={{@resource.public_id}} class="field-value">{{n-a @resource.public_id}}</ClickToCopy>
+            </div>
+            <div class="field-info-container field-vertical-container dashed-bottom">
+                <div class="field-name">{{t "common.internal-id"}}</div>
+                <ClickToCopy @value={{@resource.internal_id}} class="field-value">{{n-a @resource.internal_id}}</ClickToCopy>
+            </div>
+            <div class="field-info-container field-vertical-container dashed-bottom">
+                <div class="field-name">{{t "order.fields.tracking-number"}}</div>
+                <ClickToCopy @value={{@resource.tracking_number.tracking_number}} class="field-value">{{n-a @resource.tracking_number.tracking_number}}</ClickToCopy>
+            </div>
+            <div class="field-info-container field-vertical-container dashed-bottom">
+                <div class="field-name">{{t "order.fields.date-scheduled"}}</div>
+                <div class="field-value">{{n-a @resource.scheduledAt}}</div>
+            </div>
+            <div class="field-info-container field-vertical-container dashed-bottom">
+                <div class="field-name">{{t "order.fields.date-dispatched"}}</div>
+                <div class="field-value">{{n-a @resource.dispatchedAt}}</div>
+            </div>
+            <div class="field-info-container field-vertical-container dashed-bottom">
+                <div class="field-name">{{t "order.fields.date-started"}}</div>
+                <div class="field-value">{{n-a @resource.startedAt}}</div>
+            </div>
+            <div class="field-info-container field-vertical-container dashed-bottom">
+                <div class="field-name">{{t "common.type"}}</div>
+                <div class="field-value">{{n-a (humanize @resource.type)}}</div>
+            </div>
+            {{#if @resource.pod_required}}
+                <div class="field-info-container field-vertical-container">
+                    <div class="field-name">{{t "order.fields.proof-of-delivery"}}</div>
+                    <div class="field-value">{{n-a (smart-humanize @resource.pod_method)}}</div>
+                </div>
+            {{/if}}
+        </div>
+    </:default>
+</ContentPanel>

package/addon/components/order/details/detail.js

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class OrderDetailsDetailComponent extends Component {
+    @service orderActions;
+    @service driverActions;
+    @service leafletMapManager;
+    @service intl;
+
+    get actionButtons() {
+        return [
+            {
+                type: 'default',
+                text: this.intl.t('common.edit'),
+                icon: 'pencil',
+                iconPrefix: 'fas',
+                permission: 'fleet-ops update order',
+                disabled: this.args.resource.status === 'canceled',
+                onClick: () => {
+                    this.orderActions.editOrderDetails(this.args.resource);
+                },
+            },
+            {
+                type: 'default',
+                text: this.args.resource.driver_assigned_uuid ? this.intl.t('order.actions.change-driver') : this.intl.t('order.actions.assign-driver'),
+                icon: 'edit',
+                iconPrefix: 'fas',
+                permission: 'fleet-ops assign-driver-for order',
+                disabled: this.args.resource.status === 'canceled',
+                onClick: () => {
+                    this.orderActions.assignDriver(this.args.resource);
+                },
+            },
+        ];
+    }
+
+    @action focusOrderAssignedDriver(driver) {
+        this.driverActions.panel.view(driver);
+        this.leafletMapManager.map?.flyTo(driver.coordinates, 18);
+    }
+}

package/addon/components/order/details/documents.hbs

@@ -0,0 +1,76 @@
+<ContentPanel @title={{t "order.fields.documents-panel-title"}} @open={{true}} @wrapperClass="bordered-top">
+    <div class="space-y-2">
+        {{#if this.queueFile.isRunning}}
+            <div
+                class="dropzone w-full rounded-lg px-4 py-8 bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
+            >
+                <div class="flex items-center justify-center py-5">
+                    <Spinner class="text-sm dar:text-gray-100" @loadingMessage={{concat (t "common.uploading") "..."}} />
+                </div>
+            </div>
+        {{else}}
+            {{#let (file-queue name="files" onFileAdded=(perform this.queueFile) accept=(join "," this.acceptedFileTypes)) as |queue|}}
+                <FileDropzone @queue={{queue}} class="dropzone file-dropzone" @disabled={{cannot-write @resource}} as |dropzone|>
+                    {{#if dropzone.active}}
+                        {{#if dropzone.valid}}
+                            {{t "dropzone.drop-to-upload"}}
+                        {{else}}
+                            {{t "dropzone.invalid"}}
+                        {{/if}}
+                    {{else if queue.files.length}}
+                        <div class="my-2">
+                            <FaIcon @icon="folder-open" class="text-indigo-500 mr-2" />
+                            {{t "dropzone.files-ready-for-upload" numOfFiles=(pluralize queue.files.length (t "dropzone.file"))}}
+                        </div>
+                        <div class="my-2">({{queue.progress}}%)</div>
+                    {{else}}
+                        <h4 class="font-semibold">
+                            <FaIcon @icon="folder-open" @size="lg" class="text-indigo-500 mr-2" />
+                            {{t "dropzone.upload-documents-files"}}
+                        </h4>
+                        <div>
+                            {{#if dropzone.supported}}
+                                <p class="text-sm my-5">{{t "dropzone.dropzone-supported-files"}}</p>
+                            {{/if}}
+                            <FileUpload
+                                @name="files"
+                                @for="files"
+                                @accept={{join "," this.acceptedFileTypes}}
+                                @multiple={{true}}
+                                @onFileAdded={{perform this.queueFile}}
+                                @disabled={{cannot-write @resource}}
+                            >
+                                <a tabindex={{0}} class="btn btn-magic cursor-pointer ml-1">{{t "dropzone.or-select-button-text"}}</a>
+                            </FileUpload>
+                        </div>
+                    {{/if}}
+                </FileDropzone>
+            {{/let}}
+            {{#if this.uploadQueue}}
+                <div class="mx-0.5">
+                    <div class="flex items-center justify-between">
+                        <span class="leading-6 text-sm font-semibold dark:text-gray-100">{{t "dropzone.upload-queue"}}</span>
+                    </div>
+                    <div class="space-y-2 mb-2">
+                        {{#each this.uploadQueue as |file|}}
+                            <div class="flex items-center justify-between bg-blue-100 border border-blue-800 dark:border-blue-800 py-1.5 shadow-sm rounded-lg px-4">
+                                <div class="text-xs text-blue-900 truncate">{{truncate-filename file.name 50}}</div>
+                                <div class="flex items-center text-sm">
+                                    <Spinner class="text-blue-900 mr-2" />
+                                    <span class="font-bold text-blue-900">{{round file.progress}}%</span>
+                                </div>
+                            </div>
+                        {{/each}}
+                    </div>
+                </div>
+            {{/if}}
+            <div>
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
+                    {{#each @resource.files as |file|}}
+                        <File @file={{file}} @onDelete={{perform this.removeFile}} />
+                    {{/each}}
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</ContentPanel>

package/addon/components/order/details/documents.js

@@ -0,0 +1,64 @@
+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 OrderDetailsDocumentsComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked uploadQueue = [];
+    @tracked acceptedFileTypes = [
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        'application/msword',
+        'application/pdf',
+        'application/x-pdf',
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/webp',
+        'video/mp4',
+        'video/quicktime',
+        'video/x-msvideo',
+        'video/x-flv',
+        'video/x-ms-wmv',
+        'audio/mpeg',
+        'video/x-msvideo',
+        'application/zip',
+        'application/x-tar',
+    ];
+
+    @task *queueFile(file) {
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) return;
+
+        try {
+            this.uploadQueue.pushObject(file);
+            yield this.fetch.uploadFile.perform(
+                file,
+                {
+                    path: 'uploads/fleet-ops/order-files',
+                    type: 'order_file',
+                },
+                (uploadedFile) => {
+                    this.args.resource.files.pushObject(uploadedFile);
+                    this.uploadQueue.removeObject(file);
+                },
+                () => {
+                    this.uploadQueue.removeObject(file);
+                    if (file.queue && typeof file.queue.remove === 'function') {
+                        file.queue.remove(file);
+                    }
+                }
+            );
+        } catch (err) {
+            debug('Order document upload failed: ' + err.message);
+            this.notifications.serverError(err);
+        }
+    }
+
+    @task *removeFile(file) {
+        yield file.destroyRecord();
+    }
+}

package/addon/components/order/details/integrated-vendor-details.hbs

@@ -0,0 +1,5 @@
+{{#if @resource.isIntegratedVendorOrder}}
+        <ContentPanel @title={{concat @resource.facilitator.name (t "order.fields.order-details-title")}} @open={{true}} @wrapperClass="bordered-top">
+            <IntegratedOrderDetails @integratedVendor={{@resource.facilitator}} @details={{@resource.meta.integrated_vendor_order}} />
+        </ContentPanel>
+    {{/if}}

package/addon/components/order/details/map.hbs

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

package/addon/components/order/details/map.js

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

package/addon/components/order/details/metadata.hbs

@@ -0,0 +1,3 @@
+<ContentPanel @title="Metadata" @open={{true}} @actionButtons={{this.actionButtons}} @wrapperClass="bordered-top" @panelBodyWrapperClass={{unless this.emptyMetadata "px-0i" ""}}>
+    <MetadataViewer @metadata={{@resource.meta}} />
+</ContentPanel>

package/addon/components/order/details/metadata.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import isEmptyObject from '@fleetbase/ember-core/utils/is-empty-object';
+
+export default class OrderDetailsMetadataComponent extends Component {
+    @service orderActions;
+
+    get emptyMetadata() {
+        return isEmptyObject(this.args.resource.meta);
+    }
+
+    get actionButtons() {
+        return [
+            {
+                type: 'default',
+                text: 'Edit',
+                icon: 'pencil',
+                iconPrefix: 'fas',
+                permission: 'fleet-ops update order',
+                onClick: () => {
+                    this.orderActions.editMetadata(this.args.resource);
+                },
+            },
+        ];
+    }
+}

package/addon/components/order/details/notes.hbs

@@ -0,0 +1,43 @@
+<ContentPanel @title={{t "order.fields.notes-title"}} @isLoading={{@isLoading}} @open={{true}} @actionButtons={{this.actionButtons}} @wrapperClass="bordered-top">
+    {{#if this.isEditing}}
+        <Textarea
+            @value={{@resource.notes}}
+            class="form-input w-full"
+            placeholder={{t "order.fields.notes-placeholder"}}
+            rows={{4}}
+            disabled={{cannot-write @resource}}
+        />
+        <div class="flex items-center space-x-2">
+            <Button
+                @type="primary"
+                @icon="save"
+                @size="xs"
+                @text={{t "order.fields.save-order-note"}}
+                @onClick={{perform this.save}}
+                @isLoading={{this.save.isRunning}}
+                @permission="fleet-ops update order"
+            />
+            <Button @type="default" @icon="times" @size="xs" @text={{t "common.cancel"}} @onClick={{this.stopEditing}} />
+        </div>
+    {{else}}
+        {{#if @resource.notes}}
+            <div>
+                <p class="text-xs font-mono">{{@resource.notes}}</p>
+            </div>
+        {{else}}
+            <div class="min-h-24 p-4">
+                <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
+                    <div class="text-center">
+                        <FaIcon @icon="note-sticky" @size="2x" class="text-gray-400 mb-2" />
+                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
+                            No notes
+                        </div>
+                        <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                            Click edit above to add a note to this order
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {{/if}}
+    {{/if}}
+</ContentPanel>

package/addon/components/order/details/notes.js

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class OrderDetailsNotesComponent extends Component {
+    @service intl;
+    @service notifications;
+    @tracked isEditing = false;
+
+    /* eslint-disable ember/no-side-effects */
+    get actionButtons() {
+        return [
+            {
+                type: 'default',
+                text: 'Edit',
+                icon: 'pencil',
+                iconPrefix: 'fas',
+                permission: 'fleet-ops update order',
+                disabled: this.isEditing === true,
+                onClick: () => {
+                    this.isEditing = true;
+                },
+            },
+        ];
+    }
+
+    @task *save() {
+        try {
+            yield this.args.resource.persistProperty('notes', this.args.resource.notes);
+            this.notifications.success(this.intl.t('fleet-ops.operations.orders.index.view.order-notes-updated'));
+            this.isEditing = false;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action stopEditing() {
+        this.isEditing = false;
+    }
+}

package/addon/components/order/details/payload.hbs

@@ -0,0 +1,97 @@
+<ContentPanel @title={{t "order.fields.payload"}} @open={{true}} @actionButtons={{this.actionButtons}} @wrapperClass="bordered-top">
+    {{#if @resource.isMultiDropOrder}}
+        <div class="space-y-2">
+            {{#each @resource.entitiesByDestination as |group|}}
+                <div class="rounded-md border border-gray-200 dark:border-gray-900 p-3">
+                    <div class="mb-3 flex justify-between items-start">
+                        <div class="flex-1">
+                            {{#if group.waypoint.customer}}
+                                <div class="field-info-container">
+                                    <div class="flex flex-row">
+                                        <div>
+                                            <Image
+                                                src={{avatar-url group.waypoint.customer.photo_url}}
+                                                @fallbackSrc={{config "defaultValues.contactImage"}}
+                                                class="w-8 h-8 rounded-md shadow-sm mr-2"
+                                                alt={{group.waypoint.customer.name}}
+                                            />
+                                        </div>
+                                        <div>
+                                            <div class="field-value">{{n-a group.waypoint.customer.name "No Customer"}}</div>
+                                            {{#if group.waypoint.customer}}
+                                                <div>{{n-a group.waypoint.customer.phone "No Phone"}}</div>
+                                            {{/if}}
+                                        </div>
+                                    </div>
+                                </div>
+                            {{/if}}
+                            <DisplayPlace @place={{group.waypoint}} @addressClass="text-sm" />
+                            <div class="my-2">
+                                <span class="rounded-md bg-yellow-300 text-yellow-900 px-2 py-1 text-sm">{{t "order.fields.tracking"}}
+                                    {{group.waypoint.tracking}}
+                                </span>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="mb-2 flex justify-end">
+                                <Badge @status={{group.waypoint.status_code}} />
+                            </div>
+                            <div class="flex items-start">
+                                <DropdownButton
+                                    @triggerClass="mr-2"
+                                    @iconClass="icon-text-height"
+                                    @buttonSize="sm"
+                                    @icon="ellipsis-h"
+                                    @iconPrefix="fas"
+                                    @contentClass="dropdown-menu"
+                                    as |dd|
+                                >
+                                    <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+                                        <div class="px-1">
+                                            <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-300">
+                                                {{t "order.fields.waypoint-actions"}}
+                                            </div>
+                                        </div>
+                                        <div class="next-dd-menu-seperator"></div>
+                                        <div class="px-1">
+                                            <a
+                                                href="javascript:;"
+                                                class="next-dd-item"
+                                                disabled={{cannot "fleet-ops view order"}}
+                                                {{on "click" (dropdown-fn dd this.viewWaypointLabel group.waypoint)}}
+                                            >
+                                                {{t "order.fields.get-label"}}
+                                            </a>
+                                            {{!-- <a href="javascript:;" class="next-dd-item">
+                                                        {{t "order.fields.view-activity"}}
+                                                    </a> --}}
+                                        </div>
+                                    </div>
+                                </DropdownButton>
+                                <Button
+                                    @icon="plus"
+                                    @iconPrefix="fas"
+                                    @text={{t "order.fields.add-item-button"}}
+                                    @size="sm"
+                                    @onClick={{perform this.addEntity group.waypoint}}
+                                    @permission="fleet-ops update order"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 lg:grid-cols-3 gap-2">
+                        {{#each group.entities as |entity|}}
+                            <Entity::Card @resource={{entity}} />
+                        {{/each}}
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    {{else}}
+        <div class="grid grid-cols-2 lg:grid-cols-3 gap-2">
+            {{#each @resource.payload.entities as |entity|}}
+                <Entity::Card @resource={{entity}} />
+            {{/each}}
+        </div>
+    {{/if}}
+</ContentPanel>