feat: Add widget for remaining budget with loading state and styling

Author: PhantomDave

frontend/src/app/components/dashboard-component/dashboard-component.component.css

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+gridster {
+  background-color: var(--mat-sys-surface);
+}
+
+gridster-item {
+  background-color: transparent;
+}
+
+.placeholder-widget {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 16px;
+  border: 2px dashed var(--mat-sys-outline-variant);
+  border-radius: 8px;
+  background-color: var(--mat-sys-surface-container-low);
+  color: var(--mat-sys-on-surface-variant);
+  text-align: center;
+}
+
+.placeholder-widget p {
+  margin: 4px 0;
+  font: var(--mat-sys-body-medium);
+}

frontend/src/app/components/dashboard-component/dashboard-component.component.html

@@ -1,5 +1,20 @@
 <gridster [options]="options">
-  @for (widget of widgets; track widget) {
-    <gridster-item [item]="widget"> </gridster-item>
+  @for (widget of widgets(); track widget) {
+    <gridster-item [item]="widget">
+      @switch (widget['component']) {
+        @case ('widget-remaining') {
+          <app-widget-remaining
+            [record]="widget['data']"
+            [loading]="loading()"
+          ></app-widget-remaining>
+        }
+        @default {
+          <div class="placeholder-widget">
+            <p>Widget: {{ widget['component'] || 'Empty' }}</p>
+            <p>{{ widget.cols }}x{{ widget.rows }}</p>
+          </div>
+        }
+      }
+    </gridster-item>
   }
 </gridster>

frontend/src/app/components/dashboard-component/dashboard-component.component.ts

@@ -1,4 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  OnInit,
+  signal,
+} from '@angular/core';
 import {
   CompactType,
   DisplayGrid,
@@ -9,19 +16,30 @@ import {
   GridsterItemComponentInterface,
   GridType,
 } from 'angular-gridster2';
+import { WidgetRemainingComponent } from '../../widgets/widget-remaining/widget-remaining.component';
+import { FinanceRecordService } from '../../models/finance-record/finance-record-service';
 
 @Component({
   standalone: true,
-  imports: [GridsterComponent, GridsterItemComponent],
+  imports: [GridsterComponent, GridsterItemComponent, WidgetRemainingComponent],
   selector: 'app-dashboard',
   templateUrl: './dashboard-component.component.html',
   styleUrls: ['./dashboard-component.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DashboardComponent implements OnInit {
+  readonly financeRecords = inject(FinanceRecordService);
+
   options!: GridsterConfig;
-  widgets!: Array<GridsterItem>;
+  widgets = signal<GridsterItem[]>([]);
+  readonly financeRecordsComputed = computed(() => this.financeRecords.financeRecords());
+  readonly loading = computed(() => this.financeRecords.loading());
 
   ngOnInit() {
+    const startDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
+    const endDate = new Date();
+    this.financeRecords.getFinanceRecords(startDate, endDate);
+
     this.options = {
       gridType: GridType.Fit,
       compactType: CompactType.None,
@@ -35,7 +53,7 @@ export class DashboardComponent implements OnInit {
       mobileBreakpoint: 768,
       minCols: 12,
       maxCols: 12,
-      minRows: 1,
+      minRows: 20,
       maxRows: 100,
       maxItemCols: 12,
       minItemCols: 1,
@@ -60,12 +78,12 @@ export class DashboardComponent implements OnInit {
       emptyCellDragMaxRows: 50,
       ignoreMarginInRow: false,
       draggable: {
-        enabled: false,
+        enabled: true,
         ignoreContent: true,
         dragHandleClass: 'drag-handle',
       },
       resizable: {
-        enabled: false,
+        enabled: true,
       },
       swap: false,
       pushItems: true,
@@ -81,10 +99,25 @@ export class DashboardComponent implements OnInit {
       itemResizeCallback: this.itemResize.bind(this),
     };
 
-    this.widgets = [
-      { cols: 1, rows: 1, y: 0, x: 0, dragEnabled: true, resizeEnabled: true },
-      { cols: 2, rows: 2, y: 0, x: 2 },
-    ];
+    this.widgets.set([
+      {
+        cols: 2,
+        rows: 1,
+        y: 0,
+        x: 0,
+        component: 'widget-remaining',
+        data: this.financeRecordsComputed(),
+        dragEnabled: true,
+        resizeEnabled: true,
+      },
+      {
+        cols: 4,
+        rows: 2,
+        y: 0,
+        x: 4,
+        component: 'widget-placeholder',
+      },
+    ]);
   }
 
   itemChange(item: GridsterItem, itemComponent: GridsterItemComponentInterface) {
@@ -100,11 +133,11 @@ export class DashboardComponent implements OnInit {
   }
 
   removeItem(item: GridsterItem) {
-    this.widgets.splice(this.widgets.indexOf(item), 1);
+    this.widgets().splice(this.widgets().indexOf(item), 1);
   }
 
   addItem() {
-    this.widgets.push({
+    this.widgets().push({
       x: 0,
       y: 0,
       rows: 0,

frontend/src/app/widgets/widget-remaining/widget-remaining.component.css

@@ -0,0 +1,15 @@
+.widget-content {
+  padding: 16px;
+  text-align: center;
+}
+
+.amount {
+  font: var(--mat-sys-headline-large);
+  color: var(--mat-sys-primary);
+  margin-bottom: 8px;
+}
+
+.label {
+  font: var(--mat-sys-body-medium);
+  color: var(--mat-sys-on-surface-variant);
+}

frontend/src/app/widgets/widget-remaining/widget-remaining.component.html

@@ -0,0 +1,11 @@
+<app-widget-wrapper
+  [title]="'Budget Overview'"
+  [subtitle]="'Remaining balance'"
+  [icon]="'account_balance_wallet'"
+  [loading]="loading()"
+>
+  <div class="widget-content">
+    <div class="amount">{{ remainingBudget() | currency: currency() }}</div>
+    <div class="label">Remaining Budget</div>
+  </div>
+</app-widget-wrapper>

frontend/src/app/widgets/widget-remaining/widget-remaining.component.ts

@@ -0,0 +1,19 @@
+import { Component, computed, input } from '@angular/core';
+import { FinanceRecord } from '../../models/finance-record/finance-record';
+import { CurrencyPipe } from '@angular/common';
+import { WidgetWrapperComponent } from '../widget-wrapper/widget-wrapper.component';
+
+@Component({
+  selector: 'app-widget-remaining',
+  templateUrl: './widget-remaining.component.html',
+  styleUrls: ['./widget-remaining.component.css'],
+  imports: [CurrencyPipe, WidgetWrapperComponent],
+})
+export class WidgetRemainingComponent {
+  readonly record = input<FinanceRecord[]>([]);
+  readonly currency = computed(() => this.record()[0]?.currency || 'USD');
+  readonly remainingBudget = computed(() =>
+    this.record().reduce((sum, record) => sum + record.amount, 0),
+  );
+  readonly loading = input<boolean>(false);
+}

frontend/src/app/widgets/widget-wrapper/widget-wrapper.component.css

@@ -0,0 +1,47 @@
+.widget-card {
+  display: block;
+  position: relative;
+  height: 100%;
+}
+
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.05);
+  z-index: 1;
+  pointer-events: all;
+  border-radius: inherit;
+}
+
+mat-card-header {
+  margin-bottom: 1rem;
+}
+
+[mat-card-avatar] {
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-on-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+
+mat-card-title {
+  color: var(--mat-sys-on-surface);
+  font: var(--mat-sys-title-large);
+  margin: 0;
+}
+
+mat-card-subtitle {
+  color: var(--mat-sys-on-surface-variant);
+  font: var(--mat-sys-body-medium);
+}
+
+mat-card-content {
+  padding: 0 16px 16px;
+}

frontend/src/app/widgets/widget-wrapper/widget-wrapper.component.html

@@ -0,0 +1,36 @@
+<mat-card appearance="outlined" class="widget-card">
+  @if (loading()) {
+    <div class="loading-overlay" aria-live="polite">
+      <mat-progress-spinner
+        mode="indeterminate"
+        diameter="48"
+        strokeWidth="4"
+        [attr.aria-label]="'Loading ' + title()"
+      ></mat-progress-spinner>
+    </div>
+  }
+
+  @if ((title() || subtitle() || icon()) && !loading()) {
+    <mat-card-header>
+      @if (icon()) {
+        <app-flex align="center" justify="center">
+          <mat-icon mat-card-avatar aria-hidden="true">{{ icon() }}</mat-icon>
+        </app-flex>
+      }
+      <app-flex justify="space-around" align="center" style="width: 100%">
+        <app-flex gap="4px" [vertical]="true">
+          @if (title()) {
+            <mat-card-title>{{ title() }}</mat-card-title>
+          }
+          @if (subtitle()) {
+            <mat-card-subtitle>{{ subtitle() }}</mat-card-subtitle>
+          }
+        </app-flex>
+      </app-flex>
+    </mat-card-header>
+
+    <mat-card-content>
+      <ng-content></ng-content>
+    </mat-card-content>
+  }
+</mat-card>

frontend/src/app/widgets/widget-wrapper/widget-wrapper.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+  MatCard,
+  MatCardContent,
+  MatCardHeader,
+  MatCardSubtitle,
+  MatCardTitle,
+} from '@angular/material/card';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { FlexComponent } from '../../components/ui-library/flex-component/flex-component';
+
+@Component({
+  selector: 'app-widget-wrapper',
+  imports: [
+    MatCard,
+    MatCardHeader,
+    MatCardTitle,
+    MatCardSubtitle,
+    MatIcon,
+    MatCardContent,
+    MatProgressSpinner,
+    FlexComponent,
+  ],
+  templateUrl: './widget-wrapper.component.html',
+  styleUrl: './widget-wrapper.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WidgetWrapperComponent {
+  readonly title = input<string>('');
+  readonly subtitle = input<string>('');
+  readonly icon = input<string>('');
+  readonly loading = input<boolean>(false);
+}