Fixed : proper structure for payout and cancel then added the warnings for print buttons in sidebar

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

@@ -529,3 +529,8 @@ strong{
   padding-left: 2rem;
   margin-top: 2rem;
 }
+
+.modal-loading{
+  color: red;
+  font-weight: bold;
+}

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

@@ -39,12 +39,19 @@
        <div class="warning-message" *ngIf="cancelWarning">
         {{ cancelWarning }}
       </div>
+      <div class="modal-loading" *ngIf="loadingMessage">{{ loadingMessage }}</div>
     </div>
 
-    <div class="modal-footer">
+    <!-- <div class="modal-footer">
       <button class="cancel-btn" (click)="closeCancelPopup()">CANCEL</button>
       <button class="print-btn" (click)="printTicketCancel()">PRINT</button>
-    </div>
+    </div> -->
+    <div class="modal-footer">
+  <button class="cancel-btn" (click)="closeCancelPopup()">CANCEL</button>
+  <button class="print-btn"
+          (click)="printTicketCancel()"
+          [disabled]="!!loadingMessage">PRINT</button>
+</div>
   </div>
 </div>
 
@@ -62,7 +69,9 @@
         [(ngModel)]="payoutTicketNo"
       />
     </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>
@@ -231,63 +240,6 @@
 </div>
 
 
-
-<!-- View RC Modal -->
-<!-- <div class="viewrc-modal-overlay" *ngIf="showViewRc">
-  <div class="viewrc-modal-box">
-    <h3 class="viewrc-modal-title">VIEW RC</h3>
-    <div class="viewrc-modal-body">
-      <ng-container *ngIf="raceCardData && !raceCardData.error; else errorTpl">
-        <p class="top"><strong>📍 Venue:</strong> {{ raceCardData.Venue }}</p>
-        <p class="top"><strong>📅 Date:</strong> {{ raceCardData.date }}</p>
-
-        <div class="rc-table-container">
-          <h4>🏇 Race Lists</h4>
-          <table class="rc-table">
-            <thead>
-              <tr>
-                <th class="new">Races</th>
-                <th class="new">Race Numbers</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr *ngFor="let races of raceCardData.raceVenueRaces.races; let i = index">
-                <td class="table_col">Race {{ i + 1 }}</td>
-                <td class=" table_col1">{{ races.join('  , ') }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="rc-table-container" *ngIf="raceCardData.pools?.comboRaces">
-          <h4>🎯Races</h4>
-          <table class="rc-table">
-            <thead>
-              <tr>
-                <th class="new">Pool</th>
-                <th class="new">Races</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr *ngFor="let pool of objectKeys(raceCardData.pools.comboRaces)">
-                <td class="table_col">{{ pool }}</td>
-                <td class="table_col1">{{ raceCardData.pools.comboRaces[pool].join('  ,  ') }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </ng-container>
-
-      <ng-template #errorTpl>
-        <p class="error-text">❌ {{ raceCardData?.error }}</p>
-      </ng-template>
-    </div>
-
-    <div class="viewrc-modal-footer">
-      <button class="viewrc-cancel-btn" (click)="closeViewRcPopup()">CANCEL</button>
-    </div>
-  </div>
-</div> -->
 <div class="viewrc-modal-overlay" *ngIf="showViewRc">
   <div class="viewrc-modal-box">
     <h3 class="viewrc-modal-title">VIEW RC</h3>

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

@@ -38,6 +38,8 @@ export class SidebarComponent {
   balanceWithdraw: number = 0;
   balanceDeposit: number = 0;
 
+  loadingMessage: string = '';
+
   // Modal handlers...
   openCancelPopup() {
     this.cancelClick.emit();
@@ -66,6 +68,7 @@ export class SidebarComponent {
   }
 
  
+
 //--------------------------------------- UPDATED CANCEL PRINT -------------------------------------------
 
 cancelWarning: string = ''; // For showing inline warnings
@@ -118,9 +121,13 @@ updateAllBalances() {
 
 
 async printTicketCancel() {
+
+  this.cancelWarning = "Requested please wait";
   const enteredTicketNo = this.ticketNo?.trim();
   console.log('[STEP 1] Entered Ticket No:', enteredTicketNo);
   this.cancelWarning = '';
+  this.loadingMessage = 'Printing cancel ticket — please wait...';
+
 
   const localTicketsStr = localStorage.getItem('canceltickets');
   if (!localTicketsStr) {
@@ -166,7 +173,7 @@ async printTicketCancel() {
   this.btid = localStorage.getItem('btid'); 
   this.usrid = localStorage.getItem('userid');
   const userid = this.usrid ;
-  const btmake = 'I' ;
+  const btMake = 'I'
   console.log("empl id", this.usrid)
 
   try {
@@ -174,7 +181,7 @@ async printTicketCancel() {
       ticketNo: lastTicket.barcodeId,
       btId: this.btid,
       usrId: userid,
-      btMake: btmake
+      btMake: btMake
     };
 
     console.log("📡 Sending cancel request:", cancelReq);
@@ -255,6 +262,9 @@ Original Total: ₹${cancelTicketData.totalAmount}
     console.error("❌ Cancel API call failed:", e);
     this.cancelWarning = '❌ Cancel API call failed. Please try again.';
   }
+   finally {
+    this.loadingMessage = ''; // ALWAYS clear loading message
+  }
 }
 
 //-------------------------------- COMPLETED THE CANCEL PRINT WITH API CALL --------------------------------
@@ -283,7 +293,7 @@ payoutWarning = ''; // show GUI message when payout response is not as expected
 async printPayoutTicket() {
   console.log("🖨️ Print payout clicked");
   this.payoutWarning = '';
-
+  this.loadingMessage = 'Printing cancel ticket — please wait...';
   const ticketNo = this.payoutTicketNo?.toString().trim();
   if (!ticketNo) {
     console.warn("⚠️ No payout ticket number set.");
@@ -294,9 +304,8 @@ async printPayoutTicket() {
   const userName = localStorage.getItem('userName') || 'Unknown';
   this.btid = localStorage.getItem('btid'); 
   this.usrid = localStorage.getItem('userid');
-  const userid = this.usrid ;
+   const userid = this.usrid ;
-  console.log("empl id", this.usrid)
+   const btMake = 'I'
-  const btmake = 'I' ;
   // Prepare request payload
   const apiPayload = {
     ticketNo: ticketNo,
@@ -306,7 +315,7 @@ async printPayoutTicket() {
     moneyTyp: "C",
     btId: this.btid, // replace with dynamic btId if needed
     usrId: userid , // replace with dynamic usrId if needed
-    btMake: btmake
+    btMake: btMake
   };
 
   console.log("📡 Sending payout API request:", apiPayload);
@@ -409,6 +418,9 @@ Date        : ${new Date().toLocaleString()}
   } catch (err) {
     console.error("❌ Payout API call failed:", err);
     this.payoutWarning = '❌ Payout API call failed. Please try again.';
+  }
+     finally {
+    this.loadingMessage = ''; // ALWAYS clear loading message
   }
 }