WIP PaymentDetails

angular.json

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

package.json

@@ -21,6 +21,8 @@
     "@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",
     "primeicons": "^7.0.0",
     "primeng": "^17.18.0",
     "rxjs": "~7.8.0",

src/app/app.config.ts

@@ -6,11 +6,16 @@ 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,8 @@
 import { Routes } from '@angular/router';
 import { PaymentsComponent } from './pages/payments/payments.component';
+import { PaymentDetailsComponent } from './pages/payment-details/payment-details.component';
 
-export const routes: Routes = [{ path: '', component: PaymentsComponent }];
+export const routes: Routes = [
+  { path: '', component: PaymentsComponent },
+  { path: 'payment-details', component: PaymentDetailsComponent },
+];

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

@@ -1,5 +1,5 @@
 <div class="mt-8 bg-navy text-white">
-  <div class="container mx-auto flex justify-between py-12 font-extralight">
+  <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>

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

@@ -8,7 +8,9 @@
       class="[&_button:not(:hover)]:text-white"
       (click)="sidebarVisible = true"
     />
-    <h1 class="ml-2 text-white">121 Portal</h1>
+    <h1 class="ml-2 text-xl text-white">
+      <span class="font-bold">121 Portal | </span> Cash for breakfast box
+    </h1>
   </ng-template>
   <ng-template pTemplate="end">
     <div class="align-items-center flex gap-2">

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

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

src/app/domains/customer.ts

@@ -0,0 +1,16 @@
+export interface Country {
+  name?: string;
+  code?: string;
+}
+
+export interface Customer {
+  id?: number;
+  name?: string;
+  country?: Country;
+  company?: string;
+  date?: string | Date;
+  status?: string;
+  activity?: number;
+  verified?: boolean;
+  balance?: number;
+}

src/app/pages/payment-details/components/payment-details-chart/payment-details-chart.component.html

@@ -0,0 +1 @@
+<p-chart type="bar" [data]="chartData()" [options]="chartOptions" />

src/app/pages/payment-details/components/payment-details-chart/payment-details-chart.component.ts

@@ -0,0 +1,76 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { ChartModule } from 'primeng/chart';
+import { getTailwindConfig } from '../../../../utils/tailwind';
+
+const tailwindConfig = getTailwindConfig();
+
+@Component({
+  selector: 'app-payment-details-chart',
+  standalone: true,
+  imports: [ChartModule],
+  templateUrl: './payment-details-chart.component.html',
+  styleUrl: './payment-details-chart.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PaymentDetailsChartComponent {
+  paymentDetails = input.required<{
+    pending: number;
+    sent: number;
+    successful: number;
+    failed: number;
+  }>();
+
+  chartData = computed(() => {
+    const { pending, sent, successful, failed } = this.paymentDetails();
+    return {
+      labels: ['Pending', 'Sent', 'Successful', 'Failed'],
+      datasets: [
+        {
+          data: [pending, sent, successful, failed],
+          backgroundColor: [
+            tailwindConfig.theme.colors.orange[500],
+            tailwindConfig.theme.colors.blue[500],
+            tailwindConfig.theme.colors.green[500],
+            tailwindConfig.theme.colors.red[500],
+          ],
+        },
+      ],
+    };
+  });
+
+  chartOptions = {
+    indexAxis: 'y',
+    plugins: {
+      legend: false,
+      datalabels: {
+        align: 'right',
+        anchor: 'end',
+      },
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        ticks: {
+          crossAlign: 'far',
+        },
+        grid: {
+          display: false,
+        },
+      },
+      x: {
+        ticks: {
+          display: false,
+        },
+        grid: {
+          display: false,
+        },
+        border: { display: false },
+      },
+    },
+  };
+}

src/app/pages/payment-details/payment-details.component.html

@@ -0,0 +1,117 @@
+<app-program-header />
+<div class="w-full">
+  <div class="container py-4">
+    <div class="mt-8 flex">
+      <div>
+        <h1 class="text-2xl">Payment 01/04/2024</h1>
+        <small class="text-xs text-grey-500"
+          >Last updated: 12:34, 31/08/23</small
+        >
+      </div>
+      <p-button label="Approve Payment" class="ml-auto" rounded />
+    </div>
+    <h2 class="mb-4 mt-8 text-xl">Payment Monitoring</h2>
+    <div class="flex w-full items-stretch gap-4">
+      <div class="w-1/2">
+        <p-card header="Payment data" styleClass="h-full">
+          <div class="mb-4 w-full">
+            <div class="inline-block w-1/2">
+              <p>Total payment amount</p>
+              <p class="text-2xl font-bold">5,084</p>
+            </div>
+            <div class="inline-block w-1/2 pl-4">
+              <p>Included participants:</p>
+              <p class="text-2xl font-bold">$ 159,566</p>
+            </div>
+          </div>
+          <app-payment-details-chart
+            [paymentDetails]="{
+              pending: 472,
+              sent: 200,
+              failed: 20,
+              successful: 560,
+            }"
+          />
+        </p-card>
+      </div>
+      <div class="w-1/2">
+        <p-card header="Payment log" styleClass="h-full"> </p-card>
+      </div>
+    </div>
+    <h2 class="mb-4 mt-8 text-xl">Participant list</h2>
+    <p-table
+      [value]="customers()"
+      [lazy]="true"
+      (onLazyLoad)="loadCustomers($event)"
+      dataKey="id"
+      [tableStyle]="{ 'min-width': '75rem' }"
+      [paginator]="true"
+      [rows]="10"
+      [totalRecords]="totalRecords()"
+      [loading]="loading()"
+      [globalFilterFields]="['name', 'country.name', 'company', 'status']"
+      currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+      [showCurrentPageReport]="true"
+      [rowsPerPageOptions]="[10, 20, 100]"
+    >
+      <ng-template pTemplate="header">
+        <tr>
+          <th pSortableColumn="name">Name <p-sortIcon field="name" /></th>
+          <th pSortableColumn="country.name">
+            Country <p-sortIcon field="country.name" />
+          </th>
+          <th pSortableColumn="company">
+            Company <p-sortIcon field="company" />
+          </th>
+          <th pSortableColumn="status">Status <p-sortIcon field="status" /></th>
+        </tr>
+        <tr>
+          <th>
+            <p-columnFilter type="text" field="name" />
+          </th>
+          <th>
+            <p-columnFilter type="text" field="country.name" />
+          </th>
+          <th>
+            <p-columnFilter type="text" field="company" />
+          </th>
+          <th>
+            <p-columnFilter field="status" matchMode="in" [showMenu]="false">
+              <ng-template
+                pTemplate="filter"
+                let-value
+                let-filter="filterCallback"
+              >
+                <p-multiSelect
+                  [(ngModel)]="selectedStatuses"
+                  appendTo="body"
+                  [options]="statuses"
+                  placeholder="Any"
+                  (onChange)="filter($event.value)"
+                  optionLabel="label"
+                  optionValue="value"
+                  [maxSelectedLabels]="1"
+                  [selectedItemsLabel]="'{0} items'"
+                >
+                  <ng-template let-option pTemplate="item">
+                    <div class="vertical-align-middle inline-block">
+                      <span class="ml-1 mt-1">{{ option.label }}</span>
+                    </div>
+                  </ng-template>
+                </p-multiSelect>
+              </ng-template>
+            </p-columnFilter>
+          </th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-customer>
+        <tr>
+          <td>{{ customer.name }}</td>
+          <td>{{ customer.country.name }}</td>
+          <td>{{ customer.company }}</td>
+          <td>{{ customer.status }}</td>
+        </tr>
+      </ng-template>
+    </p-table>
+  </div>
+</div>