Recent activity store.

src/app/buxx/data-access/recent-activity.store.ts

@@ -0,0 +1,16 @@
+import { computed, Injectable, Signal, signal, WritableSignal } from '@angular/core';
+import { DeleteTransaction, RecentTransaction, Transaction } from '../../shared/model/buxx.model';
+import { Subject } from 'rxjs';
+
+export type RecentActivityState = {
+  data: RecentTransaction[];
+}
+
+@Injectable()
+export class RecentActivityStore {
+
+  restore$: Subject<Transaction> = new Subject<Transaction>();
+  delete$: Subject<DeleteTransaction> = new Subject<DeleteTransaction>();
+  private state: WritableSignal<RecentActivityState> = signal({data: []});
+  readonly data: Signal<RecentTransaction[]> = computed(() => this.state().data);
+}

src/app/buxx/feature/buxx.component.html

@@ -1,8 +1,11 @@
 <as-toolbar (newTransactionEmitter)="saveTransaction($event)"></as-toolbar>
 <div class="flex flex-col items-center justify-center">
 	<as-summary [summary]="summaryStore.data()"></as-summary>
+	<div class="items-center justify-center w-3/4">
+		<as-recent-transaction></as-recent-transaction>
+	</div>
 	<mat-accordion class="flex flex-col w-3/4 sm:min-w-11/12 sm:mx-14">
-		<mat-expansion-panel class="w-full  sm:mx-14" [expanded]="false">
+		<mat-expansion-panel [expanded]="false" class="w-full sm:mx-14">
 			<mat-expansion-panel-header>
 				<mat-panel-title class="text-lg">
 					<mat-icon class="mr-2">tune</mat-icon>

src/app/buxx/feature/buxx.component.ts

@@ -48,6 +48,7 @@ import { queryInitialState, QueryStore } from '../data-access/query.store';
 import { environment } from '../../../environments/environment';
 import { PositiveNumberOnlyDirective } from '../../shared/util/positive-number.directive';
 import { MaskDateDirective } from '../../shared/util/date-mask.directive';
+import { RecentTransactionComponent } from '../ui/recent-transaction/recent-transaction.component';
 
 export const filterValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
   const date = control.get('date');
@@ -79,7 +80,8 @@ export const filterValidator: ValidatorFn = (control: AbstractControl): Validati
     MatSelectModule,
     SummaryComponent,
     PositiveNumberOnlyDirective,
-    MaskDateDirective
+    MaskDateDirective,
+    RecentTransactionComponent
   ],
   templateUrl: './buxx.component.html',
   styleUrl: './buxx.component.scss',

src/app/buxx/ui/recent-transaction/recent-transaction.component.html

@@ -0,0 +1,46 @@
+@if (transactions.length) {
+	<mat-accordion class="flex flex-col w-full mb-4 sm:min-w-11/12 sm:mx-14">
+		<mat-expansion-panel [hideToggle]="true">
+			<mat-expansion-panel-header>
+				<mat-panel-title class="text-lg">
+					<mat-icon class="mr-2">layers</mat-icon>
+					Recent Activity
+				</mat-panel-title>
+			</mat-expansion-panel-header>
+		</mat-expansion-panel>
+
+		@for (transaction of transactions; track transaction.id) {
+			<mat-expansion-panel class="w-full">
+				<mat-expansion-panel-header>
+					<mat-panel-title>
+						<span class="mr-4 font-bold">
+							@if (transaction.isExpense) {
+								<mat-icon class="negative">trending_down</mat-icon>
+							} @else {
+								<mat-icon class="positive">trending_up</mat-icon>
+							}
+						</span>
+						{{ transaction.name }}
+						<span class="ml-2">
+						@if (transaction.action === 'DELETED') {
+							<mat-chip style="background: #6f1a07">deleted</mat-chip>
+						} @else if (transaction.action === 'SAVED') {
+							<mat-chip style="background: #607d8b">saved</mat-chip>
+						}
+					</span>
+					</mat-panel-title>
+					<mat-panel-description>Rs. {{ transaction.amount }}</mat-panel-description>
+					<mat-panel-description>{{ transaction.date | date: 'mediumDate' }}</mat-panel-description>
+				</mat-expansion-panel-header>
+				<div class="flex flex-row float-right sm:flex-col sm:float-none">
+					@if (transaction.action === 'DELETED') {
+						<button mat-raised-button color="accent" class="sm:mb-2" (click)="restore(transaction)">Restore</button>
+					} @else if (transaction.action === 'SAVED') {
+						<button mat-raised-button color="warn" class="sm:mb-2" (click)="delete(transaction)">Delete</button>
+					}
+				</div>
+				<p>{{ transaction.details }}</p>
+			</mat-expansion-panel>
+		}
+	</mat-accordion>
+}

src/app/buxx/ui/recent-transaction/recent-transaction.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RecentTransactionComponent } from './recent-transaction.component';
+
+describe('RecentTransactionComponent', () => {
+  let component: RecentTransactionComponent;
+  let fixture: ComponentFixture<RecentTransactionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RecentTransactionComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RecentTransactionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/buxx/ui/recent-transaction/recent-transaction.component.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { RecentTransaction } from '../../../shared/model/buxx.model';
+import { MatChipsModule } from '@angular/material/chips';
+import { DatePipe } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  selector: 'as-recent-transaction',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatChipsModule,
+    DatePipe,
+    MatCardModule
+  ],
+  templateUrl: './recent-transaction.component.html',
+  styleUrl: './recent-transaction.component.scss',
+})
+export class RecentTransactionComponent {
+
+  transactions: RecentTransaction[] = [
+    {
+      action: 'DELETED',
+      date: (new Date()).toString(),
+      id: 'sds',
+      name: 'Test Name',
+      isExpense: true,
+      details: 'sdfd',
+      amount: 222,
+      userId: 'sdfsdf'
+    },
+    {
+      action: 'SAVED',
+      date: (new Date()).toString(),
+      id: 'sds',
+      name: 'Test Name Again',
+      isExpense: true,
+      details: 'sdfd',
+      amount: 222,
+      userId: 'sdfsdf'
+    }
+  ];
+
+  restore(transaction: RecentTransaction) {
+
+  }
+
+  delete(transaction: RecentTransaction): void {
+
+  }
+}

src/app/shared/model/buxx.model.ts

@@ -43,4 +43,6 @@ export type Summary = {
   balance: number,
   income: number,
   expense: number
-};
+};
+
+export type RecentTransaction = Transaction & { action: 'DELETED' | 'SAVED' };