@fleetbase/fleetops-engine 0.6.49 → 0.6.51

package/addon/components/service-rate/form.hbs

@@ -10,7 +10,7 @@
                 @disabled={{cannot-write @resource}}
             />
 
-            <InputGroup @name={{t "service-rate.fields.service-order-label"}} @helpText={{t "service-rate.fields.service-order-help-text"}}>
+            <InputGroup @name={{t "service-rate.fields.service-order-label"}} @helpText={{t "service-rate.fields.service-order-help-text"}} @required={{true}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{this.orderConfigActions.allOrderConfigs}}
@@ -209,6 +209,124 @@
                 </div>
             </div>
         </ContentPanel>
+    {{else if @resource.isMultiZoneDistance}}
+        <ContentPanel @title="Multi-zone Distance" @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="px-0i">
+            <div class="px-2 mb-3">
+                <InfoBlock
+                    class="mb-3"
+                    @text="Price route distance across multiple service areas or zones. Priority controls overlap: if a route segment matches more than one rule, the highest-priority rule is used. Unmatched distance can use a fallback rule."
+                    @exampleText="Main City: 2.50 per km, Remote Area: 3.75 per km, Fallback: 3.75 per km."
+                />
+
+                <div class="flex flex-row items-center space-x-2">
+                    <Button @text="Add Rule" @icon="plus" @iconPrefix="fas" @onClick={{@resource.addMultiZoneDistanceRule}} />
+                    <Button @text="Add Fallback" @icon="route" @iconPrefix="fas" @onClick={{@resource.addMultiZoneDistanceFallbackRule}} />
+                </div>
+            </div>
+
+            <div class="overflow-x-auto">
+                <div class="next-table-wrapper h-auto table-fluid rounded-none">
+                    <table class="table table-fixed">
+                        <thead>
+                            <tr>
+                                <th class="w-1/6">Label</th>
+                                <th class="w-1/6">Geography Type</th>
+                                <th class="w-1/5">Geography</th>
+                                <th class="w-1/12">Priority</th>
+                                <th class="w-1/6">Rate</th>
+                                <th class="w-1/6">Unit</th>
+                                <th class="w-12"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {{#each @resource.rateFees as |rateFee|}}
+                                <tr>
+                                    <td>
+                                        <Input @value={{rateFee.label}} placeholder="Rule label" disabled={{cannot-write @resource}} class="form-input w-full" />
+                                    </td>
+                                    <td>
+                                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                                            <PowerSelect
+                                                @options={{this.geographyTypes}}
+                                                @selected={{find-by "value" rateFee.geography_type this.geographyTypes}}
+                                                @onChange={{fn this.selectRuleGeographyType rateFee}}
+                                                @placeholder="Geography type"
+                                                @triggerClass="form-select form-input"
+                                                @disabled={{cannot-write @resource}}
+                                                as |type|
+                                            >
+                                                {{type.label}}
+                                            </PowerSelect>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        {{#if (eq rateFee.geography_type "zone")}}
+                                            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                                                <PowerSelect
+                                                    @options={{this.zones}}
+                                                    @selected={{rateFee.zone}}
+                                                    @onChange={{fn this.selectRuleZone rateFee}}
+                                                    @placeholder="Select zone"
+                                                    @triggerClass="form-select form-input"
+                                                    @disabled={{cannot-write @resource}}
+                                                    as |zone|
+                                                >
+                                                    {{zone.name}}
+                                                </PowerSelect>
+                                            </div>
+                                        {{else if (eq rateFee.geography_type "fallback")}}
+                                            <div class="text-sm text-gray-500 dark:text-gray-400">Unmatched route distance</div>
+                                        {{else}}
+                                            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                                                <PowerSelect
+                                                    @options={{this.serviceAreas}}
+                                                    @selected={{rateFee.service_area}}
+                                                    @onChange={{fn this.selectRuleServiceArea rateFee}}
+                                                    @placeholder="Select service area"
+                                                    @triggerClass="form-select form-input"
+                                                    @disabled={{cannot-write @resource}}
+                                                    as |serviceArea|
+                                                >
+                                                    {{serviceArea.name}}
+                                                </PowerSelect>
+                                            </div>
+                                        {{/if}}
+                                    </td>
+                                    <td>
+                                        <Input @type="number" @value={{rateFee.priority}} placeholder="0" disabled={{cannot-write @resource}} class="form-input w-full" />
+                                    </td>
+                                    <td>
+                                        <MoneyInput class="w-full" @currency={{@resource.currency}} @value={{rateFee.fee}} disabled={{cannot-write @resource}} />
+                                    </td>
+                                    <td>
+                                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                                            <PowerSelect
+                                                @options={{get-fleet-ops-options "distanceUnits"}}
+                                                @selected={{find-by "value" rateFee.distance_unit (get-fleet-ops-options "distanceUnits")}}
+                                                @onChange={{set-model-attr rateFee "distance_unit"}}
+                                                @placeholder="Distance unit"
+                                                @triggerClass="form-select form-input"
+                                                @disabled={{cannot-write @resource}}
+                                                as |unit|
+                                            >
+                                                {{unit.label}}
+                                            </PowerSelect>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <Button @type="danger" @icon="trash" @onClick={{fn @resource.removeMultiZoneDistanceRule rateFee}} />
+                                    </td>
+                                </tr>
+                            {{else}}
+                                <tr>
+                                    <td colspan="7" class="text-center text-gray-500 italic">No geographic pricing rules defined</td>
+                                </tr>
+                            {{/each}}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </ContentPanel>
     {{else if @resource.isPerMeter}}
         <ContentPanel @title={{t "service-rate.fields.per-meter"}} @open={{true}} @wrapperClass="bordered-top">
             <InfoBlock class="mb-5" @text={{t "service-rate.fields.per-meter-text"}} @exampleText={{t "service-rate.fields.per-meter-example-text"}} />

package/addon/components/service-rate/form.js

@@ -4,11 +4,29 @@ import { action } from '@ember/object';
 
 export default class ServiceRateFormComponent extends Component {
     @service orderConfigActions;
+    @service serviceAreaActions;
     @service serviceRateActions;
 
     constructor() {
         super(...arguments);
         this.orderConfigActions.loadAll.perform();
+        this.serviceAreaActions.loadAll.perform();
+    }
+
+    get serviceAreas() {
+        return this.serviceAreaActions.serviceAreas ?? [];
+    }
+
+    get zones() {
+        return Array.from(this.serviceAreas).flatMap((serviceArea) => serviceArea.zones?.toArray?.() ?? serviceArea.zones ?? []);
+    }
+
+    get geographyTypes() {
+        return [
+            { label: 'Service Area', value: 'service_area' },
+            { label: 'Zone', value: 'zone' },
+            { label: 'Fallback', value: 'fallback' },
+        ];
     }
 
     @action selectOrderConfig(orderConfig) {
@@ -24,10 +42,51 @@ export default class ServiceRateFormComponent extends Component {
             this.args.resource.resetPerDropFees();
         } else if (rateCalculationMethod === 'fixed_meter' || rateCalculationMethod === 'fixed_rate') {
             this.serviceRateActions.generateFixedRateFees(this.args.resource);
+        } else if (rateCalculationMethod === 'multi_zone_distance' && !this.args.resource.rateFees.length) {
+            this.args.resource.addMultiZoneDistanceRule();
+            this.args.resource.addMultiZoneDistanceFallbackRule();
         }
     }
 
     @action onMaxDistanceChange() {
         this.serviceRateActions.generateFixedRateFees(this.args.resource);
     }
+
+    @action selectRuleGeographyType(rule, { value }) {
+        rule.set('selected_geography_type', value);
+        rule.set('zone', null);
+        rule.set('zone_uuid', null);
+        rule.set('service_area', null);
+        rule.set('service_area_uuid', null);
+        rule.set('is_fallback', value === 'fallback');
+    }
+
+    @action selectRuleServiceArea(rule, serviceArea) {
+        rule.set('selected_geography_type', 'service_area');
+        rule.set('service_area', serviceArea);
+        rule.set('service_area_uuid', serviceArea?.id);
+        rule.set('zone', null);
+        rule.set('zone_uuid', null);
+        rule.set('is_fallback', false);
+    }
+
+    @action selectRuleZone(rule, zone) {
+        rule.set('selected_geography_type', 'zone');
+        rule.set('zone', zone);
+        rule.set('zone_uuid', zone?.id);
+        rule.set('service_area', null);
+        rule.set('service_area_uuid', null);
+        rule.set('is_fallback', false);
+    }
+
+    @action setRuleFallback(rule, isFallback) {
+        rule.set('is_fallback', Boolean(isFallback));
+        if (isFallback) {
+            rule.set('selected_geography_type', 'fallback');
+            rule.set('zone', null);
+            rule.set('zone_uuid', null);
+            rule.set('service_area', null);
+            rule.set('service_area_uuid', null);
+        }
+    }
 }

package/addon/components/vehicle/form.js

@@ -10,7 +10,7 @@ export default class VehicleFormComponent extends Component {
     @service currentUser;
     @service notifications;
     @service modalsManager;
-    @tracked statusOptions = ['active', 'pending'];
+    @tracked statusOptions = ['available', 'pending'];
 
     @action updateAvatarUrl(option) {
         this.args.resource.avatar_url = option.key === 'custom_avatar' ? option.value : [option.value];

package/addon/components/vehicle/pill.hbs

@@ -20,7 +20,7 @@
     <:tooltip>
         <div>
             <div class="text-xs font-semibold">{{this.resource.name this.resource.yearMakeModel}}</div>
-            <div class="text-xs">{{t "this.resource.driver"}}: {{n-a this.resource.driver_name}}</div>
+            <div class="text-xs">{{t "resource.driver"}}: {{n-a this.resource.driver_name}}</div>
             <div class="text-xs">
                 <span>{{t "common.status"}}:</span>
                 <span class="{{if this.resource.online 'text-green-500' 'text-red-400'}}">

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>