@fleetbase/fleetops-engine 0.6.38 → 0.6.39

package/addon/components/maintenance/form.js

@@ -1,18 +1,143 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+/**
+ * Maps a polymorphic type value to the Ember Data model name used by ModelSelect.
+ */
+const TYPE_TO_MODEL = {
+    'fleet-ops:vehicle': 'vehicle',
+    'fleet-ops:driver': 'driver',
+    'fleet-ops:equipment': 'equipment',
+    'fleet-ops:vendor': 'vendor',
+    'Auth:User': 'user',
+};
+
+/**
+ * Maps a concrete Ember Data model name back to the backend polymorphic type string.
+ * Used to restore the type selector when editing an existing record that has a
+ * loaded @belongsTo('maintenance-subject', {polymorphic: true}) relationship.
+ */
+const MAINTAINABLE_MODEL_TO_TYPE = {
+    'maintenance-subject-vehicle': 'fleet-ops:vehicle',
+    'maintenance-subject-equipment': 'fleet-ops:equipment',
+    // Fall-through for raw models passed from vehicle-actions.js
+    vehicle: 'fleet-ops:vehicle',
+    equipment: 'fleet-ops:equipment',
+};
+
+/**
+ * Maps a concrete Ember Data model name back to the backend polymorphic type string
+ * for the performed_by relationship.
+ */
+const PERFORMED_BY_MODEL_TO_TYPE = {
+    'facilitator-vendor': 'fleet-ops:vendor',
+    'facilitator-contact': 'fleet-ops:contact',
+    'facilitator-integrated-vendor': 'fleet-ops:vendor',
+    vendor: 'fleet-ops:vendor',
+    driver: 'fleet-ops:driver',
+    user: 'Auth:User',
+};
 
 export default class MaintenanceFormComponent extends Component {
+    /** Maintenance type options — the category of maintenance activity. */
+    maintenanceTypeOptions = ['preventive', 'corrective', 'predictive', 'routine', 'emergency', 'inspection', 'repair', 'replacement', 'calibration'];
+
+    /** Status options for a maintenance record. */
+    statusOptions = ['scheduled', 'in_progress', 'completed', 'cancelled', 'on_hold'];
+
+    /** Priority options for a maintenance record. */
+    priorityOptions = ['low', 'medium', 'high', 'critical'];
+
     /**
-     * Maintenance type options
+     * Polymorphic maintainable type options — the asset being maintained.
+     * Uses label/value objects so the PowerSelect trigger shows a human-readable
+     * label instead of the raw model type string.
      */
-    maintenanceTypeOptions = ['preventive', 'corrective', 'predictive', 'routine', 'emergency', 'inspection', 'repair', 'replacement', 'calibration'];
+    maintainableTypeOptions = [
+        { value: 'fleet-ops:vehicle', label: 'Vehicle' },
+        { value: 'fleet-ops:equipment', label: 'Equipment' },
+    ];
 
     /**
-     * Status options for maintenance
+     * Polymorphic performed-by type options — who carried out the maintenance.
+     * Uses label/value objects so the PowerSelect trigger shows a human-readable
+     * label instead of the raw model type string.
      */
-    statusOptions = ['scheduled', 'in_progress', 'completed', 'cancelled', 'on_hold'];
+    performedByTypeOptions = [
+        { value: 'fleet-ops:vendor', label: 'Vendor' },
+        { value: 'fleet-ops:driver', label: 'Driver' },
+        { value: 'Auth:User', label: 'User' },
+    ];
+
+    /** The currently selected maintainable type option object. */
+    @tracked selectedMaintainableType = null;
+
+    /** The currently selected performed-by type option object. */
+    @tracked selectedPerformedByType = null;
+
+    /** Derived Ember Data model name for the currently selected maintainable type. */
+    @tracked maintainableModelName = null;
+
+    /** Derived Ember Data model name for the currently selected performed-by type. */
+    @tracked performedByModelName = null;
+
+    constructor(owner, args) {
+        super(owner, args);
+        const { resource } = args;
+        // Restore maintainable type selection from the polymorphic relationship.
+        // When editing an existing record, resource.maintainable is a loaded MaintenanceSubject model.
+        // When creating from vehicle-actions.js, resource.maintainable may be a raw vehicle/equipment model.
+        const maintainable = resource?.maintainable;
+        if (maintainable) {
+            const modelName = maintainable.constructor?.modelName ?? maintainable.modelName;
+            const typeValue = MAINTAINABLE_MODEL_TO_TYPE[modelName] ?? null;
+            if (typeValue) {
+                this.selectedMaintainableType = this.maintainableTypeOptions.find((o) => o.value === typeValue) ?? null;
+                this.maintainableModelName = TYPE_TO_MODEL[typeValue] ?? null;
+            }
+        }
+        // Restore performed_by type selection from the polymorphic relationship.
+        const performedBy = resource?.performed_by;
+        if (performedBy) {
+            const modelName = performedBy.constructor?.modelName ?? performedBy.modelName;
+            const typeValue = PERFORMED_BY_MODEL_TO_TYPE[modelName] ?? null;
+            if (typeValue) {
+                this.selectedPerformedByType = this.performedByTypeOptions.find((o) => o.value === typeValue) ?? null;
+                this.performedByModelName = TYPE_TO_MODEL[typeValue] ?? null;
+            }
+        }
+    }
 
     /**
-     * Priority options
+     * Handles a change to the maintainable type selector. Resets the
+     * maintainable relationship so a stale association is not persisted.
      */
-    priorityOptions = ['low', 'medium', 'high', 'critical'];
+    @action onMaintainableTypeChange(option) {
+        this.selectedMaintainableType = option;
+        // Clear the maintainable relationship — user must re-select the asset
+        this.args.resource.maintainable = null;
+        this.maintainableModelName = TYPE_TO_MODEL[option?.value] ?? null;
+    }
+
+    /** Assigns the selected maintainable model to the resource. */
+    @action assignMaintainable(model) {
+        this.args.resource.maintainable = model;
+    }
+
+    /**
+     * Handles a change to the performed-by type selector. Resets the
+     * performed-by relationship so a stale association is not persisted.
+     */
+    @action onPerformedByTypeChange(option) {
+        this.selectedPerformedByType = option;
+        // Clear the performed_by relationship — user must re-select
+        this.args.resource.performed_by = null;
+        this.performedByModelName = TYPE_TO_MODEL[option?.value] ?? null;
+    }
+
+    /** Assigns the selected performer model to the resource. */
+    @action assignPerformedBy(model) {
+        this.args.resource.performed_by = model;
+    }
 }

package/addon/components/maintenance/panel-header.hbs

@@ -0,0 +1,31 @@
+<div class="px-4 py-2">
+    <div class="flex flex-1 flex-row items-start justify-between">
+        <div class="flex flex-col">
+            <div class="flex flex-row items-center space-x-2">
+                <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{n-a @resource.summary}}</h1>
+                <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
+            </div>
+            <div class="flex flex-row space-x-3 mt-1">
+                <div class="text-xs text-gray-400 dark:text-gray-500">{{smart-humanize @resource.type}}</div>
+                {{#if @resource.priority}}
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{t "column.priority"}}: {{smart-humanize @resource.priority}}</div>
+                {{/if}}
+                {{#if @resource.scheduled_at}}
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{t "column.scheduled-at"}}: {{format-date @resource.scheduled_at}}</div>
+                {{/if}}
+            </div>
+        </div>
+        <div class="next-view-header-right">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            />
+        </div>
+    </div>
+</div>

package/addon/components/maintenance/panel-header.js

@@ -0,0 +1,2 @@
+import Component from '@glimmer/component';
+export default class MaintenancePanelHeaderComponent extends Component {}

package/addon/components/maintenance-schedule/details.hbs

@@ -0,0 +1,260 @@
+<div class="next-content-panel-wrapper" ...attributes>
+
+    {{! ===== OVERVIEW ===== }}
+    <ContentPanel @title="Overview" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+
+            {{! — Identity — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Identity
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">ID</div>
+                <ClickToCopy @value={{@resource.public_id}} class="field-value font-mono">{{n-a @resource.public_id}}</ClickToCopy>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Name</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Type</div>
+                <div class="field-value">{{n-a (smart-humanize @resource.type)}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Status</div>
+                <div class="field-value">
+                    <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
+                </div>
+            </div>
+
+            {{! — Assignment — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Assignment
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Asset</div>
+                <div class="field-value">{{n-a (or @resource.subject.displayName @resource.subject.name @resource.subject_name)}}</div>
+            </div>
+            {{#if (or @resource.default_assignee.displayName @resource.default_assignee.name)}}
+                <div class="field-info-container">
+                    <div class="field-name">Default Assignee</div>
+                    <div class="field-value">{{n-a (or @resource.default_assignee.displayName @resource.default_assignee.name)}}</div>
+                </div>
+            {{/if}}
+            <div class="field-info-container">
+                <div class="field-name">Default Priority</div>
+                <div class="field-value">
+                    {{#if (eq @resource.default_priority "critical")}}
+                        <Badge @status="danger">Critical</Badge>
+                    {{else if (eq @resource.default_priority "high")}}
+                        <Badge @status="warning">High</Badge>
+                    {{else if (eq @resource.default_priority "medium")}}
+                        <Badge @status="info">Medium</Badge>
+                    {{else}}
+                        <Badge @status="default">Low</Badge>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    {{! ===== INTERVAL TRIGGERS ===== }}
+    <ContentPanel @title="Interval Triggers" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+
+            {{#if @resource.interval_value}}
+                <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                    Time-Based
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Repeat Every</div>
+                    <div class="field-value">{{@resource.interval_value}} {{@resource.interval_unit}}</div>
+                </div>
+            {{/if}}
+
+            {{#if @resource.interval_distance}}
+                <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                    Distance-Based
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Every (km)</div>
+                    <div class="field-value">{{@resource.interval_distance}} km</div>
+                </div>
+            {{/if}}
+
+            {{#if @resource.interval_engine_hours}}
+                <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                    Engine Hours-Based
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Every (hours)</div>
+                    <div class="field-value">{{@resource.interval_engine_hours}} hrs</div>
+                </div>
+            {{/if}}
+        </div>
+    </ContentPanel>
+
+    {{! ===== SERVICE HISTORY & NEXT DUE ===== }}
+    <ContentPanel @title="Service History & Next Due" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Last Service
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Last Service Date</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.last_service_date "dd MMM yyyy")}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Last Odometer</div>
+                <div class="field-value">
+                    {{#if @resource.last_service_odometer}}
+                        {{@resource.last_service_odometer}}
+                        km
+                    {{else}}
+                        —
+                    {{/if}}
+                </div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Last Engine Hours</div>
+                <div class="field-value">{{n-a @resource.last_service_engine_hours}}</div>
+            </div>
+
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Next Due
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Next Due Date</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.next_due_date "dd MMM yyyy")}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Next Due Odometer</div>
+                <div class="field-value">
+                    {{#if @resource.next_due_odometer}}
+                        {{@resource.next_due_odometer}}
+                        km
+                    {{else}}
+                        —
+                    {{/if}}
+                </div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Next Due Engine Hours</div>
+                <div class="field-value">{{n-a @resource.next_due_engine_hours}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    {{! ===== INSTRUCTIONS ===== }}
+    {{#if @resource.instructions}}
+        <ContentPanel @title="Instructions" @open={{false}} @wrapperClass="bordered-top">
+            <div class="text-xs text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
+                {{@resource.instructions}}
+            </div>
+        </ContentPanel>
+    {{/if}}
+
+    {{! ===== UPCOMING SCHEDULE CALENDAR (time-based only) ===== }}
+    {{#if this.isTimeBased}}
+        <ContentPanel @title="Upcoming Schedule" @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="px-0i">
+            {{! Calendar header }}
+            <div class="flex items-center justify-between px-6 pb-2">
+                <button type="button" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400" {{on "click" this.prevMonth}}>
+                    <FaIcon @icon="chevron-left" @size="xs" />
+                </button>
+                <span class="text-xs font-semibold text-gray-700 dark:text-gray-200">{{this.calendarMonthName}}</span>
+                <button type="button" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400" {{on "click" this.nextMonth}}>
+                    <FaIcon @icon="chevron-right" @size="xs" />
+                </button>
+            </div>
+
+            {{! Day-of-week header row }}
+            <div class="grid grid-cols-7 text-center pb-1">
+                {{#each this.dayNames as |dayName|}}
+                    <div class="text-xs font-medium text-gray-400 dark:text-gray-500 py-1">{{dayName}}</div>
+                {{/each}}
+            </div>
+
+            {{! Calendar grid }}
+            <div class="pb-4">
+                {{#each this.calendarWeeks as |week|}}
+                    <div class="grid grid-cols-7 text-center">
+                        {{#each week as |cell|}}
+                            <div class="py-1">
+                                <span
+                                    class="inline-flex items-center justify-center w-6 h-6 rounded-full text-xs
+                                        {{if cell.isScheduled 'bg-blue-500 text-white font-semibold'}}
+                                        {{if cell.isToday (if cell.isScheduled 'ring-2 ring-offset-1 ring-blue-400' 'ring-2 ring-blue-400 text-blue-600 dark:text-blue-400 font-semibold')}}
+                                        {{unless cell.isCurrentMonth 'text-gray-300 dark:text-gray-600'}}
+                                        "
+                                >
+                                    {{cell.day}}
+                                </span>
+                            </div>
+                        {{/each}}
+                    </div>
+                {{/each}}
+            </div>
+
+            {{! Legend }}
+            <div class="flex items-center gap-4 px-3 py-2 border-t border-gray-100 dark:border-gray-700">
+                <div class="flex items-center gap-1.5">
+                    <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-500 text-white text-xs">1</span>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">Scheduled service</span>
+                </div>
+                <div class="flex items-center gap-1.5">
+                    <span class="inline-flex items-center justify-center w-5 h-5 rounded-full ring-2 ring-blue-400 text-xs text-blue-600">1</span>
+                    <span class="text-xs text-gray-500 dark:text-gray-400">Today</span>
+                </div>
+            </div>
+
+            {{! Upcoming occurrences list }}
+            {{#if this.upcomingOccurrences.length}}
+                <div class="px-3 pb-3 pt-1 border-t border-gray-100 dark:border-gray-700">
+                    <div class="py-2">
+                        <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Next occurrences</p>
+                    </div>
+                    <div class="space-y-1 pl-4">
+                        {{#each this.upcomingOccurrences as |occurrence index|}}
+                            <div class="flex items-center gap-2">
+                                <span
+                                    class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 text-xs font-semibold flex-shrink-0"
+                                >
+                                    {{add index 1}}
+                                </span>
+                                <span class="text-xs text-gray-700 dark:text-gray-200">
+                                    {{format-date-fns occurrence "EEEE, MMMM d, yyyy"}}
+                                </span>
+                            </div>
+                        {{/each}}
+                    </div>
+                </div>
+            {{/if}}
+        </ContentPanel>
+    {{/if}}
+
+    {{! ===== REMINDER OFFSETS ===== }}
+    {{#if @resource.reminder_offsets.length}}
+        <ContentPanel @title="Reminder Emails" @open={{true}} @wrapperClass="bordered-top">
+            <div class="text-xs text-gray-700 dark:text-gray-300">
+                <p class="mb-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold">
+                    The default assignee will receive email reminders at:
+                </p>
+                <div class="flex flex-wrap gap-1">
+                    {{#each @resource.reminder_offsets as |offset|}}
+                        <span class="inline-flex items-center bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs px-2 py-0.5 rounded">
+                            {{offset}}
+                            days before
+                        </span>
+                    {{/each}}
+                </div>
+            </div>
+        </ContentPanel>
+    {{/if}}
+
+    {{! ===== CUSTOM FIELDS ===== }}
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+
+    <Spacer @height="200px" />
+</div>

package/addon/components/maintenance-schedule/details.js

@@ -0,0 +1,158 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+/**
+ * Compute the next N occurrences of a time-based maintenance schedule
+ * starting from the given `nextDueDate`, stepping by `intervalValue` `intervalUnit`.
+ */
+function computeOccurrences(nextDueDate, intervalValue, intervalUnit, count = 12) {
+    if (!nextDueDate || !intervalValue || !intervalUnit) return [];
+    const occurrences = [];
+    let cursor = new Date(nextDueDate);
+    for (let i = 0; i < count; i++) {
+        occurrences.push(new Date(cursor));
+        switch (intervalUnit) {
+            case 'days':
+                cursor.setDate(cursor.getDate() + intervalValue);
+                break;
+            case 'weeks':
+                cursor.setDate(cursor.getDate() + intervalValue * 7);
+                break;
+            case 'months':
+                cursor.setMonth(cursor.getMonth() + intervalValue);
+                break;
+            case 'years':
+                cursor.setFullYear(cursor.getFullYear() + intervalValue);
+                break;
+            default:
+                cursor.setDate(cursor.getDate() + intervalValue);
+        }
+    }
+    return occurrences;
+}
+
+/**
+ * Build a 6-week calendar grid for a given year/month.
+ * Each cell: { date, day, isCurrentMonth, isToday, isScheduled }
+ */
+function buildCalendarGrid(year, month, scheduledDates) {
+    const scheduledSet = new Set(scheduledDates.map((d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`));
+    const today = new Date();
+    const todayKey = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+    const firstDay = new Date(year, month, 1);
+    const cursor = new Date(year, month, 1 - firstDay.getDay());
+    const weeks = [];
+    for (let w = 0; w < 6; w++) {
+        const week = [];
+        for (let d = 0; d < 7; d++) {
+            const date = new Date(cursor);
+            const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+            week.push({ date, day: date.getDate(), isCurrentMonth: date.getMonth() === month, isToday: key === todayKey, isScheduled: scheduledSet.has(key) });
+            cursor.setDate(cursor.getDate() + 1);
+        }
+        weeks.push(week);
+    }
+    return weeks;
+}
+
+const MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+export default class MaintenanceScheduleDetailsComponent extends Component {
+    @service fetch;
+    @tracked calendarYear;
+    @tracked calendarMonth;
+
+    constructor() {
+        super(...arguments);
+        const seed = this.args.resource?.next_due_date ? new Date(this.args.resource.next_due_date) : new Date();
+        this.calendarYear = seed.getFullYear();
+        this.calendarMonth = seed.getMonth();
+    }
+
+    get resource() {
+        return this.args.resource;
+    }
+
+    get occurrences() {
+        const r = this.resource;
+        if (!r) return [];
+        return computeOccurrences(r.next_due_date, r.interval_value, r.interval_unit, 12);
+    }
+
+    get calendarMonthName() {
+        return `${MONTH_NAMES[this.calendarMonth]} ${this.calendarYear}`;
+    }
+    get dayNames() {
+        return DAY_NAMES;
+    }
+
+    get calendarWeeks() {
+        return buildCalendarGrid(this.calendarYear, this.calendarMonth, this.occurrences);
+    }
+
+    get upcomingOccurrences() {
+        const now = new Date();
+        return this.occurrences.filter((d) => d >= now).slice(0, 6);
+    }
+
+    get isTimeBased() {
+        const m = this.resource?.interval_method;
+        return !m || m === 'time';
+    }
+
+    @action prevMonth() {
+        if (this.calendarMonth === 0) {
+            this.calendarMonth = 11;
+            this.calendarYear = this.calendarYear - 1;
+        } else {
+            this.calendarMonth = this.calendarMonth - 1;
+        }
+    }
+
+    @action nextMonth() {
+        if (this.calendarMonth === 11) {
+            this.calendarMonth = 0;
+            this.calendarYear = this.calendarYear + 1;
+        } else {
+            this.calendarMonth = this.calendarMonth + 1;
+        }
+    }
+
+    /**
+     * Trigger a browser download of the .ics file for this schedule.
+     * Uses fetch.download() which automatically attaches auth headers and
+     * reads the Content-Disposition / Content-Type from the response.
+     */
+    @action downloadIcal(schedule) {
+        const id = schedule.public_id ?? schedule.id;
+        this.fetch
+            .download(
+                `maintenance-schedules/${id}/ical`,
+                {},
+                {
+                    fileName: `maintenance-schedule-${id}.ics`,
+                    mimeType: 'text/calendar',
+                }
+            )
+            .catch((error) => {
+                // eslint-disable-next-line no-console
+                console.error('Failed to download iCal:', error);
+            });
+    }
+
+    /**
+     * Open the Google Calendar "add event" URL for this schedule's next due date.
+     */
+    @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 ?? '');
+        const url = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${dateStr}/${dateStr}&details=${details}`;
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
+}