-
Notifications
You must be signed in to change notification settings - Fork 0
/
big-expenses.component.html
49 lines (48 loc) · 1.66 KB
/
big-expenses.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div class="margin-x mt-3">
<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>
<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>
</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! There
are other options. Secondary buys and toppreise.ch
</p>
</div>
</div>
</div>
</div>
</div>