searchable dropdown added

src/app/pages/auth/login/login.component.html

@@ -24,12 +24,12 @@
                        pack="eva"
                        [attr.aria-label]="showPassword ? 'hide password' : 'show password'">
               </nb-icon>
-              <ng-container nbInputErrorMessage>
+              <!-- <ng-container nbInputErrorMessage>
                 <div style="color:red" *ngIf="loginForm.get('password').hasError('required') && loginForm.get('password').touched">Password is required.</div>
                 <div style="color:#7c0e0e" *ngIf="!loginForm.get('password')?.errors?.required && (loginForm.get('password')?.errors?.pattern)">
                   Password length must be greater than or equal to 8, and the password must contain one or more uppercase, lowercase, numeric, and special characters.
                 </div>
-              </ng-container>
+              </ng-container> -->
             </nb-form-field>
           </div>
           <div class="form-group">
@@ -37,7 +37,7 @@
               <a class="forgot-password caption-2" routerLink="../request-password"  (click)="openForgot()">Forgot Password?</a>
             </span>
           </div>
-          <button type="submit"  style="    width: 95%;" [disabled]="!loginForm.valid" nbButton fullWidth status="success" size="large">Sign in</button>
+          <button type="submit"  style="    width: 95%;"  nbButton fullWidth status="success" size="large">Sign in</button>
         </form>
       </nb-card-body>
     </nb-card>

src/app/pages/customer/customer-form/customer-form.component.html

@@ -2,127 +2,128 @@
   <nb-card-header>{{heading}}</nb-card-header>
   <nb-card-body>
     <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
-    <div class="row show-grid">
+      <div class="row show-grid">
-    <div class="col-md-4 col-sm-12">
+        <div class="col-md-4 col-lg-4 col-sm-12">
-        <nb-form-field>
-        <label for="subject">Name:</label>
-        <input  formControlName="userName" nbInput id="userName"  [status]="userForm.get('userName').invalid && userForm.get('userName').touched? 'danger' : 'basic'" type="text">
-        <ng-container nbInputErrorMessage>
-        <div style="color:#7c0e0e" *ngIf="userForm.get('userName').hasError('required') && userForm.get('userName').touched">Name is required.</div>
-        </ng-container>
-        </nb-form-field>
-    </div>
-    <div class="col-md-4 col-sm-12">
-      <nb-form-field>
-          <label for="subject">E-mail:</label>
-          <input formControlName="email"  nbInput id="email" type="text"  [status]="userForm.get('email').invalid && userForm.get('email').touched? 'danger' : 'basic'" >
-          <ng-container nbInputErrorMessage>
-          <div style="color:#7c0e0e" *ngIf="userForm.get('email').hasError('required') && userForm.get('email').touched">Email is required.</div>
-          <div style="color:#7c0e0e" *ngIf="!userForm.get('email')?.errors?.required && (userForm.get('email')?.errors?.pattern)">
-          Please enter a valid email address
-          </div>
-          </ng-container>
-      </nb-form-field>
-    </div>
-    <div class="col-md-4 col-sm-12">
-        <nb-form-field  >
-        <label for="subject">Password:</label>
-        <input  formControlName="password" nbInput id="password" type="text" [status]="userForm.get('password').invalid && userForm.get('password').touched? 'danger' : 'basic'">
-
-        <ng-container nbInputErrorMessage>
-
-          <div style="color:#7c0e0e;font-size:small" *ngIf="!userForm.get('password')?.errors?.required &&  (userForm.get('password')?.errors?.pattern)">
-            Password length must be greater than or equal to 8
-          </div>
-
-        <!-- <div style="color:#7c0e0e" *ngIf="!userForm.get('password')?.errors?.required">
-        Password length must be greater than or equal to 8 and password must contain one or more uppercase , lowercase , numeric and special characters
-        </div> -->
-        <div style="color:#7c0e0e" *ngIf="userForm.get('password')?.invalid && (userForm.get('password')?.dirty || userForm.get('password')?.touched) && userForm.get('password')?.errors?.required">
-        Password is required
-        </div>
-        </ng-container>  
-
-        </nb-form-field> 
-    </div>
-    </div>
-    <div class="row show-grid">
-        <div class="col-md-4 col-sm-12">
-            <nb-form-field>
-            <label for="subject">Mobile No:</label>
-            <input  formControlName="mobileNo" nbInput id="mobileNo" type="text" [status]="userForm.get('mobileNo').invalid && userForm.get('mobileNo').touched? 'danger' : 'basic'">
-            <ng-container nbInputErrorMessage>
-            <div style="color:#7c0e0e" *ngIf="userForm.get('mobileNo').hasError('required') && userForm.get('mobileNo').touched">Mobile No is required.</div>
-
-
-            </ng-container>
-            </nb-form-field> 
-        </div>
-        <div class="col-md-4 col-sm-12">
-            <nb-form-field>
-            <label for="subject">Address</label>
-            <input  formControlName="address_1" nbInput id="address_1" type="text"  [status]="userForm.get('address_1').invalid && userForm.get('address_1').touched? 'danger' : 'basic'">
-            <ng-container nbInputErrorMessage>
-            <div style="color:#7c0e0e" *ngIf="userForm.get('address_1').hasError('required') && userForm.get('address_1').touched">Address is required.</div>
-
-
-            </ng-container>
-            </nb-form-field> 
-        </div> 
-        <div class="col-md-4 col-sm-12"> 
-        <nb-form-field>
-        <label for="subject">State:</label>
-        <input   formControlName="state" nbInput id="state" type="text"  [status]="userForm.get('state').invalid && userForm.get('state').touched? 'danger' : 'basic'">
-        <ng-container nbInputErrorMessage>
-        <div style="color:#7c0e0e" *ngIf="userForm.get('state').hasError('required') && userForm.get('state').touched">State is required.</div>
-        </ng-container>
-        </nb-form-field>  
-        </div>                
-    </div> 
-
-    <div class="row show-grid"  >
-      <div class="col-md-4 col-sm-12">
           <nb-form-field>
-          <label for="subject">City:</label>
+            <label for="subject">Name:</label>
-          <input  formControlName="city" nbInput id="city" type="text"  [status]="userForm.get('city').invalid && userForm.get('city').touched? 'danger' : 'basic'">
+            <input formControlName="userName" nbInput id="userName" [status]="userForm.get('userName').invalid && userForm.get('userName').touched ? 'danger' : 'basic'" type="text">
-          <ng-container nbInputErrorMessage>
+            <ng-container nbInputErrorMessage>
-          <div style="color:#7c0e0e" *ngIf="userForm.get('city').hasError('required') && userForm.get('city').touched">City is required.</div>
+              <div class="error-message" *ngIf="userForm.get('userName').hasError('required') && userForm.get('userName').touched">Name is required.</div>
-          </ng-container>
-          </nb-form-field> 
-      </div>
-          <div class="col-md-4 col-sm-12">
-            <nb-form-field>
-              <label for="subject">Pincode:</label>
-              <input  formControlName="pincode" nbInput id="pincode" type="text" [status]="userForm.get('pincode').invalid && userForm.get('pincode').touched? 'danger' : 'basic'">
-              <ng-container nbInputErrorMessage>
-              <div style="color:#7c0e0e" *ngIf="userForm.get('pincode').hasError('required') && userForm.get('pincode').touched">Pincode is required.</div>
-              <div style="color: #7c0e0e" *ngIf="userForm.get('pincode').hasError('pattern') && userForm.get('pincode').touched">Pincode must be a 6-digit number.</div>  
             </ng-container>
-              </nb-form-field> 
+          </nb-form-field>
+        </div>
+        <div class="col-md-4 col-lg-4 col-sm-12">
+          <nb-form-field>
+            <label for="subject">E-mail:</label>
+            <input formControlName="email" nbInput id="email" type="text" [status]="userForm.get('email').invalid && userForm.get('email').touched ? 'danger' : 'basic'">
+            <ng-container nbInputErrorMessage>
+              <div class="error-message" *ngIf="userForm.get('email').hasError('required') && userForm.get('email').touched">Email is required.</div>
+              <div class="error-message" *ngIf="!userForm.get('email')?.errors?.required && userForm.get('email')?.errors?.pattern">Please enter a valid email address</div>
+            </ng-container>
+          </nb-form-field>
+        </div>
+        <div class="col-md-4 col-lg-4 col-sm-12">
+          <nb-form-field>
+            <label for="subject">Password:</label>
+            <div *ngIf="action == 'Edit'">
+              <div *ngIf="!showPasswordField">
+                <a href="javascript:void(0)" (click)="togglePasswordField()">Change Password</a>
+              </div>
+            </div>
+            <div *ngIf="showPasswordField">
+              <input formControlName="password" nbInput id="password" autocomplete="off" type="text" [status]="userForm.get('password').invalid && userForm.get('password').touched ? 'danger' : 'basic'">
+              <nb-icon *ngIf="action == 'Edit'" (click)="togglePasswordField()" icon="close-outline" style="position: absolute; top: 8px; right: 10px;color: red;"></nb-icon>
+              <ng-container nbInputErrorMessage>
+                <div class="error-message" *ngIf="userForm.get('password')?.invalid && (userForm.get('password')?.dirty || userForm.get('password')?.touched) && userForm.get('password')?.errors?.required">Password is required</div>
+                <div class="error-message" *ngIf="!userForm.get('password')?.errors?.required && userForm.get('password')?.errors?.pattern">Invalid password format <nb-icon
+                  nbTooltip="Password length must be greater than or equal to 8 and password must contain one or more uppercase, lowercase, numeric, and special characters"
+                  nbTooltipStatus="info"
+                  icon="info-outline"
+                  class="icon-error"
+                  style="margin-left: 5px;margin-top: 10px;">
+                </nb-icon></div>
+              </ng-container>
+            </div>
+            
+          </nb-form-field>
+        </div>
+      </div>
+      <div class="row show-grid">
+        <div class="col-md-4 col-lg-4 col-sm-12">
+          <nb-form-field>
+            <label for="subject">Mobile No:</label>
+            <input formControlName="mobileNo" nbInput id="mobileNo" type="text" [status]="userForm.get('mobileNo').invalid && userForm.get('mobileNo').touched ? 'danger' : 'basic'">
+            <ng-container nbInputErrorMessage>
+              <div class="error-message" *ngIf="userForm.get('mobileNo').hasError('required') && userForm.get('mobileNo').touched">Mobile No is required.</div>
+            </ng-container>
+          </nb-form-field>
+        </div>
+        <div class="col-md-4 col-lg-4 col-sm-12">
+          <nb-form-field>
+            <label for="subject">Address</label>
+            <input formControlName="address_1" nbInput id="address_1" type="text" [status]="userForm.get('address_1').invalid && userForm.get('address_1').touched ? 'danger' : 'basic'">
+            <ng-container nbInputErrorMessage>
+              <div class="error-message" *ngIf="userForm.get('address_1').hasError('required') && userForm.get('address_1').touched">Address is required.</div>
+            </ng-container>
+          </nb-form-field>
+        </div>
+        <div class="col-md-4 col-lg-4 col-sm-12">
+          <nb-form-field>
+            <label for="subject">State:</label>
+            <input formControlName="state" nbInput id="state" type="text" [status]="userForm.get('state').invalid && userForm.get('state').touched ? 'danger' : 'basic'">
+            <ng-container nbInputErrorMessage>
+              <div class="error-message" *ngIf="userForm.get('state').hasError('required') && userForm.get('state').touched">State is required.</div>
+            </ng-container>
+          </nb-form-field>
+        </div>
+      </div>
+      <div class="row show-grid">
+        <div class="col-md-3 col-sm-12">
+          <nb-form-field>
+            <label for="subject">City:</label>
+            <input formControlName="city" nbInput id="city" type="text" [status]="userForm.get('city').invalid && userForm.get('city').touched ? 'danger' : 'basic'">
+            <ng-container nbInputErrorMessage>
+              <div class="error-message" *ngIf="userForm.get('city').hasError('required') && userForm.get('city').touched">City is required.</div>
+            </ng-container>
+          </nb-form-field>
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <nb-form-field>
+            <label for="subject">Pincode:</label>
+            <input formControlName="pincode" nbInput id="pincode" type="text" [status]="userForm.get('pincode').invalid && userForm.get('pincode').touched ? 'danger' : 'basic'">
+            <ng-container nbInputErrorMessage>
+              <div class="error-message" *ngIf="userForm.get('pincode').hasError('required') && userForm.get('pincode').touched">Pincode is required.</div>
+              <div class="error-message" *ngIf="userForm.get('pincode').hasError('pattern') && userForm.get('pincode').touched">Pincode must be a 6-digit number.</div>
+            </ng-container>
+          </nb-form-field>
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <nb-form-field>
+            <label for="subject">Customer Type:</label> <br />
+            <nb-select selected="Medical" formControlName="cusType" style="width: 100% !important;" [status]="userForm.get('cusType').invalid && userForm.get('cusType').touched ? 'danger' : 'basic'">
+              <nb-option value="Medical">Medical</nb-option>
+              <nb-option value="Industrial">Industrial</nb-option>
+            </nb-select>
+            <ng-container nbInputErrorMessage>
+              <div class="error-message" *ngIf="userForm.get('cusType').hasError('required') && userForm.get('cusType').touched">Customer Type is required.</div>
+            </ng-container>
+          </nb-form-field>
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <nb-form-field>
+            <label for="subject">GST No:</label>
+            <input formControlName="gst" nbInput id="gst" type="text">
+          </nb-form-field>
+        </div>
+      </div>
+      <nb-card-footer>
+        <div class="row">
+          <div class="col-md-12" style="text-align: end;">
+            <button class="cancel" nbButton status="danger" type="button" (click)="cancel()">Cancel</button>
+            <button nbButton status="success" [disabled]="!userForm.valid" type="submit">Submit</button>
           </div>
-    <div class="col-md-4 col-sm-12"> 
+        </div>
-      <nb-form-field>
+      </nb-card-footer>
-        <label for="subject">Customer Type:</label> <br />
-        <nb-select selected="Medical"  formControlName="cusType" style="width: 100% !important;"  [status]="userForm.get('cusType').invalid && userForm.get('cusType').touched? 'danger' : 'basic'">
-        <nb-option value="Medical">Medical</nb-option>
-        <nb-option value="Industrial">Industrial</nb-option>
-        </nb-select>
-        <ng-container nbInputErrorMessage>
-        <div style="color:#7c0e0e" *ngIf="userForm.get('cusType').hasError('required') && userForm.get('cusType').touched">Customer Type is required.</div>
-
-
-        </ng-container>
-        </nb-form-field> 
-    <!-- <nb-form-field>
-
-    </nb-form-field>   -->
-    </div>                
-</div>
-<nb-card-footer>
-  <button class="cancel" nbButton status="danger" type="button" (click)="cancel()">Cancel</button>
-  <button nbButton status="success" [disabled]="!userForm.valid" type="submit">Submit</button>
-  </nb-card-footer>
     </form>
   </nb-card-body>
-
 </nb-card>

src/app/pages/customer/customer-form/customer-form.component.scss

@@ -9,6 +9,33 @@
     margin-right: 1rem;
   }
 }
+.error-message {
+  color: #7c0e0e;
+  font-size: 10px;
+  word-wrap: break-word;
+  max-width: 250px; /* Adjust this value as needed */
+}
+
+nb-icon {
+  cursor: pointer;
+}
+
+.icon-error {
+  color: red !important;
+}
+
+@media (max-width: 767px) {
+  .show-grid .col-sm-12 {
+    padding: 0 15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .show-grid .col-md-4, .show-grid .col-md-3 {
+    padding: 0 15px;
+  }
+}
+
 .custom-dialog-class {
     width: 50%; /* Set the desired width here */
     height: 300px; /* Set the desired height here */
@@ -16,4 +43,17 @@
   .show-grid{
     margin-bottom: 2rem;
   }
+  .error-message-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .error-message {
+    color: #7c0e0e;
+  }
+  
+  .error-message.small {
+    font-size: 12px;
+  }
  

src/app/pages/customer/customer-form/customer-form.component.ts

@@ -12,6 +12,8 @@ export class CustomerFormComponent implements OnInit {
   data:any =[];
   userForm: FormGroup | any;  formData:any =[]
   heading:any =[];
+  action: any;
+  showPasswordField: boolean = false;
   constructor(private dialogRef: NbDialogRef<CustomerFormComponent> ,public _api:PageapiService,private dialogService: NbDialogService) {
 
   
@@ -20,6 +22,12 @@ export class CustomerFormComponent implements OnInit {
   ngOnInit() {
     console.log('dialogRef', this.dialogRef.componentRef.instance);
     let details:any = this.dialogRef.componentRef.instance
+    console.log('details',details)
+    this.action = details.action
+
+    if(this.action == 'Add'){
+      this.showPasswordField = !this.showPasswordField;
+    }
             
    this.heading =  details.title
 
@@ -42,6 +50,7 @@ export class CustomerFormComponent implements OnInit {
         password: new FormControl('', [Validators.required,Validators.pattern(
           '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,16}$'
         )]),
+        gst:  new FormControl(''),
         address_1:  new FormControl('', [Validators.required]),
         state:  new FormControl('', [Validators.required]),
         city:  new FormControl('', [Validators.required]),
@@ -63,6 +72,36 @@ export class CustomerFormComponent implements OnInit {
     this.userForm.controls['password'].updateValueAndValidity();
     }
     this.userForm.patchValue(this.data)
+
+    // Add value change listener for password field
+    this.userForm.get('password').valueChanges.subscribe(value => {
+      const passwordControl = this.userForm.get('password');
+      if (value) {
+        passwordControl.setValidators([
+          Validators.required,
+          Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,16}$')
+        ]);
+      } else {
+        passwordControl.clearValidators();
+      }
+      passwordControl.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+    });
+
+  }
+
+  togglePasswordField() {
+    this.showPasswordField = !this.showPasswordField;
+
+    if (this.showPasswordField) {
+      this.userForm.get('password').setValidators([
+        Validators.required,
+        Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,16}$')
+      ]);
+    } else {
+      this.userForm.get('password').clearValidators();
+      this.userForm.get('password').reset();
+    }
+    this.userForm.get('password').updateValueAndValidity();
   }
 
   cancel(){
@@ -89,6 +128,7 @@ export class CustomerFormComponent implements OnInit {
     city  : tmp.city,
     pincode:tmp.pincode,
     cusType:tmp.cusType,
+    gst:tmp.gst,
 
     
   }
@@ -106,7 +146,10 @@ export class CustomerFormComponent implements OnInit {
 
         this.formData.append('userName',tmp.userName) 
         this.formData.append('email', tmp.email);
-        if((tmp.password != "")){
+        // if((tmp.password != "")){
+        //   this.formData.append('password', tmp.password);
+        // }
+        if (tmp.password) {
           this.formData.append('password', tmp.password);
         }
  

src/app/pages/customer/customer.component.html

@@ -86,12 +86,23 @@
       [width]="4"> 
 
       </ng-data-table-column> 
+
+      <ng-data-table-column 
+      [field]="'gst'"
+      [sortable]="false"
+      [title]="'GST No'"
+      [filterable]="false"
+      [width]="5"> 
+      
+      </ng-data-table-column> 
+
+
       <ng-data-table-column 
       [field]="'isActive'"
       [sortable]="false"
       [title]="'Status'"
       [filterable]="false"
-      [width]="4"> 
+      [width]="5"> 
       <ng-template #ngDataTableCell  let-row="row">
         <td  >
           <div   style="display: flex; align-items: center;">
@@ -114,6 +125,10 @@
         </td> 
         </ng-template>
       </ng-data-table-column> 
+
+    
+
+
       <ng-data-table-column 
       [field]="'role'"
       [sortable]="false"
@@ -122,13 +137,6 @@
       [width]="3"> 
 
 
-
-
-
-
-
-
-   
       <ng-template #ngDataTableCell  let-row="row">
       <td  >
         <div class="align-center" style="display: flex; align-items: center;">

src/app/pages/customer/customer.component.ts

@@ -81,6 +81,7 @@ export class CustomerComponent  {
       
     
      
+     
     },
   };
   searchTerm:any=[];filteredItems:any=[];
@@ -275,6 +276,7 @@ export class CustomerComponent  {
        customer.forEach((element:any, index) => {
         element.index = index     +1    
         element.type =element['CusDetails.cusType']
+        element.gst =element['CusDetails.gst']
 
       });
       this.customer = customer

src/app/pages/drivery-sheet/drivery-sheet.component.html

@@ -43,14 +43,45 @@
                 autocomplete="off"
                 [(ngModel)]="selectedDateRange"
                 name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/> -->
-                <nb-select selected=""    style="width: 100% !important;margin-left: 2rem;"     >
+
+                <nb-select [custom]="true" placeholder="Select Drivers" [autoClose]="false" style="width: 100% !important;margin-left: 2rem;">
+  
+                  <!-- Search Input -->
+                  <nb-option>
+                    <input
+                      nbInput
+                      placeholder="Search Driver..."
+                      [(ngModel)]="searchQuery"
+                      (ngModelChange)="filterDrivers()"
+                      (click)="$event.stopPropagation()"
+                      (keydown)="$event.stopPropagation()"
+                      (keydown.arrowdown)="$event.preventDefault()"
+                      (keydown.arrowup)="$event.preventDefault()"
+                      (keydown.enter)="$event.preventDefault()"
+                      autocomplete="off"
+                      style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
+                    />
+                  </nb-option>
+                
+                  <!-- Display Filtered Options -->
+                  <nb-option
+                    *ngFor="let user of filteredDrivers; index as i"
+                    [value]="user.id"
+                    (click)="val(user)" 
+                  >
+                    {{ user.userName }} 
+                  </nb-option>
+                </nb-select>
+                
+
+                <!-- <nb-select selected=""    style="width: 100% !important;margin-left: 2rem;"     >
                   <nb-option  value="">Select Drivers</nb-option>
             
                 <nb-option   *ngFor="let user of drivers; index as i; first as isFirst " (click)="val(user)"  [value]="user.id
                 ">{{user.userName  }}</nb-option>
               
                 
-              </nb-select>
+              </nb-select> -->
               <button  (click)="generate()" nbButton status="primary" style="margin-left: 2rem;" hero>
                 generate
                  </button> 

src/app/pages/drivery-sheet/drivery-sheet.component.ts

@@ -20,8 +20,21 @@ export class DriverySheetComponent implements OnInit {
     //   moment().subtract(1, 'month').endOf('month')
     // ]
 
-  };productDeatils:any =[];    DateDisplay:any =[];driverName:any =[];  selectDate:any =[]; driverId:any =[];
+  };
-  selectedDateRange:any =[];drivers:any =[];summaryaData:any=[];driverval:any=[];returnSummary:any =[];
+  productDeatils:any =[]; 
+  DateDisplay:any =[];
+  driverName:any =[];
+  selectDate:any =[];
+  driverId:any =[];
+  selectedDateRange:any =[];
+  drivers:any =[];
+  filteredDrivers: any[] = []; // Search query
+  searchQuery: string = '';
+
+  summaryaData:any=[];
+  driverval:any=[];
+  returnSummary:any =[];
+
   constructor(public _api:PageapiService, private router:Router) { }
 
   ngOnInit(): void {
@@ -67,6 +80,18 @@ export class DriverySheetComponent implements OnInit {
       return acc;
     }, []);
   }
+
+     // Filter customers based on search input
+     filterDrivers() {
+      if (this.searchQuery.trim() === '') {
+        this.filteredDrivers = [...this.drivers];
+      } else {
+        this.filteredDrivers = this.drivers.filter(user =>
+          user.userName?.toLowerCase().includes(this.searchQuery.toLowerCase())
+        );
+      }
+    }
+    
   getDriverlistApi(){
    // console.log(this.selectedDateRange)
     let param ={}
@@ -87,6 +112,7 @@ export class DriverySheetComponent implements OnInit {
   
   
       this.drivers = driver
+      this.filteredDrivers = [...this.drivers];
       //  console.log(data)
       
       }

src/app/pages/order/order-form/order-form.component.html

@@ -31,15 +31,41 @@
             <div>  
               <label for="exampleInputEmail1"  class="label">Customer</label> <br />
            <span  *ngIf="fieldTitle == 'View Order'">{{selectCustomer}}</span>
-              <nb-select selected="" [(ngModel)]="selectCustomer"  *ngIf="fieldTitle != 'View Order'" [disabled]="fieldTitle =='Edit Order' ">
+           <!-- {{filteredCustomers | json}} -->
+           <nb-select
+  [(selected)]="selectCustomer"
+  [(ngModel)]="selectCustomer"
+  *ngIf="fieldTitle != 'View Order'"
+  [disabled]="fieldTitle == 'Edit Order'"
+  [custom]="true" placeholder="Select Customer" [autoClose]="false">
   
-                  <nb-option value="" hidden>Select Customer</nb-option>
+  <!-- Search Input -->
+  <nb-option>
+    <input
+      nbInput
+      placeholder="Search Customer..."
+      [(ngModel)]="searchQuery"
+      (ngModelChange)="filterCustomers()"
+      (click)="$event.stopPropagation()"
+      (keydown)="$event.stopPropagation()"
+      (keydown.arrowdown)="$event.preventDefault()"
+      (keydown.arrowup)="$event.preventDefault()"
+      (keydown.enter)="$event.preventDefault()"
+      autocomplete="off"
+      style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
+    />
+  </nb-option>
 
-                  <nb-option   *ngFor="let user of customer; index as i; first as isFirst " (click)="checkType(user)"  [value]="user['CusDetails.cusName']
+  <!-- Display Filtered Options -->
-                  ">{{user['CusDetails.cusName']
+  <nb-option
-                  }}</nb-option>
+    *ngFor="let user of filteredCustomers; index as i"
+    [value]="user['CusDetails.cusName']"
+    (click)="checkType(user)"
+  >
+    {{ user['CusDetails.cusName'] }}
+  </nb-option>
+</nb-select>
        
-                </nb-select> 
                 <hr>
                 <div style="font-size: larger;margin-top: 1rem;margin-bottom: 1rem;">  Shipping Information</div>
                 <div class="row show-grid" *ngIf="product.length>0">
@@ -87,14 +113,42 @@
               
             </nb-select>
 
-            <nb-select (ngModelChange)="onSelectChange1($event)" selected="" placeholder="Select Drivers"  *ngIf="fieldTitle != 'View Order' && selectStatus == 'Out For Delivery'"  [(ngModel)]="selectDriver"   style="width: 57% !important;margin-right: 1rem;margin-top: 1rem;"   >
+            <nb-select [custom]="true" [autoClose]="false" placeholder="Select Drivers"  *ngIf="fieldTitle != 'View Order' && selectStatus == 'Out For Delivery'"  [(ngModel)]="selectDriver"   style="width: 57% !important;margin-right: 1rem;margin-top: 1rem;">
-              <!-- <nb-option  value="">Select Drivers</nb-option> -->
+  
+              <!-- Search Input -->
+              <nb-option>
+                <input
+                  nbInput
+                  placeholder="Search Driver..."
+                  [(ngModel)]="searchDriverQuery"
+                  (ngModelChange)="filterDrivers();onSelectChange1($event)"
+                  (click)="$event.stopPropagation()"
+                  (keydown)="$event.stopPropagation()"
+                  (keydown.arrowdown)="$event.preventDefault()"
+                  (keydown.arrowup)="$event.preventDefault()"
+                  (keydown.enter)="$event.preventDefault()"
+                  autocomplete="off"
+                  style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
+                />
+              </nb-option>
+            
+              <!-- Display Filtered Options -->
+              <nb-option
+                *ngFor="let user of filteredDrivers; index as i"
+                [value]="user.id"
+                (click)="val(user)" 
+              >
+                {{ user.userName }} 
+              </nb-option>
+            </nb-select>
+
+            <!-- <nb-select (ngModelChange)="onSelectChange1($event)" selected="" placeholder="Select Drivers"  *ngIf="fieldTitle != 'View Order' && selectStatus == 'Out For Delivery'"  [(ngModel)]="selectDriver"   style="width: 57% !important;margin-right: 1rem;margin-top: 1rem;"   >
         
             <nb-option   *ngFor="let user of drivers; index as i; first as isFirst "   [value]="user.id
             ">{{user.userName  }}</nb-option>
           
             
-          </nb-select>
+          </nb-select> -->
           <input nbInput   *ngIf="fieldTitle != 'View Order'   && selectStatus == 'Cancelled'" [(ngModel)]="CancelReason"  placeholder="Reason" style=" margin-right: 2%;margin-top: 1rem;"    id="text"> <br />
             <button   *ngIf="fieldTitle != 'View Order'" [disabled]="hiddenBtn" (click)="onSubmit2()" style="margin-top: 1rem;"  type="submit" nbButton status="success" hero>
             Save
@@ -161,14 +215,46 @@
       
       <div class="col-6 col-md-3">
           <div  > 
-            <nb-select  placeholder="Select Product"  [(ngModel)]="fieldGroup.id"    style="width: 100% !important;margin-right: 1rem;" [disabled]="fieldTitle == 'Edit Order' ? !fieldGroup.isNew : false">
+            <nb-select [custom]="true" [autoClose]="false" placeholder="Select Product"  
-              <!-- <nb-option  value="">Select Drivers</nb-option> -->
+            [(ngModel)]="fieldGroup.id"
-              <!-- (click)="onProductSelect(user.id,user.productName)" -->
+            style="width: 100% !important; margin-right: 1rem;"
-            <nb-option   *ngFor="let user of checkProductArray(); index as i; first as isFirst" [value]="user.id"  
+            [disabled]="fieldTitle == 'Edit Order' ? !fieldGroup.isNew : false" 
-            >{{user.productName  }}({{user.skuId  }} )</nb-option>
+            (ngModelChange)="onDropdownChange($event)">
             
+            <!-- Search Input -->
+            <nb-option>
+              <input
+                nbInput
+                placeholder="Search Product..."
+                [(ngModel)]="searchProductQuery"
+                (ngModelChange)="filterProduct()"
+                (click)="$event.stopPropagation()"
+                (keydown)="$event.stopPropagation()"
+                (keydown.arrowdown)="$event.preventDefault()"
+                (keydown.arrowup)="$event.preventDefault()"
+                (keydown.enter)="$event.preventDefault()"
+                autocomplete="off"
+                style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
+              />
+            </nb-option>
           
+            <!-- Display Filtered Options -->
+            <nb-option
+              *ngFor="let user of filteredProducts; index as i"
+              [value]="user.id"
+              (click)="val(user)">
+              {{user.productName}} ({{user.skuId}})
+            </nb-option>
           </nb-select>
+          
+
+            <!-- <nb-select  placeholder="Select Product"  [(ngModel)]="fieldGroup.id"    style="width: 100% !important;margin-right: 1rem;" [disabled]="fieldTitle == 'Edit Order' ? !fieldGroup.isNew : false" (ngModelChange)="onDropdownChange($event)" >
+            <nb-option   *ngFor="let user of checkProductArray(); index as i; first as isFirst" [value]="user.id">
+              {{user.productName}}({{user.skuId  }} )
+            </nb-option>
+          
+            
+          </nb-select> -->
               <!-- <label for="subject" style="    font-weight: 600;">Mixed Gas {{i+1}}:</label>  -->
    
         </div>
@@ -180,13 +266,20 @@
           <input nbInput style="width: 50%;"  *ngIf="fieldTitle != 'View Order'"    [(ngModel)]="fieldGroup.qty" type="number">
           <!-- <input nbInput type="number" min="0"  [(ngModel)]="item.qty"> -->
        </div>
+       <div>
+   
+        
+        <input nbInput style="width: 50%;"  *ngIf="fieldTitle != 'View Order'"    [(ngModel)]="fieldGroup.productName" type="string" hidden>
+        <!-- <input nbInput type="number" min="0"  [(ngModel)]="item.qty"> -->
+     </div>
       </div>
       <div class="col-6 col-md-4">
         <div  > 
           <!-- <input nbInput type="text"    [(ngModel)]="item.productSpec"> -->
           <label for="subject"  *ngIf="fieldTitle == 'View Order'" style="    font-weight: 600;">({{ fieldGroup.productSpec }})</label> 
-          <input nbInput  *ngIf="fieldTitle != 'View Order' && fieldGroup.id == 6" style="    width: 100%;"  [(ngModel)]="fieldGroup.productSpec" placeholder="eg:- N2:CO2:O2 - 50:30:20" type="text">
+          <input nbInput  *ngIf="fieldTitle != 'View Order' && fieldGroup.productName == 'Mixed Gas'" style="    width: 100%;"  [(ngModel)]="fieldGroup.productSpec" placeholder="eg:- N2:CO2:O2 - 50:30:20" type="text">
-      </div>
+          <!-- fieldGroup.productName == 'Mixed Gas' -->
+        </div>
       </div>
 
       <div class="col-6 col-md-3">

src/app/pages/order/order-form/order-form.component.ts

@@ -31,9 +31,15 @@ class Invoice{
 })
 export class OrderFormComponent implements OnInit {
   customer:any =[];
-  product:any =[];ResultDisplay:any =[];
+  // Filtered customer list for display
+  filteredCustomers: any[] = []; // Search query
+  searchQuery: string = '';
+    product:any =[];
+    ResultDisplay:any =[];
+  // Selected customer
+  selectCustomer: string | null = null;
   mixedGas:any =[];productfull:any=[];
-  selectCustomer:any ="";
+  // selectCustomer:any ="";
   items = [
     { label: 'Item 1', quantity: 0 },
     { label: 'Item 2', quantity: 0 },
@@ -53,14 +59,20 @@ fieldTitle:any ='New Order'
   position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
   preventDuplicates = false;
   status: NbComponentStatus = 'primary'; 
-  inputFieldGroups:any = [{id:'', qty: '1', productSpec: '' }]; 
+  inputFieldGroups:any = [{id:'', qty: '1', productSpec: '' , productName : '' }]; 
-  selectCustomerData :any =[];selectStatus:any =[];CancelReason:any =[];selectDriver:any =[];drivers:any =[];
+  selectCustomerData :any =[];selectStatus:any =[];CancelReason:any =[];selectDriver:any =[];
+  drivers:any =[];
+  filteredDrivers: any[] = []; // Search query
+  searchDriverQuery: string = '';
   invoice = new Invoice(); 
   hiddenBtn= false;
   dropdown_data: any = null;
   delArr:any=[]
   selectedProductId: number | undefined = null;
   addFormBtn: any;
+  selectedProductName: any;
+  filteredProducts: any[] = [];
+  searchProductQuery: string = '';
    constructor(private dialogService: NbDialogService,private route :ActivatedRoute,private router: Router,public _api:PageapiService,private toastrService: NbToastrService,private service: SmartTableData ,private windowService: NbWindowService) {
 
     this._api.orderDetails_observable$.subscribe((res) => {
@@ -143,6 +155,19 @@ fieldTitle:any ='New Order'
 
  
    
+  }
+
+   // Filter customers based on search input
+   filterCustomers() {
+    if (this.searchQuery.trim() === '') {
+      this.filteredCustomers = [...this.customer];
+    } else {
+      this.filteredCustomers = this.customer.filter(user =>
+        user['CusDetails.cusName']
+          ?.toLowerCase()
+          .includes(this.searchQuery.toLowerCase())
+      );
+    }
   }
 
  
@@ -161,6 +186,7 @@ fieldTitle:any ='New Order'
       });
       console.log(customer)
       this.customer  = customer
+      this.filteredCustomers = [...this.customer];
       if(  Object.keys(this.setData).length != 0){
       localStorage.setItem('cusId', this.setData['OrderDetails.CusDetails.id'])
       localStorage.setItem('driverId',this.setData.driverId)
@@ -233,6 +259,8 @@ fieldTitle:any ='New Order'
 
       this.product = product
 
+      this.filteredProducts = [...this.product];
+
       console.log(this.product)
      // this.productfull = product
       if(this.setData != undefined){
@@ -674,45 +702,47 @@ console.log(filteredItems)
 
   getAnswerProduct(orderId){
 
-    console.log(orderId)
+            console.log(orderId)
 
             
 
-    let param={orderId:orderId}
+      let param={orderId:orderId}
-    this._api.getProductList(param).subscribe(res => {
+      this._api.getProductList(param).subscribe(res => {
           
       if(res.status == 200){
 
-let result = res.data
+        let result = res.data
 
-this.ResultDisplay = result
+        this.ResultDisplay = result
-console.log(result)
+        console.log(result)
-  this.inputFieldGroups =[];
+          this.inputFieldGroups =[];
 
-// setTimeout(() => {
+        // setTimeout(() => {
+          console.log('gwm');
+          console.log(result);
+
+        result.forEach(element => { 
+
+          this.inputFieldGroups.push({id:parseInt(element.productId ) , qty: element.qty, productSpec: element.productSpec , primaryId:element.id ,
+                                    productName :element.productName });
           
 
-result.forEach(element => { 
+        })
+        // }, 1000);
+        console.log(  this.inputFieldGroups);
 
-  this.inputFieldGroups.push({id:parseInt(element.productId ) , qty: element.qty, productSpec: element.productSpec , primaryId:element.id})
+        result.forEach(element => {
+          console.log(element)
+          if(element.ProductDetails.length>0){
 
           
-})
+          // if(element.ProductDetails[0].productName  =="Mixed Gas"){
-// }, 1000);
+          //   console.log("hiiii")
-console.log(  this.inputFieldGroups);
+          //   element.name = element.ProductDetails[0].productName 
-
+          //   element.qty = parseInt(element.qty)
-result.forEach(element => {
+          //   element.price = this.setData['OrderDetails.CusDetails.cusType']
-  console.log(element)
+          //   this.invoice.products.push(element)
-  if(element.ProductDetails.length>0){
+          // }
-
-  
-  // if(element.ProductDetails[0].productName  =="Mixed Gas"){
-  //   console.log("hiiii")
-  //   element.name = element.ProductDetails[0].productName 
-  //   element.qty = parseInt(element.qty)
-  //   element.price = this.setData['OrderDetails.CusDetails.cusType']
-  //   this.invoice.products.push(element)
-  // }
 }
   
     
@@ -811,6 +841,7 @@ getDriverlistApi(){
 
 
     this.drivers = driver
+    this.filteredDrivers = [...this.drivers];
     if(this.setData != undefined){
       if(  Object.keys(this.setData).length != 0){
     this.selectDriver = parseInt(this.setData.driverId)
@@ -820,6 +851,17 @@ getDriverlistApi(){
   })
 }
 
+     // Filter customers based on search input
+     filterDrivers() {
+      if (this.searchDriverQuery.trim() === '') {
+        this.filteredDrivers = [...this.drivers];
+      } else {
+        this.filteredDrivers = this.drivers.filter(user =>
+          user.userName?.toLowerCase().includes(this.searchDriverQuery.toLowerCase())
+        );
+      }
+    }
+
 
 onSelectChange(newValue: string) {
   // Handle the selected value change here
@@ -844,6 +886,15 @@ onSelectChange1(newValue: string) {
     this.hiddenBtn = false;
   }
 }
+
+
+
+notify(id,ordId,cusName){
+  let obj = { "id" : id , "ordId" : ordId , 'cusName' : cusName }
+  this._api.Notification(obj).subscribe(res => { console.log( "success");
+  })
+  }
+
 onSubmit2(){
  
 
@@ -863,7 +914,7 @@ onSubmit2(){
 
     if(this.selectStatus == "Delivered"){
 
-this.onCreateConfirm()
+     this.onCreateConfirm()
 
     }else{
 
@@ -876,11 +927,16 @@ this.onCreateConfirm()
  
      
      this._api.CreateOrder (param).subscribe(res => {
-       if (res.status == 200) {
- console.log(res)
- this.showToast('success', 'Updated Successfully', '');
       
- this.selectStatus =[];
+       if (res.status == 200) {
+        console.log(res)
+        this.showToast('success', 'Updated Successfully', '');
+        
+        
+        if(this.selectStatus == "Out For Delivery"){
+           this.notify(this.selectDriver , this.setData.orderId , this.selectCustomer );
+        }
+        this.selectStatus =[];
        }else{
         this.showToast('warning', 'Somthing is Wrong...!', '');
        }
@@ -912,28 +968,82 @@ this.onCreateConfirm()
   
 }
 
-checkProductArray() {
+
-  // console.log(this.inputFieldGroups)
+onDropdownChange(event: any) {
-  const hasNullId = this.inputFieldGroups.some((group) => group.id === null);
+  // Find the selected product in the array and get its name
-// console.log(hasNullId)
+  const selectedProduct = this.checkProductArray().find(product => product.id === event);
-if (!hasNullId) {
+  if (selectedProduct) {
-  // There's an object with id = null in the inputFieldGroups array
+    this.selectedProductName = selectedProduct.productName;
-  // console.log('There is an object with id = null');
+  } else {
-  return this.product;
+    this.selectedProductName = ''; // If no product found, clear the selected product name
-} else {
+  }
-  // There is no object with id = null in the inputFieldGroups array
+  console.log(this.selectedProductName);
-   // Filter products based on the condition (productName !== 'Mixed Gas' in inputFieldGroups)
+ 
-   const filteredProducts = this.product.filter((product) => {
+  this.inputFieldGroups.forEach(element => {
-    const isSelected = this.inputFieldGroups.some((group) => group.id === product.id);
+    if(element.id == event){
-    return product.productName === 'Mixed Gas' || !isSelected;
+        element.productName = this.selectedProductName;
+    }
   });
 
+}
+// checkProductArray() {
+//   // console.log(this.inputFieldGroups)
+//     const hasNullId = this.inputFieldGroups.some((group) => group.id === null);
+//   // console.log(hasNullId)
+//   if (!hasNullId) {
+//     // There's an object with id = null in the inputFieldGroups array
+//     // console.log('There is an object with id = null');
+//     return this.product;
+//   } else {
+//     // There is no object with id = null in the inputFieldGroups array
+//     // Filter products based on the condition (productName !== 'Mixed Gas' in inputFieldGroups)
+//     const filteredProducts = this.product.filter((product) => {
+//       const isSelected = this.inputFieldGroups.some((group) => group.id === product.id );
+//       return product.productName === 'Mixed Gas' || !isSelected;
+//     });
+
+//     return filteredProducts;
+//   }
+ 
+
+// }
+
+checkProductArray() {
+  const hasNullId = this.inputFieldGroups.some((group) => group.id === null);
+  
+  let filteredProducts;
+  if (!hasNullId) {
+    filteredProducts = [...this.product]; 
+  } else {
+    filteredProducts = this.product.filter((product) => {
+      const isSelected = this.inputFieldGroups.some((group) => group.id === product.id);
+      return product.productName === 'Mixed Gas' || !isSelected;
+    });
+  }
+
+  // Apply search filtering
+  if (this.searchProductQuery.trim() !== '') {
+    return filteredProducts.filter(product =>
+      product.productName?.toLowerCase().includes(this.searchProductQuery.toLowerCase()) ||
+      product.skuId?.toString().toLowerCase().includes(this.searchProductQuery.toLowerCase())
+    );
+  }
+
   return filteredProducts;
 }
 
-
+filterProduct() {
+  if (this.searchProductQuery.trim() === '') {
+    this.filteredProducts = this.checkProductArray();
+  } else {
+    this.filteredProducts = this.checkProductArray().filter(product =>
+      product.productName?.toLowerCase().includes(this.searchProductQuery.toLowerCase()) ||
+      product.skuId?.toString().toLowerCase().includes(this.searchProductQuery.toLowerCase())
+    );
+  }
 }
 
+
 addInputFieldGroup() {
   if(this.fieldTitle != 'New Order'){    
     console.log(this.product)
@@ -941,9 +1051,11 @@ addInputFieldGroup() {
     console.log(activeProductList)
     this.product = activeProductList
   }
+  this.searchProductQuery = ''
+  this.filteredProducts = this.product
   // this.inputFieldGroups.push({id:null, qty: '1', productSpec: '' });
    // Add a new input field group to the array
-  const newGroup = { id: null, qty: 1, productSpec: '', isNew: true };
+  const newGroup = { id: null, qty: 1, productSpec: '', isNew: true , productName : '' };
   this.inputFieldGroups.push(newGroup);
   console.log(this.inputFieldGroups)
   //this.childButtonEvent.emit( this.inputFieldGroups);

src/app/pages/order/order.component.html

@@ -2,46 +2,14 @@
     <nb-card-header>
    
       <div class="row show-grid">
-        <div class="col-md-2">
+        <div class="col-md-5">
-          <div>   <nb-icon icon="shopping-bag-outline"></nb-icon>   Order Management</div>
+          <div style="font-size: 20px;">   <nb-icon icon="shopping-bag-outline"></nb-icon>   Order Management</div>
        
         </div>
 
-        <div class="col-md-3">
-          <div style="    text-align: end;"> 
-            <!-- <button  (click)="Assign()" nbButton status="primary" hero>
-              Assign Driver
-              </button> --> 
-              <input nbInput placeholder="Pick Date Range" [nbDatepicker]="formpicker" [(ngModel)]="dateRangeValue"  #dateRangeInput>
-              <nb-rangepicker #formpicker (rangeChange)="manipulateDate($event)"[startDate]="defaultStartDate" [endDate]="defaultEndDate" ></nb-rangepicker>
  
-              <!-- <input  nbInput class="fx-date-range" type="text" 
-              ngxDaterangepickerMd
-              [locale]="{applyLabel: 'okay', format: 'MM/DD/YY'}"
-              [drops]="'down'"
-              [opens]="'right'"
-              [ranges]="ranges"
-              [showCustomRangeLabel]="true"
-              [alwaysShowCalendars]="true"
-              [keepCalendarOpeningWithRange]="true"
-              [showCancel]="true"
-              autocomplete="off"
-              [(ngModel)]="selectedDateRange"
-              name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/> -->
 
-        </div>
+        <div class="col-md-7">
-        </div>
-        <div class="col-md-3">
-          <div style="    text-align: end;"> 
-            <!-- <button  (click)="Assign()" nbButton status="primary" hero>
-              Assign Driver
-              </button> -->
-              <input [(ngModel)]="searchTerm" (keyup)="filterItems()"  style="width: 100%;" nbInput id="mobileNo" type="text" placeholder="Search" >
-          
-        </div>
-        </div>
-
-        <div class="col-md-4">
           <div  style="    text-align: end;"> 
             <button  (click)="refresh()" nbTooltip="Refresh" nbTooltipPlacement="top"   nbButton status="warning" hero>
               <nb-icon icon="flip-outline"></nb-icon>  
@@ -56,6 +24,17 @@
         </div>
         </div>
       </div>
+
+      <div class="row show-grid" style="margin-top: 1rem;">
+        <div class="col-md-6"  style="text-align: start;">
+          <label style="margin-right: 10px;">Select Start & End Date    </label>
+          <input nbInput placeholder="Pick Date Range" [nbDatepicker]="formpicker" [(ngModel)]="dateRangeValue"  #dateRangeInput>
+          <nb-rangepicker #formpicker (rangeChange)="manipulateDate($event)"[startDate]="defaultStartDate" [endDate]="defaultEndDate" ></nb-rangepicker>
+        </div>
+        <div class="col-md-6" style="text-align: end;">
+          <input [(ngModel)]="searchTerm" (keyup)="filterItems()"  style="width: 100%;" nbInput id="mobileNo" type="text" placeholder="Search" >
+        </div>
+      </div>
     </nb-card-header>
   
     <nb-card-body style="padding-top: 0px;">
@@ -193,7 +172,7 @@
       <div   style="display: flex; align-items: center;">
    
         <span    class="checkTxt"    >
-          {{row.item.updatedAt | date :'dd/MM/yy hh:mm:ss'}} 
+          {{row.item.createdAt | date :'dd/MM/yy hh:mm:ss'}} 
            </span>
       </div>
     
@@ -201,24 +180,20 @@
     </ng-template>
 
   </ng-data-table-column> 
+
+
+
+
+
+
+
+
   <ng-data-table-column 
   [field]="'status'"
-  
-
   [title]="'Status'"
   [sortable]="false"
-   
-  
   [width]="5"> 
 
-
-
-
-
-
-
-
-
   <ng-template #ngDataTableCell  let-row="row">
   <td  (click)="onViewConfirm(row.item)">
     <div   style="display: flex; align-items: center;">
@@ -431,6 +406,35 @@
       </ng-template>
   
     </ng-data-table-column> 
+
+
+    <ng-data-table-column 
+    [field]="'productDetails'"
+    [sortable]="false"
+    [title]="'Products'"
+    [filterable]="false"
+    [width]="4"> 
+  
+    <ng-template #ngDataTableCell let-row="row">
+      <td (click)="onViewConfirm(row.item)">
+        <div>
+          <ol>
+            <li *ngFor="let product of row.item.productDetails; let i = index">
+              <div *ngIf="i+1 != 1">     |     </div>
+             <span> {{ i+1}}. Product Name: {{ product.productName }} - {{ product.qty }}  </span>
+              <span *ngIf="product.qty > 1"> Nos </span><span *ngIf="product.qty == 1"> No </span>
+              <div *ngIf="product.productSpec !== null"> , Mixed Gas: {{ product.productSpec }}</div>
+            </li>
+          </ol>
+        </div>
+      </td>
+    </ng-template>
+    
+  
+    </ng-data-table-column> 
+
+
+
     <ng-data-table-column 
     [field]="'status'" 
     [title]="'Status'"

src/app/pages/pages-menu.ts

@@ -16,12 +16,12 @@ export const MENU_ITEMS: NbMenuItem[] = [
         link: '/pages/order',
       },
       {
-        title: 'Delivery Summary',
+        title: 'Out For Delivery Sheet',
-        link: '/pages/summary',
+        link: '/pages/delivery-sheet',
       },
       {
-        title: 'Delivery Sheet',
+        title: 'Delivered Summary',
-        link: '/pages/delivery-sheet',
+        link: '/pages/summary',
       },
       {
         title: 'Return Sheet',

src/app/pages/return-sheet/return-sheet.component.html

@@ -44,14 +44,43 @@
                 [(ngModel)]="selectedDateRange"
                 name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/> -->
 
-                <nb-select selected=""    style="width: 100% !important;margin-left: 2rem;"     >
+                <nb-select [custom]="true" placeholder="Select Drivers" [autoClose]="false" style="width: 100% !important;margin-left: 2rem;">
+  
+                  <!-- Search Input -->
+                  <nb-option>
+                    <input
+                      nbInput
+                      placeholder="Search Driver..."
+                      [(ngModel)]="searchQuery"
+                      (ngModelChange)="filterDrivers()"
+                      (click)="$event.stopPropagation()"
+                      (keydown)="$event.stopPropagation()"
+                      (keydown.arrowdown)="$event.preventDefault()"
+                      (keydown.arrowup)="$event.preventDefault()"
+                      (keydown.enter)="$event.preventDefault()"
+                      autocomplete="off"
+                      style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
+                    />
+                  </nb-option>
+                
+                  <!-- Display Filtered Options -->
+                  <nb-option
+                    *ngFor="let user of filteredDrivers; index as i"
+                    [value]="user.id"
+                    (click)="val(user)" 
+                  >
+                    {{ user.userName }} 
+                  </nb-option>
+                </nb-select>
+
+                <!-- <nb-select selected=""    style="width: 100% !important;margin-left: 2rem;"     >
                   <nb-option  value="">Select Drivers</nb-option>
             
                 <nb-option   *ngFor="let user of drivers; index as i; first as isFirst " (click)="val(user)"  [value]="user.id
                 ">{{user.userName  }}</nb-option>
               
                 
-              </nb-select>
+              </nb-select> -->
               <button  (click)="generate()" style="margin-left: 2rem;"  nbButton status="primary" hero>
                 generate
                  </button> 

src/app/pages/return-sheet/return-sheet.component.ts

@@ -23,7 +23,11 @@ export class ReturnSheetComponent implements OnInit {
     // ]
 
   };productDeatils:any =[];    DateDisplay:any =[];driverName:any =[];  selectDate:any =[]; driverId:any =[];
-  selectedDateRange:any =[];drivers:any =[];summaryaData:any=[];driverval:any=[];returnSummary:any =[];
+  selectedDateRange:any =[];
+  drivers:any =[];
+  filteredDrivers: any[] = []; // Search query
+  searchQuery: string = '';
+  summaryaData:any=[];driverval:any=[];returnSummary:any =[];
   constructor(public _api:PageapiService, private router:Router) { }
 
   ngOnInit(): void {
@@ -69,6 +73,19 @@ export class ReturnSheetComponent implements OnInit {
       return acc;
     }, []);
   }
+
+   // Filter customers based on search input
+   filterDrivers() {
+    if (this.searchQuery.trim() === '') {
+      this.filteredDrivers = [...this.drivers];
+    } else {
+      this.filteredDrivers = this.drivers.filter(user =>
+        user.userName?.toLowerCase().includes(this.searchQuery.toLowerCase())
+      );
+    }
+  }
+
+
   getDriverlistApi(){
    // console.log(this.selectedDateRange)
     let param ={}
@@ -89,6 +106,7 @@ export class ReturnSheetComponent implements OnInit {
   
   
       this.drivers = driver
+      this.filteredDrivers = [...this.drivers];
       //  console.log(data)
       
       }

src/app/pages/summary-list/summary-list.component.html

@@ -44,14 +44,42 @@
                 autocomplete="off"
                 [(ngModel)]="selectedDateRange"
                 name="daterange" placeholder="Fliter Date Wise" (change)="dateWiseFilter()"/> -->
-                <nb-select selected=""     style="width: 100% !important;margin-left: 2rem;"     >
+                <nb-select [custom]="true" placeholder="Select Drivers" [autoClose]="false" style="width: 100% !important;margin-left: 2rem;">
+  
+                  <!-- Search Input -->
+                  <nb-option>
+                    <input
+                      nbInput
+                      placeholder="Search Driver..."
+                      [(ngModel)]="searchQuery"
+                      (ngModelChange)="filterDrivers()"
+                      (click)="$event.stopPropagation()"
+                      (keydown)="$event.stopPropagation()"
+                      (keydown.arrowdown)="$event.preventDefault()"
+                      (keydown.arrowup)="$event.preventDefault()"
+                      (keydown.enter)="$event.preventDefault()"
+                      autocomplete="off"
+                      style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;"
+                    />
+                  </nb-option>
+                
+                  <!-- Display Filtered Options -->
+                  <nb-option
+                    *ngFor="let user of filteredDrivers; index as i"
+                    [value]="user.id"
+                    (click)="val(user)" 
+                  >
+                    {{ user.userName }} 
+                  </nb-option>
+                </nb-select>
+
+                <!-- <nb-select selected=""     style="width: 100% !important;margin-left: 2rem;"     >
                   <nb-option  value="">Select Drivers</nb-option>
-                  <!-- [(ngModel)]="dId" -->
                 <nb-option    *ngFor="let user of drivers; index as i; first as isFirst " (click)="val(user)"  [value]="user.id
                 ">{{user.userName  }}</nb-option>
               
                 
-              </nb-select>
+              </nb-select> -->
 
               <button  style=" margin-left: 2rem;"    (click)="generate()" nbButton status="primary" hero>
                 generate

src/app/pages/summary-list/summary-list.component.ts

@@ -23,8 +23,17 @@ export class SummaryListComponent implements OnInit {
     //   moment().subtract(1, 'month').startOf('month'),
     //   moment().subtract(1, 'month').endOf('month')
     // ]
-  };selectDate:any =[];driverId:any =[];DateDisplay:any =[];driverName:any =[];
+  };selectDate:any =[];
-  selectedDateRange:any =[];drivers:any =[];summaryaData:any=[];driverval:any=[];returnSummary:any =[];
+  driverId:any =[];
+  DateDisplay:any =[];
+  driverName:any =[];
+  selectedDateRange:any =[];
+  drivers:any =[];
+  filteredDrivers: any[] = []; // Search query
+  searchQuery: string = '';
+  summaryaData:any=[];
+  driverval:any=[];
+  returnSummary:any =[];
 
   minimize = false;
   maximize = false;
@@ -92,6 +101,18 @@ const formattedDate = newDate.toString();
       return acc;
     }, []);
   }
+
+       // Filter customers based on search input
+       filterDrivers() {
+        if (this.searchQuery.trim() === '') {
+          this.filteredDrivers = [...this.drivers];
+        } else {
+          this.filteredDrivers = this.drivers.filter(user =>
+            user.userName?.toLowerCase().includes(this.searchQuery.toLowerCase())
+          );
+        }
+      }
+
   getDriverlistApi(){
    // console.log(this.selectedDateRange)
     let param ={}
@@ -112,6 +133,7 @@ const formattedDate = newDate.toString();
   
   
       this.drivers = driver
+      this.filteredDrivers = [...this.drivers];
       //  console.log(data)
       
       }

src/environments/environment.ts

@@ -9,7 +9,8 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-   apiEndpoint:'https://dev.venbait.in/vnms/api/',
+   apiEndpoint:'https://api.vnms.in/api/',
+  //  apiEndpoint:'https://dev.venbait.in/vnms/api/',
   //  apiEndpoint:'http://localhost:8081/api/',
   mailUrl:'',
   production: false,