@fleetbase/fleetops-engine 0.6.65 → 0.6.66

package/addon/services/inspection-submission-actions.js

@@ -0,0 +1,273 @@
+import ResourceActionService from '@fleetbase/ember-core/services/resource-action';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { PANEL_DEFAULTS, closePanelsThen } from '../utils/context-panel';
+
+export default class InspectionSubmissionActionsService extends ResourceActionService {
+    @service fetch;
+    @service notifications;
+    @service modalsManager;
+    @service intl;
+
+    constructor() {
+        super(...arguments);
+        this.initialize('inspection-submission', {
+            defaultAttributes: {
+                type: 'dvir',
+                status: 'draft',
+                source: 'console',
+                item_results: [],
+            },
+        });
+    }
+
+    transition = {
+        view: (submission) => this.transitionTo('maintenance.inspection-submissions.index.details', submission),
+        edit: (submission) => this.transitionTo('maintenance.inspection-submissions.index.edit', submission),
+        create: () => this.transitionTo('maintenance.inspection-submissions.index.new'),
+    };
+
+    panel = {
+        view: (submission, options = {}) => {
+            const service = this;
+
+            return this.resourceContextPanel.open({
+                submission,
+                title: this.panelTitle(submission),
+                actionButtons: [
+                    { icon: 'edit', permission: 'fleet-ops update inspection-submission', fn: () => closePanelsThen(this.resourceContextPanel, () => this.transition.edit(submission)) },
+                    {
+                        icon: 'ellipsis-h',
+                        iconPrefix: 'fas',
+                        renderInPlace: true,
+                        get items() {
+                            return service.followUpItems(submission, { onDeleted: () => service.resourceContextPanel.closeAll() });
+                        },
+                    },
+                ],
+                tabs: [
+                    { key: 'overview', label: this.intl.t('inspection.record.overview'), component: 'inspection-submission/details' },
+                    { key: 'photos', label: this.intl.t('inspection.record.photos'), component: 'inspection-submission/photos' },
+                    { key: 'audit', label: this.intl.t('inspection.record.audit'), component: 'resource-activity' },
+                ],
+                ...PANEL_DEFAULTS,
+                ...options,
+            });
+        },
+    };
+
+    /** "DVIR inspection" — the heading a submission's details show. */
+    panelTitle(submission) {
+        const formName = submission?.form?.get?.('name') ?? submission?.form?.name ?? submission?.form_name;
+
+        return formName ? this.intl.t('inspection.record.submission-title', { form: formName }) : (submission?.public_id ?? this.intl.t('inspection.record.inspection'));
+    }
+
+    /**
+     * The follow-up menu of a submission, shared by the details route and the
+     * context panel: raise an issue or a work order for failures that have
+     * none, resolve, and delete.
+     */
+    followUpItems(submission, { onDeleted } = {}) {
+        const items = [];
+
+        if (submission?.has_failures && !submission?.issue_uuid) {
+            items.push({
+                text: this.intl.t('inspection.record.create-issue'),
+                icon: 'triangle-exclamation',
+                fn: () => this.createIssue(submission),
+                permission: 'fleet-ops create-issue inspection-submission',
+            });
+        }
+
+        if (submission?.has_failures && !submission?.work_order_uuid) {
+            items.push({
+                text: this.intl.t('inspection.record.create-work-order'),
+                icon: 'clipboard-list',
+                fn: () => this.createWorkOrder(submission),
+                permission: 'fleet-ops create-work-order inspection-submission',
+            });
+        }
+
+        if (submission?.status !== 'resolved') {
+            items.push({ text: this.intl.t('inspection.record.resolve'), icon: 'check', fn: () => this.resolve(submission), permission: 'fleet-ops resolve inspection-submission' });
+        }
+
+        if (items.length) {
+            items.push({ separator: true });
+        }
+
+        items.push({
+            text: this.intl.t('common.delete'),
+            icon: 'trash',
+            class: 'text-red-500',
+            fn: () => this.delete(submission, { onConfirm: onDeleted }),
+            permission: 'fleet-ops delete inspection-submission',
+        });
+
+        return items;
+    }
+
+    /**
+     * The answers filed against a submission, as the resource projects them:
+     * every value beside the field it answers, with `file:<uuid>` references
+     * resolved to something fetchable.
+     *
+     * The `inspection-submission` model belongs to `@fleetbase/fleetops-data`
+     * and declares no `custom_field_values` relationship, so Ember Data drops
+     * the projection; this reads it from the internal payload directly.
+     *
+     * @return {Object} the answers keyed by the field uuid they answer
+     */
+    async loadAnswers(submission) {
+        if (!submission?.id) {
+            return {};
+        }
+
+        const response = await this.fetch.get(`inspection-submissions/${submission.id}`);
+        const record = response?.inspection_submission ?? response?.inspectionSubmission ?? response;
+        const values = Array.isArray(record?.custom_field_values) ? record.custom_field_values : [];
+
+        return values.reduce((carry, value) => {
+            const key = value?.custom_field;
+            if (key) {
+                carry[key] = value.value;
+            }
+
+            return carry;
+        }, {});
+    }
+
+    /**
+     * Writes the answers. `inspection_submission.custom_field_values` is what
+     * `InspectionSubmissionController::syncAnswersFromRequest()` reads, and it
+     * is the same body the driver API accepts — the console and the app write
+     * the same rows, and the server derives the item results from the
+     * pass-fail answers among them.
+     *
+     * @param {Array} rows [{ custom_field, value, value_type }]
+     */
+    async saveAnswers(submission, rows) {
+        if (!submission?.id || !Array.isArray(rows) || rows.length === 0) {
+            return null;
+        }
+
+        return this.fetch.put(`inspection-submissions/${submission.id}`, {
+            inspection_submission: { custom_field_values: rows },
+        });
+    }
+
+    @action submit(submission) {
+        return this.modalsManager.confirm({
+            title: this.intl.t('inspection.follow-up.submit-title'),
+            body: this.intl.t('inspection.follow-up.submit-summary'),
+            acceptButtonText: this.intl.t('inspection.follow-up.submit-accept'),
+            acceptButtonIcon: 'paper-plane',
+            declineButtonText: this.intl.t('inspection.follow-up.cancel'),
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.postAction(submission, 'submit', 'Inspection submitted.');
+                    modal.done();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
+            },
+        });
+    }
+
+    /**
+     * Each of these used to fire on click: the first anyone knew of a new
+     * issue was a toast and an id. They ask first, and say what they are about
+     * to make and from which failed checks.
+     */
+    @action createIssue(submission) {
+        return this.confirmFollowUp(submission, {
+            kind: 'issue',
+            title: this.intl.t('inspection.follow-up.create-issue-title'),
+            summary: this.intl.t('inspection.follow-up.create-issue-summary'),
+            acceptButtonText: this.intl.t('inspection.follow-up.create-issue-accept'),
+            acceptButtonIcon: 'triangle-exclamation',
+            endpoint: 'create-issue',
+            message: 'Issue created from failed inspection items.',
+        });
+    }
+
+    @action createWorkOrder(submission) {
+        return this.confirmFollowUp(submission, {
+            kind: 'work-order',
+            title: this.intl.t('inspection.follow-up.create-work-order-title'),
+            summary: this.intl.t('inspection.follow-up.create-work-order-summary'),
+            acceptButtonText: this.intl.t('inspection.follow-up.create-work-order-accept'),
+            acceptButtonIcon: 'clipboard-list',
+            dueNote: this.dueNoteFor(submission),
+            endpoint: 'create-work-order',
+            message: 'Work order created from failed inspection items.',
+        });
+    }
+
+    @action resolve(submission) {
+        return this.confirmFollowUp(submission, {
+            kind: 'resolve',
+            title: this.intl.t('inspection.follow-up.resolve-title'),
+            summary: this.intl.t('inspection.follow-up.resolve-summary'),
+            acceptButtonText: this.intl.t('inspection.follow-up.resolve-accept'),
+            acceptButtonIcon: 'check',
+            endpoint: 'resolve',
+            message: 'Inspection resolved.',
+        });
+    }
+
+    /** When the work order falls due, which the server takes from the worst failure. */
+    dueNoteFor(submission) {
+        const failures = (submission?.item_results ?? []).filter((item) => item.passed === false);
+        const critical = failures.some((item) => item.severity === 'critical');
+        const due = new Date();
+        due.setDate(due.getDate() + (critical ? 1 : 7));
+
+        return this.intl.t('inspection.follow-up.due-note', { due: due.toLocaleDateString() });
+    }
+
+    confirmFollowUp(submission, { kind, title, summary, acceptButtonText, acceptButtonIcon, dueNote, endpoint, message }) {
+        const failures = (submission?.item_results ?? []).filter((item) => item.passed === false);
+        const nothingToDo = kind !== 'resolve' && failures.length === 0;
+
+        return this.modalsManager.show('modals/inspection-follow-up', {
+            title,
+            summary,
+            submission,
+            kind,
+            dueNote,
+            acceptButtonText,
+            acceptButtonIcon,
+            // Nothing failed: the server would only say so once the request was
+            // already made, which is a strange moment to find out.
+            acceptButtonDisabled: nothingToDo,
+            declineButtonText: this.intl.t('inspection.follow-up.cancel'),
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.postAction(submission, endpoint, message);
+                    modal.done();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
+            },
+        });
+    }
+
+    async postAction(submission, actionName, message) {
+        const response = await this.fetch.post(`inspection-submissions/${submission.id}/${actionName}`);
+
+        // The endpoints answer with what they did, and say so when a submission
+        // had nothing to raise.
+        this.notifications.success(response?.message ?? message);
+        await this.refresh();
+
+        return response;
+    }
+}

package/addon/services/issue-actions.js

@@ -3,6 +3,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { format } from 'date-fns';
 import { issueStatuses } from '../utils/fleet-ops-options';
+import { PANEL_DEFAULTS } from '../utils/context-panel';
 
 export default class IssueActionsService extends ResourceActionService {
     @service driverActions;
@@ -47,15 +48,15 @@ export default class IssueActionsService extends ResourceActionService {
                 issue,
             });
         },
-        view: (issue) => {
+        view: (issue, options = {}) => {
             return this.resourceContextPanel.open({
                 issue,
-                tabs: [
-                    {
-                        label: this.intl.t('common.overview'),
-                        component: 'issue/details',
-                    },
-                ],
+                header: 'issue/panel-header',
+                width: '800px',
+                actionButtons: this.panelActionButtons(issue),
+                tabs: [{ key: 'overview', label: this.intl.t('common.overview'), component: 'issue/details' }],
+                ...PANEL_DEFAULTS,
+                ...options,
             });
         },
     };
@@ -93,6 +94,56 @@ export default class IssueActionsService extends ResourceActionService {
         },
     };
 
+    /**
+     * The header buttons of an issue panel, the same as the issue details
+     * route: edit, then the workflow menu. The menu is read when it renders,
+     * so closing or re-opening the issue swaps the last item.
+     */
+    panelActionButtons(issue) {
+        const service = this;
+        const refresh = () => issue?.reload?.();
+
+        return [
+            {
+                icon: 'pencil',
+                permission: 'fleet-ops update issue',
+                fn: async () => {
+                    await this.resourceContextPanel.closeAll();
+                    this.panel.edit(issue);
+                },
+            },
+            {
+                icon: 'ellipsis',
+                type: 'default',
+                renderInPlace: true,
+                get items() {
+                    return service.workflowItems(issue, refresh);
+                },
+            },
+        ];
+    }
+
+    workflowItems(issue, onSaved) {
+        const items = [
+            { label: 'Change Status', text: 'Change Status', icon: 'arrows-rotate', fn: () => this.openStatusModal(issue, { onSaved }) },
+            { label: 'Assign Issue', text: 'Assign Issue', icon: 'user-check', fn: () => this.openAssignModal(issue, { onSaved }) },
+        ];
+
+        if (this.closedStatuses.includes(issue?.status)) {
+            items.push({ label: 'Re-open Issue', text: 'Re-open Issue', icon: 'rotate-left', fn: () => this.confirmReopenIssue(issue, { onSaved }) });
+        } else {
+            items.push({
+                label: 'Close Issue',
+                text: 'Close Issue',
+                icon: 'circle-check',
+                class: 'text-green-600 dark:text-green-400',
+                fn: () => this.openCloseIssueModal(issue, { onSaved }),
+            });
+        }
+
+        return items;
+    }
+
     get closedStatuses() {
         return ['closed', 'resolved', 'completed'];
     }

package/addon/services/maintenance-actions.js

@@ -1,6 +1,9 @@
-import ResourceActionService from '@fleetbase/ember-core/services/resource-action';
+import ResourceActionService, { inject as service } from '@fleetbase/ember-core/services/resource-action';
+import { PANEL_DEFAULTS, closePanelsThen, registeredPanelTabs } from '../utils/context-panel';
 
 export default class MaintenanceActionsService extends ResourceActionService {
+    @service('universe/menu-service') menuService;
+
     get defaultCurrency() {
         return this.currentUser?.company?.currency || this.currentUser.currency || 'USD';
     }
@@ -39,10 +42,26 @@ export default class MaintenanceActionsService extends ResourceActionService {
                 maintenance,
             });
         },
-        view: (maintenance) => {
+        view: (maintenance, options = {}) => {
             return this.resourceContextPanel.open({
                 maintenance,
-                tabs: [{ label: this.intl.t('common.overview'), component: 'maintenance/details' }],
+                title: maintenance?.summary,
+                header: 'maintenance/panel-header',
+                actionButtons: [
+                    { icon: 'edit', permission: 'fleet-ops update maintenance', fn: () => closePanelsThen(this.resourceContextPanel, () => this.panel.edit(maintenance)) },
+                    {
+                        icon: 'trash',
+                        type: 'danger',
+                        permission: 'fleet-ops delete maintenance',
+                        fn: () => this.delete(maintenance, { onConfirm: () => this.resourceContextPanel.closeAll() }),
+                    },
+                ],
+                tabs: [
+                    { key: 'overview', label: this.intl.t('common.overview'), component: 'maintenance/details' },
+                    ...registeredPanelTabs(this.menuService, 'fleet-ops:component:maintenance:details'),
+                ],
+                ...PANEL_DEFAULTS,
+                ...options,
             });
         },
     };

package/addon/services/maintenance-schedule-actions.js

@@ -1,11 +1,13 @@
 import ResourceActionService from '@fleetbase/ember-core/services/resource-action';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { PANEL_DEFAULTS, closePanelsThen, registeredPanelTabs } from '../utils/context-panel';
 
 export default class MaintenanceScheduleActionsService extends ResourceActionService {
     @service fetch;
     @service notifications;
     @service intl;
+    @service('universe/menu-service') menuService;
 
     constructor() {
         super(...arguments);
@@ -39,15 +41,18 @@ export default class MaintenanceScheduleActionsService extends ResourceActionSer
                 schedule,
             });
         },
-        view: (schedule) => {
+        view: (schedule, options = {}) => {
             return this.resourceContextPanel.open({
                 schedule,
+                title: schedule?.name,
+                actionButtons: this.panelActionButtons(schedule, { onDeleted: () => this.resourceContextPanel.closeAll() }),
                 tabs: [
-                    {
-                        label: this.intl.t('common.overview'),
-                        component: 'maintenance-schedule/details',
-                    },
+                    { key: 'overview', label: this.intl.t('common.overview'), component: 'maintenance-schedule/details' },
+                    { key: 'work-orders', label: this.intl.t('menu.work-orders'), component: 'maintenance-schedule/work-orders' },
+                    ...registeredPanelTabs(this.menuService, 'fleet-ops:component:schedule:details'),
                 ],
+                ...PANEL_DEFAULTS,
+                ...options,
             });
         },
     };
@@ -115,4 +120,64 @@ export default class MaintenanceScheduleActionsService extends ResourceActionSer
             this.notifications.serverError(error);
         }
     }
+
+    /**
+     * The header buttons of a schedule, shared by the details route and the
+     * context panel: edit, trigger a work order now, calendar export, delete.
+     * `onEdit` replaces the panel's edit step where the route navigates.
+     */
+    panelActionButtons(schedule, { onEdit, onDeleted } = {}) {
+        return [
+            {
+                icon: 'edit',
+                permission: 'fleet-ops update maintenance-schedule',
+                fn: () => (onEdit ? onEdit(schedule) : closePanelsThen(this.resourceContextPanel, () => this.panel.edit(schedule))),
+            },
+            { icon: 'play', helpText: 'Trigger Work Order Now', permission: 'fleet-ops update maintenance-schedule', fn: () => this.triggerNow(schedule) },
+            {
+                icon: 'ellipsis-h',
+                iconPrefix: 'fas',
+                renderInPlace: true,
+                items: [
+                    { text: 'Download .ics', icon: 'download', iconPrefix: 'far', fn: () => this.downloadIcal(schedule) },
+                    { text: 'Add to Google Calendar', icon: 'calendar-plus', iconPrefix: 'fab', fn: () => this.addToGoogleCalendar(schedule) },
+                ],
+            },
+            { icon: 'trash', type: 'danger', permission: 'fleet-ops delete maintenance-schedule', fn: () => this.delete(schedule, { onConfirm: onDeleted }) },
+        ];
+    }
+
+    /**
+     * Download the schedule as an iCalendar file.
+     */
+    @action downloadIcal(schedule) {
+        const id = schedule.public_id ?? schedule.id;
+
+        return this.fetch.download(`maintenance-schedules/${id}/ical`, {}, { fileName: `maintenance-schedule-${id}.ics`, mimeType: 'text/calendar' }).catch((error) => {
+            this.notifications.serverError(error);
+        });
+    }
+
+    /**
+     * Open Google Calendar with the schedule's next due date filled in,
+     * repeating on the schedule's time interval when it has one.
+     */
+    @action addToGoogleCalendar(schedule) {
+        const title = encodeURIComponent(schedule.name ?? 'Maintenance Schedule');
+        const dueDate = schedule.next_due_date ? new Date(schedule.next_due_date) : new Date();
+        const pad = (n) => String(n).padStart(2, '0');
+        const dateStr = `${dueDate.getFullYear()}${pad(dueDate.getMonth() + 1)}${pad(dueDate.getDate())}`;
+        const details = encodeURIComponent(schedule.description ?? schedule.instructions ?? '');
+
+        let recur = '';
+        const intervalValue = parseInt(schedule.interval_value, 10);
+        const intervalUnit = schedule.interval_unit;
+        if (intervalValue > 0 && intervalUnit) {
+            const unitMap = { days: 'DAILY', weeks: 'WEEKLY', months: 'MONTHLY', years: 'YEARLY' };
+            recur = `&recur=RRULE:FREQ=${unitMap[intervalUnit] ?? 'DAILY'};INTERVAL=${intervalValue}`;
+        }
+
+        const url = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${dateStr}/${dateStr}&details=${details}${recur}`;
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
 }

package/addon/services/movement-tracker.js

@@ -18,6 +18,8 @@ import { inject as service } from '@ember/service';
 import { getOwner } from '@ember/application';
 import { task, timeout } from 'ember-concurrency';
 import { debug } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+import telemetryTimestamp from '../utils/telemetry-timestamp';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
 import LeafletTrackingMarkerComponent from '../components/leaflet-tracking-marker';
 
@@ -30,12 +32,15 @@ export class EventBuffer {
 
     /** @type {import('./map-manager').default|null} */
     mapManager = null;
+    latestPositionAt = null;
 
     constructor(model, { callback = null, waitTime = 1000 * 3, mapManager = null }) {
         this.model = model;
         this.callback = callback;
         this.waitTime = waitTime;
         this.mapManager = mapManager;
+        const initialPosition = telemetryTimestamp(model?.telematics?.last_event_at);
+        this.latestPositionAt = Number.isFinite(initialPosition) ? initialPosition : null;
     }
 
     /**
@@ -105,6 +110,12 @@ export class EventBuffer {
 
         for (const output of eventsToProcess) {
             const { event, data } = output;
+            if (data?.additionalData?.position_at) {
+                const observedAt = telemetryTimestamp(data.additionalData.position_at);
+                if (!Number.isFinite(observedAt) || (this.latestPositionAt !== null && observedAt < this.latestPositionAt)) continue;
+                this.latestPositionAt = observedAt;
+                this.model?.setProperties?.({ location: data.location, speed: data.speed, heading: data.heading });
+            }
 
             // Resolve marker via adapter (provider-agnostic) or Leaflet fallback
             const markerId = this.#getMarkerId();
@@ -176,10 +187,15 @@ export default class MovementTrackerService extends Service {
 
     @tracked channels = [];
     @tracked buffers = new Map();
+    reconnectConsumer;
 
     constructor() {
         super(...arguments);
         this.registerTrackingMarker();
+        registerDestructor(this, () => {
+            this.reconnectConsumer?.close();
+            this.buffers.forEach((buffer) => buffer.stop());
+        });
     }
 
     #getOwner(owner = null) {
@@ -213,9 +229,14 @@ export default class MovementTrackerService extends Service {
     }
 
     closeChannels() {
+        this.watchReconnect.cancelAll();
+        this.reconnectConsumer?.close();
+        this.buffers.forEach((buffer) => buffer.stop());
+        this.buffers.clear();
         this.channels.forEach((channel) => {
             channel.close();
         });
+        this.channels = [];
     }
 
     watch(models = []) {
@@ -224,9 +245,39 @@ export default class MovementTrackerService extends Service {
         });
     }
 
+    @task *watchReconnect() {
+        this.reconnectConsumer = this.socket.instance().listener('connect').createConsumer();
+        while (true) {
+            const { done } = yield this.reconnectConsumer.next();
+            if (done) break;
+            // Refresh only the visible telemetry assets, with bounded request concurrency.
+            const buffers = [...this.buffers.values()].filter((buffer) => buffer.model?.telematics?.last_event_at && typeof buffer.model?.reload === 'function');
+            for (let i = 0; i < buffers.length; i += 5) {
+                yield Promise.allSettled(
+                    buffers.slice(i, i + 5).map(async (buffer) => {
+                        const model = await buffer.model.reload();
+                        buffer.clear();
+                        buffer.add({
+                            event: `${getModelName(model)}.location_changed`,
+                            created_at: new Date().toISOString(),
+                            data: {
+                                id: model.id,
+                                location: model.location,
+                                speed: model.speed,
+                                heading: model.heading,
+                                additionalData: { position_at: model.telematics?.last_event_at },
+                            },
+                        });
+                    })
+                );
+            }
+        }
+    }
+
     async track(model, options = {}) {
         // Create socket instance
         const socket = this.socket.instance();
+        if (this.watchReconnect.isIdle) this.watchReconnect.perform();
 
         // Get model type and identifier
         const type = getModelName(model);
@@ -246,7 +297,7 @@ export default class MovementTrackerService extends Service {
         this.channels = [...this.channels, channel];
 
         // Listen to the channel for events
-        await channel.listener('subscribe').once();
+        if (channel.state !== 'subscribed') await channel.listener('subscribe').once();
 
         // Create event buffer for tracking model
         const eventBuffer = this.#getBuffer(channelId, model, options);

package/addon/services/part-actions.js

@@ -1,6 +1,9 @@
-import ResourceActionService from '@fleetbase/ember-core/services/resource-action';
+import ResourceActionService, { inject as service } from '@fleetbase/ember-core/services/resource-action';
+import { PANEL_DEFAULTS, closePanelsThen, registeredPanelTabs } from '../utils/context-panel';
 
 export default class PartActionsService extends ResourceActionService {
+    @service('universe/menu-service') menuService;
+
     get defaultCurrency() {
         return this.currentUser?.company?.currency || this.currentUser.currency || 'USD';
     }
@@ -41,15 +44,18 @@ export default class PartActionsService extends ResourceActionService {
                 part,
             });
         },
-        view: (part) => {
+        view: (part, options = {}) => {
             return this.resourceContextPanel.open({
                 part,
-                tabs: [
-                    {
-                        label: this.intl.t('common.overview'),
-                        component: 'part/details',
-                    },
+                title: part?.name,
+                header: 'part/panel-header',
+                actionButtons: [
+                    { icon: 'edit', permission: 'fleet-ops update part', fn: () => closePanelsThen(this.resourceContextPanel, () => this.panel.edit(part)) },
+                    { icon: 'trash', type: 'danger', permission: 'fleet-ops delete part', fn: () => this.delete(part, { onConfirm: () => this.resourceContextPanel.closeAll() }) },
                 ],
+                tabs: [{ key: 'overview', label: this.intl.t('common.overview'), component: 'part/details' }, ...registeredPanelTabs(this.menuService, 'fleet-ops:component:part:details')],
+                ...PANEL_DEFAULTS,
+                ...options,
             });
         },
     };