diff options
| -rw-r--r-- | ufund-ui/src/app/components/dashboard/dashboard.component.css | 28 | ||||
| -rw-r--r-- | ufund-ui/src/app/components/dashboard/dashboard.component.html | 30 |
2 files changed, 49 insertions, 9 deletions
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css index 742a151..303b890 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.css +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css @@ -9,3 +9,31 @@ flex-direction: column; gap: 10px; } + +#stats { + display: flex; + flex-direction: row; + gap: 10px; +} + +.card { + background-color: #2e2e2e; + width: 400px; + height: 130px; + border-radius: 5px; + padding: 20px; + display: flex; + flex-direction: column; + +} + +.listCard { + background-color: #2e2e2e; + border-radius: 5px; + padding: 10px; + +} + +.content { + align-self: end; +} diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html index 074ca76..233096a 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.html +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html @@ -1,15 +1,27 @@ <div id="box"> @if ((authService.getCurrentUserSubject() | async)?.type === userType.MANAGER) { <h1>Admin Dashboard</h1> - <span>_ Registered users</span> - <span *ngIf="count"> {{count | async}} </span> - <span>_ Fulfilled needs</span> - <app-mini-need-list [needList]="fulfilledNeeds.getValue()" label="Fulfilled needs"> </app-mini-need-list> - <span>_ Most fulfilled needs</span> - <app-mini-need-list [needList]="mostFulfilledNeeds.getValue()" label="Most fulfilled"> </app-mini-need-list> - <span>_ Total monetary contributions</span> - <span *ngIf="totalDonations">${{totalDonations | async}} </span> - <span>_ </span> + <div id="stats"> + <div class="card"> + <span>Registered users</span> + <h1 class="content" *ngIf="count"> {{count | async}} </h1> + </div> + + <div class="card"> + <span>Total monetary contributions</span> + <h1 class="content" *ngIf="totalDonations"> ${{totalDonations | async}} </h1> + </div> + </div> + + <div class="listCard"> + <span>Fulfilled needs</span> + <app-mini-need-list [needList]="fulfilledNeeds.getValue()" label="Fulfilled needs"> </app-mini-need-list> + </div> + <div class="listCard"> + <span>Most fulfilled needs</span> + <app-mini-need-list [needList]="mostFulfilledNeeds.getValue()" label="Most fulfilled"> </app-mini-need-list> + </div> + } @else { <h1>Unauthorized</h1> <span>This page requires you to be logged in as an admin! <a routerLink="/login">Log In</a></span> |