feat: profile screen

client/src/app/screens/screen-profile/screen-profile.html

@@ -0,0 +1,46 @@
+<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">{{ email }}</p>
+      <button class="btn btn-outline-primary">Edit Profile</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 transaction.date) {
+        <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">
+                <h6 class="mb-0">{{ transaction.partner }}</h6>
+                <small class="text-muted">{{ transaction.date | date:'medium' }}</small>
+              </div>
+            </div>
+            <div class="text-end">
+              <h6 class="mb-0" [class.text-success]="transaction.amount > 0" [class.text-danger]="transaction.amount < 0">
+                {{ transaction.amount | currency }}
+              </h6>
+              <small class="text-muted">{{ transaction.type }}</small>
+            </div>
+          </div>
+        </div>
+       }
+    </div>
+  </div>
+</div>
+

client/src/app/screens/screen-profile/screen-profile.spec.ts

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

client/src/app/screens/screen-profile/screen-profile.ts

@@ -0,0 +1,20 @@
+import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-screen-profile',
+  imports: [CurrencyPipe, DatePipe, CommonModule],
+  templateUrl: './screen-profile.html',
+  styleUrl: './screen-profile.less',
+})
+export class ScreenProfile {
+    username = 'John Doe';
+  email = 'john.doe@example.com';
+
+  transactions = [
+    { partner: 'Alice Smith', amount: 50.00, date: new Date('2026-03-01'), type: 'Received' },
+    { partner: 'Bob Johnson', amount: -25.50, date: new Date('2026-02-28'), type: 'Sent' },
+    { partner: 'Charlie Brown', amount: 75.25, date: new Date('2026-02-27'), type: 'Received' },
+    { partner: 'Diana Prince', amount: -100.00, date: new Date('2026-02-25'), type: 'Sent' },
+  ];
+}