@fleetbase/fleetops-engine 0.6.38 → 0.6.40

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');
+    }
+}