first commit

src/app/pages/invoices/invoices.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from "@angular/core";
+import { InvoiceModel } from "../../models/invoice";
+import { InvoiceService } from "../../services/invoice.service";
+
+@Component({
+  selector: "app-invoices",
+  templateUrl: "./invoices.component.html",
+  styleUrls: ["./invoices.component.scss"],
+})
+export class InvoicesComponent implements OnInit {
+  invoices: InvoiceModel[];
+  options: any;
+
+  constructor(private invoiceService: InvoiceService) {
+    this.invoiceService
+      .getInvoiceById(1)
+      .subscribe((invoice: InvoiceModel[]) => {
+        this.invoices = invoice;
+
+        for (let i = 0; i < invoice.length; i++) {
+          let amountWithCommas = invoice[i].amount.replace(
+            /\B(?=(\d{3})+(?!\d))/g,
+            ","
+          );
+          invoice[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 "paid":
+        return "#4CAF50";
+      case "overdue":
+        return "#DC143C";
+      default:
+        return "inherit";
+    }
+  }
+}