@fleetbase/ember-ui 0.3.6 → 0.3.8

package/addon/components/custom-fields-manager.js

@@ -33,7 +33,8 @@ export default class CustomFieldsManagerComponent extends Component {
         super(...arguments);
         this.subjects = subjects ?? [];
         next(() => {
-            if (!this.subjects) return;
+            if (!this.subjects || this.subjects.length === 0) return;
+            // Load the first subject immediately
             this.loadCustomFields.perform(this.subjects[0]);
         });
     }
@@ -51,7 +52,44 @@ export default class CustomFieldsManagerComponent extends Component {
         }
     }
 
+    /**
+     * Restore custom fields from cache for subjects that haven't been loaded yet
+     * This method checks the CustomFieldsRegistry service cache and restores
+     * previously loaded data to avoid losing it during navigation
+     */
+    async restoreFromCache() {
+        if (!this.subjects || this.subjects.length <= 1) return;
+
+        // Skip the first subject as it's loaded in constructor
+        const subjectsToRestore = this.subjects.slice(1);
+
+        for (const subject of subjectsToRestore) {
+            try {
+                const company = await this.currentUser.loadCompany();
+                const loadOptions = {
+                    groupedFor: `${underscore(subject.model)}_custom_field_group`,
+                    fieldFor: subject.type,
+                };
+
+                // Check if we have a cached manager for this subject
+                const cachedManager = this.customFieldsRegistry.forSubject(company, { loadOptions });
+
+                // Only restore if we have cached groups data
+                if (cachedManager && cachedManager.groups && cachedManager.groups.length > 0) {
+                    this.#updateSubject(subject, (s) => {
+                        return { ...s, groups: cachedManager.groups };
+                    });
+                }
+            } catch (err) {
+                // Silently continue if cache restore fails for a subject
+                console.warn(`Failed to restore cache for subject ${subject.model}:`, err);
+            }
+        }
+    }
+
     @task *loadCustomFields(subject) {
+        if (!subject) return;
+
         try {
             const company = yield this.currentUser.loadCompany();
             const customFieldsManager = yield this.customFieldsRegistry.loadSubjectCustomFields.perform(company, {
@@ -60,12 +98,14 @@ export default class CustomFieldsManagerComponent extends Component {
                     fieldFor: subject.type,
                 },
             });
+
             this.#updateSubject(subject, (s) => {
                 return { ...s, groups: customFieldsManager.customFieldGroups };
             });
 
             return customFieldsManager;
         } catch (err) {
+            console.error(`❌ Failed to load custom fields for ${subject.model}:`, err);
             this.notifications.serverError(err);
         }
     }
@@ -127,7 +167,7 @@ export default class CustomFieldsManagerComponent extends Component {
 
                 try {
                     await group.destroyRecord();
-                    await this.loadCustomFields.perform(subject);
+                    await this.loadCustomFields.perform(subject, true); // Force reload after deletion
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);
@@ -151,7 +191,7 @@ export default class CustomFieldsManagerComponent extends Component {
 
                 try {
                     await customField.destroyRecord();
-                    await this.loadCustomFields.perform(subject);
+                    await this.loadCustomFields.perform(subject, true); // Force reload after deletion
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);
@@ -161,6 +201,13 @@ export default class CustomFieldsManagerComponent extends Component {
         });
     }
 
+    @action onTabChange(subject) {
+        // Ensure custom fields are loaded when switching tabs
+        if (subject && (!subject.groups || subject.groups.length === 0)) {
+            this.loadCustomFields.perform(subject);
+        }
+    }
+
     #addCustomFieldToGroup(subject, customField, group) {
         this.#updateGroupOnSubject(subject, group.id, (g) => {
             const current = isArray(g.customFields) ? g.customFields : [];
@@ -207,12 +254,8 @@ export default class CustomFieldsManagerComponent extends Component {
     #updateSubject(subject, updater) {
         if (!subject) return;
 
-        // Try to locate by object identity first; fallback to stable keys
-        const idKey = 'id' in subject ? 'id' : 'model' in subject ? 'model' : null;
-        const idx = this.subjects.findIndex((s) => {
-            if (s === subject) return true;
-            return idKey ? s?.[idKey] === subject?.[idKey] : false;
-        });
+        // Find by model property since tab objects have extra properties
+        const idx = this.subjects.findIndex((s) => s?.model === subject?.model);
 
         if (idx === -1) return;
 

package/addon/components/dashboard.js

@@ -23,12 +23,12 @@ export default class DashboardComponent extends Component {
      * Creates an instance of DashboardComponent.
      * @memberof DashboardComponent
      */
-    constructor(owner, { defaultDashboardId = 'dashboard', defaultDashboardName = 'Default Dashboard', showPanelWhenZeroWidgets = false }) {
+    constructor(owner, { defaultDashboardId = 'dashboard', defaultDashboardName = 'Default Dashboard', showPanelWhenZeroWidgets = false, extension = 'core' } = {}) {
         super(...arguments);
         this.dashboard.reset(); // ensure service is reset when re-rendering
         next(() => {
             this.dashboard.showPanelWhenZeroWidgets = showPanelWhenZeroWidgets;
-            this.dashboard.loadDashboards.perform(defaultDashboardId, defaultDashboardName);
+            this.dashboard.loadDashboards.perform({ defaultDashboardId, defaultDashboardName, extension });
         });
     }
 
@@ -63,7 +63,7 @@ export default class DashboardComponent extends Component {
                 // Get the name from the modal options
                 const { name } = modal.getOptions();
 
-                await this.dashboard.createDashboard.perform(name);
+                await this.dashboard.createDashboard.perform(name, { extension: this.args.extension });
                 done();
             },
             ...options,

package/addon/components/filter/string.hbs

@@ -1,6 +1,6 @@
 <div class="filter-string" ...attributes>
-    <Input @value={{@value}} placeholder={{@placeholder}} {{on "input" this.onChange}} aria-label="Filter Input" autocomplete="false" class="form-input form-input-sm flex-1" />
-    <button type="button" class="clear-button" disabled={{not @value}} alt="Clear" {{on "click" this.clear}}>
+    <Input @value={{this.value}} placeholder={{@placeholder}} {{on "input" this.onChange}} aria-label="Filter Input" autocomplete="false" class="form-input form-input-sm flex-1" />
+    <button type="button" class="clear-button" disabled={{not this.value}} alt="Clear" {{on "click" this.clear}}>
         <FaIcon @icon="times" />
     </button>
 </div>

package/addon/components/filter/string.js

@@ -1,10 +1,20 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class FilterStringComponent extends Component {
+    @tracked value = '';
+
+    constructor(owner, { value = '' }) {
+        super(...arguments);
+        this.value = value;
+    }
+
     @action onChange({ target: { value } }) {
         const { onChange, filter } = this.args;
 
+        this.value = value;
+
         if (typeof onChange === 'function') {
             onChange(filter, value);
         }
@@ -13,6 +23,8 @@ export default class FilterStringComponent extends Component {
     @action clear() {
         const { onClear, filter } = this.args;
 
+        this.value = '';
+
         if (typeof onClear === 'function') {
             onClear(filter);
         }

package/addon/components/layout/header/sidebar-toggle.js

@@ -5,25 +5,21 @@ import { tracked } from '@glimmer/tracking';
 
 export default class LayoutHeaderSidebarToggleComponent extends Component {
     @service universe;
+    @service sidebar;
     @tracked isSidebarVisible = true;
 
     @action toggleSidebar() {
-        if (this.args.disabled === true) {
-            return;
-        }
-
-        const sidebar = this.universe.sidebarContext;
+        if (this.args.disabled === true) return;
 
         if (this.isSidebarVisible) {
-            sidebar.hideNow();
+            this.sidebar.hideNow();
         } else {
-            sidebar.show();
+            this.sidebar.show();
         }
 
         this.isSidebarVisible = !this.isSidebarVisible;
-
         if (typeof this.args.onToggle === 'function') {
-            this.args.onToggle(sidebar, this.isSidebarVisible);
+            this.args.onToggle(this.sidebar, this.isSidebarVisible);
         }
     }
 }

package/addon/components/pill.hbs

@@ -0,0 +1,48 @@
+<div class="fleetbase-pill" ...attributes>
+    <a href="javascript:;" class="flex flex-row space-x-2 {{@anchorClass}}" {{on "click" this.handleClick}}>
+        <div class="relative shrink-0 {{@imageWrapperClass}}">
+            {{#if (has-block "image")}}
+                {{yield @resource to="image"}}
+            {{else}}
+                <Image
+                    src={{@imageSrc}}
+                    @fallbackSrc={{or @imageFallback (config (concat "defaultValues." @fallbackImageType)) (config "defaultValues.placeholderImage")}}
+                    width={{or @imageSize @imageWidth "28"}}
+                    height={{or @imageSize @imageHeight "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 {{@imageClass}}"
+                    alt={{or @imageAlt this.resourceName}}
+                />
+                {{#if @showOnlineIndicator}}
+                    <FaIcon
+                        @icon="circle"
+                        @size="2xs"
+                        class="absolute left-0 top-0 h-2 w-2 {{if (get @resource (or @onlinePath 'online')) 'text-green-500' 'text-yellow-200'}} {{@onlineIndicatorClass}}"
+                    />
+                {{/if}}
+                {{yield @resource to="image"}}
+            {{/if}}
+        </div>
+        <div class={{@contentWrapperClass}}>
+            {{#if (has-block)}}
+                {{yield @resource}}
+            {{else}}
+                <div class="text-sm {{@titleClass}}">{{n-a @title this.resourceName}}</div>
+                {{#if @subtitle}}
+                    <div class="text-xs text-gray-400 dark:text-gray-500 {{@subtitleClass}}">{{n-a @subtitle}}</div>
+                {{/if}}
+                {{yield @resource}}
+            {{/if}}
+        </div>
+        {{#if (has-block "tooltip")}}
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPosition "top"}}>
+                <InputInfo>
+                    {{yield @resource to="tooltip"}}
+                </InputInfo>
+            </Attach::Tooltip>
+        {{else if @tooltipComponent}}
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPosition "top"}}>
+                {{component @tooltipComponent}}
+            </Attach::Tooltip>
+        {{/if}}
+    </a>
+</div>

package/addon/components/pill.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+
+export default class PillComponent extends Component {
+    /* eslint-disable ember/no-get */
+    get resourceName() {
+        const record = this.args.resource;
+        if (!record) return 'resource';
+
+        return (
+            get(record, this.args.namePath ?? 'name') ??
+            get(record, 'display_name') ??
+            get(record, 'displayName') ??
+            get(record, 'tracking') ??
+            get(record, 'public_id') ??
+            getModelName(record)
+        );
+    }
+
+    @action handleClick() {
+        console.log('handleClick called!', ...arguments);
+        if (typeof this.args.onClick === 'function') {
+            if (this.args.resource) {
+                this.args.onClick(this.args.resource, ...arguments);
+            } else {
+                this.args.onClick(...arguments);
+            }
+        }
+    }
+}

package/addon/components/query-builder/column-select.hbs

@@ -1,8 +1,11 @@
 <div class="query-builder-panel" ...attributes>
     <div class="query-builder-panel-header">
-        <div class="query-builder-panel-title">
-            <FaIcon @icon="columns" @size="sm" class="mr-2" />
-            Select fields
+        <div class="flex flex-row items-center space-x-2">
+            <div class="query-builder-panel-title">
+                <FaIcon @icon="columns" @size="sm" class="mr-2" />
+                Select fields
+            </div>
+            <Input @value={{this.searchQuery}} class="form-input form-input-sm" placeholder="Search for a column" />
         </div>
         <div class="text-xs text-gray-500">
             {{if this.selectedColumns.length (concat this.selectedColumns.length " selected") "None selected"}}
@@ -11,7 +14,7 @@
 
     <div class="query-builder-panel-content no-padding">
         <div class="{{if @columns 'max-h-80 overflow-y-auto' ''}} grid grid-cols-1 gap-2 lg:grid-cols-2 px-2 py-3">
-            {{#each @columns as |column|}}
+            {{#each this.filteredColumns as |column|}}
                 <div class="column-item {{if (includes column.name (map-by 'name' this.selectedColumns)) 'selected'}}">
                     <div class="column-checkbox-wrapper">
                         <Checkbox @checked={{includes column.name (map-by "name" this.selectedColumns)}} @onToggle={{fn this.selectColumn column}} />

package/addon/components/query-builder/column-select.js

@@ -5,6 +5,22 @@ import { action } from '@ember/object';
 export default class QueryBuilderColumnSelectComponent extends Component {
     @tracked selectedColumns = [];
     @tracked columnAliases = {};
+    @tracked searchQuery = '';
+
+    get filteredColumns() {
+        const columns = this.args.columns ?? [];
+        const query = (this.searchQuery ?? '').trim().toLowerCase();
+
+        if (!query) {
+            return columns;
+        }
+
+        return columns.filter((col) => {
+            const name = String(col.name ?? '').toLowerCase();
+            const label = String(col.label ?? '').toLowerCase();
+            return name.includes(query) || label.includes(query);
+        });
+    }
 
     constructor() {
         super(...arguments);
@@ -12,8 +28,7 @@ export default class QueryBuilderColumnSelectComponent extends Component {
         this.columnAliases = this.args.columnAliases || {};
     }
 
-    @action
-    selectColumn(column) {
+    @action selectColumn(column) {
         const isSelected = this.selectedColumns.includes(column);
 
         if (isSelected) {
@@ -29,8 +44,7 @@ export default class QueryBuilderColumnSelectComponent extends Component {
         this.notifyChange();
     }
 
-    @action
-    updateAlias(columnName, event) {
+    @action updateAlias(columnName, event) {
         const aliasValue = event.target.value.trim();
 
         if (aliasValue) {
@@ -48,16 +62,14 @@ export default class QueryBuilderColumnSelectComponent extends Component {
         this.notifyChange();
     }
 
-    @action
-    selectAllColumns() {
+    @action selectAllColumns() {
         if (this.args.columns) {
             this.selectedColumns = [...this.args.columns];
             this.notifyChange();
         }
     }
 
-    @action
-    clearAllColumns() {
+    @action clearAllColumns() {
         this.selectedColumns = [];
         this.columnAliases = {};
         this.notifyChange();

package/addon/components/query-builder/conditions.js

@@ -379,8 +379,7 @@ export default class QueryBuilderConditionsComponent extends Component {
         });
     }
 
-    @action
-    updateGroupOperator(groupIndex, operator) {
+    @action updateGroupOperator(groupIndex, operator) {
         // same immutable pattern for the group object
         const groups = [...this.conditionGroups];
         groups[groupIndex] = { ...groups[groupIndex], operator };
@@ -388,8 +387,7 @@ export default class QueryBuilderConditionsComponent extends Component {
         this.notifyChange();
     }
 
-    @action
-    reorderConditionGroups({ sourceList, sourceIndex, targetList, targetIndex }) {
+    @action reorderConditionGroups({ sourceList, sourceIndex, targetList, targetIndex }) {
         // no change? bail
         if (sourceList === targetList && sourceIndex === targetIndex) return;
 

package/addon/components/query-builder/group-by.hbs

@@ -11,10 +11,8 @@
 
     <div class="query-builder-panel-content">
         {{#if this.canGroup}}
-
             <div class="space-y-4">
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
-
                     <div>
                         <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                             Group By Column
@@ -92,7 +90,7 @@
                     @icon="save"
                     @size="xs"
                     @onClick={{this.addGroupBy}}
-                    @disabled={{not (and this.selectedGroupBy this.selectedAggregateFn this.selectedAggregateBy)}}
+                    @disabled={{this.isAddGroupingDisabled}}
                 />
             </div>
 
@@ -102,7 +100,7 @@
                         Active Groupings
                     </div>
 
-                    <DragSortList @items={{this.groupByItems}} @onChange={{this.reorderGroupBy}} @dragEndAction={{this.reorderGroupBy}} class="drag-sort-list" as |item index|>
+                    <DragSortList @items={{this.groupByItems}} @dragEndAction={{this.reorderGroupBy}} class="drag-sort-list" as |item index|>
                         <div class="group-sort-item">
                             <div class="drag-handle">
                                 <FaIcon @icon="grip-vertical" @size="sm" />

package/addon/components/query-builder/group-by.js

@@ -50,22 +50,25 @@ export default class QueryBuilderGroupByComponent extends Component {
     get availableAggregateColumns() {
         if (!this.selectedAggregateFn) return [];
 
-        // Use allSelectedColumns from parent if available
         const columnsToUse = this.args.allSelectedColumns || this.args.selectedColumns || [];
+        const fn = this.selectedAggregateFn.value;
 
-        // For COUNT, we can use any selected column or *
-        if (this.selectedAggregateFn.value === 'count') {
+        if (fn === 'count') {
             return [{ name: '*', label: 'All Records', type: 'count', full: '*' }, ...columnsToUse];
         }
 
-        // For SUM, AVG, MIN, MAX - only numeric columns from selected columns
-        if (['sum', 'avg', 'min', 'max'].includes(this.selectedAggregateFn.value)) {
-            return columnsToUse.filter((column) => ['number', 'integer', 'decimal', 'float'].includes(column.type));
+        if (fn === 'sum' || fn === 'avg') {
+            // numeric only
+            return columnsToUse.filter((c) => ['integer', 'decimal', 'number', 'float'].includes(c.type));
         }
 
-        // For GROUP_CONCAT - string columns from selected columns
-        if (this.selectedAggregateFn.value === 'group_concat') {
-            return columnsToUse.filter((column) => ['string', 'text'].includes(column.type));
+        if (fn === 'min' || fn === 'max') {
+            // numeric + datetime + date + string
+            return columnsToUse.filter((c) => ['integer', 'decimal', 'number', 'float', 'date', 'datetime', 'timestamp', 'string', 'text'].includes(c.type));
+        }
+
+        if (fn === 'group_concat') {
+            return columnsToUse.filter((c) => ['string', 'text'].includes(c.type));
         }
 
         return columnsToUse;
@@ -93,24 +96,49 @@ export default class QueryBuilderGroupByComponent extends Component {
         return null;
     }
 
-    @action
-    selectGroupBy(column) {
+    get isAddGroupingDisabled() {
+        const hasGroupBy = !!this.selectedGroupBy;
+        const fn = this.selectedAggregateFn?.value;
+        const hasFn = !!fn;
+        const hasBy = !!this.selectedAggregateBy;
+
+        if (!hasGroupBy || !hasFn) {
+            return true;
+        }
+
+        // COUNT requires a selection: either "*" or a column (you can auto-select "*" elsewhere)
+        if (fn === 'count') {
+            return !hasBy;
+        }
+
+        // For SUM/AVG/MIN/MAX/GROUP_CONCAT we need:
+        // - at least one compatible column available
+        // - a selected "aggregate by" column
+        const avail = this.availableAggregateColumns ?? [];
+        const hasCompatible = avail.length > 0;
+
+        return !(hasCompatible && hasBy);
+    }
+
+    @action selectGroupBy(column) {
         this.selectedGroupBy = column;
     }
 
-    @action
-    selectAggregateFn(fn) {
+    @action selectAggregateFn(fn) {
         this.selectedAggregateFn = fn;
-        this.selectedAggregateBy = null; // Reset aggregate column when function changes
+        // Optional UX: auto-select "*" when choosing COUNT
+        if (fn?.value === 'count') {
+            this.selectedAggregateBy = { name: '*', label: 'All Records', type: 'count', full: '*' };
+        } else {
+            this.selectedAggregateBy = null;
+        }
     }
 
-    @action
-    selectAggregateBy(column) {
+    @action selectAggregateBy(column) {
         this.selectedAggregateBy = column;
     }
 
-    @action
-    addGroupBy() {
+    @action addGroupBy() {
         if (this.selectedGroupBy && this.selectedAggregateFn && this.selectedAggregateBy) {
             // Validate that the groupBy column is actually selected
             const isGroupByColumnSelected = this.args.selectedColumns?.some((col) => col.full === this.selectedGroupBy.full);
@@ -138,23 +166,35 @@ export default class QueryBuilderGroupByComponent extends Component {
         }
     }
 
-    @action
-    removeGroupBy(index) {
+    @action removeGroupBy(index) {
         this.groupByItems = this.groupByItems.filter((_, i) => i !== index);
         this.notifyChange();
     }
 
-    @action
-    reorderGroupBy(newOrder) {
-        this.groupByItems = newOrder;
+    // @action reorderGroupBy(newOrder) {
+    //     this.groupByItems = newOrder;
+    //     this.notifyChange();
+    // }
+
+    @action reorderGroupBy({ sourceList, sourceIndex, targetList, targetIndex }) {
+        // no change? bail
+        if (sourceList === targetList && sourceIndex === targetIndex) return;
+
+        // mutate the EmberArray in-place (per README)
+        const item = sourceList.objectAt(sourceIndex);
+        sourceList.removeAt(sourceIndex);
+        targetList.insertAt(targetIndex, item);
+
+        // ensure Glimmer sees a change even if it misses EmberArray observers
+        this.groupByItems = [...this.groupByItems];
+
         this.notifyChange();
     }
 
     /**
      * Validate existing group by items when selected columns change
      */
-    @action
-    validateGroupByItems() {
+    @action validateGroupByItems() {
         if (!this.args.selectedColumns?.length) {
             // Clear all grouping if no columns selected
             if (this.groupByItems.length > 0) {

package/addon/components/query-builder/joins.hbs

@@ -68,13 +68,6 @@
                                             >
                                                 Select None
                                             </button>
-                                            <button
-                                                type="button"
-                                                class="text-xs px-2 py-1 bg-green-100 dark:bg-green-800 text-green-700 dark:text-green-300 rounded hover:bg-green-200 dark:hover:bg-green-700"
-                                                {{on "click" (fn this.selectCommonJoinColumns relationship.key)}}
-                                            >
-                                                Common Fields
-                                            </button>
                                         </div>
 
                                         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-48 overflow-y-auto">

package/addon/components/query-builder/joins.js

@@ -19,7 +19,6 @@ export default class QueryBuilderJoinsComponent extends Component {
                 key,
                 table: key,
                 ...relationship,
-                columns: this.getColumnsForTable(key),
             };
         });
     }
@@ -28,64 +27,6 @@ export default class QueryBuilderJoinsComponent extends Component {
         return this.joins.reduce((total, join) => total + (join.selectedColumns?.length || 0), 0);
     }
 
-    getColumnsForTable(tableName) {
-        // Get columns from the schema registry or args
-        if (this.args.getTableColumns) {
-            return this.args.getTableColumns(tableName);
-        }
-
-        // Fallback to mock columns for development
-        const mockColumns = {
-            drivers: [
-                { name: 'uuid', label: 'ID', type: 'string' },
-                { name: 'name', label: 'Driver Name', type: 'string' },
-                { name: 'email', label: 'Email', type: 'string' },
-                { name: 'phone', label: 'Phone', type: 'string' },
-                { name: 'status', label: 'Status', type: 'string' },
-                { name: 'online', label: 'Online Status', type: 'boolean' },
-                { name: 'created_at', label: 'Created At', type: 'datetime' },
-                { name: 'updated_at', label: 'Updated At', type: 'datetime' },
-            ],
-            vehicles: [
-                { name: 'uuid', label: 'ID', type: 'string' },
-                { name: 'make', label: 'Make', type: 'string' },
-                { name: 'model', label: 'Model', type: 'string' },
-                { name: 'year', label: 'Year', type: 'number' },
-                { name: 'vin', label: 'VIN', type: 'string' },
-                { name: 'plate_number', label: 'Plate Number', type: 'string' },
-                { name: 'status', label: 'Status', type: 'string' },
-                { name: 'created_at', label: 'Created At', type: 'datetime' },
-            ],
-            contacts: [
-                { name: 'uuid', label: 'ID', type: 'string' },
-                { name: 'name', label: 'Contact Name', type: 'string' },
-                { name: 'email', label: 'Email', type: 'string' },
-                { name: 'phone', label: 'Phone', type: 'string' },
-                { name: 'type', label: 'Contact Type', type: 'string' },
-                { name: 'created_at', label: 'Created At', type: 'datetime' },
-            ],
-            places: [
-                { name: 'uuid', label: 'ID', type: 'string' },
-                { name: 'name', label: 'Place Name', type: 'string' },
-                { name: 'street1', label: 'Street Address', type: 'string' },
-                { name: 'city', label: 'City', type: 'string' },
-                { name: 'province', label: 'Province/State', type: 'string' },
-                { name: 'country', label: 'Country', type: 'string' },
-                { name: 'postal_code', label: 'Postal Code', type: 'string' },
-            ],
-        };
-
-        return mockColumns[tableName] || [];
-    }
-
-    getCommonColumns(tableName) {
-        // Return commonly used columns for quick selection
-        const commonColumnNames = ['name', 'status', 'email', 'phone', 'created_at'];
-        const allColumns = this.getColumnsForTable(tableName);
-
-        return allColumns.filter((column) => commonColumnNames.includes(column.name) || column.name.includes('name') || column.name.includes('status'));
-    }
-
     @action
     isJoined(relationshipKey) {
         return this.joins.some((join) => join.key === relationshipKey);
@@ -186,27 +127,6 @@ export default class QueryBuilderJoinsComponent extends Component {
         this.notifyChange();
     }
 
-    @action
-    selectCommonJoinColumns(relationshipKey) {
-        const joinIndex = this.joins.findIndex((join) => join.key === relationshipKey);
-        if (joinIndex === -1) return;
-
-        const updatedJoins = [...this.joins];
-        const join = { ...updatedJoins[joinIndex] };
-        const commonColumns = this.getCommonColumns(relationshipKey);
-
-        join.selectedColumns = commonColumns.map((column) => ({
-            ...column,
-            table: relationshipKey,
-            full: `${relationshipKey}.${column.name}`,
-            label: `${join.label} - ${column.label || column.name}`,
-        }));
-
-        updatedJoins[joinIndex] = join;
-        this.joins = updatedJoins;
-        this.notifyChange();
-    }
-
     @action
     updateJoinColumnAlias(relationshipKey, columnName, event) {
         const joinIndex = this.joins.findIndex((join) => join.key === relationshipKey);

package/addon/components/query-builder/limit.js

@@ -1,13 +1,17 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { next } from '@ember/runloop';
 
 export default class QueryBuilderLimitComponent extends Component {
     @tracked limit = null;
 
     constructor() {
         super(...arguments);
-        this.limit = this.args.limit || null;
+        this.limit = this.args.limit || 50;
+
+        // set detault limit
+        next(() => this.setLimit(this.limit));
     }
 
     get quickLimits() {
@@ -23,21 +27,18 @@ export default class QueryBuilderLimitComponent extends Component {
         ];
     }
 
-    @action
-    setLimit(value) {
+    @action setLimit(value) {
         const numValue = parseInt(value, 10);
         this.limit = isNaN(numValue) || numValue <= 0 ? null : numValue;
         this.notifyChange();
     }
 
-    @action
-    setQuickLimit(value) {
+    @action setQuickLimit(value) {
         this.limit = value;
         this.notifyChange();
     }
 
-    @action
-    clearLimit() {
+    @action clearLimit() {
         this.limit = null;
         this.notifyChange();
     }

package/addon/components/query-builder/sort-by.hbs

@@ -68,7 +68,7 @@
                         Sort Order (drag to reorder)
                     </div>
 
-                    <DragSortList @items={{this.sortByItems}} @onChange={{this.reorderSortBy}} @dragEndAction={{this.reorderSortBy}} class="drag-sort-list" as |item index|>
+                    <DragSortList @items={{this.sortByItems}} @dragEndAction={{this.reorderSortBy}} class="drag-sort-list" as |item index|>
                         <div class="group-sort-item">
                             <div class="drag-handle">
                                 <FaIcon @icon="grip-vertical" @size="sm" />

package/addon/components/query-builder/sort-by.js

@@ -62,18 +62,15 @@ export default class QueryBuilderSortByComponent extends Component {
         return null;
     }
 
-    @action
-    selectSortColumn(column) {
+    @action selectSortColumn(column) {
         this.selectedSortBy = column;
     }
 
-    @action
-    selectSortDirection(direction) {
+    @action selectSortDirection(direction) {
         this.selectedSortDirection = direction;
     }
 
-    @action
-    addSortBy() {
+    @action addSortBy() {
         if (this.selectedSortBy && this.selectedSortDirection) {
             // Validate that the sort column is actually selected
             const isSortColumnSelected = this.args.selectedColumns?.some((col) => col.full === this.selectedSortBy.full);
@@ -113,20 +110,32 @@ export default class QueryBuilderSortByComponent extends Component {
         }
     }
 
-    @action
-    removeSortBy(index) {
+    @action removeSortBy(index) {
         this.sortByItems = this.sortByItems.filter((_, i) => i !== index);
         this.notifyChange();
     }
 
-    @action
-    reorderSortBy(newOrder) {
-        this.sortByItems = newOrder;
+    // @action reorderSortBy(newOrder) {
+    //     this.sortByItems = newOrder;
+    //     this.notifyChange();
+    // }
+
+    @action reorderGroupBy({ sourceList, sourceIndex, targetList, targetIndex }) {
+        // no change? bail
+        if (sourceList === targetList && sourceIndex === targetIndex) return;
+
+        // mutate the EmberArray in-place (per README)
+        const item = sourceList.objectAt(sourceIndex);
+        sourceList.removeAt(sourceIndex);
+        targetList.insertAt(targetIndex, item);
+
+        // ensure Glimmer sees a change even if it misses EmberArray observers
+        this.sortByItems = [...this.sortByItems];
+
         this.notifyChange();
     }
 
-    @action
-    toggleSortDirection(index) {
+    @action toggleSortDirection(index) {
         const updatedItems = [...this.sortByItems];
         const currentDirection = updatedItems[index].direction.value;
         const newDirection = currentDirection === 'asc' ? this.directions[1] : this.directions[0];
@@ -143,8 +152,7 @@ export default class QueryBuilderSortByComponent extends Component {
     /**
      * Validate existing sort items when selected columns change
      */
-    @action
-    validateSortItems() {
+    @action validateSortItems() {
         const columnsToUse = this.args.allSelectedColumns || this.args.selectedColumns || [];
 
         if (!columnsToUse.length) {

package/addon/components/report/details.hbs

@@ -1,6 +1,6 @@
 <div class="details-wrapper" ...attributes>
     <ContentPanel @title="Report Details" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100 px-1.5">
+        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
             <div class="field-info-container">
                 <div class="field-name">Title</div>
                 <div class="field-value">{{n-a @resource.title}}</div>
@@ -9,12 +9,6 @@
                 <div class="field-name">Description</div>
                 <div class="field-value">{{n-a @resource.description}}</div>
             </div>
-            <div class="field-info-container">
-                <div class="field-name">Status</div>
-                <div class="field-value">
-                    <Badge @status={{@resource.status}} />
-                </div>
-            </div>
             <div class="field-info-container">
                 <div class="field-name">Date Created</div>
                 <div class="field-value">{{@resource.createdAt}}</div>
@@ -24,6 +18,8 @@
                 <div class="field-value flex flex-row items-center space-x-1">
                     {{#each @resource.tags as |tag|}}
                         <div class="rounded-xl border text-sm border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-2 py-0.5 flex items-center justify-center">{{tag}}</div>
+                    {{else}}
+                        <div>-</div>
                     {{/each}}
                 </div>
             </div>

package/addon/components/unit-input.js

@@ -218,7 +218,7 @@ export default class UnitInputComponent extends Component {
      * @memberof UnitInputComponent
      */
     @computed('selectedUnitObject.name', 'unit') get unitName() {
-        return this.selectedUnitObject.name ?? this.unit;
+        return this.selectedUnitObject?.name ?? this.unit;
     }
 
     /**

package/addon/helpers/is-object-empty.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import isEmptyObject from '@fleetbase/ember-core/utils/is-empty-object';
+
+export default helper(function isObjectEmpty([subject]) {
+    return isEmptyObject(subject);
+});

package/addon/services/dashboard.js

@@ -53,10 +53,10 @@ export default class DashboardService extends Service {
     /**
      * Task for loading dashboards from the store. It sets the current dashboard and checks if adding widget is necessary.
      */
-    @task *loadDashboards(defaultDashboardId = 'dashboard', defaultDashboardName = 'Default Dashboard') {
+    @task *loadDashboards({ defaultDashboardId = 'dashboard', defaultDashboardName = 'Default Dashboard', extension = 'core' }) {
         this.universe.registerDashboard(defaultDashboardId);
 
-        const dashboards = yield this.store.findAll('dashboard');
+        const dashboards = yield this.store.query('dashboard', { limit: -1, extension });
         if (isArray(dashboards)) {
             this.dashboards = typeof dashboards.toArray === 'function' ? dashboards.toArray() : dashboards;
 
@@ -98,16 +98,18 @@ export default class DashboardService extends Service {
      * Task for creating a new dashboard. It handles dashboard creation, success notification, and dashboard selection.
      * @param {string} name - Name of the new dashboard.
      */
-    @task *createDashboard(name) {
-        const dashboardRecord = this.store.createRecord('dashboard', { name, is_default: true });
-        const dashboard = yield dashboardRecord.save().catch((error) => {
-            this.notifications.serverError(error);
-        });
-
-        if (dashboard) {
-            this.notifications.success(this.intl.t('services.dashboard-service.create-dashboard-success-notification', { dashboardName: dashboard.name }));
-            this.selectDashboard.perform(dashboard);
-            this.dashboards.pushObject(dashboard);
+    @task *createDashboard(name, attributes = {}) {
+        try {
+            const dashboardRecord = this.store.createRecord('dashboard', { name, is_default: true, ...attributes });
+            const dashboard = yield dashboardRecord.save();
+
+            if (dashboard) {
+                this.notifications.success(this.intl.t('services.dashboard-service.create-dashboard-success-notification', { dashboardName: dashboard.name }));
+                this.selectDashboard.perform(dashboard);
+                this.dashboards.pushObject(dashboard);
+            }
+        } catch (err) {
+            this.notifications.serverError(err);
         }
     }
 

package/addon/styles/components/badge.css

@@ -79,12 +79,14 @@
 
 .status-badge.ready-status-badge > span,
 .status-badge.verified-status-badge > span,
+.status-badge.allocated-status-badge > span,
 .status-badge.emerald-status-badge > span {
     @apply bg-emerald-800 border-emerald-700 text-emerald-100;
 }
 
 .status-badge.ready-status-badge > span svg,
 .status-badge.verified-status-badge > span svg,
+.status-badge.allocated-status-badge > span svg,
 .status-badge.emerald-status-badge > span svg {
     @apply text-emerald-300;
 }
@@ -123,16 +125,21 @@
     @apply text-slate-300;
 }
 
+.status-badge.disabled-status-badge > span,
 .status-badge.gray-status-badge > span {
     @apply bg-gray-800 border-gray-700 text-gray-100;
 }
 
+.status-badge.disabled-status-badge > span svg,
 .status-badge.gray-status-badge > span svg {
     @apply text-gray-300;
 }
 
 .status-badge[class*='5'] > span,
 .status-badge.red-status-badge > span,
+.status-badge.faulty-status-badge > span,
+.status-badge.degraded-status-badge > span,
+.status-badge.error-status-badge > span,
 .status-badge.escalated-status-badge > span,
 .status-badge.high-status-badge > span,
 .status-badge.rejected-status-badge > span,
@@ -147,6 +154,9 @@
 
 .status-badge[class*='5'] > span svg,
 .status-badge.red-status-badge > span svg,
+.status-badge.faulty-status-badge > span svg,
+.status-badge.degraded-status-badge > span svg,
+.status-badge.error-status-badge > span svg,
 .status-badge.escalated-status-badge > span svg,
 .status-badge.high-status-badge > span svg,
 .status-badge.rejected-status-badge > span svg,
@@ -161,6 +171,7 @@
 }
 
 .status-badge[class*='4'] > span,
+.status-badge.idle-status-badge > span,
 .status-badge.draft-status-badge > span,
 .status-badge.yellow-status-badge > span,
 .status-badge.re-opened-status-badge > span,
@@ -168,8 +179,10 @@
 .status-badge.driver-enroute-status-badge > span,
 .status-badge.offline-status-badge > span,
 .status-badge.pending-review-status-badge > span,
+.status-badge.pending-activation-status-badge > span,
 .status-badge.awaiting-review-status-badge > span,
 .status-badge.scheduled-maintenance-status-badge > span,
+.status-badge.maintenance-status-badge > span,
 .status-badge.test-status-badge > span,
 .status-badge.warning-status-badge > span,
 .status-badge.preparing-status-badge > span,
@@ -181,6 +194,7 @@
 }
 
 .status-badge[class*='4'] > span svg,
+.status-badge.idle-status-badge > span svg,
 .status-badge.draft-status-badge > span svg,
 .status-badge.yellow-status-badge > span svg,
 .status-badge.re-opened-status-badge > span svg,
@@ -188,8 +202,10 @@
 .status-badge.driver-enroute-status-badge > span svg,
 .status-badge.offline-status-badge > span svg,
 .status-badge.pending-review-status-badge > span svg,
+.status-badge.pending-activation-status-badge > span svg,
 .status-badge.awaiting-review-status-badge > span svg,
 .status-badge.scheduled-maintenance-status-badge > span svg,
+.status-badge.maintenance-status-badge > span svg,
 .status-badge.test-status-badge > span svg,
 .status-badge.warning-status-badge > span svg,
 .status-badge.preparing-status-badge > span svg,
@@ -201,6 +217,7 @@
 }
 
 .status-badge.indigo-status-badge > span,
+.status-badge.initialized-status-badge > span,
 .status-badge.operational-suggestion-status-badge > span,
 .status-badge.dispatched-status-badge > span,
 .status-badge.matched-status-badge > span,
@@ -209,6 +226,7 @@
 }
 
 .status-badge.indigo-status-badge > span svg,
+.status-badge.initialized-status-badge > span svg,
 .status-badge.operational-suggestion-status-badge > span svg,
 .status-badge.dispatched-status-badge > span svg,
 .status-badge.matched-status-badge > span svg,
@@ -217,6 +235,9 @@
 }
 
 .status-badge.orange-status-badge > span,
+.status-badge.decommissioned-status-badge > span,
+.status-badge.disconnected-status-badge > span,
+.status-badge.calibrating-status-badge > span,
 .status-badge.awaiting-parts-status-badge > span,
 .status-badge.monitoring-status-badge > span,
 .status-badge.triage-status-badge > span,
@@ -227,6 +248,9 @@
 }
 
 .status-badge.orange-status-badge > span svg,
+.status-badge.decommissioned-status-badge > span svg,
+.status-badge.disconnected-status-badge > span svg,
+.status-badge.calibrating-status-badge > span svg,
 .status-badge.awaiting-parts-status-badge > span svg,
 .status-badge.monitoring-status-badge > span svg,
 .status-badge.triage-status-badge > span svg,

package/app/components/pill.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/pill';

package/app/helpers/is-object-empty.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/helpers/is-object-empty';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.6",
+    "version": "0.3.8",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",