@things-factory/work-shift 10.1.202 → 10.1.205

package/dist-client/pages/work-shift.js

@@ -1,387 +1,437 @@
 import { __decorate, __metadata } from "tslib";
+import '@operato/input/ox-input-select-buttons.js';
+import '@operato/list-state/ox-list-state.js';
+import '@operato/list-state/ox-page-state.js';
 import gql from 'graphql-tag';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
-import { i18next } from '@operato/i18n';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { OxPrompt } from '@operato/popup';
 import { PageView } from '@operato/shell';
-import { CommonHeaderStyles, DocumentPageStyles, ScrollbarStyles } from '@operato/styles';
-import { revisionText as t, revisionDate, revisionContents, revisionStyles } from '@things-factory/ops-master/dist-client/pages/master/revision-comparison.js';
+import { ButtonStyles, DocumentPageStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
+import { revisionText as rt, revisionDate } from '@things-factory/ops-master/dist-client/pages/master/revision-comparison.js';
 import { localDateTime, isoFromLocal } from '@things-factory/ops-master/dist-client/pages/master/revision-view.js';
-import { clockOf, coverageProblems, coveredMinutes, cycleOf, spanOf } from '../shift-coverage';
+import { clockOf, coverageProblems, timelineOf } from '../shift-coverage';
+import { daysLabel, daysOf, daysValue, draftIssues, groupOverlaps, lengthOf, nextShift, settle, shiftsContent, weekGroups, WEEK } from '../shift-editing';
+import { isBaseline, placeRevisions, reasonOf, timeRange } from '../shift-revisions';
 const DAY_MINUTES = 24 * 60;
-let WorkShift = class WorkShift extends PageView {
+const t = (key, params = {}) => String(i18next.t(key, params));
+/**
+ * 근무 교대 — the shift arrangement in force, what is about to change, and what it was before.
+ *
+ * One arrangement is in force at a time. Changing it means writing a whole new arrangement with a reason and
+ * the moment it takes effect; where the site requires approval, the change goes through ops-master's approval
+ * and takes effect once approved. Work already recorded keeps the shift it was recorded under.
+ *
+ * The rules this screen applies - weekday groups, the end day of a shift, what blocks a save, where each
+ * revision belongs - live in shift-editing.ts, shift-revisions.ts and shift-coverage.ts, with tests.
+ */
+let WorkShift = class WorkShift extends localize(i18next)(PageView) {
     constructor() {
         super(...arguments);
-        this.message = '';
-        this.busy = false;
-        this.statuses = {};
+        this.loading = false;
+        this.error = null;
+        this.approvals = {};
         this.dirty = false;
+        this.busy = false;
+        this.saveError = '';
+        /** A save was tried: from then on every blocking problem is shown, not only the ones a person touched. */
+        this.tried = false;
+        /* ── pieces ────────────────────────────────────────────────────────── */
+        this.dayWord = (offset) => rt('day-offset-' + offset);
     }
     static { this.styles = [
+        FormFieldStyles,
+        ButtonStyles,
         DocumentPageStyles,
         ScrollbarStyles,
-        CommonHeaderStyles,
-        revisionStyles,
         css `
-      .page {
-        display: grid;
+      .arrangement {
+        display: flex;
+        flex-direction: column;
         gap: var(--spacing-large);
-        min-width: 0;
       }
-      .page-actions,
-      .action-row,
-      .history-head {
+
+      /* ── the day bar ─────────────────────────────────────────────── */
+      .day-groups {
+        display: grid;
+        grid-template-columns: max-content minmax(0, 1fr);
+        gap: var(--spacing-large) var(--spacing-large);
+        align-items: start;
+      }
+      .day-label {
+        padding-top: 7px;
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small);
+        font-weight: 600;
+        white-space: nowrap;
+      }
+      .day-none {
+        padding-top: 7px;
+        color: var(--ui-muted);
+      }
+      .bar {
+        position: relative;
+        height: 32px;
+        border-radius: var(--md-sys-shape-corner-small, 4px);
+        background: var(--md-sys-color-surface-container-low);
+        overflow: hidden;
+      }
+      .piece {
+        position: absolute;
+        inset-block: 0;
+        box-sizing: border-box;
         display: flex;
         align-items: center;
-        flex-wrap: wrap;
         gap: var(--spacing-small);
+        min-width: 0;
+        padding-inline: var(--spacing-medium);
+        overflow: hidden;
+        white-space: nowrap;
+        font-size: var(--ui-t-small);
       }
-      .page-actions {
-        justify-content: space-between;
+      .piece[data-kind='shift'] {
+        border-inline-start: 3px solid var(--ui-accent, var(--md-sys-color-primary));
+        border-inline-end: 1px solid var(--md-sys-color-surface-container-lowest);
+        background: color-mix(in srgb, var(--ui-accent, var(--md-sys-color-primary)) 18%, var(--md-sys-color-surface-container-lowest));
+        color: var(--ui-ink);
       }
-      .page-section {
-        min-width: 0;
+      .piece[data-kind='shift'] strong {
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
-      .page-section-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--spacing-medium);
+      .piece .time {
+        color: var(--ui-muted);
+        font-variant-numeric: tabular-nums;
       }
-      .page-section-header h2,
-      .page-section-header h3 {
-        margin: 0;
+      .piece[data-kind='gap'] {
+        background: repeating-linear-gradient(
+          -45deg,
+          transparent 0 5px,
+          color-mix(in srgb, var(--ui-warn) 35%, transparent) 5px 6px
+        );
       }
-      .current-section {
-        border-inline-start: 3px solid var(--ui-accent);
+      .piece[data-kind='overlap'] {
+        background: repeating-linear-gradient(
+          -45deg,
+          color-mix(in srgb, var(--ui-crit) 30%, transparent) 0 4px,
+          transparent 4px 7px
+        );
       }
-      .editing {
-        display: grid;
-        gap: var(--spacing-medium);
-        padding: var(--spacing-medium);
-        border: 1px solid color-mix(in srgb, var(--ui-accent) 35%, transparent);
-        border-radius: var(--ui-r-small, 6px);
-        background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-bg));
+      .midnight {
+        position: absolute;
+        inset-block: 0;
+        border-inline-start: 1px dashed var(--ui-muted);
       }
-      .field-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
-        gap: var(--spacing-medium);
+      .axis {
+        position: relative;
+        height: 16px;
+        margin-top: 2px;
+        color: var(--ui-muted);
+        font-size: var(--ui-t-micro);
+        font-variant-numeric: tabular-nums;
       }
-      .field {
+      .axis span {
+        position: absolute;
+        white-space: nowrap;
+        transform: translateX(-50%);
+      }
+      .axis span:first-child {
+        transform: none;
+      }
+      .axis span:last-child {
+        transform: translateX(-100%);
+      }
+
+      .findings {
         display: grid;
-        align-content: start;
         gap: var(--spacing-small);
-        min-width: 0;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      .findings li {
+        display: flex;
+        gap: var(--spacing-medium);
+        font-variant-numeric: tabular-nums;
+      }
+      .findings li::before {
+        content: '';
+        flex: none;
+        width: 3px;
+        border-radius: 2px;
+        background: var(--ui-warn);
       }
-      .field > span,
-      .field-label {
+      .findings li[data-kind='overlap']::before,
+      .findings li[data-kind='error']::before {
+        background: var(--ui-crit);
+      }
+      .findings .why {
         display: block;
         color: var(--ui-muted);
         font-size: var(--ui-t-small);
       }
-      input,
-      select,
-      textarea {
-        box-sizing: border-box;
+
+      /* ── tables: the grid's look (page-standard §2-1) ───────────────── */
+      .table-scroll {
+        overflow-x: auto;
+      }
+      table {
         width: 100%;
-        min-height: var(--form-element-height-medium, 40px);
-        padding: 7px 10px;
-        border: 1px solid var(--ui-line);
-        border-radius: var(--ui-r-small, 6px);
-        background: var(--ui-panel);
-        color: var(--ui-ink);
-        font: inherit;
+        border-collapse: collapse;
+        font-size: var(--md-sys-typescale-label-large-size, 14px);
+      }
+      th {
+        padding: var(--spacing-small) var(--spacing-medium);
+        border-top: 2px solid var(--md-sys-color-primary);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-primary);
+        font-weight: 500;
+        text-align: start;
+        white-space: nowrap;
+      }
+      td {
+        padding: var(--spacing-medium);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        vertical-align: top;
       }
-      input[type='time'] {
+      td.figure,
+      .figure {
         font-variant-numeric: tabular-nums;
+        white-space: nowrap;
       }
-      .shift-list {
-        display: grid;
-        gap: var(--spacing-small);
+      td.reason {
+        min-width: 16em;
       }
-      .shift-card {
-        min-width: 0;
-        padding: var(--spacing-medium);
-        border: 1px solid var(--ui-line);
-        border-radius: var(--ui-r-small, 6px);
-        background: var(--ui-panel);
+      td.actions {
+        width: 1%;
+        white-space: nowrap;
       }
-      .shift-card-head {
+      td.actions > div {
         display: flex;
-        align-items: center;
-        justify-content: space-between;
+        justify-content: flex-end;
         gap: var(--spacing-small);
-        margin-bottom: var(--spacing-medium);
-      }
-      .shift-card-head strong {
-        font-size: var(--ui-t-title);
       }
-      .shift-fields {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: var(--spacing-medium);
+      .muted {
+        color: var(--ui-muted);
       }
-      .period {
+      .shift-lines {
         display: grid;
-        grid-template-columns: minmax(88px, 0.8fr) minmax(110px, 1fr);
-        align-items: end;
-        gap: var(--spacing-small);
+        gap: 2px;
       }
-      .weekdays {
-        margin: var(--spacing-medium) 0 0;
-        padding: var(--spacing-small) var(--spacing-medium) var(--spacing-medium);
-        border: 1px solid var(--ui-line);
-        border-radius: var(--ui-r-small, 6px);
+      .shift-lines > div {
+        white-space: nowrap;
       }
-      .weekdays legend {
-        padding: 0 var(--spacing-tiny);
+      .shift-lines .figure {
         color: var(--ui-muted);
-        font-size: var(--ui-t-small);
       }
-      .week-options {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--spacing-small) var(--spacing-medium);
-      }
-      .week-options label {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--spacing-small);
+      .state {
+        display: inline-block;
+        padding: 1px var(--spacing-medium);
+        border-radius: var(--md-sys-shape-corner-small, 4px);
+        background: var(--md-sys-color-surface-container-high);
+        font-size: var(--ui-t-micro);
+        font-weight: 600;
         white-space: nowrap;
       }
-      .week-options input {
-        width: 18px;
-        min-height: 18px;
-        margin: 0;
-        accent-color: var(--ui-accent);
+      .state[data-state='current'] {
+        background: color-mix(in srgb, var(--ui-good) 18%, transparent);
       }
-      .every-day {
-        margin-top: var(--spacing-small);
+      .state[data-state='scheduled'],
+      .state[data-state='pending'],
+      .state[data-state='approved'] {
+        background: color-mix(in srgb, var(--ui-info, var(--md-sys-color-primary)) 18%, transparent);
       }
-      .shift-coverage {
-        display: grid;
-        gap: var(--spacing-small);
+      .state[data-state='rejected'] {
+        background: color-mix(in srgb, var(--ui-crit) 16%, transparent);
       }
-      .coverage-title {
-        margin: 0;
-        font-size: var(--ui-t-title);
+      tr.detail > td {
+        background: var(--md-sys-color-surface-container-lowest);
       }
-      .coverage-groups {
+
+      /* ── the editor ──────────────────────────────────────────────── */
+      .shift-rows {
+        container-type: inline-size;
         display: grid;
-        gap: var(--spacing-medium);
+        margin-bottom: var(--spacing-large);
       }
-      .history-bands,
-      .history-band-group {
+      .shift-row {
         display: grid;
-        gap: var(--spacing-small);
+        grid-template-columns:
+          minmax(110px, 1fr) minmax(184px, 1.1fr) minmax(190px, 1.1fr) minmax(392px, max-content)
+          minmax(110px, 1fr) max-content;
+        gap: var(--spacing-medium) var(--spacing-large);
+        align-items: start;
+        padding: var(--spacing-medium) 0;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      .shift-row.head {
+        padding-block: var(--spacing-small);
+        border-top: 2px solid var(--md-sys-color-primary);
+        color: var(--md-sys-color-primary);
+        font-weight: 500;
       }
-      .coverage-group {
+      .shift-row input:not([type='checkbox']),
+      .shift-row select {
+        width: 100%;
+        min-width: 0;
+      }
+      .cell {
         display: grid;
         gap: var(--spacing-small);
         min-width: 0;
-        padding: var(--spacing-medium);
-        border: 1px solid var(--ui-line);
-        border-radius: var(--ui-r-small, 6px);
-        background: var(--ui-panel);
       }
-      .coverage-group h4 {
-        margin: 0;
-        font-size: var(--ui-t-body);
-      }
-      .band {
-        position: relative;
-        height: 48px;
-        overflow: hidden;
-        border: 1px solid var(--ui-line);
-        border-radius: var(--ui-r-small, 6px);
-        background: repeating-linear-gradient(45deg, var(--ui-panel) 0 5px, var(--ui-line) 5px 6px);
-      }
-      .band[data-variant='scheduled'] {
-        height: 40px;
-      }
-      .band[data-variant='past'] {
-        height: 32px;
+      .cell-label {
+        display: none;
+        color: var(--ui-muted);
+        font-size: var(--ui-t-micro);
       }
-      .piece {
-        position: absolute;
-        inset-block: 0;
+      .clock {
         display: flex;
         align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        padding-inline: 3px;
-        border-inline: 1px solid var(--ui-panel);
-        background: var(--ui-accent);
-        color: var(--ui-on-accent);
-        font-size: var(--ui-t-small);
-        line-height: 1.2;
-        text-align: center;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .piece-label {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        gap: var(--spacing-small);
       }
-      .piece[data-overlap] {
-        background: repeating-linear-gradient(
-          -45deg,
-          var(--ui-warn) 0 5px,
-          color-mix(in srgb, var(--ui-warn) 72%, var(--ui-ink)) 5px 7px
-        );
+      .clock select {
+        flex: none;
+        width: 72px !important;
       }
-      .band[data-variant='scheduled'] .piece {
-        border: 1px dashed var(--ui-accent);
-        background: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-panel));
-        color: var(--ui-ink);
+      .clock input {
+        flex: 1;
       }
-      .band[data-variant='past'] .piece {
-        background: color-mix(in srgb, var(--ui-muted) 35%, var(--ui-panel));
-        color: var(--ui-ink);
-      }
-      .ticks {
-        display: flex;
-        justify-content: space-between;
-        gap: var(--spacing-small);
+      .derived {
         color: var(--ui-muted);
-        font: var(--ui-t-micro) var(--ui-mono);
-      }
-      .finding,
-      .settled,
-      .notice,
-      .empty {
-        padding: var(--spacing-small) var(--spacing-medium);
-        border-inline-start: 3px solid var(--ui-warn);
-        background: var(--ui-panel);
-        line-height: 1.6;
+        font-size: var(--ui-t-small);
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
       }
-      .settled {
-        border-color: var(--ui-good);
-        color: var(--ui-muted);
+      .row-issues {
+        grid-column: 1 / -1;
+        margin: 0;
+        color: var(--ui-crit);
+        font-size: var(--ui-t-small);
       }
-      .notice {
-        border-color: var(--ui-info);
+      .shift-row input[aria-invalid='true'] {
+        border-color: var(--ui-crit);
       }
-      .guidance {
-        margin: 0;
-        padding-inline-start: 1.25rem;
-        color: var(--ui-muted);
-        line-height: 1.6;
+      ox-input-select-buttons {
+        --md-chip-set-gap: 4px;
       }
-      .guidance li + li {
-        margin-top: var(--spacing-small);
+      @container (max-width: 1080px) {
+        .shift-row {
+          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        }
+        .shift-row.head {
+          display: none;
+        }
+        .cell-label {
+          display: block;
+        }
+        .cell.name,
+        .cell.days,
+        .cell.note {
+          grid-column: 1 / -1;
+        }
+        .cell.remove {
+          grid-column: 1 / -1;
+          justify-items: start;
+        }
       }
-      .empty {
-        border-color: var(--ui-line);
-        color: var(--ui-muted);
+      @container (max-width: 480px) {
+        .shift-row {
+          grid-template-columns: minmax(0, 1fr);
+        }
       }
-      .history-list {
+
+      .form-grid {
         display: grid;
-        gap: var(--spacing-medium);
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+        gap: var(--spacing-large);
       }
-      .history-item {
+      .field {
         display: grid;
+        align-content: start;
         gap: var(--spacing-small);
         min-width: 0;
-        padding-block: var(--spacing-small);
-        border-bottom: 1px solid var(--ui-line);
       }
-      .history-head {
-        justify-content: flex-start;
-      }
-      .history-period {
+      .field > span:first-child {
         color: var(--ui-muted);
-        font-variant-numeric: tabular-nums;
+        font-size: var(--ui-t-micro);
       }
-      .history-actions {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-small);
-        margin-inline-start: auto;
-      }
-      .status {
-        display: inline-flex;
-        align-items: center;
-        min-height: 26px;
-        padding: 2px 9px;
-        border-radius: 999px;
-        background: var(--ui-accent-wash);
-        color: var(--ui-ink);
-      }
-      .status[data-state='current'],
-      .status[data-state='approved'] {
-        background: color-mix(in srgb, var(--ui-good) 16%, var(--ui-panel));
-      }
-      .status[data-state='pending'],
-      .status[data-state='scheduled'] {
-        background: color-mix(in srgb, var(--ui-info) 16%, var(--ui-panel));
+      .field input,
+      .field select {
+        width: 100%;
       }
-      .status[data-state='rejected'] {
-        background: color-mix(in srgb, var(--ui-warn) 18%, var(--ui-panel));
+      .field .error {
+        color: var(--ui-crit);
+        font-size: var(--ui-t-small);
       }
-      .history-detail {
-        margin-top: var(--spacing-small);
+      .when {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-medium);
       }
-      button {
-        min-height: var(--form-action-height, 40px);
-        border-radius: var(--ui-r-small, 6px);
+      .when input {
+        flex: 1;
+        min-width: 200px;
       }
-      button:focus-visible,
-      input:focus-visible,
-      select:focus-visible,
-      summary:focus-visible {
-        outline-color: var(--ui-accent);
+      .alert {
+        margin: 0;
+        padding: var(--spacing-medium) var(--spacing-large);
+        border-inline-start: 3px solid var(--ui-crit);
+        background: color-mix(in srgb, var(--ui-crit) 8%, transparent);
       }
-      @media (max-width: 640px) {
-        .shift-fields {
+
+      @media (max-width: 600px) {
+        .day-groups {
           grid-template-columns: minmax(0, 1fr);
+          gap: var(--spacing-small);
         }
-        .period {
-          grid-template-columns: minmax(82px, 0.8fr) minmax(0, 1fr);
-        }
-        .history-actions {
-          width: 100%;
-          margin-inline-start: 0;
-        }
-        .history-actions button {
-          flex: 1;
-        }
-        .piece {
-          font-size: var(--ui-t-micro);
+        .piece .time {
+          display: none;
         }
       }
     `
     ]; }
     get context() {
-        return { title: i18next.t('title.work-shift'), frame: 'document', help: 'page/work-shift' };
-    }
-    async pageUpdated() {
-        if (this.active && !this.dirty)
-            await this.load();
-    }
-    current() {
-        const segment = this.overview?.schedule.find((s) => s.state === 'current');
-        return segment && this.overview.revisions.find((r) => r.id === segment.revisionId);
+        return {
+            title: t('title.work-shift'),
+            frame: 'document',
+            help: 'page/work-shift',
+            actions: this.actions()
+        };
     }
-    async run(action) {
-        this.busy = true;
-        this.message = '';
-        try {
-            await action();
-        }
-        catch (e) {
-            this.message = e.message;
-        }
-        finally {
-            this.busy = false;
+    actions() {
+        if (!this.overview || this.error)
+            return [];
+        if (!this.draft) {
+            return [{ title: t('button.change-shifts'), icon: 'edit', emphasis: { raised: true }, action: () => this.begin() }];
         }
+        const approval = this.overview.approvalRequired;
+        return [
+            { title: t('button.cancel'), action: () => this.close() },
+            ...(approval ? [{ title: rt('save-draft'), action: () => this.saveDraft() }] : []),
+            {
+                title: approval ? rt('request-approval') : t('button.save'),
+                icon: approval ? 'send' : 'save',
+                emphasis: { raised: true },
+                action: () => this.commit()
+            }
+        ];
     }
+    async pageUpdated(changes) {
+        if (this.active && changes.active && !this.draft)
+            await this.load();
+    }
+    /* ── data ──────────────────────────────────────────────────────────── */
     async load() {
-        await this.run(async () => {
+        this.loading = true;
+        this.error = null;
+        try {
             const result = await client.query({
                 query: gql `
           query {
@@ -391,464 +441,678 @@ let WorkShift = class WorkShift extends PageView {
                 fetchPolicy: 'no-cache'
             });
             if (result.errors?.length)
-                throw new Error(result.errors[0].message);
+                throw result.errors[0];
             this.overview = result.data.workShiftRevisionOverview;
-            const statuses = {};
-            for (const row of this.overview.revisions.filter((r) => r.activityInstanceId)) {
-                let promise;
-                document.dispatchEvent(new CustomEvent('master-change-status', {
-                    detail: { activityInstanceId: row.activityInstanceId, respondWith: (p) => (promise = p) }
-                }));
-                if (promise)
-                    statuses[row.id] = await promise;
-            }
-            this.statuses = statuses;
-        });
+            this.approvals = await this.readApprovals(this.overview.revisions);
+        }
+        catch (e) {
+            this.error = e;
+        }
+        finally {
+            this.loading = false;
+            this.updateContext();
+        }
     }
-    begin(row = this.current()) {
+    /** Approval states come from ops-master's approval flow, one revision at a time. */
+    async readApprovals(revisions) {
+        const approvals = {};
+        for (const row of revisions.filter(r => r.activityInstanceId)) {
+            let promise;
+            document.dispatchEvent(new CustomEvent('master-change-status', {
+                detail: { activityInstanceId: row.activityInstanceId, respondWith: (p) => (promise = p) }
+            }));
+            if (promise)
+                approvals[row.id] = await promise.catch(() => ({ state: 'unknown' }));
+        }
+        return approvals;
+    }
+    get placed() {
+        return placeRevisions(this.overview ?? { revisions: [], schedule: [] }, this.approvals);
+    }
+    /* ── editing ───────────────────────────────────────────────────────── */
+    begin(from) {
+        const base = from ?? this.placed.current?.row;
+        const shifts = base?.shifts ?? this.overview.legacyShifts ?? [];
         this.draft = {
-            description: row?.description ?? '',
-            timezone: row?.timezone ?? this.overview.timezone,
-            shifts: structuredClone(row?.shifts ??
-                (this.overview.legacyShifts?.length
-                    ? this.overview.legacyShifts
-                    : [{ name: '', fromDate: 0, fromTime: '08:00', toDate: 0, toTime: '16:00', daysOfWeek: '' }])),
+            description: base?.description ?? '',
+            timezone: base?.timezone ?? this.overview.timezone,
+            shifts: shifts.length ? shifts.map(shift => settle({ ...shift })) : [nextShift([])],
+            effectiveMode: 'now',
             effectiveFrom: new Date().toISOString(),
             reason: ''
         };
+        this.enterEditor();
+    }
+    resume(row) {
+        this.draft = {
+            id: row.id,
+            editGeneration: row.editGeneration,
+            revisionNumber: row.revisionNumber,
+            description: row.description ?? '',
+            timezone: row.timezone ?? this.overview.timezone,
+            shifts: (row.shifts ?? []).map(shift => settle({ ...shift })),
+            effectiveMode: 'at',
+            effectiveFrom: row.effectiveFrom ?? new Date().toISOString(),
+            reason: row.reason ?? ''
+        };
+        this.enterEditor();
+    }
+    enterEditor() {
         this.dirty = false;
+        this.tried = false;
+        this.saveError = '';
+        this.updateContext();
+        /* The document frame scrolls the page element itself. */
+        this.scrollTo({ top: 0 });
     }
-    change(field, value) {
-        this.draft = { ...this.draft, [field]: value };
+    async close() {
+        if (this.busy)
+            return;
+        if (this.dirty &&
+            !(await OxPrompt.open({
+                type: 'warning',
+                title: rt('discard-question'),
+                confirmButton: { text: rt('discard'), destructive: true },
+                cancelButton: { text: rt('keep-editing') }
+            })))
+            return;
+        this.draft = undefined;
+        this.dirty = false;
+        this.updateContext();
+        await this.load();
+    }
+    change(patch) {
+        this.draft = { ...this.draft, ...patch };
         this.dirty = true;
     }
-    changeShift(index, field, value) {
-        this.change('shifts', this.draft.shifts.map((s, i) => (i === index ? { ...s, [field]: value } : s)));
-    }
-    async save() {
-        await this.run(async () => {
-            const { description, timezone, shifts, effectiveFrom, reason } = this.draft;
-            const content = { description, timezone, shifts, effectiveFrom, reason };
-            const editing = !!this.draft.id;
-            const response = await client.mutate({
-                mutation: editing
-                    ? gql `
+    changeShift(index, patch) {
+        this.change({ shifts: this.draft.shifts.map((s, i) => (i === index ? settle({ ...s, ...patch }) : s)) });
+    }
+    content() {
+        const { description, timezone, shifts, effectiveMode, effectiveFrom, reason } = this.draft;
+        return {
+            description,
+            timezone,
+            shifts: shiftsContent(shifts),
+            effectiveFrom: effectiveMode === 'now' ? new Date().toISOString() : effectiveFrom,
+            reason: reason.trim()
+        };
+    }
+    async run(work) {
+        if (this.busy)
+            return undefined;
+        this.busy = true;
+        this.saveError = '';
+        try {
+            return await work();
+        }
+        catch (e) {
+            /* The GraphQL client already announces server refusals and network failures; say only what it does not. */
+            if (!(e?.reported || e?.graphQLErrors?.length || e?.networkError))
+                this.saveError = e?.message ?? String(e);
+            return undefined;
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    async mutate(mutation, variables, field) {
+        const response = await client.mutate({ mutation, variables });
+        if (response.errors?.length)
+            throw Object.assign(new Error(response.errors[0].message), { reported: true });
+        return response.data[field];
+    }
+    /** Saves the editor as a draft and keeps it open. Returns false when it did not save. */
+    async saveDraft(quiet = false) {
+        this.tried = true;
+        if (draftIssues(this.draft).blocking)
+            return false;
+        const saved = await this.run(async () => {
+            const draft = this.draft;
+            const row = draft.id
+                ? await this.mutate(gql `
               mutation ($revisionId: String!, $editGeneration: Int!, $content: Object!) {
                 editWorkShiftDraft(revisionId: $revisionId, editGeneration: $editGeneration, content: $content)
               }
-            `
-                    : gql `
+            `, { revisionId: draft.id, editGeneration: draft.editGeneration, content: this.content() }, 'editWorkShiftDraft')
+                : await this.mutate(gql `
               mutation ($content: Object!) {
                 createWorkShiftDraft(content: $content)
               }
-            `,
-                variables: {
-                    content,
-                    ...(editing ? { revisionId: this.draft.id, editGeneration: this.draft.editGeneration } : {})
-                }
-            });
-            if (response.errors?.length)
-                throw new Error(response.errors[0].message);
-            this.draft = response.data[editing ? 'editWorkShiftDraft' : 'createWorkShiftDraft'];
+            `, { content: this.content() }, 'createWorkShiftDraft');
+            this.draft = { ...draft, id: row.id, editGeneration: row.editGeneration, revisionNumber: row.revisionNumber };
             this.dirty = false;
+            return true;
         });
-        if (!this.message)
-            await this.load();
+        if (saved && !quiet)
+            notify({ message: rt('saved') });
+        return !!saved;
     }
-    async submit() {
-        await this.run(async () => {
-            if (this.overview.approvalRequired) {
+    /** Puts the change into effect, or asks for approval where the site requires it. */
+    async commit() {
+        this.tried = true;
+        if (draftIssues(this.draft).blocking)
+            return;
+        const approval = this.overview.approvalRequired;
+        if (approval && (this.dirty || !this.draft.id) && !(await this.saveDraft(true)))
+            return;
+        const done = await this.run(async () => {
+            const draft = this.draft;
+            if (approval) {
                 let promise;
                 document.dispatchEvent(new CustomEvent('master-change-approval', {
                     detail: {
                         axis: 'workShift',
-                        revisionId: this.draft.id,
-                        editGeneration: this.draft.editGeneration,
+                        revisionId: draft.id,
+                        editGeneration: draft.editGeneration,
                         respondWith: (p) => (promise = p)
                     }
                 }));
                 if (!promise)
-                    throw new Error(t('approval-unavailable'));
+                    throw new Error(rt('approval-unavailable'));
                 await promise;
             }
             else {
-                const { description, timezone, shifts, effectiveFrom, reason } = this.draft;
-                const result = await client.mutate({
-                    mutation: gql `
+                await this.mutate(gql `
             mutation ($revisionId: String, $editGeneration: Int, $content: Object!) {
               saveAndPublishWorkShift(revisionId: $revisionId, editGeneration: $editGeneration, content: $content)
             }
-          `,
-                    variables: {
-                        revisionId: this.draft.id,
-                        editGeneration: this.draft.editGeneration,
-                        content: { description, timezone, shifts, effectiveFrom, reason }
-                    }
-                });
-                if (result.errors?.length)
-                    throw new Error(result.errors[0].message);
+          `, { revisionId: draft.id, editGeneration: draft.editGeneration, content: this.content() }, 'saveAndPublishWorkShift');
             }
-            this.draft = undefined;
-            this.dirty = false;
+            return true;
         });
-        if (!this.message)
-            await this.load();
+        if (!done)
+            return;
+        notify({ message: rt(approval ? 'submitted' : 'published') });
+        this.draft = undefined;
+        this.dirty = false;
+        this.updateContext();
+        await this.load();
     }
-    rowStatus(row) {
-        const segment = this.overview.schedule.find((s) => s.revisionId === row.id);
-        return segment?.state ?? this.statuses[row.id]?.state ?? (row.frozenAt ? 'pending' : 'draft');
-    }
-    weekdays(row, index) {
-        const days = row.daysOfWeek ? row.daysOfWeek.split(',') : ['0', '1', '2', '3', '4', '5', '6'];
-        return html `<fieldset class="weekdays">
-      <legend>${t('daysOfWeek')}</legend>
-      <div class="week-options">
-        ${['1', '2', '3', '4', '5', '6', '0'].map(day => html `<label
-              ><input
-                type="checkbox"
-                ?disabled=${this.busy}
-                .checked=${days.includes(day)}
-                @change=${(e) => {
-            const next = e.target.checked ? [...days, day] : days.filter((d) => d !== day);
-            if (!next.length) {
-                e.target.checked = true;
-                return;
-            }
-            this.changeShift(index, 'daysOfWeek', next.length === 7 ? '' : [...new Set(next)].sort().join(','));
-        }}
-              />${t('weekday-' + day)}</label
-            >`)}
-      </div>
-      <button
-        class="every-day"
-        ?disabled=${this.busy || days.length === 7}
-        @click=${() => this.changeShift(index, 'daysOfWeek', '')}
-      >
-        ${t('every-day')}
-      </button>
-      <small class="field-label">${i18next.t('text.weekday-workdate-note')}</small>
-    </fieldset>`;
-    }
-    timeLabel(minute) {
-        const time = clockOf(minute);
-        return minute >= DAY_MINUTES ? i18next.t('text.next-day-time', { time: clockOf(minute - DAY_MINUTES) }) : time;
-    }
-    band(shifts, variant) {
-        const cycle = cycleOf(shifts);
-        if (!cycle)
+    clock(minute) {
+        return minute >= DAY_MINUTES
+            ? `${this.dayWord(1)} ${clockOf(minute - DAY_MINUTES)}`
+            : minute < 0
+                ? `${this.dayWord(-1)} ${clockOf(minute + DAY_MINUTES)}`
+                : clockOf(minute);
+    }
+    span(from, to) {
+        return `${this.clock(from)} – ${this.clock(to)}`;
+    }
+    hours(minutes) {
+        if (minutes === undefined)
             return '';
-        const overlaps = new Set(coverageProblems(shifts)
-            .filter(problem => problem.kind === 'overlap')
-            .flatMap(problem => problem.names));
+        const h = Math.floor(minutes / 60);
+        const m = minutes % 60;
+        return m ? t('text.hours-minutes', { h, m }) : t('text.hours', { h });
+    }
+    daysText(days) {
+        return daysLabel(days, day => rt('weekday-' + day), rt('every-day'));
+    }
+    bar(shifts) {
+        const line = timelineOf(shifts);
+        if (!line)
+            return html `<div class="day-none">${t('text.no-shift-on-these-days')}</div>`;
+        const label = (piece) => piece.kind === 'shift'
+            ? `${piece.names[0]} ${this.span(piece.fromMinute, piece.toMinute)}`
+            : piece.kind === 'gap'
+                ? t('text.shift-gap-span', { span: this.span(piece.fromMinute, piece.toMinute) })
+                : t('text.shift-overlap-span', { span: this.span(piece.fromMinute, piece.toMinute), first: piece.names[0], second: piece.names[1] });
         return html `<div>
-      <div
-        class="band"
-        data-variant=${variant}
-        role="img"
-        aria-label=${shifts.map(shift => `${shift.name}: ${t('day-offset-' + (shift.fromDate ?? 0))} ${shift.fromTime}–${t('day-offset-' + (shift.toDate ?? 0))} ${shift.toTime}`).join(', ')}
-      >
-        ${shifts.map(shift => {
-            const span = spanOf(shift);
-            if (!span || span.toMinute <= span.fromMinute)
-                return '';
-            const left = Math.max(cycle.startMinute, span.fromMinute);
-            const right = Math.min(cycle.endMinute, span.toMinute);
-            if (right <= left)
-                return '';
-            const label = `${shift.name} ${t('day-offset-' + (shift.fromDate ?? 0))} ${shift.fromTime}–${t('day-offset-' + (shift.toDate ?? 0))} ${shift.toTime}`;
-            return html `<div
-            class="piece"
-            ?data-overlap=${overlaps.has(shift.name)}
-            title=${label}
-            style=${`left:${((left - cycle.startMinute) / DAY_MINUTES) * 100}%;width:${((right - left) / DAY_MINUTES) * 100}%`}
-          >
-            <span class="piece-label">${label}</span>
-          </div>`;
-        })}
+      <div class="bar" role="img" aria-label=${line.pieces.map(label).join(', ')}>
+        ${line.midnights.map(left => html `<div class="midnight" style="left:${left}%"></div>`)}
+        ${line.pieces.map(piece => html `<div class="piece" data-kind=${piece.kind} style="left:${piece.left}%;width:${piece.width}%" title=${label(piece)}>
+              ${piece.kind === 'shift'
+            ? html `<strong>${piece.names[0]}</strong
+                    ><span class="time">${clockOf(((piece.fromMinute % DAY_MINUTES) + DAY_MINUTES) % DAY_MINUTES)}–${clockOf(((piece.toMinute % DAY_MINUTES) + DAY_MINUTES) % DAY_MINUTES)}</span>`
+            : nothing}
+            </div>`)}
       </div>
-      <div class="ticks">
-        ${[0, 6, 12, 18, 24].map(hour => html `<span>${this.timeLabel(cycle.startMinute + hour * 60)}</span>`)}
+      <div class="axis" aria-hidden="true">
+        ${line.ticks.map((minute, i) => html `<span style="left:${i * 25}%">${clockOf(((minute % DAY_MINUTES) + DAY_MINUTES) % DAY_MINUTES)}</span>`)}
       </div>
     </div>`;
     }
-    problemText(problem) {
-        const span = problem.fromMinute === undefined || problem.toMinute === undefined
-            ? ''
-            : `${this.timeLabel(problem.fromMinute)}–${this.timeLabel(problem.toMinute)}`;
-        if (problem.kind === 'gap')
-            return i18next.t('text.shift-gap', { span, before: problem.names[0], after: problem.names[1] });
-        if (problem.kind === 'overlap')
-            return i18next.t('text.shift-overlap', { span, first: problem.names[0], second: problem.names[1] });
-        return i18next.t('text.shift-not-a-span', { name: problem.names[0] || '—' });
-    }
-    weekGroups(shifts) {
-        const groups = new Map();
-        for (const day of ['1', '2', '3', '4', '5', '6', '0']) {
-            const active = shifts.filter(shift => !shift.daysOfWeek || shift.daysOfWeek.split(',').includes(day));
-            const key = shifts
-                .map((shift, index) => (active.includes(shift) ? String(index) : ''))
-                .filter(Boolean)
-                .join(',');
-            const group = groups.get(key) ?? { days: [], shifts: active };
-            group.days.push(day);
-            groups.set(key, group);
-        }
-        return [...groups.values()];
+    /**
+     * The day bars of an arrangement, one per group of weekdays that run the same shifts, and what is wrong with them.
+     * The editor passes the week's overlaps: they include a Friday night running into Saturday, which no single
+     * day's bar shows, and the server refuses every one of them.
+     */
+    timeline(shifts, weekOverlaps) {
+        const groups = weekGroups(shifts);
+        const findings = groups.flatMap(group => coverageProblems(group.shifts)
+            .filter(problem => problem.kind === 'gap' || (problem.kind === 'overlap' && !weekOverlaps))
+            .map(problem => ({ group, problem })));
+        const firstGap = findings.findIndex(({ problem }) => problem.kind === 'gap');
+        const prefix = (days) => (groups.length > 1 ? `${this.daysText(days)} · ` : '');
+        return html `
+      <div class="day-groups">
+        ${groups.map(group => html `<div class="day-label">${this.daysText(group.days)}</div>
+              ${group.shifts.length ? this.bar(group.shifts) : html `<div class="day-none">${t('text.no-shift-on-these-days')}</div>`}`)}
+      </div>
+      ${findings.length || weekOverlaps?.length
+            ? html `<ul class="findings">
+            ${findings.map(({ group, problem }, index) => problem.kind === 'gap'
+                ? html `<li data-kind="gap">
+                    <span
+                      >${prefix(group.days)}${t('text.shift-gap-span', { span: this.span(problem.fromMinute, problem.toMinute) })}
+                      ${index === firstGap ? html `<span class="why">${t('text.shift-gap-why')}</span>` : nothing}</span
+                    >
+                  </li>`
+                : html `<li data-kind="overlap">
+                    <span
+                      >${prefix(group.days)}${t('text.shift-overlap-span', {
+                    span: this.span(problem.fromMinute, problem.toMinute),
+                    first: problem.names[0],
+                    second: problem.names[1]
+                })}</span
+                    >
+                  </li>`)}
+            ${(weekOverlaps ?? []).map(overlap => html `<li data-kind="error">
+                  <span
+                    >${t('text.shift-overlap-on-days', {
+                days: this.daysText(overlap.days),
+                span: this.span(overlap.fromMinute, overlap.toMinute),
+                first: overlap.names[0],
+                second: overlap.names[1]
+            })}</span
+                  >
+                </li>`)}
+          </ul>`
+            : nothing}
+    `;
     }
-    weekLabel(days, showEveryDay) {
-        return showEveryDay && days.length === 7 ? t('every-day') : days.map(day => t('weekday-' + day)).join(' · ');
+    shiftTable(shifts) {
+        return html `<div class="table-scroll">
+      <table>
+        <thead>
+          <tr>
+            <th>${t('field.shift')}</th>
+            <th>${t('field.shift-hours')}</th>
+            <th>${rt('daysOfWeek')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${shifts.map(shift => html `<tr>
+                <td>${shift.name}${shift.description ? html `<div class="muted">${shift.description}</div>` : nothing}</td>
+                <td class="figure">${timeRange(shift, this.dayWord)} <span class="muted">· ${this.hours(lengthOf(shift))}</span></td>
+                <td>${this.daysText(daysOf(shift.daysOfWeek))}</td>
+              </tr>`)}
+        </tbody>
+      </table>
+    </div>`;
     }
-    historyBands(shifts, variant) {
-        const groups = this.weekGroups(shifts);
-        return html `<div class="history-bands">
-      ${groups.map(group => html `<div class="history-band-group">
-            ${groups.length > 1 ? html `<h4>${this.weekLabel(group.days, true)}</h4>` : ''}
-            ${group.shifts.length ? this.band(group.shifts, variant) : html `<div class="empty">${i18next.t('text.no-shifts-on-day')}</div>`}
+    shiftLines(shifts = []) {
+        return html `<div class="shift-lines">
+      ${shifts.map(shift => html `<div>
+            ${shift.name} <span class="figure">${timeRange(shift, this.dayWord)}</span>
+            ${daysOf(shift.daysOfWeek).length < WEEK.length ? html `<span class="muted">${this.daysText(daysOf(shift.daysOfWeek))}</span>` : nothing}
           </div>`)}
     </div>`;
     }
-    coverage(shifts, variant) {
-        if (!shifts.length)
-            return html `<div class="empty">${i18next.t('text.no-shifts-declared')}</div>`;
-        const dayGroups = this.weekGroups(shifts);
-        return html `<section class="shift-coverage" aria-label=${i18next.t('title.shift-coverage')}>
-      <h3 class="coverage-title">${i18next.t('title.shift-coverage')}</h3>
-      <div class="coverage-groups">
-        ${dayGroups.map(group => {
-            const problems = coverageProblems(group.shifts);
-            const cycle = cycleOf(group.shifts);
-            const covered = coveredMinutes(group.shifts);
-            const label = this.weekLabel(group.days, dayGroups.length === 1);
-            return html `<div class="coverage-group">
-            ${dayGroups.length > 1 ? html `<h4>${label}</h4>` : ''}
-            ${group.shifts.length
-                ? html `
-                    ${cycle ? this.band(group.shifts, variant) : ''}
-                    ${covered < DAY_MINUTES ? html `<div class="finding">${i18next.t('text.shift-covers-less-than-a-day', { hours: Math.round(covered / 6) / 10 })}</div>` : ''}
-                    ${problems.map(problem => html `<div class="finding" role="status">${this.problemText(problem)}</div>`)}
-                    ${!problems.length && covered >= DAY_MINUTES ? html `<div class="settled">${i18next.t('text.shift-covers-the-whole-day')}</div>` : ''}
-                  `
-                : html `<div class="empty">${i18next.t('text.no-shifts-on-day')}</div>`}
-          </div>`;
+    stateTag(state) {
+        return html `<span class="state" data-state=${state}>${rt(state)}</span>`;
+    }
+    period(item) {
+        if (!item.period)
+            return html `<span class="muted">${t('text.from-time', { time: revisionDate(item.row.effectiveFrom) })}</span>`;
+        return item.period.to
+            ? `${revisionDate(item.period.from)} – ${revisionDate(item.period.to)}`
+            : t('text.from-time', { time: revisionDate(item.period.from) });
+    }
+    /* ── view ──────────────────────────────────────────────────────────── */
+    viewCurrent(placed) {
+        const current = placed.current;
+        const legacy = !current ? this.overview.legacyShifts ?? [] : [];
+        return html `<section class="page-section">
+      <header class="page-section-header"><h3>${t('title.shift-current')}</h3></header>
+      ${current
+            ? html `<p class="page-section-note">
+            ${t('text.from-time', { time: revisionDate(current.period.from) })} · ${current.row.timezone}
+          </p>`
+            : nothing}
+      ${current?.row.shifts?.length || legacy.length
+            ? html `<div class="arrangement">
+            ${this.timeline(current?.row.shifts ?? legacy)} ${this.shiftTable(current?.row.shifts ?? legacy)}
+          </div>`
+            : html `<ox-list-state
+            .scale=${{ shown: 0, loaded: 0 }}
+            .emptyNote=${{ icon: 'schedule', title: t('text.no-shifts-declared') }}
+          ></ox-list-state>`}
+    </section>`;
+    }
+    viewScheduled(placed) {
+        if (!placed.scheduled.length)
+            return nothing;
+        return html `<section class="page-section">
+      <header class="page-section-header"><h3>${t('title.shift-announcements')}</h3></header>
+      ${placed.scheduled.map(
+        /* The bar only: the shifts themselves are listed in the history row right below. */
+        item => html `<p class="page-section-note">
+            ${t('text.from-time', { time: revisionDate(item.period.from) })}${item.row.reason ? ` · ${item.row.reason}` : ''}
+          </p>
+          <div class="arrangement">${this.timeline(item.row.shifts ?? [])}</div>`)}
+    </section>`;
+    }
+    /** A person's reason as written; the recorded first arrangement in plain words, with where it came from. */
+    reasonCell(row, approval) {
+        return html `<td class="reason">
+      ${reasonOf(row, t('text.shift-baseline'))}
+      ${isBaseline(row) ? html `<div class="muted">${t('text.shift-baseline-why')}</div>` : nothing}
+      ${approval?.comment ? html `<div class="muted">${approval.comment}</div>` : nothing}
+    </td>`;
+    }
+    viewOpen(placed) {
+        if (!placed.open.length)
+            return nothing;
+        return html `<section class="page-section">
+      <header class="page-section-header"><h3>${t('title.shift-open-changes')}</h3></header>
+      <div class="table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th>${rt('state')}</th>
+              <th>${rt('effectiveFrom')}</th>
+              <th>${t('field.shift')}</th>
+              <th>${rt('reason')}</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            ${placed.open.map(item => {
+            const approval = this.approvals[item.row.id];
+            const open = this.opened === item.row.id;
+            return html `<tr>
+                  <td>${this.stateTag(item.state)}</td>
+                  <td class="figure">${revisionDate(item.row.effectiveFrom)}</td>
+                  <td>${this.shiftLines(item.row.shifts)}</td>
+                  ${this.reasonCell(item.row, approval)}
+                  <td class="actions">
+                    <div>
+                      ${item.state === 'draft'
+                ? html `<button small @click=${() => this.resume(item.row)}>${t('button.continue-editing')}</button>`
+                : html `<button small quiet @click=${() => (this.opened = open ? undefined : item.row.id)}>
+                            ${open ? t('button.close') : rt('changes')}
+                          </button>`}
+                      ${approval?.open ? html `<button small @click=${() => approval.open()}>${rt('approval-detail')}</button>` : nothing}
+                    </div>
+                  </td>
+                </tr>
+                ${open
+                ? html `<tr class="detail">
+                      <td colspan="5">
+                        <ops-master-revision-comparison
+                          axis="workShift"
+                          .before=${this.overview.revisions.find((r) => r.id === item.row.baseRevisionId)}
+                          .after=${item.row}
+                        ></ops-master-revision-comparison>
+                      </td>
+                    </tr>`
+                : nothing}`;
         })}
+          </tbody>
+        </table>
       </div>
     </section>`;
     }
-    shiftEditor(row, index) {
-        const period = (side) => html `<label class="field">
-        <span>${t(side === 'from' ? 'fromTime' : 'toTime')}</span>
-        <span class="period">
+    viewHistory(placed) {
+        return html `<section class="page-section">
+      <header class="page-section-header"><h3>${t('title.shift-history')}</h3></header>
+      ${placed.history.length
+            ? html `<div class="table-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th>${t('field.revision-number')}</th>
+                  <th>${rt('state')}</th>
+                  <th>${t('field.shift-period')}</th>
+                  <th>${t('field.shift')}</th>
+                  <th>${rt('reason')}</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                ${placed.history.map(item => {
+                const approval = this.approvals[item.row.id];
+                return html `<tr>
+                    <td class="figure">${item.row.revisionNumber}</td>
+                    <td>${this.stateTag(item.state)}</td>
+                    <td class="figure">${this.period(item)}</td>
+                    <td>${this.shiftLines(item.row.shifts)}</td>
+                    ${this.reasonCell(item.row, approval)}
+                    <td class="actions">
+                      <div>
+                        ${approval?.open ? html `<button small quiet @click=${() => approval.open()}>${rt('approval-detail')}</button>` : nothing}
+                        <button small @click=${() => this.begin(item.row)}>${t('button.change-from-this')}</button>
+                      </div>
+                    </td>
+                  </tr>`;
+            })}
+              </tbody>
+            </table>
+          </div>`
+            : html `<ox-list-state .scale=${{ shown: 0, loaded: 0 }} .emptyNote=${{ title: t('text.no-shift-history') }}></ox-list-state>`}
+    </section>`;
+    }
+    /* ── editor ────────────────────────────────────────────────────────── */
+    issueText(issue) {
+        return t('text.shift-issue-' + issue);
+    }
+    shiftRow(shift, index, issues) {
+        const draft = this.draft;
+        const nameBad = issues.includes('name-missing') || issues.includes('name-duplicate');
+        const timeBad = issues.includes('time-missing') || issues.includes('ends-too-late');
+        const length = lengthOf(shift);
+        return html `<div class="shift-row">
+      <label class="cell name">
+        <span class="cell-label">${rt('name')}</span>
+        <input
+          .value=${shift.name ?? ''}
+          aria-label=${rt('name')}
+          aria-invalid=${nameBad && (this.tried || !!shift.name) ? 'true' : 'false'}
+          ?disabled=${this.busy}
+          @input=${(e) => this.changeShift(index, { name: e.target.value })}
+        />
+      </label>
+      <div class="cell">
+        <span class="cell-label">${t('field.shift-start')}</span>
+        <div class="clock">
           <select
+            aria-label=${rt('fromDate')}
             ?disabled=${this.busy}
-            aria-label=${t(side === 'from' ? 'fromDate' : 'toDate')}
-            .value=${String(row[side + 'Date'] ?? 0)}
-            @change=${(e) => this.changeShift(index, side + 'Date', Number(e.target.value))}
+            @change=${(e) => this.changeShift(index, { fromDate: Number(e.target.value) })}
           >
-            ${[-1, 0, 1].map(day => html `<option value=${day}>${t('day-offset-' + day)}</option>`)}
+            ${[-1, 0, 1].map(day => html `<option value=${day} ?selected=${Number(shift.fromDate ?? 0) === day}>${this.dayWord(day)}</option>`)}
           </select>
           <input
+            type="time"
+            .value=${String(shift.fromTime ?? '').slice(0, 5)}
+            aria-label=${rt('fromTime')}
+            aria-invalid=${timeBad && this.tried ? 'true' : 'false'}
             ?disabled=${this.busy}
-            aria-label=${t(side === 'from' ? 'fromTime' : 'toTime')}
+            @input=${(e) => this.changeShift(index, { fromTime: e.target.value })}
+          />
+        </div>
+      </div>
+      <div class="cell">
+        <span class="cell-label">${t('field.shift-end')}</span>
+        <div class="clock">
+          <input
             type="time"
-            .value=${row[side + 'Time'] ?? ''}
-            @input=${(e) => this.changeShift(index, side + 'Time', e.target.value)}
+            .value=${String(shift.toTime ?? '').slice(0, 5)}
+            aria-label=${rt('toTime')}
+            aria-invalid=${timeBad && this.tried ? 'true' : 'false'}
+            ?disabled=${this.busy}
+            @input=${(e) => this.changeShift(index, { toTime: e.target.value })}
           />
-        </span>
-      </label>`;
-        return html `<article class="shift-card">
-      <header class="shift-card-head">
-        <strong>${row.name || `${i18next.t('field.shift')} ${index + 1}`}</strong>
+          <span class="derived"
+            >${shift.toDate ? `${this.dayWord(shift.toDate)} · ` : ''}${this.hours(length)}</span
+          >
+        </div>
+      </div>
+      <div class="cell days">
+        <span class="cell-label">${rt('daysOfWeek')}</span>
+        <ox-input-select-buttons
+          multiple
+          aria-label=${rt('daysOfWeek')}
+          .options=${WEEK.map(day => ({ display: rt('weekday-' + day), value: day }))}
+          .value=${daysOf(shift.daysOfWeek)}
+          ?disabled=${this.busy}
+          @change=${(e) => {
+            const value = daysValue(e.detail ?? []);
+            /* A shift on no day is not a shift: keep the last day chosen. */
+            if (value === undefined)
+                e.target.value = daysOf(shift.daysOfWeek);
+            else
+                this.changeShift(index, { daysOfWeek: value });
+        }}
+        ></ox-input-select-buttons>
+      </div>
+      <label class="cell note">
+        <span class="cell-label">${rt('description')}</span>
+        <input
+          .value=${shift.description ?? ''}
+          aria-label=${rt('description')}
+          ?disabled=${this.busy}
+          @input=${(e) => this.changeShift(index, { description: e.target.value })}
+        />
+      </label>
+      <div class="cell remove">
         <button
-          ?disabled=${this.busy || this.draft.shifts.length === 1}
-          aria-label=${`${t('remove')} ${row.name || index + 1}`}
-          @click=${() => this.change('shifts', this.draft.shifts.filter((_, i) => i !== index))}
+          small
+          quiet
+          danger
+          ?disabled=${this.busy || draft.shifts.length === 1}
+          aria-label=${`${rt('remove')} ${shift.name || index + 1}`}
+          @click=${() => this.change({ shifts: draft.shifts.filter((_, i) => i !== index) })}
         >
-          ${t('remove')}
+          ${rt('remove')}
         </button>
-      </header>
-      <div class="field-grid">
-        <label class="field"
-          ><span>${t('name')}</span
-          ><input
-            ?disabled=${this.busy}
-            .value=${row.name ?? ''}
-            @input=${(e) => this.changeShift(index, 'name', e.target.value)}
-        /></label>
-        <label class="field"
-          ><span>${t('description')}</span
-          ><input
-            ?disabled=${this.busy}
-            .value=${row.description ?? ''}
-            @input=${(e) => this.changeShift(index, 'description', e.target.value)}
-        /></label>
       </div>
-      <div class="shift-fields">${period('from')}${period('to')}</div>
-      ${this.weekdays(row, index)}
-    </article>`;
+      ${issues.length && (this.tried || issues.some(issue => issue === 'name-duplicate' || issue === 'ends-too-late'))
+            ? html `<p class="row-issues">${issues.map(issue => this.issueText(issue)).join(' · ')}</p>`
+            : nothing}
+    </div>`;
     }
-    render() {
-        const current = this.current();
-        const base = this.draft && this.overview?.revisions.find((r) => r.id === this.draft.baseRevisionId);
-        return html `<div class="page">
-      <div class="page-actions">
-        <div class="action-row">
-          <button ?disabled=${this.busy || this.dirty} @click=${() => this.load()}>${t('refresh')}</button>
-          <button class="primary" ?disabled=${this.busy || !this.overview || !!this.draft} @click=${() => this.begin()}>
-            ${t('create-change')}
-          </button>
+    editor() {
+        const draft = this.draft;
+        const issues = draftIssues(draft);
+        const timezones = Intl.supportedValuesOf?.('timeZone') ?? [];
+        const zones = timezones.includes(draft.timezone) ? timezones : [draft.timezone, ...timezones];
+        return html `
+      ${this.saveError ? html `<p class="alert" role="alert">${this.saveError}</p>` : nothing}
+      <section class="page-section">
+        <header class="page-section-header">
+          <h3>${draft.revisionNumber ? rt('revision-value', { n: draft.revisionNumber }) : t('title.shift-new-arrangement')}</h3>
+          <div class="page-section-actions">
+            <button ?disabled=${this.busy} @click=${() => this.change({ shifts: [...draft.shifts, nextShift(draft.shifts)] })}>
+              ${rt('add-shift')}
+            </button>
+          </div>
+        </header>
+        <div class="shift-rows">
+          <div class="shift-row head" aria-hidden="true">
+            <span>${rt('name')}</span><span>${t('field.shift-start')}</span><span>${t('field.shift-end')}</span
+            ><span>${rt('daysOfWeek')}</span><span>${rt('description')}</span><span></span>
+          </div>
+          ${draft.shifts.map((shift, index) => this.shiftRow(shift, index, issues.rows.get(index) ?? []))}
+        </div>
+        <div class="arrangement">
+          ${this.timeline(draft.shifts, groupOverlaps(issues.overlaps))}
         </div>
+      </section>
+
+      <section class="page-section">
+        <header class="page-section-header"><h3>${t('title.shift-apply')}</h3></header>
+        <div class="form-grid">
+          <div class="field">
+            <span>${rt('effectiveFrom')}</span>
+            <div class="when">
+              <ox-input-select-buttons
+                .options=${[
+            { display: t('text.apply-now'), value: 'now' },
+            { display: t('text.apply-later'), value: 'at' }
+        ]}
+                .value=${draft.effectiveMode}
+                ?disabled=${this.busy}
+                @change=${(e) => {
+            if (!e.detail)
+                e.target.value = draft.effectiveMode;
+            else
+                this.change({ effectiveMode: e.detail });
+        }}
+              ></ox-input-select-buttons>
+              ${draft.effectiveMode === 'at'
+            ? html `<input
+                    type="datetime-local"
+                    aria-label=${rt('effectiveFrom')}
+                    .value=${localDateTime(draft.effectiveFrom)}
+                    ?disabled=${this.busy}
+                    @change=${(e) => {
+                try {
+                    this.change({ effectiveFrom: isoFromLocal(e.target.value) });
+                }
+                catch {
+                    e.target.value = localDateTime(draft.effectiveFrom);
+                }
+            }}
+                  />`
+            : nothing}
+            </div>
+          </div>
+          <label class="field">
+            <span>${rt('reason')}</span>
+            <input
+              .value=${draft.reason}
+              aria-invalid=${issues.reasonMissing && this.tried ? 'true' : 'false'}
+              ?disabled=${this.busy}
+              @input=${(e) => this.change({ reason: e.target.value })}
+            />
+            ${issues.reasonMissing && this.tried ? html `<span class="error">${t('text.shift-issue-reason-missing')}</span>` : nothing}
+          </label>
+          <label class="field">
+            <span>${rt('timezone')}</span>
+            <select ?disabled=${this.busy} @change=${(e) => this.change({ timezone: e.target.value })}>
+              ${zones.map(zone => html `<option value=${zone} ?selected=${zone === draft.timezone}>${zone}</option>`)}
+            </select>
+          </label>
+          <label class="field">
+            <span>${rt('description')}</span>
+            <input .value=${draft.description ?? ''} ?disabled=${this.busy} @input=${(e) => this.change({ description: e.target.value })} />
+          </label>
+        </div>
+      </section>
+    `;
+    }
+    render() {
+        const placed = this.overview ? this.placed : undefined;
+        return html `<ox-page-state .loading=${this.loading && !this.overview} .error=${this.error} @retry=${() => this.load()}>
+      <div class="page">
+        ${placed
+            ? this.draft
+                ? this.editor()
+                : html `${this.viewCurrent(placed)} ${this.viewScheduled(placed)} ${this.viewOpen(placed)} ${this.viewHistory(placed)}`
+            : nothing}
       </div>
-      ${this.message ? html `<p class="finding" role="alert">${this.message}</p>` : ''}
-      ${this.overview
-            ? html `<section class="page-section current-section">
-              <header class="page-section-header">
-                <h2>${t('current')}</h2>
-                ${current ? html `<span class="status" data-state="current">${t('revision-value', { n: current.revisionNumber })}</span>` : ''}
-              </header>
-              ${current
-                ? html `<p class="history-period">
-                        ${revisionDate(this.overview.schedule.find((s) => s.state === 'current').validFrom)}
-                      </p>
-                      ${this.coverage(current.shifts ?? [], 'current')}${revisionContents(current, 'workShift')}`
-                : html `<div class="empty">${t('no-current')}</div>`}
-            </section>`
-            : ''}
-      ${this.draft
-            ? html `<section class="page-section">
-              <header class="page-section-header">
-                <h2>${this.draft.id ? t('revision-value', { n: this.draft.revisionNumber }) : t('new')}</h2>
-                <span class="status" data-state=${this.rowStatus(this.draft)}
-                  >${t(this.draft.id ? this.rowStatus(this.draft) : 'draft')}</span
-                >
-              </header>
-              ${this.draft.frozenAt
-                ? html `${this.coverage(this.draft.shifts ?? [], 'scheduled')}${revisionContents(this.draft, 'workShift')}`
-                : html `
-                      <div class="editing">
-                        <div class="field-grid">
-                          ${['description', 'timezone', 'reason'].map(field => html `<label class="field"
-                                ><span>${t(field)}</span>
-                                <input
-                                  ?disabled=${this.busy}
-                                  aria-label=${t(field)}
-                                  .value=${this.draft[field] ?? ''}
-                                  @input=${(e) => this.change(field, e.target.value)}
-                              /></label>`)}
-                          <label class="field"
-                            ><span>${t('effectiveFrom')} · ${Intl.DateTimeFormat().resolvedOptions().timeZone}</span>
-                            <input
-                              ?disabled=${this.busy}
-                              aria-label=${t('effectiveFrom')}
-                              type="datetime-local"
-                              .value=${localDateTime(this.draft.effectiveFrom)}
-                              @change=${(e) => {
-                    try {
-                        this.change('effectiveFrom', isoFromLocal(e.target.value));
-                    }
-                    catch (err) {
-                        this.message = err.message;
-                    }
-                }}
-                          /></label>
-                        </div>
-                        <p class="field-label">
-                          ${i18next.t('text.effective-timezone-note', { timezone: this.draft.timezone, browserTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone })}
-                        </p>
-                        <ul class="guidance">
-                          <li>${i18next.t('text.howto-crossing-midnight')}</li>
-                          <li>${i18next.t('text.howto-scheduled-applies-itself')}</li>
-                        </ul>
-                        <div class="shift-list">
-                          ${this.draft.shifts.map((row, index) => this.shiftEditor(row, index))}
-                        </div>
-                        <div class="action-row">
-                          <button
-                            ?disabled=${this.busy}
-                            @click=${() => this.change('shifts', [...this.draft.shifts, { name: '', fromDate: 0, fromTime: '16:00', toDate: 1, toTime: '00:00', daysOfWeek: '' }])}
-                          >
-                            ${t('add-shift')}
-                          </button>
-                        </div>
-                        ${this.coverage(this.draft.shifts, 'current')}
-                        <p class="notice">${t('shift-impact')}</p>
-                        <div class="action-row">
-                          <button ?disabled=${this.busy} @click=${() => this.save()}>${t('save-draft')}</button>
-                          <button
-                            class="primary"
-                            ?disabled=${this.busy || (this.overview.approvalRequired && (this.dirty || !this.draft.id))}
-                            @click=${() => this.submit()}
-                          >
-                            ${this.overview.approvalRequired ? t('request-approval') : i18next.t('button.save')}
-                          </button>
-                          <button
-                            ?disabled=${this.busy}
-                            @click=${() => {
-                    if (!this.dirty || window.confirm(t('discard-changes'))) {
-                        this.draft = undefined;
-                        this.dirty = false;
-                    }
-                }}
-                          >
-                            ${t('close-editor')}
-                          </button>
-                        </div>
-                        ${this.overview.approvalRequired && (this.dirty || !this.draft.id) ? html `<p class="field-label">${i18next.t('text.save-before-approval')}</p>` : ''}
-                      </div>
-                    `}
-              ${this.draft.id ? html `<ops-master-revision-comparison axis="workShift" .before=${base} .after=${this.draft}></ops-master-revision-comparison>` : ''}
-            </section>`
-            : ''}
-      ${this.overview
-            ? html `<section class="page-section">
-              <header class="page-section-header"><h2>${t('history')}</h2></header>
-              ${this.overview.revisions.length
-                ? html `<div class="history-list">
-                      ${[...this.overview.revisions].reverse().map((row) => {
-                    const period = this.overview.schedule.find((s) => s.revisionId === row.id);
-                    const status = this.statuses[row.id];
-                    const state = this.rowStatus(row);
-                    const variant = state === 'current' ? 'current' : state === 'scheduled' ? 'scheduled' : 'past';
-                    return html `<article class="history-item">
-                          <div class="history-head">
-                            <button
-                              ?disabled=${this.dirty}
-                              @click=${() => {
-                        this.draft = structuredClone(row);
-                        this.dirty = false;
-                    }}
-                            >
-                              ${t('revision-value', { n: row.revisionNumber })}
-                            </button>
-                            <span class="status" data-state=${state}>${t(state)}</span>
-                            <span class="history-period"
-                              >${period ? html `${revisionDate(period.validFrom)} → ${period.validTo ? revisionDate(period.validTo) : t('until-change')}` : html `${t('effectiveFrom')}: ${revisionDate(row.effectiveFrom)}`}</span
-                            >
-                            <div class="history-actions">
-                              ${status?.open ? html `<button ?disabled=${this.busy} @click=${() => status.open()}>${t('approval-detail')}</button>` : ''}
-                              <button ?disabled=${this.busy || this.dirty} @click=${() => this.begin(row)}>
-                                ${i18next.t('text.create-change-from-revision')}
-                              </button>
-                            </div>
-                          </div>
-                          ${row.shifts?.length ? this.historyBands(row.shifts, variant) : ''}
-                          ${status?.comment ? html `<p>${status.comment}</p>` : ''}
-                          <details class="history-detail">
-                            <summary>${i18next.t('text.view-revision-content')}</summary>
-                            ${revisionContents(row, 'workShift')}
-                          </details>
-                        </article>`;
-                })}
-                    </div>`
-                : html `<div class="empty">${i18next.t('text.no-shift-history')}</div>`}
-            </section>`
-            : ''}
-    </div>`;
+    </ox-page-state>`;
     }
 };
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], WorkShift.prototype, "overview", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "approvals", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -856,7 +1120,7 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], WorkShift.prototype, "message", void 0);
+], WorkShift.prototype, "dirty", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -864,7 +1128,15 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], WorkShift.prototype, "statuses", void 0);
+], WorkShift.prototype, "saveError", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], WorkShift.prototype, "tried", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], WorkShift.prototype, "opened", void 0);
 WorkShift = __decorate([
     customElement('work-shift')
 ], WorkShift);