feat: send screen

client/src/app/app.html

@@ -3,13 +3,13 @@
 </main>
 <nav>
   <ul ngbNav [(activeId)]="active" class="nav-tabs custom-navbar bg-body-secondary">
-    <li [ngbNavItem]="1" class="custom-navitem"><a ngbNavLink>
+    <li [ngbNavItem]="1" class="custom-navitem"><a ngbNavLink routerLink="/send">
         <i class="bi bi-cash"></i>
     </a></li>
-    <li [ngbNavItem]="2" class="custom-navitem"><a ngbNavLink>
+    <li [ngbNavItem]="2" class="custom-navitem"><a ngbNavLink routerLink="/receive">
         <i class="bi bi-piggy-bank"></i>
     </a></li>
-    <li [ngbNavItem]="3" class="custom-navitem"><a ngbNavLink>
+    <li [ngbNavItem]="3" class="custom-navitem"><a ngbNavLink routerLink="/profile">
         <i class="bi bi-person"></i>
     </a></li>
   </ul>

client/src/app/app.routes.ts

@@ -1,3 +1,24 @@
 import { Routes } from '@angular/router';
+import { ScreenSend } from './screens/screen-send/screen-send';
+import { ScreenReceive } from './screens/screen-receive/screen-receive';
+import { ScreenProfile } from './screens/screen-profile/screen-profile';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {
+        path: '',
+        pathMatch:'full',
+        redirectTo: '/send'
+    },
+    {
+        path:'send',
+        component: ScreenSend,
+    },
+    {
+        path:'receive',
+        component: ScreenReceive,
+    },
+    {
+        path:'profile',
+        component: ScreenProfile,
+    },
+];

client/src/app/app.ts

@@ -1,5 +1,5 @@
 import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterOutlet, RouterLinkWithHref } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import {
 	NgbNav,
@@ -10,11 +10,12 @@ import {
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, NgbModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkBase],
+  imports: [RouterOutlet, NgbModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkBase, RouterLinkWithHref],
   templateUrl: './app.html',
   styleUrl: './app.less'
 })
 export class App {
   protected readonly title = signal('client');
+  //FIXME nav jumping back to 1 after reload
   active = 1;
 }

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

@@ -0,0 +1,57 @@
+<div class="container py-5">
+  <div class="row justify-content-center">
+    <div class="col-lg-6 col-md-8">
+      <div class="card shadow-sm">
+        <div class="card-header bg-primary text-white">
+          <h3 class="mb-0">Send Money</h3>
+        </div>
+        <div class="card-body p-4">
+          <!-- Amount Input (Centered Large Field) -->
+          <div class="text-center mb-4">
+            <label class="form-label h5">Amount</label>
+            <div class="input-group input-group-lg mb-3">
+              <span class="input-group-text">$</span>
+              <input
+                type="number"
+                class="form-control text-center fs-2"
+                placeholder="0.00"
+                [(ngModel)]="amount"
+              />
+            </div>
+          </div>
+
+          <!-- Recipient Field -->
+          <div class="mb-3">
+            <label class="form-label">To</label>
+            <div class="input-group">
+              <span class="input-group-text">@</span>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="Email or phone number"
+                [(ngModel)]="recipient"
+              />
+            </div>
+          </div>
+
+          <!-- Note Field -->
+          <div class="mb-4">
+            <label class="form-label">Note (Optional)</label>
+            <textarea class="form-control" rows="2" [(ngModel)]="note"></textarea>
+          </div>
+
+          <!-- Action Buttons -->
+          <div class="d-grid gap-2">
+            <button class="btn btn-primary btn-lg" (click)="sendMoney()">
+              Send Money
+            </button>
+            <button class="btn btn-outline-secondary btn-lg" (click)="cancel()">
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

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

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

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-screen-send',
+  imports: [FormsModule],
+  templateUrl: './screen-send.html',
+  styleUrl: './screen-send.less',
+})
+export class ScreenSend {
+  amount: number = 0;
+  recipient: string = '';
+  note: string = '';
+
+  sendMoney() {
+    console.log('Sending:', this.amount, 'to', this.recipient);
+    // Add your logic here (e.g., API call)
+  }
+
+  cancel() {
+    this.amount = 0;
+    this.recipient = '';
+    this.note = '';
+  }
+}