fix: WEB-79 Grey out "Manage Surveys" (#2342)

* Run prettier

* Resolve merge conflict in .env.ts

---------

Co-authored-by: Victor Romero <victor.romero@fintecheando.mx>
Co-authored-by: jc-on-fire <147938885+jc-on-fire@users.noreply.github.com>

src/app/system/system.component.html

@@ -149,11 +149,11 @@
             </p>
           </mat-list-item>
 
-          <mat-list-item [routerLink]="['surveys']">
+          <mat-list-item [ngClass]="{ 'disabled-item': isDisabled }">
-            <mat-icon matListIcon [routerLink]="['surveys']">
+            <mat-icon matListIcon>
               <fa-icon icon="file-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine [routerLink]="['surveys']">{{ 'labels.heading.Manage Surveys' | translate }}</h4>
+            <h4 matLine>{{ 'labels.heading.Manage Surveys' | translate }}</h4>
             <fa-icon
               (click)="arrowBooleansToggle(6); $event.stopPropagation()"
               *ngIf="!arrowBooleans[6]"
@@ -167,7 +167,7 @@
               size="md"
             ></fa-icon>
             <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['surveys']">
-              {{ 'labels.text.Manage your Services' | translate }}
+              {{ 'labels.text.Manage Surveys' | translate }}
             </p>
           </mat-list-item>
 

src/app/system/system.component.scss

@@ -0,0 +1,4 @@
+.disabled-item {
+  pointer-events: none; // Prevent clicks
+  opacity: 0.5; // Greyed out effect
+}

src/app/system/system.component.ts

@@ -41,6 +41,7 @@ export class SystemComponent implements AfterViewInit {
   /* Template for popover on manage reports */
   @ViewChild('templateManageReports') templateManageReports: TemplateRef<any>;
   // Initialize an array of 15 boolean values, all set to false
+  isDisabled: boolean = true;
   arrowBooleans: boolean[] = new Array(15).fill(false);
 
   /**