searchable dropdown added

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
-                  <nb-option value="" hidden>Select Customer</nb-option>
+  [(selected)]="selectCustomer"
-                
+  [(ngModel)]="selectCustomer"
-                  <nb-option   *ngFor="let user of customer; index as i; first as isFirst " (click)="checkType(user)"  [value]="user['CusDetails.cusName']
+  *ngIf="fieldTitle != 'View Order'"
-                  ">{{user['CusDetails.cusName']
+  [disabled]="fieldTitle == 'Edit Order'"
-                  }}</nb-option>
+  [custom]="true" placeholder="Select Customer" [autoClose]="false">
-                  
+  
-                </nb-select> 
+  <!-- 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>
+
+  <!-- Display Filtered Options -->
+  <nb-option
+    *ngFor="let user of filteredCustomers; index as i"
+    [value]="user['CusDetails.cusName']"
+    (click)="checkType(user)"
+  >
+    {{ user['CusDetails.cusName'] }}
+  </nb-option>
+</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,15 +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" (ngModelChange)="onDropdownChange($event)" >
+            <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;"
+            [disabled]="fieldTitle == 'Edit Order' ? !fieldGroup.isNew : false" 
+            (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>
+          </nb-select> -->
               <!-- <label for="subject" style="    font-weight: 600;">Mixed Gas {{i+1}}:</label>  -->
    
         </div>

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 },
@@ -54,7 +60,10 @@ fieldTitle:any ='New Order'
   preventDuplicates = false;
   status: NbComponentStatus = 'primary'; 
   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;
@@ -62,6 +71,8 @@ fieldTitle:any ='New Order'
   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) => {
@@ -93,7 +104,7 @@ fieldTitle:any ='New Order'
   
     })
 
-   }
+   }    
    receivedMessageHandler(res){
     console.log(res, this.productfull)
    let tmp =[];
@@ -121,7 +132,7 @@ fieldTitle:any ='New Order'
   }
   ngOnInit() {
 
-    
+
     this.getDriverlistApi()
     console.log(this.setData)
     // this.dropdown_data = this.setData['OrderDetails.status'];
@@ -144,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())
+      );
+    }
   }
 
  
@@ -162,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)
@@ -234,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){
@@ -814,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)
@@ -823,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
@@ -928,6 +967,8 @@ onSubmit2(){
 //      })
   
 }
+
+
 onDropdownChange(event: any) {
   // Find the selected product in the array and get its name
   const selectedProduct = this.checkProductArray().find(product => product.id === event);
@@ -945,28 +986,64 @@ onDropdownChange(event: any) {
   });
 
 }
-checkProductArray() {
+// checkProductArray() {
-  // console.log(this.inputFieldGroups)
+//   // console.log(this.inputFieldGroups)
-    const hasNullId = this.inputFieldGroups.some((group) => group.id === null);
+//     const hasNullId = this.inputFieldGroups.some((group) => group.id === null);
-  // console.log(hasNullId)
+//   // console.log(hasNullId)
-  if (!hasNullId) {
+//   if (!hasNullId) {
-    // There's an object with id = null in the inputFieldGroups array
+//     // There's an object with id = null in the inputFieldGroups array
-    // console.log('There is an object with id = null');
+//     // console.log('There is an object with id = null');
-    return this.product;
+//     return this.product;
-  } else {
+//   } else {
-    // There is no object with id = null in the inputFieldGroups array
+//     // There is no object with id = null in the inputFieldGroups array
-    // Filter products based on the condition (productName !== 'Mixed Gas' in inputFieldGroups)
+//     // Filter products based on the condition (productName !== 'Mixed Gas' in inputFieldGroups)
-    const filteredProducts = this.product.filter((product) => {
+//     const filteredProducts = this.product.filter((product) => {
-      const isSelected = this.inputFieldGroups.some((group) => group.id === product.id );
+//       const isSelected = this.inputFieldGroups.some((group) => group.id === product.id );
-      return product.productName === 'Mixed Gas' || !isSelected;
+//       return product.productName === 'Mixed Gas' || !isSelected;
-    });
+//     });
 
-    return filteredProducts;
+//     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)
@@ -974,6 +1051,8 @@ 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 , productName : '' };

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)
       
       }