60 lines
2.1 KiB
HTML
60 lines
2.1 KiB
HTML
<div class="container py-4">
|
|
<!-- Profile Header -->
|
|
<div class="card mb-4 shadow-sm">
|
|
<div class="card-body text-center p-4">
|
|
<div class="avatar avatar-xl mb-3">
|
|
<i class="bi bi-person-circle fs-1 text-primary"></i>
|
|
</div>
|
|
<h3 class="mb-1">{{ username }}</h3>
|
|
<p class="text-muted mb-4">{{ this.api.currentUser }}</p>
|
|
<div class="d-flex align-items-center justify-content-center gap-2 mb-1">
|
|
<i class="bi bi-wallet2 fs-4"></i>
|
|
<h3 class="mb-0">{{ balance | currency}}</h3>
|
|
</div>
|
|
<button type="button" (click)="logOut()" class="btn btn-outline-secondary">Log out</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Transactions -->
|
|
<div class="card mb-4 shadow-sm">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0">Recent Transactions</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="list-group list-group-flush">
|
|
<!-- Transaction Item -->
|
|
@for (transaction of transactions; track $index) {
|
|
<div class="list-group-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3">
|
|
<i class="bi bi-person-fill fs-4 text-secondary"></i>
|
|
</div>
|
|
<div class="text-start">
|
|
@if (transaction.receiverID == this.api.currentUser) {
|
|
<h6 class="mb-0">{{ transaction.senderID }}</h6>
|
|
}@else {
|
|
<h6 class="mb-0">{{ transaction.receiverID }}</h6>
|
|
}
|
|
<small class="text-muted">{{ transaction.date | date:'medium' }}</small>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
@if (transaction.receiverID == this.api.currentUser) {
|
|
<h6 class="mb-0 text-success">
|
|
{{ transaction.amount | currency }}
|
|
</h6>
|
|
}@else {
|
|
<h6 class="mb-0 text-danger">
|
|
{{ - transaction.amount | currency }}
|
|
</h6>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|