W3 web settle up: W-7 settle up and W-8 settlement detail

W-7 (/app/settle, mirrors S-9): global, per account (?account=<id>) and editing (?settlement=<id>). Defaults per AC-11.3/11.4/11.6, proposal from proposeAllocation over all non-deleted accounts with nets excluding the edited payment, rows follow the proposal until one is edited, "Föreslå igen", swap, over-settle warnings and confirm dialog (AC-11.5), remaining indicator, add account, untouched info line (D-093), date and note, §14.5.3 errors live, one POST /sync mutation, §14.4.6 rejections shown with a re-pull, discard dialog on leaving with changes (D-080). W-8 (/app/settlements/:id, mirrors S-10): hero, date, note, allocations, audit timeline (AC-12.4), deleted and missing states, edit link and soft delete with confirmation. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TQd3pEP9UeN2uifbHknQ7B
2026-10-21 21:25:29 +02:00
parent 934eee793c
commit f9a9bfb472
16 changed files with 3048 additions and 6 deletions
@@ -0,0 +1,117 @@
+/* W-8 (design-spec S-10): one column, gap 10. */
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-detail);
+  max-width: calc(var(--content-max-width) * 2 / 3);
+  padding: 0 var(--gutter);
+}
+.content,
+.faded {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-detail);
+}
+/* Deleted: content at 62 % opacity. */
+.faded {
+  opacity: 0.62;
+}
+.status {
+  margin: 0;
+  color: var(--on-surface-variant);
+  font: var(--type-body-medium);
+}
+
+/* Neutral banner: who deleted the payment and that it no longer counts. */
+.banner {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s3);
+  padding: var(--s3) var(--s4);
+  border-radius: var(--radius-large);
+  background: var(--surface-container-high);
+  color: var(--on-surface);
+}
+.bannerIcon {
+  flex: none;
+  color: var(--error);
+}
+.bannerText {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+  font: var(--type-body-medium);
+  letter-spacing: var(--tracking-body-medium);
+}
+.bannerTitle {
+  font: var(--type-title-small);
+  letter-spacing: var(--tracking-title-small);
+}
+
+/* Hero card: settlement-hero fill, padding 22 / 20, centred, gap 8. */
+.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--s2);
+  padding: 22px var(--s5);
+  border-radius: var(--radius-extra-large);
+  background: var(--settlement-hero);
+  color: var(--on-surface);
+  text-align: center;
+}
+.people {
+  display: flex;
+  align-items: center;
+  gap: var(--s3);
+}
+.arrow {
+  color: var(--on-surface-variant);
+}
+.heroText {
+  margin: 0;
+  font: var(--type-title-medium);
+  letter-spacing: var(--tracking-title-medium);
+}
+
+.fact,
+.allocation {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: var(--row-min);
+  padding: var(--s2) var(--s4);
+}
+.factIcon {
+  flex: none;
+  color: var(--on-surface-variant);
+}
+.factText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.factLabel {
+  font: var(--type-label-medium);
+  letter-spacing: var(--tracking-label);
+  color: var(--on-surface-variant);
+}
+.factValue {
+  font: var(--type-body-large);
+  letter-spacing: var(--tracking-body-large);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+.sectionTitle {
+  margin: 0;
+  padding: var(--s2) var(--s2) 0;
+  font: var(--type-title-small);
+  letter-spacing: var(--tracking-title-small);
+}
+.accountName {
+  flex: 1;
+  min-width: 0;
+  font: var(--type-title-medium);
+  letter-spacing: var(--tracking-title-medium);
+  overflow-wrap: anywhere;
+}