Complete payments page with PrimeNG

eslint.config.js

@@ -45,10 +45,11 @@ module.exports = tseslint.config(
     },
   },
   {
-    files: ["**/*.html"],
+    files: ["src/app/**/*.html"],
     extends: [
       ...angular.configs.templateRecommended,
       ...angular.configs.templateAccessibility,
+      eslintPluginPrettierRecommended,
     ],
     rules: {},
   },

package.json

@@ -21,6 +21,8 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

src/app/app.component.html

@@ -1,3 +1,3 @@
-<h1 class="text-navy text-3xl font-bold underline">Hello world!</h1>
-
+<app-header />
 <router-outlet />
+<app-footer />

src/app/app.component.spec.ts

@@ -19,6 +19,6 @@ describe('AppComponent', () => {
   it(`should have the right title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('component-library-demo');
+    expect(app.title).toEqual('121 Portal | Component Library Demo');
   });
 });

src/app/app.component.ts

@@ -1,14 +1,16 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, HeaderComponent, FooterComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  title = 'component-library-demo';
+  title = '121 Portal | Component Library Demo';
 }

src/app/app.config.ts

@@ -3,12 +3,14 @@ import {
   provideExperimentalZonelessChangeDetection,
 } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideExperimentalZonelessChangeDetection(),
+    provideAnimationsAsync(),
   ],
 };

src/app/app.routes.ts

@@ -1,4 +1,4 @@
 import { Routes } from '@angular/router';
-import { HomepageComponent } from './pages/homepage/homepage.component';
+import { PaymentsComponent } from './pages/payments/payments.component';
 
-export const routes: Routes = [{ path: '', component: HomepageComponent }];
+export const routes: Routes = [{ path: '', component: PaymentsComponent }];

src/app/components/footer/footer.component.html

@@ -0,0 +1,59 @@
+<div class="mt-8 bg-navy text-white">
+  <div class="container mx-auto flex justify-between py-12 font-extralight">
+    <div class="w-1/4">
+      <h3 class="mb-6 text-xl font-bold">About 121 Portal</h3>
+      <p>
+        121 (“one to one”) is end-to-end cash delivery platform that helps NGO’s
+        to implement Digital Cash Aid programs safe fast and....
+      </p>
+      <p class="mt-8">&#64; 510 2024</p>
+    </div>
+    <div>
+      <h3 class="mb-6 text-xl font-bold">Find out more</h3>
+      <ul>
+        <li class="mb-2 underline">
+          <a href="https://510.global">121.global</a>
+        </li>
+        <li class="mb-2 underline">
+          <a href="https://510.global">510.global</a>
+        </li>
+        <li class="mb-2 underline">
+          <a href="https://510.global">data.ifrc.org</a>
+        </li>
+      </ul>
+    </div>
+    <div>
+      <h3 class="mb-6 text-xl font-bold">Helpful links</h3>
+      <ul>
+        <li class="mb-2 underline">
+          <a href="https://510.global">Open Source Code</a>
+        </li>
+        <li class="mb-2 underline">
+          <a href="https://510.global">API Documentation</a>
+        </li>
+        <li class="mb-2 underline">
+          <a href="https://510.global">Other Resources</a>
+        </li>
+      </ul>
+    </div>
+    <div>
+      <h3 class="mb-6 text-xl font-bold">Questions or feedback? Contact us</h3>
+      <a
+        href="mailto:[email protected]"
+        class="p-button p-button-rounded p-button-outlined border-white font-normal text-white"
+        >support&#64;510.global</a
+      >
+      <div class="mt-6 flex gap-3">
+        <a href="https://facebook.com">
+          <i class="pi pi-facebook text-2xl text-white"></i>
+        </a>
+        <a href="https://facebook.com">
+          <i class="pi pi-twitter text-2xl text-white"></i>
+        </a>
+        <a href="https://facebook.com">
+          <i class="pi pi-youtube text-2xl text-white"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/footer/footer.component.spec.ts

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

src/app/components/footer/footer.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [ButtonModule],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FooterComponent {}

src/app/components/header/header.component.html

@@ -0,0 +1,42 @@
+<p-toolbar styleClass="bg-navy border-none rounded-none">
+  <ng-template pTemplate="start">
+    <p-button
+      icon="pi pi-bars"
+      plain
+      rounded
+      text
+      class="[&_button:not(:hover)]:text-white"
+      (click)="sidebarVisible = true"
+    />
+    <h1 class="ml-2 text-white">121 Portal</h1>
+  </ng-template>
+  <ng-template pTemplate="end">
+    <div class="align-items-center flex gap-2">
+      <p-button
+        icon="pi pi-search"
+        plain
+        rounded
+        text
+        class="[&_button:not(:hover)]:text-white"
+      />
+      <p-button
+        icon="pi pi-bell"
+        plain
+        rounded
+        text
+        class="[&_button:not(:hover)]:text-white"
+      />
+      <p-button
+        icon="pi pi-user"
+        plain
+        rounded
+        text
+        class="[&_button:not(:hover)]:text-white"
+      />
+    </div>
+  </ng-template>
+</p-toolbar>
+<p-sidebar [(visible)]="sidebarVisible">
+  <h3>Sidebar</h3>
+  <p>Lorem ipsum dolor sit amet...</p>
+</p-sidebar>

src/app/components/header/header.component.spec.ts

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

src/app/components/header/header.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { ToolbarModule } from 'primeng/toolbar';
+import { SidebarModule } from 'primeng/sidebar';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [ButtonModule, ToolbarModule, SidebarModule],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeaderComponent {
+  sidebarVisible = false;
+}

src/app/components/program-header/program-header.component.html

@@ -0,0 +1,5 @@
+<div class="w-full bg-white">
+  <div class="container mx-auto pt-2">
+    <p-tabMenu [model]="navMenuItems" />
+  </div>
+</div>

src/app/components/program-header/program-header.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgramHeaderComponent } from './program-header.component';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+describe('ProgramHeaderComponent', () => {
+  let component: ProgramHeaderComponent;
+  let fixture: ComponentFixture<ProgramHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProgramHeaderComponent, RouterModule.forRoot([])],
+      providers: [provideExperimentalZonelessChangeDetection()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProgramHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/program-header/program-header.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TabMenuModule } from 'primeng/tabmenu';
+
+@Component({
+  selector: 'app-program-header',
+  standalone: true,
+  imports: [TabMenuModule],
+  templateUrl: './program-header.component.html',
+  styleUrl: './program-header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgramHeaderComponent {
+  navMenuItems = [
+    {
+      label: 'Overview | Participants',
+    },
+    {
+      label: 'Payments',
+      routerLink: '/', // Just throwing this in there to make one selected by default
+    },
+    {
+      label: 'Monitoring',
+    },
+  ];
+}