@fleetbase/fleetops-engine 0.6.65 → 0.6.66

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();

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

@@ -0,0 +1,62 @@
+{{#if (or @handover @isLoading)}}
+    <div class="fleet-ops-radar-handover" data-test-radar-handover>
+        <div class="fleet-ops-radar-handover-head">
+            <span class="fleet-ops-radar-avatar is-user">{{initials @handover.driver.label}}</span>
+            <div class="flex-1 min-w-0">
+                <div class="fleet-ops-radar-handover-title">{{@handover.driver.label}}</div>
+                {{#if @handover.shift.end_at}}
+                    <div class="fleet-ops-radar-row-meta">{{t "radar.handover.title"}} {{format-date-fns @handover.shift.end_at "HH:mm"}} · {{t "radar.handover.ends-in" minutes=this.minutesLeft}}</div>
+                {{/if}}
+            </div>
+            <button type="button" class="fleet-ops-radar-row-open" {{on "click" @onClose}} aria-label={{t "radar.keys.close"}} data-test-radar-handover-close><FaIcon @icon="xmark" /></button>
+        </div>
+
+        {{#if @isLoading}}
+            <div class="fleet-ops-radar-row-meta"><Spinner @size="xs" class="mr-1" /> {{t "radar.handover.loading"}}</div>
+        {{else}}
+            <div class="fleet-ops-radar-handover-orders">
+                <div class="fleet-ops-radar-row-meta">{{t "radar.handover.orders-on-driver" count=@handover.orders.length name=@handover.driver.label}}</div>
+                {{#each @handover.orders as |order|}}
+                    <div class="fleet-ops-radar-handover-order {{if order.finishes_after_shift 'is-late'}}" data-test-radar-handover-order={{order.public_id}}>
+                        <strong>{{order.public_id}}</strong>
+                        {{#if order.destination}}<span>{{order.destination}}</span>{{/if}}
+                        {{#if order.ends_at}}<span class="fleet-ops-radar-row-meta">ETA {{format-date-fns order.ends_at "HH:mm"}}</span>{{/if}}
+                        {{#if order.finishes_after_shift}}<span class="fleet-ops-radar-handover-late">{{t "radar.handover.finishes-after"}}</span>{{/if}}
+                    </div>
+                {{/each}}
+            </div>
+
+            <div class="fleet-ops-radar-handover-suggested" data-test-radar-handover-suggested>
+                <div class="fleet-ops-radar-drawer-label">{{t "radar.handover.suggested"}}</div>
+                {{#if @handover.suggested}}
+                    <div class="fleet-ops-radar-handover-cover">
+                        <span class="fleet-ops-radar-avatar is-user">{{initials @handover.suggested.driver.label}}</span>
+                        <div>
+                            <div class="fleet-ops-radar-handover-title">{{@handover.suggested.driver.label}}</div>
+                            <div class="fleet-ops-radar-row-meta">
+                                {{t "radar.handover.on-shift-till" time=(format-date-fns @handover.suggested.on_shift_until "HH:mm")}}
+                                {{#if @handover.suggested.distance_km}} · {{t "radar.handover.away" distance=@handover.suggested.distance_km}}{{/if}}
+                                · {{@handover.suggested.capacity_label}}
+                            </div>
+                        </div>
+                    </div>
+                {{else}}
+                    <div class="fleet-ops-radar-row-meta">{{t "radar.handover.no-cover"}}</div>
+                {{/if}}
+            </div>
+
+            <div class="fleet-ops-radar-drawer-actions">
+                {{#if (and @handover.suggested @handover.orders.length)}}
+                    <Button @type="primary" @size="xs" @icon="right-left" @text={{t "radar.handover.reassign" count=@handover.orders.length name=@handover.suggested.driver.label}} @isLoading={{@isBusy}} @onClick={{fn @onReassign @handover}} data-test-radar-handover-reassign />
+                {{/if}}
+                {{#if @handover.shift.uuid}}
+                    <Button @size="xs" @icon="clock" @text={{t "radar.handover.extend"}} @disabled={{@isBusy}} @onClick={{fn @onExtend @handover}} data-test-radar-handover-extend />
+                {{/if}}
+                <Button @size="xs" @icon="moon" @text={{t "radar.handover.snooze"}} @disabled={{@isBusy}} @onClick={{fn @onSnooze @handover}} data-test-radar-handover-snooze />
+                {{#if @handover.record}}
+                    <button type="button" class="fleet-ops-radar-briefing-link ml-auto" {{on "click" (fn @onOpenRecord @handover.record)}}>{{t "radar.actions.open-record"}}</button>
+                {{/if}}
+            </div>
+        {{/if}}
+    </div>
+{{/if}}

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

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export default class RadarHandoverCardComponent extends Component {
+    get minutesLeft() {
+        const minutes = Number(this.args.handover?.shift?.minutes_left ?? 0);
+        if (minutes < 60) {
+            return `${minutes}m`;
+        }
+        const hours = Math.floor(minutes / 60);
+        const rest = minutes % 60;
+
+        return rest ? `${hours}h ${rest}m` : `${hours}h`;
+    }
+}

package/addon/components/radar/header.hbs

@@ -0,0 +1,28 @@
+<section class="fleet-ops-control-hub-header" data-test-radar-header>
+    <div class="fleet-ops-radar-header-row">
+        <div class="fleet-ops-control-hub-header-copy">
+            <div class="fleet-ops-control-hub-eyebrow">{{t "radar.eyebrow"}}</div>
+            <h1 class="fleet-ops-control-hub-title">{{t "radar.title"}}</h1>
+        </div>
+        <div class="fleet-ops-radar-header-summary" data-test-radar-summary>
+            {{t "radar.summary" open=(or @stats.open 0) snoozed=(or @stats.snoozed 0) time=(if @lastLoadedAt (format-date-fns @lastLoadedAt "dd MMM yyyy, HH:mm") "—")}}
+        </div>
+        <div class="fleet-ops-radar-header-actions">
+            <div class="fleet-ops-radar-search">
+                <FaIcon @icon="magnifying-glass" />
+                <Input @type="search" @value={{this.query}} placeholder={{t "radar.search-placeholder"}} class="form-input form-input-sm w-full" {{on "input" this.onInput}} data-test-radar-search />
+                <kbd>/</kbd>
+            </div>
+            <div class="fleet-ops-radar-view-toggle" role="group" data-test-radar-view-toggle>
+                <button type="button" class="fleet-ops-radar-view-toggle-button {{if (eq @view 'list') 'is-active'}}" {{on "click" (fn @onChangeView "list")}} data-test-radar-view="list">
+                    <FaIcon @icon="list" />{{t "radar.views.list"}}
+                </button>
+                <button type="button" class="fleet-ops-radar-view-toggle-button {{if (eq @view 'agenda') 'is-active'}}" {{on "click" (fn @onChangeView "agenda")}} data-test-radar-view="agenda">
+                    <FaIcon @icon="timeline" />{{t "radar.views.agenda"}}
+                </button>
+            </div>
+            <Button @icon="refresh" @size="sm" @helpText={{t "radar.reload"}} @isLoading={{@isLoading}} @onClick={{@onReload}} data-test-radar-reload />
+            <Button @type="primary" @icon="plus" @size="sm" @text={{t "radar.new-notice"}} @onClick={{@onNewNotice}} data-test-radar-new-notice />
+        </div>
+    </div>
+</section>

package/addon/components/radar/header.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class RadarHeaderComponent extends Component {
+    @tracked query = this.args.query ?? '';
+
+    @action onInput(event) {
+        this.query = event.target.value;
+        this.args.onSearch?.(this.query);
+    }
+}

package/addon/components/radar/item-drawer.hbs

@@ -0,0 +1,92 @@
+{{#if @item}}
+    <Overlay @isOpen={{true}} @position="right" @width="26rem" @fullHeight={{true}} @onLoad={{this.setOverlay}} class="fleet-ops-radar-drawer" data-test-radar-drawer>
+        <Overlay::Header @title={{t (concat "radar.rules." @item.rule)}} @status={{@item.severity}} @hideStatusDot={{false}} @onPressCancel={{@onClose}} />
+        <Overlay::Body class="no-padding">
+            <div class="fleet-ops-radar-drawer-section">
+                <div class="fleet-ops-radar-drawer-title">{{@item.title}}</div>
+                {{#if @item.meta_line}}<div class="fleet-ops-radar-row-meta mt-1">{{@item.meta_line}}</div>{{/if}}
+                <div class="mt-2 flex items-center gap-2 flex-wrap">
+                    <Radar::Subject @subject={{@item.subject}} />
+                    {{#if @item.due_label}}<span class="fleet-ops-radar-row-due is-{{@item.due_bucket}}">{{@item.due_label}}</span>{{/if}}
+                </div>
+            </div>
+
+            {{#unless this.isResolved}}
+                <div class="fleet-ops-radar-drawer-section">
+                    <div class="fleet-ops-radar-drawer-label">{{t "radar.drawer.details"}}</div>
+                    <div class="fleet-ops-radar-drawer-actions" data-test-radar-drawer-actions>
+                        {{#each this.recordActions as |recordAction|}}
+                            <Button @type={{if (eq recordAction.key this.primaryAction.key) "primary" "default"}} @size="xs" @icon={{recordAction.icon}} @text={{t recordAction.label}} @onClick={{fn @onAct @item recordAction.key}} data-test-radar-drawer-action={{recordAction.key}} />
+                        {{/each}}
+                        {{#unless this.isAcknowledged}}
+                            <Button @size="xs" @icon="check" @text={{t "radar.actions.acknowledge"}} @onClick={{fn @onAct @item "acknowledge"}} data-test-radar-drawer-action="acknowledge" />
+                        {{/unless}}
+                        {{#if this.isSnoozed}}
+                            <Button @size="xs" @icon="bell" @text={{t "radar.actions.wake"}} @onClick={{fn @onAct @item "wake"}} data-test-radar-drawer-action="wake" />
+                        {{else}}
+                            {{#each @snoozePresets as |preset|}}
+                                <Button @size="xs" @icon="clock" @text={{t (concat "radar.snooze." preset)}} @onClick={{fn this.snooze preset}} data-test-radar-drawer-snooze={{preset}} />
+                            {{/each}}
+                        {{/if}}
+                        <Button @size="xs" @icon="user-plus" @text={{t "radar.actions.assign"}} @onClick={{fn @onAct @item "assign"}} data-test-radar-drawer-action="assign" />
+                        {{#if @item.state.assigned_to}}
+                            <Button @size="xs" @icon="user-minus" @text={{t "radar.actions.unassign"}} @onClick={{fn @onAct @item "unassign"}} data-test-radar-drawer-action="unassign" />
+                        {{/if}}
+                        {{#if (eq @item.rule "notice")}}
+                            <Button @type="danger" @size="xs" @icon="trash" @text={{t "radar.notice.delete"}} @onClick={{fn @onAct @item "delete_notice"}} data-test-radar-drawer-action="delete_notice" />
+                        {{/if}}
+                        {{#if @item.record}}
+                            <Button @size="xs" @icon="arrow-up-right-from-square" @text={{t "radar.actions.open-record"}} @onClick={{fn @onOpenRecord @item}} data-test-radar-drawer-action="open_record" />
+                        {{/if}}
+                    </div>
+                </div>
+            {{/unless}}
+
+            {{#if @item.details.failed_items.length}}
+                <div class="fleet-ops-radar-drawer-section">
+                    <div class="fleet-ops-radar-drawer-label">{{t "radar.drawer.failed-items"}}</div>
+                    <div class="fleet-ops-radar-drawer-list" data-test-radar-drawer-failed-items>
+                        {{#each @item.details.failed_items as |failure|}}
+                            <div>
+                                <span>{{failure.label}}</span>
+                                <Badge @status={{if (eq failure.severity "critical") "error" (if (eq failure.severity "high") "error" "warning")}} @text={{failure.severity}} @hideStatusDot={{true}} />
+                            </div>
+                        {{/each}}
+                    </div>
+                </div>
+            {{/if}}
+
+            {{#if @item.window}}
+                <div class="fleet-ops-radar-drawer-section">
+                    <div class="fleet-ops-radar-drawer-label">{{t "radar.drawer.window"}}</div>
+                    <div class="fleet-ops-radar-drawer-list">
+                        <div><span>{{format-date-fns @item.window.start_at "EEE d MMM HH:mm"}}</span><span>→</span><span>{{format-date-fns @item.window.end_at "HH:mm"}}</span></div>
+                    </div>
+                </div>
+            {{/if}}
+
+            <div class="fleet-ops-radar-drawer-section">
+                <div class="fleet-ops-radar-drawer-label">{{t "radar.drawer.state"}}</div>
+                <div class="fleet-ops-radar-drawer-state" data-test-radar-drawer-state>
+                    {{#if @item.state.acknowledged_at}}
+                        <span><FaIcon @icon="check" class="mr-1" />{{t "radar.state.acknowledged-by" name=(or @item.state.acknowledged_by_name "—") time=(format-date-fns @item.state.acknowledged_at "d MMM HH:mm")}}</span>
+                    {{/if}}
+                    {{#if @item.state.snoozed_until}}
+                        <span><FaIcon @icon="clock" class="mr-1" />{{t "radar.state.snoozed-until" time=(format-date-fns @item.state.snoozed_until "d MMM HH:mm")}}</span>
+                    {{/if}}
+                    {{#if @item.state.assigned_to}}
+                        <span><FaIcon @icon="user" class="mr-1" />{{t "radar.state.assigned-to" name=@item.state.assigned_to.name}}</span>
+                    {{else}}
+                        <span><FaIcon @icon="user" class="mr-1" />{{t "radar.state.unassigned"}}</span>
+                    {{/if}}
+                    {{#if @item.state.planned_at}}
+                        <span><FaIcon @icon="calendar-check" class="mr-1" />{{t "radar.state.planned-for" time=(format-date-fns @item.state.planned_at "d MMM HH:mm")}}</span>
+                    {{/if}}
+                    {{#if @item.state.resolved_at}}
+                        <span><FaIcon @icon="circle-check" class="mr-1" />{{if (eq @item.state.resolution "auto") (t "radar.state.resolved-auto") (t "radar.state.resolved-by" name=(or @item.state.resolved_by_name "—") time=(format-date-fns @item.state.resolved_at "d MMM HH:mm"))}}</span>
+                    {{/if}}
+                </div>
+            </div>
+        </Overlay::Body>
+    </Overlay>
+{{/if}}

package/addon/components/radar/item-drawer.js

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { primaryActionFor, secondaryActionsFor, snoozePayloadFor } from '../../utils/radar';
+
+export default class RadarItemDrawerComponent extends Component {
+    overlay = null;
+
+    get primaryAction() {
+        return primaryActionFor(this.args.item);
+    }
+
+    get recordActions() {
+        const primary = this.primaryAction;
+
+        return primary ? [primary, ...secondaryActionsFor(this.args.item)] : secondaryActionsFor(this.args.item);
+    }
+
+    get isAcknowledged() {
+        return this.args.item?.state?.status === 'acknowledged';
+    }
+
+    get isSnoozed() {
+        return this.args.item?.state?.status === 'snoozed';
+    }
+
+    get isResolved() {
+        return this.args.item?.state?.status === 'resolved';
+    }
+
+    @action setOverlay(overlay) {
+        this.overlay = overlay;
+    }
+
+    @action snooze(preset) {
+        return this.args.onAct?.(this.args.item, 'snooze', { preset, ...snoozePayloadFor(preset) });
+    }
+}

package/addon/components/radar/item-list.hbs

@@ -0,0 +1,20 @@
+{{#each @groups as |group|}}
+    <div class="fleet-ops-radar-group-header is-{{group.key}}" data-test-radar-group={{group.key}}>
+        {{#if (eq group.key "overdue")}}<FaIcon @icon="circle-exclamation" />{{/if}}
+        <span>{{t (concat "radar.groups." group.key)}}</span>
+        <span class="fleet-ops-radar-group-count">{{group.count}}</span>
+    </div>
+    {{#each group.items as |item|}}
+        <Radar::ItemRow
+            @item={{item}}
+            @isSelected={{in-array item.key @selection}}
+            @isFocused={{eq @focusedKey item.key}}
+            @snoozePresets={{@snoozePresets}}
+            @onSelect={{@onSelect}}
+            @onFocus={{@onFocus}}
+            @onOpen={{@onOpen}}
+            @onAct={{@onAct}}
+            @onOpenRecord={{@onOpenRecord}}
+        />
+    {{/each}}
+{{/each}}

package/addon/components/radar/item-list.js

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