Add IPS actions and FHIR summary support checks

Author: alopezo

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

@@ -77,7 +77,12 @@ <h2>
               </span>
               <span class="backend-status-inline">
                 @if (isFhirMode()) {
-                  <span class="backend-chip">FHIR mode</span>
+                  <span
+                    class="backend-chip"
+                    [matTooltip]="currentFhirServer"
+                    matTooltipPosition="above">
+                    FHIR mode
+                  </span>
                   <button
                     mat-icon-button
                     type="button"

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

@@ -283,7 +283,7 @@ export class BenefitsDemoComponent implements OnInit, OnDestroy {
   }
 
   isPatientTotalLoading(): boolean {
-    return this.isFhirMode() && this.patientPagination.total === null;
+    return this.isFhirMode() && this.patientPagination.loading && this.patientPagination.total === null;
   }
 
   private async runRemotePatientSearch(term: string, requestId: number): Promise<void> {

src/app/benefits-demo/fhir-data/fhir-data.component.css

@@ -87,13 +87,38 @@
   background: #e9f2ff;
 }
 
+.resource-item-ips {
+  background: linear-gradient(180deg, #f7fbff 0%, #edf6ff 100%);
+  box-shadow: inset 0 0 0 1px #d7e7fb;
+}
+
+.resource-item-ips:hover {
+  background: linear-gradient(180deg, #f2f8ff 0%, #e6f2ff 100%);
+}
+
 .resource-item-label {
   font-size: 0.8rem;
   color: #253648;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.resource-item-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: #d7ecff;
+  color: #15558b;
+  font-size: 0.66rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
 }
 
 .resource-item-subtitle {
@@ -115,12 +140,57 @@
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px solid #e5edf7;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.browser-action-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  text-align: center;
 }
 
+.ips-summary-button,
 .delete-all-events-button {
   width: 100%;
   justify-content: center;
-  gap: 6px;
+}
+
+.action-button-tooltip-wrapper {
+  display: block;
+  width: 100%;
+}
+
+.ips-summary-button .mdc-button__label,
+.delete-all-events-button .mdc-button__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.browser-action-label mat-icon {
+  flex: 0 0 auto;
+}
+
+.fhir-action-spinner {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid rgba(90, 102, 115, 0.24);
+  border-top-color: #7b8794;
+  animation: fhir-action-spin 0.85s linear infinite;
+  flex: 0 0 auto;
+}
+
+@keyframes fhir-action-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .resource-viewer {

src/app/benefits-demo/fhir-data/fhir-data.component.html

@@ -22,8 +22,12 @@
             class="resource-item"
             *ngFor="let item of group.items"
             [class.active]="isSelected(item)"
+            [class.resource-item-ips]="isIpsSummaryItem(item)"
             (click)="selectItem(item)">
-            <span class="resource-item-label">{{ item.label }}</span>
+            <span class="resource-item-label">
+              {{ item.label }}
+              <span *ngIf="isIpsSummaryItem(item)" class="resource-item-badge">IPS</span>
+            </span>
             <span class="resource-item-subtitle">{{ item.subtitle }}</span>
           </button>
         </div>
@@ -35,11 +39,52 @@
     </ng-container>
 
     <div class="browser-actions">
+      <button
+        mat-stroked-button
+        color="primary"
+        (click)="requestLocalIps()"
+        [disabled]="isLocalIpsActionDisabled()"
+        [matTooltip]="getLocalIpsButtonTooltip()"
+        class="ips-summary-button">
+        <span class="browser-action-label">
+          @if (isGeneratingLocalIps) {
+            <span class="inline-button-spinner fhir-action-spinner" aria-hidden="true"></span>
+          } @else {
+            <mat-icon>description</mat-icon>
+          }
+          <span>{{ isGeneratingLocalIps ? 'Generating local IPS...' : 'Generate Local IPS' }}</span>
+        </span>
+      </button>
+      <span
+        class="action-button-tooltip-wrapper"
+        [matTooltip]="getServerIpsButtonTooltip()">
+        <button
+          mat-stroked-button
+          color="accent"
+          (click)="requestServerIpsSummary()"
+          [disabled]="isServerIpsActionDisabled()"
+          class="ips-summary-button">
+          <span class="browser-action-label">
+            @if (isLoadingServerSummary || (isFhirMode() && isCheckingIpsSupport)) {
+              <span class="inline-button-spinner fhir-action-spinner" aria-hidden="true"></span>
+            } @else {
+              <mat-icon>cloud_sync</mat-icon>
+            }
+            <span>{{
+              isLoadingServerSummary
+                ? 'Requesting IPS from Server...'
+                : (isFhirMode() && isCheckingIpsSupport)
+                  ? 'Checking IPS support...'
+                  : 'Request IPS Generation to Server'
+            }}</span>
+          </span>
+        </button>
+      </span>
       <button
         mat-stroked-button
         color="warn"
         (click)="requestDeleteAllEvents()"
-        [disabled]="isDeletingEvents"
+        [disabled]="isDeletingEvents || isGeneratingLocalIps || isLoadingServerSummary"
         title="Delete all clinical events for this patient"
         class="delete-all-events-button">
         <mat-icon>delete_sweep</mat-icon>