Fix : sidebar button enabling and disabling based on user inputs means functinal shcecking of fields is done

btc-UI/src/app/components/sidebar/sidebar.component.css

@@ -539,3 +539,19 @@ strong{
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+.deposit-print-btn[disabled]{
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.deposit-cancel-btn[disabled]{
+   opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.erase-btn[disabled],.withdraw-print-btn[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+

btc-UI/src/app/components/sidebar/sidebar.component.html

@@ -42,15 +42,13 @@
       <div class="modal-loading" *ngIf="loadingMessage">{{ loadingMessage }}</div>
     </div>
 
-    <!-- <div class="modal-footer">
+
-      <button class="cancel-btn" (click)="closeCancelPopup()">CANCEL</button>
-      <button class="print-btn" (click)="printTicketCancel()">PRINT</button>
-    </div> -->
     <div class="modal-footer">
-  <button class="cancel-btn" (click)="closeCancelPopup()">CANCEL</button>
+  <button class="cancel-btn" (click)="closeCancelPopup()" [disabled]="!!loadingMessage">CANCEL</button>
   <button class="print-btn"
           (click)="printTicketCancel()"
-          [disabled]="!!loadingMessage">PRINT</button>
+          [disabled]="!!loadingMessage"
+          [disabled]="!!loadingMessage || !( (ticketNo || '').trim() )">PRINT</button>
 </div>
   </div>
 </div>
@@ -67,26 +65,22 @@
         id="payoutTicketNo"
         class="modal-input"
         [(ngModel)]="payoutTicketNo"
-      />
+        (ngModelChange)="onPayoutTicketChange($event)"
+        maxlength="16"
+        />
     </div>
 
     <div class="warning-message" *ngIf="payoutWarning">{{ payoutWarning }}</div>
     <div class="modal-loading" *ngIf="loadingMessage">{{ loadingMessage }}</div>
-
-    <!-- <div class="modal-footer">
-      <button class="cancel-btn" (click)="closePayoutPopup()">CANCEL</button>
-      <button class="erase-btn" (click)="erasePayoutTicket()">ERASE</button>
-      <button class="print-btn" (click)="printPayoutTicket()">PRINT</button>
-    </div> -->
     <!-- inside PAY-OUT modal-footer -->
 <div class="modal-footer">
-  <button class="cancel-btn" (click)="closePayoutPopup()">CANCEL</button>
+  <button class="cancel-btn" (click)="closePayoutPopup()" [disabled]="!!loadingMessage">CANCEL</button>
   <button class="erase-btn" (click)="erasePayoutTicket()" [disabled]="!!loadingMessage">ERASE</button>
   <!-- safe: coerce to '' before trim -->
 <button
   class="print-btn"
   (click)="printPayoutTicket()"
-  [disabled]="!!loadingMessage || !( (payoutTicketNo || '') .trim() )"
+  [disabled]="!!loadingMessage || (payoutTicketNo?.length !== 16)"
 >
   PRINT
 </button>
@@ -95,7 +89,7 @@
   </div>
 </div>
 
-<!-- Deposit Modal -->
+<!-- ------------------------------------------DEPOSIT MODAL  ------------------------------------------------->
 <div class="deposit-modal-overlay" *ngIf="showDeposit">
   <div class="deposit-modal-box">
     <h3 class="deposit-modal-title">DEPOSIT</h3>
@@ -162,11 +156,21 @@
   </div>
 
     <div class="deposit-footer">
-      <button class="deposit-cancel-btn" (click)="closeDepositPopup()">
+      <button class="deposit-cancel-btn" (click)="closeDepositPopup()" [disabled]="!!loadingMessage">
         CANCEL
       </button>
-      <button class="deposit-print-btn" (click)="printDeposit()">PRINT</button>
+      <button class="deposit-print-btn" (click)="printDeposit()"
+       [disabled]="
+  !!loadingMessage ||
+  (depositOperatorId?.length !== 12) ||
+  (depositShroffId?.length !== 12) ||
+  !(depositAmount?.trim())
+"
+>
+       PRINT
+      </button>
     </div>
+    <div class="modal-loading" *ngIf="loadingMessage">{{ loadingMessage }}</div>
   </div>
 </div>
 
@@ -243,13 +247,20 @@
   </div>
 
     <div class="withdraw-footer">
-      <button class="withdraw-cancel-btn" (click)="closeWithdrawPopup()">
+      <button class="withdraw-cancel-btn" (click)="closeWithdrawPopup()" [disabled]="!!loadingMessage">
         CANCEL
       </button>
-      <button class="withdraw-print-btn" (click)="printWithdraw()">
+      <button class="withdraw-print-btn" (click)="printWithdraw()"
+      [disabled]="
+      !!loadingMessage ||
+      (withdrawOperatorId?.length !== 12) ||
+      (withdrawShroffId?.length !== 12) ||
+      !(withdrawAmount?.trim())
+    ">
         PRINT
       </button>
     </div>
+    <div class="modal-loading" *ngIf="loadingMessage">{{ loadingMessage }}</div>
   </div>
 </div>
 

btc-UI/src/app/components/sidebar/sidebar.component.ts

@@ -289,6 +289,19 @@ Original Total: ₹${cancelTicketData.totalAmount}
 payoutWarning = ''; // show GUI message when payout response is not as expected
 
 
+onPayoutTicketChange(value: string) {
+  if (value.length > 16) {
+    this.payoutTicketNo = value.slice(0, 16); // trim to 16
+  } else {
+    this.payoutTicketNo = value;
+  }
+
+  // if not exactly 16 chars, you can clear it completely:
+  if (this.payoutTicketNo.length !== 16) {
+    this.payoutTicketNo = '';
+  }
+}
+
 
 async printPayoutTicket() {
   console.log("🖨️ Print payout clicked");
@@ -471,7 +484,7 @@ async printDeposit() {
     btId: btid,
     btMake: btMake
   };
-
+  this.loadingMessage = 'Printing Deposit — please wait...';
   console.log("📡 Sending deposit API request:", apiPayload);
 
   try {
@@ -633,6 +646,9 @@ ${content}
     console.error("❌ Deposit API call failed:", err);
     this.depositWarning = '❌ Deposit API call failed. Please try again.';
   }
+  finally {
+    this.loadingMessage = ''; // ALWAYS clear loading message
+  }
 }
 //--------------------------------------PRINT DEPOSIT TICKET ENDS HERE -------------------------------------------------------------