@fleetbase/ember-ui 0.3.22 → 0.3.24

package/addon/helpers/string-starts-with.js

@@ -0,0 +1,14 @@
+import { helper } from '@ember/component/helper';
+
+/**
+ * {{string-starts-with str prefix}}
+ *
+ * Returns true if `str` starts with `prefix`. Safe against null/undefined.
+ *
+ * Example:
+ *   {{#if (string-starts-with query.uuid "_new_")}}
+ */
+export default helper(function stringStartsWith([str, prefix]) {
+    if (typeof str !== 'string' || typeof prefix !== 'string') return false;
+    return str.startsWith(prefix);
+});

package/addon/services/template-builder.js

@@ -0,0 +1,72 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+/**
+ * TemplateBuildService
+ *
+ * A singleton service that extensions can inject to register resource types
+ * available in the TemplateQuery form. Each extension registers its own
+ * resource types (Fleetbase model classes) so the template builder knows
+ * what models can be queried at render time.
+ *
+ * Usage in an extension initializer:
+ *
+ *   // addon/instance-initializers/register-template-resources.js
+ *   export function initialize(appInstance) {
+ *       const templateBuilder = appInstance.lookup('service:template-builder');
+ *       templateBuilder.registerResourceTypes([
+ *           { label: 'Order',   value: 'Fleetbase\\FleetOps\\Models\\Order',   icon: 'route' },
+ *           { label: 'Driver',  value: 'Fleetbase\\FleetOps\\Models\\Driver',  icon: 'id-card' },
+ *           { label: 'Vehicle', value: 'Fleetbase\\FleetOps\\Models\\Vehicle', icon: 'truck' },
+ *       ]);
+ *   }
+ *   export default { initialize };
+ *
+ * Each resource type object must have:
+ *   - `label`  {string}  Human-readable name shown in the picker grid
+ *   - `value`  {string}  Fully-qualified PHP class name sent to the backend
+ *   - `icon`   {string}  FontAwesome icon name (without the `fa-` prefix)
+ *
+ * The TemplateBuilder::QueryForm component reads `resourceTypes` from this
+ * service and merges them with any types passed via `@resourceTypes` argument,
+ * with the argument taking precedence (override).
+ */
+export default class TemplateBuildService extends Service {
+    /**
+     * Registered resource types from all extensions.
+     * @type {Array<{label: string, value: string, icon: string}>}
+     */
+    @tracked _resourceTypes = [];
+
+    /**
+     * Register one or more resource types from an extension.
+     * Duplicate values (by `value` field) are ignored.
+     *
+     * @param {Array<{label: string, value: string, icon: string}>} types
+     */
+    registerResourceTypes(types = []) {
+        const existing = new Set(this._resourceTypes.map((t) => t.value));
+        const newTypes = types.filter((t) => t.value && !existing.has(t.value));
+        if (newTypes.length) {
+            this._resourceTypes = [...this._resourceTypes, ...newTypes];
+        }
+    }
+
+    /**
+     * Unregister resource types by value. Useful when an extension is torn down.
+     *
+     * @param {Array<string>} values
+     */
+    unregisterResourceTypes(values = []) {
+        const toRemove = new Set(values);
+        this._resourceTypes = this._resourceTypes.filter((t) => !toRemove.has(t.value));
+    }
+
+    /**
+     * All currently registered resource types.
+     * @returns {Array<{label: string, value: string, icon: string}>}
+     */
+    get resourceTypes() {
+        return this._resourceTypes;
+    }
+}

package/addon/styles/addon.css

@@ -53,6 +53,7 @@
 @import 'components/query-builder.css';
 @import 'components/activity-log.css';
 @import 'components/smart-nav-menu.css';
+@import 'components/template-builder.css';
 
 /** Third party */
 @import "ember-basic-dropdown/vendor/ember-basic-dropdown.css";

package/addon/styles/components/badge.css

@@ -46,7 +46,11 @@
 .status-badge.dispatched-status-badge > span,
 .status-badge.operational-status-badge > span,
 .status-badge.active-status-badge > span,
-.status-badge.completed-status-badge > span {
+.status-badge.completed-status-badge > span,
+/* ── Invoice statuses ── */
+.status-badge.paid-status-badge > span,
+.status-badge.settled-status-badge > span,
+.status-badge.captured-status-badge > span {
     @apply bg-green-800 border-green-700 text-green-100;
 }
 
@@ -67,7 +71,10 @@
 .status-badge.dispatched-status-badge > span svg,
 .status-badge.operational-status-badge > span svg,
 .status-badge.active-status-badge > span svg,
-.status-badge.completed-status-badge > span svg {
+.status-badge.completed-status-badge > span svg,
+.status-badge.paid-status-badge > span svg,
+.status-badge.settled-status-badge > span svg,
+.status-badge.captured-status-badge > span svg {
     @apply text-green-300;
 }
 
@@ -153,7 +160,13 @@
 .status-badge.inactive-status-badge > span,
 .status-badge.failed-status-badge > span,
 .status-badge.cancelled-status-badge > span,
-.status-badge.canceled-status-badge > span {
+.status-badge.canceled-status-badge > span,
+/* ── Invoice / transaction terminal-failure statuses ── */
+.status-badge.overdue-status-badge > span,
+.status-badge.void-status-badge > span,
+.status-badge.voided-status-badge > span,
+.status-badge.reversed-status-badge > span,
+.status-badge.chargeback-status-badge > span {
     @apply bg-red-800 border-red-700 text-red-100;
 }
 
@@ -172,7 +185,12 @@
 .status-badge.disputed-status-badge > span svg,
 .status-badge.failed-status-badge > span svg,
 .status-badge.cancelled-status-badge > span svg,
-.status-badge.canceled-status-badge > span svg {
+.status-badge.canceled-status-badge > span svg,
+.status-badge.overdue-status-badge > span svg,
+.status-badge.void-status-badge > span svg,
+.status-badge.voided-status-badge > span svg,
+.status-badge.reversed-status-badge > span svg,
+.status-badge.chargeback-status-badge > span svg {
     @apply text-red-300;
 }
 
@@ -196,7 +214,13 @@
 .status-badge.trial-status-badge > span,
 .status-badge.trialing-status-badge > span,
 .status-badge.grace-period-status-badge > span,
-.status-badge.pending-status-badge > span {
+.status-badge.pending-status-badge > span,
+/* ── Invoice statuses requiring attention ── */
+.status-badge.partial-status-badge > span,
+.status-badge.partially-paid-status-badge > span,
+.status-badge.sent-status-badge > span,
+.status-badge.viewed-status-badge > span,
+.status-badge.expired-status-badge > span {
     @apply bg-yellow-700 border-yellow-700 text-yellow-100;
 }
 
@@ -220,7 +244,12 @@
 .status-badge.trial-status-badge > span svg,
 .status-badge.trialing-status-badge > span svg,
 .status-badge.grace-period-status-badge > span svg,
-.status-badge.pending-status-badge > span svg {
+.status-badge.pending-status-badge > span svg,
+.status-badge.partial-status-badge > span svg,
+.status-badge.partially-paid-status-badge > span svg,
+.status-badge.sent-status-badge > span svg,
+.status-badge.viewed-status-badge > span svg,
+.status-badge.expired-status-badge > span svg {
     @apply text-yellow-300;
 }
 
@@ -229,7 +258,11 @@
 .status-badge.operational-suggestion-status-badge > span,
 .status-badge.dispatched-status-badge > span,
 .status-badge.matched-status-badge > span,
-.status-badge.assigned-status-badge > span {
+.status-badge.assigned-status-badge > span,
+/* ── Transaction type labels ── */
+.status-badge.invoice-payment-status-badge > span,
+.status-badge.revenue-recognition-status-badge > span,
+.status-badge.journal-entry-status-badge > span {
     @apply bg-indigo-800 border-indigo-700 text-indigo-100;
 }
 
@@ -238,7 +271,10 @@
 .status-badge.operational-suggestion-status-badge > span svg,
 .status-badge.dispatched-status-badge > span svg,
 .status-badge.matched-status-badge > span svg,
-.status-badge.assigned-status-badge > span svg {
+.status-badge.assigned-status-badge > span svg,
+.status-badge.invoice-payment-status-badge > span svg,
+.status-badge.revenue-recognition-status-badge > span svg,
+.status-badge.journal-entry-status-badge > span svg {
     @apply text-indigo-300;
 }
 
@@ -251,7 +287,12 @@
 .status-badge.triage-status-badge > span,
 .status-badge.alerted-status-badge > span,
 .status-badge.flagged-status-badge > span,
-.status-badge.medium-status-badge > span {
+.status-badge.medium-status-badge > span,
+/* ── Transaction processing statuses ── */
+.status-badge.processing-status-badge > span,
+.status-badge.authorized-status-badge > span,
+.status-badge.requires-action-status-badge > span,
+.status-badge.requires-capture-status-badge > span {
     @apply bg-orange-700 border-orange-700 text-orange-100;
 }
 
@@ -264,7 +305,11 @@
 .status-badge.triage-status-badge > span svg,
 .status-badge.alerted-status-badge > span svg,
 .status-badge.flagged-status-badge > span svg,
-.status-badge.medium-status-badge > span svg {
+.status-badge.medium-status-badge > span svg,
+.status-badge.processing-status-badge > span svg,
+.status-badge.authorized-status-badge > span svg,
+.status-badge.requires-action-status-badge > span svg,
+.status-badge.requires-capture-status-badge > span svg {
     @apply text-orange-300;
 }
 
@@ -274,7 +319,12 @@
 .status-badge.low-status-badge > span,
 .status-badge.approved-status-badge > span,
 .status-badge.info-status-badge > span,
-.status-badge.in-progress-status-badge > span {
+.status-badge.in-progress-status-badge > span,
+/* ── Transaction direction indicators ── */
+.status-badge.credit-status-badge > span,
+.status-badge.debit-status-badge > span,
+.status-badge.refunded-status-badge > span,
+.status-badge.refund-status-badge > span {
     @apply bg-blue-800 border-blue-700 text-blue-100;
 }
 
@@ -284,7 +334,11 @@
 .status-badge.loq-status-badge > span svg,
 .status-badge.approved-status-badge > span svg,
 .status-badge.info-status-badge > span svg,
-.status-badge.in-progress-status-badge > span svg {
+.status-badge.in-progress-status-badge > span svg,
+.status-badge.credit-status-badge > span svg,
+.status-badge.debit-status-badge > span svg,
+.status-badge.refunded-status-badge > span svg,
+.status-badge.refund-status-badge > span svg {
     @apply text-blue-300;
 }
 

package/addon/styles/components/smart-nav-menu.css

@@ -169,13 +169,22 @@
 
 /* ── Extension card ─────────────────────────────────────────────────────────── */
 
+/* Wrapper that holds the card link + absolutely-positioned pin button */
+.snm-dropdown-card-wrap {
+    position: relative;
+}
+
 .snm-dropdown-card {
     @apply flex flex-col rounded-lg;
     padding: 7px 10px;
     background-color: #111827; /* gray-900 */
     border: 1px solid #1f2937; /* gray-800 – darker but lighter than bg */
     transition: border-color 0.15s ease, background-color 0.15s ease;
-    position: relative;
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .snm-dropdown-card:hover {
@@ -183,36 +192,29 @@
     background-color: #1a2332; /* slightly lighter than gray-900 */
 }
 
-/* Card header row: icon + title link + pin button */
+/* Card header row: icon + title + pin button */
 .snm-dropdown-card-header {
     @apply flex items-center;
     gap: 0;
     margin-bottom: 0;
 }
 
-/* The main extension link inside a card */
-.snm-dropdown-card-link {
-    @apply flex items-center flex-1 text-sm font-medium;
-    color: #e5e7eb; /* gray-200 */
-    text-decoration: none;
-    min-width: 0;
-    cursor: pointer;
-    border: none;
-    background: none;
-    padding: 0;
-}
-
-.snm-dropdown-card-link:hover {
-    color: #f9fafb; /* gray-50 */
-}
-
-.snm-dropdown-card-link-wrapper {
-    @apply flex flex-1;
-    min-width: 0;
+/* Pin button is a sibling of the card link, absolutely positioned top-right
+   so it floats above the card and receives its own clicks */
+.snm-dropdown-pin-btn {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    z-index: 1;
 }
 
-.snm-dropdown-card-link-wrapper .snm-dropdown-card-link {
-    width: 100%;
+/* Card-as-link: the card itself is the <LinkToExternal> or <a> */
+a.snm-dropdown-card,
+.snm-dropdown-card[href] {
+    display: flex;
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
 }
 
 .snm-dropdown-card-icon {
@@ -250,12 +252,13 @@
 }
 
 /* Pin button on card – always visible at low opacity, brightens on hover */
-.snm-dropdown-card .snm-dropdown-pin-btn {
-    opacity: 0.35;
+.snm-dropdown-card-wrap .snm-dropdown-pin-btn {
+    opacity: 0;
     pointer-events: auto;
+    transition: opacity 0.15s ease;
 }
 
-.snm-dropdown-card:hover .snm-dropdown-pin-btn {
+.snm-dropdown-card-wrap:hover .snm-dropdown-pin-btn {
     opacity: 1;
 }
 
@@ -787,11 +790,13 @@ body[data-theme='light'] .snm-dropdown-card:hover {
     background-color: #f3f4f6; /* gray-100 */
 }
 
-body[data-theme='light'] .snm-dropdown-card-link {
+body[data-theme='light'] a.snm-dropdown-card,
+body[data-theme='light'] .snm-dropdown-card[href] {
     color: #374151; /* gray-700 */
 }
 
-body[data-theme='light'] .snm-dropdown-card-link:hover {
+body[data-theme='light'] a.snm-dropdown-card:hover,
+body[data-theme='light'] .snm-dropdown-card[href]:hover {
     color: #111827; /* gray-900 */
 }
 
@@ -799,7 +804,8 @@ body[data-theme='light'] .snm-dropdown-card-icon {
     color: #6b7280; /* gray-500 */
 }
 
-body[data-theme='light'] .snm-dropdown-card-link:hover .snm-dropdown-card-icon {
+body[data-theme='light'] a.snm-dropdown-card:hover .snm-dropdown-card-icon,
+body[data-theme='light'] .snm-dropdown-card[href]:hover .snm-dropdown-card-icon {
     color: #2563eb; /* blue-600 */
 }
 

package/addon/styles/components/template-builder.css

@@ -0,0 +1,297 @@
+/* =============================================================================
+   Template Builder
+   ============================================================================= */
+
+/* Root layout */
+.tb-root {
+    font-family: Inter, system-ui, -apple-system, sans-serif;
+    font-size: 13px;
+}
+
+/* ─── Canvas ─────────────────────────────────────────────────────────────── */
+
+.tb-canvas {
+    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.12), 0 1px 4px 0 rgba(0, 0, 0, 0.08);
+    border-radius: 2px;
+    flex-shrink: 0;
+}
+
+body[data-theme='dark'] .tb-canvas {
+    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.4), 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* ─── Elements ───────────────────────────────────────────────────────────── */
+
+.tb-element {
+    box-sizing: border-box;
+    user-select: none;
+    touch-action: none; /* required for interact.js */
+}
+
+/* Selection handles (corner dots) */
+.tb-element-handle {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #3b82f6;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    z-index: 9999;
+}
+
+.tb-handle-nw {
+    top: -4px;
+    left: -4px;
+    cursor: nw-resize;
+}
+.tb-handle-ne {
+    top: -4px;
+    right: -4px;
+    cursor: ne-resize;
+}
+.tb-handle-sw {
+    bottom: -4px;
+    left: -4px;
+    cursor: sw-resize;
+}
+.tb-handle-se {
+    bottom: -4px;
+    right: -4px;
+    cursor: se-resize;
+}
+
+/* ─── Toolbar ────────────────────────────────────────────────────────────── */
+
+.tb-toolbar {
+    min-height: 44px;
+    flex-shrink: 0;
+}
+
+.tb-toolbar-btn {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    outline: none;
+}
+
+.tb-toolbar-btn:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 1px;
+}
+
+/* ─── Panels ─────────────────────────────────────────────────────────────── */
+
+.tb-panel-left,
+.tb-panel-right {
+    min-width: 0;
+}
+
+.tb-layers-panel,
+.tb-properties-panel {
+    font-size: 12px;
+}
+
+/* Layer row active state */
+.tb-layer-row:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: -2px;
+}
+
+/* ─── Properties Panel ───────────────────────────────────────────────────── */
+
+.tb-prop-section {
+    /* intentionally minimal */
+}
+
+.tb-prop-field {
+    display: flex;
+    flex-direction: column;
+}
+
+/* ─── Form inputs ────────────────────────────────────────────────────────── */
+
+/*
+ * .tb-input is the shared class for ALL form controls in the properties panel:
+ * <input type="text">, <input type="number">, <select>, <textarea>.
+ * Every property below is declared with !important on the type-specific
+ * overrides so that browser UA stylesheets (which reset font/color on
+ * <input type="number"> and <select>) cannot win.
+ */
+.tb-input {
+    width: 100%;
+    height: 26px;
+    padding: 0 6px;
+    font-family: inherit;
+    font-size: 11px;
+    line-height: 26px;
+    color: #374151;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    background-color: #f9fafb;
+    outline: none;
+    box-sizing: border-box;
+    transition: border-color 0.15s;
+    /* Strip browser-specific chrome so all control types look identical */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+/* Restore the native select arrow while keeping everything else uniform */
+select.tb-input {
+    -webkit-appearance: auto;
+    -moz-appearance: auto;
+    appearance: auto;
+    padding-right: 4px;
+    /* Explicitly re-state visual properties so the appearance reset above
+       does not cause browsers to fall back to their own defaults */
+    font-size: 11px;
+    color: #374151;
+    border-radius: 4px;
+}
+
+.tb-input:focus {
+    border-color: #3b82f6;
+    background-color: #ffffff;
+}
+
+/* Dark mode */
+body[data-theme='dark'] .tb-input {
+    border-color: #374151;
+    background-color: #1f2937;
+    color: #d1d5db;
+}
+
+body[data-theme='dark'] select.tb-input {
+    color: #d1d5db;
+}
+
+body[data-theme='dark'] .tb-input:focus {
+    border-color: #3b82f6;
+    background-color: #111827;
+}
+
+/*
+ * Number inputs: restore the spinner but keep font/color/radius consistent.
+ * -webkit-appearance: textfield strips the spinner on WebKit; using
+ * "inner-spin-button" on the pseudo-element re-adds it without re-applying
+ * the full native number-input chrome.
+ */
+.tb-input[type='number'] {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+    padding-right: 2px;
+    /* Re-declare so UA overrides cannot win */
+    font-size: 11px;
+    color: #374151;
+    border-radius: 4px;
+}
+
+body[data-theme='dark'] .tb-input[type='number'] {
+    color: #d1d5db;
+}
+
+.tb-input[type='number']::-webkit-inner-spin-button,
+.tb-input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: inner-spin-button;
+    opacity: 1;
+    height: 24px;
+    cursor: pointer;
+}
+
+/* Textarea variant — allow vertical resize, auto height */
+textarea.tb-input {
+    height: auto;
+    line-height: 1.4;
+    padding: 4px 6px;
+    resize: vertical;
+    font-size: 11px;
+    color: #374151;
+    border-radius: 4px;
+}
+
+body[data-theme='dark'] textarea.tb-input {
+    color: #d1d5db;
+}
+
+/* ─── Colour swatch input ────────────────────────────────────────────────── */
+
+.tb-color-input {
+    width: 100%;
+    height: 28px;
+    padding: 1px 2px;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    background: none;
+    cursor: pointer;
+}
+
+body[data-theme='dark'] .tb-color-input {
+    border-color: #374151;
+}
+
+/* ─── Icon buttons ───────────────────────────────────────────────────────── */
+
+.tb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 6px;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    background: #f9fafb;
+    color: #6b7280;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+    flex-shrink: 0;
+}
+
+.tb-icon-btn:hover {
+    background: #eff6ff;
+    color: #3b82f6;
+    border-color: #bfdbfe;
+}
+
+body[data-theme='dark'] .tb-icon-btn {
+    border-color: #374151;
+    background: #1f2937;
+    color: #9ca3af;
+}
+
+body[data-theme='dark'] .tb-icon-btn:hover {
+    background: #1e3a5f;
+    color: #60a5fa;
+    border-color: #1d4ed8;
+}
+
+/* ─── Variable Picker ────────────────────────────────────────────────────── */
+
+.tb-variable-picker {
+    /* z-index handled by Tailwind utility classes */
+}
+
+/* --- Query Form dialog inputs --- */
+.tb-query-form input.tb-input,
+.tb-query-form select.tb-input {
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    border-radius: 6px;
+    padding: 0 8px;
+    box-sizing: border-box;
+}
+
+.tb-query-form select.tb-input {
+    padding-right: 4px;
+}
+
+/* Fixed-width selects inside the query form condition / sort rows */
+.tb-select-operator {
+    width: 130px;
+}
+
+.tb-select-direction {
+    width: 120px;
+}

package/addon/utils/get-currency.js

@@ -1,4 +1,4 @@
-const currencies = [
+export const currencies = [
     {
         iso2: 'AW',
         name: 'Aruba',

package/app/components/template-builder/canvas.js

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

package/app/components/template-builder/element-renderer.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/template-builder/element-renderer';

package/app/components/template-builder/layers-panel.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/template-builder/layers-panel';

package/app/components/template-builder/properties-panel/field.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/template-builder/properties-panel/field';

package/app/components/template-builder/properties-panel/section.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/template-builder/properties-panel/section';

package/app/components/template-builder/properties-panel.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/template-builder/properties-panel';