From 2792474b06217a68d8cca8995083268aa1a97872 Mon Sep 17 00:00:00 2001
From: Timo Scheuermann <timo.scheuermann@gmx.de>
Date: Fri, 23 Apr 2021 00:16:02 +0200
Subject: [PATCH] added invoice and clearing

---
 src/components/BNavbar.vue       |   7 ++
 src/components/BTabbar.vue       |   6 ++
 src/router/index.ts              |   9 +++
 src/store/index.ts               |  24 ++++++-
 src/utils/ClearingManager.ts     |  35 ++++++++++
 src/utils/InvoiceManager.ts      |  54 ++++++++++++++
 src/utils/PriceHistoryManager.ts |   2 -
 src/utils/ShareManager.ts        |   4 ++
 src/views/clearing/Clearing.vue  | 116 ++++++++++++++++++++++++++++++-
 src/views/invoice/Invoice.vue    |  98 ++++++++++++++++++++++++++
 10 files changed, 347 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/ClearingManager.ts
 create mode 100644 src/utils/InvoiceManager.ts
 create mode 100644 src/views/invoice/Invoice.vue

diff --git a/src/components/BNavbar.vue b/src/components/BNavbar.vue
index a81fa0f..699ad85 100644
--- a/src/components/BNavbar.vue
+++ b/src/components/BNavbar.vue
@@ -36,6 +36,13 @@
         routeName="clearing"
         tfcolor="error"
       />
+      <tc-navbar-item
+        icon="dollar"
+        name="Invoice"
+        routeName="invoice"
+        tfcolor="error"
+      />
+
       <tc-navbar-item
         icon="gears"
         name="Options"
diff --git a/src/components/BTabbar.vue b/src/components/BTabbar.vue
index 43c20f8..47d9264 100644
--- a/src/components/BTabbar.vue
+++ b/src/components/BTabbar.vue
@@ -15,6 +15,12 @@
       routeName="clearing"
       tfcolor="error"
     />
+    <tc-tabbar-item
+      icon="dollar"
+      title="Invoice"
+      routeName="invoice"
+      tfcolor="error"
+    />
     <tc-tabbar-item
       icon="gears"
       title="Options"
diff --git a/src/router/index.ts b/src/router/index.ts
index a9110eb..db2cadf 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -175,6 +175,15 @@ const router = new VueRouter({
       }
     },
 
+    {
+      path: '/invoice',
+      name: 'invoice',
+      component: () => import('@/views/invoice/Invoice.vue'),
+      meta: {
+        title: 'Invoice'
+      }
+    },
+
     {
       path: '/login',
       name: 'login',
diff --git a/src/store/index.ts b/src/store/index.ts
index 6a14b5c..28eb8a9 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -2,6 +2,8 @@
 import { socket } from '@/main';
 import { getToken } from '@/utils/auth';
 import { Broker, BrokerManager } from '@/utils/BrokerManager';
+import { ClearingManager, DailyClearing } from '@/utils/ClearingManager';
+import { Invoice, InvoiceManager } from '@/utils/InvoiceManager';
 import { Orderbook, OrderbookManager } from '@/utils/OrderbookManager';
 import { PriceHistoryManager } from '@/utils/PriceHistoryManager';
 import { Pricing, PricingManager } from '@/utils/PricingManager';
@@ -21,7 +23,9 @@ const store = new Vuex.Store({
     priceHistories: {},
     brokers: null,
     orderbooks: null,
-    pricings: null
+    pricings: null,
+    invoices: null,
+    dailyClearings: null
   },
   getters: {
     isDesktop: (state: any): boolean => {
@@ -47,6 +51,12 @@ const store = new Vuex.Store({
     },
     pricings: (state: any): Pricing[] | null => {
       return state.pricings;
+    },
+    invoices: (state: any): Invoice[] | null => {
+      return state.invoices;
+    },
+    dailyClearings: (state: any): DailyClearing[] | null => {
+      return state.dailyClearings;
     }
   },
   mutations: {
@@ -62,7 +72,10 @@ const store = new Vuex.Store({
         state.user = user;
         state.userValidated = true;
         socket.emit('join', getToken());
-        BrokerManager.loadBrokers();
+        BrokerManager.loadBrokers().then(() => {
+          InvoiceManager.loadInvoices();
+          ClearingManager.loadDailyClearings();
+        });
         ShareManager.loadShares().then(() => {
           OrderbookManager.loadBooks();
           PriceHistoryManager.loadHistories();
@@ -76,7 +89,6 @@ const store = new Vuex.Store({
     },
     priceHistories(state: any, priceHistories: Record<string, Price[]>) {
       state.priceHistories = priceHistories;
-      console.log('Storing history', state.priceHistories);
     },
     brokers(state: any, brokers: Broker[]) {
       state.brokers = brokers;
@@ -86,6 +98,12 @@ const store = new Vuex.Store({
     },
     pricings(state: any, pricings: Pricing[]) {
       state.pricings = pricings;
+    },
+    invoices(state: any, invoices: Invoice[]) {
+      state.invoices = invoices;
+    },
+    dailyClearings(state: any, dailyClearings: DailyClearing[]) {
+      state.dailyClearings = dailyClearings;
     }
   }
 });
diff --git a/src/utils/ClearingManager.ts b/src/utils/ClearingManager.ts
new file mode 100644
index 0000000..ef5da2c
--- /dev/null
+++ b/src/utils/ClearingManager.ts
@@ -0,0 +1,35 @@
+import store from '@/store';
+import backend from './backend';
+
+export class ClearingManager {
+  public static get dailyClearings(): DailyClearing[] {
+    return store.getters.dailyClearings || [];
+  }
+
+  public static async loadDailyClearings(): Promise<void> {
+    if (this.dailyClearings.length > 0) return;
+    const { data } = await backend.get('clearing/daily');
+    store.commit('dailyClearings', data);
+  }
+
+  public static get sorted(): DailyClearing[] {
+    return [...this.dailyClearings]
+      .sort((a, b) => b.year - a.year)
+      .sort((a, b) => b.month - a.month)
+      .sort((a, b) => b.day - a.day);
+  }
+}
+
+export interface DailyClearing {
+  id: string;
+  brokerId: string;
+  orderAmount: number;
+  volumeBuy: number;
+  volumeSell: number;
+  day: number;
+  month: number;
+  year: number;
+  transactionPrice: number;
+  tradePrice: number;
+  fixum: number;
+}
diff --git a/src/utils/InvoiceManager.ts b/src/utils/InvoiceManager.ts
new file mode 100644
index 0000000..dcc7e18
--- /dev/null
+++ b/src/utils/InvoiceManager.ts
@@ -0,0 +1,54 @@
+import store from '@/store';
+import backend from './backend';
+import { Broker, BrokerManager } from './BrokerManager';
+
+export class InvoiceManager {
+  public static get invoices(): Invoice[] {
+    const inv = (store.getters.invoices || []) as Invoice[];
+    return inv.sort((a, b) => a.timestamp - b.timestamp);
+  }
+
+  private static commit(invoices: Invoice[]) {
+    if (!invoices) return;
+    invoices = invoices.filter(x => x.amount > 0);
+    store.commit('invoices', invoices);
+  }
+
+  public static async loadInvoices(): Promise<void> {
+    if (this.invoices.length > 0) return;
+    const { data } = await backend.get('invoice/all');
+    this.commit(data);
+  }
+
+  public static getUniqueBroker(): Broker[] {
+    const broker = [...(this.invoices || [])].map(x => x.brokerId);
+    const unqiue = [...new Set(broker)];
+    return unqiue
+      .map(x => BrokerManager.getBroker(x))
+      .filter(x => !!x) as Broker[];
+  }
+
+  public static get total(): number {
+    return [...this.invoices]
+      .filter(x => !x.payed)
+      .reduce((a, b) => a + b.amount, 0);
+  }
+
+  public static get due(): number {
+    return [...this.invoices].filter(x => !x.payed).length;
+  }
+
+  public static get avg(): number {
+    return this.total / this.due;
+  }
+}
+
+export interface Invoice {
+  brokerId: string;
+  timestamp: number;
+  month: number;
+  year: number;
+  payed: boolean;
+  amount: number;
+  description?: string;
+}
diff --git a/src/utils/PriceHistoryManager.ts b/src/utils/PriceHistoryManager.ts
index 58ac615..291286a 100644
--- a/src/utils/PriceHistoryManager.ts
+++ b/src/utils/PriceHistoryManager.ts
@@ -14,8 +14,6 @@ export class PriceHistoryManager {
   }
 
   public static loadHistory(shareId: string) {
-    console.log('Loading History for', shareId);
-
     backend.get('share/prices/' + shareId).then(res => {
       if (res.data) this.historyChanged(shareId, res.data);
     });
diff --git a/src/utils/ShareManager.ts b/src/utils/ShareManager.ts
index 179c954..68b176b 100644
--- a/src/utils/ShareManager.ts
+++ b/src/utils/ShareManager.ts
@@ -4,6 +4,10 @@ import backend from './backend';
 export class ShareManager {
   private static commit(shares: Share[]): void {
     if (!shares) return;
+    shares = shares.filter(
+      x =>
+        !['607ecd14483d7e013aecf4fd', '607ef2ff483d7eea8bed4eb2'].includes(x.id)
+    );
     store.commit('shares', shares);
   }
 
diff --git a/src/views/clearing/Clearing.vue b/src/views/clearing/Clearing.vue
index e8f15bd..eb2899e 100644
--- a/src/views/clearing/Clearing.vue
+++ b/src/views/clearing/Clearing.vue
@@ -1,18 +1,128 @@
 <template>
   <div class="view-clearing" content>
     <h1>Clearing</h1>
+
+    <tl-grid minWidth="170" gap="20">
+      <BChartWrapper title="Buy Volume" subtitle="Total">
+        <span>{{ buy }}</span>
+      </BChartWrapper>
+      <BChartWrapper title="Sell Volume" subtitle="Total">
+        <span>{{ sell }}</span>
+      </BChartWrapper>
+    </tl-grid>
+
+    <div v-for="b in uniqueBroker" :key="b.id">
+      <br />
+      <h2>{{ b.displayName }}</h2>
+      <tc-table :dark="true">
+        <template slot="head">
+          <!-- <tc-th>Tag</tc-th> -->
+          <tc-th>Monat</tc-th>
+          <tc-th>Jahr</tc-th>
+          <tc-th>Buy Volume</tc-th>
+          <tc-th>Sell Volume</tc-th>
+        </template>
+        <tc-tr v-for="d in daily.filter(x => x.brokerId === b.id)" :key="d.id">
+          <!-- <tc-td>{{ d.day }}</tc-td> -->
+          <tc-td>{{ d.month }}</tc-td>
+          <tc-td>{{ d.year }}</tc-td>
+          <tc-td tfcolor="success">{{ format(d.volumeBuy) }} €</tc-td>
+          <tc-td tfcolor="error">{{ format(d.volumeSell) }} €</tc-td>
+
+          <template slot="expander">
+            <table class="expander-table">
+              <tr>
+                <th>Transaction</th>
+                <th>Trade</th>
+                <th>Fixum</th>
+              </tr>
+              <tr>
+                <td>{{ map(d.transactionPrice) }}</td>
+                <td>{{ map(d.tradePrice) }}</td>
+                <td>{{ map(d.fixum) }}</td>
+              </tr>
+            </table>
+          </template>
+        </tc-tr>
+      </tc-table>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
+import BAnimatedNumber from '@/components/BAnimatedNumber.vue';
+import BChartWrapper from '@/components/charts/BChartWrapper.vue';
+import { Broker, BrokerManager } from '@/utils/BrokerManager';
+import { ClearingManager, DailyClearing } from '@/utils/ClearingManager';
 import { Vue, Component } from 'vue-property-decorator';
 
-@Component
-export default class Clearing extends Vue {}
+@Component({
+  components: {
+    BAnimatedNumber,
+    BChartWrapper
+  }
+})
+export default class Clearing extends Vue {
+  get daily(): DailyClearing[] {
+    return ClearingManager.sorted;
+  }
+
+  format(n: number): string {
+    return Intl.NumberFormat('en-GB', { notation: 'compact' }).format(n);
+  }
+
+  map(n: number): number {
+    return Math.round(n * 100) / 100;
+  }
+
+  get uniqueBroker(): Broker[] {
+    const broker = [...this.daily].map(x => x.brokerId);
+    const unique = [...new Set(broker)];
+
+    return unique
+      .map(x => BrokerManager.getBroker(x))
+      .filter(x => !!x) as Broker[];
+  }
+
+  get buy(): string {
+    const sum = this.daily.reduce((a, b) => a + b.volumeBuy, 0);
+    return this.format(sum);
+  }
+
+  get sell(): string {
+    const sum = this.daily.reduce((a, b) => a + b.volumeSell, 0);
+    return this.format(sum);
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .view-clearing {
-  //
+  .b-chart-wrapper {
+    position: relative;
+    i {
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      font-size: 30px;
+      transform: translateY(-50%);
+      opacity: 0.75;
+    }
+    span {
+      font-size: 25px;
+      font-weight: bold;
+      color: $error;
+    }
+  }
+
+  .tc-tr {
+    cursor: pointer;
+  }
+
+  .expander-table {
+    width: 100%;
+    text-align: center;
+    border-collapse: collapse;
+  }
 }
 </style>
diff --git a/src/views/invoice/Invoice.vue b/src/views/invoice/Invoice.vue
new file mode 100644
index 0000000..a5c885e
--- /dev/null
+++ b/src/views/invoice/Invoice.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="view-invoice" content>
+    <h1>Invoice</h1>
+
+    <tl-grid minWidth="170" gap="20">
+      <BChartWrapper title="Invoice" subtitle="Total">
+        <span>{{ total }}</span>
+      </BChartWrapper>
+      <BChartWrapper title="Individual" subtitle="Invoices">
+        <span>{{ due }}</span>
+      </BChartWrapper>
+      <BChartWrapper title="Average" subtitle="Invoice">
+        <span>{{ avg }}</span>
+      </BChartWrapper>
+    </tl-grid>
+
+    <div v-for="b in broker" :key="b.id">
+      <br />
+      <h2>{{ b.displayName }}</h2>
+      <tc-table :dark="true">
+        <template slot="head">
+          <tc-th>Monat</tc-th>
+          <tc-th>Jahr</tc-th>
+          <tc-th>Buy Volume</tc-th>
+          <tc-th>Sell Volume</tc-th>
+        </template>
+        <tc-tr
+          v-for="i in invoices.filter(x => x.brokerId === b.id)"
+          :key="i.id"
+        >
+          <tc-td>{{ i.month }}</tc-td>
+          <tc-td>{{ i.year }}</tc-td>
+          <tc-td tfcolor="error">{{ format(i.amount) }} €</tc-td>
+          <tc-td>{{ i.description }} €</tc-td>
+        </tc-tr>
+      </tc-table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import BChartWrapper from '@/components/charts/BChartWrapper.vue';
+import { Broker } from '@/utils/BrokerManager';
+import { InvoiceManager } from '@/utils/InvoiceManager';
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component({
+  components: {
+    BChartWrapper
+  }
+})
+export default class Invoice extends Vue {
+  get invoices() {
+    return InvoiceManager.invoices;
+  }
+
+  get broker(): Broker[] {
+    return InvoiceManager.getUniqueBroker();
+  }
+
+  format(n: number): string {
+    return Intl.NumberFormat('en-GB', { notation: 'compact' }).format(n);
+  }
+
+  get total(): string {
+    return this.format(InvoiceManager.total);
+  }
+
+  get due(): string {
+    return this.format(InvoiceManager.due);
+  }
+
+  get avg(): string {
+    return this.format(InvoiceManager.avg);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.view-invoice {
+  .b-chart-wrapper {
+    position: relative;
+    i {
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      font-size: 30px;
+      transform: translateY(-50%);
+      opacity: 0.75;
+    }
+    span {
+      font-size: 25px;
+      font-weight: bold;
+      color: $error;
+    }
+  }
+}
+</style>