scaffold expense list

src/app/components/expense/expense.component.html

@@ -0,0 +1,37 @@
+<div class="expense-container">
+  <div class="expense-header">
+    <div class="expense-date">
+      {{ `${expense().year}/${expense().month}/${expense().day}` | date }}
+    </div>
+
+    <div class="expense-amount">
+      {{ (expense().cents / 100) | currency: 'USD' }}
+    </div>
+
+    @if (expense().merchant) {
+      <div class="expense-merchant">&#64; {{ expense().merchant?.name }}</div>
+    }
+  </div>
+
+  <div class="expense-body">
+    <div>
+      Category: {{ expense().category.name }}
+      @if (expense().subCategory) {
+        / {{ expense().subCategory?.name }}
+      }
+    </div>
+
+    <div>
+      Description: {{ expense().description }}
+    </div>
+  </div>
+
+  <div class="expense-footer">
+    <div class="expense-tags">
+      <div>Tags:</div>
+      @for (tag of expense().tags; track tag.id) {
+        <div>{{ tag.name }}</div>
+      }
+    </div>
+  </div>
+</div>