Merge branch 'main' of https://github.com/EsraDoerksen/All-In-Banking

EsraDoerksen · Oct 29, 2023 · 3c8ee14 · 3c8ee14
2 parents e4bea62 + ff8376f
commit 3c8ee14
Show file tree

Hide file tree

Showing 108 changed files with 15,591 additions and 211 deletions.
diff --git a/bank-advisor/src/app/app-routing.module.ts b/bank-advisor/src/app/app-routing.module.ts
@@ -2,11 +2,14 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { BigExpensesComponent } from './components/big-expenses/big-expenses.component';
 import { RegularExpensesComponent } from './components/regular-expenses/regular-expenses.component';
+import { AllExpensesComponent } from './components/all-expenses/all-expenses.component';
+import { ContractExpensesComponent } from './components/contract-expenses/contract-expenses.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'matches', pathMatch: 'full' },
+  { path: '', component: AllExpensesComponent },
   { path: 'big-expenses', component: BigExpensesComponent },
   { path: 'regular-expenses', component: RegularExpensesComponent },
+  { path: 'contracts', component: ContractExpensesComponent },
   { path: '**', redirectTo: 'matches', pathMatch: 'full' },
 ];
 

diff --git a/bank-advisor/src/app/app.component.html b/bank-advisor/src/app/app.component.html
@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-success">
   <div class="container-fluid">
-    <a class="navbar-brand" href="#">Cashbot</a>
+    <a class="navbar-brand" href="#">FiRobo</a>
     <i class="bi bi-robot red"></i>
     <button
       class="navbar-toggler"
@@ -16,9 +16,13 @@
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
-          <button class="nav-link active" (click)="setBigTransactions()">
-            Big expeses
-          </button>
+          <a
+            class="nav-link"
+            routerLink="/big-expenses"
+            routerLinkActive="active"
+            ariaCurrentWhenActive="page"
+            >Big expenses</a
+          >
         </li>
         <li class="nav-item">
           <a
@@ -31,7 +35,7 @@
         <li class="nav-item">
           <a
             class="nav-link"
-            routerLink="/regular-expenses"
+            routerLink="/contracts"
             routerLinkActive="selected"
             >Contracts</a
           >
@@ -40,8 +44,8 @@
     </div>
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="25"
+      width="30"
+      height="30"
       fill="currentColor"
       class="bi bi-robot"
       viewBox="0 0 16 16"
@@ -55,7 +59,4 @@
     </svg>
   </div>
 </nav>
-<div>
-  <app-all-expenses></app-all-expenses>
-</div>
 <router-outlet></router-outlet>
diff --git a/bank-advisor/src/app/components/all-expenses/all-expenses.component.css b/bank-advisor/src/app/components/all-expenses/all-expenses.component.css
@@ -2,3 +2,7 @@
   margin-left: 15%;
   margin-right: 15%;
 }
+
+.margin-top {
+  margin-top: 5%;
+}
diff --git a/bank-advisor/src/app/components/all-expenses/all-expenses.component.html b/bank-advisor/src/app/components/all-expenses/all-expenses.component.html
@@ -1,5 +1,45 @@
-<div class="margin-x">
-  <app-big-expenses></app-big-expenses>
-  <app-regular-expenses></app-regular-expenses>
-  <app-contract-expenses></app-contract-expenses>
+<div class="">
+  <div class="margin-x">
+    <h1 class="d-flex justify-content-center mt-5">Save money with FiRobo</h1>
+    <div class="d-flex justify-content-center margin-top">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="160"
+        height="160"
+        fill="currentColor"
+        class="bi bi-robot"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z"
+        />
+        <path
+          d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z"
+        />
+      </svg>
+    </div>
+    <div class="d-flex justify-content-center mt-5">
+      <a
+        class="nav-link m-5 border p-4 border-success rounded border-2 fw-bold"
+        routerLink="/big-expenses"
+        routerLinkActive="active"
+        ariaCurrentWhenActive="page"
+        >Big expenses</a
+      >
+      <a
+        class="nav-link m-5 border p-4 border-success rounded border-2 fw-bold"
+        routerLink="/regular-expenses"
+        routerLinkActive="active"
+        ariaCurrentWhenActive="page"
+        >Regular expenses</a
+      >
+      <a
+        class="nav-link m-5 border p-4 border-success rounded border-2 fw-bold"
+        routerLink="/contracts"
+        routerLinkActive="active"
+        ariaCurrentWhenActive="page"
+        >Contracts expenses</a
+      >
+    </div>
+  </div>
 </div>
diff --git a/bank-advisor/src/app/components/all-expenses/all-expenses.component.ts b/bank-advisor/src/app/components/all-expenses/all-expenses.component.ts
@@ -80,6 +80,13 @@ export class AllExpensesComponent {
           location: 'Media Markt',
           standingOrder: false,
         } as Transaction,
+        {
+          timeStamp: formatDate(new Date()),
+          amount: 700,
+          description: 'Drone',
+          location: 'Media Markt',
+          standingOrder: false,
+        } as Transaction,
       ],
     } as Account;
     this.requestValuesFromDevPortal();

diff --git a/bank-advisor/src/app/components/big-expenses/big-expenses.component.css b/bank-advisor/src/app/components/big-expenses/big-expenses.component.css
@@ -1,17 +1,4 @@
-.text-orange {
-  border-color: orange;
-}
-
-.text-red {
-  border-color: red;
-}
-
-.red {
-  fill: red;
-  color: red;
-  background-color: red;
-}
-
-.bg-grey {
-  background-color: grey;
+.margin-x {
+  margin-left: 15%;
+  margin-right: 15%;
 }
diff --git a/bank-advisor/src/app/components/big-expenses/big-expenses.component.html b/bank-advisor/src/app/components/big-expenses/big-expenses.component.html
@@ -1,43 +1,49 @@
-<h1 class="display-5">Big expenses</h1>
-<p>
-  Those are the transactions, which have a big spending amount. You should
-  analyze what you are spending your money on.
-</p>
+<div class="margin-x mt-3">
+  <h1 class="display-5">Big expenses</h1>
+  <p>
+    Those are the transactions, which have a big spending amount. Let's have a
+    look at your big transactions:
+  </p>
 
-<ul *ngFor="let bigTransaction of bigTransactions" class="list-group">
-  <li class="d-flex align-items-center justify-content-center mb-2 rounded">
-    <div class="card mb-3 w-100 border border-success rounded">
-      <div class="row g-0">
-        <div class="col-md-2 bg-light">
-          <p class="text-center align-text-middle fw-bold mt-4 h5">
-            {{ bigTransaction.amount }} CHF
-          </p>
-        </div>
-        <div class="col-md-8">
-          <div class="card-body">
-            <h5 class="card-title">{{ bigTransaction.description }}</h5>
-            <p class="card-text">
-              You bought a
-              {{ bigTransaction.description }} at {{ bigTransaction.location }}.
+  <ul *ngFor="let bigTransaction of bigTransactions" class="list-group">
+    <li class="d-flex align-items-center justify-content-center mb-2 rounded">
+      <div class="card mb-3 w-100 border border-success rounded">
+        <div class="row g-0">
+          <div class="col-md-2 bg-light">
+            <p class="text-center align-text-middle fw-bold mt-4 h5">
+              {{ bigTransaction.amount }} CHF
+            </p>
+          </div>
+          <div class="col-md-8">
+            <div class="card-body">
+              <h5 class="card-title">{{ bigTransaction.description }}</h5>
+              <p class="card-text">
+                You bought a
+                {{ bigTransaction.description }} at
+                {{ bigTransaction.location }}.
+              </p>
+            </div>
+          </div>
+          <div class="col-md-2 bg-light p-1">
+            <p class="text-center align-text-middle mt-4">
+              Bought at the {{ bigTransaction.timeStamp }}
             </p>
           </div>
         </div>
-        <div class="col-md-2 bg-light p-1">
-          <p class="text-center align-text-middle mt-4">
-            Bought at the {{ bigTransaction.timeStamp }}
+      </div>
+    </li>
+  </ul>
+  <div class="card mb-3 w-100 border border-success rounded bg-success">
+    <div class="row g-0">
+      <div>
+        <div class="card-body">
+          <h5 class="card-title">Big saving potential</h5>
+          <p class="card-text">
+            We can see, that you bought a lot of electronics in the past! You
+            can save a lot of money through secondary buys and toppreise.ch
           </p>
         </div>
       </div>
     </div>
-  </li>
-</ul>
-<div class="card mb-3 w-100 border border-success rounded bg-success">
-  <div class="row g-0">
-    <div>
-      <div class="card-body">
-        <h5 class="card-title">Test</h5>
-        <p class="card-text">Test</p>
-      </div>
-    </div>
   </div>
 </div>
diff --git a/bank-advisor/src/app/components/big-expenses/big-expenses.component.spec.ts b/bank-advisor/src/app/components/big-expenses/big-expenses.component.spec.ts
@@ -8,7 +8,7 @@ describe('BigExpensesComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [BigExpensesComponent]
+      declarations: [BigExpensesComponent],
     });
     fixture = TestBed.createComponent(BigExpensesComponent);
     component = fixture.componentInstance;

diff --git a/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.css b/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.css
@@ -0,0 +1,4 @@
+.margin-x {
+  margin-left: 15%;
+  margin-right: 15%;
+}
diff --git a/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.html b/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.html
@@ -1,23 +1,48 @@
-<h1 class="display-3">Contract expenses</h1>
-<p>
-  Those are the transactions, which are bound to a contract. Are those contract
-  really the best.
-</p>
-<ul *ngFor="let transaction of this.contractTransactions" class="list-group">
-  <li class="border">
-    <div class="card" style="width: 18rem">
-      <div class="card-body">
-        <h5 class="card-title">{{ transaction.description }}</h5>
-        <h6 class="card-subtitle mb-2 text-muted">
-          You purchased a {{ transaction.description }} at
-          {{ transaction.location }}
-        </h6>
-        <p class="card-text">
-          You payed {{ transaction.amount }} CHF for a
-          {{ transaction.description }}. In the future you could definitely save
-          money there!
-        </p>
+<div class="margin-x mt-3">
+  <h1 class="display-5">Contract expenses</h1>
+  <p>
+    Those are the transactions, which are bound to a contract. Let's have a look
+    at your contracts:
+  </p>
+
+  <ul *ngFor="let transaction of this.contractTransactions" class="list-group">
+    <li class="d-flex align-items-center justify-content-center mb-2 rounded">
+      <div class="card mb-3 w-100 border border-success rounded">
+        <div class="row g-0">
+          <div class="col-md-2 bg-light">
+            <p class="text-center align-text-middle fw-bold mt-4 h5">
+              {{ transaction.amount }} CHF
+            </p>
+          </div>
+          <div class="col-md-8">
+            <div class="card-body">
+              <h5 class="card-title">{{ transaction.description }}</h5>
+              <p class="card-text">
+                You bought a
+                {{ transaction.description }} at {{ transaction.location }}.
+              </p>
+            </div>
+          </div>
+          <div class="col-md-2 bg-light p-1">
+            <p class="text-center align-text-middle mt-4">
+              Bought at the {{ transaction.timeStamp }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <div class="card mb-3 w-100 border border-success rounded bg-success">
+    <div class="row g-0">
+      <div>
+        <div class="card-body">
+          <h5 class="card-title">Big saving potential</h5>
+          <p class="card-text">
+            We can see, that you purchased multiple contracts in the past! You
+            can save a lot of money through comparis.ch
+          </p>
+        </div>
       </div>
     </div>
-  </li>
-</ul>
+  </div>
+</div>
diff --git a/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.ts b/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.ts
@@ -1,11 +1,24 @@
 import { Component, Input } from '@angular/core';
 import { Transaction } from 'src/app/models/transaction.interface';
+import { User } from '../../models/user.interface';
+import { Account } from '../../models/account.interface';
+import { DataService } from '../../services/data.service';
 
 @Component({
   selector: 'app-contract-expenses',
   templateUrl: './contract-expenses.component.html',
   styleUrls: ['./contract-expenses.component.css'],
 })
 export class ContractExpensesComponent {
-  @Input() contractTransactions: Transaction[] = [];
+  private user: User = {} as User;
+  private account: Account = {} as Account;
+  contractTransactions: Transaction[] = [];
+
+  constructor(dataService: DataService) {
+    this.user = dataService.getUser();
+    this.account = dataService.getAccount();
+    this.contractTransactions = this.account.transactions.filter(
+      (t) => t.standingOrder
+    );
+  }
 }
diff --git a/bank-advisor/src/app/components/regular-expenses/regular-expenses.component.css b/bank-advisor/src/app/components/regular-expenses/regular-expenses.component.css
@@ -0,0 +1,4 @@
+.margin-x {
+  margin-left: 15%;
+  margin-right: 15%;
+}