Feature: Voucher tags. This will eventually help in filtering ledger based on tags and also to group vouchers.

overlord/src/app/purchase/purchase.component.html

@@ -160,6 +160,33 @@
         <mat-label>Narration</mat-label>
         <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
+      <mat-form-field class="flex-auto">
+        <mat-label>Tags</mat-label>
+        <mat-chip-grid #chipGrid aria-label="Tag selection">
+          @for (tag of voucher.tags; track tag) {
+            <mat-chip-row (removed)="removeTag(tag)">
+              {{ tag.name }}
+              <button matChipRemove [attr.aria-label]="'remove ' + tag.name">
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip-row>
+          }
+        </mat-chip-grid>
+        <input
+          placeholder="New Tag..."
+          #tagInput
+          formControlName="tags"
+          [matChipInputFor]="chipGrid"
+          [matAutocomplete]="autoTag"
+          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          (matChipInputTokenEnd)="addTag($event)"
+        />
+        <mat-autocomplete #autoTag="matAutocomplete" (optionSelected)="selectedTag($event)">
+          @for (tag of tags | async; track tag) {
+            <mat-option [value]="tag">{{ tag.name }}</mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
       <div class="flex flex-row justify-center items-stretch mr-5">
         @for (item of voucher.files; track item) {
           <div class="img-container" class="flex-auto mr-5 basis-1/5">