@fleetbase/fleetops-engine 0.6.64 → 0.6.66

package/addon/components/purchase-rate/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @purchaseRate @resource)}}
+    @resourceType="purchase-rate"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/purchase-rate/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @purchaseRate @resource)}} @resourceType="purchase-rate" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/radar/agenda/entry.hbs

@@ -0,0 +1,17 @@
+<button
+    type="button"
+    class="fleet-ops-radar-agenda-entry is-{{@entry.severity}} {{if @compact 'is-compact'}} {{if @entry.planned 'is-planned'}} {{if @positioned 'is-positioned'}}"
+    style={{if @positioned this.leftStyle}}
+    draggable={{if @draggable "true" "false"}}
+    title={{@entry.title}}
+    {{on "click" this.open}}
+    {{on "dragstart" this.dragStart}}
+    data-test-radar-agenda-entry={{@entry.key}}
+>
+    <span class="fleet-ops-radar-severity is-{{@entry.severity}}"></span>
+    {{#if @entry.subject}}<strong>{{@entry.subject.label}}</strong>{{/if}}
+    <span class="fleet-ops-radar-agenda-entry-title">{{@entry.title}}</span>
+    {{#if @entry.label}}<span class="fleet-ops-radar-agenda-entry-time">{{@entry.label}}</span>{{/if}}
+    {{#if @entry.planned}}<FaIcon @icon="calendar-check" class="ml-1" />{{/if}}
+    {{#if @draggable}}<FaIcon @icon="grip-vertical" class="fleet-ops-radar-agenda-grip" />{{/if}}
+</button>

package/addon/components/radar/agenda/entry.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+
+export default class RadarAgendaEntryComponent extends Component {
+    get leftStyle() {
+        return htmlSafe(`left: ${Math.max(0, Math.min(96, Number(this.args.entry?.pct) || 0))}%`);
+    }
+
+    @action open() {
+        const entry = this.args.entry;
+        if (entry?.rule === 'shift_handover' && this.args.onHandover) {
+            return this.args.onHandover(entry.key);
+        }
+
+        return this.args.onOpen?.(entry);
+    }
+
+    @action dragStart(event) {
+        if (!this.args.draggable) {
+            return;
+        }
+        event.dataTransfer?.setData('text/radar-key', this.args.entry.key);
+        event.dataTransfer.effectAllowed = 'move';
+    }
+}

package/addon/components/radar/agenda/lane.hbs

@@ -0,0 +1,33 @@
+<div class="fleet-ops-radar-agenda-lane is-{{@lane.key}} {{if this.isOver 'is-drop-target'}}" data-test-radar-agenda-lane={{@lane.key}}>
+    <div class="fleet-ops-radar-agenda-lane-label">
+        <span>{{@lane.label}}</span>
+        <span class="fleet-ops-radar-row-meta">{{@lane.entries.length}}</span>
+    </div>
+    <div class="fleet-ops-radar-agenda-track" {{on "dragover" this.dragOver}} {{on "dragleave" this.dragLeave}} {{on "drop" this.drop}} data-test-radar-agenda-track>
+        {{#each this.rows as |row|}}
+            <div class="fleet-ops-radar-agenda-row">
+                {{#each row as |entry|}}
+                    {{#if (eq entry.kind "shift")}}
+                        <button
+                            type="button"
+                            class="fleet-ops-radar-agenda-shift is-{{entry.state}} {{if entry.severity (concat 'has-' entry.severity)}} {{if entry.handover_key 'has-handover'}}"
+                            style={{this.barStyle entry}}
+                            title={{entry.driver.label}}
+                            {{on "click" (fn this.openShift entry)}}
+                            data-test-radar-agenda-shift={{entry.key}}
+                        >
+                            <span class="fleet-ops-radar-avatar is-user">{{initials entry.driver.label}}</span>
+                            <span class="fleet-ops-radar-agenda-shift-label">{{entry.driver.label}}</span>
+                            <span class="fleet-ops-radar-agenda-shift-meta">{{entry.label}} · {{t (concat "radar.agenda.shift-states." entry.state)}}{{#if entry.active_orders}} · {{entry.active_orders}} orders{{/if}}</span>
+                            {{#if entry.handover_key}}<FaIcon @icon="right-left" class="ml-1" />{{/if}}
+                        </button>
+                    {{else}}
+                        <Radar::Agenda::Entry @entry={{entry}} @positioned={{true}} @onOpen={{@onOpen}} @onHandover={{@onHandover}} />
+                    {{/if}}
+                {{/each}}
+            </div>
+        {{else}}
+            <div class="fleet-ops-radar-agenda-empty-lane">{{t "radar.agenda.no-events"}}</div>
+        {{/each}}
+    </div>
+</div>

package/addon/components/radar/agenda/lane.js

@@ -0,0 +1,80 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+
+/**
+ * One lane on the time scale. Entries are placed by their percentage
+ * offset; overlapping entries are dealt into rows so nothing hides under
+ * anything else. Dropping a tray item on the track gives it the time under
+ * the cursor.
+ */
+export default class RadarAgendaLaneComponent extends Component {
+    @tracked isOver = false;
+
+    /** Entries dealt into rows: an entry goes to the first row where it does not collide. */
+    get rows() {
+        const entries = [...(this.args.lane?.entries ?? [])].sort((a, b) => (a.pct ?? 0) - (b.pct ?? 0));
+        const rows = [];
+
+        for (const entry of entries) {
+            const start = entry.pct ?? 0;
+            const end = start + (entry.width_pct ?? 12);
+            let row = rows.find((candidates) => candidates.every((placed) => start >= placed.end || end <= placed.start));
+            if (!row) {
+                row = [];
+                rows.push(row);
+            }
+            row.push({ ...entry, start, end });
+        }
+
+        return rows;
+    }
+
+    @action barStyle(entry) {
+        const left = Math.max(0, Math.min(100, Number(entry.pct) || 0));
+        const width = Math.max(2, Math.min(100 - left, Number(entry.width_pct) || 2));
+
+        return htmlSafe(`left: ${left}%; width: ${width}%`);
+    }
+
+    @action openShift(entry) {
+        if (entry.handover_key) {
+            return this.args.onHandover?.(entry.handover_key);
+        }
+
+        return this.args.onOpen?.(entry);
+    }
+
+    @action dragOver(event) {
+        if (!event.dataTransfer?.types?.includes('text/radar-key')) {
+            return;
+        }
+        event.preventDefault();
+        this.isOver = true;
+    }
+
+    @action dragLeave() {
+        this.isOver = false;
+    }
+
+    @action drop(event) {
+        this.isOver = false;
+        const key = event.dataTransfer?.getData('text/radar-key');
+        if (!key) {
+            return;
+        }
+        event.preventDefault();
+
+        const track = event.currentTarget;
+        const rect = track.getBoundingClientRect();
+        const pct = rect.width ? Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width)) : 0;
+        const window = this.args.window ?? {};
+        const start = new Date(window.start_at);
+        const hours = Number(window.hours) || 24;
+        const at = new Date(start.getTime() + pct * hours * 3600 * 1000);
+        at.setMinutes(Math.round(at.getMinutes() / 15) * 15, 0, 0);
+
+        this.args.onDrop?.(key, at.toISOString(), this.args.lane?.key);
+    }
+}

package/addon/components/radar/agenda.hbs

@@ -0,0 +1,69 @@
+<div class="fleet-ops-radar-agenda" data-test-radar-agenda>
+    <div class="fleet-ops-radar-agenda-toolbar">
+        <div class="fleet-ops-radar-view-toggle" role="group">
+            <button type="button" class="fleet-ops-radar-view-toggle-button {{if (eq @window '24h') 'is-active'}}" {{on "click" (fn @onChangeWindow "24h")}} data-test-radar-agenda-window="24h">{{t "radar.agenda.window-24h"}}</button>
+            <button type="button" class="fleet-ops-radar-view-toggle-button {{if (eq @window '7d') 'is-active'}}" {{on "click" (fn @onChangeWindow "7d")}} data-test-radar-agenda-window="7d">{{t "radar.agenda.window-7d"}}</button>
+        </div>
+        {{#if @agenda}}
+            <span class="fleet-ops-radar-row-meta" data-test-radar-agenda-summary>{{t "radar.agenda.summary" shifts=@agenda.counts.shifts overdue=@agenda.counts.overdue anytime=@agenda.counts.anytime}}</span>
+        {{/if}}
+        <span class="fleet-ops-radar-row-meta">{{t "radar.agenda.drag-hint"}}</span>
+        <div class="ml-auto"><Button @size="xs" @icon="print" @text={{t "radar.agenda.print"}} @onClick={{this.print}} data-test-radar-agenda-print /></div>
+    </div>
+
+    {{#if @agenda}}
+        <div class="fleet-ops-radar-agenda-grid">
+            <div class="fleet-ops-radar-agenda-band" data-test-radar-agenda-overdue>
+                <div class="fleet-ops-radar-agenda-band-title is-overdue">{{t "radar.agenda.overdue"}} <span>{{@agenda.overdue.length}}</span></div>
+                {{#each @agenda.overdue as |entry|}}
+                    <Radar::Agenda::Entry @entry={{entry}} @compact={{true}} @onOpen={{@onOpen}} />
+                {{else}}
+                    <div class="fleet-ops-radar-row-meta">—</div>
+                {{/each}}
+            </div>
+
+            <div class="fleet-ops-radar-agenda-scale">
+                <div class="fleet-ops-radar-agenda-ruler">
+                    <div class="fleet-ops-radar-agenda-lane-label"></div>
+                    <div class="fleet-ops-radar-agenda-track">
+                        {{#each @agenda.window.ticks as |tick|}}
+                            <span class="fleet-ops-radar-agenda-tick" style={{this.leftStyle tick.pct}}>{{tick.label}}</span>
+                        {{/each}}
+                        <span class="fleet-ops-radar-agenda-now" style={{this.leftStyle @agenda.window.now_pct}}><em>{{format-date-fns @agenda.now "HH:mm"}}</em></span>
+                    </div>
+                </div>
+                {{#each this.lanes as |lane|}}
+                    <Radar::Agenda::Lane @lane={{lane}} @window={{@agenda.window}} @onOpen={{@onOpen}} @onDrop={{@onPlan}} @onHandover={{@onHandover}} />
+                {{/each}}
+            </div>
+
+            <div class="fleet-ops-radar-agenda-band" data-test-radar-agenda-later>
+                <div class="fleet-ops-radar-agenda-band-title">{{t "radar.agenda.later"}} <span>{{@agenda.later.length}}</span></div>
+                {{#each @agenda.later as |entry|}}
+                    <Radar::Agenda::Entry @entry={{entry}} @compact={{true}} @onOpen={{@onOpen}} />
+                {{else}}
+                    <div class="fleet-ops-radar-row-meta">—</div>
+                {{/each}}
+            </div>
+        </div>
+
+        <div class="fleet-ops-radar-agenda-tray" data-test-radar-agenda-tray>
+            <div class="fleet-ops-radar-agenda-band-title">
+                <FaIcon @icon="thumbtack" />
+                {{t "radar.agenda.anytime"}} <span>{{t "radar.agenda.anytime-count" count=@agenda.anytime.length}}</span>
+                {{#if @agenda.anytime.length}}
+                    <button type="button" class="fleet-ops-radar-briefing-link ml-auto" {{on "click" @onSeeAll}} data-test-radar-agenda-see-all>{{t "radar.agenda.see-all" count=@agenda.anytime.length}}</button>
+                {{/if}}
+            </div>
+            <div class="fleet-ops-radar-agenda-tray-items">
+                {{#each this.trayItems as |entry|}}
+                    <Radar::Agenda::Entry @entry={{entry}} @draggable={{true}} @onOpen={{@onOpen}} />
+                {{else}}
+                    <div class="fleet-ops-radar-row-meta">{{t "radar.agenda.no-events"}}</div>
+                {{/each}}
+            </div>
+        </div>
+    {{else if @isLoading}}
+        <div class="fleet-ops-radar-empty"><Spinner @size="lg" /></div>
+    {{/if}}
+</div>

package/addon/components/radar/agenda.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+
+export const AGENDA_LANES = ['shifts', 'maintenance', 'expiries', 'notices'];
+export const TRAY_LIMIT = 8;
+
+export default class RadarAgendaComponent extends Component {
+    @service intl;
+
+    get lanes() {
+        const lanes = this.args.agenda?.lanes ?? {};
+
+        return AGENDA_LANES.map((key) => ({ key, label: this.intl.t(`radar.agenda.lanes.${key}`), entries: lanes[key] ?? [] }));
+    }
+
+    get trayItems() {
+        return (this.args.agenda?.anytime ?? []).slice(0, TRAY_LIMIT);
+    }
+
+    @action leftStyle(pct) {
+        return htmlSafe(`left: ${Math.max(0, Math.min(100, Number(pct) || 0))}%`);
+    }
+
+    @action print() {
+        window.print();
+    }
+}

package/addon/components/radar/briefing.hbs

@@ -0,0 +1,108 @@
+<section class="fleet-ops-radar-briefing {{if @collapsed 'is-collapsed'}}" data-test-radar-briefing>
+    <div class="fleet-ops-radar-briefing-bar">
+        <span class="fleet-ops-control-hub-eyebrow">{{t "radar.briefing.title"}}</span>
+        {{#if @briefing}}
+            <span class="fleet-ops-radar-row-meta">{{t "radar.briefing.generated" time=(format-date-fns @briefing.generated_at "HH:mm")}}</span>
+            <span class="fleet-ops-radar-row-meta" data-test-radar-briefing-yesterday>{{t "radar.briefing.yesterday" closed=(or @briefing.yesterday.closed 0) rolled=(or @briefing.yesterday.rolled_over 0)}}</span>
+        {{/if}}
+        <button type="button" class="fleet-ops-radar-briefing-toggle" {{on "click" @onToggle}} data-test-radar-briefing-toggle>
+            <FaIcon @icon={{if @collapsed "chevron-down" "chevron-up"}} />
+            {{if @collapsed (t "radar.briefing.expand") (t "radar.briefing.collapse")}}
+        </button>
+    </div>
+
+    {{#unless @collapsed}}
+        {{#if @briefing}}
+            <div class="fleet-ops-radar-briefing-grid">
+                <div class="fleet-ops-radar-briefing-score" data-test-radar-briefing-score>
+                    <div class="fleet-ops-radar-drawer-label">{{t "radar.briefing.score"}}</div>
+                    <div class="fleet-ops-radar-briefing-score-value">
+                        <span class="fleet-ops-radar-briefing-score-number">{{@briefing.score.value}}</span>
+                        <span class="fleet-ops-radar-briefing-score-of">{{t "radar.briefing.of-100"}}</span>
+                    </div>
+                    <div class="fleet-ops-radar-briefing-score-delta">
+                        {{#if this.hasDelta}}
+                            <Badge @status={{this.deltaStatus}} @text={{t "radar.briefing.vs-yesterday" delta=this.deltaText}} @hideStatusDot={{true}} @disableHumanize={{true}} />
+                        {{else}}
+                            <span class="fleet-ops-radar-row-meta">{{t "radar.briefing.no-history"}}</span>
+                        {{/if}}
+                    </div>
+                    <div class="fleet-ops-radar-row-meta mt-2">{{@briefing.score.summary}}</div>
+                </div>
+
+                <div class="fleet-ops-radar-briefing-categories" data-test-radar-briefing-categories>
+                    {{#each @briefing.categories as |category|}}
+                        <div class="fleet-ops-radar-briefing-category {{if category.critical 'has-critical'}}" data-test-radar-briefing-category={{category.key}}>
+                            <div class="fleet-ops-radar-briefing-category-head">
+                                <span class="fleet-ops-radar-briefing-category-label">{{category.label}}</span>
+                                <span class="fleet-ops-radar-briefing-category-score">{{category.score}}</span>
+                            </div>
+                            <div class="fleet-ops-radar-briefing-category-bar"><span style={{this.barStyle category.score}} class="is-{{this.barTone category.score}}"></span></div>
+                            <div class="fleet-ops-radar-briefing-category-gaps">
+                                {{#if category.gaps.length}}
+                                    <span>{{this.gapText category}}</span>
+                                    <button type="button" class="fleet-ops-radar-briefing-link" {{on "click" (fn @onFilterCategory category.key)}} data-test-radar-briefing-filter={{category.key}}>{{t "radar.briefing.filter"}}</button>
+                                {{else}}
+                                    <span class="fleet-ops-radar-row-meta">—</span>
+                                {{/if}}
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+
+                <div class="fleet-ops-radar-briefing-prose" data-test-radar-briefing-prose>
+                    <p>
+                        {{#each @briefing.brief as |sentence|}}
+                            {{#each sentence as |segment|}}
+                                {{#if segment.route}}
+                                    <button type="button" class="fleet-ops-radar-briefing-link" {{on "click" (fn @onOpenRecord segment)}}>{{segment.text}}</button>
+                                {{else}}
+                                    {{segment.text}}
+                                {{/if}}
+                            {{/each}}
+                            {{" "}}
+                        {{/each}}
+                    </p>
+                </div>
+
+                <div class="fleet-ops-radar-briefing-decisions" data-test-radar-briefing-decisions>
+                    <div class="fleet-ops-radar-briefing-decisions-head">
+                        <span class="fleet-ops-radar-drawer-label">{{t "radar.briefing.decisions"}}</span>
+                        {{#if @briefing.decisions.length}}
+                            <span class="fleet-ops-radar-row-meta">{{t "radar.briefing.decisions-count" shown=this.visibleDecisions.length total=@briefing.decisions.length}}</span>
+                        {{/if}}
+                    </div>
+                    {{#if this.visibleDecisions.length}}
+                        {{#each this.visibleDecisions as |decision|}}
+                            <Radar::DecisionCard @decision={{decision}} @isBusy={{eq @busyKey decision.key}} @onConfirm={{@onConfirm}} @onAlternative={{@onAlternative}} @onDismiss={{@onDismiss}} @onOpenRecord={{@onOpenRecord}} />
+                        {{/each}}
+                    {{else}}
+                        <div class="fleet-ops-radar-row-meta" data-test-radar-briefing-nothing>{{t "radar.briefing.nothing-to-decide"}}</div>
+                    {{/if}}
+                    {{#each @strips as |strip|}}
+                        <div class="fleet-ops-radar-briefing-strip is-{{strip.kind}}" data-test-radar-briefing-strip={{strip.kind}}>
+                            <FaIcon @icon={{if (eq strip.kind "confirmed") "circle-check" "clock"}} />
+                            <span class="fleet-ops-radar-briefing-strip-label">
+                                {{#if (eq strip.kind "confirmed")}}
+                                    {{t "radar.briefing.confirmed" time=(format-date-fns strip.at "HH:mm")}}
+                                {{else}}
+                                    {{t "radar.briefing.snoozed-until" time=(format-date-fns strip.until "d MMM HH:mm")}}
+                                {{/if}}
+                            </span>
+                            <span class="fleet-ops-radar-briefing-strip-title">{{strip.title}}</span>
+                            {{#if (eq strip.kind "confirmed")}}
+                                {{#if strip.undo}}
+                                    <button type="button" class="fleet-ops-radar-briefing-link" {{on "click" (fn @onUndo strip)}} data-test-radar-briefing-undo>{{t "radar.briefing.undo"}}</button>
+                                {{/if}}
+                            {{else}}
+                                <button type="button" class="fleet-ops-radar-briefing-link" {{on "click" (fn @onWake strip)}} data-test-radar-briefing-wake>{{t "radar.briefing.wake-now"}}</button>
+                            {{/if}}
+                        </div>
+                    {{/each}}
+                </div>
+            </div>
+        {{else if @isLoading}}
+            <div class="fleet-ops-radar-briefing-loading"><Spinner @size="sm" /></div>
+        {{/if}}
+    {{/unless}}
+</section>

package/addon/components/radar/briefing.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+
+export const MAX_VISIBLE_DECISIONS = 4;
+
+export default class RadarBriefingComponent extends Component {
+    get hasDelta() {
+        const delta = this.args.briefing?.score?.delta;
+
+        return delta !== null && delta !== undefined;
+    }
+
+    get deltaText() {
+        const delta = this.args.briefing?.score?.delta ?? 0;
+
+        return delta > 0 ? `▲ ${delta}` : delta < 0 ? `▼ ${Math.abs(delta)}` : '±0';
+    }
+
+    get deltaStatus() {
+        const delta = this.args.briefing?.score?.delta ?? 0;
+
+        return delta > 0 ? 'success' : delta < 0 ? 'error' : 'gray';
+    }
+
+    get visibleDecisions() {
+        return (this.args.briefing?.decisions ?? []).slice(0, MAX_VISIBLE_DECISIONS);
+    }
+
+    @action barStyle(score) {
+        return htmlSafe(`width: ${Math.max(0, Math.min(100, Number(score) || 0))}%`);
+    }
+
+    @action barTone(score) {
+        const value = Number(score) || 0;
+
+        return value >= 90 ? 'good' : value >= 70 ? 'warn' : 'bad';
+    }
+
+    @action gapText(category) {
+        return (category?.gaps ?? []).map((gap) => gap.label).join(' · ');
+    }
+}

package/addon/components/radar/bulk-bar.hbs

@@ -0,0 +1,41 @@
+<div class="fleet-ops-radar-bulk-bar" data-test-radar-bulk-bar>
+    <button type="button" class="fleet-ops-radar-row-check" {{on "click" @onClear}} data-test-radar-bulk-clear aria-label={{t "radar.bulk.clear"}}>
+        <FaIcon @icon="square-check" />
+    </button>
+    <div class="fleet-ops-radar-bulk-copy">
+        <strong data-test-radar-bulk-count>{{t "radar.bulk.selected" count=@items.length}}</strong>
+        {{#if this.breakdown}}<span class="fleet-ops-radar-row-meta">{{this.breakdown}}</span>{{/if}}
+    </div>
+    <div class="fleet-ops-radar-bulk-actions">
+        <Button @size="xs" @icon="check" @text={{t "radar.actions.acknowledge"}} @isLoading={{@isBusy}} @onClick={{fn @onAct "acknowledge"}} data-test-radar-bulk-action="acknowledge">
+            <kbd class="ml-1">E</kbd>
+        </Button>
+        <DropdownButton @icon="clock" @text={{t "radar.actions.snooze"}} @size="xs" @renderInPlace={{true}} @disabled={{@isBusy}} as |dd|>
+            <div class="next-dd-menu mt-1 mx-0">
+                <div class="px-1">
+                    {{#each @snoozePresets as |preset|}}
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.snooze preset)}} data-test-radar-bulk-snooze={{preset}}>
+                            <div class="flex flex-row items-center"><div class="mr-2"><FaIcon @icon="clock" /></div><div class="text-sm">{{t (concat "radar.snooze." preset)}}</div></div>
+                        </a>
+                    {{/each}}
+                </div>
+            </div>
+        </DropdownButton>
+        <Button @size="xs" @icon="user-plus" @text={{t "radar.actions.assign"}} @disabled={{@isBusy}} @onClick={{fn @onAct "assign"}} data-test-radar-bulk-action="assign" />
+        {{#if this.revocableCount}}
+            <Button
+                @size="xs"
+                @icon="link-slash"
+                @type="danger"
+                @text={{t "radar.actions.revoke-links" count=this.revocableCount}}
+                @disabled={{@isBusy}}
+                @onClick={{fn @onAct "revoke_link"}}
+                data-test-radar-bulk-action="revoke_link"
+            />
+        {{/if}}
+        {{#if this.hasSnoozed}}
+            <Button @size="xs" @icon="bell" @text={{t "radar.actions.wake"}} @disabled={{@isBusy}} @onClick={{fn @onAct "wake"}} data-test-radar-bulk-action="wake" />
+        {{/if}}
+        <Button @size="xs" @text={{t "radar.bulk.clear"}} @disabled={{@isBusy}} @onClick={{@onClear}} data-test-radar-bulk-action="clear" />
+    </div>
+</div>

package/addon/components/radar/bulk-bar.js

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { snoozePayloadFor } from '../../utils/radar';
+
+export default class RadarBulkBarComponent extends Component {
+    @service intl;
+
+    /** "2 maint · 1 work order" — the selection by chip. */
+    get breakdown() {
+        const counts = new Map();
+        for (const item of this.args.items ?? []) {
+            const label = this.intl.t(`radar.rules.${item.rule}`).toLowerCase();
+            counts.set(label, (counts.get(label) ?? 0) + 1);
+        }
+
+        return [...counts.entries()].map(([label, count]) => `${count} ${label}`).join(' · ');
+    }
+
+    /** Selected inspection links that can still be revoked. */
+    get revocableCount() {
+        return (this.args.items ?? []).filter((item) => item.actions?.includes('revoke_link')).length;
+    }
+
+    get hasSnoozed() {
+        return (this.args.items ?? []).some((item) => item.state?.status === 'snoozed');
+    }
+
+    @action snooze(preset) {
+        return this.args.onAct?.('snooze', { preset, ...snoozePayloadFor(preset) });
+    }
+}

package/addon/components/radar/decision-card.hbs

@@ -0,0 +1,28 @@
+<div class="fleet-ops-radar-decision is-{{@decision.severity}}" data-test-radar-decision={{@decision.key}}>
+    <div class="fleet-ops-radar-decision-head">
+        <Badge @status={{this.severityStatus}} @text={{concat @decision.severity " · " @decision.category}} @hideStatusDot={{true}} @disableHumanize={{true}} />
+        <span class="fleet-ops-radar-decision-title">{{@decision.title}}</span>
+        {{#if @decision.subtitle}}<span class="fleet-ops-radar-row-meta">{{@decision.subtitle}}</span>{{/if}}
+    </div>
+    {{#if @decision.reasoning.length}}
+        <p class="fleet-ops-radar-decision-reasoning" data-test-radar-decision-reasoning>
+            {{#each @decision.reasoning as |segment|}}
+                {{#if segment.route}}
+                    <button type="button" class="fleet-ops-radar-briefing-link" {{on "click" (fn @onOpenRecord segment)}}>{{segment.text}}</button>
+                {{else}}
+                    {{segment.text}}
+                {{/if}}
+            {{/each}}
+        </p>
+    {{/if}}
+    <div class="fleet-ops-radar-decision-actions">
+        <Button @type="primary" @size="xs" @text={{@decision.confirm.label}} @isLoading={{@isBusy}} @onClick={{fn @onConfirm @decision @decision.confirm}} data-test-radar-decision-confirm />
+        {{#each @decision.alternatives as |alternative|}}
+            <Button @size="xs" @text={{alternative.label}} @disabled={{@isBusy}} @onClick={{fn @onAlternative @decision alternative}} data-test-radar-decision-alternative={{alternative.action}} />
+        {{/each}}
+        <button type="button" class="fleet-ops-radar-briefing-link" disabled={{@isBusy}} {{on "click" (fn @onDismiss @decision)}} data-test-radar-decision-dismiss>{{t "radar.briefing.not-now"}}</button>
+        {{#if @decision.record}}
+            <button type="button" class="fleet-ops-radar-briefing-link ml-auto" {{on "click" (fn @onOpenRecord @decision.record)}} data-test-radar-decision-open>{{t "radar.briefing.open-record"}} <FaIcon @icon="arrow-up-right-from-square" /></button>
+        {{/if}}
+    </div>
+</div>

package/addon/components/radar/decision-card.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class RadarDecisionCardComponent extends Component {
+    get severityStatus() {
+        return { critical: 'error', warning: 'warning', info: 'info' }[this.args.decision?.severity] ?? 'gray';
+    }
+}

package/addon/components/radar/empty-state.hbs

@@ -0,0 +1,30 @@
+<div class="fleet-ops-radar-empty" data-test-radar-empty={{this.kind}}>
+    <div class="fleet-ops-radar-empty-icon {{unless this.isAllClear 'is-neutral'}}">
+        <FaIcon @icon={{this.icon}} />
+    </div>
+    <div class="fleet-ops-radar-empty-title">{{t this.titleKey}}</div>
+    <div class="fleet-ops-radar-empty-hint">
+        {{#if this.isAllClear}}
+            {{#if @snoozeSchedule.length}}
+                {{t "radar.empty.snoozed-hint" count=@snoozeSchedule.length}}
+            {{else}}
+                {{t "radar.empty.nothing-snoozed"}}
+            {{/if}}
+        {{else}}
+            {{t this.hintKey}}
+        {{/if}}
+    </div>
+    {{#if @isFiltered}}
+        <div class="mt-3"><Button @size="xs" @icon="rotate-left" @text={{t "radar.bulk.clear"}} @onClick={{@onClear}} /></div>
+    {{/if}}
+    {{#if (and this.isAllClear @snoozeSchedule.length)}}
+        <div class="fleet-ops-radar-empty-schedule" data-test-radar-snooze-schedule>
+            {{#each @snoozeSchedule as |entry|}}
+                <div>
+                    <span>{{entry.title}}</span>
+                    <time>{{t "radar.empty.wakes" time=(format-date-fns entry.snoozed_until "EEE d MMM HH:mm")}}</time>
+                </div>
+            {{/each}}
+        </div>
+    {{/if}}
+</div>

package/addon/components/radar/empty-state.js

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+
+export default class RadarEmptyStateComponent extends Component {
+    get kind() {
+        if (this.args.isFiltered) {
+            return 'filtered';
+        }
+
+        return this.args.status ?? 'open';
+    }
+
+    get isAllClear() {
+        return this.kind === 'open';
+    }
+
+    get icon() {
+        return { open: 'circle-check', filtered: 'filter', snoozed: 'clock', resolved: 'clipboard-check' }[this.kind] ?? 'inbox';
+    }
+
+    get titleKey() {
+        return { open: 'radar.empty.title', filtered: 'radar.empty.filtered-title', snoozed: 'radar.empty.snoozed-title', resolved: 'radar.empty.resolved-title' }[this.kind];
+    }
+
+    get hintKey() {
+        return { filtered: 'radar.empty.filtered-hint', snoozed: 'radar.empty.snoozed-tab-hint', resolved: 'radar.empty.resolved-hint' }[this.kind] ?? 'radar.empty.nothing-snoozed';
+    }
+}

package/addon/components/radar/filter-pills.hbs

@@ -0,0 +1,22 @@
+<div class="fleet-ops-radar-pills" data-test-radar-pills>
+    {{#each @pills as |pill|}}
+        <button
+            type="button"
+            class="fleet-ops-radar-pill {{if pill.active 'is-active'}} {{if (eq pill.count 0) 'is-empty'}}"
+            aria-pressed={{if pill.active "true" "false"}}
+            {{on "click" (fn @onToggle pill.key)}}
+            data-test-radar-pill={{pill.key}}
+        >
+            {{#if pill.dot}}<span class="fleet-ops-radar-pill-dot"></span>{{/if}}
+            <span>{{pill.label}}</span>
+            <span class="fleet-ops-radar-pill-count">{{pill.count}}</span>
+            {{#if pill.active}}<FaIcon @icon="xmark" class="fleet-ops-radar-pill-clear" />{{/if}}
+        </button>
+    {{/each}}
+    {{#if @isFiltered}}
+        <button type="button" class="fleet-ops-radar-pill" {{on "click" @onClear}} data-test-radar-pills-clear>
+            <FaIcon @icon="rotate-left" class="fleet-ops-radar-pill-clear" />
+            <span>{{t "radar.bulk.clear"}}</span>
+        </button>
+    {{/if}}
+</div>

package/addon/components/radar/filter-pills.js

@@ -0,0 +1,3 @@
+import templateOnly from '@ember/component/template-only';
+
+export default templateOnly();