@fleetbase/fleetops-engine 0.6.50 → 0.6.51

package/addon/components/vendor/personnel-manager.hbs

@@ -0,0 +1,166 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title="Personnel" @open={{true}} @wrapperClass="bordered-top">
+        <div class="space-y-3">
+            <div class="flex flex-col space-y-2 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Vendor personnel</h3>
+                    <p class="text-xs text-gray-500 dark:text-gray-400">Manage contacts assigned to this vendor account.</p>
+                </div>
+                <div class="inline-flex overflow-hidden rounded-md border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800">
+                    <button
+                        type="button"
+                        class="inline-flex w-36 items-center justify-center whitespace-nowrap border-r border-gray-200 px-3 py-2 text-xs font-semibold dark:border-gray-700 {{if this.isAddingExistingContact 'bg-blue-600 text-white' 'text-gray-700 dark:text-gray-200'}}"
+                        {{on "click" (fn this.setMode "existing")}}
+                    >
+                        <FaIcon @icon="address-book" class="mr-1.5" />
+                        Existing contact
+                    </button>
+                    <button
+                        type="button"
+                        class="inline-flex w-36 items-center justify-center whitespace-nowrap px-3 py-2 text-xs font-semibold {{if this.isCreatingContact 'bg-blue-600 text-white' 'text-gray-700 dark:text-gray-200'}}"
+                        {{on "click" (fn this.setMode "new")}}
+                    >
+                        <FaIcon @icon="user-plus" class="mr-1.5" />
+                        New contact
+                    </button>
+                </div>
+            </div>
+
+            <form {{on "submit" (perform this.addPersonnel)}} class="rounded-md border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                <div class="space-y-3">
+                    {{#if this.isAddingExistingContact}}
+                        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
+                        <InputGroup @name="Contact" @wrapperClass="mb-0i">
+                            <ModelSelect
+                                @modelName="contact"
+                                @selectedModel={{this.selectedContact}}
+                                @placeholder="Select existing customer contact"
+                                @query={{hash type="customer"}}
+                                @triggerClass="form-select form-input"
+                                @infiniteScroll={{false}}
+                                @renderInPlace={{true}}
+                                @onChange={{this.selectContact}}
+                                as |model|
+                            >
+                                <div class="flex flex-row items-center">
+                                    <div class="mr-2 w-6">
+                                        <Image src={{model.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{model.name}} class="h-6 w-6 rounded-md" />
+                                    </div>
+                                    <div class="min-w-0">
+                                        <div class="truncate font-semibold">{{model.name}}</div>
+                                        <div class="truncate text-xs text-gray-500">{{n-a model.email}}</div>
+                                    </div>
+                                </div>
+                            </ModelSelect>
+                        </InputGroup>
+
+                    <InputGroup @name="Role" @wrapperClass="mb-0i">
+                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                            <PowerSelect
+                                @options={{this.roleOptions}}
+                                @selected={{this.selectedRole}}
+                                @onChange={{this.selectRole}}
+                                @placeholder="Select role"
+                                @triggerClass="form-select form-input"
+                                as |role|
+                            >
+                                <div class="text-sm">
+                                    <div class="font-semibold normalize-in-trigger">{{role.label}}</div>
+                                    <div class="hide-from-trigger">{{role.description}}</div>
+                                </div>
+                            </PowerSelect>
+                        </div>
+                    </InputGroup>
+                        </div>
+                    {{else}}
+                        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
+                            <InputGroup @name="Name" @wrapperClass="mb-0i" @value={{this.name}} @placeholder="Personnel name" />
+                            <InputGroup @name="Email" @wrapperClass="mb-0i" @type="email" @value={{this.email}} @placeholder="email@example.com" />
+                        </div>
+                        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
+                            <InputGroup @name="Phone" @wrapperClass="mb-0i">
+                                <PhoneInput @value={{this.phone}} @onInput={{fn (mut this.phone)}} class="form-input w-full" />
+                            </InputGroup>
+                            <InputGroup @name="Role" @wrapperClass="mb-0i">
+                                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                                    <PowerSelect
+                                        @options={{this.roleOptions}}
+                                        @selected={{this.selectedRole}}
+                                        @onChange={{this.selectRole}}
+                                        @placeholder="Select role"
+                                        @triggerClass="form-select form-input"
+                                        as |role|
+                                    >
+                                        <div class="text-sm">
+                                            <div class="font-semibold normalize-in-trigger">{{role.label}}</div>
+                                            <div class="hide-from-trigger">{{role.description}}</div>
+                                        </div>
+                                    </PowerSelect>
+                                </div>
+                            </InputGroup>
+                        </div>
+                    {{/if}}
+
+                    <div>
+                        <Checkbox @value={{this.createLogin}} @onToggle={{this.toggleCreateLogin}}>Create login</Checkbox>
+                    </div>
+
+                    <div class="flex justify-end">
+                        <Button
+                            @buttonType="submit"
+                            @type="primary"
+                            @icon="plus"
+                            @text="Add Personnel"
+                            @isLoading={{this.addPersonnel.isRunning}}
+                            @disabled={{not this.canSubmit}}
+                        />
+                    </div>
+                </div>
+            </form>
+
+            <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                <div class="grid grid-cols-12 border-b border-gray-200 bg-gray-50 px-3 py-2 text-xs font-semibold text-gray-800 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100">
+                    <div class="col-span-6">Contact</div>
+                    <div class="col-span-2">Role</div>
+                    <div class="col-span-2">Status</div>
+                    <div class="col-span-2 text-right">Actions</div>
+                </div>
+
+                {{#if this.loadPersonnel.isRunning}}
+                    <div class="flex items-center justify-center p-4 text-sm text-gray-500 dark:text-gray-300">
+                        <Spinner @iconClass="text-sky-500" />
+                        <span class="ml-2">Loading personnel...</span>
+                    </div>
+                {{else if this.hasPersonnel}}
+                    {{#each this.personnels as |personnel|}}
+                        <div class="grid grid-cols-12 items-center border-b border-gray-100 px-3 py-2 text-xs last:border-b-0 dark:border-gray-700 dark:text-gray-100">
+                            <div class="col-span-6 flex min-w-0 items-center">
+                                <Image src={{personnel.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{personnel.name}} class="mr-2 h-7 w-7 rounded-md" />
+                                <div class="min-w-0">
+                                    <div class="truncate font-semibold">{{or personnel.name personnel.public_id}}</div>
+                                    <div class="truncate text-gray-500 dark:text-gray-400">{{n-a personnel.email}} {{n-a personnel.phone}}</div>
+                                </div>
+                            </div>
+                            <div class="col-span-2 capitalize">{{personnel.role}}</div>
+                            <div class="col-span-2">
+                                <Badge @status={{or personnel.status "active"}} />
+                            </div>
+                            <div class="col-span-2 flex justify-end">
+                                <Button
+                                    @type="danger"
+                                    @size="xs"
+                                    @icon="trash"
+                                    @text="Remove"
+                                    @onClick={{perform this.removePersonnel personnel}}
+                                    @isLoading={{this.removePersonnel.isRunning}}
+                                />
+                            </div>
+                        </div>
+                    {{/each}}
+                {{else}}
+                    <div class="p-4 text-sm text-gray-500 dark:text-gray-400">No personnel added yet.</div>
+                {{/if}}
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/vendor/personnel-manager.js

@@ -0,0 +1,143 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class VendorPersonnelManagerComponent extends Component {
+    @service fetch;
+    @service notifications;
+
+    @tracked personnels = [];
+    @tracked selectedContact;
+    @tracked mode = 'existing';
+    @tracked name;
+    @tracked email;
+    @tracked phone;
+    @tracked role = 'member';
+    @tracked createLogin = true;
+
+    roleOptions = [
+        {
+            label: 'Admin',
+            value: 'admin',
+            description: 'Can manage vendor account settings and personnel.',
+        },
+        {
+            label: 'Member',
+            value: 'member',
+            description: 'Can access the vendor customer workspace.',
+        },
+    ];
+
+    constructor(owner, args) {
+        super(owner, args);
+        this.loadPersonnel.perform();
+    }
+
+    get selectedRole() {
+        return this.roleOptions.find((option) => option.value === this.role);
+    }
+
+    get isAddingExistingContact() {
+        return this.mode === 'existing';
+    }
+
+    get isCreatingContact() {
+        return this.mode === 'new';
+    }
+
+    get hasPersonnel() {
+        return this.personnels.length > 0;
+    }
+
+    get canSubmit() {
+        if (this.isAddingExistingContact) {
+            return this.selectedContact;
+        }
+
+        return this.name && this.email;
+    }
+
+    @action setMode(mode) {
+        this.mode = mode;
+        this.clearForm();
+    }
+
+    @action selectContact(contact) {
+        this.selectedContact = contact;
+    }
+
+    @action selectRole(role) {
+        this.role = role?.value ?? 'member';
+    }
+
+    @action toggleCreateLogin(value) {
+        this.createLogin = value;
+    }
+
+    clearForm() {
+        this.selectedContact = null;
+        this.name = '';
+        this.email = '';
+        this.phone = '';
+        this.role = 'member';
+        this.createLogin = true;
+    }
+
+    @task *loadPersonnel() {
+        try {
+            const response = yield this.fetch.get(`vendors/${this.args.vendor.id}/personnels`, {}, { namespace: 'int/v1' });
+            this.personnels = response.personnels ?? [];
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *addPersonnel(event) {
+        if (event instanceof Event) {
+            event.preventDefault();
+        }
+
+        if (!this.canSubmit) {
+            this.notifications.warning(this.isAddingExistingContact ? 'Select a contact to add.' : 'Name and email are required.');
+            return;
+        }
+
+        try {
+            const payload = {
+                role: this.role,
+                create_login: this.createLogin,
+            };
+
+            if (this.isAddingExistingContact) {
+                payload.contact = this.selectedContact?.public_id ?? this.selectedContact?.uuid ?? this.selectedContact?.id;
+            } else {
+                payload.name = this.name;
+                payload.email = this.email;
+                payload.phone = this.phone;
+            }
+
+            const response = yield this.fetch.post(`vendors/${this.args.vendor.id}/personnels`, payload, { namespace: 'int/v1' });
+            const personnel = response.personnel;
+            if (personnel) {
+                this.personnels = [...this.personnels.filter((item) => item.contact_uuid !== personnel.contact_uuid), personnel];
+            }
+
+            this.clearForm();
+            this.notifications.success('Personnel added.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *removePersonnel(personnel) {
+        try {
+            yield this.fetch.delete(`vendors/${this.args.vendor.id}/personnels/${personnel.id}`, {}, { namespace: 'int/v1' });
+            this.personnels = this.personnels.filter((item) => item.id !== personnel.id);
+            this.notifications.success('Personnel removed.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

package/addon/components/widget/live-fleet.hbs

@@ -20,6 +20,7 @@
                 @zoom={{this.zoom}}
                 @zoomControl={{true}}
                 @onLoad={{this.onMapLoad}}
+                @scrollWheelZoom={{false}}
                 {{set-container-dimensions}}
                 as |layers|
             >

package/addon/components/widget/live-fleet.js

@@ -7,6 +7,7 @@ import { debug } from '@ember/debug';
 import { task } from 'ember-concurrency';
 import { renderCompleted, waitForInsertedAndSized } from '@fleetbase/ember-ui/utils/dom';
 import LeafletTrackingMarkerComponent from '../leaflet-tracking-marker';
+import ensureLeafletDrawEditNamespace from '../../utils/leaflet-draw-namespace-guard';
 
 const DEFAULT_CENTER = [1.31, 103.85];
 const DEFAULT_ZOOM = 11;
@@ -101,13 +102,7 @@ export default class WidgetLiveFleetComponent extends Component {
      * widget is read-only.
      */
     #patchLeafletDrawInitHook() {
-        const L = typeof window !== 'undefined' ? (window.L ?? window.leaflet) : null;
-        if (L && !L.Edit) {
-            L.Edit = {};
-        }
-        if (L && !L.Marker) {
-            L.Marker = {};
-        }
+        ensureLeafletDrawEditNamespace();
     }
 
     /**

package/addon/components/widget/revenue-trend.hbs

@@ -27,7 +27,7 @@
                 {{/if}}
             </div>
             <div class="flex-1 min-h-0">
-                <Chart @type="line" @labels={{this.data.labels}} @datasets={{this.data.datasets}} @options={{this.chartOptions}} />
+                <Chart @type="line" @labels={{this.data.labels}} @datasets={{this.chartDatasets}} @options={{this.chartOptions}} />
             </div>
         {{/if}}
     </div>

package/addon/components/widget/revenue-trend.js

@@ -3,6 +3,8 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
+import getCurrency from '@fleetbase/ember-ui/utils/get-currency';
+import formatMoney from '@fleetbase/ember-accounting/utils/format-money';
 
 const PERIODS = ['7d', '30d', '90d'];
 
@@ -22,17 +24,88 @@ export default class WidgetRevenueTrendComponent extends Component {
         this.load.perform();
     }
 
+    get currencyCode() {
+        return this.data?.summary?.currency ?? 'USD';
+    }
+
+    get currency() {
+        return getCurrency(this.currencyCode) ?? getCurrency('USD');
+    }
+
+    get currencyDivisor() {
+        const precision = Number(this.currency?.precision ?? 2);
+
+        return precision > 0 ? 10 ** precision : 1;
+    }
+
+    get chartDatasets() {
+        return (
+            this.data?.datasets?.map((dataset) => {
+                if (!this.isRevenueDataset(dataset)) {
+                    return dataset;
+                }
+
+                return {
+                    ...dataset,
+                    data: dataset.data?.map((value) => this.normalizeRevenueValue(value)) ?? [],
+                };
+            }) ?? []
+        );
+    }
+
+    isRevenueDataset(dataset) {
+        return dataset?.label === 'Revenue' || dataset?.yAxisID === 'y';
+    }
+
+    normalizeRevenueValue(value) {
+        const numericValue = Number(value);
+
+        if (!Number.isFinite(numericValue)) {
+            return value;
+        }
+
+        return numericValue / this.currencyDivisor;
+    }
+
+    formatChartCurrency(value) {
+        const numericValue = Number(value);
+
+        if (!Number.isFinite(numericValue)) {
+            return value;
+        }
+
+        return formatMoney(numericValue, this.currency.symbol, this.currency.precision, this.currency.thousandSeparator, this.currency.decimalSeparator);
+    }
+
     get chartOptions() {
         return {
             responsive: true,
             maintainAspectRatio: false,
             plugins: {
                 legend: { display: false },
-                tooltip: { mode: 'index', intersect: false },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false,
+                    callbacks: {
+                        label: (context) => {
+                            if (this.isRevenueDataset(context.dataset)) {
+                                return `Revenue: ${this.formatChartCurrency(context.parsed?.y ?? context.raw)}`;
+                            }
+
+                            return `${context.dataset?.label ?? 'Value'}: ${context.parsed?.y ?? context.raw}`;
+                        },
+                    },
+                },
             },
             scales: {
                 x: { grid: { display: false } },
-                y: { beginAtZero: true, ticks: { precision: 0 } },
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        precision: this.currency.precision,
+                        callback: (value) => this.formatChartCurrency(value),
+                    },
+                },
             },
             elements: { point: { radius: 0, hoverRadius: 4 } },
         };

package/addon/controllers/management/contacts/customers/details.js

@@ -1,19 +1,37 @@
 import Controller from '@ember/controller';
-import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
 
 export default class ManagementContactsCustomersDetailsController extends Controller {
+    @service('universe/menu-service') menuService;
+    @service customerActions;
     @service hostRouter;
-    @tracked tabs = [
-        {
-            route: 'management.contacts.customers.details.index',
-            label: 'Overview',
-        },
-    ];
-    @tracked actionButtons = [
-        {
-            icon: 'pencil',
-            fn: () => this.hostRouter.transitionTo('console.fleet-ops.management.contacts.customers.edit', this.model),
-        },
-    ];
+    @service intl;
+
+    get tabs() {
+        const registeredTabs = this.menuService.getMenuItems('fleet-ops:component:customer:details');
+        return [
+            {
+                route: 'management.contacts.index.details.index',
+                label: 'Overview',
+            },
+            ...(isArray(registeredTabs) ? registeredTabs : []),
+        ];
+    }
+
+    get actionButtons() {
+        const buttons = [
+            {
+                icon: 'pencil',
+                fn: () => this.hostRouter.transitionTo('console.fleet-ops.management.contacts.customers.edit', this.model),
+            },
+        ];
+
+        const accountActionButton = this.customerActions.accountActionButton(this.model);
+        if (accountActionButton) {
+            buttons.push(accountActionButton);
+        }
+
+        return buttons;
+    }
 }

package/addon/controllers/management/contacts/customers.js

@@ -4,6 +4,10 @@ import { inject as service } from '@ember/service';
 export default class ManagementContactsCustomersController extends ManagementContactsIndexController {
     @service('customerActions') contactActions;
 
+    get customerActions() {
+        return this.contactActions;
+    }
+
     /** columns */
     get columns() {
         return [
@@ -13,7 +17,7 @@ export default class ManagementContactsCustomersController extends ManagementCon
                 valuePath: 'name',
 
                 cellComponent: 'table/cell/media-name',
-                action: this.contactActions.transition.view,
+                action: this.customerActions.transition.view,
                 permission: 'fleet-ops view contact',
                 resizable: true,
                 sortable: true,
@@ -75,7 +79,7 @@ export default class ManagementContactsCustomersController extends ManagementCon
                 label: this.intl.t('column.address'),
                 valuePath: 'address',
                 cellComponent: 'table/cell/anchor',
-                action: this.contactActions.viewPlace,
+                action: this.customerActions.viewPlace,
 
                 resizable: true,
                 sortable: true,
@@ -118,20 +122,27 @@ export default class ManagementContactsCustomersController extends ManagementCon
                 actions: [
                     {
                         label: this.intl.t('common.view-resource', { resource: this.intl.t('resource.customer') }),
-                        fn: this.contactActions.transition.view,
+                        icon: 'eye',
+                        fn: this.customerActions.transition.view,
                         permission: 'fleet-ops view contact',
                     },
                     {
                         label: this.intl.t('common.edit-resource', { resource: this.intl.t('resource.customer') }),
-                        fn: this.contactActions.transition.edit,
+                        icon: 'pencil',
+                        fn: this.customerActions.transition.edit,
                         permission: 'fleet-ops update contact',
                     },
                     {
                         separator: true,
                     },
+                    ...this.customerActions.accountRowActionItems(),
+                    {
+                        separator: true,
+                    },
                     {
                         label: this.intl.t('common.delete-resource', { resource: this.intl.t('resource.customer') }),
-                        fn: this.contactActions.delete,
+                        icon: 'trash',
+                        fn: this.customerActions.delete,
                         permission: 'fleet-ops delete contact',
                     },
                 ],

package/addon/controllers/management/contacts/index/details.js

@@ -1,19 +1,37 @@
 import Controller from '@ember/controller';
-import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
 
 export default class ManagementContactsIndexDetailsController extends Controller {
+    @service('universe/menu-service') menuService;
+    @service contactActions;
     @service hostRouter;
-    @tracked tabs = [
-        {
-            route: 'management.contacts.index.details.index',
-            label: 'Overview',
-        },
-    ];
-    @tracked actionButtons = [
-        {
-            icon: 'pencil',
-            fn: () => this.hostRouter.transitionTo('console.fleet-ops.management.contacts.index.edit', this.model),
-        },
-    ];
+    @service intl;
+
+    get tabs() {
+        const registeredTabs = this.menuService.getMenuItems('fleet-ops:component:contact:details');
+        return [
+            {
+                route: 'management.contacts.index.details.index',
+                label: 'Overview',
+            },
+            ...(isArray(registeredTabs) ? registeredTabs : []),
+        ];
+    }
+
+    get actionButtons() {
+        const buttons = [
+            {
+                icon: 'pencil',
+                fn: () => this.hostRouter.transitionTo('console.fleet-ops.management.contacts.index.edit', this.model),
+            },
+        ];
+
+        const accountActionButton = this.contactActions.accountActionButton(this.model);
+        if (accountActionButton) {
+            buttons.push(accountActionButton);
+        }
+
+        return buttons;
+    }
 }

package/addon/controllers/management/contacts/index.js

@@ -168,19 +168,26 @@ export default class ManagementContactsIndexController extends Controller {
                 actions: [
                     {
                         label: this.intl.t('common.view-resource', { resource: this.intl.t('resource.contact') }),
+                        icon: 'eye',
                         fn: this.contactActions.transition.view,
                         permission: 'fleet-ops view contact',
                     },
                     {
                         label: this.intl.t('common.edit-resource', { resource: this.intl.t('resource.contact') }),
+                        icon: 'pencil',
                         fn: this.contactActions.transition.edit,
                         permission: 'fleet-ops update contact',
                     },
                     {
                         separator: true,
                     },
+                    ...this.contactActions.accountRowActionItems(),
+                    {
+                        separator: true,
+                    },
                     {
                         label: this.intl.t('common.delete-resource', { resource: this.intl.t('resource.contact') }),
+                        icon: 'trash',
                         fn: this.contactActions.delete,
                         permission: 'fleet-ops delete contact',
                     },