From 0f3f46c8c6e668a8469dae5325290dad9dba0702 Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Wed, 22 Mar 2023 15:47:49 +0000
Subject: [PATCH 01/20] style: fix button size

---
 apps/picsa-tools/budget-tool/src/styles.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/picsa-tools/budget-tool/src/styles.scss b/apps/picsa-tools/budget-tool/src/styles.scss
index 294ce0dd0..5c15a9228 100644
--- a/apps/picsa-tools/budget-tool/src/styles.scss
+++ b/apps/picsa-tools/budget-tool/src/styles.scss
@@ -30,7 +30,11 @@ $footer-height: 5em;
 button.footer-button.mat-mdc-button-base {
   width: 60%;
   left: 20%;
-  height: calc(#{$footer-height} - 10px);
+  height: calc(#{$footer-height} - 10px) !important;
+  .mdc-button__label {
+    font-size: 1.5rem;
+    line-height: 3rem;
+  }
 }
 
 // used if want to use mat-stepper with fixed header and scrolling content

From aa4687f9dd93225ecf40cda4067beb567c283502 Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Wed, 22 Mar 2023 15:48:19 +0000
Subject: [PATCH 02/20] chore: default show all cards on empty

---
 .../src/app/components/cell-editor/card-select/card-select.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/card-select/card-select.ts b/apps/picsa-tools/budget-tool/src/app/components/cell-editor/card-select/card-select.ts
index 023530a8a..c2c8148e0 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/card-select/card-select.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-editor/card-select/card-select.ts
@@ -47,6 +47,10 @@ export class BudgetCellEditorCardSelectComponent {
     });
     this.enterpriseCards = this._sortAZ(enterpriseCards);
     this.otherCards = this._sortAZ(otherCards);
+    // Default show all cards if none available for specific enterprise
+    if (enterpriseCards.length === 0) {
+      this.showAllCards = true;
+    }
   }
 
   setValues(values: IBudgetCardWithValues[] = []) {

From 464b157c15d562ac7b653d181ebb0df8f95bc699 Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Wed, 22 Mar 2023 15:48:40 +0000
Subject: [PATCH 03/20] chore: update family member text

---
 .../cell-editor/family-labour/family-labour.html         | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.html b/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.html
index 1d0d0b123..0077223ab 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.html
@@ -45,6 +45,13 @@
         style="display: contents"
       ></budget-card-image>
     </div>
-    <div style="flex: 1; margin-left: 1rem">{{ 'Add Member' | translate }}</div>
+    <div style="flex: 1; margin-left: 1rem">
+      <span *ngIf="memberCard.id==='adultMale'"
+        >{{ 'Add Male Member' | translate }}</span
+      >
+      <span *ngIf="memberCard.id==='adultFemale'">
+        {{ 'Add Female Member' | translate }}</span
+      >
+    </div>
   </div>
 </div>

From 8accb4dc0d10efee8e3b0232cdf2718b8b7e0e5f Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Thu, 23 Mar 2023 12:12:50 +0000
Subject: [PATCH 04/20] feat: wip inline editor improvements

---
 .../app/components/budget-tool.components.ts  |  2 +
 .../src/app/components/card/budget-card.html  | 16 ++++++-
 .../src/app/components/card/budget-card.scss  | 20 ++++++---
 .../src/app/components/card/budget-card.ts    | 11 ++++-
 .../card-placeholder.component.html           |  5 +++
 .../card-placeholder.component.scss           | 14 ++++++
 .../card-placeholder.component.spec.ts        | 22 +++++++++
 .../card-placeholder.component.ts             |  8 ++++
 .../cell-inline-editor.component.html         | 36 ++++++++++-----
 .../cell-inline-editor.component.scss         | 23 ++++++++++
 .../cell-inline-editor.component.ts           | 45 ++++++++++++-------
 .../src/app/pages/view/budget-view.page.html  | 10 ++---
 libs/shared/src/animations/animations.ts      | 12 ++++-
 13 files changed, 184 insertions(+), 40 deletions(-)
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.html
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.scss
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.spec.ts
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.ts

diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts b/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
index 3a9c9f1c8..92dbb4efb 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
@@ -24,6 +24,7 @@ import { BudgetCardComponent } from './card/budget-card';
 import { BudgetCardImageComponent } from './card/card-image/budget-card-image';
 import { BudgetCardNew } from './card/card-new/card-new';
 import { BudgetCardNewDialog } from './card/card-new/card-new-dialog';
+import { BudgetCardPlaceholderComponent } from './card/card-placeholder/card-placeholder.component';
 import { BudgetCellComponent } from './cell/cell';
 import { BudgetCellLabourComponent } from './cell/variants/labour/labour';
 import { BudgetCellEditorCardSelectComponent } from './cell-editor/card-select/card-select';
@@ -46,6 +47,7 @@ const components = [
   BudgetBalanceEditorComponent,
   BudgetCardComponent,
   BudgetCardImageComponent,
+  BudgetCardPlaceholderComponent,
   BudgetCellComponent,
   BudgetCellEditorComponent,
   BudgetCellEditorCardSelectComponent,
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.html b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.html
index b69d53a3e..6fe782063 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.html
@@ -5,14 +5,26 @@
   [attr.selected]="selected"
   *ngIf="!card._deleted"
 >
-  <button
+  <!-- TODO - add custom card delete bindings -->
+  <!-- <button
     mat-button
     *ngIf="card.customMeta && !selected"
     class="delete-button"
     (click)="promptCustomDelete($event)"
   >
     <mat-icon svgIcon="picsa_delete"></mat-icon>
-  </button>
+  </button> -->
+
   <budget-card-image [card]="card"></budget-card-image>
   <div [class]="'card-title ' + card.id">{{ card.label | translate }}</div>
 </mat-card>
+
+<button
+  mat-stroked-button
+  color="primary"
+  *ngIf="showDeleteButton"
+  class="delete-button"
+  (click)="deleteClicked.emit(card)"
+>
+  <mat-icon class="delete-button-icon">close</mat-icon>
+</button>
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.scss b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.scss
index a247ee39e..ddf77b9ef 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.scss
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.scss
@@ -1,11 +1,11 @@
 :host {
-  margin-right: 10px;
-  margin-bottom: 10px;
+  margin: 10px;
   display: inline-block;
   cursor: pointer;
   text-align: center;
   // prevent strange offset
   vertical-align: bottom;
+  position: relative;
 }
 
 mat-card.budget-card {
@@ -14,10 +14,20 @@ mat-card.budget-card {
 }
 .delete-button {
   position: absolute;
-  right: 0;
-  min-width: 24px;
-  padding: 0 4px;
+  right: -16px;
+  top: -10px;
+  height: 36px;
+  width: 36px;
+  min-width: 36px;
+  padding: 4px;
+  font-size: 36px;
   color: var(--color-light);
+  border: 1px solid var(--color-light);
+  border-radius: 50%;
+  background: white;
+}
+.delete-button-icon {
+  margin: 0;
 }
 
 .budget-card[selected='true'] {
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.ts b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.ts
index 013f4446a..701063d0c 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.ts
@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
 import { IBudgetCard, IBudgetCardDB } from '../../models/budget-tool.models';
 import { PicsaDialogService } from '@picsa/shared/features';
 import { BudgetStore } from '../../store/budget.store';
@@ -16,6 +22,9 @@ export class BudgetCardComponent {
   @Input() card: IBudgetCard;
   @Input() selected: boolean;
 
+  @Input() showDeleteButton = false;
+  @Output() deleteClicked = new EventEmitter<IBudgetCard>();
+
   constructor(private dialog: PicsaDialogService, public store: BudgetStore) {}
 
   async promptCustomDelete(e: Event) {
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.html b/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.html
new file mode 100644
index 000000000..7ef7910be
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.html
@@ -0,0 +1,5 @@
+<mat-card appearance="outlined" mat-elevation-z4 class="budget-card">
+  <button id="addCardButton" mat-button>
+    <mat-icon id="addCardButtonIcon">add</mat-icon>
+  </button>
+</mat-card>
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.scss b/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.scss
new file mode 100644
index 000000000..e1f91805e
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.scss
@@ -0,0 +1,14 @@
+.budget-card {
+  height: 100%;
+  border-style: dashed;
+  border-color: #848484;
+}
+#addCardButton {
+  height: 100%;
+}
+#addCardButtonIcon {
+  height: 36px;
+  font-size: 36px;
+  width: 36px;
+  color: var(--color-black);
+}
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.spec.ts b/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.spec.ts
new file mode 100644
index 000000000..cf43cc400
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BudgetCardPlaceholderComponent } from './card-placeholder.component';
+
+describe('BudgetCardPlaceholderComponent', () => {
+  let component: BudgetCardPlaceholderComponent;
+  let fixture: ComponentFixture<BudgetCardPlaceholderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BudgetCardPlaceholderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BudgetCardPlaceholderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.ts b/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.ts
new file mode 100644
index 000000000..4aa13efe8
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'budget-card-placeholder',
+  templateUrl: './card-placeholder.component.html',
+  styleUrls: ['./card-placeholder.component.scss', '../budget-card.scss'],
+})
+export class BudgetCardPlaceholderComponent {}
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
index a59043da0..0b13a6bb0 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
@@ -1,11 +1,24 @@
-<div
-  class="page-content"
-  style="height: calc(100% - 50px); padding: 0; overflow: auto"
->
-  <!-- Selected Cards -->
-  <div style="display: flex; flex-wrap: wrap">
-    <budget-card *ngFor="let card of selected" [card]="card"></budget-card>
+<!-- Selected Cards -->
+<h2>{{ _activeType | translate | titlecase }}</h2>
+<div class="selected-summary">
+  <p *ngIf="selected.length === 0">
+    <span>{{ 'Select from list below' | translate }}</span>
+  </p>
+  <div style="display: flex; overflow-x: scroll; width: 100%">
+    <budget-card
+      *ngFor="let card of selected; index as i; trackBy: trackByFn"
+      [card]="card"
+      [showDeleteButton]="true"
+      (deleteClicked)="removeSelectedCard(i)"
+      @fadeInOut
+    ></budget-card>
+    <budget-card-placeholder
+      (click)="showCardsList = true"
+    ></budget-card-placeholder>
   </div>
+</div>
+<hr style="width: 100%" />
+<div class="cardsList" [@flyInOut]="showCardsList ? 'in' : 'out'">
   <!-- Activities -->
   <budget-cell-editor-card-select
     @fadeInOut
@@ -76,8 +89,11 @@
     [cards]="data.produceConsumed"
     (valueChanged)="onEditorChange($event, 'produceConsumed')"
   ></budget-cell-editor-produce-consumed>
-  <!-- Summary -->
-  <!-- <budget-period-summary
+</div>
+
+<!-- Summary -->
+
+<button mat-button>Next</button>
+<!-- <budget-period-summary
     [periodIndex]="store.activePeriod"
   ></budget-period-summary> -->
-</div>
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.scss b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.scss
index 1f2fabdca..949e57da7 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.scss
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.scss
@@ -5,4 +5,27 @@
   top: 0;
   left: 0;
   background: white;
+  border: 2px solid white; // to hide budget border below
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.cards-list {
+  background-color: yellow;
+
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background: white;
+  border: 2px solid white;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.selected-summary {
+  min-height: 140px;
 }
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
index 2254fd527..76c969e62 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
@@ -1,7 +1,11 @@
 import { Component, Input } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FadeInOut, ANIMATION_DELAYED } from '@picsa/shared/animations';
 import {
+  FadeInOut,
+  ANIMATION_DELAYED,
+  FlyInOut,
+} from '@picsa/shared/animations';
+import {
+  IBudgetCard,
   IBudgetCardWithValues,
   IBudgetPeriodData,
   IBudgetPeriodType,
@@ -12,14 +16,17 @@ import { BudgetStore } from '../../store/budget.store';
   selector: 'budget-cell-inline-editor',
   templateUrl: './cell-inline-editor.component.html',
   styleUrls: ['./cell-inline-editor.component.scss'],
-  animations: [FadeInOut(ANIMATION_DELAYED)],
+  animations: [FadeInOut(ANIMATION_DELAYED), FlyInOut({ axis: 'Y' })],
 })
 export class BudgetCellInlineEditorComponent {
   // steps = EDITOR_STEPS;
-  data: IBudgetPeriodData;
-  selected: IBudgetCardWithValues[] = [];
+  public data: IBudgetPeriodData;
+  public selected: IBudgetCardWithValues[] = [];
   public _activeType: IBudgetPeriodType;
   public _activePeriod: number;
+
+  public showCardsList = false;
+
   @Input() set activeType(activeType: IBudgetPeriodType) {
     this._activeType = activeType;
     this.loadEditorData();
@@ -30,11 +37,9 @@ export class BudgetCellInlineEditorComponent {
   }
 
   @Input() isOpen = false;
-  constructor(
-    public store: BudgetStore,
-    private router: Router,
-    private route: ActivatedRoute
-  ) {}
+  constructor(public store: BudgetStore) {}
+
+  public toggleCardList() {}
 
   private loadEditorData() {
     if (this._activePeriod !== undefined && this._activeType !== undefined) {
@@ -47,6 +52,20 @@ export class BudgetCellInlineEditorComponent {
     }
   }
 
+  public trackByFn(index: number, item: IBudgetCard) {
+    return item.id;
+  }
+
+  public removeSelectedCard(index: number) {
+    if (this.data[this._activeType][index]) {
+      const values = [...this.data[this._activeType]];
+      values.splice(index, 1);
+
+      this.onEditorChange(values, this._activeType);
+      this.loadEditorData();
+    }
+  }
+
   // setActiveStep(type: IBudgetPeriodType) {
   //   const index = EDITOR_STEPS.indexOf(type);
   //   // this.stepper.selectedIndex = index;
@@ -78,12 +97,6 @@ export class BudgetCellInlineEditorComponent {
   //     relativeTo: this.route,
   //   });
   // }
-
-  // use trackby on inputs as otherwise each one changing would re-render all others
-  // (updating any input re-renders all others)
-  trackByIndex(index: number, obj: any): any {
-    return index;
-  }
 }
 
 // const EDITOR_STEPS: (IBudgetPeriodType | 'summary')[] = [
diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
index c56e69c5a..40bbfab53 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
@@ -20,21 +20,21 @@
       [budget]="store.activeBudget"
       @fadeInOut
     ></budget-table>
-    <budget-cell-editor
+    <!-- <budget-cell-editor
       *ngIf="store.activeType && store.activeBudget && store.activeBudget.data"
       [activePeriod]="store.activePeriod"
       [activeType]="store.activeType"
       [isOpen]="isEditorOpen"
       [@flyInOut]="isEditorOpen ? 'in' : 'out'"
-    ></budget-cell-editor>
+    ></budget-cell-editor> -->
     <!-- WiP Updated editor (replaces ABOVE) -->
-    <!-- <budget-cell-inline-editor
-       *ngIf="store.activeType && store.activeBudget && store.activeBudget.data"
+    <budget-cell-inline-editor
+      *ngIf="store.activeType && store.activeBudget && store.activeBudget.data"
       [activePeriod]="store.activePeriod"
       [activeType]="store.activeType"
       [isOpen]="isEditorOpen"
       [@flyInOut]="isEditorOpen ? 'in' : 'out'"
-    ></budget-cell-inline-editor> -->
+    ></budget-cell-inline-editor>
   </div>
 
   <!-- Header Menu -->
diff --git a/libs/shared/src/animations/animations.ts b/libs/shared/src/animations/animations.ts
index 6d517a81b..f44debeda 100644
--- a/libs/shared/src/animations/animations.ts
+++ b/libs/shared/src/animations/animations.ts
@@ -60,7 +60,17 @@ export function FadeInOut(c: IAnimationConfig = ANIMATION_DEFAULTS) {
   ]);
 }
 
-export function FlyInOut(c: IAnimationConfig = ANIMATION_DEFAULTS) {
+/**
+ * Use translation animation to fly an element in or out of the screen along
+ * the translation axis
+ *
+ * @example Toggling a `shouldShow` variable will transition in and out
+ * ```html
+ * <div [@flyInOut]="shouldShow ? 'in' : 'out'"></div>
+ * ```
+ * */
+export function FlyInOut(config?: Partial<IAnimationConfig>) {
+  const c = { ...ANIMATION_DEFAULTS, ...config };
   return trigger('flyInOut', [
     state('in', style({ transform: 'translate' + c.axis + '(0)' })),
     state('out', style({ transform: 'translate' + c.axis + '(100%)' })),

From 8a1d5db5a9a71a7aa6a477eb004c4f345db83a6d Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Thu, 23 Mar 2023 12:13:05 +0000
Subject: [PATCH 05/20] chore: update budget translations

---
 .../src/app/pages/view/budget-view.page.ts           | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
index 2c09e9683..c6f6d8cf0 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
@@ -12,6 +12,7 @@ import { Subject, takeUntil } from 'rxjs';
 import { PicsaCommonComponentsService } from '@picsa/components/src';
 import { MatDialog } from '@angular/material/dialog';
 import { BudgetShareDialogComponent } from '../../components/share-dialog/share-dialog.component';
+import { PicsaTranslateService } from '@picsa/shared/modules';
 
 @Component({
   selector: 'budget-view',
@@ -33,7 +34,8 @@ export class BudgetViewPage implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     public store: BudgetStore,
     private componentsService: PicsaCommonComponentsService,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private translateService: PicsaTranslateService
   ) {}
 
   async ngOnInit() {
@@ -60,7 +62,7 @@ export class BudgetViewPage implements OnInit, OnDestroy {
   private addRouterSubscription() {
     this.route.queryParams
       .pipe(takeUntil(this.componentDestroyed$))
-      .subscribe((params) => {
+      .subscribe(async (params) => {
         const { edit, period, label, type } = params;
         if (period) {
           this.store.setActivePeriod(Number(period));
@@ -74,11 +76,7 @@ export class BudgetViewPage implements OnInit, OnDestroy {
           const { meta } = this.store.activeBudget;
           let title = meta.title;
           if (this.isEditorOpen) {
-            title = label;
-            if (type) {
-              const typeLabel = this.store.typeLabels[type];
-              title = `${typeLabel} - ${title}`;
-            }
+            title = await this.translateService.translateText(label);
           }
           this.componentsService.setHeader({ title });
         }

From c8a46c279b261be3ddc7b64f26d831e6cbdcc3a9 Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Fri, 24 Mar 2023 11:43:38 +0000
Subject: [PATCH 06/20] feat: inline editor improvements

---
 .../card-placeholder.component.scss           |   1 +
 .../cell-inline-editor.component.html         | 204 ++++++++++--------
 .../cell-inline-editor.component.scss         |  40 ++--
 .../cell-inline-editor.component.ts           | 118 +++++-----
 .../src/app/pages/view/budget-view.page.html  |   2 +-
 .../src/app/pages/view/budget-view.page.ts    |  13 +-
 .../budget-tool/src/app/store/budget.store.ts |   1 -
 .../src/components/picsa-header.component.ts  |   9 +-
 .../src/services/components.service.ts        |   1 +
 libs/shared/src/animations/animations.ts      |  15 +-
 libs/theme/src/_overrides.scss                |   9 +-
 11 files changed, 244 insertions(+), 169 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.scss b/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.scss
index e1f91805e..a00df4758 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.scss
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/card-placeholder/card-placeholder.component.scss
@@ -5,6 +5,7 @@
 }
 #addCardButton {
   height: 100%;
+  min-height: 120px;
 }
 #addCardButtonIcon {
   height: 36px;
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
index 0b13a6bb0..97b49d775 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
@@ -1,99 +1,127 @@
-<!-- Selected Cards -->
-<h2>{{ _activeType | translate | titlecase }}</h2>
-<div class="selected-summary">
-  <p *ngIf="selected.length === 0">
-    <span>{{ 'Select from list below' | translate }}</span>
-  </p>
-  <div style="display: flex; overflow-x: scroll; width: 100%">
-    <budget-card
-      *ngFor="let card of selected; index as i; trackBy: trackByFn"
-      [card]="card"
-      [showDeleteButton]="true"
-      (deleteClicked)="removeSelectedCard(i)"
-      @fadeInOut
-    ></budget-card>
-    <budget-card-placeholder
-      (click)="showCardsList = true"
-    ></budget-card-placeholder>
+<!-- Editor -->
+<div id="editorContainer">
+  <div
+    *ngFor="let editorStep of editorSteps"
+    class="type-row"
+    [id]="'edit-' + editorStep.type"
+  >
+    <div class="type-label">{{ editorStep.label | translate }}</div>
+    <div class="selected-summary" *ngIf="data[editorStep.type] as selected">
+      <div class="selected-cards-container">
+        <budget-card
+          *ngFor="let card of selected; index as i; trackBy: trackByFn"
+          [card]="card"
+          [showDeleteButton]="true"
+          (deleteClicked)="removeSelectedCard(editorStep.type, i)"
+          @fadeInOut
+        ></budget-card>
+        <budget-card-placeholder
+          (click)="showCardsList(editorStep.type)"
+        ></budget-card-placeholder>
+      </div>
+    </div>
   </div>
 </div>
-<hr style="width: 100%" />
-<div class="cardsList" [@flyInOut]="showCardsList ? 'in' : 'out'">
-  <!-- Activities -->
-  <budget-cell-editor-card-select
-    @fadeInOut
-    *ngIf="_activeType === 'activities'"
-    type="activities"
-    [values]="data.activities"
-    [cards]="store.budgetCardsByType.activities"
-    (valueChanged)="onEditorChange($event, 'activities')"
-  >
-  </budget-cell-editor-card-select>
-  <!-- Inputs -->
-  <budget-cell-editor-card-select
-    @fadeInOut
-    *ngIf="_activeType === 'inputs'"
-    type="inputs"
-    [values]="data.inputs"
-    [cards]="store.budgetCardsByType.inputs"
-    (valueChanged)="onEditorChange($event, 'inputs')"
-  >
-  </budget-cell-editor-card-select>
+<!-- Footer Next Button -->
+<button
+  mat-raised-button
+  color="primary"
+  class="footer-button"
+  style="margin: 1rem"
+  (click)="handleNextClick.emit()"
+>
+  Next
+</button>
 
-  <!-- Input Values -->
-  <budget-cell-editor-input-values
-    @fadeInOut
-    *ngIf="_activeType === 'inputs'"
-    [cards]="data.inputs"
-    (valueChanged)="onEditorChange($event, 'inputs')"
-  ></budget-cell-editor-input-values>
-  <!-- Family Labour -->
-  <budget-cell-editor-family-labour
-    @fadeInOut
-    *ngIf="_activeType === 'familyLabour'"
-    [values]="data.familyLabour"
-    (valueChanged)="onEditorChange($event, 'familyLabour')"
-  ></budget-cell-editor-family-labour>
-  <!-- Outputs -->
-  <budget-cell-editor-card-select
-    @fadeInOut
-    *ngIf="_activeType === 'outputs'"
-    type="outputs"
-    [values]="data.outputs"
-    [cards]="store.budgetCardsByType.outputs"
-    (valueChanged)="onEditorChange($event, 'outputs')"
-  >
-  </budget-cell-editor-card-select>
+<!-- Dialog -->
+<ng-template #cardsListDialog>
+  <div id="cardsList" *ngIf="data && cardsListType && store.budgetCardsByType">
+    <div style="flex: 1; overflow: auto">
+      <!-- Activities -->
+      <budget-cell-editor-card-select
+        @fadeInOut
+        *ngIf="cardsListType === 'activities'"
+        type="activities"
+        [values]="data.activities"
+        [cards]="store.budgetCardsByType.activities"
+        (valueChanged)="onEditorChange($event, 'activities')"
+      >
+      </budget-cell-editor-card-select>
+      <!-- Inputs -->
+      <budget-cell-editor-card-select
+        @fadeInOut
+        *ngIf="cardsListType === 'inputs'"
+        type="inputs"
+        [values]="data.inputs"
+        [cards]="store.budgetCardsByType.inputs"
+        (valueChanged)="onEditorChange($event, 'inputs')"
+      >
+      </budget-cell-editor-card-select>
 
-  <budget-cell-editor-input-values
-    @fadeInOut
-    *ngIf="_activeType === 'outputs'"
-    [cards]="data.outputs"
-    (valueChanged)="onEditorChange($event, 'outputs')"
-  ></budget-cell-editor-input-values>
-  <!-- Consumed -->
-  <budget-cell-editor-card-select
-    @fadeInOut
-    *ngIf="_activeType === 'produceConsumed'"
-    type="produceConsumed"
-    [values]="data.produceConsumed"
-    [cards]="store.budgetCardsByType.outputs"
-    (valueChanged)="onEditorChange($event, 'produceConsumed')"
-  >
-  </budget-cell-editor-card-select>
+      <!-- Input Values -->
+      <budget-cell-editor-input-values
+        @fadeInOut
+        *ngIf="cardsListType === 'inputs'"
+        [cards]="data.inputs"
+        (valueChanged)="onEditorChange($event, 'inputs')"
+      ></budget-cell-editor-input-values>
+      <!-- Family Labour -->
+      <budget-cell-editor-family-labour
+        @fadeInOut
+        *ngIf="cardsListType === 'familyLabour'"
+        [values]="data.familyLabour"
+        (valueChanged)="onEditorChange($event, 'familyLabour')"
+      ></budget-cell-editor-family-labour>
+      <!-- Outputs -->
+      <budget-cell-editor-card-select
+        @fadeInOut
+        *ngIf="cardsListType === 'outputs'"
+        type="outputs"
+        [values]="data.outputs"
+        [cards]="store.budgetCardsByType.outputs"
+        (valueChanged)="onEditorChange($event, 'outputs')"
+      >
+      </budget-cell-editor-card-select>
 
-  <!-- Consumed Values -->
-  <budget-cell-editor-produce-consumed
-    @fadeInOut
-    *ngIf="_activeType === 'produceConsumed'"
-    [cards]="data.produceConsumed"
-    (valueChanged)="onEditorChange($event, 'produceConsumed')"
-  ></budget-cell-editor-produce-consumed>
-</div>
+      <budget-cell-editor-input-values
+        @fadeInOut
+        *ngIf="cardsListType === 'outputs'"
+        [cards]="data.outputs"
+        (valueChanged)="onEditorChange($event, 'outputs')"
+      ></budget-cell-editor-input-values>
+      <!-- Consumed -->
+      <budget-cell-editor-card-select
+        @fadeInOut
+        *ngIf="cardsListType === 'produceConsumed'"
+        type="produceConsumed"
+        [values]="data.produceConsumed"
+        [cards]="store.budgetCardsByType.outputs"
+        (valueChanged)="onEditorChange($event, 'produceConsumed')"
+      >
+      </budget-cell-editor-card-select>
+
+      <!-- Consumed Values -->
+      <budget-cell-editor-produce-consumed
+        @fadeInOut
+        *ngIf="cardsListType === 'produceConsumed'"
+        [cards]="data.produceConsumed"
+        (valueChanged)="onEditorChange($event, 'produceConsumed')"
+      ></budget-cell-editor-produce-consumed>
+    </div>
+    <button
+      mat-raised-button
+      color="primary"
+      class="footer-button"
+      style="margin: 1rem"
+      mat-dialog-close
+    >
+      Next
+    </button>
+  </div>
+</ng-template>
 
 <!-- Summary -->
 
-<button mat-button>Next</button>
 <!-- <budget-period-summary
     [periodIndex]="store.activePeriod"
   ></budget-period-summary> -->
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.scss b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.scss
index 949e57da7..9dad38441 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.scss
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.scss
@@ -1,31 +1,47 @@
 :host {
   position: absolute;
-  height: 100%;
-  width: 100%;
+  height: calc(100% - 4px);
+  width: calc(100% - 4px);
   top: 0;
   left: 0;
   background: white;
-  border: 2px solid white; // to hide budget border below
+  border: 2px solid var(--color-black); // hide border of table below
   z-index: 1;
   display: flex;
   flex-direction: column;
+  overflow-x: hidden;
+}
+#editorContainer {
+  flex: 1;
+  overflow: auto;
 }
 
-.cards-list {
-  background-color: yellow;
-
-  position: absolute;
-  height: 100%;
+.type-row {
+  display: flex;
   width: 100%;
-  top: 0;
-  left: 0;
+  border-bottom: 1px solid var(--color-black);
+}
+.type-label {
+  width: 100px;
+  border-right: 1px solid var(--color-black);
+  padding: 8px;
+}
+
+#cardsList {
+  height: calc(100% - 16px);
+  width: calc(100% - 16px);
   background: white;
-  border: 2px solid white;
-  z-index: 1;
   display: flex;
   flex-direction: column;
+  padding: 8px;
 }
 
 .selected-summary {
+  flex: 1;
   min-height: 140px;
 }
+.selected-cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px;
+}
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
index 76c969e62..711420e2d 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
@@ -1,9 +1,12 @@
-import { Component, Input } from '@angular/core';
 import {
-  FadeInOut,
-  ANIMATION_DELAYED,
-  FlyInOut,
-} from '@picsa/shared/animations';
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { FadeInOut, ANIMATION_DELAYED } from '@picsa/shared/animations';
 import {
   IBudgetCard,
   IBudgetCardWithValues,
@@ -11,44 +14,72 @@ import {
   IBudgetPeriodType,
 } from '../../models/budget-tool.models';
 import { BudgetStore } from '../../store/budget.store';
+import { MatDialog } from '@angular/material/dialog';
+import { _wait } from '@picsa/utils';
+
+const EDITOR_STEPS: { type: IBudgetPeriodType; label: string }[] = [
+  { type: 'activities', label: 'Activities' },
+  { type: 'inputs', label: 'Inputs' },
+  { type: 'familyLabour', label: 'Family Labour' },
+  { type: 'outputs', label: 'Outputs' },
+  { type: 'produceConsumed', label: 'Produce Consumed' },
+];
 
 @Component({
   selector: 'budget-cell-inline-editor',
   templateUrl: './cell-inline-editor.component.html',
   styleUrls: ['./cell-inline-editor.component.scss'],
-  animations: [FadeInOut(ANIMATION_DELAYED), FlyInOut({ axis: 'Y' })],
+  animations: [FadeInOut(ANIMATION_DELAYED)],
 })
 export class BudgetCellInlineEditorComponent {
-  // steps = EDITOR_STEPS;
+  /** View reference to ng-template content shown in dialog */
+  @ViewChild('cardsListDialog') cardsListDialog: TemplateRef<any>;
+
   public data: IBudgetPeriodData;
-  public selected: IBudgetCardWithValues[] = [];
-  public _activeType: IBudgetPeriodType;
   public _activePeriod: number;
+  public editorSteps = EDITOR_STEPS;
 
-  public showCardsList = false;
+  /** Budget period type to display cards list for */
+  public cardsListType: IBudgetPeriodType;
 
   @Input() set activeType(activeType: IBudgetPeriodType) {
-    this._activeType = activeType;
-    this.loadEditorData();
+    this.scrollToType(activeType);
   }
   @Input() set activePeriod(activePeriod: number) {
     this._activePeriod = activePeriod;
     this.loadEditorData();
   }
+  @Output() handleNextClick = new EventEmitter();
 
-  @Input() isOpen = false;
-  constructor(public store: BudgetStore) {}
+  constructor(public store: BudgetStore, private dialog: MatDialog) {}
 
-  public toggleCardList() {}
+  public showCardsList(type: IBudgetPeriodType) {
+    this.cardsListType = type;
+    this.dialog.open(this.cardsListDialog, {
+      width: '90vw',
+      height: '90vh',
+      maxWidth: '90vw',
+      maxHeight: '90vh',
+      panelClass: 'no-padding',
+    });
+  }
+
+  private async scrollToType(type: IBudgetPeriodType) {
+    const scrollContainer = document.getElementById('editorContainer');
+    const scrollTarget = document.getElementById(`edit-${type}`);
+    await _wait(100);
+    if (scrollContainer && scrollTarget) {
+      scrollTarget?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
 
   private loadEditorData() {
-    if (this._activePeriod !== undefined && this._activeType !== undefined) {
-      // create copy of data to avoid first input populating multiple activities
-      const data: IBudgetPeriodData = JSON.parse(
-        JSON.stringify(this.store.activeBudget.data[this._activePeriod])
-      );
-      this.data = data;
-      this.selected = data[this._activeType] || [];
+    if (this._activePeriod !== undefined) {
+      const activeData = this.store.activeBudget.data[this._activePeriod];
+      if (activeData) {
+        // create copy of data to avoid first input populating multiple activities
+        this.data = JSON.parse(JSON.stringify(activeData));
+      }
     }
   }
 
@@ -56,54 +87,19 @@ export class BudgetCellInlineEditorComponent {
     return item.id;
   }
 
-  public removeSelectedCard(index: number) {
-    if (this.data[this._activeType][index]) {
-      const values = [...this.data[this._activeType]];
+  public removeSelectedCard(type: IBudgetPeriodType, index: number) {
+    if (this.data[type][index]) {
+      const values = [...this.data[type]];
       values.splice(index, 1);
 
-      this.onEditorChange(values, this._activeType);
+      this.onEditorChange(values, type);
       this.loadEditorData();
     }
   }
 
-  // setActiveStep(type: IBudgetPeriodType) {
-  //   const index = EDITOR_STEPS.indexOf(type);
-  //   // this.stepper.selectedIndex = index;
-  // }
-
   // the store already knows what period and type it is, so just pass the updated values
   // back up to save
   onEditorChange(values: IBudgetCardWithValues[], type: IBudgetPeriodType) {
     this.store.saveEditor(values, type);
   }
-
-  // // as can't easily prevent default step click behaviour, instead add extra call to update
-  // // query params after
-  // stepChange(e: StepperSelectionEvent) {
-  //   const step = EDITOR_STEPS[e.selectedIndex];
-  //   // as can't disable stepper slide animation use timeout to delay other animations
-  //   this.router.navigate([], {
-  //     relativeTo: this.route,
-  //     queryParams: {
-  //       type: step,
-  //     },
-  //     replaceUrl: true,
-  //     queryParamsHandling: 'merge',
-  //   });
-  // }
-
-  // closeEditor() {
-  //   this.router.navigate([], {
-  //     relativeTo: this.route,
-  //   });
-  // }
 }
-
-// const EDITOR_STEPS: (IBudgetPeriodType | 'summary')[] = [
-//   'activities',
-//   'inputs',
-//   'familyLabour',
-//   'outputs',
-//   'produceConsumed',
-//   'summary',
-// ];
diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
index 40bbfab53..44358ebcc 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
@@ -32,8 +32,8 @@
       *ngIf="store.activeType && store.activeBudget && store.activeBudget.data"
       [activePeriod]="store.activePeriod"
       [activeType]="store.activeType"
-      [isOpen]="isEditorOpen"
       [@flyInOut]="isEditorOpen ? 'in' : 'out'"
+      (handleNextClick)="handleEditorNext()"
     ></budget-cell-inline-editor>
   </div>
 
diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
index c6f6d8cf0..403679e0e 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { BudgetStore } from '../../store/budget.store';
 import {
   FadeInOut,
@@ -19,7 +19,7 @@ import { PicsaTranslateService } from '@picsa/shared/modules';
   templateUrl: './budget-view.page.html',
   styleUrls: ['./budget-view.page.scss'],
   animations: [
-    FadeInOut(ANIMATION_DELAYED),
+    FadeInOut({ inDelay: 200 }),
     OpenClosed,
     FlyInOut(ANIMATION_DEFAULTS_Y),
   ],
@@ -32,6 +32,7 @@ export class BudgetViewPage implements OnInit, OnDestroy {
 
   constructor(
     private route: ActivatedRoute,
+    private router: Router,
     public store: BudgetStore,
     private componentsService: PicsaCommonComponentsService,
     private dialog: MatDialog,
@@ -58,6 +59,14 @@ export class BudgetViewPage implements OnInit, OnDestroy {
     await this.store.loadBudgetByKey(budgetKey);
   }
 
+  public async handleEditorNext() {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { edit: undefined },
+      queryParamsHandling: 'merge',
+    });
+  }
+
   /** Subscribe to query param changes and update headers as required */
   private addRouterSubscription() {
     this.route.queryParams
diff --git a/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts b/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts
index f9899f0e8..90f463b10 100644
--- a/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts
+++ b/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts
@@ -157,7 +157,6 @@ export class BudgetStore implements OnDestroy {
     const budgetData = JSON.parse(JSON.stringify(this.activeBudget.data));
     budgetData[period][type] = data;
     this.patchBudget({ data: budgetData });
-    console.log('emit change', { period, type, data });
     // use behaviour subject to provide better change detection binding on changes
     this.changes.next([period, type]);
     this.calculateBalance();
diff --git a/libs/components/src/components/picsa-header.component.ts b/libs/components/src/components/picsa-header.component.ts
index 7e906c921..efc6e5edf 100644
--- a/libs/components/src/components/picsa-header.component.ts
+++ b/libs/components/src/components/picsa-header.component.ts
@@ -15,7 +15,9 @@ import { PicsaCommonComponentsService } from '../services/components.service';
   selector: 'picsa-header',
   template: `
     <header [attr.data-style]="style">
-      <back-button></back-button>
+      <back-button
+        [style.visibility]="hideBackButton ? 'hidden' : 'visible'"
+      ></back-button>
       <h1>
         <span>{{ title | translate }}</span>
       </h1>
@@ -28,6 +30,8 @@ import { PicsaCommonComponentsService } from '../services/components.service';
 export class PicsaHeaderComponent implements OnInit, OnDestroy {
   public title = '';
   public style: 'primary' | 'inverted' = 'primary';
+  public hideBackButton? = false;
+
   private destroyed$ = new Subject<boolean>();
   /** Inject dynamic content into end slot of header using angular cdk portal */
   public endPortal?: Portal<any>;
@@ -91,7 +95,7 @@ export class PicsaHeaderComponent implements OnInit, OnDestroy {
   private listenToServiceTitleChanges() {
     this.componentsService.headerOptions$
       .pipe(takeUntil(this.destroyed$))
-      .subscribe(({ title, style, endContent }) => {
+      .subscribe(({ title, style, endContent, hideBackButton }) => {
         requestAnimationFrame(() => {
           if (title) {
             this.title = title;
@@ -100,6 +104,7 @@ export class PicsaHeaderComponent implements OnInit, OnDestroy {
           if (style) {
             this.style = style;
           }
+          this.hideBackButton = hideBackButton;
           this.endPortal = endContent;
         });
       });
diff --git a/libs/components/src/services/components.service.ts b/libs/components/src/services/components.service.ts
index ed1fd7088..6477796c5 100644
--- a/libs/components/src/services/components.service.ts
+++ b/libs/components/src/services/components.service.ts
@@ -7,6 +7,7 @@ interface IHeaderOptions {
   style?: 'inverted' | 'primary';
   /** Use angular portal cdk to inject component into header slot */
   endContent?: Portal<any>;
+  hideBackButton?: boolean;
 }
 export interface IBreadcrumbOptions {
   enabled?: boolean;
diff --git a/libs/shared/src/animations/animations.ts b/libs/shared/src/animations/animations.ts
index f44debeda..8dc957db2 100644
--- a/libs/shared/src/animations/animations.ts
+++ b/libs/shared/src/animations/animations.ts
@@ -28,18 +28,21 @@ export const OpenClosed = trigger('openClosed', [
 ]);
 
 // function to generate custom fade transition
-export function FadeInOut(c: IAnimationConfig = ANIMATION_DEFAULTS) {
+export function FadeInOut(config: Partial<IAnimationConfig> = {}) {
+  const c = { ...ANIMATION_DEFAULTS, ...config };
   return trigger('fadeInOut', [
     state(
       'in',
       style({
         opacity: 1,
+        ...c.inStyle,
       })
     ),
     state(
       'out',
       style({
         opacity: 0,
+        ...c.outStyle,
       })
     ),
     // state transitions don't pick up well when coming from void state
@@ -119,6 +122,8 @@ export const ANIMATION_DEFAULTS: IAnimationConfig = {
   outDelay: 0,
   outEasing: 'ease-out',
   axis: 'X',
+  inStyle: {},
+  outStyle: {},
 };
 export const ANIMATION_DEFAULTS_Y: IAnimationConfig = {
   inSpeed: 250,
@@ -128,6 +133,8 @@ export const ANIMATION_DEFAULTS_Y: IAnimationConfig = {
   outDelay: 0,
   outEasing: 'ease-out',
   axis: 'Y',
+  inStyle: {},
+  outStyle: {},
 };
 
 export const ANIMATION_DELAYED: IAnimationConfig = {
@@ -138,6 +145,8 @@ export const ANIMATION_DELAYED: IAnimationConfig = {
   inEasing: 'ease-in',
   outEasing: 'ease-out',
   axis: 'X',
+  inStyle: {},
+  outStyle: {},
 };
 
 interface IAnimationConfig {
@@ -148,4 +157,8 @@ interface IAnimationConfig {
   outDelay: number;
   outEasing: string;
   axis: 'X' | 'Y';
+  /** Additional styles to apply to in-state */
+  inStyle: any;
+  /** Additional styles to apply to out-state */
+  outStyle: any;
 }
diff --git a/libs/theme/src/_overrides.scss b/libs/theme/src/_overrides.scss
index 6bf9fa825..98457bca2 100644
--- a/libs/theme/src/_overrides.scss
+++ b/libs/theme/src/_overrides.scss
@@ -26,10 +26,17 @@ mat-card-title.mat-mdc-card-title {
 mat-card-content.mat-mdc-card-content {
   font-size: 14px;
 }
-// Add padding to all dialogs
+// Add padding to all dialogs by default
 .mat-mdc-dialog-surface {
   padding: 24px;
 }
+// Add override to remove dialog padding
+.cdk-overlay-pane.no-padding {
+  .mat-mdc-dialog-surface {
+    padding: 0;
+  }
+}
+
 // Remove padding from dialog action buttons
 div.mdc-dialog__actions {
   padding-left: 0;

From 39d007baf2bbd3a980816c17378fda3a7dd00015 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Mon, 10 Apr 2023 15:12:29 -0700
Subject: [PATCH 07/20] fix: editor scroll into view

---
 .../cell-inline-editor.component.html                |  1 +
 .../cell-inline-editor.component.ts                  | 12 ++++++++++--
 .../src/app/pages/view/budget-view.page.ts           |  1 -
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
index 97b49d775..69384471c 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
@@ -13,6 +13,7 @@
           [card]="card"
           [showDeleteButton]="true"
           (deleteClicked)="removeSelectedCard(editorStep.type, i)"
+          (click)="showCardsList(editorStep.type)"
           @fadeInOut
         ></budget-card>
         <budget-card-placeholder
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
index 711420e2d..f8cc19b58 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
@@ -67,9 +67,17 @@ export class BudgetCellInlineEditorComponent {
   private async scrollToType(type: IBudgetPeriodType) {
     const scrollContainer = document.getElementById('editorContainer');
     const scrollTarget = document.getElementById(`edit-${type}`);
-    await _wait(100);
+    // provide delay whilst editor flying in
+    await _wait(200);
     if (scrollContainer && scrollTarget) {
-      scrollTarget?.scrollIntoView({ behavior: 'smooth' });
+      // calculate relative element offset instead of using scrollIntoView
+      // as seems to perform more consistently whilst flyInOut animation occuring
+      // include additional offset just to keep obvious there's scrollable content above
+      const elementPosition = Math.max(scrollTarget.offsetTop - 16, 0);
+      scrollContainer.scrollTo({
+        top: elementPosition,
+        behavior: 'smooth',
+      });
     }
   }
 
diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
index 403679e0e..3006521ad 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
@@ -5,7 +5,6 @@ import {
   FadeInOut,
   OpenClosed,
   FlyInOut,
-  ANIMATION_DELAYED,
   ANIMATION_DEFAULTS_Y,
 } from '@picsa/shared/animations';
 import { Subject, takeUntil } from 'rxjs';

From bf59f250712e7bb7af971ed9dba7fd2c31320ba8 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Tue, 11 Apr 2023 16:13:50 -0700
Subject: [PATCH 08/20] refactor: editor component

---
 .../app/components/budget-tool.components.ts  |   4 +-
 .../family-labour/family-labour.ts            |  20 ++-
 .../cell-inline-editor.component.html         | 128 ------------------
 .../cell-inline-editor.component.spec.ts      |  22 ---
 .../components/editor/editor.component.html   |  82 +++++++++++
 .../editor.component.scss}                    |   0
 .../editor/editor.component.spec.ts           |  22 +++
 .../editor.component.ts}                      |   8 +-
 .../src/app/pages/view/budget-view.page.html  |   4 +-
 9 files changed, 125 insertions(+), 165 deletions(-)
 delete mode 100644 apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
 delete mode 100644 apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.spec.ts
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-inline-editor/cell-inline-editor.component.scss => editor/editor.component.scss} (100%)
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.spec.ts
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-inline-editor/cell-inline-editor.component.ts => editor/editor.component.ts} (94%)

diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts b/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
index 92dbb4efb..b94ba8140 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
@@ -31,7 +31,7 @@ import { BudgetCellEditorCardSelectComponent } from './cell-editor/card-select/c
 import { BudgetCellEditorInputValuesComponent } from './cell-editor/input-values/input-values';
 import { BudgetCellEditorFamilyLabourComponent } from './cell-editor/family-labour/family-labour';
 import { BudgetCellEditorProduceConsumedComponent } from './cell-editor/produce-consumed/produce-consumed';
-import { BudgetCellInlineEditorComponent } from './cell-inline-editor/cell-inline-editor.component';
+import { BudgeEditorComponent } from './editor/editor.component';
 import { BudgetImportDialogComponent } from './import-dialog/import-dialog.component';
 import {
   BudgetListItemComponent,
@@ -54,7 +54,7 @@ const components = [
   BudgetCellEditorInputValuesComponent,
   BudgetCellEditorFamilyLabourComponent,
   BudgetCellEditorProduceConsumedComponent,
-  BudgetCellInlineEditorComponent,
+  BudgeEditorComponent,
   BudgetCellLabourComponent,
   BudgetCardNew,
   BudgetCardNewDialog,
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.ts b/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.ts
index 2e7825ce7..d474b3063 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.ts
@@ -7,12 +7,17 @@ import {
   QueryList,
 } from '@angular/core';
 import { MatInput } from '@angular/material/input';
+import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
 import { IBudgetCardWithValues } from '../../../models/budget-tool.models';
 
-const FAMILY_MEMBERS = [
-  { id: 'adultMale', label: 'Male' },
-  { id: 'adultFemale', label: 'Female' },
-];
+const LABELS: { [id: string]: string } = {
+  adultMale: translateMarker('Male Family Member'),
+  adultFemale: translateMarker('Female Family Member'),
+};
+const MEMBERS = Object.entries(LABELS).map(([id, label]) => ({
+  id,
+  label,
+}));
 
 @Component({
   selector: 'budget-cell-editor-family-labour',
@@ -25,12 +30,12 @@ export class BudgetCellEditorFamilyLabourComponent {
   @ViewChildren(MatInput) childInputs: QueryList<MatInput>;
   totalPeople: number;
 
-  memberTypes = FAMILY_MEMBERS;
+  memberTypes = MEMBERS;
 
   addMemberCards: IBudgetCardWithValues[] = [];
 
   constructor() {
-    for (const { id } of FAMILY_MEMBERS) {
+    for (const { id } of MEMBERS) {
       const memberCard = this.createFamilyCard(id);
       this.addMemberCards.push(memberCard);
     }
@@ -63,9 +68,10 @@ export class BudgetCellEditorFamilyLabourComponent {
   }
 
   createFamilyCard(memberType: string) {
+    const label = LABELS[memberType];
     const card: IBudgetCardWithValues = {
       id: memberType,
-      label: 'family member',
+      label: label,
       type: 'familyLabour',
       imgId: `family-labour_${memberType}`,
       imgType: 'svg',
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
deleted file mode 100644
index 69384471c..000000000
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!-- Editor -->
-<div id="editorContainer">
-  <div
-    *ngFor="let editorStep of editorSteps"
-    class="type-row"
-    [id]="'edit-' + editorStep.type"
-  >
-    <div class="type-label">{{ editorStep.label | translate }}</div>
-    <div class="selected-summary" *ngIf="data[editorStep.type] as selected">
-      <div class="selected-cards-container">
-        <budget-card
-          *ngFor="let card of selected; index as i; trackBy: trackByFn"
-          [card]="card"
-          [showDeleteButton]="true"
-          (deleteClicked)="removeSelectedCard(editorStep.type, i)"
-          (click)="showCardsList(editorStep.type)"
-          @fadeInOut
-        ></budget-card>
-        <budget-card-placeholder
-          (click)="showCardsList(editorStep.type)"
-        ></budget-card-placeholder>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- Footer Next Button -->
-<button
-  mat-raised-button
-  color="primary"
-  class="footer-button"
-  style="margin: 1rem"
-  (click)="handleNextClick.emit()"
->
-  Next
-</button>
-
-<!-- Dialog -->
-<ng-template #cardsListDialog>
-  <div id="cardsList" *ngIf="data && cardsListType && store.budgetCardsByType">
-    <div style="flex: 1; overflow: auto">
-      <!-- Activities -->
-      <budget-cell-editor-card-select
-        @fadeInOut
-        *ngIf="cardsListType === 'activities'"
-        type="activities"
-        [values]="data.activities"
-        [cards]="store.budgetCardsByType.activities"
-        (valueChanged)="onEditorChange($event, 'activities')"
-      >
-      </budget-cell-editor-card-select>
-      <!-- Inputs -->
-      <budget-cell-editor-card-select
-        @fadeInOut
-        *ngIf="cardsListType === 'inputs'"
-        type="inputs"
-        [values]="data.inputs"
-        [cards]="store.budgetCardsByType.inputs"
-        (valueChanged)="onEditorChange($event, 'inputs')"
-      >
-      </budget-cell-editor-card-select>
-
-      <!-- Input Values -->
-      <budget-cell-editor-input-values
-        @fadeInOut
-        *ngIf="cardsListType === 'inputs'"
-        [cards]="data.inputs"
-        (valueChanged)="onEditorChange($event, 'inputs')"
-      ></budget-cell-editor-input-values>
-      <!-- Family Labour -->
-      <budget-cell-editor-family-labour
-        @fadeInOut
-        *ngIf="cardsListType === 'familyLabour'"
-        [values]="data.familyLabour"
-        (valueChanged)="onEditorChange($event, 'familyLabour')"
-      ></budget-cell-editor-family-labour>
-      <!-- Outputs -->
-      <budget-cell-editor-card-select
-        @fadeInOut
-        *ngIf="cardsListType === 'outputs'"
-        type="outputs"
-        [values]="data.outputs"
-        [cards]="store.budgetCardsByType.outputs"
-        (valueChanged)="onEditorChange($event, 'outputs')"
-      >
-      </budget-cell-editor-card-select>
-
-      <budget-cell-editor-input-values
-        @fadeInOut
-        *ngIf="cardsListType === 'outputs'"
-        [cards]="data.outputs"
-        (valueChanged)="onEditorChange($event, 'outputs')"
-      ></budget-cell-editor-input-values>
-      <!-- Consumed -->
-      <budget-cell-editor-card-select
-        @fadeInOut
-        *ngIf="cardsListType === 'produceConsumed'"
-        type="produceConsumed"
-        [values]="data.produceConsumed"
-        [cards]="store.budgetCardsByType.outputs"
-        (valueChanged)="onEditorChange($event, 'produceConsumed')"
-      >
-      </budget-cell-editor-card-select>
-
-      <!-- Consumed Values -->
-      <budget-cell-editor-produce-consumed
-        @fadeInOut
-        *ngIf="cardsListType === 'produceConsumed'"
-        [cards]="data.produceConsumed"
-        (valueChanged)="onEditorChange($event, 'produceConsumed')"
-      ></budget-cell-editor-produce-consumed>
-    </div>
-    <button
-      mat-raised-button
-      color="primary"
-      class="footer-button"
-      style="margin: 1rem"
-      mat-dialog-close
-    >
-      Next
-    </button>
-  </div>
-</ng-template>
-
-<!-- Summary -->
-
-<!-- <budget-period-summary
-    [periodIndex]="store.activePeriod"
-  ></budget-period-summary> -->
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.spec.ts b/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.spec.ts
deleted file mode 100644
index 7078e9baa..000000000
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CellInlineEditorComponent } from './cell-inline-editor.component';
-
-describe('CellInlineEditorComponent', () => {
-  let component: CellInlineEditorComponent;
-  let fixture: ComponentFixture<CellInlineEditorComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [CellInlineEditorComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(CellInlineEditorComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
new file mode 100644
index 000000000..12aa7fd4f
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
@@ -0,0 +1,82 @@
+<!-- Editor -->
+<div id="editorContainer">
+  <div
+    *ngFor="let editorStep of editorSteps"
+    class="type-row"
+    [id]="'edit-' + editorStep.type"
+  >
+    <div class="type-label">{{ editorStep.label | translate }}</div>
+    <div class="selected-summary" *ngIf="data[editorStep.type] as selected">
+      <div class="selected-cards-container" [ngSwitch]="editorStep.type">
+        <!-- TODO - create editor summary -->
+        <budget-card
+          *ngFor="let card of selected; index as i; trackBy: trackByFn"
+          [card]="card"
+          [showDeleteButton]="true"
+          (deleteClicked)="removeSelectedCard(editorStep.type, i)"
+          (click)="showCardsList(editorStep.type)"
+          @fadeInOut
+        ></budget-card>
+        <budget-card-placeholder
+          (click)="showCardsList(editorStep.type)"
+        ></budget-card-placeholder>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Footer Next Button -->
+<button
+  mat-raised-button
+  color="primary"
+  class="footer-button"
+  style="margin: 1rem"
+  (click)="handleNextClick.emit()"
+>
+  Next
+</button>
+
+<!-- Dialog -->
+<ng-template #cardsListDialog>
+  <div id="cardsList" *ngIf="data && cardsListType && store.budgetCardsByType">
+    <div style="flex: 1; overflow: auto" [ngSwitch]="cardsListType">
+      <!-- Family Labour -->
+      <budget-cell-editor-family-labour
+        *ngSwitchCase="'familyLabour'"
+        @fadeInOut
+        [values]="data.familyLabour"
+        (valueChanged)="onEditorChange($event, 'familyLabour')"
+      ></budget-cell-editor-family-labour>
+      <!-- Produce Consumed -->
+      <budget-cell-editor-produce-consumed
+        *ngSwitchCase="'produceConsumed'"
+        @fadeInOut
+        [cards]="data.produceConsumed"
+        (valueChanged)="onEditorChange($event, 'produceConsumed')"
+      ></budget-cell-editor-produce-consumed>
+      <!-- Default Editor -->
+      <budget-cell-editor-card-select
+        *ngSwitchDefault
+        [type]="cardsListType"
+        [values]="data[cardsListType]"
+        [cards]="store.budgetCardsByType[cardsListType]"
+        (valueChanged)="onEditorChange($event, cardsListType)"
+      >
+      </budget-cell-editor-card-select>
+    </div>
+    <button
+      mat-raised-button
+      color="primary"
+      class="footer-button"
+      style="margin: 1rem"
+      mat-dialog-close
+    >
+      Next
+    </button>
+  </div>
+</ng-template>
+
+<!-- Summary -->
+
+<!-- <budget-period-summary
+    [periodIndex]="store.activePeriod"
+  ></budget-period-summary> -->
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.scss
rename to apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.spec.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.spec.ts
new file mode 100644
index 000000000..98b1f1275
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BudgeEditorComponent } from './editor.component';
+
+describe('BudgeEditorComponent', () => {
+  let component: BudgeEditorComponent;
+  let fixture: ComponentFixture<BudgeEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BudgeEditorComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BudgeEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
similarity index 94%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
rename to apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
index f8cc19b58..eb4cb5bc0 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-inline-editor/cell-inline-editor.component.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
@@ -26,12 +26,12 @@ const EDITOR_STEPS: { type: IBudgetPeriodType; label: string }[] = [
 ];
 
 @Component({
-  selector: 'budget-cell-inline-editor',
-  templateUrl: './cell-inline-editor.component.html',
-  styleUrls: ['./cell-inline-editor.component.scss'],
+  selector: 'budget-editor',
+  templateUrl: './editor.component.html',
+  styleUrls: ['./editor.component.scss'],
   animations: [FadeInOut(ANIMATION_DELAYED)],
 })
-export class BudgetCellInlineEditorComponent {
+export class BudgeEditorComponent {
   /** View reference to ng-template content shown in dialog */
   @ViewChild('cardsListDialog') cardsListDialog: TemplateRef<any>;
 
diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
index 44358ebcc..8b3fd00f2 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
@@ -28,13 +28,13 @@
       [@flyInOut]="isEditorOpen ? 'in' : 'out'"
     ></budget-cell-editor> -->
     <!-- WiP Updated editor (replaces ABOVE) -->
-    <budget-cell-inline-editor
+    <budget-editor
       *ngIf="store.activeType && store.activeBudget && store.activeBudget.data"
       [activePeriod]="store.activePeriod"
       [activeType]="store.activeType"
       [@flyInOut]="isEditorOpen ? 'in' : 'out'"
       (handleNextClick)="handleEditorNext()"
-    ></budget-cell-inline-editor>
+    ></budget-editor>
   </div>
 
   <!-- Header Menu -->

From 4f0cb7681cb2ee7d386388c8c2174cf2e404e152 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Tue, 11 Apr 2023 16:28:22 -0700
Subject: [PATCH 09/20] chore: code tidying

---
 apps/picsa-tools/budget-tool/.eslintrc.json               | 4 ++--
 .../src/app/components/budget-tool.components.ts          | 8 ++++----
 .../{cell-editor => editor}/card-select/card-select.html  | 0
 .../{cell-editor => editor}/card-select/card-select.scss  | 0
 .../{cell-editor => editor}/card-select/card-select.ts    | 0
 .../card-select}/family-labour/family-labour.html         | 0
 .../card-select}/family-labour/family-labour.scss         | 0
 .../card-select}/family-labour/family-labour.ts           | 2 +-
 .../card-select}/input-values/input-values.html           | 0
 .../card-select}/input-values/input-values.scss           | 0
 .../card-select}/input-values/input-values.ts             | 4 ++--
 .../card-select}/produce-consumed/produce-consumed.html   | 0
 .../card-select}/produce-consumed/produce-consumed.scss   | 0
 .../card-select}/produce-consumed/produce-consumed.ts     | 2 +-
 14 files changed, 10 insertions(+), 10 deletions(-)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor}/card-select/card-select.html (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor}/card-select/card-select.scss (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor}/card-select/card-select.ts (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor/card-select}/family-labour/family-labour.html (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor/card-select}/family-labour/family-labour.scss (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor/card-select}/family-labour/family-labour.ts (96%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor/card-select}/input-values/input-values.html (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor/card-select}/input-values/input-values.scss (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor/card-select}/input-values/input-values.ts (88%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor/card-select}/produce-consumed/produce-consumed.html (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor/card-select}/produce-consumed/produce-consumed.scss (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{cell-editor => editor/card-select}/produce-consumed/produce-consumed.ts (93%)

diff --git a/apps/picsa-tools/budget-tool/.eslintrc.json b/apps/picsa-tools/budget-tool/.eslintrc.json
index ac690b0cf..9e8371d56 100644
--- a/apps/picsa-tools/budget-tool/.eslintrc.json
+++ b/apps/picsa-tools/budget-tool/.eslintrc.json
@@ -13,7 +13,7 @@
           "warn",
           {
             "type": "attribute",
-            "prefix": "picsa",
+            "prefix": "budget",
             "style": "camelCase"
           }
         ],
@@ -21,7 +21,7 @@
           "warn",
           {
             "type": "element",
-            "prefix": "picsa",
+            "prefix": "budget",
             "style": "kebab-case"
           }
         ],
diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts b/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
index b94ba8140..5378ce3d6 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
@@ -27,10 +27,10 @@ import { BudgetCardNewDialog } from './card/card-new/card-new-dialog';
 import { BudgetCardPlaceholderComponent } from './card/card-placeholder/card-placeholder.component';
 import { BudgetCellComponent } from './cell/cell';
 import { BudgetCellLabourComponent } from './cell/variants/labour/labour';
-import { BudgetCellEditorCardSelectComponent } from './cell-editor/card-select/card-select';
-import { BudgetCellEditorInputValuesComponent } from './cell-editor/input-values/input-values';
-import { BudgetCellEditorFamilyLabourComponent } from './cell-editor/family-labour/family-labour';
-import { BudgetCellEditorProduceConsumedComponent } from './cell-editor/produce-consumed/produce-consumed';
+import { BudgetCellEditorCardSelectComponent } from './editor/card-select/card-select';
+import { BudgetCellEditorInputValuesComponent } from './editor/card-select/input-values/input-values';
+import { BudgetCellEditorFamilyLabourComponent } from './editor/card-select/family-labour/family-labour';
+import { BudgetCellEditorProduceConsumedComponent } from './editor/card-select/produce-consumed/produce-consumed';
 import { BudgeEditorComponent } from './editor/editor.component';
 import { BudgetImportDialogComponent } from './import-dialog/import-dialog.component';
 import {
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/card-select/card-select.html b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.html
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/card-select/card-select.html
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.html
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/card-select/card-select.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.scss
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/card-select/card-select.scss
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.scss
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/card-select/card-select.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.ts
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/card-select/card-select.ts
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.ts
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.html b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.html
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.html
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.html
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.scss
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.scss
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.scss
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.ts
similarity index 96%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.ts
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.ts
index d474b3063..a0bae66a5 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/family-labour/family-labour.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.ts
@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import { MatInput } from '@angular/material/input';
 import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
-import { IBudgetCardWithValues } from '../../../models/budget-tool.models';
+import { IBudgetCardWithValues } from '../../../../models/budget-tool.models';
 
 const LABELS: { [id: string]: string } = {
   adultMale: translateMarker('Male Family Member'),
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/input-values/input-values.html b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.html
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/input-values/input-values.html
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.html
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/input-values/input-values.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.scss
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/input-values/input-values.scss
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.scss
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/input-values/input-values.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.ts
similarity index 88%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/input-values/input-values.ts
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.ts
index bea6bd389..326751072 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/input-values/input-values.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.ts
@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { IBudgetCardWithValues } from '../../../models/budget-tool.models';
-import { BudgetStore } from '../../../store/budget.store';
+import { IBudgetCardWithValues } from '../../../../models/budget-tool.models';
+import { BudgetStore } from '../../../../store/budget.store';
 
 @Component({
   selector: 'budget-cell-editor-input-values',
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/produce-consumed/produce-consumed.html b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.html
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/produce-consumed/produce-consumed.html
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.html
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/produce-consumed/produce-consumed.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.scss
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/produce-consumed/produce-consumed.scss
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.scss
diff --git a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/produce-consumed/produce-consumed.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.ts
similarity index 93%
rename from apps/picsa-tools/budget-tool/src/app/components/cell-editor/produce-consumed/produce-consumed.ts
rename to apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.ts
index 1b8e107d3..b38ca963f 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/cell-editor/produce-consumed/produce-consumed.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.ts
@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { IBudgetCardWithValues } from '../../../models/budget-tool.models';
+import { IBudgetCardWithValues } from '../../../../models/budget-tool.models';
 
 @Component({
   selector: 'budget-cell-editor-produce-consumed',

From 51290c7d940ba89df036eb4ff20f64ea3bfd66dc Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Tue, 11 Apr 2023 22:18:29 -0700
Subject: [PATCH 10/20] feat: improve editor grid layouts

---
 .../card-editor/card-editor.component.html    | 64 +++++++++++++++++
 .../card-editor/card-editor.component.scss    | 69 +++++++++++++++++++
 .../card-editor/card-editor.component.spec.ts | 22 ++++++
 .../card-editor/card-editor.component.ts      | 49 +++++++++++++
 .../components/editor/editor.component.html   | 11 ++-
 .../components/editor/editor.component.scss   | 25 ++++++-
 .../editor/editor.component.spec.ts           | 12 ++--
 .../app/components/editor/editor.component.ts |  2 +-
 8 files changed, 238 insertions(+), 16 deletions(-)
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.scss
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.spec.ts
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts

diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html
new file mode 100644
index 000000000..83e0fb49b
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html
@@ -0,0 +1,64 @@
+<div class="container">
+  <!-- Card summary and delete button -->
+  <div style="position: relative; display: flex">
+    <budget-card [card]="card"></budget-card>
+    <button
+      mat-stroked-button
+      color="primary"
+      class="delete-button"
+      (click)="deleteClicked.emit(card)"
+    >
+      <mat-icon class="delete-button-icon">close</mat-icon>
+    </button>
+  </div>
+
+  <!-- Inputs/Outputs Editor -->
+  <div
+    class="input-values"
+    *ngIf="card.type === 'inputs' || card.type === 'outputs'"
+  >
+    <mat-form-field class="card-input-field quantity" style="margin-right: 8px">
+      <mat-label>{{ 'Quantity' | translate }}</mat-label>
+      <input
+        matInput
+        class="input-editable"
+        [value]="card.values.quantity"
+        type="number"
+        (change)="setValue($event, 'quantity')"
+      />
+    </mat-form-field>
+    <mat-form-field class="card-input-field cost">
+      <mat-label>{{ 'Cost' | translate }}</mat-label>
+      <input
+        matInput
+        class="input-editable"
+        [value]="card.values.cost"
+        type="number"
+        (change)="setValue($event, 'cost')"
+      />
+      <span matTextPrefix>{{ currency }} &nbsp;</span>
+    </mat-form-field>
+    <div style="display: flex; align-items: flex-end; box-sizing: border-box">
+      <div style="margin-right: 10px">
+        <span>{{ currency }}</span>
+      </div>
+      <div style="color: rgba(0, 0, 0, 0.38)">
+        <div style="font-size: 0.75em">{{ 'Total' | translate }}</div>
+        <div>{{ card.values.total | number: '.0' }}</div>
+      </div>
+    </div>
+    <div class="underline"></div>
+  </div>
+
+  <!-- Family Labor Editor -->
+</div>
+
+<!-- TODO - add custom card delete bindings -->
+<!-- <button
+    mat-button
+    *ngIf="card.customMeta && !selected"
+    class="delete-button"
+    (click)="promptCustomDelete($event)"
+  >
+    <mat-icon svgIcon="picsa_delete"></mat-icon>
+  </button> -->
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.scss
new file mode 100644
index 000000000..a2590d013
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.scss
@@ -0,0 +1,69 @@
+:host {
+  cursor: pointer;
+  text-align: center;
+  // prevent strange offset
+  vertical-align: bottom;
+  position: relative;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.delete-button {
+  height: 36px;
+  width: 36px;
+  min-width: 36px;
+  padding: 4px;
+  margin-right: 8px;
+  margin-left: -28px;
+  margin-top: -4px;
+  font-size: 36px;
+  color: var(--color-light);
+  border: 1px solid var(--color-light);
+  border-radius: 50%;
+  background: white;
+}
+.delete-button-icon {
+  margin: 0;
+}
+
+// Input values
+.input-values {
+  margin: 10px;
+  text-align: left;
+}
+
+.card-input-field {
+  border-radius: 2px;
+}
+
+.mat-form-field-disabled {
+  border: none;
+}
+
+.card-input-field.quantity {
+  width: 100px;
+}
+.card-input-field.cost {
+  width: 175px;
+}
+.card-input.total {
+  width: 200px;
+}
+.underline {
+  background-position: 0;
+  background-color: transparent;
+  background-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.42) 0%,
+    rgba(0, 0, 0, 0.42) 33%,
+    transparent 0%
+  );
+  background-size: 4px 100%;
+  background-repeat: repeat-x;
+  height: 1px;
+  width: 100%;
+}
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.spec.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.spec.ts
new file mode 100644
index 000000000..55807c2b7
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardEditorComponent } from './card-editor.component';
+
+describe('CardEditorComponent', () => {
+  let component: CardEditorComponent;
+  let fixture: ComponentFixture<CardEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CardEditorComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CardEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts
new file mode 100644
index 000000000..1694d1239
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts
@@ -0,0 +1,49 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { PicsaDialogService } from '@picsa/shared/features';
+
+import {
+  IBudgetCardDB,
+  IBudgetCardWithValues,
+} from '../../../models/budget-tool.models';
+import { BudgetStore } from '../../../store/budget.store';
+
+@Component({
+  selector: 'budget-card-editor',
+  templateUrl: './card-editor.component.html',
+  styleUrls: ['./card-editor.component.scss'],
+})
+export class BudgetCardEditorComponent {
+  currency: string;
+  @Input() card: IBudgetCardWithValues;
+  @Output() deleteClicked = new EventEmitter<IBudgetCardWithValues>();
+  @Output() valueChanged = new EventEmitter<IBudgetCardWithValues>();
+
+  constructor(private dialog: PicsaDialogService, public store: BudgetStore) {
+    this.currency = store.settings.currency;
+  }
+
+  // using manual bindings instead of ngmodel as nested ngfor-ngmodel with matInput tricky
+  setValue(e: Event, key: 'quantity' | 'cost') {
+    console.log('setting value');
+    const target = e.target as HTMLInputElement;
+    this.card.values[key] = Number(target.value);
+    if (this.card.values.quantity && this.card.values.cost) {
+      this.card.values.total =
+        this.card.values.quantity * this.card.values.cost;
+    }
+    this.valueChanged.emit(this.card);
+  }
+
+  async promptCustomDelete(e: Event) {
+    e.stopPropagation();
+    const dialogRef = await this.dialog.open('delete');
+    dialogRef.afterClosed().subscribe((v) => {
+      if (v) {
+        this.store.deleteCustomCard(this.card as IBudgetCardDB);
+        // HACK - instead of refreshing from store just mark
+        // as deleted to hide (will be gone next refresh)
+        this.card['_deleted'] = true;
+      }
+    });
+  }
+}
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
index 12aa7fd4f..8d0d558fa 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
@@ -7,16 +7,15 @@
   >
     <div class="type-label">{{ editorStep.label | translate }}</div>
     <div class="selected-summary" *ngIf="data[editorStep.type] as selected">
-      <div class="selected-cards-container" [ngSwitch]="editorStep.type">
-        <!-- TODO - create editor summary -->
-        <budget-card
+      <div class="selected-cards-container" [attr.data-type]="editorStep.type">
+        <budget-card-editor
           *ngFor="let card of selected; index as i; trackBy: trackByFn"
           [card]="card"
-          [showDeleteButton]="true"
           (deleteClicked)="removeSelectedCard(editorStep.type, i)"
-          (click)="showCardsList(editorStep.type)"
           @fadeInOut
-        ></budget-card>
+        >
+        </budget-card-editor>
+
         <budget-card-placeholder
           (click)="showCardsList(editorStep.type)"
         ></budget-card-placeholder>
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
index 9dad38441..d19bc9050 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
@@ -41,7 +41,26 @@
   min-height: 140px;
 }
 .selected-cards-container {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 8px;
+  display: grid;
+  padding: 10px;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fit, 128px);
+  // arrange input and output into larger grid for values editor
+  &[data-type='inputs'],
+  &[data-type='outputs'] {
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    gap: 16px;
+
+    @media only screen and (max-width: 768px) {
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    }
+    @media only screen and (max-width: 500px) {
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+    // add item separator for larger grid format
+    & > budget-card-editor {
+      border-bottom: 1px solid var(--color-light);
+      padding: 16px 0;
+    }
+  }
 }
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.spec.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.spec.ts
index 98b1f1275..142207844 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.spec.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.spec.ts
@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { BudgeEditorComponent } from './editor.component';
+import { BudgetEditorComponent } from './editor.component';
 
-describe('BudgeEditorComponent', () => {
-  let component: BudgeEditorComponent;
-  let fixture: ComponentFixture<BudgeEditorComponent>;
+describe('BudgetEditorComponent', () => {
+  let component: BudgetEditorComponent;
+  let fixture: ComponentFixture<BudgetEditorComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [BudgeEditorComponent],
+      declarations: [BudgetEditorComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(BudgeEditorComponent);
+    fixture = TestBed.createComponent(BudgetEditorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
index eb4cb5bc0..462c6482c 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
@@ -31,7 +31,7 @@ const EDITOR_STEPS: { type: IBudgetPeriodType; label: string }[] = [
   styleUrls: ['./editor.component.scss'],
   animations: [FadeInOut(ANIMATION_DELAYED)],
 })
-export class BudgeEditorComponent {
+export class BudgetEditorComponent {
   /** View reference to ng-template content shown in dialog */
   @ViewChild('cardsListDialog') cardsListDialog: TemplateRef<any>;
 

From c37f836eed4857eff5d66f7ccdbb1eb58a0f9d3f Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Tue, 11 Apr 2023 22:18:38 -0700
Subject: [PATCH 11/20] refactor: input vlaues

---
 .../input-values/input-values.html            |  0
 .../input-values/input-values.scss            |  0
 .../input-values/input-values.ts              |  4 +--
 .../app/components/budget-tool.components.ts  | 10 +++++--
 .../src/app/components/card/budget-card.html  | 20 -------------
 .../src/app/components/card/budget-card.scss  | 17 -----------
 .../src/app/components/card/budget-card.ts    | 29 ++-----------------
 7 files changed, 12 insertions(+), 68 deletions(-)
 rename apps/picsa-tools/budget-tool/src/app/components/{editor/card-select => _deprecated}/input-values/input-values.html (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{editor/card-select => _deprecated}/input-values/input-values.scss (100%)
 rename apps/picsa-tools/budget-tool/src/app/components/{editor/card-select => _deprecated}/input-values/input-values.ts (88%)

diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.html b/apps/picsa-tools/budget-tool/src/app/components/_deprecated/input-values/input-values.html
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.html
rename to apps/picsa-tools/budget-tool/src/app/components/_deprecated/input-values/input-values.html
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.scss b/apps/picsa-tools/budget-tool/src/app/components/_deprecated/input-values/input-values.scss
similarity index 100%
rename from apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.scss
rename to apps/picsa-tools/budget-tool/src/app/components/_deprecated/input-values/input-values.scss
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.ts b/apps/picsa-tools/budget-tool/src/app/components/_deprecated/input-values/input-values.ts
similarity index 88%
rename from apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.ts
rename to apps/picsa-tools/budget-tool/src/app/components/_deprecated/input-values/input-values.ts
index 326751072..bea6bd389 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/input-values/input-values.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/_deprecated/input-values/input-values.ts
@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { IBudgetCardWithValues } from '../../../../models/budget-tool.models';
-import { BudgetStore } from '../../../../store/budget.store';
+import { IBudgetCardWithValues } from '../../../models/budget-tool.models';
+import { BudgetStore } from '../../../store/budget.store';
 
 @Component({
   selector: 'budget-cell-editor-input-values',
diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts b/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
index 5378ce3d6..d4b6221b4 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
@@ -27,11 +27,14 @@ import { BudgetCardNewDialog } from './card/card-new/card-new-dialog';
 import { BudgetCardPlaceholderComponent } from './card/card-placeholder/card-placeholder.component';
 import { BudgetCellComponent } from './cell/cell';
 import { BudgetCellLabourComponent } from './cell/variants/labour/labour';
+
+import { BudgetCardEditorComponent } from './editor/card-editor/card-editor.component';
 import { BudgetCellEditorCardSelectComponent } from './editor/card-select/card-select';
-import { BudgetCellEditorInputValuesComponent } from './editor/card-select/input-values/input-values';
+import { BudgetCellEditorInputValuesComponent } from './_deprecated/input-values/input-values';
 import { BudgetCellEditorFamilyLabourComponent } from './editor/card-select/family-labour/family-labour';
 import { BudgetCellEditorProduceConsumedComponent } from './editor/card-select/produce-consumed/produce-consumed';
-import { BudgeEditorComponent } from './editor/editor.component';
+import { BudgetEditorComponent } from './editor/editor.component';
+
 import { BudgetImportDialogComponent } from './import-dialog/import-dialog.component';
 import {
   BudgetListItemComponent,
@@ -46,6 +49,7 @@ const components = [
   BudgetBalanceDotValueComponent,
   BudgetBalanceEditorComponent,
   BudgetCardComponent,
+  BudgetCardEditorComponent,
   BudgetCardImageComponent,
   BudgetCardPlaceholderComponent,
   BudgetCellComponent,
@@ -54,7 +58,7 @@ const components = [
   BudgetCellEditorInputValuesComponent,
   BudgetCellEditorFamilyLabourComponent,
   BudgetCellEditorProduceConsumedComponent,
-  BudgeEditorComponent,
+  BudgetEditorComponent,
   BudgetCellLabourComponent,
   BudgetCardNew,
   BudgetCardNewDialog,
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.html b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.html
index 6fe782063..812ebf81e 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.html
@@ -5,26 +5,6 @@
   [attr.selected]="selected"
   *ngIf="!card._deleted"
 >
-  <!-- TODO - add custom card delete bindings -->
-  <!-- <button
-    mat-button
-    *ngIf="card.customMeta && !selected"
-    class="delete-button"
-    (click)="promptCustomDelete($event)"
-  >
-    <mat-icon svgIcon="picsa_delete"></mat-icon>
-  </button> -->
-
   <budget-card-image [card]="card"></budget-card-image>
   <div [class]="'card-title ' + card.id">{{ card.label | translate }}</div>
 </mat-card>
-
-<button
-  mat-stroked-button
-  color="primary"
-  *ngIf="showDeleteButton"
-  class="delete-button"
-  (click)="deleteClicked.emit(card)"
->
-  <mat-icon class="delete-button-icon">close</mat-icon>
-</button>
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.scss b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.scss
index ddf77b9ef..6149bfdde 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.scss
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.scss
@@ -12,23 +12,6 @@ mat-card.budget-card {
   width: 110px;
   padding: 0;
 }
-.delete-button {
-  position: absolute;
-  right: -16px;
-  top: -10px;
-  height: 36px;
-  width: 36px;
-  min-width: 36px;
-  padding: 4px;
-  font-size: 36px;
-  color: var(--color-light);
-  border: 1px solid var(--color-light);
-  border-radius: 50%;
-  background: white;
-}
-.delete-button-icon {
-  margin: 0;
-}
 
 .budget-card[selected='true'] {
   font-weight: bold;
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.ts b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.ts
index 701063d0c..f8fc0d3d5 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/card/budget-card.ts
@@ -1,12 +1,5 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-} from '@angular/core';
-import { IBudgetCard, IBudgetCardDB } from '../../models/budget-tool.models';
-import { PicsaDialogService } from '@picsa/shared/features';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { IBudgetCard } from '../../models/budget-tool.models';
 import { BudgetStore } from '../../store/budget.store';
 
 @Component({
@@ -22,21 +15,5 @@ export class BudgetCardComponent {
   @Input() card: IBudgetCard;
   @Input() selected: boolean;
 
-  @Input() showDeleteButton = false;
-  @Output() deleteClicked = new EventEmitter<IBudgetCard>();
-
-  constructor(private dialog: PicsaDialogService, public store: BudgetStore) {}
-
-  async promptCustomDelete(e: Event) {
-    e.stopPropagation();
-    const dialogRef = await this.dialog.open('delete');
-    dialogRef.afterClosed().subscribe((v) => {
-      if (v) {
-        this.store.deleteCustomCard(this.card as IBudgetCardDB);
-        // HACK - instead of refreshing from store just mark
-        // as deleted to hide (will be gone next refresh)
-        this.card['_deleted'] = true;
-      }
-    });
-  }
+  constructor(public store: BudgetStore) {}
 }

From 52863376edb7f645f0903a5b43e863f94d7ea7d5 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Tue, 11 Apr 2023 22:24:17 -0700
Subject: [PATCH 12/20] feat: update value setting

---
 .../editor/card-editor/card-editor.component.ts       |  1 -
 .../src/app/components/editor/editor.component.html   |  1 +
 .../src/app/components/editor/editor.component.ts     | 11 +++++++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts
index 1694d1239..d1bacc8f7 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts
@@ -24,7 +24,6 @@ export class BudgetCardEditorComponent {
 
   // using manual bindings instead of ngmodel as nested ngfor-ngmodel with matInput tricky
   setValue(e: Event, key: 'quantity' | 'cost') {
-    console.log('setting value');
     const target = e.target as HTMLInputElement;
     this.card.values[key] = Number(target.value);
     if (this.card.values.quantity && this.card.values.cost) {
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
index 8d0d558fa..49b2bfdda 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
@@ -12,6 +12,7 @@
           *ngFor="let card of selected; index as i; trackBy: trackByFn"
           [card]="card"
           (deleteClicked)="removeSelectedCard(editorStep.type, i)"
+          (valueChanged)="updateCardValue(editorStep.type, i, $event)"
           @fadeInOut
         >
         </budget-card-editor>
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
index 462c6482c..f2a47a232 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
@@ -105,6 +105,17 @@ export class BudgetEditorComponent {
     }
   }
 
+  public updateCardValue(
+    type: IBudgetPeriodType,
+    index: number,
+    card: IBudgetCardWithValues
+  ) {
+    const values = [...this.data[type]];
+    values[index] = card;
+    this.onEditorChange(values, type);
+    this.loadEditorData();
+  }
+
   // the store already knows what period and type it is, so just pass the updated values
   // back up to save
   onEditorChange(values: IBudgetCardWithValues[], type: IBudgetPeriodType) {

From d689df4d6d468ae02bad2171837ed78dc534040e Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Thu, 13 Apr 2023 07:40:56 -0700
Subject: [PATCH 13/20] style: family labour grid

---
 .../editor/card-editor/card-editor.component.html    | 12 ++++++++++++
 .../card-select/family-labour/family-labour.ts       |  4 ++--
 .../src/app/components/editor/editor.component.scss  |  5 +++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html
index 83e0fb49b..a1843623f 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html
@@ -51,6 +51,18 @@
   </div>
 
   <!-- Family Labor Editor -->
+  <div class="input-values" *ngIf="card.type === 'familyLabour'">
+    <mat-form-field class="card-input-field quantity" style="margin-right: 8px">
+      <mat-label>{{ 'Days' | translate }}</mat-label>
+      <input
+        matInput
+        class="input-editable"
+        [value]="card.values ? card.values.quantity : null"
+        type="number"
+        (change)="setValue($event, 'quantity')"
+      />
+    </mat-form-field>
+  </div>
 </div>
 
 <!-- TODO - add custom card delete bindings -->
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.ts
index a0bae66a5..a33fe511d 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/family-labour/family-labour.ts
@@ -11,8 +11,8 @@ import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-mark
 import { IBudgetCardWithValues } from '../../../../models/budget-tool.models';
 
 const LABELS: { [id: string]: string } = {
-  adultMale: translateMarker('Male Family Member'),
-  adultFemale: translateMarker('Female Family Member'),
+  adultMale: translateMarker('Male Member'),
+  adultFemale: translateMarker('Female Member'),
 };
 const MEMBERS = Object.entries(LABELS).map(([id, label]) => ({
   id,
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
index d19bc9050..975adb154 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
@@ -63,4 +63,9 @@
       padding: 16px 0;
     }
   }
+  // family labour
+  &[data-type='familyLabour'] {
+    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
+    gap: 16px;
+  }
 }

From 086c4b1b5370bab1c03c0a6067df504b41a43569 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Sat, 15 Apr 2023 16:06:31 -0700
Subject: [PATCH 14/20] feat: card select scroll to top

---
 .../editor/card-select/card-select.ts         | 11 ++-----
 .../components/editor/editor.component.html   | 30 ++++---------------
 .../app/components/editor/editor.component.ts | 20 +++++--------
 3 files changed, 14 insertions(+), 47 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.ts
index c2c8148e0..e4a23611d 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/card-select.ts
@@ -1,9 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import {
-  IBudgetCardWithValues,
-  IBudgetCard,
-  IBudgetCardType,
-} from '../../../models/budget-tool.models';
+import { IBudgetCardWithValues, IBudgetCard, IBudgetCardType } from '../../../models/budget-tool.models';
 import { BudgetStore } from '../../../store/budget.store';
 import { FadeInOut, ANIMATION_DELAYED } from '@picsa/shared/animations';
 
@@ -36,10 +32,7 @@ export class BudgetCellEditorCardSelectComponent {
     const enterpriseCards: IBudgetCard[] = [];
     const otherCards: IBudgetCard[] = [];
     cards.forEach((c) => {
-      if (
-        c.groupings?.includes(enterpriseGroup) ||
-        c.groupings?.includes('*')
-      ) {
+      if (c.groupings?.includes(enterpriseGroup) || c.groupings?.includes('*')) {
         enterpriseCards.push(c);
       } else {
         otherCards.push(c);
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
index 49b2bfdda..f2177316d 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
@@ -1,10 +1,6 @@
 <!-- Editor -->
 <div id="editorContainer">
-  <div
-    *ngFor="let editorStep of editorSteps"
-    class="type-row"
-    [id]="'edit-' + editorStep.type"
-  >
+  <div *ngFor="let editorStep of editorSteps" class="type-row" [id]="'edit-' + editorStep.type">
     <div class="type-label">{{ editorStep.label | translate }}</div>
     <div class="selected-summary" *ngIf="data[editorStep.type] as selected">
       <div class="selected-cards-container" [attr.data-type]="editorStep.type">
@@ -17,28 +13,20 @@
         >
         </budget-card-editor>
 
-        <budget-card-placeholder
-          (click)="showCardsList(editorStep.type)"
-        ></budget-card-placeholder>
+        <budget-card-placeholder (click)="showCardsList(editorStep.type)"></budget-card-placeholder>
       </div>
     </div>
   </div>
 </div>
 <!-- Footer Next Button -->
-<button
-  mat-raised-button
-  color="primary"
-  class="footer-button"
-  style="margin: 1rem"
-  (click)="handleNextClick.emit()"
->
+<button mat-raised-button color="primary" class="footer-button" style="margin: 1rem" (click)="handleNextClick.emit()">
   Next
 </button>
 
 <!-- Dialog -->
 <ng-template #cardsListDialog>
   <div id="cardsList" *ngIf="data && cardsListType && store.budgetCardsByType">
-    <div style="flex: 1; overflow: auto" [ngSwitch]="cardsListType">
+    <div #cardScroller style="flex: 1; overflow: auto" [ngSwitch]="cardsListType">
       <!-- Family Labour -->
       <budget-cell-editor-family-labour
         *ngSwitchCase="'familyLabour'"
@@ -63,15 +51,7 @@
       >
       </budget-cell-editor-card-select>
     </div>
-    <button
-      mat-raised-button
-      color="primary"
-      class="footer-button"
-      style="margin: 1rem"
-      mat-dialog-close
-    >
-      Next
-    </button>
+    <button mat-raised-button color="primary" class="footer-button" style="margin: 1rem" mat-dialog-close>Next</button>
   </div>
 </ng-template>
 
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
index f2a47a232..908350dd3 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
@@ -1,11 +1,4 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  TemplateRef,
-  ViewChild,
-} from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
 import { FadeInOut, ANIMATION_DELAYED } from '@picsa/shared/animations';
 import {
   IBudgetCard,
@@ -34,6 +27,7 @@ const EDITOR_STEPS: { type: IBudgetPeriodType; label: string }[] = [
 export class BudgetEditorComponent {
   /** View reference to ng-template content shown in dialog */
   @ViewChild('cardsListDialog') cardsListDialog: TemplateRef<any>;
+  @ViewChild('cardScroller', { static: false }) cardScroller: ElementRef<HTMLDivElement>;
 
   public data: IBudgetPeriodData;
   public _activePeriod: number;
@@ -62,6 +56,10 @@ export class BudgetEditorComponent {
       maxHeight: '90vh',
       panelClass: 'no-padding',
     });
+    // scroll existing dialog to top if exists as dialog opens
+    setTimeout(() => {
+      this.cardScroller?.nativeElement?.scrollTo(0, 0);
+    }, 200);
   }
 
   private async scrollToType(type: IBudgetPeriodType) {
@@ -105,11 +103,7 @@ export class BudgetEditorComponent {
     }
   }
 
-  public updateCardValue(
-    type: IBudgetPeriodType,
-    index: number,
-    card: IBudgetCardWithValues
-  ) {
+  public updateCardValue(type: IBudgetPeriodType, index: number, card: IBudgetCardWithValues) {
     const values = [...this.data[type]];
     values[index] = card;
     this.onEditorChange(values, type);

From ca54f7a0e5d1dec79551876e225c0aa01ad434a9 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Sat, 15 Apr 2023 16:18:05 -0700
Subject: [PATCH 15/20] chore: update translations

---
 .../src/app/pages/view/budget-view.page.html  | 20 ++++---------------
 libs/i18n/assets/en.json                      |  6 +++++-
 libs/i18n/assets/ny.json                      |  6 +++++-
 libs/i18n/assets/sw.json                      |  6 +++++-
 libs/i18n/assets/tg.json                      |  6 +++++-
 libs/i18n/templates/_template.csv             |  6 +++++-
 libs/i18n/templates/_template.json            | 18 ++++++++++++++++-
 7 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
index 8b3fd00f2..ee9c32cb9 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
@@ -1,25 +1,13 @@
 <div class="page-content" *mobxAutorun>
   <div class="header-buttons">
-    <button
-      mat-button
-      *ngIf="!isEditorOpen"
-      aria-label="Share"
-      (click)="showShareDialog()"
-    >
-      <mat-icon>share</mat-icon>Share
+    <button mat-button *ngIf="!isEditorOpen" aria-label="Share" (click)="showShareDialog()">
+      <mat-icon>share</mat-icon>{{'Share' | translate }}
     </button>
   </div>
 
   <!-- hide overflow so that editor can be stored outside bottom of page -->
-  <div
-    class="page-content"
-    style="overflow-y: hidden; overflow-x: auto; padding: 0"
-  >
-    <budget-table
-      *ngIf="store.activeBudget"
-      [budget]="store.activeBudget"
-      @fadeInOut
-    ></budget-table>
+  <div class="page-content" style="overflow-y: hidden; overflow-x: auto; padding: 0">
+    <budget-table *ngIf="store.activeBudget" [budget]="store.activeBudget" @fadeInOut></budget-table>
     <!-- <budget-cell-editor
       *ngIf="store.activeType && store.activeBudget && store.activeBudget.data"
       [activePeriod]="store.activePeriod"
diff --git a/libs/i18n/assets/en.json b/libs/i18n/assets/en.json
index 743c7c73b..0e8664fd8 100644
--- a/libs/i18n/assets/en.json
+++ b/libs/i18n/assets/en.json
@@ -78,7 +78,8 @@
   "money": "money",
   "wood": "wood",
   "Activities": "Activities",
-  "Add Member": "Add Member",
+  "Add Female Member": "Add Female Member",
+  "Add Male Member": "Add Male Member",
   "Balance": "Balance",
   "Consumed": "Consumed",
   "Cost": "Cost",
@@ -88,11 +89,13 @@
   "Description (optional)": "Description (optional)",
   "Enterprise": "Enterprise",
   "Family": "Family",
+  "Female Member": "Female Member",
   "How long is your budget for?": "How long is your budget for?",
   "Import Budget Code": "Import Budget Code",
   "Increase Scale": "Increase Scale",
   "Inputs": "Inputs",
   "Length": "Length",
+  "Male Member": "Male Member",
   "Next": "Next",
   "Outputs": "Outputs",
   "Quantity": "Quantity",
@@ -145,6 +148,7 @@
   "out of": "out of",
   "satisfy": "satisfy",
   "years out of every 10": "years out of every 10",
+  "Select Country": "Select Country",
   "Budget Tool": "Budget Tool",
   "Click on the button below to retry": "Click on the button below to retry",
   "Climate Tool": "Climate Tool",
diff --git a/libs/i18n/assets/ny.json b/libs/i18n/assets/ny.json
index b70399b16..9f129ad9b 100644
--- a/libs/i18n/assets/ny.json
+++ b/libs/i18n/assets/ny.json
@@ -1,7 +1,11 @@
 {
+  "Add Female Member": "",
+  "Add Male Member": "",
+  "Female Member": "",
+  "Male Member": "",
+  "Select Country": "",
   "Activities": "zochitika",
   "add custom": "onjezani mwambo",
-  "Add Member": "onjezani membala",
   "afforestation": "kugogoda",
   "Analyse": "fufuza",
   "apply fertiliser": "thira feteleza",
diff --git a/libs/i18n/assets/sw.json b/libs/i18n/assets/sw.json
index 04d865efb..25b6df16e 100644
--- a/libs/i18n/assets/sw.json
+++ b/libs/i18n/assets/sw.json
@@ -1,5 +1,6 @@
 {
-  "Add Member": "",
+  "Add Female Member": "",
+  "Add Male Member": "",
   "Analyse": "",
   "Chart": "",
   "Collection not found": "",
@@ -9,12 +10,14 @@
   "description": "",
   "End": "",
   "Family": "",
+  "Female Member": "",
   "Forms": "",
   "Hide Tool Options": "",
   "Import Budget Code": "",
   "Increase Scale": "",
   "Joined": "",
   "Line": "",
+  "Male Member": "",
   "Monitoring": "",
   "On average": "",
   "onions": "",
@@ -27,6 +30,7 @@
   "Save your budget": "",
   "Seasonal Total Rainfall": "",
   "Seasonal Total Rainfall (mm)": "",
+  "Select Country": "",
   "Share": "",
   "Share App": "",
   "Share App Link": "",
diff --git a/libs/i18n/assets/tg.json b/libs/i18n/assets/tg.json
index f9a71e836..6d2cab08b 100644
--- a/libs/i18n/assets/tg.json
+++ b/libs/i18n/assets/tg.json
@@ -1,5 +1,6 @@
 {
-  "Add Member": "",
+  "Add Female Member": "",
+  "Add Male Member": "",
   "Analyse": "",
   "Chart": "",
   "Collection not found": "",
@@ -9,12 +10,14 @@
   "description": "",
   "End": "",
   "Family": "",
+  "Female Member": "",
   "Forms": "",
   "Hide Tool Options": "",
   "Import Budget Code": "",
   "Increase Scale": "",
   "Joined": "",
   "Line": "",
+  "Male Member": "",
   "Monitoring": "",
   "On average": "",
   "onions": "",
@@ -27,6 +30,7 @@
   "Save your budget": "",
   "Seasonal Total Rainfall": "",
   "Seasonal Total Rainfall (mm)": "",
+  "Select Country": "",
   "Share": "",
   "Share App": "",
   "Share App Link": "",
diff --git a/libs/i18n/templates/_template.csv b/libs/i18n/templates/_template.csv
index 7846fb0b5..25803c806 100644
--- a/libs/i18n/templates/_template.csv
+++ b/libs/i18n/templates/_template.csv
@@ -78,7 +78,8 @@ tool,context,text
 "budget","outputs","money"
 "budget","outputs","wood"
 "budget",,"Activities"
-"budget",,"Add Member"
+"budget",,"Add Female Member"
+"budget",,"Add Male Member"
 "budget",,"Balance"
 "budget",,"Consumed"
 "budget",,"Cost"
@@ -88,11 +89,13 @@ tool,context,text
 "budget",,"Description (optional)"
 "budget",,"Enterprise"
 "budget",,"Family"
+"budget",,"Female Member"
 "budget",,"How long is your budget for?"
 "budget",,"Import Budget Code"
 "budget",,"Increase Scale"
 "budget",,"Inputs"
 "budget",,"Length"
+"budget",,"Male Member"
 "budget",,"Next"
 "budget",,"Outputs"
 "budget",,"Quantity"
@@ -145,6 +148,7 @@ tool,context,text
 "climate",,"out of"
 "climate",,"satisfy"
 "climate",,"years out of every 10"
+"common",,"Select Country"
 "extension",,"Budget Tool"
 "extension",,"Click on the button below to retry"
 "extension",,"Climate Tool"
diff --git a/libs/i18n/templates/_template.json b/libs/i18n/templates/_template.json
index 8d371ff77..9855c4eb4 100644
--- a/libs/i18n/templates/_template.json
+++ b/libs/i18n/templates/_template.json
@@ -394,7 +394,11 @@
     "tool": "budget"
   },
   {
-    "text": "Add Member",
+    "text": "Add Female Member",
+    "tool": "budget"
+  },
+  {
+    "text": "Add Male Member",
     "tool": "budget"
   },
   {
@@ -433,6 +437,10 @@
     "text": "Family",
     "tool": "budget"
   },
+  {
+    "text": "Female Member",
+    "tool": "budget"
+  },
   {
     "text": "How long is your budget for?",
     "tool": "budget"
@@ -453,6 +461,10 @@
     "text": "Length",
     "tool": "budget"
   },
+  {
+    "text": "Male Member",
+    "tool": "budget"
+  },
   {
     "text": "Next",
     "tool": "budget"
@@ -673,6 +685,10 @@
     "text": "years out of every 10",
     "tool": "climate"
   },
+  {
+    "text": "Select Country",
+    "tool": "common"
+  },
   {
     "text": "Budget Tool",
     "tool": "extension"

From 02f12d9eedfee7acfdf0a2726b51a00fb0034729 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Sat, 15 Apr 2023 16:28:02 -0700
Subject: [PATCH 16/20] fix: editor back handling

---
 .../src/app/pages/view/budget-view.page.html  |  4 +-
 .../src/app/pages/view/budget-view.page.ts    | 63 ++++++++-----------
 2 files changed, 28 insertions(+), 39 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
index ee9c32cb9..99b6c2f81 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
@@ -8,6 +8,7 @@
   <!-- hide overflow so that editor can be stored outside bottom of page -->
   <div class="page-content" style="overflow-y: hidden; overflow-x: auto; padding: 0">
     <budget-table *ngIf="store.activeBudget" [budget]="store.activeBudget" @fadeInOut></budget-table>
+    <!-- Legacy Editor -->
     <!-- <budget-cell-editor
       *ngIf="store.activeType && store.activeBudget && store.activeBudget.data"
       [activePeriod]="store.activePeriod"
@@ -15,7 +16,8 @@
       [isOpen]="isEditorOpen"
       [@flyInOut]="isEditorOpen ? 'in' : 'out'"
     ></budget-cell-editor> -->
-    <!-- WiP Updated editor (replaces ABOVE) -->
+
+    <!-- Updated Editor -->
     <budget-editor
       *ngIf="store.activeType && store.activeBudget && store.activeBudget.data"
       [activePeriod]="store.activePeriod"
diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
index 3006521ad..01abb5c8b 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
@@ -1,12 +1,8 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
 import { BudgetStore } from '../../store/budget.store';
-import {
-  FadeInOut,
-  OpenClosed,
-  FlyInOut,
-  ANIMATION_DEFAULTS_Y,
-} from '@picsa/shared/animations';
+import { FadeInOut, OpenClosed, FlyInOut, ANIMATION_DEFAULTS_Y } from '@picsa/shared/animations';
 import { Subject, takeUntil } from 'rxjs';
 import { PicsaCommonComponentsService } from '@picsa/components/src';
 import { MatDialog } from '@angular/material/dialog';
@@ -17,11 +13,7 @@ import { PicsaTranslateService } from '@picsa/shared/modules';
   selector: 'budget-view',
   templateUrl: './budget-view.page.html',
   styleUrls: ['./budget-view.page.scss'],
-  animations: [
-    FadeInOut({ inDelay: 200 }),
-    OpenClosed,
-    FlyInOut(ANIMATION_DEFAULTS_Y),
-  ],
+  animations: [FadeInOut({ inDelay: 200 }), OpenClosed, FlyInOut(ANIMATION_DEFAULTS_Y)],
 })
 export class BudgetViewPage implements OnInit, OnDestroy {
   loader: HTMLIonLoadingElement;
@@ -31,7 +23,7 @@ export class BudgetViewPage implements OnInit, OnDestroy {
 
   constructor(
     private route: ActivatedRoute,
-    private router: Router,
+    private location: Location,
     public store: BudgetStore,
     private componentsService: PicsaCommonComponentsService,
     private dialog: MatDialog,
@@ -59,35 +51,30 @@ export class BudgetViewPage implements OnInit, OnDestroy {
   }
 
   public async handleEditorNext() {
-    this.router.navigate([], {
-      relativeTo: this.route,
-      queryParams: { edit: undefined },
-      queryParamsHandling: 'merge',
-    });
+    // use back-navigation to return to budget view without editor open
+    this.location.back();
   }
 
   /** Subscribe to query param changes and update headers as required */
   private addRouterSubscription() {
-    this.route.queryParams
-      .pipe(takeUntil(this.componentDestroyed$))
-      .subscribe(async (params) => {
-        const { edit, period, label, type } = params;
-        if (period) {
-          this.store.setActivePeriod(Number(period));
-        }
-        if (type) {
-          this.store.setActiveType(type);
+    this.route.queryParams.pipe(takeUntil(this.componentDestroyed$)).subscribe(async (params) => {
+      const { edit, period, label, type } = params;
+      if (period) {
+        this.store.setActivePeriod(Number(period));
+      }
+      if (type) {
+        this.store.setActiveType(type);
+      }
+      this.isEditorOpen = !!edit;
+      this.periodLabel = label;
+      if (this.store.activeBudget) {
+        const { meta } = this.store.activeBudget;
+        let title = meta.title;
+        if (this.isEditorOpen) {
+          title = await this.translateService.translateText(label);
         }
-        this.isEditorOpen = !!edit;
-        this.periodLabel = label;
-        if (this.store.activeBudget) {
-          const { meta } = this.store.activeBudget;
-          let title = meta.title;
-          if (this.isEditorOpen) {
-            title = await this.translateService.translateText(label);
-          }
-          this.componentsService.setHeader({ title });
-        }
-      });
+        this.componentsService.setHeader({ title });
+      }
+    });
   }
 }

From 6562f348b8cd559087532c58686c7ba998103a87 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Sat, 15 Apr 2023 17:06:52 -0700
Subject: [PATCH 17/20] chore: add import sort lint rule

---
 .eslintrc.json                              |  6 ++++--
 apps/picsa-tools/budget-tool/.eslintrc.json | 10 +++++-----
 package.json                                |  1 +
 yarn.lock                                   | 10 ++++++++++
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index fa4b11f53..47c1290c9 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,7 +1,7 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nrwl/nx", "simple-import-sort"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
@@ -27,7 +27,9 @@
         "@typescript-eslint/no-unused-vars": ["warn"],
         "no-loss-of-precision": "off",
         "no-prototype-builtins": "off",
-        "no-unused-vars": "off"
+        "no-unused-vars": "off",
+        "simple-import-sort/imports": "off",
+        "simple-import-sort/exports": "off"
       }
     },
     {
diff --git a/apps/picsa-tools/budget-tool/.eslintrc.json b/apps/picsa-tools/budget-tool/.eslintrc.json
index 9e8371d56..e27115186 100644
--- a/apps/picsa-tools/budget-tool/.eslintrc.json
+++ b/apps/picsa-tools/budget-tool/.eslintrc.json
@@ -1,13 +1,11 @@
 {
   "extends": ["../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
+
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": [
-        "plugin:@nrwl/nx/angular",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
+      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "warn",
@@ -25,7 +23,9 @@
             "style": "kebab-case"
           }
         ],
-        "@angular-eslint/component-class-suffix": ["warn"]
+        "@angular-eslint/component-class-suffix": ["warn"],
+        "simple-import-sort/imports": "warn",
+        "simple-import-sort/exports": "warn"
       }
     },
     {
diff --git a/package.json b/package.json
index 8403a1576..eda51daca 100644
--- a/package.json
+++ b/package.json
@@ -132,6 +132,7 @@
     "eslint": "8.15.0",
     "eslint-config-prettier": "8.1.0",
     "eslint-plugin-cypress": "^2.10.3",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "execa": "^5.1.1",
     "fs-extra": "^10.1.0",
     "husky": "^8.0.0",
diff --git a/yarn.lock b/yarn.lock
index 837f0ad84..53af3a829 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11259,6 +11259,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-simple-import-sort@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "eslint-plugin-simple-import-sort@npm:10.0.0"
+  peerDependencies:
+    eslint: ">=5.0.0"
+  checksum: 23221ff63f80f9c52da807d388ee8a51bc36a3b73345f60ec886e7973c28d75eb1d1e47f7f2916a7c1f94a1b5037b1450356a64a8fbd58096fd6bee57c6e3e48
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
   version: 5.1.1
   resolution: "eslint-scope@npm:5.1.1"
@@ -16358,6 +16367,7 @@ __metadata:
     eslint: 8.15.0
     eslint-config-prettier: 8.1.0
     eslint-plugin-cypress: ^2.10.3
+    eslint-plugin-simple-import-sort: ^10.0.0
     execa: ^5.1.1
     firebase: ^9.16.0
     fs-extra: ^10.1.0

From 4e58be8cf0f64cb203d6a0fb80c761914421cae1 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Sat, 15 Apr 2023 17:14:09 -0700
Subject: [PATCH 18/20] chore: update translations

---
 .../budget-tool/src/app/store/budget.store.ts | 141 ++++++------------
 libs/i18n/assets/en.json                      |   2 +
 libs/i18n/assets/ny.json                      |   2 +
 libs/i18n/assets/sw.json                      |   2 +
 libs/i18n/assets/tg.json                      |   2 +
 libs/i18n/templates/_template.csv             |   2 +
 libs/i18n/templates/_template.json            |   8 +
 7 files changed, 63 insertions(+), 96 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts b/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts
index 90f463b10..cd8db737f 100644
--- a/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts
+++ b/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts
@@ -1,32 +1,33 @@
 import { Injectable, OnDestroy } from '@angular/core';
-import { toJS } from 'mobx';
-import { observable, action, computed } from 'mobx-angular';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
+import { ConfigurationService, IConfiguration } from '@picsa/configuration';
+import { APP_VERSION } from '@picsa/environments';
+import { IAppMeta } from '@picsa/models';
+import { generateDBMeta, PicsaDbService } from '@picsa/shared/services/core/db';
+import { generateID } from '@picsa/shared/services/core/db/db.service';
+import { PrintProvider } from '@picsa/shared/services/native/print';
 import merge from 'deepmerge';
+import { toJS } from 'mobx';
+import { action, computed, observable } from 'mobx-angular';
+import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
 
+import { BUDGET_CARDS } from '../data';
 import {
   IBudget,
-  IBudgetPeriodData,
+  IBudgetBalance,
   IBudgetCard,
-  IBudgetMeta,
   IBudgetCardDB,
   IBudgetCardWithValues,
-  IBudgetValueScale,
-  IBudgetValueCounters,
-  IBudgetBalance,
-  IBudgetPeriodType,
   IBudgetCodeDoc,
+  IBudgetMeta,
+  IBudgetPeriodData,
+  IBudgetPeriodType,
+  IBudgetValueCounters,
+  IBudgetValueScale,
 } from '../models/budget-tool.models';
 import { checkForBudgetUpgrades } from '../utils/budget.upgrade';
-import { NEW_BUDGET_TEMPLATE, MONTHS } from './templates';
-import { BUDGET_CARDS } from '../data';
-import { PicsaDbService, generateDBMeta } from '@picsa/shared/services/core/db';
-import { IAppMeta } from '@picsa/models';
-import { APP_VERSION } from '@picsa/environments';
-import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
-import { ConfigurationService, IConfiguration } from '@picsa/configuration';
-import { PrintProvider } from '@picsa/shared/services/native/print';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { generateID } from '@picsa/shared/services/core/db/db.service';
+import { MONTHS, NEW_BUDGET_TEMPLATE } from './templates';
 const TYPE_CARDS_BASE: {
   [key in IBudgetPeriodType | 'enterprise' | 'other']: IBudgetCard[];
 } = {
@@ -39,20 +40,14 @@ const TYPE_CARDS_BASE: {
   other: [],
 };
 const TYPE_LABELS: { [key in IBudgetPeriodType | 'summary']: string } = {
-  activities: 'Activities',
-  familyLabour: 'Family Labour',
-  inputs: 'Inputs',
-  outputs: 'Outputs',
-  produceConsumed: 'Produce Consumed',
-  summary: 'Summary',
+  activities: translateMarker('Activities'),
+  familyLabour: translateMarker('Family Labour'),
+  inputs: translateMarker('Inputs'),
+  outputs: translateMarker('Outputs'),
+  produceConsumed: translateMarker('Produce Consumed'),
+  summary: translateMarker('Summary'),
 };
-type IBudgetCounter =
-  | 'large'
-  | 'large-half'
-  | 'medium'
-  | 'medium-half'
-  | 'small'
-  | 'small-half';
+type IBudgetCounter = 'large' | 'large-half' | 'medium' | 'medium-half' | 'small' | 'small-half';
 export type IBudgetCounterSVGIcons = Record<IBudgetCounter, SafeResourceUrl>;
 
 @Injectable({
@@ -76,9 +71,7 @@ export class BudgetStore implements OnDestroy {
   // get unique list of types in enterprise cards
   @computed get enterpriseTypeCards(): IBudgetCardDB[] {
     console.log('get enterprisetype cards');
-    const enterpriseCards = this.budgetCards.filter(
-      (c) => c.type === 'enterprise'
-    );
+    const enterpriseCards = this.budgetCards.filter((c) => c.type === 'enterprise');
     return this._createCardGroupCards(enterpriseCards);
   }
   @observable budgetCardsByType = TYPE_CARDS_BASE;
@@ -116,12 +109,9 @@ export class BudgetStore implements OnDestroy {
   ) {
     this.counterSVGIcons = this.createBudgetCounterSVGs();
     // TODO store never destroyed so would be good to limit listeners
-    this.configurationService.activeConfiguration$
-      .pipe(takeUntil(this.destroyed$))
-      .subscribe((v) => {
-        this.settings =
-          this.configurationService.activeConfiguration.budgetTool;
-      });
+    this.configurationService.activeConfiguration$.pipe(takeUntil(this.destroyed$)).subscribe((v) => {
+      this.settings = this.configurationService.activeConfiguration.budgetTool;
+    });
   }
   ngOnDestroy(): void {
     this.destroyed$.next(true);
@@ -133,9 +123,7 @@ export class BudgetStore implements OnDestroy {
    *
    ***************************************************************************/
   getfilteredEnterprises(grouping: string) {
-    return this.budgetCards.filter(
-      (e) => e.type === 'enterprise' && e.groupings?.includes(grouping)
-    );
+    return this.budgetCards.filter((e) => e.type === 'enterprise' && e.groupings?.includes(grouping));
   }
   /**************************************************************************
    *            Budget Values
@@ -144,9 +132,7 @@ export class BudgetStore implements OnDestroy {
   // merge current budget with added data, optionally can merge deep to include
   // nested properties
   patchBudget(patch: Partial<IBudget>, deepMerge = false) {
-    const budget = deepMerge
-      ? merge(this.activeBudget, patch)
-      : { ...this.activeBudget, ...patch };
+    const budget = deepMerge ? merge(this.activeBudget, patch) : { ...this.activeBudget, ...patch };
     this.setActiveBudget(budget);
     this.saveBudget();
   }
@@ -192,18 +178,14 @@ export class BudgetStore implements OnDestroy {
     const svgPaths = {
       large:
         'M479.99952 480.00078c-149.33319.00002-298.66639.00002-447.999582 0C106.66653 330.6673 181.33313 181.33382 255.99974 32.00035c74.66661 149.33347 149.3332 298.66695 223.99978 448.00043Z',
-      medium:
-        'M41.695065 41.695068H470.30496c-.00001 142.869952 0 285.739912 0 428.609862H41.695065V41.695068z',
+      medium: 'M41.695065 41.695068H470.30496c-.00001 142.869952 0 285.739912 0 428.609862H41.695065V41.695068z',
       small:
         'M460.09621 256c5.02545 132.35505-139.57369 238.73445-264.41078 194.98057C67.841246 416.64296 8.7177668 247.12958 87.552104 140.7586 158.13858 28.727575 337.53963 22.374453 415.87405 129.13175 444.36362 164.8484 460.20746 210.31914 460.09621 256Z',
     };
     for (const [name, path] of Object.entries(svgPaths)) {
       const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
       svg.setAttribute('viewBox', '0 0 512 512');
-      const iconPath = document.createElementNS(
-        'http://www.w3.org/2000/svg',
-        'path'
-      );
+      const iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
       iconPath.setAttribute('d', path);
       iconPath.setAttribute('fill', '#c5ceb2');
       iconPath.setAttribute('stroke', '#77933c');
@@ -214,9 +196,7 @@ export class BudgetStore implements OnDestroy {
       // Create a half-style el where viewbox cuts off half of element
       const halfEl = svg.cloneNode(true) as SVGElement;
       halfEl.setAttribute('viewBox', '0 0 256 512');
-      svgs[`${name}-half`] = this.sanitizer.bypassSecurityTrustHtml(
-        halfEl.outerHTML
-      );
+      svgs[`${name}-half`] = this.sanitizer.bypassSecurityTrustHtml(halfEl.outerHTML);
     }
     return svgs;
   }
@@ -235,11 +215,7 @@ export class BudgetStore implements OnDestroy {
     this.setActiveBudget(budget);
   }
   async saveBudget() {
-    await this.db.setDoc(
-      'budgetTool/${GROUP}/budgets',
-      this.activeBudgetValue,
-      true
-    );
+    await this.db.setDoc('budgetTool/${GROUP}/budgets', this.activeBudgetValue, true);
     await this.loadSavedBudgets();
   }
   async loadBudgetByKey(key: string) {
@@ -254,11 +230,7 @@ export class BudgetStore implements OnDestroy {
     }
   }
   async loadBudgetByShareCode(code: string) {
-    const codeDoc = await this.db.getDoc<IBudgetCodeDoc>(
-      'budgetTool/default/shareCodes',
-      code,
-      'server'
-    );
+    const codeDoc = await this.db.getDoc<IBudgetCodeDoc>('budgetTool/default/shareCodes', code, 'server');
     if (codeDoc) {
       return this.importBudget(codeDoc.budget_key);
     } else {
@@ -275,31 +247,21 @@ export class BudgetStore implements OnDestroy {
   }
 
   private async loadSavedBudgets(): Promise<void> {
-    const budgets = await this.db.getCollection<IBudget>(
-      'budgetTool/${GROUP}/budgets'
-    );
-    this.savedBudgets = budgets.sort((a, b) =>
-      b._modified > a._modified ? 1 : -1
-    );
+    const budgets = await this.db.getCollection<IBudget>('budgetTool/${GROUP}/budgets');
+    this.savedBudgets = budgets.sort((a, b) => (b._modified > a._modified ? 1 : -1));
   }
 
   async deleteBudget(budget: IBudget) {
     await this.db.deleteDocs('budgetTool/${GROUP}/budgets', [budget._key]);
     if (budget.shareCode) {
-      await this.db.deleteDocs('budgetTool/default/shareCodes', [
-        budget.shareCode,
-      ]);
+      await this.db.deleteDocs('budgetTool/default/shareCodes', [budget.shareCode]);
     }
     this.loadSavedBudgets();
   }
 
   /** Duplicate a server budget and save locally */
   private async importBudget(key: string): Promise<IBudget | undefined> {
-    const budget: IBudget = await this.db.getDoc(
-      'budgetTool/${GROUP}/budgets',
-      key,
-      'server'
-    );
+    const budget: IBudget = await this.db.getDoc('budgetTool/${GROUP}/budgets', key, 'server');
     if (budget) {
       // remove previous share code to allow re-share as new budget
       if (budget.shareCode) {
@@ -317,11 +279,7 @@ export class BudgetStore implements OnDestroy {
   }
 
   public async shareAsImage() {
-    return this.printPrvdr.shareHtmlDom(
-      '#budget',
-      this.activeBudget.meta.title,
-      this.activeBudget.meta.title
-    );
+    return this.printPrvdr.shareHtmlDom('#budget', this.activeBudget.meta.title, this.activeBudget.meta.title);
   }
 
   public async shareAsLink() {
@@ -334,11 +292,7 @@ export class BudgetStore implements OnDestroy {
         _key: code,
         budget_key: this.activeBudget._key,
       };
-      await this.db.setDoc(
-        'budgetTool/default/shareCodes',
-        budgetCodeDoc,
-        true
-      );
+      await this.db.setDoc('budgetTool/default/shareCodes', budgetCodeDoc, true);
       this.activeBudget.shareCode = code;
     }
     await this.saveBudget();
@@ -457,14 +411,9 @@ export class BudgetStore implements OnDestroy {
   }
   // group all enterprise cards and create new parent card that will be used to reveal group
   private _createCardGroupCards(cards: IBudgetCard[]): IBudgetCardDB[] {
-    const allGroupings: string[][] = cards.map(
-      (e) => toJS(e.groupings) as string[]
-    );
+    const allGroupings: string[][] = cards.map((e) => toJS(e.groupings) as string[]);
     // eslint-disable-next-line prefer-spread
-    const mergedGroupings: string[] = ([] as any).concat.apply(
-      [],
-      allGroupings
-    );
+    const mergedGroupings: string[] = ([] as any).concat.apply([], allGroupings);
     // NOTE - technically Array.from shouldn't be required but current issue with typescript
     // see https://stackoverflow.com/questions/33464504/using-spread-syntax-and-new-set-with-typescript/33464709
     const uniqueGroups = [...Array.from(new Set(mergedGroupings))].sort();
diff --git a/libs/i18n/assets/en.json b/libs/i18n/assets/en.json
index 0e8664fd8..5cc4293ea 100644
--- a/libs/i18n/assets/en.json
+++ b/libs/i18n/assets/en.json
@@ -89,6 +89,7 @@
   "Description (optional)": "Description (optional)",
   "Enterprise": "Enterprise",
   "Family": "Family",
+  "Family Labour": "Family Labour",
   "Female Member": "Female Member",
   "How long is your budget for?": "How long is your budget for?",
   "Import Budget Code": "Import Budget Code",
@@ -98,6 +99,7 @@
   "Male Member": "Male Member",
   "Next": "Next",
   "Outputs": "Outputs",
+  "Produce Consumed": "Produce Consumed",
   "Quantity": "Quantity",
   "Save": "Save",
   "Save your budget": "Save your budget",
diff --git a/libs/i18n/assets/ny.json b/libs/i18n/assets/ny.json
index 9f129ad9b..98c3aadfe 100644
--- a/libs/i18n/assets/ny.json
+++ b/libs/i18n/assets/ny.json
@@ -1,8 +1,10 @@
 {
   "Add Female Member": "",
   "Add Male Member": "",
+  "Family Labour": "",
   "Female Member": "",
   "Male Member": "",
+  "Produce Consumed": "",
   "Select Country": "",
   "Activities": "zochitika",
   "add custom": "onjezani mwambo",
diff --git a/libs/i18n/assets/sw.json b/libs/i18n/assets/sw.json
index 25b6df16e..98978f677 100644
--- a/libs/i18n/assets/sw.json
+++ b/libs/i18n/assets/sw.json
@@ -78,6 +78,7 @@
   "End of Season": "Mwisho wa Msimu",
   "End of season is defined as the last day in the season (1st October - 30th April) with more than 10mm of rainfall.": "Mwisho wa msimu hufafanuliwa kama siku ya mwisho msimu (1 Oktoba - 30 Aprili) na zaidi ya 10mm ya mvua.",
   "Enterprise": "",
+  "Family Labour": "Kazi ya Familia",
   "family labour": "",
   "feed": "",
   "feeding livestock": "",
@@ -116,6 +117,7 @@
   "ploughing": "",
   "post-harvest handling": "",
   "pot for storage": "",
+  "Produce Consumed": "Kuzalisha Iliyotumiwa",
   "protective equipment": "",
   "provide supplements": "",
   "provide water": "",
diff --git a/libs/i18n/assets/tg.json b/libs/i18n/assets/tg.json
index 6d2cab08b..200becb20 100644
--- a/libs/i18n/assets/tg.json
+++ b/libs/i18n/assets/tg.json
@@ -78,6 +78,7 @@
   "End of Season": "Охири мавсим",
   "End of season is defined as the last day in the season (1st October - 30th April) with more than 10mm of rainfall.": "Анҷоми мавсим ҳамчун рӯзи охир дар мавсими (1 октябр - 30 апрел) бо зиёда аз 10 миллион боришот муайян карда мешавад.",
   "Enterprise": "Корхона",
+  "Family Labour": "Меҳнати оила",
   "family labour": "меҳнати оила",
   "feed": "таъом",
   "feeding livestock": "таъом додани чорводорӣ",
@@ -116,6 +117,7 @@
   "ploughing": "шудгор кардан",
   "post-harvest handling": "Мавридҳои ҳосили пас аз",
   "pot for storage": "дег барои нигаҳдошт",
+  "Produce Consumed": "Маҳсулоти истеъмолшуда",
   "protective equipment": "Таҷҳизоти муҳофизатӣ",
   "provide supplements": "лавозимотро таъмин кунед",
   "provide water": "Таъмини об",
diff --git a/libs/i18n/templates/_template.csv b/libs/i18n/templates/_template.csv
index 25803c806..135220467 100644
--- a/libs/i18n/templates/_template.csv
+++ b/libs/i18n/templates/_template.csv
@@ -89,6 +89,7 @@ tool,context,text
 "budget",,"Description (optional)"
 "budget",,"Enterprise"
 "budget",,"Family"
+"budget",,"Family Labour"
 "budget",,"Female Member"
 "budget",,"How long is your budget for?"
 "budget",,"Import Budget Code"
@@ -98,6 +99,7 @@ tool,context,text
 "budget",,"Male Member"
 "budget",,"Next"
 "budget",,"Outputs"
+"budget",,"Produce Consumed"
 "budget",,"Quantity"
 "budget",,"Save"
 "budget",,"Save your budget"
diff --git a/libs/i18n/templates/_template.json b/libs/i18n/templates/_template.json
index 9855c4eb4..a232cc744 100644
--- a/libs/i18n/templates/_template.json
+++ b/libs/i18n/templates/_template.json
@@ -437,6 +437,10 @@
     "text": "Family",
     "tool": "budget"
   },
+  {
+    "text": "Family Labour",
+    "tool": "budget"
+  },
   {
     "text": "Female Member",
     "tool": "budget"
@@ -473,6 +477,10 @@
     "text": "Outputs",
     "tool": "budget"
   },
+  {
+    "text": "Produce Consumed",
+    "tool": "budget"
+  },
   {
     "text": "Quantity",
     "tool": "budget"

From eb8771ee01734c10018e257ae2e4425b77a91500 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Sun, 16 Apr 2023 11:49:52 -0700
Subject: [PATCH 19/20] feat: produce consumed editor

---
 .../card-editor/card-editor.component.html    | 26 +++--
 .../card-editor/card-editor.component.ts      | 17 ++--
 .../produce-consumed/produce-consumed.html    | 23 +++--
 .../produce-consumed/produce-consumed.ts      | 95 +++++++++++++++++--
 .../components/editor/editor.component.html   |  6 +-
 .../components/editor/editor.component.scss   |  4 +
 .../app/components/editor/editor.component.ts | 14 ++-
 .../src/app/models/budget-tool.models.ts      |  1 -
 .../budget-tool/src/app/store/budget.store.ts |  1 -
 libs/i18n/assets/en.json                      |  3 +
 libs/i18n/assets/ny.json                      |  3 +
 libs/i18n/assets/sw.json                      |  3 +
 libs/i18n/assets/tg.json                      |  3 +
 libs/i18n/templates/_template.csv             |  3 +
 libs/i18n/templates/_template.json            | 12 +++
 15 files changed, 172 insertions(+), 42 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html
index a1843623f..74084b438 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.html
@@ -2,21 +2,13 @@
   <!-- Card summary and delete button -->
   <div style="position: relative; display: flex">
     <budget-card [card]="card"></budget-card>
-    <button
-      mat-stroked-button
-      color="primary"
-      class="delete-button"
-      (click)="deleteClicked.emit(card)"
-    >
+    <button mat-stroked-button color="primary" class="delete-button" (click)="deleteClicked.emit(card)">
       <mat-icon class="delete-button-icon">close</mat-icon>
     </button>
   </div>
 
   <!-- Inputs/Outputs Editor -->
-  <div
-    class="input-values"
-    *ngIf="card.type === 'inputs' || card.type === 'outputs'"
-  >
+  <div class="input-values" *ngIf="card.type === 'inputs' || card.type === 'outputs'">
     <mat-form-field class="card-input-field quantity" style="margin-right: 8px">
       <mat-label>{{ 'Quantity' | translate }}</mat-label>
       <input
@@ -63,6 +55,20 @@
       />
     </mat-form-field>
   </div>
+
+  <!-- Produce Consumed Editor -->
+  <div class="input-values" *ngIf="card.type === 'produceConsumed'">
+    <mat-form-field class="card-input-field quantity" style="margin-right: 8px">
+      <mat-label>{{ 'Quantity' | translate }}</mat-label>
+      <input
+        matInput
+        class="input-editable"
+        [value]="card.values ? card.values.quantity : null"
+        type="number"
+        (change)="setProduceConsumed($event)"
+      />
+    </mat-form-field>
+  </div>
 </div>
 
 <!-- TODO - add custom card delete bindings -->
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts
index d1bacc8f7..df48d9d75 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-editor/card-editor.component.ts
@@ -1,10 +1,7 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { PicsaDialogService } from '@picsa/shared/features';
 
-import {
-  IBudgetCardDB,
-  IBudgetCardWithValues,
-} from '../../../models/budget-tool.models';
+import { IBudgetCardDB, IBudgetCardWithValues } from '../../../models/budget-tool.models';
 import { BudgetStore } from '../../../store/budget.store';
 
 @Component({
@@ -27,12 +24,18 @@ export class BudgetCardEditorComponent {
     const target = e.target as HTMLInputElement;
     this.card.values[key] = Number(target.value);
     if (this.card.values.quantity && this.card.values.cost) {
-      this.card.values.total =
-        this.card.values.quantity * this.card.values.cost;
+      this.card.values.total = this.card.values.quantity * this.card.values.cost;
     }
     this.valueChanged.emit(this.card);
   }
 
+  // HACK - produceConsumed only populates quanityt, not values or cost
+  setProduceConsumed(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.card.values = { quantity: Number(target.value), cost: 0, total: 0 };
+    this.valueChanged.emit(this.card);
+  }
+
   async promptCustomDelete(e: Event) {
     e.stopPropagation();
     const dialogRef = await this.dialog.open('delete');
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.html b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.html
index 88e77ac39..3a04407bb 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.html
@@ -1,3 +1,5 @@
+<h3>Outputs</h3>
+
 <mat-card
   appearance="outlined"
   *ngFor="let card of cards; let i = index"
@@ -6,17 +8,26 @@
   <budget-card [card]="card"></budget-card>
   <div class="input-values-container">
     <mat-form-field class="card-input-field quantity">
-      <mat-label>{{'Quantity' | translate}}</mat-label>
+      <mat-label>{{'Consumed' | translate}}</mat-label>
       <input
         matInput
         class="input-editable"
-        [value]="card.quantity"
+        [value]="card.values.quantity"
         type="number"
-        (change)="setValue($event, 'quantity', i)"
+        (change)="setValue($event,  i)"
       />
     </mat-form-field>
+    <div style="display: flex; margin-left: 10px; font-size: 0.75em; color: rgba(0, 0, 0, 0.38)">
+      <div style="flex: 1">
+        <div>{{ 'Total Produced' | translate }}</div>
+        <div>{{ totalOutputs[card.id] | number: '.0' }}</div>
+      </div>
+      <div style="flex: 1">
+        <div>{{ 'Total Consumed' | translate }}</div>
+        <div>{{ totalConsumed[card.id] | number: '.0' }}</div>
+      </div>
+    </div>
   </div>
 </mat-card>
-<div *ngIf="cards.length === 0" style="margin: 1em 0 2em 0">
-  You have not selected any cards
-</div>
+
+<div *ngIf="cards.length === 0" style="margin: 1em 0 2em 0">{{'No outputs produce for consumption' | translate}}</div>
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.ts
index b38ca963f..300e01b1a 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/card-select/produce-consumed/produce-consumed.ts
@@ -1,5 +1,7 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
 import { IBudgetCardWithValues } from '../../../../models/budget-tool.models';
+import { BudgetStore } from '../../../../store/budget.store';
 
 @Component({
   selector: 'budget-cell-editor-produce-consumed',
@@ -9,22 +11,99 @@ import { IBudgetCardWithValues } from '../../../../models/budget-tool.models';
 
 /*  The budget cell editor sits on top of the budget table, so that when opened covers the table
  */
-export class BudgetCellEditorProduceConsumedComponent {
+export class BudgetCellEditorProduceConsumedComponent implements OnInit {
+  // Legacy version
   @Input() cards: IBudgetCardWithValues[] = [];
+
   @Output() valueChanged = new EventEmitter<IBudgetCardWithValues[]>();
 
+  public totalOutputs: Record<string, number>;
+  public totalConsumed: Record<string, number>;
+
+  constructor(private store: BudgetStore) {}
+
   ngOnInit(): void {
-    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
-    //Add 'implements OnInit' to the class.
-    console.log('cards', this.cards);
+    const { cards } = this.generateProduceConsumedCards();
+    this.cards = cards;
+  }
+
+  /**
+   * Generate a list of cards to be used for produce consumed selection
+   * The list restricts to only cards that have had outputs produced within
+   * the active period, and tracks total quanitities available/consumed
+   */
+  private generateProduceConsumedCards() {
+    const allBudgetPeriods = this.store.activeBudget.data || [];
+
+    // Extract values for any existing produce consumed values
+    const periodConsumed: Record<string, number> = {};
+    const currentPeriodData = allBudgetPeriods[this.store.activePeriod];
+    for (const card of currentPeriodData.produceConsumed) {
+      // HACK - Legacy formatting stored consumed quantity at top-level and not within values
+      const legacyQuantity = card['quantity' as string];
+      if (legacyQuantity) card.values = { quantity: legacyQuantity, cost: 0, total: 0 };
+      periodConsumed[card.id] = card.values.quantity || 0;
+    }
+
+    this.totalOutputs = this.calcTotalOutputs();
+    this.totalConsumed = this.calcTotalConsumed();
+
+    // Create a list of produceConsumed cards from list of output card, including only those
+    // that have had outputs produced and assigned with existing period values
+    const cards = this.store.budgetCardsByType.outputs
+      .filter(({ id }) => id in this.totalOutputs && id !== 'money')
+      .map((c) => {
+        const card = c as IBudgetCardWithValues;
+        card.type = 'produceConsumed';
+        card.values = { quantity: periodConsumed[c.id] || 0, cost: 0, total: 0 };
+        return card;
+      });
+
+    return { cards };
+  }
+
+  private calcTotalOutputs() {
+    const allBudgetPeriods = this.store.activeBudget.data || [];
+    // sum all quantities of all outputs up to current period and store in a list
+    // TODO - could also track totalConsumed and use for data validation
+    const totalOutputs: Record<string, number> = {};
+    const consumablePeriods = allBudgetPeriods.filter((_, i) => i <= this.store.activePeriod);
+    for (const { outputs } of consumablePeriods) {
+      for (const card of outputs) {
+        totalOutputs[card.id] ??= 0;
+        totalOutputs[card.id] += card.values.quantity;
+      }
+    }
+    return totalOutputs;
+  }
+
+  private calcTotalConsumed() {
+    const allBudgetPeriods = this.store.activeBudget.data || [];
+    // sum all quantities of all outputs up to current period and store in a list
+    // TODO - could also track totalConsumed and use for data validation
+    const totalOutputs: Record<string, number> = {};
+    const consumablePeriods = allBudgetPeriods.filter((_, i) => i <= this.store.activePeriod);
+    for (const { produceConsumed } of consumablePeriods) {
+      for (const card of produceConsumed) {
+        // HACK - Legacy formatting stored consumed quantity at top-level and not within values
+        const legacyQuantity = card['quantity' as string];
+        if (legacyQuantity) card.values = { quantity: legacyQuantity, cost: 0, total: 0 };
+        totalOutputs[card.id] ??= 0;
+        totalOutputs[card.id] += card.values.quantity;
+      }
+    }
+    return totalOutputs;
   }
 
   // using manual bindings instead of ngmodel as nested ngfor-ngmodel with matInput tricky
-  setValue(e: Event, key: 'quantity' | 'cost', cardIndex: number) {
+  setValue(e: Event, cardIndex: number) {
     const card = this.cards[cardIndex];
     const target = e.target as HTMLInputElement;
-    card.values[key] = Number(target.value);
+    card.values.quantity = Number(target.value);
     this.cards[cardIndex] = card;
-    this.valueChanged.emit(this.cards);
+    // only emit cards with quantities specified
+    const consumedCards = this.cards.filter((c) => c.values.quantity);
+    this.valueChanged.emit(consumedCards);
+    this.generateProduceConsumedCards();
   }
 }
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
index f2177316d..adacbf031 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.html
@@ -2,17 +2,16 @@
 <div id="editorContainer">
   <div *ngFor="let editorStep of editorSteps" class="type-row" [id]="'edit-' + editorStep.type">
     <div class="type-label">{{ editorStep.label | translate }}</div>
-    <div class="selected-summary" *ngIf="data[editorStep.type] as selected">
+    <div class="selected-summary" *ngIf="data[editorStep.type] as selectedCards">
       <div class="selected-cards-container" [attr.data-type]="editorStep.type">
         <budget-card-editor
-          *ngFor="let card of selected; index as i; trackBy: trackByFn"
+          *ngFor="let card of selectedCards; index as i; trackBy: trackByFn"
           [card]="card"
           (deleteClicked)="removeSelectedCard(editorStep.type, i)"
           (valueChanged)="updateCardValue(editorStep.type, i, $event)"
           @fadeInOut
         >
         </budget-card-editor>
-
         <budget-card-placeholder (click)="showCardsList(editorStep.type)"></budget-card-placeholder>
       </div>
     </div>
@@ -38,7 +37,6 @@
       <budget-cell-editor-produce-consumed
         *ngSwitchCase="'produceConsumed'"
         @fadeInOut
-        [cards]="data.produceConsumed"
         (valueChanged)="onEditorChange($event, 'produceConsumed')"
       ></budget-cell-editor-produce-consumed>
       <!-- Default Editor -->
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
index 975adb154..aadc5c457 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.scss
@@ -68,4 +68,8 @@
     grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
     gap: 16px;
   }
+  &[data-type='produceConsumed'] {
+    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
+    gap: 16px;
+  }
 }
diff --git a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
index 908350dd3..f0a4b10fb 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
+++ b/apps/picsa-tools/budget-tool/src/app/components/editor/editor.component.ts
@@ -1,5 +1,8 @@
 import { Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
-import { FadeInOut, ANIMATION_DELAYED } from '@picsa/shared/animations';
+import { MatDialog } from '@angular/material/dialog';
+import { ANIMATION_DELAYED, FadeInOut } from '@picsa/shared/animations';
+import { _wait } from '@picsa/utils';
+
 import {
   IBudgetCard,
   IBudgetCardWithValues,
@@ -7,8 +10,6 @@ import {
   IBudgetPeriodType,
 } from '../../models/budget-tool.models';
 import { BudgetStore } from '../../store/budget.store';
-import { MatDialog } from '@angular/material/dialog';
-import { _wait } from '@picsa/utils';
 
 const EDITOR_STEPS: { type: IBudgetPeriodType; label: string }[] = [
   { type: 'activities', label: 'Activities' },
@@ -110,9 +111,12 @@ export class BudgetEditorComponent {
     this.loadEditorData();
   }
 
-  // the store already knows what period and type it is, so just pass the updated values
-  // back up to save
+  // the store already knows what period and type it is, so just pass the updated values to save
   onEditorChange(values: IBudgetCardWithValues[], type: IBudgetPeriodType) {
     this.store.saveEditor(values, type);
+    // HACK - fix change detection issue for produceConsumed cards
+    if (type === 'produceConsumed') {
+      this.data.produceConsumed = values;
+    }
   }
 }
diff --git a/apps/picsa-tools/budget-tool/src/app/models/budget-tool.models.ts b/apps/picsa-tools/budget-tool/src/app/models/budget-tool.models.ts
index 68f4c854d..ae8ba1a37 100644
--- a/apps/picsa-tools/budget-tool/src/app/models/budget-tool.models.ts
+++ b/apps/picsa-tools/budget-tool/src/app/models/budget-tool.models.ts
@@ -69,7 +69,6 @@ export type IBudgetCardType = IBudgetPeriodType | 'enterprise' | 'other';
 
 export interface IBudgetCardWithValues extends IBudgetCard {
   values: IBudgetCardValues;
-  quantity?: number; // possible legacy use? (e.g. produce-consumed)
 }
 
 interface IBudgetCardCustomMeta {
diff --git a/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts b/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts
index cd8db737f..ea33140c3 100644
--- a/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts
+++ b/apps/picsa-tools/budget-tool/src/app/store/budget.store.ts
@@ -70,7 +70,6 @@ export class BudgetStore implements OnDestroy {
   @observable balance: IBudgetBalance = [];
   // get unique list of types in enterprise cards
   @computed get enterpriseTypeCards(): IBudgetCardDB[] {
-    console.log('get enterprisetype cards');
     const enterpriseCards = this.budgetCards.filter((c) => c.type === 'enterprise');
     return this._createCardGroupCards(enterpriseCards);
   }
diff --git a/libs/i18n/assets/en.json b/libs/i18n/assets/en.json
index 5cc4293ea..077e0f8f0 100644
--- a/libs/i18n/assets/en.json
+++ b/libs/i18n/assets/en.json
@@ -98,6 +98,7 @@
   "Length": "Length",
   "Male Member": "Male Member",
   "Next": "Next",
+  "No outputs produce for consumption": "No outputs produce for consumption",
   "Outputs": "Outputs",
   "Produce Consumed": "Produce Consumed",
   "Quantity": "Quantity",
@@ -112,6 +113,8 @@
   "Summary": "Summary",
   "Title": "Title",
   "Total": "Total",
+  "Total Consumed": "Total Consumed",
+  "Total Produced": "Total Produced",
   "Values": "Values",
   "What is your type of enterprise?": "What is your type of enterprise?",
   "description": "description",
diff --git a/libs/i18n/assets/ny.json b/libs/i18n/assets/ny.json
index 98c3aadfe..0152cf86a 100644
--- a/libs/i18n/assets/ny.json
+++ b/libs/i18n/assets/ny.json
@@ -4,8 +4,11 @@
   "Family Labour": "",
   "Female Member": "",
   "Male Member": "",
+  "No outputs produce for consumption": "",
   "Produce Consumed": "",
   "Select Country": "",
+  "Total Consumed": "",
+  "Total Produced": "",
   "Activities": "zochitika",
   "add custom": "onjezani mwambo",
   "afforestation": "kugogoda",
diff --git a/libs/i18n/assets/sw.json b/libs/i18n/assets/sw.json
index 98978f677..c6e37047b 100644
--- a/libs/i18n/assets/sw.json
+++ b/libs/i18n/assets/sw.json
@@ -19,6 +19,7 @@
   "Line": "",
   "Male Member": "",
   "Monitoring": "",
+  "No outputs produce for consumption": "",
   "On average": "",
   "onions": "",
   "out of": "",
@@ -43,6 +44,8 @@
   "Terciles": "",
   "title": "",
   "Total": "",
+  "Total Consumed": "",
+  "Total Produced": "",
   "Values": "",
   "Year": "",
   "years out of every 10": "",
diff --git a/libs/i18n/assets/tg.json b/libs/i18n/assets/tg.json
index 200becb20..a9255d0ad 100644
--- a/libs/i18n/assets/tg.json
+++ b/libs/i18n/assets/tg.json
@@ -19,6 +19,7 @@
   "Line": "",
   "Male Member": "",
   "Monitoring": "",
+  "No outputs produce for consumption": "",
   "On average": "",
   "onions": "",
   "out of": "",
@@ -43,6 +44,8 @@
   "Terciles": "",
   "title": "",
   "Total": "",
+  "Total Consumed": "",
+  "Total Produced": "",
   "Values": "",
   "Year": "",
   "years out of every 10": "",
diff --git a/libs/i18n/templates/_template.csv b/libs/i18n/templates/_template.csv
index 135220467..75bd22200 100644
--- a/libs/i18n/templates/_template.csv
+++ b/libs/i18n/templates/_template.csv
@@ -98,6 +98,7 @@ tool,context,text
 "budget",,"Length"
 "budget",,"Male Member"
 "budget",,"Next"
+"budget",,"No outputs produce for consumption"
 "budget",,"Outputs"
 "budget",,"Produce Consumed"
 "budget",,"Quantity"
@@ -112,6 +113,8 @@ tool,context,text
 "budget",,"Summary"
 "budget",,"Title"
 "budget",,"Total"
+"budget",,"Total Consumed"
+"budget",,"Total Produced"
 "budget",,"Values"
 "budget",,"What is your type of enterprise?"
 "budget",,"description"
diff --git a/libs/i18n/templates/_template.json b/libs/i18n/templates/_template.json
index a232cc744..42ccbce42 100644
--- a/libs/i18n/templates/_template.json
+++ b/libs/i18n/templates/_template.json
@@ -473,6 +473,10 @@
     "text": "Next",
     "tool": "budget"
   },
+  {
+    "text": "No outputs produce for consumption",
+    "tool": "budget"
+  },
   {
     "text": "Outputs",
     "tool": "budget"
@@ -529,6 +533,14 @@
     "text": "Total",
     "tool": "budget"
   },
+  {
+    "text": "Total Consumed",
+    "tool": "budget"
+  },
+  {
+    "text": "Total Produced",
+    "tool": "budget"
+  },
   {
     "text": "Values",
     "tool": "budget"

From 395295a0e3e3555228f2eea14f7263a4cf345b90 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Sun, 16 Apr 2023 11:50:14 -0700
Subject: [PATCH 20/20] chore: bump version

---
 apps/picsa-apps/extension-app-native/android/app/build.gradle | 4 ++--
 libs/environments/src/version.ts                              | 2 +-
 package.json                                                  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/picsa-apps/extension-app-native/android/app/build.gradle b/apps/picsa-apps/extension-app-native/android/app/build.gradle
index ff34e3efe..b97d58fe6 100644
--- a/apps/picsa-apps/extension-app-native/android/app/build.gradle
+++ b/apps/picsa-apps/extension-app-native/android/app/build.gradle
@@ -6,8 +6,8 @@ android {
         applicationId "io.picsa.extension"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3017000
-        versionName "3.17.0"
+        versionCode 3018000
+        versionName "3.18.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
diff --git a/libs/environments/src/version.ts b/libs/environments/src/version.ts
index 9355c55d3..892e08410 100644
--- a/libs/environments/src/version.ts
+++ b/libs/environments/src/version.ts
@@ -4,5 +4,5 @@ import packageJson from '../../../package.json';
 
 export const APP_VERSION = {
   number: packageJson.version,
-  date: '2023-04-12',
+  date: '2023-04-16',
 };
diff --git a/package.json b/package.json
index eda51daca..e133a9762 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "picsa-apps",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "license": "See LICENSE",
   "scripts": {
     "ng": "nx",