Add PrimeNG

.github/workflows/azure-static-web-apps-mango-hill-004f7cb03.yml

@@ -45,6 +45,7 @@ jobs:
           app_location: "dist/component-library-demo/browser"
           skip_app_build: true
           skip_api_build: true
+          config_file_location: "/"
           ###### End of Repository/Build Configurations ######
 
   close_pull_request_job:

angular.json

@@ -31,8 +31,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "1mb",
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",

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,11 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
+    "chart.js": "^4.4.3",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "lodash": "^4.17.21",
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },
@@ -31,6 +36,7 @@
     "@eslint/js": "^9.2.0",
     "@types/eslint__js": "^8.42.3",
     "@types/jasmine": "~5.1.0",
+    "@types/lodash": "^4.17.4",
     "angular-eslint": "18.0.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.3.0",

src/app/app.component.html

@@ -1,3 +1,8 @@
-<h1 class="text-navy text-3xl font-bold underline">Hello world!</h1>
-
-<router-outlet />
+<div class="flex min-h-screen flex-col">
+  <app-header />
+  <div class="flex-1">
+    <router-outlet />
+  </div>
+  <app-footer />
+</div>
+<p-toast [key]="toastKey"></p-toast>

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,22 @@
 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';
+import { ToastModule } from 'primeng/toast';
+import { MessageService } from 'primeng/api';
+import { ToastService } from './services/toast.service';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, HeaderComponent, FooterComponent, ToastModule],
+  providers: [
+    MessageService, // Needed by the ToastModule
+  ],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  title = 'component-library-demo';
+  title = '121 Portal | Component Library Demo';
+  toastKey = ToastService.TOAST_KEY;
 }

src/app/app.config.ts

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

src/app/app.routes.ts

@@ -1,4 +1,13 @@
 import { Routes } from '@angular/router';
-import { HomepageComponent } from './pages/homepage/homepage.component';
+import { PaymentsComponent } from './pages/payments/payments.component';
+import { PaymentDetailsComponent } from './pages/payment-details/payment-details.component';
+import { MonitoringComponent } from './pages/monitoring/monitoring.component';
+import { ParticipantsComponent } from './pages/participants/participants.component';
 
-export const routes: Routes = [{ path: '', component: HomepageComponent }];
+export const routes: Routes = [
+  { path: 'payments', component: PaymentsComponent },
+  { path: 'payments/:id', component: PaymentDetailsComponent },
+  { path: 'participants', component: ParticipantsComponent },
+  { path: 'monitoring', component: MonitoringComponent },
+  { path: '', redirectTo: '/payments', pathMatch: 'full' },
+];

src/app/components/activity-log/activity-log.component.html

@@ -0,0 +1,17 @@
+<p-scrollPanel styleClass="h-full w-full">
+  @for (logItem of activityWithIcons(); track $index) {
+    <div class="w-full border-b border-b-grey-300 py-4">
+      <div class="flex w-full gap-2">
+        <i [class]="'grow-0 text-3xl ' + logItem.icon"></i>
+        <div class="ltr:mr-auto rtl:ml-auto">
+          <h3 class="text-xl font-bold">{{ logItem.label }}</h3>
+          <p>{{ logItem.date }}</p>
+        </div>
+        <p-chip [label]="logItem.user" />
+      </div>
+      <div class="w-full text-center">
+        <p-button rounded plain text icon="pi pi-chevron-down" />
+      </div>
+    </div>
+  }
+</p-scrollPanel>

src/app/components/activity-log/activity-log.component.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { ChipModule } from 'primeng/chip';
+import { ButtonModule } from 'primeng/button';
+
+interface Activity {
+  label: string;
+  date: string;
+  type: string;
+  user: string;
+}
+
+@Component({
+  selector: 'app-activity-log',
+  standalone: true,
+  imports: [ScrollPanelModule, ButtonModule, ChipModule],
+  templateUrl: './activity-log.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ActivityLogComponent {
+  activity = input.required<Activity[]>();
+
+  activityWithIcons = computed(() =>
+    this.activity().map((activity) => ({
+      ...activity,
+      icon: this.getIcon(activity.type),
+    })),
+  );
+
+  getIcon(type: string) {
+    switch (type) {
+      case 'approved':
+        return 'pi pi-thumbs-up';
+      case 'created':
+        return 'pi pi-money-bill';
+      default:
+        return 'pi pi-question';
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+<div class="mt-8 bg-navy text-white">
+  <div class="container 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.ts

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