first commit

src/app/pages/invoices/invoices.component.html

@@ -0,0 +1,52 @@
+<div class="content">
+  <div class="row">
+    <div class="col-md-12">
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title font-weight-bolder">Invoices Details</h3>
+        </div>
+        <div class="card-body">
+          <div class="table-responsive">
+            <table class="table tablesorter" id="">
+              <thead class="text-primary">
+                <tr>
+                  <th>S/N</th>
+                  <th>Invoice Number</th>
+                  <th>Date Issued</th>
+                  <th>Due Date</th>
+                  <th>Status</th>
+                  <th class="text-center">Amount</th>
+                  <th>Services Rendered</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let invoice of invoices; let i = index">
+                  <td>{{ i + 1 }}</td>
+                  <td>{{ invoice.invoiceNumber }}</td>
+
+                  <td>
+                    {{
+                      invoice.dateIssued.toLocaleDateString("en-US", options)
+                    }}
+                  </td>
+                  <td>
+                    {{ invoice.dueDate.toLocaleDateString("en-US", options) }}
+                  </td>
+                  <td
+                    class="text-capitalize"
+                    style="font-weight: 600"
+                    [ngStyle]="{ 'color': getStatusColor(invoice.status) }"
+                  >
+                    {{ invoice.status }}
+                  </td>
+                  <td class="text-center">₦{{ invoice.amount }}</td>
+                  <td>{{ invoice.services[0].description }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>