From ea8087d5bea5f98f3d47891fb26b6a85ad074e5d Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Tue, 16 Jan 2024 21:42:30 +0300
Subject: [PATCH] budget summary

---
 .../budget-summary.component.scss             | 34 ++++++++++
 .../budget-summary.component.spec.ts          | 21 +++++++
 .../budget-summary.component.ts               | 63 +++++++++++++++++++
 .../app/components/budget-tool.components.ts  |  4 ++
 .../list-item/budget-list-item.html           |  7 ++-
 package.json                                  |  2 +-
 yarn.lock                                     |  6 +-
 7 files changed, 131 insertions(+), 6 deletions(-)
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.scss
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.spec.ts
 create mode 100644 apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.ts

diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.scss b/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.scss
new file mode 100644
index 000000000..c06970f01
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.scss
@@ -0,0 +1,34 @@
+.summary-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-bottom: 1.2rem;
+
+  h2 {
+    margin: 0 0 0.5rem 0;
+    padding: 0;
+    font-size: 1rem;
+    font-weight: 500;
+    color: #000;
+  }
+
+  .summary-list {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    p {
+      margin: 0;
+      padding: 0;
+      font-size: 1rem;
+      font-weight: 400;
+      color: #000;
+
+      span {
+        font-weight: 501;
+      }
+    }
+  }
+}
diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.spec.ts b/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.spec.ts
new file mode 100644
index 000000000..3ac1ac8e0
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BudgetSummaryComponent } from './budget-summary.component';
+
+describe('BudgetSummaryComponent', () => {
+  let component: BudgetSummaryComponent;
+  let fixture: ComponentFixture<BudgetSummaryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BudgetSummaryComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BudgetSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.ts b/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.ts
new file mode 100644
index 000000000..f80d60d00
--- /dev/null
+++ b/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.ts
@@ -0,0 +1,63 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'budget-summary',
+  template: `
+    <div class="summary-container">
+      <h2>Budget Summary</h2>
+      <div class="summary-list">
+        <p matTooltip="Total Family Labour Hours">
+          TFLH: <span>{{ totalFamilyLabourHours }}</span>
+        </p>
+        <p matTooltip="Total Inputs Value">
+          TIV: <span>{{ totalInputsValue }}</span>
+        </p>
+        <p matTooltip="Total Outputs Value">
+          TOV: <span>{{ totalOutputsValue }}</span>
+        </p>
+        <p matTooltip="Total Produce Consumed">
+          TPC: <span>{{ totalProduceConsumed }}</span>
+        </p>
+        <p matTooltip="Final Cash Balance">
+          FCB: <span>{{ finalCashBalance }}</span>
+        </p>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./budget-summary.component.scss'],
+})
+export class BudgetSummaryComponent implements OnInit {
+  @Input() budgetData: any;
+
+  totalFamilyLabourHours: number = 0;
+  totalInputsValue: number = 0;
+  totalOutputsValue: number = 0;
+  totalProduceConsumed: number = 0;
+  finalCashBalance: number = 0;
+
+  ngOnInit(): void {
+    this.calculateSummary();
+  }
+
+  calculateSummary() {
+    this.budgetData.data.forEach((item) => {
+      item.familyLabour.forEach((member) => {
+        this.totalFamilyLabourHours += member.values.quantity;
+      });
+
+      item.inputs.forEach((input) => {
+        this.totalInputsValue += input.values.total;
+      });
+
+      item.outputs.forEach((output) => {
+        this.totalOutputsValue += output.values.total;
+      });
+
+      item.produceConsumed.forEach((consumed) => {
+        this.totalProduceConsumed += consumed.values.quantity;
+      });
+    });
+
+    this.finalCashBalance = this.totalOutputsValue - this.totalInputsValue;
+  }
+}
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 313905518..cac04eb18 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
@@ -7,6 +7,7 @@ import { PicsaCommonComponentsModule } from '@picsa/components';
 import { PicsaDialogsModule } from '@picsa/shared/features';
 import { PicsaDbModule } from '@picsa/shared/modules';
 import { MobxAngularModule } from 'mobx-angular';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { BudgetMaterialModule } from '../material.module';
 // Components
@@ -29,6 +30,7 @@ import { BudgetListItemComponent, BudgetListItemRenameDialog } from './list-item
 import { BudgetShareDialogComponent } from './share-dialog/share-dialog.component';
 import { BudgetPeriodSummaryComponent } from './summary/period-summary';
 import { BudgetTableComponent } from './table/budget-table';
+import { BudgetSummaryComponent } from './budget-summary/budget-summary.component';
 
 const components = [
   BudgetBalanceLegendComponent,
@@ -51,6 +53,7 @@ const components = [
   BudgetPeriodSummaryComponent,
   BudgetShareDialogComponent,
   BudgetTableComponent,
+  BudgetSummaryComponent,
 ];
 
 @NgModule({
@@ -65,6 +68,7 @@ const components = [
     MobxAngularModule,
     PicsaDbModule,
     RouterModule,
+    MatTooltipModule,
   ],
   exports: components,
 })
diff --git a/apps/picsa-tools/budget-tool/src/app/components/list-item/budget-list-item.html b/apps/picsa-tools/budget-tool/src/app/components/list-item/budget-list-item.html
index 5411078c2..8a3c925f4 100644
--- a/apps/picsa-tools/budget-tool/src/app/components/list-item/budget-list-item.html
+++ b/apps/picsa-tools/budget-tool/src/app/components/list-item/budget-list-item.html
@@ -1,10 +1,13 @@
 <mat-card appearance="raised" style="margin-bottom: 10px; padding: 16px; cursor: pointer">
   <div style="display: flex">
     <budget-card-image class="small" [card]="budget.meta.enterprise"></budget-card-image>
-    <div style="flex: 1">
+    <div style="flex: 1; position: relative">
       <mat-card-title>{{ budget.meta.title }}</mat-card-title>
       <mat-card-content>{{ budget.meta.description }}</mat-card-content>
-      <mat-card-subtitle>{{ budget._created | date }}</mat-card-subtitle>
+      <budget-summary [budgetData]="budget"></budget-summary>
+      <mat-card-subtitle style="position: absolute; bottom: 0; right: 0"
+        >{{ budget._created | date }}</mat-card-subtitle
+      >
     </div>
     <button
       mat-icon-button
diff --git a/package.json b/package.json
index 437dc9808..79040ae04 100644
--- a/package.json
+++ b/package.json
@@ -161,7 +161,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "execa": "^5.1.1",
     "fs-extra": "^10.1.0",
-    "husky": "^8.0.0",
+    "husky": "^8.0.3",
     "jest": "29.4.3",
     "jest-circus": "^29.5.0",
     "jest-environment-jsdom": "29.4.3",
diff --git a/yarn.lock b/yarn.lock
index 7eeeaaac2..836dd9a1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14847,7 +14847,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"husky@npm:^8.0.0":
+"husky@npm:^8.0.3":
   version: 8.0.3
   resolution: "husky@npm:8.0.3"
   bin:
@@ -16472,7 +16472,7 @@ __metadata:
 "leaflet-draw@github:enketo/Leaflet.draw#ff730785db7fcccbf2485ffcf4dffe1238a7c617":
   version: 1.0.4
   resolution: "leaflet-draw@https://github.com/enketo/Leaflet.draw.git#commit=ff730785db7fcccbf2485ffcf4dffe1238a7c617"
-  checksum: 253998170af27f886d05b245c85429767e272647221daaf8d94ff5b86f75b8cbb96cc76a8a88492243166a214bc3b66b3ae704a81f74c862f09ac6c9495f731e
+  checksum: ff548d48c7562be501934f81303061204450e037005ef08591049951adb3044778a6e9c97daa6bac57827ce8864d4637046a8a5669fab5ab43feec7bb3bed86f
   languageName: node
   linkType: hard
 
@@ -19047,7 +19047,7 @@ __metadata:
     glob: ^8.1.0
     hls.js: ^1.4.12
     html2canvas: ^1.4.1
-    husky: ^8.0.0
+    husky: ^8.0.3
     intro.js: ^7.0.1
     jest: 29.4.3
     jest-circus: ^29.5.0