first commit

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";
+    }
+  }
+}