Add immunization support across entry, record, and timeline

Author: alopezo

src/app/benefits-demo/ai-assisted-entry/ai-assisted-entry.component.ts

@@ -298,6 +298,7 @@ export class AiAssistedEntryComponent implements OnInit, OnDestroy {
         conditions: conditionsToSave,
         procedures: procedureToSave ? [procedureToSave] : [],
         medications: medicationsToSave,
+        immunizations: [],
         allergies: [],
         provenance: aiDerivedProvenance
       });

src/app/benefits-demo/clinical-entry/clinical-entry.component.html

@@ -57,10 +57,18 @@
               </mat-form-field>
             </div>
           }
-          @if (entryType === 'condition' || entryType === 'procedure') {
+          @if (entryType === 'condition' || entryType === 'procedure' || entryType === 'immunization') {
             <div class="date-section">
               <mat-form-field appearance="outline">
-                <mat-label>{{ entryType === 'condition' ? 'Condition date' : 'Procedure date' }}</mat-label>
+                <mat-label>
+                  @if (entryType === 'condition') {
+                    Condition date
+                  } @else if (entryType === 'procedure') {
+                    Procedure date
+                  } @else {
+                    Immunization date
+                  }
+                </mat-label>
                 <input
                   matInput
                   [matDatepicker]="clinicalDatePicker"
@@ -125,6 +133,18 @@
             </mat-form-field>
           </div>
         }
+        @if (entryType === 'immunization') {
+          <div class="dosage-row">
+            <mat-form-field appearance="outline">
+              <mat-label>Immunization status</mat-label>
+              <mat-select [(ngModel)]="immunizationStatus">
+                <mat-option value="completed">Completed</mat-option>
+                <mat-option value="not-done">Not done</mat-option>
+                <mat-option value="entered-in-error">Entered in error</mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+        }
         <div class="action-section">
           <button mat-flat-button color="accent" (click)="addItem()" [disabled]="!selectedConcept || loading || saving">
             <span class="entry-button-label">

src/app/benefits-demo/clinical-entry/clinical-entry.component.ts

@@ -1,9 +1,9 @@
 import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { PatientService } from '../../services/patient.service';
 import { TerminologyService } from '../../services/terminology.service';
-import type { Condition, MedicationStatement, Procedure } from '../../model';
+import type { Condition, Immunization, MedicationStatement, Procedure } from '../../model';
 
-export type ClinicalEntryType = 'condition' | 'procedure' | 'medication';
+export type ClinicalEntryType = 'condition' | 'procedure' | 'medication' | 'immunization';
 
 @Component({
   selector: 'app-clinical-entry',
@@ -30,6 +30,7 @@ export class ClinicalEntryComponent implements AfterViewInit {
   medicationDoseUnit: string = '';
   medicationPeriod: number | null = null;
   medicationPeriodUnit: 'h' | 'd' | 'wk' = 'h';
+  immunizationStatus: Immunization['status'] = 'completed';
   loading = false;
   showAddForm = false;
   readonly medicationDoseUnitOptions = ['tablet', 'capsule', 'drop', 'puff', 'mL', 'mg', 'g', 'unit'];
@@ -50,6 +51,11 @@ export class ClinicalEntryComponent implements AfterViewInit {
       ecl: '< 373873005 |Pharmaceutical / biologic product| : 762949000 |Has precise active ingredient (attribute)| = *', 
       title: 'Search for medication...',
       placeholder: 'Enter medication name...'
+    },
+    immunization: {
+      ecl: '< 787859002 |Vaccine product (medicinal product)|',
+      title: 'Search for vaccine...',
+      placeholder: 'Enter vaccine name...'
     }
   };
 
@@ -66,7 +72,8 @@ export class ClinicalEntryComponent implements AfterViewInit {
     const titles = {
       condition: 'Add Condition',
       procedure: 'Add Procedure', 
-      medication: 'Add Medication'
+      medication: 'Add Medication',
+      immunization: 'Add Immunization'
     };
     return titles[this.entryType];
   }
@@ -119,6 +126,9 @@ export class ClinicalEntryComponent implements AfterViewInit {
           case 'medication':
             await this.addMedication();
             break;
+          case 'immunization':
+            await this.addImmunization();
+            break;
         }
       } finally {
         setTimeout(() => {
@@ -183,6 +193,22 @@ export class ClinicalEntryComponent implements AfterViewInit {
     this.itemAdded.emit(newMedication);
   }
 
+  private async addImmunization() {
+    const newImmunization: Immunization = this.patientService.createImmunizationFromClinicalEntryConcept(
+      this.patientId,
+      {
+        code: this.selectedConcept.code,
+        display: this.selectedConcept.display
+      },
+      {
+        occurrenceDateTime: this.getEntryDateValue(),
+        status: this.immunizationStatus
+      }
+    );
+
+    this.itemAdded.emit(newImmunization);
+  }
+
   resetAndCloseForm(): void {
     this.resetForm();
   }
@@ -196,6 +222,7 @@ export class ClinicalEntryComponent implements AfterViewInit {
     this.medicationDoseUnit = '';
     this.medicationPeriod = null;
     this.medicationPeriodUnit = 'h';
+    this.immunizationStatus = 'completed';
     this.showAddForm = false;
   }
 

src/app/benefits-demo/clinical-record/clinical-record.component.css

@@ -2201,6 +2201,18 @@
   background-color: var(--kind-medication);
 }
 
+.secondary-column-header {
+  margin-top: 12px;
+}
+
+.secondary-column-header h4 mat-icon {
+  color: #0d6efd;
+}
+
+.secondary-column-header .item-count {
+  background-color: #0d6efd;
+}
+
 /* Compact Clinical List Styles */
 .clinical-list.compact {
   padding: 0;

src/app/benefits-demo/clinical-record/clinical-record.component.html

@@ -372,6 +372,19 @@ <h5 class="summary-heading-medications">Medications</h5>
                 </ng-template>
               </div>
 
+              <div class="clinical-summary-section">
+                <h5 class="summary-heading-medications">Immunizations</h5>
+                <div class="clinical-summary-list" *ngIf="immunizations.length > 0; else noImmunizations">
+                  <div class="clinical-summary-item"
+                      *ngFor="let immunization of getSortedImmunizations()">
+                    <div class="item-name">{{ immunization.vaccineCode.text || immunization.vaccineCode.coding?.[0]?.display }}</div>
+                  </div>
+                </div>
+                <ng-template #noImmunizations>
+                  <div class="no-clinical-data">No immunizations recorded</div>
+                </ng-template>
+              </div>
+
               <div class="clinical-summary-section">
                 <h5 class="summary-heading-allergies">Allergic to:</h5>
                 <div class="clinical-summary-list" *ngIf="allergies.length > 0; else noAllergies">
@@ -414,6 +427,7 @@ <h5>CDS</h5>
             [conditions]="conditions"
             [procedures]="procedures" 
             [medications]="medications"
+            [immunizations]="immunizations"
             [allergies]="allergies"
             [encounters]="encounters">
           </app-clinical-timeline>
@@ -438,6 +452,7 @@ <h5>CDS</h5>
                   [conditions]="conditions"
                   [procedures]="procedures"
                   [medications]="medications"
+                  [immunizations]="immunizations"
                   [allergies]="allergies"
                   (openProblemsList)="selectClinicalView('problems')">
                 </app-problems-list-simplified>
@@ -463,6 +478,7 @@ <h5>CDS</h5>
                   [conditions]="conditions"
                   [procedures]="procedures"
                   [medications]="medications"
+                  [immunizations]="immunizations"
                   [allergies]="allergies"
                   (openProblemsList)="selectClinicalView('problems')">
                 </app-problems-list-simplified>
@@ -512,6 +528,15 @@ <h3>Add Problem</h3>
                             <mat-icon>medication</mat-icon>
                             Add Medication
                           </button>
+                          <button mat-raised-button
+                                  color="primary"
+                                  (click)="toggleImmunizationEntry()"
+                                  [disabled]="isProcessingNewEvent"
+                                  class="entry-toggle-button medication-button"
+                                  [class.active]="immunizationEntry?.showAddForm">
+                            <mat-icon>vaccines</mat-icon>
+                            Add Immunization
+                          </button>
                         </div>
                       </div>
 
@@ -548,6 +573,16 @@ <h3>Add Problem</h3>
                           (itemAdded)="onMedicationAdded($event)"
                           (formOpened)="onClinicalEntryFormOpened($event)">
                         </app-clinical-entry>
+
+                        <app-clinical-entry
+                          #immunizationEntry
+                          [patientId]="patient.id"
+                          entryType="immunization"
+                          [hideButton]="true"
+                          [saving]="savingEntryType === 'immunization'"
+                          (itemAdded)="onImmunizationAdded($event)"
+                          (formOpened)="onClinicalEntryFormOpened($event)">
+                        </app-clinical-entry>
                       </div>
                     </div>
 
@@ -690,7 +725,7 @@ <h4><mat-icon>healing</mat-icon> Procedures</h4>
                           <h4><mat-icon>medication</mat-icon> Medications</h4>
                           <span class="item-count">{{ medications.length }}</span>
                         </div>
-                          <div class="clinical-list compact" *ngIf="medications.length > 0; else noMedications">
+                        <div class="clinical-list compact" *ngIf="medications.length > 0; else noMedications">
                           <div class="clinical-item compact" *ngFor="let medication of getSortedMedications()">
                             <div class="item-header compact">
                               <span class="item-title compact">{{ medication.medicationCodeableConcept?.text }}</span>
@@ -728,6 +763,38 @@ <h4><mat-icon>medication</mat-icon> Medications</h4>
                         <ng-template #noMedications>
                           <div class="no-clinical-data compact">No medications recorded</div>
                         </ng-template>
+
+                        <div class="column-header secondary-column-header">
+                          <h4><mat-icon>vaccines</mat-icon> Immunizations</h4>
+                          <span class="item-count">{{ immunizations.length }}</span>
+                        </div>
+                        <div class="clinical-list compact" *ngIf="immunizations.length > 0; else noImmunizationsList">
+                          <div class="clinical-item compact" *ngFor="let immunization of getSortedImmunizations()">
+                            <div class="item-header compact">
+                              <span class="item-title compact">{{ immunization.vaccineCode.text || immunization.vaccineCode.coding?.[0]?.display }}</span>
+                              <div class="item-header-actions compact">
+                                <button mat-icon-button
+                                        class="delete-button compact"
+                                        (click)="deleteImmunization(immunization.id)"
+                                        title="Delete immunization">
+                                  <mat-icon>delete_outline</mat-icon>
+                                </button>
+                              </div>
+                            </div>
+                            <div class="item-details compact inline">
+                              <span class="item-concept-id compact" *ngIf="immunization.vaccineCode.coding?.[0]?.code">
+                                {{ immunization.vaccineCode.coding?.[0]?.code }}
+                              </span>
+                              <span class="item-status compact">{{ immunization.status }}</span>
+                              <span class="item-status compact" *ngIf="immunization.occurrenceDateTime">
+                                {{ immunization.occurrenceDateTime | date:'MMM d, y' }}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <ng-template #noImmunizationsList>
+                          <div class="no-clinical-data compact">No immunizations recorded</div>
+                        </ng-template>
                       </div>
                     </div>
             </div>
@@ -809,6 +876,7 @@ <h4><mat-icon>receipt_long</mat-icon> Saved Orders</h4>
                   [conditions]="conditions"
                   [procedures]="procedures"
                   [medications]="medications"
+                  [immunizations]="immunizations"
                   [allergies]="allergies"
                   (openProblemsList)="selectClinicalView('problems')">
                 </app-problems-list-simplified>
@@ -831,6 +899,7 @@ <h4><mat-icon>receipt_long</mat-icon> Saved Orders</h4>
                   [conditions]="conditions"
                   [procedures]="procedures"
                   [medications]="medications"
+                  [immunizations]="immunizations"
                   [allergies]="allergies"
                   (openProblemsList)="selectClinicalView('problems')">
                 </app-problems-list-simplified>