feat : added popup to PR (no logic added)

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.css

@@ -627,3 +627,59 @@ button.ready-to-print {
   border-color: #ccc;
   opacity: 0.7;
 }
+.pool-replace-modal {
+  display: none; /* Controlled by [style.display] binding */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
+  z-index: 1000;
+}
+
+.pool-replace-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  padding: 20px;
+  border-radius: 5px;
+  width: 700px;
+  /* height: 400px; */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.pool-replace-header {
+  display: flex;
+  /* justify-content: space-between; */
+  justify-content: space-evenly;
+  margin-left: -35%;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.close-btn {
+  cursor: pointer;
+  font-size: 30px;
+}
+
+.pool-replace-body {
+  margin-bottom: 15px;
+  margin-left: 26%;
+}
+
+.pool-replace-body button {
+  margin: 5px;
+}
+
+.pool-replace-footer {
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+}
+.pool-replace-btn{
+  background-color: #125cac;
+  color: white;
+}

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html

@@ -9,13 +9,13 @@
       <div class="d-flex flex-wrap justify-content-center gap-2 first">
         <button class="btn btn-dark one" (click)="openCalculator()">CALC</button>
         <button class="btn btn-dark two" (click)="erase()">ERASE</button>
-<button
+        <button
           class="btn btn-secondary three"
           (click)="toggleBoxMode()"
           [disabled]="isBoxToggleDisabled"
->
+        >
           BOX
-</button>
+        </button>
 
         <!-- ✅ FIELD Button -->
         <button class="btn btn-field" [disabled]="!canUseField()" (click)="openFieldModal()">FIELD</button>
@@ -36,9 +36,8 @@
 
         <button class="btn btn-danger btn-bkp" *ngIf="showBackspace" (click)="removeLastNumber()">BKP</button>
 
-
         <button class="btn btn-dark">CLEAR</button>
-        <button class="btn btn-dark">PR</button>
+        <button class="btn btn-info pool-replace-btn" (click)="openPoolReplaceModal()">PR</button>
       </div>
     </div>
   </div>
@@ -182,4 +181,29 @@
     </div>
   </div>
 
+ <!-- 🟩 POOL REPLACE Modal -->
+<div
+  id="poolReplaceModal"
+  class="pool-replace-modal"
+  [style.display]="poolReplaceOpen ? 'block' : 'none'"
+  (click)="closePoolReplaceModal()"
+>
+  <div class="pool-replace-content" (click)="$event.stopPropagation()">
+    <div class="pool-replace-header">
+      <span class="close-btn" (click)="closePoolReplaceModal()">&times;</span>
+      <h5>POOL REPLACE</h5>
+    </div>
+    <div class="pool-replace-body">
+      <p>Select an option to replace the pool:</p>
+      <button class="btn btn-light">WIN</button>
+      <button class="btn btn-light">SHP</button>
+      <button class="btn btn-light">THP</button>
+      <button class="btn btn-light">PLC</button>
+      <button class="btn btn-light">SHW</button>
+    </div>
+    <div class="pool-replace-footer">
+      <button class="btn btn-secondary" (click)="closePoolReplaceModal()">Cancel</button>
+      <button class="btn btn-primary">Confirm</button>
+    </div>
+  </div>
 </div>

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts

@@ -57,6 +57,9 @@ export class TouchPadMenuComponent implements OnInit {
   fieldInput: string = '';
   fieldFEntered = false;
 
+  // POOL REPLACE modal
+  poolReplaceOpen = false;
+
   constructor(private selectionService: SelectionService) {}
 
   ngOnInit() {
@@ -462,7 +465,8 @@ export class TouchPadMenuComponent implements OnInit {
       default: return 3;
     }
   }
-private handleFieldForSpecialLabels() {
+
+  private handleFieldForSpecialLabels() {
     if (!this.selectedLabel) return;
 
     if (this.selectedLabel === 'FOR' || this.selectedLabel === 'QUI') {
@@ -508,9 +512,9 @@ private handleFieldForSpecialLabels() {
         });
       }
     }
-}
+  }
 
-  // Calculator and Field Modal methods (unchanged)
+  // Calculator and Field Modal methods
   openCalculator() { this.calculatorOpen = true; this.calcDisplay = ''; }
   closeCalculator() { this.calculatorOpen = false; }
   press(val: string) { if (this.calcDisplay === 'Error') this.calcDisplay = ''; this.calcDisplay += val; }
@@ -555,7 +559,8 @@ private handleFieldForSpecialLabels() {
       this.fieldInput = '';
       this.fieldFEntered = false;
     }
-}
+  }
+
   closeFieldModal() {
     this.fieldModalOpen = false;
   }
@@ -635,4 +640,12 @@ private handleFieldForSpecialLabels() {
     }
     this.closeFieldModal();
   }
+
+  openPoolReplaceModal() {
+    this.poolReplaceOpen = true;
+  }
+
+  closePoolReplaceModal() {
+    this.poolReplaceOpen = false;
+  }
 }