fix : sidebar updated without error handiling and raceno popup fix

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

@@ -384,6 +384,13 @@
   color: #2980b9;
 }
 
+.modal-options {
+  flex: 1;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  max-height: calc(500px - 120px); /* Adjust based on header/footer padding */
+}
+
 .modal-option {
   padding: 10px;
   margin-bottom: 5px;
@@ -391,6 +398,7 @@
   background: #f0f0f0;
   cursor: pointer;
   transition: background 0.3s ease;
+  padding-left: 20px; /* Indent for better readability */
 }
 
 .modal-option:hover {

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

@@ -278,12 +278,14 @@
 <div class="modal-overlay" *ngIf="showRaceModal" (click)="closeModals()">
   <div class="modal-box" (click)="$event.stopPropagation()">
     <h5>Select Race</h5>
-    <div
+    <div class="modal-options">
-      class="modal-option"
+      <div
-      *ngFor="let races of raceCardData.raceVenueRaces.races; let i = index"
+        class="modal-option"
-      (click)="selectRace(i + 1)"
+        *ngFor="let race of raceCardData.raceVenueRaces.races; let i = index"
-    >
+        (click)="selectRace(i + 1)"
-      Race {{ i + 1 }}
+      >
+        Race {{ i + 1 }}
+      </div>
     </div>
   </div>
 </div>

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

@@ -517,3 +517,15 @@ h4{
   font-weight:normal;
 }
 
+.withdraw-balanace{
+
+  color: black;
+  background-color: #bdc3c7;
+  height: 4rem;
+  margin-bottom: 0.5rem;
+}
+
+strong{
+  padding-left: 2rem;
+  margin-top: 2rem;
+}

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

@@ -103,7 +103,7 @@
       <div class="deposit-numpad-section">
         <div class="deposit-balance-container">
           <div class="deposit-balance">
-            <strong>Balance: ₹0.00</strong>
+           <strong>Balance: ₹{{ balance | number:'1.0-2' }}</strong>
           </div>
         </div>
 
@@ -177,8 +177,19 @@
         />
       </div>
  
+          
+       
       <!-- Right Side: Numpad -->
       <div class="withdraw-numpad">
+        <div class="deposit-balance-container">
+          <div class="deposit-balance">
+        <strong>Balance: ₹{{ balance | number:'1.0-2' }}</strong>
+
+
+
+
+          </div>
+        </div>
         <div class="row">
           <button (click)="onNumpadClick('0', 'withdraw')">0</button>
           <button class="back-btn" (click)="onBackspace('withdraw')">

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

@@ -34,6 +34,9 @@ export class SidebarComponent {
   withdrawAmount = '';
   withdrawWarning = '';
   showViewRc: boolean = false;
+  balance: number = 0;
+  balanceWithdraw: number = 0;
+  balanceDeposit: number = 0;
 
   // Modal handlers...
   openCancelPopup() {
@@ -70,6 +73,47 @@ cancelWarning: string = ''; // For showing inline warnings
 
 // //--------------------------------COMPLETED THE CANCEL PRINT ---------------------------------------
 //--------------------------------------- UPDATED CANCEL PRINT -------------------------------------------
+// Recalculate withdraw, deposit and combined balance
+updateAllBalances() {
+  // withdraw total
+  let withdrawList: any[] = [];
+  try {
+    withdrawList = JSON.parse(localStorage.getItem("WithdrawHistory") || '[]');
+    if (!Array.isArray(withdrawList)) withdrawList = [];
+  } catch (err) {
+    console.warn("updateAllBalances: could not parse WithdrawHistory:", err);
+    withdrawList = [];
+  }
+
+  this.balanceWithdraw = withdrawList.reduce((sum: number, item: any) => {
+    const amt = (item && (item.fAmt ?? item.Famt ?? item.amount)) || 0;
+    return sum + (Number(amt) || 0);
+  }, 0);
+
+  // deposit total
+  let depositList: any[] = [];
+  try {
+    depositList = JSON.parse(localStorage.getItem("DepositHistory") || '[]');
+    if (!Array.isArray(depositList)) depositList = [];
+  } catch (err) {
+    console.warn("updateAllBalances: could not parse DepositHistory:", err);
+    depositList = [];
+  }
+
+  this.balanceDeposit = depositList.reduce((sum: number, item: any) => {
+    const amt = (item && (item.fAmt ?? item.Famt ?? item.amount)) || 0;
+    return sum + (Number(amt) || 0);
+  }, 0);
+
+  // Combined balance = totalWithdrawn - totalDeposited
+  this.balance = (this.balanceWithdraw || 0) - (this.balanceDeposit || 0);
+
+  console.log("Balances updated:", {
+    balanceWithdraw: this.balanceWithdraw,
+    balanceDeposit: this.balanceDeposit,
+    balance: this.balance
+  });
+}
 
 
 
@@ -433,12 +477,56 @@ async printDeposit() {
     console.log("📩 Deposit API response JSON:", json);
 
     // Save only the response
-    try {
+    // try {
-      localStorage.setItem("deposit", JSON.stringify(json));
+    //   localStorage.setItem("deposit", JSON.stringify(json));
-      console.log("[localStorage] saved deposit response only");
+    //   console.log("[localStorage] saved deposit response only");
-    } catch (e) {
+    // } catch (e) {
-      console.warn("⚠️ Failed to save deposit to localStorage:", e);
+    //   console.warn("⚠️ Failed to save deposit to localStorage:", e);
-    }
+    // }
+console.log("📩 Deposit API response JSON:", json);
+
+// Save full raw response if you want
+try {
+  localStorage.setItem("deposit", JSON.stringify(json));
+  console.log("[localStorage] saved full deposit response");
+} catch (e) {
+  console.warn("⚠️ Failed to save full deposit response to localStorage:", e);
+}
+
+// Save parsed bwd object into DepositHistory and Depositdata
+try {
+  const bwd = json.bwd || {};
+
+  // Load existing history safely
+  let depositList: any[] = [];
+  try {
+    depositList = JSON.parse(localStorage.getItem("DepositHistory") || '[]');
+    if (!Array.isArray(depositList)) depositList = [];
+  } catch (err) {
+    console.warn("Could not parse DepositHistory, resetting to empty array:", err);
+    depositList = [];
+  }
+
+  // Add this new deposit
+  depositList.push(bwd);
+
+  // Save back
+  localStorage.setItem("DepositHistory", JSON.stringify(depositList));
+
+  // Also keep last deposit in Depositdata if you still need it
+  localStorage.setItem("Depositdata", JSON.stringify(bwd));
+
+  console.log("[localStorage] updated DepositHistory (count):", depositList.length, depositList);
+  console.log("[localStorage] saved latest Depositdata:", bwd);
+
+  // Immediately recalc deposit balance so UI updates
+  // Immediately recalc balances so UI updates
+this.updateAllBalances();
+
+
+} catch (e) {
+  console.warn("⚠️ Failed to save deposit data to localStorage:", e);
+}
 
     if (json.ok === false) {
       console.error("❌ Deposit API returned ok: false -", json.error || json);
@@ -561,7 +649,30 @@ withdrawBtMake = "I" ;
 ngOnInit() {
   this.userName = localStorage.getItem('userName') || '';
   this.btid = localStorage.getItem('btid'); // <- pulled from localStorage like your navbar
-  // any other init code...
+    this.updateAllBalances();
+}
+
+
+updateBalance() {
+  let withdrawList: any[] = [];
+  try {
+    withdrawList = JSON.parse(localStorage.getItem("WithdrawHistory") || '[]');
+    if (!Array.isArray(withdrawList)) withdrawList = [];
+  } catch (err) {
+    console.warn("updateBalance: could not parse WithdrawHistory:", err);
+    withdrawList = [];
+  }
+
+  console.log("updateBalance: withdrawList:", withdrawList);
+
+  this.balance = withdrawList.reduce((sum: number, item: any) => {
+    // item may be the bwd object; ensure fAmt exists and is numeric
+    const amt = (item && (item.fAmt ?? item.Famt ?? item.amount)) || 0;
+    const n = Number(amt) || 0;
+    return sum + n;
+  }, 0);
+
+  console.log("updateBalance: computed balance =", this.balance);
 }
 
 //---------------------------------------PRINT WITHDRAW STARTS HERE --------------------------------------------------------
@@ -616,15 +727,52 @@ async printWithdraw() {
     }
 
     const json = await resp.json();
-    console.log("📩 Withdraw API response JSON:", json);
+    // console.log("📩 Withdraw API response JSON:", json);
+
+    // // Persist only the response (similar to payout)
+    // try {
+    //   localStorage.setItem("withdraw", JSON.stringify(json));
+    //   console.log("[localStorage] saved withdraw response only");
+    // } catch (e) {
+    //   console.warn("⚠️ Failed to save withdraw to localStorage:", e);
+    // }
+    // After const json = await resp.json();
+    // Save full response (already there)
+try {
+  const bwd = json.bwd || {};
+
+  // Load existing history safely
+  let withdrawList: any[] = [];
+  try {
+    withdrawList = JSON.parse(localStorage.getItem("WithdrawHistory") || '[]');
+    if (!Array.isArray(withdrawList)) withdrawList = [];
+  } catch (err) {
+    console.warn("Could not parse WithdrawHistory, resetting to empty array:", err);
+    withdrawList = [];
+  }
+
+  // Add this new withdraw
+  withdrawList.push(bwd);
+
+  // Save back
+  localStorage.setItem("WithdrawHistory", JSON.stringify(withdrawList));
+
+  // Also keep last withdraw in Withdrawdata if you still need it
+  localStorage.setItem("Withdrawdata", JSON.stringify(bwd));
+
+  console.log("[localStorage] updated WithdrawHistory (count):", withdrawList.length, withdrawList);
+  console.log("[localStorage] saved latest Withdrawdata:", bwd);
+
+  // Immediately recalc balance so UI updates
+  // Immediately recalc balances so UI updates
+this.updateAllBalances();
+
+} catch (e) {
+  console.warn("⚠️ Failed to save withdraw data to localStorage:", e);
+}
+
+
 
-    // Persist only the response (similar to payout)
-    try {
-      localStorage.setItem("withdraw", JSON.stringify(json));
-      console.log("[localStorage] saved withdraw response only");
-    } catch (e) {
-      console.warn("⚠️ Failed to save withdraw to localStorage:", e);
-    }
 
     // If backend uses ok:false semantics
     if (json.ok === false) {