first commit

src/app/pages/payments/payments.component.html

@@ -0,0 +1,122 @@
+<div class="content">
+  <div class="row">
+    <div class="col-md-12">
+      <div class="card">
+        <div class="card-header">
+          <h4 class="card-title">Payment Details</h4>
+        </div>
+        <div class="card-body">
+          <div class="table-responsive">
+            <table class="table tablesorter">
+              <thead class="text-primary">
+                <tr>
+                  <th>S/N</th>
+                  <th>Payment Number</th>
+                  <th>Invoice Number</th>
+                  <th class="text-center">Payment Date</th>
+                  <th class="text-center">Amount</th>
+                  <th>Method</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let payment of payments; let i = index">
+                  <td>{{ i + 1 }}</td>
+                  <td>{{ payment.paymentNumber }}</td>
+                  <td>{{ payment.invoiceNumber }}</td>
+                  <td>
+                    {{
+                      payment.paymentDate.toLocaleDateString("en-US", options)
+                    }}
+                  </td>
+                  <td class="text-center">₦{{ payment.amount }}</td>
+                  <td
+                    class="text-capitalize"
+                    [ngStyle]="{ 'color': getMethodColor(payment.method) }"
+                    style="font-weight: 600;"
+                  >
+                    {{ payment.method }}
+                  </td>
+                  <td
+                    class="text-capitalize"
+                    style="font-weight: 600"
+                    [ngStyle]="{ 'color': getStatusColor(payment.status) }"
+                  >
+                    {{ payment.status }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- <div class=" col-md-12">
+      <div class=" card card-plain">
+        <div class=" card-header">
+          <h4 class=" card-title">Table on Plain Background</h4>
+          <p class=" category">Here is a subtitle for this table</p>
+        </div>
+        <div class=" card-body">
+          <div class=" table-responsive">
+            <table class=" table tablesorter" id="">
+              <thead class=" text-primary">
+                <tr>
+                  <th>Name</th>
+                  <th>Country</th>
+                  <th>City</th>
+                  <th class=" text-center">Salary</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Dakota Rice</td>
+                  <td>Niger</td>
+                  <td>Oud-Turnhout</td>
+                  <td class=" text-center">$36,738</td>
+                </tr>
+                <tr>
+                  <td>Minerva Hooper</td>
+                  <td>Curaçao</td>
+                  <td>Sinaai-Waas</td>
+                  <td class=" text-center">$23,789</td>
+                </tr>
+                <tr>
+                  <td>Sage Rodriguez</td>
+                  <td>Netherlands</td>
+                  <td>Baileux</td>
+                  <td class=" text-center">$56,142</td>
+                </tr>
+                <tr>
+                  <td>Philip Chaney</td>
+                  <td>Korea, South</td>
+                  <td>Overland Park</td>
+                  <td class=" text-center">$38,735</td>
+                </tr>
+                <tr>
+                  <td>Doris Greene</td>
+                  <td>Malawi</td>
+                  <td>Feldkirchen in Kärnten</td>
+                  <td class=" text-center">$63,542</td>
+                </tr>
+                <tr>
+                  <td>Mason Porter</td>
+                  <td>Chile</td>
+                  <td>Gloucester</td>
+                  <td class=" text-center">$78,615</td>
+                </tr>
+                <tr>
+                  <td>Jon Porter</td>
+                  <td>Portugal</td>
+                  <td>Gloucester</td>
+                  <td class=" text-center">$98,615</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</div>

src/app/pages/payments/payments.component.spec.ts

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

src/app/pages/payments/payments.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit } from "@angular/core";
+import { PaymentModel } from "../../models/payment";
+import { PaymentService } from "../../services/payment.service";
+
+@Component({
+  selector: "app-payments",
+  templateUrl: "./payments.component.html",
+  styleUrls: ["./payments.component.scss"],
+})
+export class PaymentsComponent implements OnInit {
+  payments: PaymentModel[];
+  options: any;
+
+  constructor(private paymentService: PaymentService) {
+    this.paymentService
+      .getPaymentById(1)
+      .subscribe((payment: PaymentModel[]) => {
+        this.payments = payment;
+
+        for (let i = 0; i < payment.length; i++) {
+          let amountWithCommas = payment[i].amount.replace(
+            /\B(?=(\d{3})+(?!\d))/g,
+            ","
+          );
+          payment[i].amount = amountWithCommas;
+        }
+      });
+  }
+
+  ngOnInit(): void {
+    this.options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    };
+  }
+
+  // Get color status
+  getStatusColor(status: string): string {
+    switch (status) {
+      case "pending":
+        return "#FFC107";
+      case "completed":
+        return "#4CAF50";
+      case "failed":
+        return "#DC143C";
+      default:
+        return "inherit";
+    }
+  }
+
+  // Get color for methods
+  getMethodColor(method: string): string {
+    switch (method) {
+      case "bank transfer":
+        return "#0072c6";
+      case "credit card":
+        return "#ff6f00";
+      case "cheque":
+        return "#8bc34a";
+      case "cash":
+        return "#795548";
+      default:
+        return "inherit";
+    }
+  }
+}