small tweak to add expense

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

@@ -1,18 +1,44 @@
 <div class="add-expense-container">
   <app-card [header]="'Add Expense'">
     <div class="add-expense-body">
-      <div>Date</div>
-      <div>Amount</div>
-      <div>Category</div>
-      <div>Merchant</div>
+      <div>
+        Date: <input type="date" [formField]="expenseForm.date">
+      </div>
+
+      <div>
+        Cents (required):
+        <input type="number" placeholder="Enter amount" [formField]="expenseForm.amount">
+      </div>
+
+      <div>
+        Category (required):
+        <select [formField]="expenseForm.categoryId">
+          <option value="">Select a category</option>
+          @for (category of categories(); track category.id) {
+            <option [value]="category.id">{{ category.name }}</option>
+          }
+        </select>
+      </div>
     </div>
 
     <div>
-      Note
+      Merchant (optional):
+      <select [formField]="expenseForm.merchantId">
+        <option value="">Select a merchant</option>
+        @for (merchant of merchants(); track merchant.id) {
+          <option [value]="merchant.id">{{ merchant.name }}</option>
+        }
+      </select>
     </div>
 
+    <div>
+      Note (optional): <input type="text" [formField]="expenseForm.note">
+    </div>
+
+    <div>Tags</div>
+
     <div class="card-footer">
-      <div>Tags</div>
+      <button>Save</button>
     </div>
   </app-card>
 </div>